header.styl

// styles for the global site header only.
@import 'lib';

// Add the header's height back as padding. This is overriden when the header
// is not `position: fixed`.
body {
    padding-top: $header-height;
}

// ***************** Wide Mobile (600+ px)

// usable on any header
.header {
    background: #fff;
    border-top: 1px solid $salt-flat-white;
    border-bottom: 1px solid $seavan-salt-white;
    display-flex();
    height: $header-height;
    max-height: $header-height;
    position: relative;
    width: 100%;

    > * {
        flex-center();
    }
    .flex-shift, .title {
        flex(1);
        padding-left: 10px;
    }
    .title {
        color: $castle-skull-gray;
        font-size: 18px;
        font-weight: 400;
        line-height: $header-height;
        z-index: 10;
    }
}

// # for the primary site header *only*. If you need to generalize a style in here, move it.
.site-header {
    display: block;
    position: fixed;
    text-align: center;
    top: 0;
    z-index: 20;

    &:before {
        display: none;
    }
    > * {
        display: block;
    }
    > nav {
        height: $header-height;
        display-flex();
        position: relative;
        text-align: left;
        width: 100%;
        > * {
            flex-center();
            display: block;
        }
    }
    .site {
        height: $header-height;
        margin: 0 5px;
        width: 200px;

        a {
            display: block;
            height: 47px;
            hidetext();
            width: 100%;
        }
    }
    .wordmark {
        background: url(../img/pretty/marketplace_logo.png) 0 50% no-repeat;
        background-size: auto 37px;
        display: block;
        height: 47px;
    }
    .header-button {
        display: none;
    }
}

.act-tray {
    height: 47px;
    position: relative;
    width: 34px;  // 24px + 10px margin
}

.account-links {
    cursor: pointer;
    position: absolute;
    right: -15px;
    top: 49px;
    width: 320px;
    z-index: 21;

    ul {
        background: $grey-gardens-gray;
        line-height: 20px;
        list-style-type: none;
    }
    li {
        position: relative;

        + li {
            border-top: 1px solid $cloud-gray;
        }
        a {
            color: $cement-gray;
            display: block;
            font-size: 15px;
            font-weight: 400;
            padding: 10px 15px;
            text-decoration: none;

            &:hover {
                background-color: $sailor-blue;
                color: #fff;
            }
        }
    }
    a b {
        display: block;
        font-weight: 300;
    }
}

.site-header .search {
    margin-right: 10px;
    position: relative;
    top: -1px;
    transition(.3s all);
    width: 230px;
    label {
        display: none;
    }
}

#search-q {
    background: #f4f4f4 url(../img/pretty/search.svg) 8px 50% no-repeat;
    border: 2px solid $cement-gray;
    border-radius: 10px;
    color: $london-fog-gray;
    font: 300 20px/28px $open-stack;
    height: 34px;
    outline: none;
    padding: 2px 10px 1px 32px;
    transition(unquote('.18s background-position, .2s border-color, .2s padding'));
    width: 100%;
    z-index: 2;
    &:-moz-placeholder {
        color: darken($cement-gray, 5%);
    }
    &::-moz-placeholder {
        color: darken($cement-gray, 5%);
    }
    &::-webkit-input-placeholder {
        color: darken($cement-gray, 5%);
    }
    ~ .search-clear {
        transition(unquote('.3s opacity, .3s visibility'));
    }
    &:invalid ~ .search-clear {
        // Hide the X icon when the search field is empty.
        opacity: 0;
        visibility: hidden;
    }
    &:valid {
        // Pad for the X icon.
        padding-right: 34px;
        ~ .search-clear {
            opacity: 1;
            visibility: visible;
        }
    }
    &:focus {
        background-position: -18px 50%;
        border-color: #72cfff;
        padding-left: 10px;
    }
}

.close {
    background: url(../img/pretty/close.svg) 50% no-repeat;
    background-size: 18px auto;
    height: 34px;
    hidetext();
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}

.close:active {
    background: url(../img/pretty/close_active.svg) 50% no-repeat;
}

