106 lines
2.5 KiB
SCSS
106 lines
2.5 KiB
SCSS
@use "sass:list";
|
|
@use "sass:map";
|
|
@import "mixins";
|
|
@import "bootstrap/scss/functions";
|
|
@import "./bs-customs/button";
|
|
|
|
// SET SOME CLASSES WITH BOOTSTRAP BREAKPOINTS
|
|
// * Reponsive borders
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
@include media-breakpoint-up($breakpoint) {
|
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
|
@include generate-bs-borders($infix, $prefix);
|
|
|
|
@each $color, $value in $theme-colors {
|
|
@include generate-bs-borders($infix, $prefix, $color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// * Responsive sizings (used in laravel errors layouts)
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
@include media-breakpoint-up($breakpoint) {
|
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
|
.w#{$infix}-25 {
|
|
width: 25% !important;
|
|
}
|
|
.w#{$infix}-50 {
|
|
width: 50% !important;
|
|
}
|
|
.w#{$infix}-75 {
|
|
width: 75% !important;
|
|
}
|
|
.w#{$infix}-100 {
|
|
width: 100% !important;
|
|
}
|
|
.w#{$infix}-125 {
|
|
width: 125% !important;
|
|
}
|
|
.w#{$infix}-150 {
|
|
width: 150% !important;
|
|
}
|
|
.w#{$infix}-200 {
|
|
width: 200% !important;
|
|
}
|
|
.w#{$infix}-fit {
|
|
width: fit-content !important;
|
|
}
|
|
.w#{$infix}-auto {
|
|
width: auto !important;
|
|
}
|
|
|
|
@each $prop, $unit in (width: vw, height: vh) {
|
|
@each $size in [25, 50, 75, 100] {
|
|
.#{$unit}#{$infix}-#{$size} {
|
|
#{$prop}: #{$size}#{$unit} !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// * UTILITIES
|
|
// * Position
|
|
// Add variable
|
|
$utilities: map.merge(
|
|
$utilities,
|
|
(
|
|
"start": map.merge(
|
|
map.get($utilities, "start"),
|
|
(
|
|
values: map.merge(
|
|
map.get(map.get($utilities, "start"), "values"),
|
|
(30: 30%),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
);
|
|
|
|
// Enable responsive
|
|
$utilities: map.merge(
|
|
$utilities, (
|
|
"start": map.merge(
|
|
map.get($utilities, "start"),
|
|
( responsive: true ),
|
|
),
|
|
)
|
|
);
|
|
$utilities: map.merge(
|
|
$utilities, (
|
|
"top": map.merge(
|
|
map.get($utilities, "top"),
|
|
( responsive: true ),
|
|
),
|
|
)
|
|
);
|
|
$utilities: map.merge(
|
|
$utilities, (
|
|
"translate-middle": map.merge(
|
|
map.get($utilities, "translate-middle"),
|
|
( responsive: true ),
|
|
),
|
|
)
|
|
);
|