UNPKG

@atlassian/aui

Version:

Atlassian User Interface Framework

302 lines (296 loc) 8.2 kB
/*!! * @atlassian/aui - Atlassian User Interface Framework * @version v8.0.0-alpha.1 * @link https://aui.atlassian.com * @license SEE LICENSE IN LICENSE.md * @author Atlassian Pty Ltd. */ aui-header { display: block; } .aui-header { background: #0747A6; border-bottom: 0 solid #0747A6; box-sizing: border-box; color: #DEEBFF; padding: 0 10px; } .aui-header:after, .aui-header .aui-header-logo a:after { content: ""; display: table; clear: both; } .aui-header .aui-header-logo, .aui-header .aui-nav { margin: 0; padding: 0; float: left; } .aui-header .aui-header-secondary .aui-nav { float: right; } .aui-header .aui-nav > li { float: left; padding: 0; } .aui-header a { color: #DEEBFF; display: block; line-height: 1; padding: 13px 10px; } .aui-header a:visited, .aui-header a:focus, .aui-header a:hover, .aui-header a:active { text-decoration: none; } .aui-header .aui-header-logo a { box-sizing: border-box; float: left; height: 40px; padding: 0 10px; } .aui-header .aui-header-logo.aui-header-logo-textonly a { font-size: 24px; padding: 5px 10px; } .aui-header .aui-header-logo-textonly .aui-header-logo-device { float: left; padding-top: 4px; text-indent: 0; } .aui-header .aui-header-logo-textonly .aui-header-logo-device + .aui-header-logo-text { padding: 5px 0 5px 10px; } /* for extra visible text, eg. instance names. */ .aui-header .aui-header-logo .aui-header-logo-text { display: block; float: left; font-size: 14px; line-height: 1.4286; margin: 0; padding: 10px 0 10px 10px; } .aui-header .aui-header-logo-device { background-repeat: no-repeat; background-position: 0 50%; background-size: 100%; display: block; float: left; height: 24px; padding: 8px 0; text-indent: -9999px; text-align: left; } /* Custom IMG elements can be set in most products */ .aui-header .aui-header-logo img { border: 0; float: left; max-height: 30px; padding: 5px 0; } /* Positioning icons in the header */ .aui-header .aui-icon { margin: -1px 0; vertical-align: top; } .aui-header a > .aui-avatar { vertical-align: top; } .aui-header a > .aui-avatar-tiny { margin: -1px 0; /* (16px Tiny Avatar height - 14px font size (line-height 1 in the header)) / 2 */ } .aui-header a > .aui-avatar-small { margin: -5px 0; /* (24px Small Avatar height - 14px font size (line-height 1 in the header)) / 2 */ } /** * Quick search for header */ .aui-header .aui-quicksearch { display: flex; justify-content: flex-end; align-items: center; position: relative; padding: 0 10px; color: rgba(255, 255, 255, 0.6); } .aui-header .aui-quicksearch input { background: rgba(9, 30, 66, 0.48); border: none; border-radius: 3px; box-shadow: none; box-sizing: border-box; color: inherit; height: 2.143em; font-family: inherit; font-size: inherit; margin: 5px 0 0 0; padding: 0 26px 1px 10px; vertical-align: baseline; width: 170px; } .aui-header .aui-quicksearch input:focus { background: rgba(9, 30, 66, 0.48); color: #DEEBFF; outline: none; } .aui-header .aui-quicksearch input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } .aui-header .aui-quicksearch input::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } .aui-header .aui-quicksearch input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } .aui-header .aui-quicksearch input:focus::-webkit-input-placeholder { color: #DEEBFF; } .aui-header .aui-quicksearch input:focus::-moz-placeholder { color: #DEEBFF; } .aui-header .aui-quicksearch input:focus:-ms-input-placeholder { color: #DEEBFF; } .aui-header .aui-quicksearch input[type] { -moz-appearance: none; -webkit-appearance: none; } .aui-header .aui-quicksearch::after { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0; font-family: "Adgs Icons"; font-weight: normal; font-style: normal; speak: none; align-self: center; pointer-events: none; margin-left: -26px; margin-right: 10px; content: "\F18D"; color: inherit; font-size: 16px; height: 16px; width: 16px; } .aui-header .aui-nav .aui-button, .aui-header .aui-nav .aui-button-primary { border: 0; line-height: 1.57142857; margin: 5px 0 0 10px; padding: 4px 10px; } .aui-header .aui-nav .aui-button.aui-button-split-main { margin-right: 0; } .aui-header .aui-nav .aui-buttons .aui-button ~ .aui-button, .aui-header .aui-nav .aui-buttons .aui-button ~ .aui-button:hover, .aui-header .aui-nav .aui-buttons .aui-button ~ .aui-button:focus, .aui-header .aui-nav .aui-buttons .aui-button ~ .aui-button:active, .aui-header .aui-nav .aui-button.aui-button-split-more { margin-left: 1px; } .aui-header .aui-nav .aui-button, .aui-header .aui-nav .aui-button:link, .aui-header .aui-nav .aui-button:visited { color: #DEEBFF; } .aui-header .aui-nav .aui-button-primary, .aui-header .aui-nav .aui-button-primary:link, .aui-header .aui-nav .aui-button-primary:visited { background-color: #0065FF; color: #DEEBFF; } .aui-header .aui-nav .aui-button.aui-button-primary:focus, .aui-header .aui-nav .aui-button.aui-button-primary:hover { background-color: #2684FF; color: #DEEBFF; } .aui-header .aui-nav .aui-button.aui-button-primary:active, .aui-header .aui-nav .aui-button.aui-button-primary.active { background-color: #0065FF; background-image: none; padding-bottom: 4px; } .aui-header .aui-header-logo-atlassian .aui-header-logo-device { background-image: url(./images/aui-header-logo-atlassian.png); width: 87px; } .aui-header .aui-header-logo-aui .aui-header-logo-device { background-image: url(./images/aui-header-logo-aui.png); width: 36px; } .aui-header .aui-header-logo-bamboo .aui-header-logo-device { background-image: url(./images/aui-header-logo-bamboo.png); width: 95px; } .aui-header .aui-header-logo-bitbucket .aui-header-logo-device, .aui-header .aui-header-logo-stash .aui-header-logo-device { background-image: url(./images/aui-header-logo-bitbucket.png); width: 100px; } .aui-header .aui-header-logo-clover .aui-header-logo-device { background-image: url(./images/aui-header-logo-clover.png); width: 72px; } .aui-header .aui-header-logo-confluence .aui-header-logo-device { background-image: url(./images/aui-header-logo-confluence.png); width: 118px; } .aui-header .aui-header-logo-crowd .aui-header-logo-device { background-image: url(./images/aui-header-logo-crowd.png); width: 71px; } .aui-header .aui-header-logo-crucible .aui-header-logo-device { background-image: url(./images/aui-header-logo-crucible.png); width: 89px; } .aui-header .aui-header-logo-fecru .aui-header-logo-device { background-image: url(./images/aui-header-logo-fecru.png); width: 51px; } .aui-header .aui-header-logo-fisheye .aui-header-logo-device { background-image: url(./images/aui-header-logo-fisheye.png); width: 87px; } .aui-header .aui-header-logo-hipchat .aui-header-logo-device { background-image: url(./images/aui-header-logo-hipchat.png); width: 97px; } .aui-header .aui-header-logo-jira .aui-header-logo-device { background-image: url(./images/aui-header-logo-jira.png); width: 57px; } .aui-header .aui-header-logo-answers .aui-header-logo-device { background-image: url(./images/aui-header-logo-answers.png); width: 103px; } .aui-header .aui-header-logo-developers .aui-header-logo-device { background-image: url(./images/aui-header-logo-developers.png); width: 111px; } .aui-header .aui-header-logo-experts .aui-header-logo-device { background-image: url(./images/aui-header-logo-experts.png); width: 64px; } .aui-header .aui-header-logo-marketplace .aui-header-logo-device { background-image: url(./images/aui-header-logo-marketplace.png); width: 116px; } .aui-header .aui-header-logo-support .aui-header-logo-device { background-image: url(./images/aui-header-logo-support.png); width: 90px; } .aui-header .aui-header-logo-university .aui-header-logo-device { background-image: url(./images/aui-header-logo-university.png); width: 113px; } .aui-header .aui-header-logo-cloud .aui-header-logo-device { background-image: url(./images/aui-header-logo-cloud.png); width: 126px; }