Skip to content

Commit 9be70d7

Browse files
pat270pat270
committed
fix(@clayui/css): Alerts allow better customization of alert variant components, use clay-alert-variant mixin to generate alert variant styles
fix(@clayui/css): Alerts adds Sass maps `$alert-primary`, `$alert-secondary`, `$alert-info`, `$alert-warning`, `$alert-danger`, `$alert-light`, `$alert-dark`
1 parent a3f1722 commit 9be70d7

File tree

3 files changed

+433
-122
lines changed

3 files changed

+433
-122
lines changed

‎packages/clay-css/src/scss/atlas/variables/_alerts.scss

Lines changed: 199 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ $alert-autofit-row: map-deep-merge(
105105
$alert-autofit-row
106106
);
107107

108-
// Alert Variants
108+
// .alert-primary
109109

110110
$alert-primary-color: $primary !default;
111111
$alert-primary-bg: $primary-l3 !default;
@@ -123,6 +123,31 @@ $alert-primary-btn: map-deep-merge(
123123
$alert-primary-btn
124124
);
125125

126+
$alert-primary: () !default;
127+
$alert-primary: map-deep-merge(
128+
(
129+
background-color: $alert-primary-bg,
130+
border-color: $alert-primary-border-color,
131+
color: $alert-primary-color,
132+
close: (
133+
color: $alert-primary-close-color,
134+
hover: (
135+
color: $alert-primary-close-hover-color,
136+
),
137+
),
138+
lead: (
139+
color: $alert-primary-lead-color,
140+
),
141+
alert-link: (
142+
color: $alert-primary-link-color,
143+
),
144+
alert-btn: $alert-primary-btn,
145+
),
146+
$alert-primary
147+
);
148+
149+
// .alert-secondary
150+
126151
$alert-secondary-color: $secondary !default;
127152
$alert-secondary-bg: $secondary-l3 !default;
128153
$alert-secondary-border-color: $secondary-l1 !default;
@@ -139,6 +164,31 @@ $alert-secondary-btn: map-deep-merge(
139164
$alert-secondary-btn
140165
);
141166

167+
$alert-secondary: () !default;
168+
$alert-secondary: map-deep-merge(
169+
(
170+
background-color: $alert-secondary-bg,
171+
border-color: $alert-secondary-border-color,
172+
color: $alert-secondary-color,
173+
close: (
174+
color: $alert-secondary-close-color,
175+
hover: (
176+
color: $alert-secondary-close-hover-color,
177+
),
178+
),
179+
lead: (
180+
color: $alert-secondary-lead-color,
181+
),
182+
alert-link: (
183+
color: $alert-secondary-link-color,
184+
),
185+
alert-btn: $alert-secondary-btn,
186+
),
187+
$alert-secondary
188+
);
189+
190+
// .alert-success
191+
142192
$alert-success-color: $success !default;
143193
$alert-success-bg: $success-l2 !default;
144194
$alert-success-border-color: $success-l1 !default;
@@ -155,6 +205,31 @@ $alert-success-btn: map-deep-merge(
155205
$alert-success-btn
156206
);
157207

208+
$alert-success: () !default;
209+
$alert-success: map-deep-merge(
210+
(
211+
background-color: $alert-success-bg,
212+
border-color: $alert-success-border-color,
213+
color: $alert-success-color,
214+
close: (
215+
color: $alert-success-close-color,
216+
hover: (
217+
color: $alert-success-close-hover-color,
218+
),
219+
),
220+
lead: (
221+
color: $alert-success-lead-color,
222+
),
223+
alert-link: (
224+
color: $alert-success-link-color,
225+
),
226+
alert-btn: $alert-success-btn,
227+
),
228+
$alert-success
229+
);
230+
231+
// .alert-info
232+
158233
$alert-info-color: $info !default;
159234
$alert-info-bg: $info-l2 !default;
160235
$alert-info-border-color: $info-l1 !default;
@@ -171,6 +246,31 @@ $alert-info-btn: map-deep-merge(
171246
$alert-info-btn
172247
);
173248

249+
$alert-info: () !default;
250+
$alert-info: map-deep-merge(
251+
(
252+
background-color: $alert-info-bg,
253+
border-color: $alert-info-border-color,
254+
color: $alert-info-color,
255+
close: (
256+
color: $alert-info-close-color,
257+
hover: (
258+
color: $alert-info-close-hover-color,
259+
),
260+
),
261+
lead: (
262+
color: $alert-info-lead-color,
263+
),
264+
alert-link: (
265+
color: $alert-info-link-color,
266+
),
267+
alert-btn: $alert-info-btn,
268+
),
269+
$alert-info
270+
);
271+
272+
// .alert-warning
273+
174274
$alert-warning-color: $warning !default;
175275
$alert-warning-bg: $warning-l2 !default;
176276
$alert-warning-border-color: $warning-l1 !default;
@@ -187,6 +287,31 @@ $alert-warning-btn: map-deep-merge(
187287
$alert-warning-btn
188288
);
189289

