99 lines
1.8 KiB
SCSS
Executable File
99 lines
1.8 KiB
SCSS
Executable File
//
|
|
// alerts.scss
|
|
//
|
|
|
|
.alert-top-border {
|
|
background-color: $card-bg;
|
|
border-color: var(--#{$prefix}border-color);
|
|
border-top: 2px solid var(--#{$prefix}border-color);
|
|
}
|
|
|
|
//
|
|
|
|
// alert-label-icon
|
|
|
|
.alert-label-icon {
|
|
position: relative;
|
|
padding-left: 60px;
|
|
border: 0;
|
|
|
|
.label-icon {
|
|
position: absolute;
|
|
width: 45px;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: rgba($white, 0.1);
|
|
border-right: 1px solid rgba($white, 0.1);
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
// label arrow
|
|
&.label-arrow {
|
|
overflow: hidden;
|
|
.label-icon {
|
|
color: $white;
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
border: 6px solid transparent;
|
|
right: -12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert-light{
|
|
color: $text-muted;
|
|
}
|
|
|
|
@each $color,
|
|
$value in $theme-colors {
|
|
.alert-top-border{
|
|
&.alert-#{$color} {
|
|
border-top-color: $value;
|
|
color: $value;
|
|
}
|
|
}
|
|
|
|
.alert-outline{
|
|
&.alert-#{$color} {
|
|
border: 1px solid rgba($value, .8);
|
|
color: $value;
|
|
}
|
|
}
|
|
|
|
// alert border left
|
|
.alert-border-left {
|
|
&.alert-#{$color} {
|
|
border-left-color: $value;
|
|
}
|
|
}
|
|
|
|
// label arrow
|
|
.label-arrow {
|
|
&.alert-#{$color} {
|
|
.label-icon {
|
|
background-color: $value;
|
|
&:after {
|
|
border-left-color: $value !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Alert border left example
|
|
|
|
.alert-border-left {
|
|
border-left: 3px solid;
|
|
}
|
|
|
|
.alert-top-border, .alert-outline{
|
|
&.alert-light{
|
|
color: $text-muted;
|
|
}
|
|
} |