95 lines
1.8 KiB
SCSS
95 lines
1.8 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin scrollbar-custom(
|
|
$color: greenyellow,
|
|
$width: 8px,
|
|
$track-bg: transparent
|
|
) {
|
|
scrollbar-color: $color $track-bg;
|
|
scrollbar-width: thin;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: $width;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: $track-bg;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: $color;
|
|
border-radius: calc($width / 2);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background-color: darken($color, 10%);
|
|
}
|
|
}
|
|
|
|
// Usage
|
|
.scrollable-child {
|
|
@include scrollbar-custom(greenyellow, 10px);
|
|
}
|