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

Gestion de la couleur de @hover différente de .active.

This commit is contained in:
xdrm-brackets 2016-04-14 18:33:04 +02:00
parent f255bdb6a1
commit 53d66b812d
3 changed files with 16 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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:.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 */ /*# sourceMappingURL=menu-side.css.map */

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

@ -1,6 +1,6 @@
{ {
"version": 3, "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"], "sources": ["menu-side.scss","constants.scss"],
"names": [], "names": [],
"file": "menu-side.css" "file": "menu-side.css"

33
css/menu-side.scss
View File

@ -14,25 +14,10 @@
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
background: url('/f/svg/circle/st/menu-side/29282e') 1em center no-repeat, background: url('/f/svg/sub/st/menu-side/aaaaaa') right 1.5em center no-repeat;
url('/f/svg/sub/st/menu-side/aaaaaa') right 1.5em center no-repeat; background-size: .5em .5em;
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/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; color: #666;
font-size: .85em; font-size: .85em;
@ -53,13 +38,23 @@
} }
/* (2) @hover ou .active -> survol souris ou active */ /* (2) Animation de @hover */
&:not(.active):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{ &.active{
border-bottom-color: darken($theme-fg-primary, 5); border-bottom-color: darken($theme-fg-primary, 5);
// box-shadow: inset 0 0 1em darken($dark-bg-primary, 1); // box-shadow: inset 0 0 1em darken($dark-bg-primary, 1);
background-color: $theme-fg-primary; background-color: $theme-fg-primary;
background-image: url('/f/svg/sub-active/st/menu-side/ffffff');
color: $dark-fg-primary; color: $dark-fg-primary;
& > svg, & > svg *{ & > svg, & > svg *{