Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
132 lines (101 sloc) 2.23 KB
// ------------------------------
// edX Pattern Library: Components - UI Depth
// About: Contains base settings and options for the preset default Pattern Library UI depth levels.
// #SETTINGS
// #UTILITY
// #CANNED
// ----------------------------
// #SETTINGS
// ----------------------------
$depth--3-bg: palette(grayscale, dark) !default; // -3 depth level
$depth--3-color: $white !default;
$depth--2-bg: palette(grayscale, base) !default; // -2 depth level
$depth--2-color: $white !default;
$depth--1-bg: palette(grayscale, back) !default; // -1 depth level
$depth-0-bg: palette(grayscale, x-back) !default; // -0 depth level
$depth-1-bg: $white !default; // +1 depth level
$depth-2-bg: $white !default; // +2 depth level
// ----------------------------
// #UTILITY
// ----------------------------
%depth--3 {
background: $depth--3-bg;
color: $depth--3-color;
}
%depth--2 {
background: $depth--2-bg;
color: $depth--2-color;
}
%depth--1 {
background: $depth--1-bg;
}
%depth-0 {
background: $depth-0-bg;
}
%depth-1 {
background: $depth-1-bg;
}
%depth-2 {
background: $depth-2-bg;
box-shadow: 0 1px 2px 1px $shadow;
}
// specific UI elements based on depth
%well {
@extend %depth--1;
box-shadow: inset 0 1px 2px 1px $shadow;
padding: spacing-vertical(small) spacing-horizontal(base);
}
%slat {
@extend %depth-1;
padding: spacing-vertical(small) spacing-horizontal(base);
}
%card {
@extend %depth-2;
padding: spacing-vertical(small) spacing-horizontal(base);
}
// zebra striped elements (direct children are affected)
%zebra-stripe {
> * {
&:nth-child(odd) {
@extend %depth-0;
}
&:nth-child(even) {
@extend %depth-1;
}
}
}
// ----------------------------
// #CANNED
// ----------------------------
// class-based
.depth--3 {
@extend %depth--3;
}
.depth--2 {
@extend %depth--2;
}
.depth--1 {
@extend %depth--1;
}
.depth-0 {
@extend %depth-0;
}
.depth-1 {
@extend %depth-1;
}
.depth-2 {
@extend %depth-2;
}
// UI specifics
.card {
@extend %card;
}
.slat {
@extend %slat;
}
.well {
@extend %well;
}
.zebra-stripe {
@extend %zebra-stripe;
}