SMMP/css/menu-side.css

3 lines
1.5 KiB
CSS
Executable File

#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;pointer-events:none}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover,#WRAPPER>#MENU-SIDE>span[data-link].active{color:#e63321;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{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 */