From 53d66b812d7f28b9067a52dea77610cb5d21bb3c Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 14 Apr 2016 18:33:04 +0200 Subject: [PATCH] =?UTF-8?q?Gestion=20de=20la=20couleur=20de=20@hover=20dif?= =?UTF-8?q?f=C3=A9rente=20de=20.active.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/menu-side.css | 2 +- css/menu-side.css.map | 2 +- css/menu-side.scss | 33 ++++++++++++++------------------- 3 files changed, 16 insertions(+), 21 deletions(-) diff --git a/css/menu-side.css b/css/menu-side.css index 342b193..c75e07a 100755 --- a/css/menu-side.css +++ b/css/menu-side.css @@ -1,2 +1,2 @@ -#WRAPPER>#MENU-SIDE>span{display:block;position:relative;width:calc( 100% - 2*1em - 2*1.5em );padding:.8em 1.5em;padding-left:calc( 1.5em + 2*1em );border-bottom:1px solid transparent;background:url("/f/svg/circle/st/menu-side/29282e") 1em center no-repeat,url("/f/svg/sub/st/menu-side/aaaaaa") right 1.5em center no-repeat;background-size:2em 2em, .5em .5em;color:#666;font-size:.85em;transition:color .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out, border .2s ease-in-out;cursor:pointer}#WRAPPER>#MENU-SIDE>span.active{background:url("/f/svg/circle/st/menu-side/399ced") 1em center no-repeat,url("/f/svg/sub-active/st/menu-side/ffffff") right 1.5em center no-repeat;background-size:2em 2em, .5em .5em}#WRAPPER>#MENU-SIDE>span:not(.active):hover{background:url("/f/svg/circle/st/menu-side/29282e") 1em center no-repeat,url("/f/svg/sub/st/menu-side/ffffff") right 1.5em center no-repeat;background-size:2em 2em, .5em .5em}#WRAPPER>#MENU-SIDE>span>svg,#WRAPPER>#MENU-SIDE>span>svg *{position:absolute;top:calc( 50% - 1em/2 );left:1.5em;width:1em;height:1em;fill:#939393 !important;transition:fill .2s ease-in-out}#WRAPPER>#MENU-SIDE>span:not(.active):hover,#WRAPPER>#MENU-SIDE>span.active{border-bottom-color:#2290eb;background-color:#399ced;color:#fff}#WRAPPER>#MENU-SIDE>span:not(.active):hover>svg,#WRAPPER>#MENU-SIDE>span:not(.active):hover>svg *,#WRAPPER>#MENU-SIDE>span.active>svg,#WRAPPER>#MENU-SIDE>span.active>svg *{fill:#fff !important}#WRAPPER>#MENU-SIDE>span:not(.icon)+div.sub>span{display:block;position:relative;width:calc( 100% - 1.5em - 2.5em );padding:.5em 1.5em;padding-left:2.5em;background:#313541 url("/f/svg/sub/st/menu-side/888888") 1.5em center no-repeat;background-size:.5em;color:#7a7a7a;font-size:.85em;cursor:pointer;transition:color .2s ease-in-out}#WRAPPER>#MENU-SIDE>span:not(.icon)+div.sub>span:hover,#WRAPPER>#MENU-SIDE>span:not(.icon)+div.sub>span.active{color:#fff;background-image:url("/f/svg/sub/st/menu-side/ffffff")}#WRAPPER>#MENU-SIDE>span:not(.icon):not(.active)+div.sub>span{display:none} +#WRAPPER>#MENU-SIDE>span{display:block;position:relative;width:calc( 100% - 2*1em - 2*1.5em );padding:.8em 1.5em;padding-left:calc( 1.5em + 2*1em );border-bottom:1px solid transparent;background:url("/f/svg/sub/st/menu-side/aaaaaa") right 1.5em center no-repeat;background-size:.5em .5em;color:#666;font-size:.85em;transition:color .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out, border .2s ease-in-out;cursor:pointer}#WRAPPER>#MENU-SIDE>span>svg,#WRAPPER>#MENU-SIDE>span>svg *{position:absolute;top:calc( 50% - 1em/2 );left:1.5em;width:1em;height:1em;fill:#939393 !important;transition:fill .2s ease-in-out}#WRAPPER>#MENU-SIDE>span:not(.active):hover{background-image:url("/f/svg/sub/st/menu-side/000000");color:#000}#WRAPPER>#MENU-SIDE>span:not(.active):hover>svg,#WRAPPER>#MENU-SIDE>span:not(.active):hover>svg *{fill:#000 !important}#WRAPPER>#MENU-SIDE>span.active{border-bottom-color:#2290eb;background-color:#399ced;background-image:url("/f/svg/sub-active/st/menu-side/ffffff");color:#fff}#WRAPPER>#MENU-SIDE>span.active>svg,#WRAPPER>#MENU-SIDE>span.active>svg *{fill:#fff !important}#WRAPPER>#MENU-SIDE>span:not(.icon)+div.sub>span{display:block;position:relative;width:calc( 100% - 1.5em - 2.5em );padding:.5em 1.5em;padding-left:2.5em;background:#313541 url("/f/svg/sub/st/menu-side/888888") 1.5em center no-repeat;background-size:.5em;color:#7a7a7a;font-size:.85em;cursor:pointer;transition:color .2s ease-in-out}#WRAPPER>#MENU-SIDE>span:not(.icon)+div.sub>span:hover,#WRAPPER>#MENU-SIDE>span:not(.icon)+div.sub>span.active{color:#fff;background-image:url("/f/svg/sub/st/menu-side/ffffff")}#WRAPPER>#MENU-SIDE>span:not(.icon):not(.active)+div.sub>span{display:none} /*# sourceMappingURL=menu-side.css.map */ diff --git a/css/menu-side.css.map b/css/menu-side.css.map index 20922bd..29f0c20 100755 --- a/css/menu-side.css.map +++ b/css/menu-side.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAMC,wBAAQ,CACP,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,8BAA8B,CAEtC,OAAO,CAAE,UAAU,CACnB,YAAY,CAAE,qBAAqB,CAEnC,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CAAE,gIAC4D,CACxE,eAAe,CAAE,kBAAkB,CAiBnC,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,KAAK,CAEhB,UAAU,CAAE,qGAAqG,CAEjH,MAAM,CAAE,OAAO,CAlBf,+BAAQ,CACP,UAAU,CAAE,uIACkE,CAC9E,eAAe,CAAE,kBAAkB,CAIpC,2CAAoB,CACnB,UAAU,CAAE,gIAC2D,CACvE,eAAe,CAAE,kBAAkB,CAWpC,2DAAkB,CACjB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,mBAAmB,CACxB,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CAEZ,IAAI,CAAE,kBAAmB,CACzB,UAAU,CAAE,oBAAoB,CAKjC,2EACQ,CACP,mBAAmB,CAAE,OAA4B,CAGjD,gBAAgB,CCvDA,OAAO,CDwDvB,KAAK,CClDU,IAAO,CDoDtB,2KAAkB,CACjB,IAAI,CAAE,eAAe,CAYxB,gDAAkC,CACjC,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,4BAA4B,CAEpC,OAAO,CAAE,UAAU,CACnB,YAAY,CAAE,KAAK,CAEnB,UAAU,CAAE,oEAAqE,CACjF,eAAe,CAAE,IAAI,CAErB,KAAK,CAAE,OAAoB,CAC3B,SAAS,CAAE,KAAK,CAEhB,MAAM,CAAE,OAAO,CAEf,UAAU,CAAE,qBAAqB,CAGjC,8GACQ,CACP,KAAK,CCtFU,IAAO,CDuFtB,gBAAgB,CAAE,qCAAqC,CAKzD,6DAA+C,CAC9C,OAAO,CAAE,IAAI", +"mappings": "AAMC,wBAAQ,CACP,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,8BAA8B,CAEtC,OAAO,CAAE,UAAU,CACnB,YAAY,CAAE,qBAAqB,CAEnC,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CAAE,kEAAkE,CAC9E,eAAe,CAAE,SAAS,CAG1B,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,KAAK,CAEhB,UAAU,CAAE,qGAAqG,CAEjH,MAAM,CAAE,OAAO,CAGf,2DAAkB,CACjB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,mBAAmB,CACxB,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CAEZ,IAAI,CAAE,kBAAmB,CACzB,UAAU,CAAE,oBAAoB,CAKjC,2CAAoB,CACnB,gBAAgB,CAAE,qCAAqC,CACvD,KAAK,CAAE,IAAI,CAEX,iGAAkB,CACjB,IAAI,CAAE,eAAe,CAKvB,+BAAQ,CACP,mBAAmB,CAAE,OAA4B,CAGjD,gBAAgB,CCjDA,OAAO,CDkDvB,gBAAgB,CAAE,4CAA4C,CAC9D,KAAK,CC7CU,IAAO,CD+CtB,yEAAkB,CACjB,IAAI,CAAE,eAAe,CAYxB,gDAAkC,CACjC,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,4BAA4B,CAEpC,OAAO,CAAE,UAAU,CACnB,YAAY,CAAE,KAAK,CAEnB,UAAU,CAAE,oEAAqE,CACjF,eAAe,CAAE,IAAI,CAErB,KAAK,CAAE,OAAoB,CAC3B,SAAS,CAAE,KAAK,CAEhB,MAAM,CAAE,OAAO,CAEf,UAAU,CAAE,qBAAqB,CAGjC,8GACQ,CACP,KAAK,CCjFU,IAAO,CDkFtB,gBAAgB,CAAE,qCAAqC,CAKzD,6DAA+C,CAC9C,OAAO,CAAE,IAAI", "sources": ["menu-side.scss","constants.scss"], "names": [], "file": "menu-side.css" diff --git a/css/menu-side.scss b/css/menu-side.scss index c31c8ea..768f87f 100755 --- a/css/menu-side.scss +++ b/css/menu-side.scss @@ -14,24 +14,9 @@ border-bottom: 1px solid transparent; - background: url('/f/svg/circle/st/menu-side/29282e') 1em center no-repeat, - url('/f/svg/sub/st/menu-side/aaaaaa') right 1.5em center no-repeat; - background-size: 2em 2em, .5em .5em; + background: url('/f/svg/sub/st/menu-side/aaaaaa') right 1.5em center no-repeat; + background-size: .5em .5em; - - // Modification du sens de la fleche quand le sous-menu est deroule - &.active{ - background: url('/f/svg/circle/st/menu-side/399ced') 1em center no-repeat, - url('/f/svg/sub-active/st/menu-side/ffffff') right 1.5em center no-repeat; - background-size: 2em 2em, .5em .5em; - } - - // Modification de la couleur de la fleche pour @hover - &:not(.active):hover{ - background: url('/f/svg/circle/st/menu-side/29282e') 1em center no-repeat, - url('/f/svg/sub/st/menu-side/ffffff') right 1.5em center no-repeat; - background-size: 2em 2em, .5em .5em; - } color: #666; font-size: .85em; @@ -53,13 +38,23 @@ } - /* (2) @hover ou .active -> survol souris ou active */ - &:not(.active):hover, + /* (2) Animation de @hover */ + &:not(.active):hover{ + background-image: url('/f/svg/sub/st/menu-side/000000'); + color: #000; + + & > svg, & > svg *{ + fill: #000 !important; + } + } + + /* (3) Animation quand .active */ &.active{ border-bottom-color: darken($theme-fg-primary, 5); // box-shadow: inset 0 0 1em darken($dark-bg-primary, 1); background-color: $theme-fg-primary; + background-image: url('/f/svg/sub-active/st/menu-side/ffffff'); color: $dark-fg-primary; & > svg, & > svg *{