forked from Minecraft/website
206 lines
4.4 KiB
SCSS
206 lines
4.4 KiB
SCSS
|
// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
|
||
|
|
||
|
// Vars.
|
||
|
|
||
|
/// Breakpoints.
|
||
|
/// @var {list}
|
||
|
$breakpoints: ();
|
||
|
|
||
|
// Mixins.
|
||
|
|
||
|
/// Sets breakpoints.
|
||
|
/// @param {map} $x Breakpoints.
|
||
|
@mixin breakpoints($x: ()) {
|
||
|
$breakpoints: $x !global;
|
||
|
}
|
||
|
|
||
|
/// Wraps @content in a @media block targeting a specific orientation.
|
||
|
/// @param {string} $orientation Orientation.
|
||
|
@mixin orientation($orientation) {
|
||
|
@media screen and (orientation: #{$orientation}) {
|
||
|
@content;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/// Wraps @content in a @media block using a given query.
|
||
|
/// @param {string} $query Query.
|
||
|
@mixin breakpoint($query: null) {
|
||
|
$breakpoint: null;
|
||
|
$op: null;
|
||
|
$media: null;
|
||
|
|
||
|
// Determine operator, breakpoint.
|
||
|
|
||
|
// Greater than or equal.
|
||
|
@if (str-slice($query, 0, 2) == ">=") {
|
||
|
$op: "gte";
|
||
|
$breakpoint: str-slice($query, 3);
|
||
|
}
|
||
|
|
||
|
// Less than or equal.
|
||
|
@else if (str-slice($query, 0, 2) == "<=") {
|
||
|
$op: "lte";
|
||
|
$breakpoint: str-slice($query, 3);
|
||
|
}
|
||
|
|
||
|
// Greater than.
|
||
|
@else if (str-slice($query, 0, 1) == ">") {
|
||
|
$op: "gt";
|
||
|
$breakpoint: str-slice($query, 2);
|
||
|
}
|
||
|
|
||
|
// Less than.
|
||
|
@else if (str-slice($query, 0, 1) == "<") {
|
||
|
$op: "lt";
|
||
|
$breakpoint: str-slice($query, 2);
|
||
|
}
|
||
|
|
||
|
// Not.
|
||
|
@else if (str-slice($query, 0, 1) == "!") {
|
||
|
$op: "not";
|
||
|
$breakpoint: str-slice($query, 2);
|
||
|
}
|
||
|
|
||
|
// Equal.
|
||
|
@else {
|
||
|
$op: "eq";
|
||
|
$breakpoint: $query;
|
||
|
}
|
||
|
|
||
|
// Build media.
|
||
|
@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
|
||
|
$a: map-get($breakpoints, $breakpoint);
|
||
|
|
||
|
// Range.
|
||
|
@if (type-of($a) == "list") {
|
||
|
$x: nth($a, 1);
|
||
|
$y: nth($a, 2);
|
||
|
|
||
|
// Max only.
|
||
|
@if ($x == null) {
|
||
|
// Greater than or equal (>= 0 / anything)
|
||
|
@if ($op == "gte") {
|
||
|
$media: "screen";
|
||
|
}
|
||
|
|
||
|
// Less than or equal (<= y)
|
||
|
@else if ($op == "lte") {
|
||
|
$media: "screen and (max-width: " + $y + ")";
|
||
|
}
|
||
|
|
||
|
// Greater than (> y)
|
||
|
@else if ($op == "gt") {
|
||
|
$media: "screen and (min-width: " + ($y + 1) + ")";
|
||
|
}
|
||
|
|
||
|
// Less than (< 0 / invalid)
|
||
|
@else if ($op == "lt") {
|
||
|
$media: "screen and (max-width: -1px)";
|
||
|
}
|
||
|
|
||
|
// Not (> y)
|
||
|
@else if ($op == "not") {
|
||
|
$media: "screen and (min-width: " + ($y + 1) + ")";
|
||
|
}
|
||
|
|
||
|
// Equal (<= y)
|
||
|
@else {
|
||
|
$media: "screen and (max-width: " + $y + ")";
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Min only.
|
||
|
@else if ($y == null) {
|
||
|
// Greater than or equal (>= x)
|
||
|
@if ($op == "gte") {
|
||
|
$media: "screen and (min-width: " + $x + ")";
|
||
|
}
|
||
|
|
||
|
// Less than or equal (<= inf / anything)
|
||
|
@else if ($op == "lte") {
|
||
|
$media: "screen";
|
||
|
}
|
||
|
|
||
|
// Greater than (> inf / invalid)
|
||
|
@else if ($op == "gt") {
|
||
|
$media: "screen and (max-width: -1px)";
|
||
|
}
|
||
|
|
||
|
// Less than (< x)
|
||
|
@else if ($op == "lt") {
|
||
|
$media: "screen and (max-width: " + ($x - 1) + ")";
|
||
|
}
|
||
|
|
||
|
// Not (< x)
|
||
|
@else if ($op == "not") {
|
||
|
$media: "screen and (max-width: " + ($x - 1) + ")";
|
||
|
}
|
||
|
|
||
|
// Equal (>= x)
|
||
|
@else {
|
||
|
$media: "screen and (min-width: " + $x + ")";
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Min and max.
|
||
|
@else {
|
||
|
// Greater than or equal (>= x)
|
||
|
@if ($op == "gte") {
|
||
|
$media: "screen and (min-width: " + $x + ")";
|
||
|
}
|
||
|
|
||
|
// Less than or equal (<= y)
|
||
|
@else if ($op == "lte") {
|
||
|
$media: "screen and (max-width: " + $y + ")";
|
||
|
}
|
||
|
|
||
|
// Greater than (> y)
|
||
|
@else if ($op == "gt") {
|
||
|
$media: "screen and (min-width: " + ($y + 1) + ")";
|
||
|
}
|
||
|
|
||
|
// Less than (< x)
|
||
|
@else if ($op == "lt") {
|
||
|
$media: "screen and (max-width: " + ($x - 1) + ")";
|
||
|
}
|
||
|
|
||
|
// Not (< x and > y)
|
||
|
@else if ($op == "not") {
|
||
|
$media: "screen and (max-width: " +
|
||
|
($x - 1) +
|
||
|
"), screen and (min-width: " +
|
||
|
($y + 1) +
|
||
|
")";
|
||
|
}
|
||
|
|
||
|
// Equal (>= x and <= y)
|
||
|
@else {
|
||
|
$media: "screen and (min-width: " +
|
||
|
$x +
|
||
|
") and (max-width: " +
|
||
|
$y +
|
||
|
")";
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// String.
|
||
|
@else {
|
||
|
// Missing a media type? Prefix with "screen".
|
||
|
@if (str-slice($a, 0, 1) == "(") {
|
||
|
$media: "screen and " + $a;
|
||
|
}
|
||
|
|
||
|
// Otherwise, use as-is.
|
||
|
@else {
|
||
|
$media: $a;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Output.
|
||
|
@media #{$media} {
|
||
|
@content;
|
||
|
}
|
||
|
}
|