Commit 3ce2cde7 authored by jun's avatar jun
Browse files

MDL-75055 theme_boost: Darken close button colour in notification alerts

This is in order for the close button to have a good contrast against
the alert background and meet the minimum Level AA contrast ratio of 3:1
parent ceb41588
......@@ -2678,9 +2678,16 @@ $picker-emojis-per-row: 7 !default;
}
@each $color, $value in $theme-colors {
.alert-#{$color} a {
.alert-#{$color} {
a {
color: darken(theme-color-level($color, $alert-color-level), 10%);
}
// Darken the close button text colour inside notification alerts for better contrast.
.close {
color: darken(theme-color-level($color, $alert-color-level), 20%);
opacity: 0.6;
}
}
}
.alert a {
font-weight: $font-weight-bold;
......
......@@ -12007,27 +12007,59 @@ input[disabled] {
.alert-primary a {
color: #041d34; }
 
.alert-primary .close {
color: #000305;
opacity: 0.6; }
.alert-secondary a {
color: #525557; }
 
.alert-secondary .close {
color: #393b3d;
opacity: 0.6; }
.alert-success a, .environmenttable .ok a {
color: #0c1b0b; }
 
.alert-success .close, .environmenttable .ok .close {
color: black;
opacity: 0.6; }
.alert-info a {
color: #00171b; }
 
.alert-info .close {
color: black;
opacity: 0.6; }
.alert-warning a, .environmenttable .warn a {
color: #573e1c; }
 
.alert-warning .close, .environmenttable .warn .close {
color: #302310;
opacity: 0.6; }
.alert-danger a, .environmenttable .error a {
color: #3d0f0a; }
 
.alert-danger .close, .environmenttable .error .close {
color: #110403;
opacity: 0.6; }
.alert-light a {
color: #686868; }
 
.alert-light .close {
color: #4e4e4f;
opacity: 0.6; }
.alert-dark a {
color: #040505; }
 
.alert-dark .close {
color: black;
opacity: 0.6; }
.alert a {
font-weight: 700; }
 
......
......@@ -12007,27 +12007,59 @@ input[disabled] {
.alert-primary a {
color: #041d34; }
 
.alert-primary .close {
color: #000305;
opacity: 0.6; }
.alert-secondary a {
color: #525557; }
 
.alert-secondary .close {
color: #393b3d;
opacity: 0.6; }
.alert-success a, .environmenttable .ok a {
color: #0c1b0b; }
 
.alert-success .close, .environmenttable .ok .close {
color: black;
opacity: 0.6; }
.alert-info a {
color: #00171b; }
 
.alert-info .close {
color: black;
opacity: 0.6; }
.alert-warning a, .environmenttable .warn a {
color: #573e1c; }
 
.alert-warning .close, .environmenttable .warn .close {
color: #302310;
opacity: 0.6; }
.alert-danger a, .environmenttable .error a {
color: #3d0f0a; }
 
.alert-danger .close, .environmenttable .error .close {
color: #110403;
opacity: 0.6; }
.alert-light a {
color: #686868; }
 
.alert-light .close {
color: #4e4e4f;
opacity: 0.6; }
.alert-dark a {
color: #040505; }
 
.alert-dark .close {
color: black;
opacity: 0.6; }
.alert a {
font-weight: 700; }
 
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment