Skip to content

Commit 7738e78

Browse files
pat270pat270
committed
feat(@clayui/css): Alerts adds components .alert-inline, alert-autofit-stacked, alert-autofit-stacked-sm-down, alert-autofit-stacked-xs-down, alert-indicator-start
.alert-inline - changes an alert to use `display: inline-block`. It will only expand to be as wide as its content .alert-autofit-stacked - force each `autofit-col` to stack on top of each other .alert-autofit-stacked-sm-down - force each `autofit-col` to stack on top of each other at screen sizes 767px and below .alert-autofit-stacked-xs-down - force each `autofit-col` to stack on top of each other at screen sizes 575px and below .alert-indicator-start - An alternative to using autofit utilities, this keeps the text after the indicator icon from flowing under the icon when it breaks to a new line feat(@clayui/css): Alerts adds Sass maps `$alert-inline`, `$alert-autofit-stacked`, `$alert-autofit-stacked-sm-down`, `$alert-autofit-stacked-xs-down`, `$alert-indicator-start`
1 parent 505a630 commit 7738e78

File tree

3 files changed

+395
-1
lines changed

3 files changed

+395
-1
lines changed

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ $alert-close: map-deep-merge(
2727
$alert-close
2828
);
2929

30-
$alert-font-size: 0.875rem !default; // 14px
30+
$alert-font-size: 1rem !default; // 14px
3131

3232
$alert-lead-font-size: $alert-font-size !default;
3333
$alert-lead-font-weight: $font-weight-semi-bold !default;
@@ -105,6 +105,28 @@ $alert-autofit-row: map-deep-merge(
105105
$alert-autofit-row
106106
);
107107

