Correction design @hover du menu quand déjà .active. Affichage du chart.
This commit is contained in:
xdrm-brackets 2016-04-14 15:05:23 +02:00
parent d54086c049
commit 11edcc60e1
4 changed files with 5 additions and 5 deletions

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: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:hover,#WRAPPER>#MENU-SIDE>span.active{border-bottom-color:#2290eb;background-color:#399ced;color:#fff}#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: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/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}
/*# sourceMappingURL=menu-side.css.map */ /*# sourceMappingURL=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,8BAAO,CACN,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,8DACQ,CACP,mBAAmB,CAAE,OAA4B,CAGjD,gBAAgB,CCvDA,OAAO,CDwDvB,KAAK,CClDU,IAAO,CDoDtB,iJAAkB,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,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",
"sources": ["menu-side.scss","constants.scss"], "sources": ["menu-side.scss","constants.scss"],
"names": [], "names": [],
"file": "menu-side.css" "file": "menu-side.css"

View File

@ -27,7 +27,7 @@
} }
// Modification de la couleur de la fleche pour @hover // Modification de la couleur de la fleche pour @hover
&:hover{ &:not(.active):hover{
background: url('/f/svg/circle/st/menu-side/29282e') 1em center no-repeat, 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; url('/f/svg/sub/st/menu-side/ffffff') right 1.5em center no-repeat;
background-size: 2em 2em, .5em .5em; background-size: 2em 2em, .5em .5em;
@ -54,7 +54,7 @@
/* (2) @hover ou .active -> survol souris ou active */ /* (2) @hover ou .active -> survol souris ou active */
&:hover, &:not(.active):hover,
&.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);

View File

@ -39,7 +39,7 @@ $render = $answer->get('render');
?> ?>
<section data-sublink='network'> <section data-sublink='phone'>
<h6>CERCLE DES RELATIONS</h6> <h6>CERCLE DES RELATIONS</h6>
<?= $render; ?> <?= $render; ?>
</section> </section>