64 lines
1.3 KiB
SCSS
64 lines
1.3 KiB
SCSS
// Define your breakpoints
|
|
$breakpoints: (
|
|
xs: 0,
|
|
sm: 576px,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px,
|
|
xxl: 1400px,
|
|
);
|
|
|
|
// Mixin for min-width (mobile-first)
|
|
@mixin media-up($breakpoint) {
|
|
@if map-has-key($breakpoints, $breakpoint) {
|
|
$value: map-get($breakpoints, $breakpoint);
|
|
@if $value == 0 {
|
|
@content;
|
|
} @else {
|
|
@media (min-width: $value) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Mixin for max-width (desktop-first)
|
|
@mixin media-down($breakpoint) {
|
|
@if map-has-key($breakpoints, $breakpoint) {
|
|
$value: map-get($breakpoints, $breakpoint);
|
|
@media (max-width: #{$value - 1px}) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Generate utility classes
|
|
@each $breakpoint, $value in $breakpoints {
|
|
// Hidden at this breakpoint and up
|
|
.hidden-#{$breakpoint}-up {
|
|
@include media-up($breakpoint) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// Hidden at this breakpoint and down
|
|
.hidden-#{$breakpoint}-down {
|
|
@include media-down($breakpoint) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// Visible only at this breakpoint
|
|
.visible-#{$breakpoint}-only {
|
|
display: none !important;
|
|
@include media-up($breakpoint) {
|
|
@if $breakpoint != xxl {
|
|
@include media-down($breakpoint) {
|
|
display: block !important;
|
|
}
|
|
} @else {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
}
|