xdrm-brackets
/
NxTIC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Sous-menu fixed

This commit is contained in:
xdrm-brackets 2016-04-14 10:02:44 +02:00
parent b4e6a6975b
commit ebd94c831e
4 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/constants.scss
View File

@ -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;

2
css/menu-side.css
View File

@ -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 */

2
css/menu-side.css.map
View File

@ -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"

26
css/menu-side.scss
View File

@ -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;
}
}