cerebrate/webroot/theme/scss/additional/bootstrap-additional.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%);
}