// Buttons that appear in headers.
.header-button {
    color: $castle-skull-gray;
    display: block;
    height: $header-height;
    line-height: $header-height;
    text-align: center;
    width: $header-height;  // $header-height so it's square.

    // header buttons with icons
    &.icon {
        position: relative;
        hidetext();
        &:after {
            background-repeat: no-repeat;
            content: "";
            display: block;
        }
    }
    &.cancel:after {
        background-position: 0 -24px;
        height: 24px;
        left: 13px;
        position: absolute;
        top: 12px;
        width: 24px;
    }
    &.settings {
        background: url(../img/pretty/settings_gear.svg) 50% 50% no-repeat;
        background-size: 24px auto;
        display: block;
        height: 40px;
        position: absolute;
        right: 2px;
        top: 2px;
        width: 40px;
    }
    &.back {
        hidetext();
        background: url(../img/pretty/back_arrow.svg) center no-repeat;
        background-size: 12px 24px;
        margin-right: 2px;
        width: 50px;
        &:hover {
            background-image: url(../img/pretty/back_arrow_active.svg);
        }
    }
    // 'Sign In'
    &.persona {
        cursor: wait;
        display: none;
        margin-left: 15px;
        word-break: keep-all;
        word-wrap: normal;

        &.loading-submit {
            box-shadow: none;
            hidetext();
            outline: 0;
            spinner('loading');
            margin-left: 15px;
            width: 50px;
            &:after {
                display: none;
            }
        }
    }
}

.persona-loaded .header-button.persona {
    cursor: pointer;
}

.header-button.persona {
    width: auto;
}

// On hover the settings gear icon should turn blue.
// On the Account Settings page the gear should also turn blue.
.act-tray.active .header-button.settings {
    background-image: url(../img/pretty/settings_gear_active.svg);
}

.secondary-header,
.featured-header {
    position: relative;

    h2, h3 {
        color: $london-fog-gray;
        font-weight: 300;
        margin-bottom: -3px;
        max-width: calc(unquote('100% - 75px'));
        min-width: 70%;
        padding-bottom: 3px;
        position: absolute;
    }
}

.category.featured {
    position: relative;
}

.secondary-header {
    background: $salt-flat-white;
    border-top: 1px solid $seavan-salt-white;
    margin-top: -1px;
    z-index: 19;

    &:before {
        // Because box-shadows can go suck it.
        bottom: -2px;
        content: "";
        display: block;
        gradientLinear(unquote('to top, rgba(15,15,15,0) 0%, rgba(15,15,15,.3) 100%'));
        height: 2px;
        position: absolute;
        width: 100%;
        z-index: 1;
    }
    .subtitle {
        color: $earl-gray;
        font-size: 20px;
        font-weight: 300;

        &:before {
            content: "\00a0/\00a0";
            color: darken($seavan-salt-white, 4%);
            font-size: 30px;
        }
    }
}

.featured-header {
    padding: 5px 10px 25px;

    h3 {
        font-size: 20px;
        line-height: 20px;
    }
}

.featured .featured-header {
    padding-top: 15px;
}


@media $narrower-than-desktop {
    .hide-on-mobile {
        display: none;
    }
    .secondary-header {
        height: 40px;

        h2 {
            font-size: 15px;
            line-height: 40px;
            margin: 0 10px;
        }
        .subtitle, .subtitle:before {
            font-size: 15px;
        }
        .subtitle {
            font-weight: 400;
        }
    }
    .featured .featured-header {
        padding-bottom: 20px;
    }
}

// search results tile expand toggle
.expand-toggle {
    display: block;
    height: 22px;
    line-height: 22px;
    position: absolute;
    right: 10px;
    top: 9px;
    width: 69px;
    &:before,
    &:after {
        content: "";
        display: block;
        height: 22px;
        position: absolute;
    }
    &:before {
        background: url(../img/pretty/list_view_active.svg) no-repeat;
        left: 0;
        width: 24px;
    }
    &:after {
        background: url(../img/pretty/screenshot_view.svg) 10px 0 no-repeat;
        border-left: 1px dotted $cement-gray;
        left: 34px;
        width: 34px;
    }
    &.active {
        &:before {
            background-image: url(../img/pretty/list_view.svg);
        }
        &:after {
            background-image: url(../img/pretty/screenshot_view_active.svg);
        }
    }
}

.overlay .expand-toggle,
.site-header .account-links,  // .site-header for specificity
.active .account-links {
    display: none;
}

// How does the header look for the various page "types"?
[data-page-type~=root] .header .expand-toggle {
    display: none;
}

// When we're holding down on the debug page, don't allow clicking on the logo
// because that would take us back home.
[data-page-type~=debug] .header .wordmark {
    pointer-events: none;
}

