166 lines
3.9 KiB
SCSS
Vendored
166 lines
3.9 KiB
SCSS
Vendored
// Enable CSS Grid
|
|
$enable-grid-classes: false;
|
|
$enable-cssgrid: true;
|
|
|
|
// Opacity
|
|
.bg-opacity-0 {
|
|
--bs-bg-opacity: 0;
|
|
}
|
|
|
|
.border-opacity-0 {
|
|
--bs-border-opacity: 0;
|
|
}
|
|
|
|
.text-opacity-0 {
|
|
--bs-text-opacity: 0;
|
|
}
|
|
.text-opacity-10 {
|
|
--bs-text-opacity: 0.1;
|
|
}
|
|
|
|
// FORMS
|
|
|
|
// Required field indicator
|
|
.form-required {
|
|
color: var(--bs-danger);
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
// Form fields
|
|
.form-field {
|
|
margin-bottom: 1rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Fieldset
|
|
fieldset {
|
|
position: relative;
|
|
background-color: var(--bs-body-bg);
|
|
border: var(--bs-border-width) solid var(--bs-border-color);
|
|
border-radius: var(--bs-border-radius);
|
|
padding: 2rem 1rem 1rem;
|
|
margin: 2rem 0 1rem;
|
|
}
|
|
fieldset > legend {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 1rem;
|
|
transform: translateY(-50%);
|
|
background-color: var(--bs-body-bg);
|
|
border: var(--bs-border-width) solid var(--bs-border-color);
|
|
border-radius: var(--bs-border-radius);
|
|
padding: 0.125rem 0.75rem;
|
|
font-size: $font-size-sm;
|
|
line-height: 1.25;
|
|
width: fit-content;
|
|
max-width: 75%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.fieldset-description {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
// Check buttons, gap between label and first inline check
|
|
.form-label + .form-check-inline {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
// Extending utilities
|
|
$utilities: map-merge(
|
|
$utilities,
|
|
(
|
|
// Individual border widths
|
|
"border-top": (
|
|
property: border-top-width,
|
|
class: border-top,
|
|
values: $border-widths
|
|
),
|
|
"border-end": (
|
|
property: border-right-width,
|
|
class: border-end,
|
|
values: $border-widths
|
|
),
|
|
"border-bottom": (
|
|
property: border-bottom-width,
|
|
class: border-bottom,
|
|
values: $border-widths
|
|
),
|
|
"border-start": (
|
|
property: border-left-width,
|
|
class: border-start,
|
|
values: $border-widths
|
|
),
|
|
// Individual rounded values
|
|
"rounded-top-start": (
|
|
property: border-top-left-radius,
|
|
class: rounded-top-start,
|
|
values: (
|
|
null: var(--#{$prefix}border-radius),
|
|
0: 0,
|
|
1: var(--#{$prefix}border-radius-sm),
|
|
2: var(--#{$prefix}border-radius),
|
|
3: var(--#{$prefix}border-radius-lg),
|
|
4: var(--#{$prefix}border-radius-xl),
|
|
5: var(--#{$prefix}border-radius-xxl),
|
|
circle: 50%,
|
|
pill: var(--#{$prefix}border-radius-pill)
|
|
)
|
|
),
|
|
"rounded-top-end": (
|
|
property: border-top-right-radius,
|
|
class: rounded-top-end,
|
|
values: (
|
|
null: var(--#{$prefix}border-radius),
|
|
0: 0,
|
|
1: var(--#{$prefix}border-radius-sm),
|
|
2: var(--#{$prefix}border-radius),
|
|
3: var(--#{$prefix}border-radius-lg),
|
|
4: var(--#{$prefix}border-radius-xl),
|
|
5: var(--#{$prefix}border-radius-xxl),
|
|
circle: 50%,
|
|
pill: var(--#{$prefix}border-radius-pill)
|
|
)
|
|
),
|
|
"rounded-bottom-start": (
|
|
property: border-bottom-left-radius,
|
|
class: rounded-bottom-start,
|
|
values: (
|
|
null: var(--#{$prefix}border-radius),
|
|
0: 0,
|
|
1: var(--#{$prefix}border-radius-sm),
|
|
2: var(--#{$prefix}border-radius),
|
|
3: var(--#{$prefix}border-radius-lg),
|
|
4: var(--#{$prefix}border-radius-xl),
|
|
5: var(--#{$prefix}border-radius-xxl),
|
|
circle: 50%,
|
|
pill: var(--#{$prefix}border-radius-pill)
|
|
)
|
|
),
|
|
"rounded-bottom-end": (
|
|
property: border-bottom-right-radius,
|
|
class: rounded-bottom-end,
|
|
values: (
|
|
null: var(--#{$prefix}border-radius),
|
|
0: 0,
|
|
1: var(--#{$prefix}border-radius-sm),
|
|
2: var(--#{$prefix}border-radius),
|
|
3: var(--#{$prefix}border-radius-lg),
|
|
4: var(--#{$prefix}border-radius-xl),
|
|
5: var(--#{$prefix}border-radius-xxl),
|
|
circle: 50%,
|
|
pill: var(--#{$prefix}border-radius-pill)
|
|
)
|
|
),
|
|
)
|
|
);
|
|
|
|
// Region Footer
|
|
.region-footer {
|
|
padding: .75rem 0 3rem;
|
|
text-align: center;
|
|
}
|