SMMP/public_html/css/min/menu-side.css

60 lines
2.4 KiB
CSS
Raw Permalink Normal View History

/* 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;
2017-11-12 14:10:40 +00:00
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; }
2018-04-17 13:42:09 +00:00
/*# sourceMappingURL=menu-side.css.map */