|
1 | | -// |
2 | | -// Base styles |
3 | | -// |
| 1 | +#{$ouds-root-selector} { |
| 2 | + --#{$prefix}alert-border-radius: #{$ouds-alert-border-radius-default}; |
| 3 | +} |
4 | 4 |
|
5 | 5 | .alert { |
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 | | - @include rfs($font-size-base, --#{$prefix}alert-font-size); // OUDS mod |
12 | | - --#{$prefix}alert-line-height: #{$line-height-base}; // OUDS mod |
13 | | - --#{$prefix}alert-color: #{$alert-color}; // OUDS mod |
14 | | - --#{$prefix}alert-border-color: transparent; |
15 | | - --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); |
16 | | - --#{$prefix}alert-border-radius: #{$alert-border-radius}; |
17 | | - // OUDS mod: no `--#{$prefix}alert-link-color` |
18 | | - --#{$prefix}alert-logo-size: #{$alert-logo-size}; // OUDS mod |
19 | | - --#{$prefix}alert-icon-size: #{$alert-icon-size}; // OUDS mod |
20 | | - --#{$prefix}alert-icon-margin-y: #{$alert-icon-margin-y}; // OUDS mod |
21 | | - --#{$prefix}alert-link-font-weight: #{$alert-link-font-weight}; // OUDS mod |
22 | | - --#{$prefix}alert-heading-font-weight: #{$alert-heading-font-weight}; // OUDS mod |
23 | | - --#{$prefix}alert-dismissible-padding-right: #{$alert-dismissible-padding-r}; // OUDS mod |
24 | | - --#{$prefix}alert-btn-close-offset: #{$alert-btn-close-offset}; // OUDS mod |
25 | | - // scss-docs-end alert-css-vars |
26 | | - |
27 | | - position: relative; |
28 | | - display: flex; // OUDS mod |
29 | | - padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); |
30 | | - margin-bottom: var(--#{$prefix}alert-margin-bottom); |
31 | | - @include font-size(var(--#{$prefix}alert-font-size)); |
32 | | - line-height: var(--#{$prefix}alert-line-height); |
33 | | - color: var(--#{$prefix}alert-color); |
34 | | - background-color: var(--#{$prefix}alert-bg); |
35 | | - border: var(--#{$prefix}alert-border); |
| 6 | + display: flex; |
| 7 | + gap: $ouds-alert-space-column-gap; |
| 8 | + align-items: flex-start; |
36 | 9 | @include border-radius(var(--#{$prefix}alert-border-radius)); |
37 | 10 | } |
38 | 11 |
|
39 | | -// Headings for larger alerts |
40 | | -.alert-heading { |
41 | | - // OUDS mod: ensure headings look like paragraphs |
42 | | - margin: 0; |
43 | | - font-size: inherit; |
44 | | - font-weight: var(--#{$prefix}alert-heading-font-weight); |
45 | | - line-height: inherit; |
46 | | - // End mod |
47 | | - // Specified to prevent conflicts of changing $headings-color |
48 | | - color: inherit; |
49 | | -} |
| 12 | +.alert-message { |
| 13 | + --#{$prefix}alert-icon-margin-top: #{$ouds-alert-space-padding-block}; // Here to avoid an encapsulation |
| 14 | + min-width: $ouds-alert-size-min-width; |
| 15 | + min-height: $ouds-alert-size-min-height; |
| 16 | + padding-inline: $ouds-alert-space-padding-inline; |
| 17 | + background-color: var(--#{$prefix}alert-bg); |
| 18 | + border: var(--#{$prefix}alert-border-color) solid $ouds-alert-border-width; |
50 | 19 |
|
51 | | -// Provide class for links that match alerts |
52 | | -.alert-link { |
53 | | - font-weight: var(--#{$prefix}alert-link-font-weight); // OUDS mod |
54 | | - // OUDS mod: no `color` |
| 20 | + &:has(.btn) { |
| 21 | + padding-right: 0; |
| 22 | + } |
| 23 | + |
| 24 | + &:has(.alert-container > .link) { |
| 25 | + min-height: $ouds-alert-size-min-height-bottom-action-placement; |
| 26 | + } |
| 27 | + |
| 28 | + // To avoid overflow: hidden that hides the focus |
| 29 | + .btn { |
| 30 | + @include border-top-end-radius(var(--#{$prefix}alert-border-radius)); |
| 31 | + } |
| 32 | + |
| 33 | + &:not(:has(p:not(.alert-label), .bullet-list, .alert-container .link)) .btn { |
| 34 | + @include border-bottom-end-radius(var(--#{$prefix}alert-border-radius)); |
| 35 | + } |
55 | 36 | } |
56 | 37 |
|
| 38 | +.alert-icon { |
| 39 | + position: relative; |
| 40 | + display: block; |
| 41 | + flex-shrink: 0; |
| 42 | + width: px-to-rem($ouds-alert-size-icon); |
| 43 | + height: px-to-rem($ouds-alert-size-icon); |
| 44 | + margin-block: var(--#{$prefix}alert-icon-margin-top); |
| 45 | + color: var(--#{$prefix}alert-icon-color); |
| 46 | + |
| 47 | + &:where(:not(:has(svg, img, .icon))) { |
| 48 | + &::before, |
| 49 | + &::after { |
| 50 | + position: absolute; |
| 51 | + inset: 0; |
| 52 | + display: block; |
| 53 | + content: ""; |
| 54 | + } |
57 | 55 |
|
58 | | -// Dismissible alerts |
59 | | -// |
60 | | -// Expand the right padding and account for the close button's positioning. |
| 56 | + &::before { |
| 57 | + background-color: currentcolor; |
| 58 | + mask-image: escape-svg(var(--#{$prefix}alert-icon)); |
| 59 | + } |
61 | 60 |
|
62 | | -.alert-dismissible { |
63 | | - padding-right: var(--#{$prefix}alert-dismissible-padding-right); // OUDS mod |
| 61 | + &::after { |
| 62 | + background-color: var(--#{$prefix}alert-icon-internal-color); |
| 63 | + mask-image: escape-svg(var(--#{$prefix}alert-icon-internal)); |
| 64 | + } |
| 65 | + } |
64 | 66 |
|
65 | | - // Adjust close link position |
66 | | - .btn-close { |
67 | | - position: absolute; |
68 | | - top: var(--#{$prefix}alert-btn-close-offset); // OUDS mod |
69 | | - right: var(--#{$prefix}alert-btn-close-offset); // OUDS mod |
70 | | - z-index: $stretched-link-z-index + 1; |
71 | | - // OUDS mod: no padding |
| 67 | + svg, |
| 68 | + img, |
| 69 | + .icon { |
| 70 | + width: 100%; |
| 71 | + height: 100%; |
| 72 | + font-size: $ouds-alert-size-icon; |
| 73 | + line-height: 1; |
| 74 | + vertical-align: baseline; // TODO: For reboot maybe ? |
72 | 75 | } |
73 | 76 | } |
74 | 77 |
|
| 78 | +.alert-container { |
| 79 | + display: flex; |
| 80 | + flex-grow: 1; |
| 81 | + flex-direction: column; |
| 82 | + gap: $ouds-alert-space-row-gap-action; |
| 83 | + align-items: flex-start; |
| 84 | + justify-content: center; |
| 85 | + min-height: $ouds-alert-size-min-height; |
| 86 | + padding-block: $ouds-alert-space-padding-block; |
| 87 | +} |
75 | 88 |
|
76 | | -// scss-docs-start alert-modifiers |
77 | | -// Generate contextual modifier classes for colorizing the alert. |
| 89 | +.alert-text-container { |
| 90 | + display: flex; |
| 91 | + flex-direction: column; |
| 92 | + gap: $ouds-alert-space-row-gap; |
| 93 | + color: $ouds-color-content-muted; |
| 94 | + |
| 95 | + > *, |
| 96 | + .bullet-list.fs-bm { |
| 97 | + --#{$prefix}bullet-list-icon-container-width: #{calc(px-to-rem($ouds-size-icon-with-label-medium-size-medium) - $ouds-bullet-list-space-padding-inline-level-0)}; // TODO: Do we need a token for that ? |
| 98 | + --#{$prefix}bullet-list-padding-block: #{$ouds-alert-space-row-gap-bullet / 2}; |
| 99 | + --#{$prefix}bullet-color: var(--#{$prefix}color-content-default); |
| 100 | + max-width: var(--#{$prefix}font-max-width-label-medium); |
| 101 | + margin-bottom: 0; |
| 102 | + @include get-font-size("label-medium"); |
| 103 | + font-weight: $ouds-font-weight-web-label-default; |
| 104 | + } |
| 105 | +} |
78 | 106 |
|
79 | | -@each $state, $value in $alert-colors { |
80 | | - .alert-#{$state} { |
81 | | - // OUDS mod: no --#{$prefix}alert-color |
82 | | - --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); |
83 | | - // OUDS mod: no `--#{$prefix}alert-link-color` |
84 | | - // OUDS mod |
85 | | - @if type-of(map-get($alert-icons, $state)) == "list" { |
86 | | - --#{$prefix}alert-icon-bg-image: #{nth(map-get($alert-icons, $state), 1)}; |
| 107 | +.alert-action-container { |
| 108 | + display: flex; |
| 109 | + gap: $ouds-alert-space-column-gap-action; |
| 110 | +} |
87 | 111 |
|
88 | | - .alert-icon::before { |
89 | | - background: var(--#{$prefix}alert-icon-bg-image) no-repeat top left / var(--#{$prefix}alert-logo-size); |
| 112 | +.alert-label { |
| 113 | + max-width: var(--#{$prefix}font-max-width-label-large); |
| 114 | + margin-bottom: 0; |
| 115 | + @include get-font-size("label-large"); |
| 116 | + font-weight: $ouds-font-weight-web-label-moderate; |
| 117 | + color: $ouds-color-content-default; |
| 118 | +} |
90 | 119 |
|
91 | | - /* rtl:raw: |
92 | | - background-position: top right; |
93 | | - */ |
94 | | - mask: none; |
95 | | - } |
96 | | - } @else { |
97 | | - --#{$prefix}alert-icon-bg-image: #{map-get($alert-icons, $state)}; |
98 | | - } |
99 | | - // End mod |
100 | | - } |
| 120 | +.use-rounded-corner-alert { |
| 121 | + --#{$prefix}alert-border-radius: #{$ouds-alert-border-radius-rounded}; |
101 | 122 | } |
102 | | -// scss-docs-end alert-modifiers |
103 | 123 |
|
104 | | -// |
105 | | -// OUDS mod |
106 | | -// |
| 124 | +.alert-neutral { |
| 125 | + --#{$prefix}component-icon-color: #{$ouds-color-content-default}; |
| 126 | + --#{$prefix}alert-bg: #{$ouds-color-surface-secondary}; |
| 127 | + --#{$prefix}alert-border-color: #{$ouds-color-border-default}; |
| 128 | +} |
107 | 129 |
|
108 | | -//// Additional content |
109 | | -.alert * p { |
110 | | - margin: 0; |
| 130 | +.alert-accent { |
| 131 | + --#{$prefix}alert-icon-color: #{$ouds-color-content-status-accent}; |
| 132 | + --#{$prefix}alert-bg: #{$ouds-color-surface-status-accent-muted}; |
| 133 | + --#{$prefix}alert-border-color: #{$ouds-color-border-status-accent}; |
111 | 134 | } |
112 | 135 |
|
113 | | -.alert-heading ~ p { |
114 | | - line-height: 1.5; |
| 136 | +.alert-negative { |
| 137 | + --#{$prefix}alert-icon: var(--#{$prefix}error-icon); |
| 138 | + --#{$prefix}alert-icon-color: #{$ouds-color-content-status-negative}; |
| 139 | + --#{$prefix}alert-bg: #{$ouds-color-surface-status-negative-muted}; |
| 140 | + --#{$prefix}alert-border-color: #{$ouds-color-border-status-negative}; |
115 | 141 | } |
116 | 142 |
|
117 | | -//// Icons |
118 | | -.alert-icon { |
119 | | - flex-shrink: 0; |
120 | | - width: var(--#{$prefix}alert-icon-size); |
121 | | - margin: calc(-.5 * var(--#{$prefix}alert-icon-margin-y)) 0; |
| 143 | +.alert-positive { |
| 144 | + --#{$prefix}alert-icon: var(--#{$prefix}success-icon); |
| 145 | + --#{$prefix}alert-icon-color: #{$ouds-color-content-status-positive}; |
| 146 | + --#{$prefix}alert-bg: #{$ouds-color-surface-status-positive-muted}; |
| 147 | + --#{$prefix}alert-border-color: #{$ouds-color-border-status-positive}; |
| 148 | +} |
122 | 149 |
|
123 | | - + * { |
124 | | - margin: var(--#{$prefix}alert-icon-margin-y) 0 0; |
| 150 | +.alert-info { |
| 151 | + --#{$prefix}alert-icon: var(--#{$prefix}info-icon); |
| 152 | + --#{$prefix}alert-icon-color: #{$ouds-color-content-status-info}; |
| 153 | + --#{$prefix}alert-bg: #{$ouds-color-surface-status-info-muted}; |
| 154 | + --#{$prefix}alert-border-color: #{$ouds-color-border-status-info}; |
| 155 | +} |
| 156 | + |
| 157 | +.alert-warning { |
| 158 | + --#{$prefix}alert-icon: var(--#{$prefix}warning-icon); |
| 159 | + --#{$prefix}alert-icon-color: var(--#{$prefix}icon-color-content-status-warning-external-shape); |
| 160 | + --#{$prefix}alert-icon-internal: var(--#{$prefix}warning-internal-icon); |
| 161 | + --#{$prefix}alert-icon-internal-color: var(--#{$prefix}icon-color-content-status-warning-internal-shape); |
| 162 | + --#{$prefix}alert-bg: #{$ouds-color-surface-status-warning-muted}; |
| 163 | + --#{$prefix}alert-border-color: #{$ouds-color-border-status-warning}; |
| 164 | +} |
| 165 | + |
| 166 | +@if $enable-bootstrap-compatibility { |
| 167 | + .alert { |
| 168 | + > svg, |
| 169 | + > img, |
| 170 | + > .icon { |
| 171 | + @extend .alert-icon; |
| 172 | + fill: currentcolor; |
| 173 | + } |
125 | 174 | } |
126 | 175 |
|
127 | | - + p { |
128 | | - font-weight: var(--#{$prefix}alert-heading-font-weight); |
| 176 | + .alert-danger { |
| 177 | + @extend .alert-negative; |
129 | 178 | } |
130 | 179 |
|
131 | | - &::before { |
132 | | - display: block; |
133 | | - order: -1; |
134 | | - height: var(--#{$prefix}alert-logo-size); |
135 | | - content: ""; |
136 | | - background-color: var(--#{$prefix}alert-border-color); |
137 | | - mask-image: var(--#{$prefix}alert-icon-bg-image); |
138 | | - mask-repeat: no-repeat; |
139 | | - |
140 | | - /* rtl:raw: |
141 | | - mask-position: top right; |
142 | | - */ |
143 | | - mask-size: var(--#{$prefix}alert-logo-size); |
| 180 | + .alert-success { |
| 181 | + @extend .alert-positive; |
| 182 | + } |
| 183 | + |
| 184 | + .alert-primary { |
| 185 | + @extend .alert-accent; |
| 186 | + } |
| 187 | + |
| 188 | + .alert-secondary, |
| 189 | + .alert-light, |
| 190 | + .alert-dark { |
| 191 | + @extend .alert-neutral; |
144 | 192 | } |
145 | | -} |
146 | 193 |
|
147 | | -//// Small alerts |
148 | | -.alert-sm { |
149 | | - // scss-docs-start alert-sm-css-vars |
150 | | - --#{$prefix}alert-padding-x: 0; |
151 | | - --#{$prefix}alert-padding-y: #{$alert-padding-sm}; |
152 | | - --#{$prefix}alert-margin-bottom: 0; |
153 | | - @include rfs($font-size-sm, --#{$prefix}alert-font-size); |
154 | | - --#{$prefix}alert-line-height: #{$line-height-sm}; |
155 | | - --#{$prefix}alert-border: 0; |
156 | | - --#{$prefix}alert-logo-size: #{$alert-logo-size-sm}; |
157 | | - --#{$prefix}alert-icon-size: #{$alert-icon-size-sm}; |
158 | | - --#{$prefix}alert-btn-close-offset: #{$alert-btn-close-offset-sm}; |
159 | | - // scss-docs-end alert-sm-css-vars |
160 | | - --#{$prefix}icon-spacing: #{$btn-close-padding-sm}; |
161 | | - |
162 | | - .alert-icon { |
163 | | - margin: var(--#{$prefix}alert-icon-margin-y) 0; |
| 194 | + .alert-heading { |
| 195 | + @extend .alert-label; |
164 | 196 | } |
165 | 197 | } |
166 | | -// End mod |
|
0 commit comments