Skip to content

Commit

Permalink
fix(@clayui/css): Cadmin Alerts allow better customization of alert v…
Browse files Browse the repository at this point in the history 
…ariant components, use `clay-alert-variant` mixin to generate alert variant styles

fix(@clayui/css): Cadmin Alerts adds Sass maps `$alert-primary`, `$alert-secondary`, `$alert-info`, `$alert-warning`, `$alert-danger`, `$alert-light`, `$alert-dark`
  • Loading branch information
@pat270
pat270 committed Sep 27, 2021
1 parent 9be70d7 commit 3410faf
Show file tree
Hide file tree
Showing 2 changed files with 224 additions and 34 deletions.
34 changes: 1 addition & 33 deletions packages/clay-css/src/scss/cadmin/components/_alerts.scss
View file
Expand Up @@ -240,38 +240,6 @@

@each $cadmin-color, $cadmin-value in $cadmin-alert-palette {
.alert-#{$cadmin-color} {
background-color: map-get($cadmin-value, bg);
border-color: map-get($cadmin-value, border-color);
color: map-get($cadmin-value, color);

hr {
border-top-color: darken(map-get($cadmin-value, border-color), 5%);
}

.alert-btn {
@include clay-button-variant(map-get($cadmin-value, alert-btn));
}

.close {
color: map-get($cadmin-value, close-color);

&:hover,
&:focus {
color: map-get($cadmin-value, close-hover-color);
}
}

.alert-link {
color: map-get($cadmin-value, link-color);

&:hover,
&:focus {
color: map-get($cadmin-value, link-hover-color);
}
}

.lead {
color: map-get($cadmin-value, lead-color);
}
@include clay-alert-variant($cadmin-value);
}
}
224 changes: 223 additions & 1 deletion packages/clay-css/src/scss/cadmin/variables/_alerts.scss
View file
Expand Up @@ -311,7 +311,7 @@ $cadmin-alert-feedback: map-deep-merge(
$cadmin-alert-feedback
);

// Alert Variants
// .alert-primary

$cadmin-alert-primary-bg: $cadmin-primary-l3 !default;
$cadmin-alert-primary-border-color: $cadmin-primary-l1 !default;
Expand All @@ -336,6 +336,34 @@ $cadmin-alert-primary-btn: map-deep-merge(
$cadmin-alert-primary-btn
);

$cadmin-alert-primary: () !default;
$cadmin-alert-primary: map-deep-merge(
(
background-color: $cadmin-alert-primary-bg,
border-color: $cadmin-alert-primary-border-color,
color: $cadmin-alert-primary-color,
close: (
color: $cadmin-alert-primary-close-color,
hover: (
color: $cadmin-alert-primary-close-hover-color,
),
),
lead: (
color: $cadmin-alert-primary-lead-color,
),
link: (
color: $cadmin-alert-primary-link-color,
hover: (
color: $cadmin-alert-primary-link-hover-color,
),
),
alert-btn: $cadmin-alert-primary-btn,
),
$cadmin-alert-primary
);

// .alert-secondary

$cadmin-alert-secondary-bg: $cadmin-secondary-l3 !default;
$cadmin-alert-secondary-border-color: $cadmin-secondary-l1 !default;
$cadmin-alert-secondary-color: $cadmin-secondary !default;
Expand All @@ -360,6 +388,34 @@ $cadmin-alert-secondary-btn: map-deep-merge(
$cadmin-alert-secondary-btn
);

$cadmin-alert-secondary: () !default;
$cadmin-alert-secondary: map-deep-merge(
(
background-color: $cadmin-alert-secondary-bg,
border-color: $cadmin-alert-secondary-border-color,
color: $cadmin-alert-secondary-color,
close: (
color: $cadmin-alert-secondary-close-color,
hover: (
color: $cadmin-alert-secondary-close-hover-color,
),
),
lead: (
color: $cadmin-alert-secondary-lead-color,
),
link: (
color: $cadmin-alert-secondary-link-color,
hover: (
color: $cadmin-alert-secondary-link-hover-color,
),
),
alert-btn: $cadmin-alert-secondary-btn,
),
$cadmin-alert-secondary
);

// .alert-success

$cadmin-alert-success-bg: $cadmin-success-l2 !default;
$cadmin-alert-success-border-color: $cadmin-success-l1 !default;
$cadmin-alert-success-color: $cadmin-success !default;
Expand All @@ -383,6 +439,34 @@ $cadmin-alert-success-btn: map-deep-merge(
$cadmin-alert-success-btn
);

$cadmin-alert-success: () !default;
$cadmin-alert-success: map-deep-merge(
(
background-color: $cadmin-alert-success-bg,
border-color: $cadmin-alert-success-border-color,
color: $cadmin-alert-success-color,
close: (
color: $cadmin-alert-success-close-color,
hover: (
color: $cadmin-alert-success-close-hover-color,
),
),
lead: (
color: $cadmin-alert-success-lead-color,
),
link: (
color: $cadmin-alert-success-link-color,
hover: (
color: $cadmin-alert-success-link-hover-color,
),
),
alert-btn: $cadmin-alert-success-btn,
),
$cadmin-alert-success
);

// .alert-info

