// ------------------------------
// edX Pattern Library Site: Components

// About: styling for specific UI components ranging from global to modular.

// #CONTROLS
// #SYSTEM FEEDBACK
// #HEADER
// #NAVIGATION
// #SIDEBAR
// #MAIN CONTENT
// #FOOTER
// #PATTERNS
// #SPECIFIC PATTERNS
// #EXAMPLE - GRID
// #EXAMPLE - LAYOUTS


// ------------------------------
// #CONTROLS
// ------------------------------

// tab panels and examples
.example-set {
    @extend %clear-last-child;
    @include clearfix();
    padding-bottom: spacing-vertical(base);
    border-bottom: rem(2) solid palette(grayscale, x-back);
    margin-bottom: spacing-vertical(base);

    .button-overlay-demo {
        @include linear-gradient(50deg, palette(primary, accent) 0%, palette(primary, base) 100%);
        padding: spacing-vertical(mid-large) spacing-horizontal(mid-large);
    }
}

// copyable patterns
.is-copyable {
    display: inline-block;
    white-space: nowrap;
    font-family: $font-family-monospace;
}

// ------------------------------
// #SYSTEM FEEDBACK
// ------------------------------
.badge {
    @include text-align(center);
    border-radius: rem(15);
    padding: spacing-vertical(xxx-small) spacing-horizontal(small);
    font-size: font-size(xxx-small);
    font-weight: font-weight(bold);
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: letter-spacing(loose);

    .badge-abbreviation {
        border-bottom: none;
    }
}

// ------------------------------
// #HEADER
// ------------------------------
.pldoc-wrapper-header-site {
    background: palette(grayscale, x-back);
}

// ------------------------------
// #NAVIGATION
// ------------------------------
// navigation - sidebar-based

%spaced-nav {
    @include padding-left(spacing-horizontal(small));
    @include padding-right(spacing-horizontal(small));
}

.pldoc-nav {
    padding-bottom: spacing-vertical(small);

    &:last-child {
        padding-bottom: 0;
    }

    .pldoc-link {
        // CASE: item is current
        &.is-current {
            .pldoc-link:before {
                display: inline-block;
            }
        }
    }

    // CASE: pattern listing
    .list-patterns {
        .pattern {
            @include clearfix();

            .pattern-title,
            .badge {
                display: inline-block;
            }

            .pattern-title {
                width: 80%;
            }

            .badge {
                @include float(right);
            }
        }
    }

    .pldoc-nav-title {
        @extend %spaced-nav;
        text-transform: uppercase;
        color: palette(primary, dark);
        font-size: font-size(small);
    }

    .item {
        @extend %spaced-nav;
        display: inline-block;

        @media(min-width: $bp-screen-md) {
            display: block;
        }

        .pldoc-link {
            display: block;
            width: 100%;
        }
    }
}

.pldoc-tab-content {
    @extend %depth-2;
    @include transition(box-shadow timing(fast) ease-in-out);
    border: rem(1) solid palette(grayscale, accent);
    border-top: none;
    padding: spacing-horizontal(base);
}

.pldoc-settings {
    background: palette(grayscale, x-back);
    margin-bottom: spacing-vertical(large);
    padding: spacing-vertical(small) spacing-horizontal(small);
}

.pldoc-setting {
    display: inline-block;
    vertical-align: middle;
    @include margin-right(spacing-horizontal(small));

    &:last-child {
         @include margin-right(0);
    }
}

// ------------------------------
// #FOOTER
// ------------------------------
.pldoc-footer-site {
    @include grid-container;

    padding-top: spacing-horizontal(small);
}

.pldoc-footer-site-copyright {
    .pldoc-copy {
        font-size: font-size(small);
        margin: 0;
    }
}

// ------------------------------
// #PATTERNS
// ------------------------------
.pldoc-pattern {
    .example-set-hd {
        margin-bottom: spacing-vertical(small);
    }
}

.pldoc-pattern-header {
    margin-bottom: spacing-vertical(small);
}


// pattern info tabs
.pldoc-tab-labels {
    @include clearfix();
    @extend %reset-lists;
    border-bottom: $pldoc-tab-label-height solid palette(grayscale, back);
}

.pldoc-tab-heading {
    @extend %a11y-hide;
}

.pldoc-tab-label {
    @include float(left);
    position: relative;
    bottom: -(spacing-vertical(xx-small));
    margin-bottom: 0;

    .pldoc-link {
        display: block;
        margin: 0;
        border-width: 0 0 $pldoc-tab-label-height 0;
        border-color: $transparent;
        border-style: solid;
        background: $transparent;
        padding: spacing-vertical(x-small) spacing-horizontal(mid-small);
        font-weight: font-weight(semi-bold);
        color: palette(grayscale, dark);

        &:hover,
        &:focus {
            border-bottom-color: palette(primary, accent);
            color: palette(primary, accent);
        }

        &.is-active {
            border-bottom-color: palette(grayscale, dark);
            color: palette(grayscale, dark);
        }
    }
}

