// ------------------------------
// edX Pattern Library Site: Views

// About: styling for specific views.

// ------------------------------
// #INDEX
// ------------------------------
.pldoc.view-index {

    // link back to top
    .pldoc-wrapper-link-top {
        padding: 0 spacing-horizontal(large) spacing-vertical(small) spacing-horizontal(large);
    }

    .pldoc-link-top {
        display: block;
        text-align: center;
    }
}


// ------------------------------
// #DETAIL
// ------------------------------
.pldoc.view-pattern {

}

.meta {
    font-size: font-size(large);

    a {
        color: $pldoc-link-color;
    }
}

// ------------------------------
// #EXAMPLE - UI DEPTH
// ------------------------------
.pldoc-view-example-depth {

    .example-set {
        @include grid-container;
        margin-bottom: spacing-vertical(base);
    }

    // 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: palette(grayscale, dark);
        }

        .copy {
            color: palette(grayscale, dark);
        }
    }

    // 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
// ------------------------------
.pldoc-view-example-grid {
    .example-grid {
        .row {
            margin-bottom: spacing-vertical(mid-small);

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

        .col {
            @extend %demo-grid-column;
        }
    }

    // semantic grid
    #example-grid-1 {
        .wrapper-content {
            @include grid-container;
        }

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

        .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, before);
            @extend %demo-grid-column;
        }

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

// ------------------------------
// #EXAMPLE - LAYOUTS
// ------------------------------
.pldoc-view-example-layouts {

    .example-layout {
        margin-bottom: spacing-vertical(large);

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

    .example-layout-hd {
        @include grid-container;
    }
}

// ------------------------------
// #EXAMPLE - DROPDOWN MENU
// ------------------------------
.prerendered-dropdown {
    .dropdown-menu {
        width: 190px;
    }
}
