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

Fix display issues of close button in contextual light and dark modes (#41126)
Some checks failed
BrowserStack / browserstack (push) Has been skipped
Details
Bundlewatch / bundlewatch (push) Failing after 1s
Details
CodeQL / Analyze (push) Failing after 1s
Details
cspell / cspell (push) Failing after 1s
Details
CSS / css (push) Failing after 1s
Details
Docs / docs (push) Failing after 1s
Details
JS Tests / JS Tests (push) Failing after 1s
Details
Lint / lint (push) Failing after 1s
Details
CSS (node-sass) / css (push) Failing after 1s
Details
Release notes / update_release_draft (push) Has been skipped
Details

Browse Source
This commit is contained in:
Julien Déramond 2024-12-31 09:08:59 +01:00 committed by GitHub
parent 0cbfe13adf
commit a5d430d526
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
scss/_close.scss
View File

@ -12,7 +12,6 @@
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-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
box-sizing: content-box;
@ -21,6 +20,7 @@
padding: $btn-close-padding-y $btn-close-padding-x;
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
filter: var(--#{$prefix}btn-close-filter);
border: 0; // for button elements
@include border-radius();
opacity: var(--#{$prefix}btn-close-opacity);
@ -47,17 +47,20 @@
}
@mixin btn-close-white() {
filter: var(--#{$prefix}btn-close-white-filter);
--#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
}
.btn-close-white {
@include btn-close-white();
}
:root,
[data-bs-theme="light"] {
--#{$prefix}btn-close-filter: #{$btn-close-filter};
}
@if $enable-dark-mode {
@include color-mode(dark) {
.btn-close {
@include btn-close-white();
}
@include color-mode(dark, true) {
@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-caption-color-dark: $carousel-dark-caption-color !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-focus-opacity: 1 !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