@import 'constants'; #WRAPPER > #MENU-SIDE{ /* [1] Elements du menu =========================================================*/ & > span{ display: block; position: relative; width: calc( 100% - 2*1em - 2*1.5em ); padding: 1.3em 1.5em; padding-left: calc( 1.5em + 2*1em ); border-radius: 2px; background: $dark-bg; color: $dark-fg; text-shadow: 1px 1px 0 darken($dark-bg, 5); transition: color .3s, background .3s, box-shadow .3s; cursor: pointer; /* (1) Icone svg */ & > svg, & > svg *{ position: absolute; top: calc( 50% - 1em/2 ); left: 1.5em; width: 1em; height: 1em; fill: $dark-fg !important; transition: fill .3s ease-in-out; } /* (2) @hover -> survol souris */ &:hover{ box-shadow: inset 0 0 1em darken($dark-bg-primary, 1); background-color: $dark-bg-primary; color: $dark-fg-primary; text-shadow: 1px 1px 0 darken($dark-bg-primary, 5); & > svg, & > svg *{ fill: $theme-fg-primary !important; } } } /* [2] Specification pour le logo =========================================================*/ & > span:first-child{ width: 100%; height: $header-height; padding: 0; } }