AutorÃa | Ultima modificación | Ver Log |
//
// Base styles
//
.alert {
position: relative;
margin: 1rem 0;
padding: $alert-padding-y $alert-padding-x;
border: $alert-border-width solid transparent;
@include border-radius($alert-border-radius);
font-size: $font-size-sm;
font-weight: $font-weight-medium;
#page-maintenance & {
width: max-content;
max-width: 100%;
margin: 3px 0;
}
.close[aria-hidden="true"] {
display: none;
}
.close {
&:before {
#page-maintenance & {
background-size: 14px;
}
}
}
p {
margin-bottom: .25rem;
&:last-child {
margin-top: 0;
margin-bottom: 0;
}
}
label {
margin-bottom: 0;
color: inherit;
}
h1, h2, h3, h4, h5 {
color: inherit;
}
h2 {
font-size: 1.5rem;
font-weight: $font-weight-bold;
}
h3 {
font-size: 1rem;
font-weight: $font-weight-bold;
}
& + .alert {
margin-top: 5px;
}
.close {
background-color: $container-bg;
}
// Advanced Notifications Plugin.
.notification_aicon {
width: 18px;
height: 18px;
}
.notification-block-close {
position: absolute;
top: 10px;
right: 10px;
}
}
.alert:first-of-type {
margin-top: 0;
}
h2 + .alert {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.alert--close {
padding-right: 40px;
.close {
margin: 0;
}
}
// Headings for larger alerts
.alert-heading {
// Specified to prevent conflicts of changing $headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
}
// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: $close-font-size + $alert-padding-x * 2;
// Adjust close link position
.close {
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: $alert-padding-y $alert-padding-x;
color: inherit;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
.alert-primary {
background-color: $blue-100;
color: $blue-900;
.theme-dark & {
background-color: #335094;
color: $blue-100;
}
}
.alert-secondary {
background-color: $gray-100;
color: $gray-900;
.theme-dark & {
background-color: $dm-gray-100;
color: $dm-gray-900;
}
}
.alert-success {
background-color: $green-100;
color: $green-900;
.theme-dark & {
background-color: #0a6457;
color: $green-100;
}
}
.que .validationerror,
.alert-danger {
background-color: $red-100;
color: $red-900;
.theme-dark & {
background-color: #B13A3A;
color: $red-100;
}
}
.alert-warning {
background-color: $yellow-100;
color: $yellow-900;
.theme-dark & {
background-color: #7E6E4E;
color: $yellow-100;
a {
color: $yellow-200;
}
}
}
.alert-info {
background-color: $blue-100;
color: $blue-900;
.theme-dark & {
background-color: #525ea9;
color: #dde1f8;
a {
color: $blue-100;
}
}
}
.alert-light {
background-color: $gray-100;
color: $gray-900;
.theme-dark & {
background-color: #212121;
color: $dm-gray-900;
.icon {
filter: invert(1);
}
}
}
.alert-dark {
background-color: $gray-900;
color: $gray-100;
.theme-dark & {
background-color: $dm-gray-900;
color: $dm-gray-100;
}
}