$cadmin-alert-info-bg: $cadmin-info-l2 !default;
$cadmin-alert-info-border-color: $cadmin-info-l1 !default;
$cadmin-alert-info-color: $cadmin-info !default;
Expand All @@ -407,6 +491,34 @@ $cadmin-alert-info-btn: map-deep-merge(
$cadmin-alert-info-btn
);

$cadmin-alert-info: () !default;
$cadmin-alert-info: map-deep-merge(
(
background-color: $cadmin-alert-info-bg,
border-color: $cadmin-alert-info-border-color,
color: $cadmin-alert-info-color,
close: (
color: $cadmin-alert-info-close-color,
hover: (
color: $cadmin-alert-info-close-hover-color,
),
),
lead: (
color: $cadmin-alert-info-lead-color,
),
link: (
color: $cadmin-alert-info-link-color,
hover: (
color: $cadmin-alert-info-link-hover-color,
),
),
alert-btn: $cadmin-alert-info-btn,
),
$cadmin-alert-info
);

// .alert-warning

$cadmin-alert-warning-bg: $cadmin-warning-l2 !default;
$cadmin-alert-warning-border-color: $cadmin-warning-l1 !default;
$cadmin-alert-warning-color: $cadmin-warning !default;
Expand All @@ -430,6 +542,34 @@ $cadmin-alert-warning-btn: map-deep-merge(
$cadmin-alert-warning-btn
);

$cadmin-alert-warning: () !default;
$cadmin-alert-warning: map-deep-merge(
(
background-color: $cadmin-alert-warning-bg,
border-color: $cadmin-alert-warning-border-color,
color: $cadmin-alert-warning-color,
close: (
color: $cadmin-alert-warning-close-color,
hover: (
color: $cadmin-alert-warning-close-hover-color,
),
),
lead: (
color: $cadmin-alert-warning-lead-color,
),
link: (
color: $cadmin-alert-warning-link-color,
hover: (
color: $cadmin-alert-warning-link-hover-color,
),
),
alert-btn: $cadmin-alert-warning-btn,
),
$cadmin-alert-warning
);

// .alert-danger

$cadmin-alert-danger-bg: $cadmin-danger-l2 !default;
$cadmin-alert-danger-border-color: $cadmin-danger-l1 !default;
$cadmin-alert-danger-color: $cadmin-danger !default;
Expand All @@ -453,6 +593,34 @@ $cadmin-alert-danger-btn: map-deep-merge(
$cadmin-alert-danger-btn
);

$cadmin-alert-danger: () !default;
$cadmin-alert-danger: map-deep-merge(
(
background-color: $cadmin-alert-danger-bg,
border-color: $cadmin-alert-danger-border-color,
color: $cadmin-alert-danger-color,
close: (
color: $cadmin-alert-danger-close-color,
hover: (
color: $cadmin-alert-danger-close-hover-color,
),
),
lead: (
color: $cadmin-alert-danger-lead-color,
),
link: (
color: $cadmin-alert-danger-link-color,
hover: (
color: $cadmin-alert-danger-link-hover-color,
),
),
alert-btn: $cadmin-alert-danger-btn,
),
$cadmin-alert-danger
);

// .alert-light

$cadmin-alert-light-bg: $cadmin-light-l2 !default;
$cadmin-alert-light-border-color: $cadmin-light-l1 !default;
$cadmin-alert-light-color: $cadmin-dark !default;
Expand All @@ -477,6 +645,34 @@ $cadmin-alert-light-btn: map-deep-merge(
$cadmin-alert-light-btn
);

$cadmin-alert-light: () !default;
$cadmin-alert-light: map-deep-merge(
(
background-color: $cadmin-alert-light-bg,
border-color: $cadmin-alert-light-border-color,
color: $cadmin-alert-light-color,
close: (
color: $cadmin-alert-light-close-color,
hover: (
color: $cadmin-alert-light-close-hover-color,
),
),
lead: (
color: $cadmin-alert-light-lead-color,
),
link: (
color: $cadmin-alert-light-link-color,
hover: (
color: $cadmin-alert-light-link-hover-color,
),
),
alert-btn: $cadmin-alert-light-btn,
),
$cadmin-alert-light
);

// .alert-dark

$cadmin-alert-dark-bg: $cadmin-dark-l2 !default;
$cadmin-alert-dark-border-color: $cadmin-dark-l1 !default;
$cadmin-alert-dark-color: $cadmin-light !default;
Expand All @@ -501,6 +697,32 @@ $cadmin-alert-dark-btn: map-deep-merge(
$cadmin-alert-dark-btn
);

$cadmin-alert-dark: () !default;
$cadmin-alert-dark: map-deep-merge(
(
background-color: $cadmin-alert-dark-bg,
border-color: $cadmin-alert-dark-border-color,
color: $cadmin-alert-dark-color,
close: (
color: $cadmin-alert-dark-close-color,
hover: (
color: $cadmin-alert-dark-close-hover-color,
),
),
lead: (
color: $cadmin-alert-dark-lead-color,
),
link: (
color: $cadmin-alert-dark-link-color,
hover: (
color: $cadmin-alert-dark-link-hover-color,
),
),
alert-btn: $cadmin-alert-dark-btn,
),
$cadmin-alert-dark
);

$cadmin-alert-palette: () !default;
$cadmin-alert-palette: map-deep-merge(
(
Expand Down

0 comments on commit 3410faf

Please sign in to comment.