rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-19 11:52:21 +01:00
Code Issues Actions Packages Releases Activity

Fix display issues of close button in contextual light and dark modes

Browse Source
This commit is contained in:
Julien Déramond 2024-12-29 21:29:11 +01:00
parent 71bf875984
commit 059bb59e66
No known key found for this signature in database
GPG Key ID: EE5F274EA1F477FA
3 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
scss/_close.scss
View File

@ -12,7 +12,6 @@
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
--#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
// scss-docs-end close-css-vars // scss-docs-end close-css-vars
box-sizing: content-box; box-sizing: content-box;
@ -21,6 +20,7 @@
padding: $btn-close-padding-y $btn-close-padding-x; padding: $btn-close-padding-y $btn-close-padding-x;
color: var(--#{$prefix}btn-close-color); color: var(--#{$prefix}btn-close-color);
background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
filter: var(--#{$prefix}btn-close-filter);
border: 0; // for button elements border: 0; // for button elements
@include border-radius(); @include border-radius();
opacity: var(--#{$prefix}btn-close-opacity); opacity: var(--#{$prefix}btn-close-opacity);
@ -47,17 +47,20 @@
} }
@mixin btn-close-white() { @mixin btn-close-white() {
filter: var(--#{$prefix}btn-close-white-filter); --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
} }
.btn-close-white { .btn-close-white {
@include btn-close-white(); @include btn-close-white();
} }
:root,
[data-bs-theme="light"] {
--#{$prefix}btn-close-filter: #{$btn-close-filter};
}
@if $enable-dark-mode { @if $enable-dark-mode {
@include color-mode(dark) { @include color-mode(dark, true) {
.btn-close {
@include btn-close-white(); @include btn-close-white();
} }
} }
}

6
scss/_variables-dark.scss
View File

@ -94,3 +94,9 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://
$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default; $carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
$carousel-caption-color-dark: $carousel-dark-caption-color !default; $carousel-caption-color-dark: $carousel-dark-caption-color !default;
$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default; $carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
//
// Close button
//
$btn-close-filter-dark: $btn-close-white-filter !default;

3
scss/_variables.scss
View File

@ -1713,7 +1713,8 @@ $btn-close-opacity: .5 !default;
$btn-close-hover-opacity: .75 !default; $btn-close-hover-opacity: .75 !default;
$btn-close-focus-opacity: 1 !default; $btn-close-focus-opacity: 1 !default;
$btn-close-disabled-opacity: .25 !default; $btn-close-disabled-opacity: .25 !default;
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; $btn-close-filter: null !default;
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
// scss-docs-end close-variables // scss-docs-end close-variables