mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-27 22:09:04 +02:00
Code Issues Releases Wiki Activity

Refactor accordion button to use mask, remove some Sass vars and dark mode styles (#41703)

Browse Source
This commit is contained in:
Mark Otto
2025-08-28 15:39:55 -07:00
committed by Mark Otto
parent 334d68b75a
commit 484c4357ea
2 changed files with 16 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
scss/_accordion.scss
View File

@@ -29,7 +29,6 @@
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
@@ -71,9 +70,8 @@
height: var(--#{$prefix}accordion-btn-icon-width); height: var(--#{$prefix}accordion-btn-icon-width);
margin-left: auto; margin-left: auto;
content: ""; content: "";
background-image: var(--#{$prefix}accordion-btn-icon); background-color: var(--#{$prefix}accordion-btn-color);
background-repeat: no-repeat; mask: var(--#{$prefix}accordion-btn-icon) no-repeat center 100%;
background-size: var(--#{$prefix}accordion-btn-icon-width);
@include transition(var(--#{$prefix}accordion-btn-icon-transition)); @include transition(var(--#{$prefix}accordion-btn-icon-transition));
} }
@@ -153,12 +151,12 @@
} }
} }
@if $enable-dark-mode { // @if $enable-dark-mode {
@include color-mode(dark) { // @include color-mode(dark) {
.accordion-button::after { // .accordion-button::after {
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; // --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; // --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
} // }
} // }
} // }
} }

26
scss/_variables.scss
View File

@@ -1070,7 +1070,7 @@ $accordion-color: var(--#{$prefix}body-color) !default;
$accordion-bg: var(--#{$prefix}body-bg) !default; $accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default; $accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default; $accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default; $accordion-border-radius: var(--#{$prefix}border-radius-lg) !default;
$accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default; $accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
$accordion-body-padding-y: $accordion-padding-y !default; $accordion-body-padding-y: $accordion-padding-y !default;
@@ -1078,24 +1078,21 @@ $accordion-body-padding-x: $accordion-padding-x !default;
$accordion-button-padding-y: $accordion-padding-y !default; $accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-padding-x: $accordion-padding-x !default; $accordion-button-padding-x: $accordion-padding-x !default;
$accordion-button-color: var(--#{$prefix}body-color) !default; $accordion-button-color: var(--#{$prefix}fg-2) !default;
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default; $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
$accordion-transition: $btn-transition, border-radius .15s ease !default; $accordion-transition: $btn-transition, border-radius .15s ease !default;
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default; $accordion-button-active-bg: var(--#{$prefix}bg-2) !default;
$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default; $accordion-button-active-color: var(--#{$prefix}fg) !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default; $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default; $accordion-icon-width: 1.25rem !default;
$accordion-icon-color: var(--#{$prefix}body-color) !default;
$accordion-icon-active-color: var(--#{$prefix}primary-text-emphasis) !default;
$accordion-icon-transition: transform .2s ease-in-out !default; $accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default; $accordion-icon-transform: rotate(-180deg) !default;
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
// scss-docs-end accordion-variables // scss-docs-end accordion-variables
// Tooltips // Tooltips
// scss-docs-start tooltip-variables // scss-docs-start tooltip-variables
@@ -1482,17 +1479,6 @@ $form-valid-border-color-dark: $green-300 !default;
$form-invalid-color-dark: $red-300 !default; $form-invalid-color-dark: $red-300 !default;
$form-invalid-border-color-dark: $red-300 !default; $form-invalid-border-color-dark: $red-300 !default;
// scss-docs-end form-validation-colors-dark // scss-docs-end form-validation-colors-dark
//
// Accordion
//
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
// scss-docs-end sass-dark-mode-vars // scss-docs-end sass-dark-mode-vars