167 lines
3.8 KiB
SCSS
167 lines
3.8 KiB
SCSS
@import "../../node_modules/bootstrap/scss/functions";
|
|
@import "../../node_modules/bootstrap/scss/variables";
|
|
@import "../../node_modules/bootstrap/scss/mixins";
|
|
@import "../../node_modules/bootstrap/scss/utilities";
|
|
|
|
@import "../mixins/callout";
|
|
@import "../mixins/toast";
|
|
@import "../mixins/forms-severity";
|
|
|
|
$calloutBgColor: $white !default;
|
|
$calloutShadow: 0 0 35px 0 rgba(154, 161, 171, 0.25) !default;;
|
|
$calloutBorderColor: $gray-200 !default;
|
|
|
|
/* Callout */
|
|
.callout {
|
|
border: 1px solid $calloutBorderColor;
|
|
border-radius: .25rem;
|
|
background-color: $calloutBgColor;
|
|
box-shadow: $calloutShadow;
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
.callout-#{$color} {
|
|
@include callout-variant($value);
|
|
border-left-width: .25rem;
|
|
border-left-style: solid;
|
|
}
|
|
}
|
|
|
|
|
|
/* Toasts */
|
|
$toast-bg-level: -70% !default;
|
|
$toast-border-level: -60% !default;
|
|
$toast-color-level: 70% !default;
|
|
|
|
.toast {
|
|
min-width: 250px;
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
.toast-#{$color} {
|
|
@include toast-variant(shift-color($value, $toast-bg-level), shift-color($value, $toast-border-level), shift-color($value, $toast-color-level));
|
|
}
|
|
}
|
|
|
|
/* Dropdown-item */
|
|
.dropdown-item {
|
|
@each $color, $value in $theme-colors {
|
|
&.dropdown-item-#{$color} {
|
|
color: color-contrast($value);
|
|
text-decoration: none;
|
|
background-color: $value;
|
|
}
|
|
|
|
&.dropdown-item-outline-#{$color} {
|
|
&:hover {
|
|
color: color-contrast($value);
|
|
background-color: $value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Progress Timeline */
|
|
.progress-timeline {
|
|
padding: 0.2em 0.2em 0.5em 0.2em;
|
|
ul {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
list-style-type: none;
|
|
position: relative
|
|
}
|
|
li.progress-inactive {
|
|
opacity: 0.5;
|
|
}
|
|
.progress-line {
|
|
height: 2px;
|
|
}
|
|
.progress-line.progress-inactive {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
/* Forms severity */
|
|
.form-control.is-invalid {
|
|
&.info {
|
|
@include form-control-validation-severity-state($info);
|
|
}
|
|
&.warning {
|
|
@include form-control-validation-severity-state($warning);
|
|
}
|
|
}
|
|
|
|
.form-select.is-invalid:not([multiple]):not([size]),
|
|
.form-select.is-invalid:not([multiple])[size="1"]
|
|
.form-select.is-invalid {
|
|
&.info {
|
|
@include form-select-validation-severity-state($info);
|
|
}
|
|
&.warning {
|
|
@include form-select-validation-severity-state($warning);
|
|
}
|
|
}
|
|
|
|
.form-check-input.is-invalid {
|
|
&.info {
|
|
@include form-check-input-validation-severity-state($info);
|
|
}
|
|
&.warning {
|
|
@include form-check-input-validation-severity-state($warning);
|
|
}
|
|
}
|
|
|
|
/* Utilities */
|
|
// Use bootstrap's utilities API with something like this
|
|
// $utilities: map-merge(
|
|
// $utilities,
|
|
// (
|
|
// "max-width": map-merge(
|
|
// map-get($utilities, "max-width"),
|
|
// (
|
|
// values: map-merge(
|
|
// map-get(map-get($utilities, "max-width"), "values"),
|
|
// (
|
|
// 25: 25%,
|
|
// 50: 50%,
|
|
// 75: 75%,
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// )
|
|
// )
|
|
// );
|
|
.mw-75 {
|
|
max-width: 75% !important;
|
|
}
|
|
.mw-50 {
|
|
max-width: 50% !important;
|
|
}
|
|
.mw-25 {
|
|
max-width: 25% !important;
|
|
}
|
|
.mh-75 {
|
|
max-height: 75% !important;
|
|
}
|
|
.mh-50 {
|
|
max-height: 50% !important;
|
|
}
|
|
.mh-25 {
|
|
max-height: 25% !important;
|
|
}
|
|
|
|
.p-abs-center-y {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.p-abs-center-x {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.p-abs-center-both {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
} |