290+
$alert-warning: () !default;
291+
$alert-warning: map-deep-merge(
292+
(
293+
background-color: $alert-warning-bg,
294+
border-color: $alert-warning-border-color,
295+
color: $alert-warning-color,
296+
close: (
297+
color: $alert-warning-close-color,
298+
hover: (
299+
color: $alert-warning-close-hover-color,
300+
),
301+
),
302+
lead: (
303+
color: $alert-warning-lead-color,
304+
),
305+
alert-link: (
306+
color: $alert-warning-link-color,
307+
),
308+
alert-btn: $alert-warning-btn,
309+
),
310+
$alert-warning
311+
);
312+
313+
// .alert-danger
314+
190315
$alert-danger-color: $danger !default;
191316
$alert-danger-bg: $danger-l2 !default;
192317
$alert-danger-border-color: $danger-l1 !default;
@@ -203,6 +328,31 @@ $alert-danger-btn: map-deep-merge(
203328
$alert-danger-btn
204329
);
205330

331+
$alert-danger: () !default;
332+
$alert-danger: map-deep-merge(
333+
(
334+
background-color: $alert-danger-bg,
335+
border-color: $alert-danger-border-color,
336+
color: $alert-danger-color,
337+
close: (
338+
color: $alert-danger-close-color,
339+
hover: (
340+
color: $alert-danger-close-hover-color,
341+
),
342+
),
343+
lead: (
344+
color: $alert-danger-lead-color,
345+
),
346+
alert-link: (
347+
color: $alert-danger-link-color,
348+
),
349+
alert-btn: $alert-danger-btn,
350+
),
351+
$alert-danger
352+
);
353+
354+
// .alert-light
355+
206356
$alert-light-color: $dark !default;
207357
$alert-light-bg: $light-l2 !default;
208358
$alert-light-border-color: $light-l1 !default;
@@ -224,6 +374,31 @@ $alert-light-btn: map-deep-merge(
224374
$alert-light-btn
225375
);
226376

377+
$alert-light: () !default;
378+
$alert-light: map-deep-merge(
379+
(
380+
background-color: $alert-light-bg,
381+
border-color: $alert-light-border-color,
382+
color: $alert-light-color,
383+
close: (
384+
color: $alert-light-close-color,
385+
hover: (
386+
color: $alert-light-close-hover-color,
387+
),
388+
),
389+
lead: (
390+
color: $alert-light-lead-color,
391+
),
392+
link: (
393+
color: $alert-light-link-color,
394+
),
395+
alert-btn: $alert-light-btn,
396+
),
397+
$alert-light
398+
);
399+
400+
// .alert-dark
401+
227402
$alert-dark-color: $light !default;
228403
$alert-dark-bg: $dark-l2 !default;
229404
$alert-dark-border-color: $dark-l1 !default;
@@ -239,3 +414,26 @@ $alert-dark-btn: map-deep-merge(
239414
),
240415
$alert-dark-btn
241416
);
417+
418+
$alert-dark: () !default;
419+
$alert-dark: map-deep-merge(
420+
(
421+
background-color: $alert-dark-bg,
422+
border-color: $alert-dark-border-color,
423+
color: $alert-dark-color,
424+
close: (
425+
color: $alert-dark-close-color,
426+
hover: (
427+
color: $alert-dark-close-hover-color,
428+
),
429+
),
430+
lead: (
431+
color: $alert-dark-lead-color,
432+
),
433+
link: (
434+
color: $alert-dark-link-color,
435+
),
436+
alert-btn: $alert-dark-btn,
437+
),
438+
$alert-dark
439+
);

‎packages/clay-css/src/scss/components/_alerts.scss

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -237,38 +237,6 @@
237237

238238
@each $color, $value in $alert-palette {
239239
.alert-#{$color} {
240-
background-color: map-get($value, bg);
241-
border-color: map-get($value, border-color);
242-
color: map-get($value, color);
243-
244-
hr {
245-
border-top-color: darken(map-get($value, border-color), 5%);
246-
}
247-
248-
.alert-btn {
249-
@include clay-button-variant(map-get($value, alert-btn));
250-
}
251-
252-
.close {
253-
color: map-get($value, close-color);
254-
255-
&:hover,
256-
&:focus {
257-
color: map-get($value, close-hover-color);
258-
}
259-
}
260-
261-
.alert-link {
262-
color: map-get($value, link-color);
263-
264-
&:hover,
265-
&:focus {
266-
color: map-get($value, link-hover-color);
267-
}
268-
}
269-
270-
.lead {
271-
color: map-get($value, lead-color);
272-
}
240+
@include clay-alert-variant($value);
273241
}
274242
}

0 commit comments

Comments
 (0)