blob: c6918864da5e2c3ae06d7bff1f97ff1c19aeade6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
---
version: 1
---
// Breakpoints
// @include breakpoint(sm) {};
@mixin breakpoint($min: 0, $max: 0) {
$type: type-of($min);
@if $type == string {
@if $min == xs { // < 544px
@media only screen and (max-width: $bp-xs) { @content; }
} @else if $min == sm { // > 544px
@media only screen and (min-width: $bp-sm) { @content; }
} @else if $min == md { // > 768px
@media only screen and (min-width: $bp-md) { @content; }
} @else if $min == lg { // > 992px
@media only screen and (min-width: $bp-lg) { @content; }
} @else if $min == xl { // > 1200px
@media only screen and (min-width: $bp-xl) { @content; }
} @else if $min == 2x {
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) { @content; }
} @else {
@warn 'Breakpoint mixin supports: xs, sm, md, lg, xl, 2x';
}
} @else if $type == number {
// Allow for custom parameters for min and max size
$query: 'all' !default;
@if $min != 0 and $max != 0 { $query: 'only screen and (min-width: #{$min}) and (max-width: #{$max})'; } // set both min and max
@else if $min != 0 and $max == 0 { $query: 'only screen and (min-width: #{$min})'; } // set just min
@else if $min == 0 and $max != 0 { $query: 'only screen and (max-width: #{$max})'; } // set just max
@media #{$query} { @content; }
}
}
|
