1 | @mixin breakpoint($class) {
|
2 | @if $class == xs {
|
3 | @media (max-width: 767px) { @content; }
|
4 | }
|
5 | @else if $class == xs-sm {
|
6 | @media (max-width: 991px) { @content; }
|
7 | }
|
8 | @else if $class == sm {
|
9 | @media (min-width: 768px) { @content; }
|
10 | }
|
11 | @else if $class == md {
|
12 | @media (min-width: 992px) { @content; }
|
13 | }
|
14 | @else if $class == lg {
|
15 | @media (min-width: 1200px) { @content; }
|
16 | }
|
17 | @else if $class == xl {
|
18 | @media (min-width: 1400px) { @content; }
|
19 | }
|
20 | @else {
|
21 | @media (min-width: $class) { @content; }
|
22 | }
|
23 | }
|
24 |
|
25 | @mixin breakpoint-strict($class) {
|
26 | @if $class == xs {
|
27 | @media (max-width: 767px) { @content; }
|
28 | }
|
29 | @else if $class == xs-sm {
|
30 | @media (max-width: 991px) { @content; }
|
31 | }
|
32 | @else if $class == sm {
|
33 | @media (min-width: 768px) and (max-width: 991px) { @content; }
|
34 | }
|
35 | @else if $class == md {
|
36 | @media (min-width: 992px) and (max-width: 1199px) { @content; }
|
37 | }
|
38 | @else if $class == lg {
|
39 | @media (min-width: 1200px) and (max-width: 1399px) { @content; }
|
40 | }
|
41 | @else if $class == xl {
|
42 | @media (min-width: 1400px) { @content; }
|
43 | }
|
44 | }
|