@atlassian/aui/src/less/adg-header-quicksearch.less

Atlassian User Interface library

@import './imports/global';

/**
 * Quick search for header
 */
//
// Variables
//
@aui-header-quicksearch-color: rgba(255, 255, 255, 0.6);
@aui-header-quicksearch-bg-color: @ak-color-N90A;
@aui-header-quicksearch-focus-color: @ak-color-B50;
@aui-header-quicksearch-focus-bg-color: @ak-color-N90A;
@aui-header-quicksearch-width: 170px;
@aui-header-quicksearch-border-radius: 3px;
@aui-header-quicksearch-box-shadow: none;
@aui-header-quicksearch-icon: @aui-glyph-search-small;

@icon-height: @aui-icon-size-small;
@icon-width: @aui-icon-size-small;
@icon-right-indent: @icon-width;

@margin-top: 5px + @aui-header-padding-y;
@padding-left-right: 10px;
@text-padding-right: @icon-right-indent + @padding-left-right;
// this fudging number pushes the text slightly higher so it "lines up" with the text in menu items and buttons.
// it's 1px too low in Chrome, and 1px too high in Firefox and IE11. A compromise, if you will.
@text-baseline-fudge: 1px;

.aui-header .aui-quicksearch {
    //
    // Layout concerns:
    // The container needs to be relative so we can absolutely position the icon within it.
    // We use flexbox so that vertical alignment is handled by the browser rather than magic margin numbers.
    //
    display: flex;
    justify-content: flex-end; // push to the RHS of the container.
    align-items: center; // vertically center the elements.
    position: relative;

    // ...and some cosmestic stuff.
    padding: 0 @aui-grid;
    color: @aui-header-quicksearch-color;

    input {
        background: @aui-header-quicksearch-bg-color;
        border: none;
        border-radius: @aui-header-quicksearch-border-radius;
        box-shadow: none;
        box-sizing: border-box;
        color: inherit;
        height: 2.143em; // 30px effective - need height in ems so that user-specified font-sizes apply
        font-family: inherit;
        font-size: inherit;
        margin: @margin-top 0 0 0;
        padding: 0 @text-padding-right @text-baseline-fudge 10px;
        vertical-align: baseline;
        width: @aui-header-quicksearch-width;

        &::placeholder {
            color: @aui-header-quicksearch-color;
        }

        //focus placeholder

        &:focus {
            &::placeholder {
                color: @aui-header-quicksearch-focus-color;
            }
        }
    }

    // Override the browser appearance of type=text, type=search and type=button.
    input[type] {
        appearance: none;
    }

    // icon
    &::after {
        #aui.icon-pseudoelement(@aui-icon-font-family);

        // Layout concerns:
        // because of a flexbox parent + align-self, there's no need to
        // mess with margins or positioning relative to the top of the container; it's just done by flexbox :D
        align-self: center;
        pointer-events: none; // so the icon isn't clickable, so clicks on it will focus the input field
        margin-left: (-1 * @text-padding-right); // sneakily shift the icon inside the input field
        margin-right: @padding-left-right; // so as not to reduce the distance between the input field and the next element in the header

        // And now the actual icon concerns:
        content: @aui-header-quicksearch-icon;
        color: inherit;
        font-size: @aui-icon-size-small;
        height: @icon-height;
        width: @icon-width;
    }
}

body:not(.aui-legacy-focus) {
    .aui-header .aui-quicksearch {
        input {
            &:focus {
                #aui.focus-ring();
                background: @aui-header-quicksearch-focus-bg-color;
                color: @aui-header-quicksearch-focus-color;
            }
        }
    }
}