60 lines
2.4 KiB
CSS
60 lines
2.4 KiB
CSS
/* COULEUR DU THEME */
|
|
/* COULEUR DU SOUS-MENU */
|
|
/* COULEUR DES ERREURS */
|
|
/* FORMULAIRES */
|
|
/* GESTION DES LONGUEURS */
|
|
#WRAPPER > #MENU-SIDE > span[data-link] {
|
|
display: block;
|
|
position: relative;
|
|
width: calc( 4em - 2*.7em - 2*.55em - 2*.01em);
|
|
height: calc( 4em - 2*.7em - 2*.55em - 2*.01em);
|
|
margin: 2em .7em;
|
|
padding: .55em;
|
|
border: .01em solid transparent;
|
|
border-radius: 2px;
|
|
color: #a2a2a2;
|
|
line-height: calc( 4em - 2*.7em - 2*.55em - 2*.01em);
|
|
transition: color .3s, border .3s;
|
|
cursor: pointer; }
|
|
#WRAPPER > #MENU-SIDE > span[data-link].mt {
|
|
margin-top: 3em; }
|
|
#WRAPPER > #MENU-SIDE > span[data-link].mb {
|
|
margin-bottom: 3em; }
|
|
#WRAPPER > #MENU-SIDE > span[data-link] svg, #WRAPPER > #MENU-SIDE > span[data-link] svg * {
|
|
width: calc( 4em / 2.5);
|
|
height: calc( 4em / 2.5);
|
|
transition: fill .3s, stroke .3s;
|
|
pointer-events: none; }
|
|
#WRAPPER > #MENU-SIDE > span[data-link] svg #stylisable, #WRAPPER > #MENU-SIDE > span[data-link] svg * #stylisable {
|
|
fill: #a2a2a2 !important; }
|
|
#WRAPPER > #MENU-SIDE > span[data-link] svg #stroke-stylisable, #WRAPPER > #MENU-SIDE > span[data-link] svg * #stroke-stylisable {
|
|
stroke: #a2a2a2 !important; }
|
|
#WRAPPER > #MENU-SIDE > span[data-link][data-desc]:after {
|
|
content: attr(data-desc);
|
|
display: block;
|
|
position: absolute;
|
|
top: calc( 4em / 4 - 2*.3em);
|
|
left: calc( 4em * 1.15 - 2*.3em);
|
|
padding: .3em;
|
|
border-radius: 3px;
|
|
background-color: #2a2a2a;
|
|
color: #e2e2e2;
|
|
white-space: nowrap;
|
|
transition: transform .1s;
|
|
-webkit-transform-origin: 0 0;
|
|
transform-origin: 0 0;
|
|
-webkit-transform: scaleX(0);
|
|
transform: scaleX(0); }
|
|
#WRAPPER > #MENU-SIDE > span[data-link]:hover, #WRAPPER > #MENU-SIDE > span[data-link].active {
|
|
color: #f44f06;
|
|
border-color: #e6e6e6;
|
|
box-shadow: inset 0 0 .5em #eee; }
|
|
#WRAPPER > #MENU-SIDE > span[data-link]:hover:hover:after, #WRAPPER > #MENU-SIDE > span[data-link].active:hover:after {
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
color: #fff; }
|
|
#WRAPPER > #MENU-SIDE > span[data-link]:hover svg #stylisable, #WRAPPER > #MENU-SIDE > span[data-link].active svg #stylisable {
|
|
fill: #000 !important; }
|
|
#WRAPPER > #MENU-SIDE > span[data-link]:hover svg #stroke-stylisable, #WRAPPER > #MENU-SIDE > span[data-link].active svg #stroke-stylisable {
|
|
stroke: #000 !important; }
|
|
/*# sourceMappingURL=menu-side.css.map */ |