// markup section of pattern
.pldoc-pattern-markup {

    code {
        font-family: $font-family-monospace;
    }
}


// ------------------------------
// #SPECIFIC PATTERNS
// ------------------------------
// color swatches
.pldoc-pattern-colors {
    .pldoc-tab-content {
        position: relative;

        .info-pane {
            position: fixed;
            left: 37.5%;
            width: 640px;
            height: 420px;
            border: rem(1) solid palette(grayscale, accent);
            background: $white;
            box-shadow: 0 0 5px $shadow;
            z-index: z-index(mid-front);

            .info-pane-header {
                padding: spacing-vertical(small);
                background: palette(grayscale, x-back);

                .close-button {
                    @include float(right);
                    border: 0;
                    background: transparent;
                    color: palette(primary, base);
                }

                .color-info-title {
                    margin-bottom: 0;
                    font-weight: font-weight(bold);
                }

                .color-description {
                    margin-bottom: 0;
                }
            }

            .color-info-content {
                padding: spacing-vertical(small);
                background: $white;

                .color-usage {
                    .list-background,
                    .list-foreground {
                        @include padding-right(5%);
                        display: inline-block;
                        width: 49%;
                        vertical-align: top;
                    }
                }

                .color-technics {
                    margin-top: spacing-vertical(small);

                    dl {
                        margin-bottom: 0;

                        dt {
                            display: inline-block;
                            width: 19%;
                            margin-top: 0;
                            vertical-align: top;
                        }

                        dd {
                            display: inline-block;
                            width: 79%;
                            vertical-align: top;
                        }
                    }
                }
            }
        }
    }

    .example-set {
        .row {
            padding: spacing-vertical(x-small) 0;

            &.on-white { background: $white; }

            &.on-dark-primary { background: palette(primary, dark); color: palette(primary, x-back); }
            &.on-base-primary { background: palette(primary, base); color: palette(primary, x-back); }
            &.on-accent-primary { background: palette(primary, accent); color: palette(primary, x-back); }
            &.on-back-primary { background: palette(primary, back); color: palette(primary, dark); }
            &.on-x-back-primary { background: palette(primary, x-back); color: palette(primary, dark); }

            &.on-dark-secondary { background: palette(secondary, dark); color: palette(primary, x-back); }
            &.on-base-secondary { background: palette(secondary, base); color: palette(primary, x-back); }
            &.on-accent-secondary { background: palette(secondary, accent); color: palette(primary, x-back); }
            &.on-back-secondary { background: palette(secondary, back); color: palette(primary, dark); }
            &.on-x-back-secondary { background: palette(secondary, x-back); color: palette(primary, dark); }

            &.on-dark-grayscale { background: palette(grayscale, dark); color: palette(primary, x-back); }
            &.on-base-grayscale { background: palette(grayscale, base); color: palette(primary, x-back); }
            &.on-accent-grayscale { background: palette(grayscale, accent); color: palette(primary, x-back); }
            &.on-back-grayscale { background: palette(grayscale, back); color: palette(primary, dark); }
            &.on-x-back-grayscale { background: palette(grayscale, x-back); color: palette(primary, dark); }

            &.on-dark-success {
                background: palette(success, text);
                color: palette(success, back);
            }

            &.on-dark-error {
                background: palette(error, text);
                color: palette(error, back);
            }

            &.on-dark-warning {
                background: palette(warning, text);
                color: palette(warning, back);
            }

            &.on-dark-information {
                background: palette(information, text);
                color: palette(information, back);
            }
        }

        button.swatch {
            border: rem(1) solid rgba(0, 0, 0, .15);
        }

        .swatch {
            @include transition(all timing(x-fast) ease-in-out);
            @include span(12);
            position: relative;
            border: 0;
            padding: spacing-vertical(base) spacing-horizontal(x-small);

            &.color-description {
                padding: spacing-vertical(small) 0 0 0;
                font-size: font-size(small);
            }

            &.primary {
                background: palette(primary, base);

                &.dark {
                    background: palette(primary, dark);
                }

                &.base {
                    background: palette(primary, base);
                }

                &.accent {
                    background: palette(primary, accent);
                }

                &.back {
                    background: palette(primary, back);
                }

                &.x-back {
                    background: palette(primary, x-back);
                }
            }

            &.secondary {
                background: palette(secondary, base);

                &.dark {
                    background: palette(secondary, dark);
                }

                &.base {
                    background: palette(secondary, base);
                }

                &.accent {
                    background: palette(secondary, accent);
                }

                &.back {
                    background: palette(secondary, back);
                }

                &.x-back {
                    background: palette(secondary, x-back);
                }
            }

            &.grayscale {
                background: palette(grayscale, base);

                &.dark {
                    background: palette(grayscale, dark);
                }

                &.base {
                    background: palette(grayscale, base);
                }

                &.accent {
                    background: palette(grayscale, accent);
                }

                &.back {
                    background: palette(grayscale, back);
                }

                &.x-back {
                    background: palette(grayscale, x-back);
                }
            }

            &.success {
                background: palette(success, text);

                &.text {
                    background: palette(success, text);
                }

                &.accent {
                    background: palette(success, accent);
                }

                &.back {
                    background: palette(success, back);
                }
            }

            &.error {
                background: palette(error, text);

                &.text {
                    background: palette(error, text);
                }

                &.accent {
                    background: palette(error, accent);
                }

                &.back {
                    background: palette(error, back);
                }
            }

            &.warning {
                background: palette(warning, text);

                &.text {
                    background: palette(warning, text);
                }

                &.accent {
                    background: palette(warning, accent);
                }

                &.back {
                    background: palette(warning, back);
                }
            }

            &.fail-a11y-color {

                &:before {
                    // warning icon
                    display: inline-block;
                    position: absolute;
                    left: $baseline;
                    top: $baseline;
                    content: "\F071";
                    font: normal normal normal 16px/1 FontAwesome;
                    color: palette(warning, accent);
                    text-shadow: -1px -1px 0px $white, 1px 1px 0px $shadow;
                }
            }

            .color-meta {
                opacity: 0;
            }

            // color info
            .color-info {
                display: block;
                text-align: center;
            }

            // color name/class
            .color-class {
                display: block;
                font-size: font-size(small);
                font-weight: font-weight(semi-bold);
                text-transform: lowercase;
                text-align: center;
            }

            // color reference and meta
            .color-reference,
            .color-meta {
                display: block;
                font-size: font-size(x-small);
                text-align: center;
            }

            // color metadata
            .color-meta {
                .color-rgb {
                    @include ellipsis();
                }

                .color-hex {
                    text-transform: uppercase;
                }
            }
        }
    }
}

