Skip to content

Commit cc90a82

Browse files
mdomdo
committed
Refactor accordion button to use mask, remove some Sass vars and dark mode styles (#41703)
1 parent 54aab24 commit cc90a82

File tree

2 files changed

+16
-32
lines changed

2 files changed

+16
-32
lines changed

‎scss/_accordion.scss‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
3030
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
3131
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
32-
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
3332
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
3433
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
3534
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
@@ -71,9 +70,8 @@
7170
height: var(--#{$prefix}accordion-btn-icon-width);
7271
margin-left: auto;
7372
content: "";
74-
background-image: var(--#{$prefix}accordion-btn-icon);
75-
background-repeat: no-repeat;
76-
background-size: var(--#{$prefix}accordion-btn-icon-width);
73+
background-color: var(--#{$prefix}accordion-btn-color);
74+
mask: var(--#{$prefix}accordion-btn-icon) no-repeat center 100%;
7775
@include transition(var(--#{$prefix}accordion-btn-icon-transition));
7876
}
7977

@@ -153,12 +151,12 @@
153151
}
154152
}
155153

156-
@if $enable-dark-mode {
157-
@include color-mode(dark) {
158-
.accordion-button::after {
159-
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
160-
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
161-
}
162-
}
163-
}
154+
// @if $enable-dark-mode {
155+
// @include color-mode(dark) {
156+
// .accordion-button::after {
157+
// --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
158+
// --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
159+
// }
160+
// }
161+
// }
164162
}

‎scss/_variables.scss‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1070,32 +1070,29 @@ $accordion-color: var(--#{$prefix}body-color) !default;
10701070
$accordion-bg: var(--#{$prefix}body-bg) !default;
10711071
$accordion-border-width: var(--#{$prefix}border-width) !default;
10721072
$accordion-border-color: var(--#{$prefix}border-color) !default;
1073-
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
1073+
$accordion-border-radius: var(--#{$prefix}border-radius-lg) !default;
10741074
$accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
10751075

10761076
$accordion-body-padding-y: $accordion-padding-y !default;
10771077
$accordion-body-padding-x: $accordion-padding-x !default;
10781078

10791079
$accordion-button-padding-y: $accordion-padding-y !default;
10801080
$accordion-button-padding-x: $accordion-padding-x !default;
1081-
$accordion-button-color: var(--#{$prefix}body-color) !default;
1081+
$accordion-button-color: var(--#{$prefix}fg-2) !default;
10821082
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
10831083
$accordion-transition: $btn-transition, border-radius .15s ease !default;
1084-
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
1085-
$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
1084+
$accordion-button-active-bg: var(--#{$prefix}bg-2) !default;
1085+
$accordion-button-active-color: var(--#{$prefix}fg) !default;
10861086

10871087
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
10881088

10891089
$accordion-icon-width: 1.25rem !default;
1090-
$accordion-icon-color: var(--#{$prefix}body-color) !default;
1091-
$accordion-icon-active-color: var(--#{$prefix}primary-text-emphasis) !default;
10921090
$accordion-icon-transition: transform .2s ease-in-out !default;
10931091
$accordion-icon-transform: rotate(-180deg) !default;
1094-
1095-
$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;
1096-
$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;
1092+
$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;
10971093
// scss-docs-end accordion-variables
10981094

1095+
10991096
// Tooltips
11001097

11011098
// scss-docs-start tooltip-variables
@@ -1482,17 +1479,6 @@ $form-valid-border-color-dark: $green-300 !default;
14821479
$form-invalid-color-dark: $red-300 !default;
14831480
$form-invalid-border-color-dark: $red-300 !default;
14841481
// scss-docs-end form-validation-colors-dark
1485-
1486-
1487-
//
1488-
// Accordion
1489-
//
1490-
1491-
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
1492-
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
1493-
1494-
$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;
1495-
$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;
14961482
// scss-docs-end sass-dark-mode-vars
14971483

14981484

0 commit comments

Comments
 (0)