diff --git a/css/constants.scss b/css/constants.scss index c8feea0..4ec0681 100755 --- a/css/constants.scss +++ b/css/constants.scss @@ -7,9 +7,9 @@ $theme-fg: #515151; $theme-fg-primary: #53d192; /* (2) COULEURS DE THEME $DARK */ -$dark-bg: #32323a; +$dark-bg: #313541; $dark-bg-primary: #29282e; -$dark-fg: #dddddd; +$dark-fg: #939393; $dark-fg-primary: #ffffff; diff --git a/css/menu-side.css b/css/menu-side.css index 5f6435f..56ac653 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:1.5em 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/777777") right 1em center no-repeat;background-size:2em 2em, 1em 1em;color:#ddd;text-shadow:1px 1px 0 #26262c;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/29282e") 1em center no-repeat,url("/f/svg/sub-active/st/menu-side/dddddd") right 1em center no-repeat;background-size:2em 2em, 1em 1em}#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:#ddd !important;transition:fill .2s ease-in-out}#WRAPPER>#MENU-SIDE>span:hover,#WRAPPER>#MENU-SIDE>span.active{border-bottom-color:#242329;box-shadow:inset 0 0 1em #27262b;background-color:#29282e;color:#fff;text-shadow:1px 1px 0 #1d1c20}#WRAPPER>#MENU-SIDE>span:hover>svg,#WRAPPER>#MENU-SIDE>span:hover>svg *,#WRAPPER>#MENU-SIDE>span.active>svg,#WRAPPER>#MENU-SIDE>span.active>svg *{fill:#53d192 !important}#WRAPPER>#MENU-SIDE>span.sep{border-bottom:1px solid #4a4a55}#WRAPPER>#MENU-SIDE>span:not(.icon)+div.sub>span{display:block;position:relative;width:calc( 100% - 2*1.5em );padding:.5em 1.5em;padding-left:1.5em;border-bottom:1px solid transparent;background:#242329 url("/f/svg/sub/st/menu-side/888888") 0.5em center no-repeat;background-size:.5em;color:#aaa;font-size:.85em;cursor:pointer;transform:scaleY(1);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{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:#939393;font-size:.85em;text-shadow:1px 1px 0 #262932;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/29282e") 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>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:hover,#WRAPPER>#MENU-SIDE>span.active{border-bottom-color:#242329;box-shadow:inset 0 0 1em #27262b;background-color:#29282e;color:#fff;text-shadow:1px 1px 0 #1d1c20}#WRAPPER>#MENU-SIDE>span:hover>svg,#WRAPPER>#MENU-SIDE>span:hover>svg *,#WRAPPER>#MENU-SIDE>span.active>svg,#WRAPPER>#MENU-SIDE>span.active>svg *{fill:#fff !important}#WRAPPER>#MENU-SIDE>span.sep{border-bottom:1px solid #474d5e}#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;border-bottom:1px solid transparent;background:#242329 url("/f/svg/sub/st/menu-side/888888") 1.5em center no-repeat;background-size:.5em;color:#606060;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 60667ef..7ed96d7 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,WAAW,CACpB,YAAY,CAAE,qBAAqB,CAEnC,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CAAE,8HAC0D,CACtE,eAAe,CAAE,gBAAgB,CAUjC,KAAK,CCjBW,IAAO,CDkBvB,WAAW,CAAE,iBAA6B,CAE1C,UAAU,CAAE,qGAAqG,CAEjH,MAAM,CAAE,OAAO,CAXf,+BAAQ,CACP,UAAU,CAAE,qIACgE,CAC5E,eAAe,CAAE,gBAAgB,CAWlC,2DAAkB,CACjB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,mBAAmB,CACxB,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CAEZ,IAAI,CAAE,eAAmB,CACzB,UAAU,CAAE,oBAAoB,CAKjC,8DACQ,CACP,mBAAmB,CAAE,OAA2B,CAChD,UAAU,CAAE,qBAAyC,CAErD,gBAAgB,CC5CD,OAAO,CD6CtB,KAAK,CC3CU,IAAO,CD4CtB,WAAW,CAAE,iBAAqC,CAElD,iJAAkB,CACjB,IAAI,CAAE,kBAA4B,CAUrC,4BAAY,CACX,aAAa,CAAE,iBAA+B,CAO/C,gDAAkC,CACjC,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,sBAAsB,CAE9B,OAAO,CAAE,UAAU,CACnB,YAAY,CAAE,KAAK,CAEnB,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CAAE,oEAAuF,CACnG,eAAe,CAAE,IAAI,CAErB,KAAK,CAAE,IAAoB,CAC3B,SAAS,CAAE,KAAK,CAEhB,MAAM,CAAE,OAAO,CAEf,SAAS,CAAE,SAAS,CAEpB,UAAU,CAAE,qBAAqB,CAGjC,8GACQ,CACP,KAAK,CC1FU,IAAO,CD2FtB,gBAAgB,CAAE,qCAAqC", +"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,CAUnC,KAAK,CCjBW,OAAO,CDkBvB,SAAS,CAAE,KAAK,CAChB,WAAW,CAAE,iBAA6B,CAE1C,UAAU,CAAE,qGAAqG,CAEjH,MAAM,CAAE,OAAO,CAZf,+BAAQ,CACP,UAAU,CAAE,uIACkE,CAC9E,eAAe,CAAE,kBAAkB,CAYpC,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,8DACQ,CACP,mBAAmB,CAAE,OAA2B,CAChD,UAAU,CAAE,qBAAyC,CAErD,gBAAgB,CC7CD,OAAO,CD8CtB,KAAK,CC5CU,IAAO,CD6CtB,WAAW,CAAE,iBAAqC,CAElD,iJAAkB,CACjB,IAAI,CAAE,eAAe,CAUxB,4BAAY,CACX,aAAa,CAAE,iBAA+B,CAO/C,gDAAkC,CACjC,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CACjB,KAAK,CAAE,4BAA4B,CAEpC,OAAO,CAAE,UAAU,CACnB,YAAY,CAAE,KAAK,CAEnB,aAAa,CAAE,qBAAqB,CAEpC,UAAU,CAAE,oEAAwF,CACpG,eAAe,CAAE,IAAI,CAErB,KAAK,CAAE,OAAoB,CAC3B,SAAS,CAAE,KAAK,CAEhB,MAAM,CAAE,OAAO,CAEf,UAAU,CAAE,qBAAqB,CAGjC,8GACQ,CACP,KAAK,CCzFU,IAAO,CD0FtB,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 39e8129..965c30c 100755 --- a/css/menu-side.scss +++ b/css/menu-side.scss @@ -9,24 +9,25 @@ position: relative; width: calc( 100% - 2*1em - 2*1.5em ); - padding: 1.5em 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/777777') right 1em center no-repeat; - background-size: 2em 2em, 1em 1em; + url('/f/svg/sub/st/menu-side/aaaaaa') right 1.5em center no-repeat; + background-size: 2em 2em, .5em .5em; // Modification du sens de la fleche quand le sous-menu est deroule &.active{ background: url('/f/svg/circle/st/menu-side/29282e') 1em center no-repeat, - url('/f/svg/sub-active/st/menu-side/dddddd') right 1em center no-repeat; - background-size: 2em 2em, 1em 1em; + url('/f/svg/sub-active/st/menu-side/ffffff') right 1.5em center no-repeat; + background-size: 2em 2em, .5em .5em; } color: $dark-fg; + font-size: .85em; text-shadow: 1px 1px 0 darken($dark-bg, 5); transition: color .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out, border .2s ease-in-out; @@ -57,7 +58,7 @@ text-shadow: 1px 1px 0 darken($dark-bg-primary, 5); & > svg, & > svg *{ - fill: $theme-fg-primary !important; + fill: #fff !important; } } @@ -78,14 +79,14 @@ & > span:not(.icon) + div.sub>span{ display: block; position: relative; - width: calc( 100% - 2*1.5em ); + width: calc( 100% - 1.5em - 2.5em ); padding: .5em 1.5em; - padding-left: 1.5em; + padding-left: 2.5em; border-bottom: 1px solid transparent; - background: darken($dark-bg-primary, 2) url('/f/svg/sub/st/menu-side/888888') .5em center no-repeat;; + background: darken($dark-bg-primary, 2) url('/f/svg/sub/st/menu-side/888888') 1.5em center no-repeat;; background-size: .5em; color: darken($dark-fg, 20); @@ -93,8 +94,6 @@ cursor: pointer; - transform: scaleY(1); - transition: color .2s ease-in-out; // Animation de @hover ou .active @@ -104,4 +103,9 @@ background-image: url('/f/svg/sub/st/menu-side/ffffff'); } } + + + & > span:not(.icon):not(.active) + div.sub>span{ + display: none; + } }