108+
// .alert-indicator-start.alert
109+
110+
$alert-indicator-start: () !default;
111+
$alert-indicator-start: map-deep-merge(
112+
(
113+
padding-left: calc(#{$alert-font-size} + #{$alert-padding-x} + 0.5rem),
114+
alert-fluid: (
115+
container-fluid: (
116+
padding-left:
117+
calc(#{$alert-font-size} + #{$alert-padding-x} + 0.5rem),
118+
),
119+
),
120+
alert-feedback: (
121+
padding-left: calc(#{$alert-font-size} + 0.5rem),
122+
),
123+
alert-indicator: (
124+
margin-left: calc(-1em - 0.5rem),
125+
),
126+
),
127+
$alert-indicator-start
128+
);
129+
108130
// .alert-primary
109131

110132
$alert-primary-color: $primary !default;

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

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,244 @@
233233
}
234234
}
235235

236+
// .alert-inline
237+
238+
.alert-inline.alert {
239+
@include clay-css($alert-inline);
240+
241+
&.alert-dismissible {
242+
$alert-dismissible: setter(
243+
map-get($alert-inline, alert-dismissible),
244+
()
245+
);
246+
247+
@include clay-css($alert-dismissible);
248+
249+
&.alert-fluid {
250+
$alert-dismissible-alert-fluid: setter(
251+
map-get($alert-inline, alert-dismissible-alert-fluid),
252+
()
253+
);
254+
255+
@include clay-css($alert-dismissible-alert-fluid);
256+
257+
> .container,
258+
> .container-fluid {
259+
$container-fluid: setter(
260+
map-get($alert-dismissible-alert-fluid, container-fluid),
261+
()
262+
);
263+
264+
@include clay-css($container-fluid);
265+
266+
> .alert-autofit-row {
267+
$alert-autofit-row: setter(
268+
map-get($container-fluid, alert-autofit-row),
269+
map-get($alert-inline, alert-autofit-row),
270+
()
271+
);
272+
273+
@include clay-css($alert-autofit-row);
274+
}
275+
}
276+
}
277+
}
278+
279+
> .alert-autofit-row {
280+
$alert-autofit-row: setter(
281+
map-get($alert-inline, alert-autofit-row),
282+
()
283+
);
284+
285+
@include clay-css($alert-autofit-row);
286+
}
287+
288+
.close {
289+
$close: setter(map-get($alert-inline, close), ());
290+
291+
@include clay-close($close);
292+
}
293+
}
294+
295+
// Alert Autofit Stacked
296+
297+
.alert-autofit-stacked.alert {
298+
@include clay-css($alert-autofit-stacked);
299+
300+
> .alert-autofit-row {
301+
$alert-autofit-row: setter(
302+
map-get($alert-autofit-stacked, alert-autofit-row),
303+
()
304+
);
305+
306+
@include clay-css($alert-autofit-row);
307+
308+
> .autofit-col {
309+
$autofit-col: setter(map-get($alert-autofit-row, autofit-col), ());
310+
311+
@include clay-css($autofit-col);
312+
}
313+
314+
.btn-group {
315+
$btn-group: setter(map-get($alert-autofit-row, btn-group), ());
316+
317+
@include clay-css($btn-group);
318+
}
319+
}
320+
321+
.close {
322+
$close: setter(map-get($alert-autofit-stacked, close), ());
323+
324+
@include clay-close($close);
325+
}
326+
}
327+
328+
// Alert Autofit Stacked Sm Down
329+
330+
.alert-autofit-stacked-sm-down.alert {
331+
@include clay-css($alert-autofit-stacked-sm-down);
332+
333+
> .alert-autofit-row {
334+
$alert-autofit-row: setter(
335+
map-get($alert-autofit-stacked-sm-down, alert-autofit-row),
336+
()
337+
);
338+
339+
@include media-breakpoint-down(sm) {
340+
@include clay-css($alert-autofit-row);
341+
}
342+
343+
> .autofit-col {
344+
$autofit-col: setter(map-get($alert-autofit-row, autofit-col), ());
345+
346+
@include media-breakpoint-down(sm) {
347+
@include clay-css($autofit-col);
348+
}
349+
}
350+
351+
.btn-group {
352+
$btn-group: setter(map-get($alert-autofit-row, btn-group), ());
353+
354+
@include media-breakpoint-down(sm) {
355+
@include clay-css($btn-group);
356+
}
357+
}
358+
}
359+
360+
.close {
361+
$close: setter(map-get($alert-autofit-stacked-sm-down, close), ());
362+
363+
@include media-breakpoint-down(sm) {
364+
@include clay-css($close);
365+
}
366+
}
367+
}
368+
369+
// Alert Autofit Stacked Xs Down
370+
371+
.alert-autofit-stacked-xs-down.alert {
372+
@include clay-css($alert-autofit-stacked-xs-down);
373+
374+
> .alert-autofit-row {
375+
$alert-autofit-row: setter(
376+
map-get($alert-autofit-stacked-xs-down, alert-autofit-row),
377+
()
378+
);
379+
380+
@include media-breakpoint-down(xs) {
381+
@include clay-css($alert-autofit-row);
382+
}
383+
384+
> .autofit-col {
385+
$autofit-col: setter(map-get($alert-autofit-row, autofit-col), ());
386+
387+
@include media-breakpoint-down(xs) {
388+
@include clay-css($autofit-col);
389+
}
390+
}
391+
392+
.btn-group {
393+
$btn-group: setter(map-get($alert-autofit-row, btn-group), ());
394+
395+
@include media-breakpoint-down(xs) {
396+
@include clay-css($btn-group);
397+
}
398+
}
399+
}
400+
401+
.close {
402+
$close: setter(map-get($alert-autofit-stacked-xs-down, close), ());
403+
404+
@include media-breakpoint-down(xs) {
405+
@include clay-css($close);
406+
}
407+
}
408+
}
409+
410+
// Alert Indicator Start
411+
412+
.alert-indicator-start.alert {
413+
@include clay-css($alert-indicator-start);
414+
415+
&.alert-fluid {
416+
$alert-fluid: setter(map-get($alert-indicator-start, alert-fluid), ());
417+
418+
@include clay-css($alert-fluid);
419+
420+
> .container,
421+
> .container-fluid {
422+
$container-fluid: setter(
423+
map-get($alert-fluid, container-fluid),
424+
()
425+
);
426+
427+
@include clay-css($container-fluid);
428+
}
429+
}
430+
431+
&.alert-feedback {
432+
$alert-feedback: setter(
433+
map-get($alert-indicator-start, alert-feedback),
434+
()
435+
);
436+
437+
@include clay-css($alert-feedback);
438+
}
439+
440+
.alert-indicator {
441+
$alert-indicator: setter(
442+
map-get($alert-indicator-start, alert-indicator),
443+
()
444+
);
445+
446+
@include clay-css($alert-indicator);
447+
448+
+ .lead {
449+
$lead: setter(map-get($alert-indicator, lead), ());
450+
451+
@include clay-css($lead);
452+
}
453+
}
454+
455+
.alert-autofit-row {
456+
$alert-autofit-row: setter(
457+
map-get($alert-indicator-start, alert-autofit-row),
458+
()
459+
);
460+
461+
@include clay-css($alert-autofit-row);
462+
463+
.alert-indicator:only-child {
464+
$alert-indicator-only-child: setter(
465+
map-get($alert-autofit-row, alert-indicator-only-child),
466+
()
467+
);
468+
469+
@include clay-css($alert-indicator-only-child);
470+
}
471+
}
472+
}
473+
236474
// Alert Variants
237475

238476
@each $color, $value in $alert-palette {

0 commit comments

Comments
 (0)