208 lines
4.8 KiB
SCSS
208 lines
4.8 KiB
SCSS
@use "sass:list";
|
|
@use "sass:map";
|
|
@import "mixins";
|
|
@import "bootstrap/scss/functions";
|
|
@import "./bs-customs/button";
|
|
@import "./bs-customs/input";
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// * UTILITIES
|
|
// * Sizing
|
|
$utilities: map.merge(
|
|
$utilities, (
|
|
"height": map.merge(
|
|
map.get($utilities, "height"),
|
|
( responsive: true ),
|
|
),
|
|
)
|
|
);
|
|
|
|
// * Width
|
|
$utilities: map.merge(
|
|
$utilities,
|
|
(
|
|
"width": (
|
|
property: width,
|
|
class: w,
|
|
responsive: true,
|
|
values: (
|
|
'fit': fit-content,
|
|
'min': min-content,
|
|
'max': max-content,
|
|
25: 25%,
|
|
50: 50%,
|
|
75: 75%,
|
|
100: 100%,
|
|
)
|
|
)
|
|
)
|
|
);
|
|
|
|
// * Position
|
|
$utilities: map.merge(
|
|
$utilities, (
|
|
"position": map.merge(
|
|
map.get($utilities, "position"),
|
|
( responsive: true ),
|
|
),
|
|
)
|
|
);
|
|
$utilities: map.merge(
|
|
$utilities, (
|
|
"start": (
|
|
property: left,
|
|
class: start,
|
|
responsive: true,
|
|
values: (
|
|
0: 0%,
|
|
25: 25%,
|
|
50: 50%,
|
|
75: 75%,
|
|
100: 100%,
|
|
)
|
|
)
|
|
)
|
|
);
|
|
$utilities: map.merge(
|
|
$utilities, (
|
|
"top": map.merge(
|
|
map.get($utilities, "top"),
|
|
( responsive: true ),
|
|
),
|
|
)
|
|
);
|
|
|
|
// * Letter spacing
|
|
$utilities: map.merge(
|
|
$utilities,
|
|
(
|
|
"letter-spacing": (
|
|
property: letter-spacing,
|
|
class: ls,
|
|
responsive: true,
|
|
values: (
|
|
'normal': normal,
|
|
1: 1px,
|
|
2: 2px,
|
|
3: 3px,
|
|
4: 4px,
|
|
)
|
|
)
|
|
)
|
|
);
|
|
|
|
// * Spacing
|
|
$spacer: 1rem;
|
|
$spacers: (
|
|
0: 0,
|
|
1: $spacer * .25,
|
|
2: $spacer * .5,
|
|
3: $spacer,
|
|
4: $spacer * 1.5,
|
|
5: $spacer * 3,
|
|
10: $spacer * 10,
|
|
);
|
|
$utilities: map.merge(
|
|
$utilities,
|
|
(
|
|
// Margin utilities
|
|
"margin": (
|
|
responsive: true,
|
|
property: margin,
|
|
class: m,
|
|
values: map.merge($spacers, (auto: auto))
|
|
),
|
|
"margin-x": (
|
|
responsive: true,
|
|
property: margin-right margin-left,
|
|
class: mx,
|
|
values: map.merge($spacers, (auto: auto))
|
|
),
|
|
"margin-y": (
|
|
responsive: true,
|
|
property: margin-top margin-bottom,
|
|
class: my,
|
|
values: map.merge($spacers, (auto: auto))
|
|
),
|
|
"margin-top": (
|
|
responsive: true,
|
|
property: margin-top,
|
|
class: mt,
|
|
values: map.merge($spacers, (auto: auto))
|
|
),
|
|
"margin-end": (
|
|
responsive: true,
|
|
property: margin-right,
|
|
class: me,
|
|
values: map.merge($spacers, (auto: auto))
|
|
),
|
|
"margin-bottom": (
|
|
responsive: true,
|
|
property: margin-bottom,
|
|
class: mb,
|
|
values: map.merge($spacers, (auto: auto))
|
|
),
|
|
"margin-start": (
|
|
responsive: true,
|
|
property: margin-left,
|
|
class: ms,
|
|
values: map.merge($spacers, (auto: auto))
|
|
),
|
|
// Padding utilities
|
|
"padding": (
|
|
responsive: true,
|
|
property: padding,
|
|
class: p,
|
|
values: $spacers
|
|
),
|
|
"padding-x": (
|
|
responsive: true,
|
|
property: padding-right padding-left,
|
|
class: px,
|
|
values: $spacers
|
|
),
|
|
"padding-y": (
|
|
responsive: true,
|
|
property: padding-top padding-bottom,
|
|
class: py,
|
|
values: $spacers
|
|
),
|
|
"padding-top": (
|
|
responsive: true,
|
|
property: padding-top,
|
|
class: pt,
|
|
values: $spacers
|
|
),
|
|
"padding-end": (
|
|
responsive: true,
|
|
property: padding-right,
|
|
class: pe,
|
|
values: $spacers
|
|
),
|
|
"padding-bottom": (
|
|
responsive: true,
|
|
property: padding-bottom,
|
|
class: pb,
|
|
values: $spacers
|
|
),
|
|
"padding-start": (
|
|
responsive: true,
|
|
property: padding-left,
|
|
class: ps,
|
|
values: $spacers
|
|
),
|
|
)
|
|
);
|