|
19 | 19 | --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; |
20 | 20 | --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; |
21 | 21 | --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; |
22 | | - --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; |
| 22 | + --#{$prefix}accordion-btn-active-icon: #{escape-svg( |
| 23 | + $accordion-button-active-icon |
| 24 | + )}; |
23 | 25 | --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; |
24 | 26 | --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; |
25 | 27 | --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; |
|
34 | 36 | display: flex; |
35 | 37 | align-items: center; |
36 | 38 | width: 100%; |
37 | | - padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); |
| 39 | + padding: var(--#{$prefix}accordion-btn-padding-y) |
| 40 | + var(--#{$prefix}accordion-btn-padding-x); |
38 | 41 | @include font-size($font-size-base); |
39 | 42 | color: var(--#{$prefix}accordion-btn-color); |
40 | 43 | text-align: left; // Reset button style |
|
47 | 50 | &:not(.collapsed) { |
48 | 51 | color: var(--#{$prefix}accordion-active-color); |
49 | 52 | background-color: var(--#{$prefix}accordion-active-bg); |
50 | | - box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list |
| 53 | + box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 |
| 54 | + var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list |
51 | 55 |
|
52 | 56 | &::after { |
53 | 57 | background-image: var(--#{$prefix}accordion-btn-active-icon); |
|
61 | 65 | width: var(--#{$prefix}accordion-btn-icon-width); |
62 | 66 | height: var(--#{$prefix}accordion-btn-icon-width); |
63 | 67 | margin-left: auto; |
64 | | - content: ""; |
| 68 | + content: ''; |
65 | 69 | background-image: var(--#{$prefix}accordion-btn-icon); |
66 | 70 | background-repeat: no-repeat; |
67 | 71 | background-size: var(--#{$prefix}accordion-btn-icon-width); |
|
87 | 91 | .accordion-item { |
88 | 92 | color: var(--#{$prefix}accordion-color); |
89 | 93 | background-color: var(--#{$prefix}accordion-bg); |
90 | | - border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); |
| 94 | + border: var(--#{$prefix}accordion-border-width) solid |
| 95 | + var(--#{$prefix}accordion-border-color); |
91 | 96 |
|
92 | 97 | &:first-of-type { |
93 | 98 | @include border-top-radius(var(--#{$prefix}accordion-border-radius)); |
94 | 99 |
|
95 | 100 | > .accordion-header .accordion-button { |
96 | | - @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius)); |
| 101 | + @include border-top-radius( |
| 102 | + var(--#{$prefix}accordion-inner-border-radius) |
| 103 | + ); |
97 | 104 | } |
98 | 105 | } |
99 | 106 |
|
|
107 | 114 |
|
108 | 115 | > .accordion-header .accordion-button { |
109 | 116 | &.collapsed { |
110 | | - @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius)); |
| 117 | + @include border-bottom-radius( |
| 118 | + var(--#{$prefix}accordion-inner-border-radius) |
| 119 | + ); |
111 | 120 | } |
112 | 121 | } |
113 | 122 |
|
|
118 | 127 | } |
119 | 128 |
|
120 | 129 | .accordion-body { |
121 | | - padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x); |
| 130 | + padding: var(--#{$prefix}accordion-body-padding-y) |
| 131 | + var(--#{$prefix}accordion-body-padding-x); |
122 | 132 | } |
123 | 133 |
|
124 | | - |
125 | 134 | // Flush accordion items |
126 | 135 | // |
127 | 136 | // Remove borders and border-radius to keep accordion items edge-to-edge. |
|
132 | 141 | border-left: 0; |
133 | 142 | @include border-radius(0); |
134 | 143 |
|
135 | | - &:first-child { border-top: 0; } |
136 | | - &:last-child { border-bottom: 0; } |
| 144 | + &:first-child { |
| 145 | + border-top: 0; |
| 146 | + } |
| 147 | + &:last-child { |
| 148 | + border-bottom: 0; |
| 149 | + } |
137 | 150 |
|
138 | 151 | // stylelint-disable selector-max-class |
139 | 152 | > .accordion-header .accordion-button { |
|
154 | 167 | @include color-mode(dark) { |
155 | 168 | .accordion-button::after { |
156 | 169 | --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; |
157 | | - --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; |
| 170 | + --#{$prefix}accordion-btn-active-icon: #{escape-svg( |
| 171 | + $accordion-button-active-icon-dark |
| 172 | + )}; |
158 | 173 | } |
159 | 174 | } |
160 | 175 | } |
0 commit comments