You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
4.5 KiB
223 lines
4.5 KiB
// breakpoints.scss v1.0 | @ajlkn | MIT licensed */ |
|
|
|
// Vars. |
|
|
|
/// Breakpoints. |
|
/// @var {list} |
|
$breakpoints: () !global; |
|
|
|
// 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. |
|
@elseif (str-slice($query, 0, 2) == '<=') { |
|
|
|
$op: 'lte'; |
|
$breakpoint: str-slice($query, 3); |
|
|
|
} |
|
|
|
// Greater than. |
|
@elseif (str-slice($query, 0, 1) == '>') { |
|
|
|
$op: 'gt'; |
|
$breakpoint: str-slice($query, 2); |
|
|
|
} |
|
|
|
// Less than. |
|
@elseif (str-slice($query, 0, 1) == '<') { |
|
|
|
$op: 'lt'; |
|
$breakpoint: str-slice($query, 2); |
|
|
|
} |
|
|
|
// Not. |
|
@elseif (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) |
|
@elseif ($op == 'lte') { |
|
$media: 'screen and (max-width: ' + $y + ')'; |
|
} |
|
|
|
// Greater than (> y) |
|
@elseif ($op == 'gt') { |
|
$media: 'screen and (min-width: ' + ($y + 1) + ')'; |
|
} |
|
|
|
// Less than (< 0 / invalid) |
|
@elseif ($op == 'lt') { |
|
$media: 'screen and (max-width: -1px)'; |
|
} |
|
|
|
// Not (> y) |
|
@elseif ($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) |
|
@elseif ($op == 'lte') { |
|
$media: 'screen'; |
|
} |
|
|
|
// Greater than (> inf / invalid) |
|
@elseif ($op == 'gt') { |
|
$media: 'screen and (max-width: -1px)'; |
|
} |
|
|
|
// Less than (< x) |
|
@elseif ($op == 'lt') { |
|
$media: 'screen and (max-width: ' + ($x - 1) + ')'; |
|
} |
|
|
|
// Not (< x) |
|
@elseif ($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) |
|
@elseif ($op == 'lte') { |
|
$media: 'screen and (max-width: ' + $y + ')'; |
|
} |
|
|
|
// Greater than (> y) |
|
@elseif ($op == 'gt') { |
|
$media: 'screen and (min-width: ' + ($y + 1) + ')'; |
|
} |
|
|
|
// Less than (< x) |
|
@elseif ($op == 'lt') { |
|
$media: 'screen and (max-width: ' + ($x - 1) + ')'; |
|
} |
|
|
|
// Not (< x and > y) |
|
@elseif ($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; |
|
} |
|
|
|
} |