67 lines
2.9 KiB
SCSS
67 lines
2.9 KiB
SCSS
// Need to be in pixels for IE8
|
|
$xsmall-min: 0px;
|
|
$xsmall-max: 375px;
|
|
$xsmall-range: $xsmall-min, $xsmall-max;
|
|
$small-min: 376px;
|
|
$small-max: 639px;
|
|
$small-range: $small-min, $small-max;
|
|
$medium-min: 640px;
|
|
$medium-max: 1023px;
|
|
$medium-range: $medium-min, $medium-max;
|
|
$large-min: 1024px;
|
|
$large-max: 1439px;
|
|
$large-range: $large-min, $large-max;
|
|
$xlarge-min: 1440px;
|
|
$xlarge-max: 1920px;
|
|
$xlarge-range: $xlarge-min, $xlarge-max;
|
|
$xxlarge-min: 1921px;
|
|
$xxlarge-max: 2650px;
|
|
$xxlarge-range: $xxlarge-min, $xxlarge-max;
|
|
$xxxlarge-min: 2651px;
|
|
$xxxlarge-max: 999999px;
|
|
$xxxlarge-range: $xxlarge-min, $xxlarge-max;
|
|
|
|
// TODO
|
|
// $content-max-width: 1440px;
|
|
// $global-gutter: 30px;
|
|
|
|
// $large-max: ($xlarge-min - 1px);
|
|
// $xlarge-min: ($content-max-width + $global-gutter);
|
|
|
|
//
|
|
// Media Queries
|
|
//
|
|
|
|
$screen: 'only screen';
|
|
$xsmall-only: '#{$screen} and (max-width: #{$xsmall-max})';
|
|
$small-only: '#{$screen} and (min-width: #{$small-min}) and (max-width: #{$small-max})';
|
|
$small-down: '#{$screen} and (max-width: #{$small-max})';
|
|
$small-up: '#{$screen} and (min-width: #{$small-min})';
|
|
$medium-only: '#{$screen} and (min-width: #{$medium-min}) and (max-width: #{$medium-max})';
|
|
$medium-up: '#{$screen} and (min-width: #{$medium-min})';
|
|
$medium-down: '#{$screen} and (max-width: #{$medium-max})';
|
|
$large-only: '#{$screen} and (min-width: #{$large-min}) and (max-width: #{$large-max})';
|
|
$large-up: '#{$screen} and (min-width: #{$large-min})';
|
|
$large-down: '#{$screen} and (max-width: #{$large-max})';
|
|
$xlarge-only: '#{$screen} and (min-width: #{$xlarge-min}) and (max-width: #{$xlarge-max})';
|
|
$xlarge-up: '#{$screen} and (min-width: #{$xlarge-min})';
|
|
$xlarge-down: '#{$screen} and (max-width: #{$xlarge-max})';
|
|
$xxlarge-only: '#{$screen} and (min-width: #{$xxlarge-min})';
|
|
$xxlarge-up: '#{$screen} and (min-width: #{$xxlarge-min})';
|
|
$xxlarge-down: '#{$screen} and (max-width: #{$xxlarge-max})';
|
|
$xxxlarge-up: '#{$screen} and (min-width: #{$xxxlarge-min})';
|
|
$landscape: '#{$screen} and (orientation: landscape)';
|
|
// $portrait: "#{$screen} and (orientation: portrait)";
|
|
// $small-only: "#{$screen} and (min-width: #{min($small-range...)}) and (max-width: #{max($small-range...)})";
|
|
// $small-up: "#{$screen} and (min-width: #{min($small-range...)})";
|
|
// $medium-only: "#{$screen} and (min-width: #{min($medium-range...)}) and (max-width: #{max($medium-range...)})";
|
|
// $medium-up: "#{$screen} and (min-width: #{min($medium-range...)})";
|
|
// $medium-down: "#{$screen} and (max-width: #{max($medium-range...)})";
|
|
// $large-only: "#{$screen} and (min-width: #{min($large-range...)}) and (max-width: #{max($large-range...)})";
|
|
// $large-up: "#{$screen} and (min-width: #{min($large-range...)})";
|
|
// $large-down: "#{$screen} and (max-width: #{max($large-range...)})";
|
|
// $xlarge-only: "only screen and (min-width: #{min($xlarge-range...)})";
|
|
// $xlarge-up: "#{$screen} and (min-width: #{min($xlarge-range...)})";
|
|
// $landscape: "#{$screen} and (orientation: landscape)";
|
|
// $portrait: "#{$screen} and (orientation: portrait)";
|