74 lines
1.0 KiB
SCSS
74 lines
1.0 KiB
SCSS
@use 'sass:map';
|
|
|
|
$-breakpoints: (
|
|
// 1 column
|
|
sm: 576px,
|
|
md: 768px,
|
|
// 2 columns
|
|
lg: 850px,
|
|
// 3 columns
|
|
xl: 1200px,
|
|
xxl: 1400px,
|
|
xxxl: 1650px
|
|
);
|
|
|
|
@function get($breakpoint) {
|
|
@return map.get($-breakpoints, $breakpoint);
|
|
}
|
|
|
|
/* Less than the given width */
|
|
@mixin lt($width) {
|
|
@media all and (max-width: calc(#{$width} - 1px)) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
/* Less than or equal to the given width */
|
|
@mixin lte($width) {
|
|
@media all and (max-width: $width) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin sm {
|
|
@media all and (min-width: get(sm)) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin md {
|
|
@media all and (min-width: get(md)) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin lg {
|
|
@media all and (min-width: get(lg)) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin xl {
|
|
@media all and (min-width: get(xl)) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin xxl {
|
|
@media all and (min-width: get(xxl)) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin xxxl {
|
|
@media all and (min-width: get(xxxl)) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin between($min, $max) {
|
|
@media all and (min-width: $min) and (max-width: $max) {
|
|
@content;
|
|
}
|
|
}
|