[data-page-type~=search],
[data-page-type~=leaf] {
    .back, .expand {
        display: block;
    }
    .site, .flex-shift {
        display: none;
    }
    .flex-span {
        display: block;
        flex(1);
    }
}
main {
    &:before {
        // This makes a sweet gradient below the header
        // (which will appear when scrolling past the category drop-down menu).
        content: '';
        display: block;
        gradientLinear(unquote('to top, rgba(15,15,15,0) 0%, rgba(15,15,15,.3) 100%'));
        height: 2px;
        top: $header-height;
        position: fixed;
        width: 100%;
        z-index: 18;
    }
}

@media (max-width: 709px) {
    [data-page-type~="detail"] .header {
        // Make the border lighter since there's no secondary header on this page.
        border-bottom-color: $salt-flat-white;
    }
}

@media (min-width: 710px) {
    .site-header {
        border-bottom: 1px solid $cloud-gray;
        border-top: 0;

        &:before, &:after {
            display: none;
        }
    }
    [data-page-type] main {
        padding: 0 0 $header-height;

        &:before {
            display: none;
        }
    }
}

// ***************** Cursor (Desktop) (>= 1024px)

// This probably shouldn't be media query based.
@media $wider-desktop {
    body {
      padding-top: 0;
    }

    .header-button.settings {
        right: 0;
        top: 0;
    }

    .act-tray,
    .act-tray .header-button.settings {
        height: 40px;
        width: 40px;
    }
    .act-tray {
        margin-left: 15px;

        &.active .settings {
            background-position: calc(unquote('50% + 35px')) 8px;
            height: 70px;
            margin-left: -60px;
            width: 110px;
            &:after {
                border: 38px solid transparent;
                border-bottom-color: $grey-gardens-gray;
                display: block;
                position: absolute;
                right: -18px;
                top: 0;
            }
        }
    }

    .site-header {
        height: 60px;
        max-height: 60px;
        position: relative;

        > nav {
            height: 60px;
            margin: 0 auto;
            max-width: $max-site-width;
        }
        .site {
            margin: 0;
            width: 232px;
        }
        .site, .site a, .wordmark {
            height: 60px;
        }
        .wordmark {
            background-position: -5px 50%;
            background-size: auto 46px;
            max-width: 232px;
            width: 232px;
        }
        .persona {
            display: block;
        }
        .act-tray {
            display: none;
        }
    }

    .logged-in .site-header {
        .act-tray {
            display: block;
        }
        .persona {
            display: none;
        }
    }

    .active .account-links {
        display: block;
    }

    .site-header .search,
    #search-q {
        width: 532px;
    }

    #search-q {
        background-position: 10px 50%;
        border-width: 1px;
        font-size: 18px;
        font-weight: 400;
        height: 40px;
        line-height: 40px;
        padding: 6px 15px 4px 34px;

        &:valid {
            // Adjust width for padding for the X icon.
            padding-right: 42px;
        }
        &:focus {
            padding-right: 15px;
        }
    }

    .search-clear {
        top: 4px;
    }

    // How does the header look for the various page "types"?
    [data-page-type~=search],
    [data-page-type~=leaf] {
        .back, .site {
            display: block;
        }
        .back, .site-header .expand-toggle,
        .flex-span {
            display: none;
        }
        .flex-shift {
            display: block;
        }
    }
}

// ***************** Wide Mobile (> 671px)
@media $at-least-desktop {
    .secondary-header {
        background: none;
        border: 0;
        height: $header-height;
        max-height: $header-height;
        position: relative;

        &:before {
            display: none;
        }
        h2 {
            margin: 0;
        }
    }
    .featured-header {
        padding: 15px 15px 5px;
    }
    .expand-toggle {
        top: 13px;
        right: 0;
    }
    .site-header {
        z-index: 30;
    }
}

@media (max-width: 540px) {
    .site-header {
        .search {
            flex(1);
            width: auto;
        }
    }
    [data-page-type~=root] {
        .site-header {
            .site, .wordmark {
                width: 35px;
            }
            .flex-shift {
                display: none;
            }
        }
    }
    [data-page-type~=search],
    [data-page-type~=leaf] {
        .flex-span {
            display: none;
        }
    }

    .site-header.suggestions {
        nav > *:not(.search) {
            display: none;
        }
        .search {
            position: relative;
            width: 100%;
            left: auto;
        }
        .search-clear {
            display: block;
        }
    }
}