diff --git a/scss/_alert.scss b/scss/_alert.scss index 4440b508ba..6f598e7fd7 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -11,7 +11,7 @@ // Boosted mod .alert-icon { position: absolute; - top: .625rem; + top: map-get($spacers, 2); &::after { width: alert-logo-size("md"); height: alert-logo-size("md"); @@ -37,7 +37,7 @@ .alert-lg { padding: $alert-padding-y-lg $alert-padding-x-lg; .alert-icon { - top: .625rem; + top: map-get($spacers, 2); &::after { width: alert-logo-size("lg"); height: alert-logo-size("lg"); @@ -68,12 +68,18 @@ // Adjust close link position .close { position: absolute; - top: 0; + top: map-get($spacers, 2); // Boosted mod right: 0; padding: $alert-padding-y $alert-padding-x; line-height: $alert-padding-y; // Boosted mod color: inherit; } + + // Boosted mod + &.alert-sm .close { + top: 0; + } + // end mod } diff --git a/scss/_close.scss b/scss/_close.scss index 28fad2dc71..92810002e9 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -1,23 +1,35 @@ .close { float: right; + // Boosted mod + width: $spacer; + height: $spacer; + padding: $spacer; + // end mod @include font-size($close-font-size); font-weight: $close-font-weight; line-height: 1; color: $close-color; text-shadow: $close-text-shadow; - opacity: 1; // Boosted mod + // Boosted mod + background: escape-svg($close-icon) no-repeat center / $spacer; + opacity: 1; + .bg-dark & { + background-image: escape-svg($close-icon-dark); + } // Override 's hover style - @include hover() { - color: $close-color; - text-decoration: none; - } + // @include hover() { + // color: $black; + // text-decoration: none; + // } - &:not(:disabled):not(.disabled) { - @include hover-focus() { - opacity: 1; // Boosted mod + @include hover-focus() { + outline: $border-width solid; + &:not(:disabled):not(.disabled) { + opacity: 1; } } + // end mod } // Additional properties for button version @@ -27,8 +39,8 @@ // stylelint-disable-next-line selector-no-qualifying-type button.close { - padding: 0; - background-color: transparent; + //padding: 0; // Boosted mod + //background-color: transparent; // Boosted mod border: 0; appearance: none; } diff --git a/scss/_modal.scss b/scss/_modal.scss index 225ec8853d..096aaf0ecd 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -142,12 +142,8 @@ // Boosted mod .close { - width: $spacer; - height: $spacer; - padding: $spacer; // auto on the left force icon to the right even when there is no .modal-title margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; - background: escape-svg($modal-close-icon) no-repeat center / $spacer; } // end mod } diff --git a/scss/_orange-css.scss b/scss/_orange-css.scss index 5ee0ba2505..c662dfeb2e 100644 --- a/scss/_orange-css.scss +++ b/scss/_orange-css.scss @@ -12,8 +12,6 @@ a { } } -.close:hover, -.close:focus, div.active:focus { outline: $border-width solid; } diff --git a/scss/_variables.scss b/scss/_variables.scss index b05f3f416c..f771bc4eac 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1062,16 +1062,14 @@ $modal-sm: 300px !default; $modal-fade-transform: translate(0, -50px) !default; $modal-show-transform: null !default; $modal-transition: transform .3s ease-out !default; -$modal-close-icon: url("data:image/svg+xml,") !default; // Boosted mod - // Alerts // // Define alert colors, border radius, and padding. -$alert-padding-y: .8125rem !default; +$alert-padding-y: 1rem !default; // Boosted mod $alert-padding-x: 1.25rem !default; -$alert-padding-y-sm: .3125rem !default; +$alert-padding-y-sm: .375rem !default; // Boosted mod $alert-padding-x-sm: $alert-padding-x !default; $alert-padding-y-lg: 1rem !default; $alert-padding-x-lg: $alert-padding-x !default; @@ -1202,7 +1200,9 @@ $spinner-border-width-sm: .2em !default; $close-font-size: $font-size-base * 1.5 !default; $close-font-weight: $font-weight-bold !default; $close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; +$close-text-shadow: null !default; // Boosted mod +$close-icon: url("data:image/svg+xml,") !default; // Boosted mod +$close-icon-dark: url("data:image/svg+xml,") !default; // Boosted mod // Code diff --git a/site/docs/4.3/components/alerts.md b/site/docs/4.3/components/alerts.md index 18b75d1066..a7b579444f 100644 --- a/site/docs/4.3/components/alerts.md +++ b/site/docs/4.3/components/alerts.md @@ -57,108 +57,84 @@ alert-icon svg-warning
Your changes have been saved.
- + - + - +