/* Header Icon */ #HEADER #header-icon{ display: block; position: absolute; top: 0; left: 0; width: calc( 20em - 3em - 2px ); height: calc( 100% - 2*1.7em ); padding: 1.7em 0; padding-left: 3em; border-right: 2px solid #294496; background: url('/image/header-icon.svg') center left 2em no-repeat; background-size: 1.7em; background-color: #2a469c; color: #fff; } /* Header Icon > Title */ #header-icon .header-title{ display: inline-block; position: relative; margin-left: 2em; font-size: 1.2em; letter-spacing: 2px; overflow: hidden; } /****************************/ /* Header info container */ #header-info{ display: block; position: absolute; top: 0; left: 20em; width: calc( 100% - 20em - 12em - 2em - 5em ); height: calc( 100% - 2*1.7em ); padding: 1.7em 0; padding-left: 5em; background: url('/image/header/info/info.svg') center left 2em no-repeat; background-size: 1.6em; } #header-info.info{ background-image: url('/image/header/info/info.svg'); } #header-info.warning{ background-image: url('/image/header/info/warning.svg'); } #header-info.error{ background-image: url('/image/header/info/error.svg'); } /****************************/ /* Header Notifications */ #header-notif{ display: flex; position: absolute; top: 0; left: calc( 100% - 12em - 2em ); /* 2em not to be in the border */ width: 12em; height: 100%; /* flex */ flex-direction: row; justify-content: space-around; align-items: center; flex-wrap: nowrap; overflow: hidden; } /* Notification element */ #header-notif .hnotif, #header-notif .hnotif.bell{ display: block; width: 2em; height: 2em; background: url('/image/header/notif/bell.svg') center center no-repeat; background-size: 50%; background-color: transparent; border-radius: 50% / 50%; cursor: pointer; transition: background-color .2s ease-in-out; } #header-notif .hnotif:hover{ background-color: #294496; } #header-notif .hnotif.message{ background-image: url('/image/header/notif/message.svg'); } #header-notif .hnotif.search{ background-image: url('/image/header/notif/search.svg'); } #header-notif .hnotif.menu{ background-image: url('/image/header/notif/menu.svg'); } /* Counter element */ #header-notif .hnotif[data-count]:before{ content: attr(data-count); display: block; position: absolute; margin-left: 1.2em; min-width: calc( 1.4em - 2*.35em ); width: auto; height: calc( 1.4em - 2*.1em ); padding: .1em .35em; border-radius: 50% / 50%; background: #ed4222; font-size: .8em; } #header-notif .hnotif[data-count='']:before{ display: none; }