Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
597 lines (499 sloc) 12.4 KB
// ------------------------------
// edX Pattern Library: Components - Layouts
// About: Contains base settings and options for the preset default Pattern Library UI Layouts.
// #CANNED - IN VIEW
// #CANNED - VIEW
@import 'grid';
// ----------------------------
// #CANNED - IN VIEW
// ----------------------------
// Full Layout
.layout-full {
@include grid-container;
.layout-col-a,
.layout-col-b,
.layout-col-c,
.layout-col-d {
@include span(12);
}
}
.layout-col {
@include grid-row;
}
// 1/4 + 3/4 Layout
.layout-1q3q {
// CASE: standard layout
&.layout {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(3);
}
.layout-col-b {
@include span(9);
}
}
}
// CASE: flush layout
&.layout-flush {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(3, before);
}
.layout-col-b {
@include span(9, after);
}
}
}
// CASE: reversed layout
&.layout-reversed {
@include grid-container(row-reverse);
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(3);
}
.layout-col-b {
@include span(9);
}
}
}
}
// 1/3 + 1/3 + 1/3 Layout
.layout-1t1t1t {
// CASE: standard layout
&.layout {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(4);
}
.layout-col-b {
@include span(4);
}
.layout-col-c {
@include span(4);
}
}
}
// CASE: flush layout
&.layout-flush {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(4, before);
}
.layout-col-b {
@include span(4, none);
}
.layout-col-c {
@include span(4, after);
}
}
}
// CASE: reversed layout
&.layout-reversed {
@include grid-container(row-reverse);
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(4);
}
.layout-col-b {
@include span(4);
}
.layout-col-c {
@include span(4);
}
}
}
}
// 1/3 + 2/3 Layout
.layout-1t2t {
// CASE: standard layout
&.layout {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(4);
}
.layout-col-b {
@include span(8);
}
}
}
// CASE: flush layout
&.layout-flush {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(4, before);
}
.layout-col-b {
@include span(8, after);
}
}
}
// CASE: reversed layout
&.layout-reversed {
@include grid-container(row-reverse);
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(4);
}
.layout-col-b {
@include span(8);
}
}
}
}
// 1/2 + 1/2 Layout
.layout-1h1h {
// CASE: standard layout
&.layout {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(6);
}
.layout-col-b {
@include span(6);
}
}
}
// CASE: flush layout
&.layout-flush {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(6, before);
}
.layout-col-b {
@include span(6, after);
}
}
}
// CASE: reversed layout
&.layout-reversed {
@include grid-container(row-reverse);
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(6);
}
.layout-col-b {
@include span(6);
}
}
}
}
// 1/4 + 1/2 + 1/4 Layout
.layout-1q1h1q {
// CASE: standard layout
&.layout {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(3);
}
.layout-col-b {
@include span(6);
}
.layout-col-c {
@include span(3);
}
}
}
// CASE: flush layout
&.layout-flush {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(3, before);
}
.layout-col-b {
@include span(6, none);
}
.layout-col-c {
@include span(3, after);
}
}
}
// CASE: reversed layout
&.layout-reversed {
@include grid-container(row-reverse);
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(3);
}
.layout-col-b {
@include span(6);
}
.layout-col-c {
@include span(3);
}
}
}
}
// 1/4 + 1/4 + 1/2 Layout
.layout-1q1q1h {
// CASE: standard layout
&.layout {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(3);
}
.layout-col-b {
@include span(3);
}
.layout-col-c {
@include span(6);
}
}
}
// CASE: flush layout
&.layout-flush {
@include grid-container;
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(3, before);
}
.layout-col-b {
@include span(3, none);
}
.layout-col-c {
@include span(6, after);
}
}
}
// CASE: reversed layout
&.layout-reversed {
@include grid-container(row-reverse);
@media(min-width: $bp-screen-md) {
.layout-col-a {
@include span(3);
}
.layout-col-b {
@include span(3);
}
.layout-col-c {
@include span(6);
}
}
}
}
// ----------------------------
// #CANNED - VIEW
// ----------------------------
// 1/2 + 1/2 View Layout
.layout-view-1h1h {
// CASE: standard layout
&.layout-view {
@include grid-container(row, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(6);
}
.layout-view-col-b {
@include span(6);
}
}
}
// CASE: flush layout
&.layout-view-flush {
@include grid-container(row, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(6, before);
}
.layout-view-col-b {
@include span(6, after);
}
}
}
// CASE: reversed layout
&.layout-view-reversed {
@include grid-container(row-reverse, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(6);
}
.layout-view-col-b {
@include span(6);
}
}
}
}
// 1/3 + 1/3 + 1/3 View Layout
.layout-view-1t1t1t {
// CASE: standard layout
&.layout-view {
@include grid-container(row, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(4);
}
.layout-view-col-b {
@include span(4);
}
.layout-view-col-c {
@include span(4);
}
}
}
// CASE: flush layout
&.layout-view-flush {
@include grid-container(row, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(4, before);
}
.layout-view-col-b {
@include span(4, none);
}
.layout-view-col-c {
@include span(4, after);
}
}
}
// CASE: reversed layout
&.layout-view-reversed {
@include grid-container(row-reverse, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(4);
}
.layout-view-col-b {
@include span(4);
}
.layout-view-col-c {
@include span(4);
}
}
}
}
// 1/4 + 1/2 + 1/4 View Layout
.layout-view-1q1h1q {
// CASE: standard layout
&.layout-view {
@include grid-container(row, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(3);
}
.layout-view-col-b {
@include span(6);
}
.layout-view-col-c {
@include span(3);
}
}
}
// CASE: flush layout
&.layout-view-flush {
@include grid-container(row, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(3, before);
}
.layout-view-col-b {
@include span(6, none);
}
.layout-view-col-c {
@include span(3, after);
}
}
}
// CASE: reversed layout
&.layout-view-reversed {
@include grid-container(row-reverse, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(3);
}
.layout-view-col-b {
@include span(6);
}
.layout-view-col-c {
@include span(3);
}
}
}
}
// 1/3 + 2/3 View Layout
.layout-view-1t2t {
// CASE: standard layout
&.layout-view {
@include grid-container(row, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(4);
}
.layout-view-col-b {
@include span(8);
}
}
}
// CASE: flush layout
&.layout-view-flush {
@include grid-container(row, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(4, before);
}
.layout-view-col-b {
@include span(8, after);
}
}
}
// CASE: reversed layout
&.layout-view-reversed {
@include grid-container(row-reverse, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(4);
}
.layout-view-col-b {
@include span(8);
}
}
}
}
// 1/4 + 3/4 View Layout
.layout-view-1q3q {
// CASE: standard layout
&.layout-view {
@include grid-container(row, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(3);
}
.layout-view-col-b {
@include span(9);
}
}
}
// CASE: flush layout
&.layout-view-flush {
@include grid-container(row, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(3, before);
}
.layout-view-col-b {
@include span(9, after);
}
}
}
// CASE: reversed layout
&.layout-view-reversed {
@include grid-container(row-reverse, auto);
@media(min-width: $bp-screen-md) {
.layout-view-col-a {
@include span(3);
}
.layout-view-col-b {
@include span(9);
}
}
}
}