100 lines
2.1 KiB
SCSS
100 lines
2.1 KiB
SCSS
$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%);
|
|
}
|
|
}
|
|
|
|
@mixin enhance-3d-transform {
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
transform-style: preserve-3d;
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
/* Optional: Force GPU acceleration */
|
|
will-change: transform;
|
|
}
|