/* Menu Item Wrapper */ #MENU .menu-item-wrapper{ display: block; top: 0; left: 0; width: 100%; height: 4em; flex: 0 0 1; font-size: .8em; overflow: hidden; } /* Menu Standard Item */ #MENU .menu-item-wrapper .menu-item{ display: block; top: 0; left: 0; width: calc( 100% - 3em ); height: calc( 100% - 1.4em ); background: #fff url('/image/menu/dashboard.svg') center left 1em no-repeat; background-size: 1.2em auto; padding-top: 1.4em; padding-left: 3em; color: #888; letter-spacing: 2px; overflow: hidden; cursor: pointer; transition: background .2s ease-in-out, padding .2s ease-in-out, color .2s ease-in-out; } #MENU .menu-item[data-theme='emergency']{ background-image: url('/image/menu/emergency.svg@aaaaaa'); } #MENU .menu-item[data-theme='event']{ background-image: url('/image/menu/event.svg@aaaaaa'); } #MENU .menu-item[data-theme='inbox']{ background-image: url('/image/menu/messages.svg@aaaaaa'); } /* HOVER */ #MENU .menu-item:hover, #MENU .menu-item.active{ color: #444; background-color: #eef2f5; } #MENU .menu-item[data-theme='emergency']:hover{ background-image: url('/image/menu/emergency.svg@f93e2b'); } #MENU .menu-item[data-theme='event']:hover{ background-image: url('/image/menu/event.svg@2986d4'); } #MENU .menu-item[data-theme='inbox']:hover{ background-image: url('/image/menu/messages.svg@23c795'); } /****************************/ /* Minified Menu */ #WRAPPER.min #MENU{ width: calc( 3.5em - 1px ); } #WRAPPER.min #MENU .menu-item-wrapper .menu-item{ width: calc( 100% - 5em ); padding-left: 5em; background-position: 1.2em center; background-size: 2em; }