diff options
| author | Mark Otto <markd.otto@gmail.com> | 2021-12-17 08:16:24 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-12-17 08:16:24 +0300 |
| commit | f729e4c7d1d92d2888c76db0e2590f7adfb3a16b (patch) | |
| tree | c256d52a5b355d1f32117e1e6a2acad7bce9f94e /scss | |
| parent | 4a66f229ed701d4ed8d6d5b7469984ab11d822f0 (diff) | |
Convert alerts to CSS variables (#35401)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_alert.scss | 20 | ||||
| -rw-r--r-- | scss/mixins/_alert.scss | 10 |
2 files changed, 23 insertions, 7 deletions
diff --git a/scss/_alert.scss b/scss/_alert.scss index 34f1e84edf..ed47806e27 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -3,11 +3,22 @@ // .alert { + // scss-docs-start alert-css-vars + --#{$variable-prefix}alert-bg: transparent; + --#{$variable-prefix}alert-padding: #{$alert-padding-y $alert-padding-x}; + --#{$variable-prefix}alert-margin-bottom: #{$alert-margin-bottom}; + --#{$variable-prefix}alert-color: #{$alert-padding-y $alert-padding-x}; + --#{$variable-prefix}alert-border-color: transparent; + --#{$variable-prefix}alert-border: #{$alert-border-width} solid var(--#{$variable-prefix}alert-border-color); + --#{$variable-prefix}alert-border-radius: #{$alert-border-radius}; + // scss-docs-end alert-css-vars + position: relative; - padding: $alert-padding-y $alert-padding-x; - margin-bottom: $alert-margin-bottom; - border: $alert-border-width solid transparent; - @include border-radius($alert-border-radius); + padding: var(--#{$variable-prefix}alert-padding); + margin-bottom: var(--#{$variable-prefix}alert-margin-bottom); + background-color: var(--#{$variable-prefix}alert-bg); + border: var(--#{$variable-prefix}alert-border); + border-radius: var(--#{$variable-prefix}alert-border-radius, 0); // stylelint-disable-line property-disallowed-list } // Headings for larger alerts @@ -47,6 +58,7 @@ $alert-background: shift-color($value, $alert-bg-scale); $alert-border: shift-color($value, $alert-border-scale); $alert-color: shift-color($value, $alert-color-scale); + @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) { $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale)); } diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss index f3eb59511d..eb84af1289 100644 --- a/scss/mixins/_alert.scss +++ b/scss/mixins/_alert.scss @@ -1,8 +1,12 @@ // scss-docs-start alert-variant-mixin @mixin alert-variant($background, $border, $color) { - color: $color; - @include gradient-bg($background); - border-color: $border; + --#{$variable-prefix}alert-color: #{$color}; + --#{$variable-prefix}alert-bg: #{$background}; + --#{$variable-prefix}alert-border-color: #{$border}; + + @if $enable-gradients { + background-image: var(--#{$variable-prefix}gradient); + } .alert-link { color: shade-color($color, 20%); |