.d-header { width: 100%; position: absolute; top: 0; z-index: z("header"); background-color: $header_background; box-shadow: 0 2px 4px -1px rgba(0,0,0, .25); .docked & { position: fixed; backface-visibility: hidden; /** do magic for scrolling performance **/ } .contents { margin: 8px 0; } .title { float: left; a, a:visited { color: $header_primary; } } #site-logo { max-height: 40px; } .d-icon-home { font-size: 1.643em; } .panel { float: right; position: relative; } .login-button, button.sign-up-button { float: left; margin-top: 7px; padding: 6px 10px; .fa { margin-right: 3px; } } button.login-button { margin-left: 7px; } .d-header-icons { float: right; } } .header-dropdown-toggle, .drop-down, .panel-body { .flagged-posts, .queued-posts { background: $danger; } } .d-header-icons { text-align: center; margin: 0 0 0 5px; list-style: none; > li { float: left; } .icon { position: relative; display: block; padding: 3px; color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary); text-decoration: none; cursor: pointer; border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; transition: all linear .15s; &:hover { color: $primary; background-color: $primary-low; border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; } &:active { color: $primary; background-color: $primary-low; } } .drop-down-mode & { .active .icon { position: relative; color: #7b7b7b; background-color: $secondary; cursor: default; border-top: 1px solid $primary-low; border-left: 1px solid $primary-low; border-right: 1px solid $primary-low; &:after { display: block; position: absolute; top: 100%; left: 0; z-index: z("header") + 1; // Higher than .menu-panel width: 100%; height: 0; content: ""; border-top: 1px solid $secondary; } &:hover { border-bottom: none; } } } .d-icon { width: 32px; height: 32px; font-size: $font-up-4; line-height: $line-height-large; display: inline-block; } .notifications { position: relative; } .ring { position: absolute; top: -9px; z-index: z("base"); margin-left: 0; } .header-dropdown-toggle { position: relative; } .badge-notification { position: absolute; z-index: z("base"); left: 0; top: -4px; min-width: 6px; } .unread-notifications { left: auto; right: -3px; background-color: dark-light-choose($tertiary-medium, $tertiary); } .unread-private-messages, .ring { left: auto; right: 25px; } } .highlight-strong { background-color: $highlight-medium; } .search-highlight { font-weight: bold; } #search-help table td { padding-right: 10px; } // we don't need this X to clear field #search-term::-ms-clear { display: none; }