| 1 |
efrain |
1 |
//
|
|
|
2 |
// Base styles
|
|
|
3 |
//
|
|
|
4 |
|
|
|
5 |
.alert {
|
| 1441 |
ariadna |
6 |
// scss-docs-start alert-css-vars
|
|
|
7 |
--#{$prefix}alert-bg: transparent;
|
|
|
8 |
--#{$prefix}alert-padding-x: #{$alert-padding-x};
|
|
|
9 |
--#{$prefix}alert-padding-y: #{$alert-padding-y};
|
|
|
10 |
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
|
|
|
11 |
--#{$prefix}alert-color: inherit;
|
|
|
12 |
--#{$prefix}alert-border-color: transparent;
|
|
|
13 |
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
|
|
|
14 |
--#{$prefix}alert-border-radius: #{$alert-border-radius};
|
|
|
15 |
--#{$prefix}alert-link-color: inherit;
|
|
|
16 |
// scss-docs-end alert-css-vars
|
|
|
17 |
|
| 1 |
efrain |
18 |
position: relative;
|
| 1441 |
ariadna |
19 |
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
|
|
|
20 |
margin-bottom: var(--#{$prefix}alert-margin-bottom);
|
|
|
21 |
color: var(--#{$prefix}alert-color);
|
|
|
22 |
background-color: var(--#{$prefix}alert-bg);
|
|
|
23 |
border: var(--#{$prefix}alert-border);
|
|
|
24 |
@include border-radius(var(--#{$prefix}alert-border-radius));
|
| 1 |
efrain |
25 |
}
|
|
|
26 |
|
|
|
27 |
// Headings for larger alerts
|
|
|
28 |
.alert-heading {
|
|
|
29 |
// Specified to prevent conflicts of changing $headings-color
|
|
|
30 |
color: inherit;
|
|
|
31 |
}
|
|
|
32 |
|
|
|
33 |
// Provide class for links that match alerts
|
|
|
34 |
.alert-link {
|
|
|
35 |
font-weight: $alert-link-font-weight;
|
| 1441 |
ariadna |
36 |
color: var(--#{$prefix}alert-link-color);
|
| 1 |
efrain |
37 |
}
|
|
|
38 |
|
|
|
39 |
|
|
|
40 |
// Dismissible alerts
|
|
|
41 |
//
|
|
|
42 |
// Expand the right padding and account for the close button's positioning.
|
|
|
43 |
|
|
|
44 |
.alert-dismissible {
|
| 1441 |
ariadna |
45 |
padding-right: $alert-dismissible-padding-r;
|
| 1 |
efrain |
46 |
|
|
|
47 |
// Adjust close link position
|
| 1441 |
ariadna |
48 |
.btn-close {
|
| 1 |
efrain |
49 |
position: absolute;
|
|
|
50 |
top: 0;
|
|
|
51 |
right: 0;
|
| 1441 |
ariadna |
52 |
z-index: $stretched-link-z-index + 1;
|
|
|
53 |
padding: $alert-padding-y * 1.25 $alert-padding-x;
|
| 1 |
efrain |
54 |
}
|
|
|
55 |
}
|
|
|
56 |
|
|
|
57 |
|
| 1441 |
ariadna |
58 |
// scss-docs-start alert-modifiers
|
|
|
59 |
// Generate contextual modifier classes for colorizing the alert
|
|
|
60 |
@each $state in map-keys($theme-colors) {
|
|
|
61 |
.alert-#{$state} {
|
|
|
62 |
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
|
|
|
63 |
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
|
|
64 |
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
|
|
|
65 |
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
|
| 1 |
efrain |
66 |
}
|
|
|
67 |
}
|
| 1441 |
ariadna |
68 |
// scss-docs-end alert-modifiers
|