* simplifying edx.org breakpoints to use min-width * creating -bp-* centric Sass variables * converting all existing edx.org centric media queries to use new Sass variables ECOM-1457
25 lines
885 B
SCSS
25 lines
885 B
SCSS
@import "neat/neat-helpers";
|
|
|
|
// Change the grid settings
|
|
$max-width: 1200px;
|
|
|
|
// Override the default global box-sizing
|
|
$border-box-sizing: false;
|
|
|
|
// Grid width variables
|
|
$large-min-width: 769px;
|
|
|
|
// breakpoints
|
|
$bp-tiny: new-breakpoint(max-width 320px 4);
|
|
$bp-small: new-breakpoint(min-width 321px max-width 540px, 4);
|
|
$bp-medium: new-breakpoint(min-width 541px max-width 768px, 8);
|
|
$bp-large: new-breakpoint(min-width $large-min-width max-width 979px, 12);
|
|
$bp-huge: new-breakpoint(min-width 980px 12);
|
|
|
|
// edX-centric breakpoints (to be temporarily used with edx.org features only)
|
|
$edx-bp-tiny: new-breakpoint(max-width 320px 4);
|
|
$edx-bp-small: new-breakpoint(min-width 321px max-width 540px, 4);
|
|
$edx-bp-medium: new-breakpoint(min-width 541px max-width 768px, 8);
|
|
$edx-bp-large: new-breakpoint(min-width $large-min-width 12);
|
|
$edx-bp-huge: new-breakpoint(min-width 980px 12);
|