// buttons
.pldoc-pattern-buttons {
    .btn,
    .btn-neutral,
    .btn-brand,
    .btn-elevated {
        display: inline-block;
        vertical-align: middle;
        margin-right: spacing-horizontal(x-small);
        margin-bottom: spacing-vertical(x-small);

        // CASE: last button in set
        &:last-child {
            margin-right: 0;
        }
    }

    .btn-group {
        margin-bottom: spacing-vertical(mid-small);

        .btn {
            margin: 0;
        }
    }
}

// icons
.pldoc-pattern-icons {
    .example-icon {
        @include text-align(center);
        display: inline-block;
        width: spacing-vertical(x-large);
        margin: 0 spacing-horizontal(mid-small) spacing-vertical(mid-small) 0;

        .icon-display {
            width: 100%;
            margin: 0 auto spacing-vertical(x-small) auto;

            .icon {
                font-size: rem(48); // Initial setting to match slider
                color: palette(primary, base);
            }
        }

        .icon-classname,
        .use-description {
            font-size: font-size(small);
            color: palette(grayscale, dark);
        }
    }
}

// ui depth
.pldoc-pattern-depth {
    // padding for demo purposes
    .depth {
        padding: spacing-vertical(small) spacing-horizontal(base);
    }

    // light text on darker backgrounds for demo purposes
    .depth--2,
    .depth--3 {
        .hd {
            color: $white;
        }

        .copy,
        .copy-meta {
            color: $white;
        }
    }

    // spacing for demo purposes
    .slat,
    .card {
        margin-bottom: spacing-vertical(x-small);

        &:last-child {
            margin-bottom: 0;
        }
    }

    .zebra-stripe {
        @extend %reset-lists;

        .slat {
            margin-bottom: 0;
        }
    }
}


// ------------------------------
// #EXAMPLE - GRID
// ------------------------------
%demo-grid-column {
    background: $grid-debug-color;
    border: 1px solid saturate($grid-debug-color, 100%);

    @media(min-width: $bp-screen-md) {
        background: saturate($grid-debug-color, 33%);
    }

    @media(min-width: $bp-screen-lg) {
        background: saturate($grid-debug-color, 66%);
    }

    @media(min-width: $bp-screen-xl) {
        background: saturate($grid-debug-color, 100%);
    }

    .example-label {
        @extend %copy-micro;
        display: block;
        color: palette(grayscale, dark);
    }
}

%demo-grid-row {
    background: $grid-debug-color;
}

// post
.pldoc-pattern-grid {
    .col,
    .gallery-item {
        @include text-align(center);
        @extend %demo-grid-column;
        padding: spacing-vertical(small) spacing-horizontal(small);
    }

    .row {
        margin-bottom: spacing-vertical(mid-small);

        &:last-child {
            margin-bottom: 0;
        }
    }

    .example-grid {
        .example-label {
            @extend %copy-micro;
            display: block;
        }

        .example-label-container {
            margin-bottom: spacing-vertical(x-small);
        }
    }

    // "Basic Grid With Column Shifts"
    .example-grid-shifts {
        .shifts-pre,
        .shifts-post {
            @include grid-container;
            flex-wrap: wrap;
        }

        // shifts - before col
        .shifts-pre {
            justify-content: flex-end;

            .col-A {
                @include span(11, none);
                @include pre(1);
            }

            .col-B {
                @include span(10, none);
                @include pre(2);
            }

            .col-C {
                @include span(9, none);
                @include pre(3);
            }

            .col-D {
                @include span(8, none);
                @include pre(4);
            }

            .col-E {
                @include span(7, none);
                @include pre(5);
            }

            .col-F {
                @include span(6, none);
                @include pre(6);
            }

            .col-G {
                @include span(5, none);
                @include pre(7);
            }

            .col-H {
                @include span(4, none);
                @include pre(8);
            }

            .col-I {
                @include span(3, none);
                @include pre(9);
            }

            .col-J {
                @include span(2, none);
                @include pre(10);
            }

            .col-K {
                @include span(1, none);
                @include pre(11);
            }
        }

        // shifts - after col
        .shifts-post {
            justify-content: flex-start;

            .col-A {
                @include span(11, none);
                @include post(1);
            }

            .col-B {
                @include span(10, none);
                @include post(2);
            }

            .col-C {
                @include span(9, none);
                @include post(3);
            }

            .col-D {
                @include span(8, none);
                @include post(4);
            }

            .col-E {
                @include span(7, none);
                @include post(5);
            }

            .col-F {
                @include span(6, none);
                @include post(6);
            }

            .col-G {
                @include span(5, none);
                @include post(7);
            }

            .col-H {
                @include span(4, none);
                @include post(8);
            }

            .col-I {
                @include span(3, none);
                @include post(9);
            }

            .col-J {
                @include span(2, none);
                @include post(10);
            }

            .col-K {
                @include span(1, none);
                @include post(11);
            }
        }

        section {
            margin-bottom: spacing-vertical(mid-small);

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    // "Semantic-based Grid"
    .example-grid-semantic {
        .wrapper-content {
            @include grid-container;
        }

        .content-main {
            @include span(8);
            @extend %demo-grid-column;
            @include grid-container;

            .story {
                @extend %demo-grid-column;
                margin-bottom: spacing-vertical(small);

                &:last-child {
                    margin-bottom: 0;
                }
            }

            .story-secondary {
                @include span(6);
                @extend %demo-grid-column;

                &:nth-child(2n) {
                    @include span(6, after);
                }

                &:nth-child(2n+1) {
                    @include span(6, before);
                }
            }
        }

        .content-secondary {
            @include span(4);
            @extend %demo-grid-column;

            .list-related {
                @extend %reset-lists;
            }
        }
    }

    // "Semantic Gallery" example
    .example-grid-gallery-semantic {
        .photo-gallery {
            @include grid-container;
            margin-bottom: spacing-vertical(base);

            .photo {
                @include span(4);
                @extend %demo-grid-column;
                margin-bottom: spacing-vertical(small);
            }

            .photo-source {
                display: block;
                width: 100%;
                margin-bottom: spacing-vertical(x-small);
            }
        }

        .photo-gallery-large {
            .photo {
                @include span(6);
            }
        }
    }

    // manual (+ responsive) gallery example
    .example-grid-gallery-classes,
    .example-grid-gallery-responsive {
        .gallery {
            margin-bottom: spacing-vertical(mid-small);
        }

        .gallery-item {
            margin-bottom: spacing-vertical(small);
        }
    }
}


// ------------------------------
// #EXAMPLE - LAYOUTS
// ------------------------------
%demo-layout-column {
    background: $grid-debug-color;
    border: 1px solid saturate($grid-debug-color, 100%);

    @media(min-width: $bp-screen-md) {
        background: saturate($grid-debug-color, 33%);
    }

    @media(min-width: $bp-screen-lg) {
        background: saturate($grid-debug-color, 66%);
    }

    @media(min-width: $bp-screen-xl) {
        background: saturate($grid-debug-color, 100%);
    }
}

.example-layout {
    .layout-col,
    .layout-view-col {
       @extend %demo-layout-column;
       padding: spacing-vertical(small) spacing-horizontal(small);
    }

    .example-label {
        @extend %copy-micro;
        display: block;
        color: palette(grayscale, dark);
    }
}
