Skip to content

Commit 6ef60db

Browse files
mrholekmrholek
committed
refactor: update CSS variables
1 parent 699b521 commit 6ef60db

File tree

5 files changed

+60
-61
lines changed

5 files changed

+60
-61
lines changed

‎scss/_date-picker.scss

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
--#{$prefix}date-picker-color: #{$date-picker-color};
99
--#{$prefix}date-picker-bg: #{$date-picker-bg};
1010
--#{$prefix}date-picker-box-shadow: #{$date-picker-box-shadow};
11+
--#{$prefix}date-picker-border-width: #{$date-picker-border-width};
1112
--#{$prefix}date-picker-border-color: #{$date-picker-border-color};
12-
--#{$prefix}date-picker-border: #{$date-picker-border-width} solid var(--#{$prefix}date-picker-border-color);
1313
--#{$prefix}date-picker-border-radius: #{$date-picker-border-radius};
1414
--#{$prefix}date-picker-disabled-color: #{$date-picker-disabled-color};
1515
--#{$prefix}date-picker-disabled-bg: #{$date-picker-disabled-bg};
@@ -30,19 +30,19 @@
3030
--#{$prefix}date-picker-separator-icon-rtl: #{escape-svg($date-picker-separator-icon-rtl)};
3131
--#{$prefix}date-picker-separator-icon-bg-size: #{$date-picker-separator-icon-bg-size};
3232
--#{$prefix}date-picker-dropdown-bg: #{$date-picker-dropdown-bg};
33+
--#{$prefix}date-picker-dropdown-border-width: #{$date-picker-dropdown-border-width};
3334
--#{$prefix}date-picker-dropdown-border-color: #{$date-picker-dropdown-border-color};
34-
--#{$prefix}date-picker-dropdown-border: #{$date-picker-dropdown-border-width} solid var(--#{$prefix}date-picker-dropdown-border-color);
3535
--#{$prefix}date-picker-dropdown-border-radius: #{$date-picker-dropdown-border-radius};
3636
--#{$prefix}date-picker-ranges-width: #{$date-picker-ranges-width};
3737
--#{$prefix}date-picker-ranges-padding: #{$date-picker-ranges-padding};
38+
--#{$prefix}date-picker-ranges-border-width: #{$date-picker-ranges-border-width};
3839
--#{$prefix}date-picker-ranges-border-color: #{$date-picker-ranges-border-color};
39-
--#{$prefix}date-picker-ranges-border: #{$date-picker-ranges-border-width} solid var(--#{$prefix}date-picker-ranges-border-color);
4040
--#{$prefix}date-picker-timepicker-width: #{$date-picker-timepicker-width};
4141
--#{$prefix}date-picker-timepicker-border-color: #{$date-picker-timepicker-border-color};
4242
--#{$prefix}date-picker-timepicker-border-top: #{$date-picker-timepicker-border-width} solid var(--#{$prefix}date-picker-timepicker-border-color);
4343
--#{$prefix}date-picker-footer-padding: #{$date-picker-footer-padding};
44+
--#{$prefix}date-picker-footer-border-width: #{$date-picker-footer-border-width};
4445
--#{$prefix}date-picker-footer-border-color: #{$date-picker-footer-border-color};
45-
--#{$prefix}date-picker-footer-border-top: #{$date-picker-footer-border-width} solid var(--#{$prefix}date-picker-footer-border-color);
4646
// scss-docs-end date-picker-css-vars
4747

4848
&.is-invalid {
@@ -63,8 +63,9 @@
6363
align-items: stretch;
6464
width: 100%;
6565
background-color: var(--#{$prefix}date-picker-bg);
66-
border: var(--#{$prefix}date-picker-border);
67-
@include border-radius(var(--#{$prefix}date-picker-border-radius), 0);
66+
background-clip: padding-box;
67+
border: var(--#{$prefix}date-picker-border-width) solid var(--#{$prefix}date-picker-border-color);
68+
@include border-radius(var(--#{$prefix}date-picker-border-radius));
6869

6970
&:hover {
7071
.date-picker-input:not(:placeholder-shown) {
@@ -78,8 +79,8 @@
7879
}
7980

8081
.date-picker.disabled & {
82+
--#{$prefix}date-picker-border-color: var(--#{$prefix}date-picker-disabled-border-color);
8183
background-color: var(--#{$prefix}date-picker-disabled-bg);
82-
border-color: var(--#{$prefix}date-picker-disabled-border-color);
8384
}
8485

8586
.date-picker.show & {
@@ -167,7 +168,7 @@
167168
width: min-content;
168169
background-color: var(--#{$prefix}date-picker-dropdown-bg);
169170
background-clip: padding-box;
170-
border: var(--#{$prefix}date-picker-dropdown-border);
171+
border: var(--#{$prefix}$date-picker-dropdown-border-width) solid var(--#{$prefix}date-picker-dropdown-border-color);
171172
@include border-radius(var(--#{$prefix}date-picker-dropdown-border-radius));
172173
@include elevation(4);
173174

@@ -189,7 +190,7 @@
189190
display: flex;
190191
justify-content: flex-end;
191192
padding: var(--#{$prefix}date-picker-footer-padding);
192-
border-top: var(--#{$prefix}date-picker-footer-border-top);
193+
border-top: var(--#{$prefix}date-picker-footer-border-width) solid var(--#{$prefix}date-picker-footer-border-color);
193194

194195
.btn + .btn {
195196
margin-inline-start: .5rem;
@@ -200,7 +201,7 @@
200201
grid-area: ranges;
201202
width: var(--#{$prefix}date-picker-ranges-width);
202203
padding: var(--#{$prefix}date-picker-ranges-padding);
203-
border-right: var(--#{$prefix}date-picker-ranges-border);
204+
border-right: var(--#{$prefix}date-picker-ranges-border-width) solid var(--#{$prefix}date-picker-ranges-border-color);
204205
}
205206

206207
.date-picker-calendars {

‎scss/_time-picker.scss

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
--#{$prefix}time-picker-color: #{$time-picker-color};
99
--#{$prefix}time-picker-bg: #{$time-picker-bg};
1010
--#{$prefix}time-picker-box-shadow: #{$time-picker-box-shadow};
11+
--#{$prefix}time-picker-border-width: #{$time-picker-border-width};
1112
--#{$prefix}time-picker-border-color: #{$time-picker-border-color};
12-
--#{$prefix}time-picker-border: #{$time-picker-border-width} solid var(--#{$prefix}time-picker-border-color);
1313
--#{$prefix}time-picker-border-radius: #{$time-picker-border-radius};
1414
--#{$prefix}time-picker-disabled-color: #{$time-picker-disabled-color};
1515
--#{$prefix}time-picker-disabled-bg: #{$time-picker-disabled-bg};
@@ -27,15 +27,15 @@
2727
--#{$prefix}time-picker-cleaner-icon-hover: #{escape-svg($time-picker-cleaner-icon-hover)};
2828
--#{$prefix}time-picker-cleaner-icon-bg-size: #{$time-picker-cleaner-icon-bg-size};
2929
--#{$prefix}time-picker-body-padding: #{$time-picker-body-padding};
30+
--#{$prefix}time-picker-footer-border-width: #{$time-picker-footer-border-width};
3031
--#{$prefix}time-picker-footer-border-color: #{$time-picker-footer-border-color};
31-
--#{$prefix}time-picker-footer-border-top: #{$time-picker-footer-border-width} solid var(--#{$prefix}time-picker-footer-border-color);
3232
--#{$prefix}time-picker-footer-padding: #{$time-picker-footer-padding};
3333
--#{$prefix}time-picker-dropdown-bg: #{$time-picker-dropdown-bg};
34+
--#{$prefix}time-picker-dropdown-border-width: #{$time-picker-dropdown-border-width};
3435
--#{$prefix}time-picker-dropdown-border-color: #{$time-picker-dropdown-border-color};
35-
--#{$prefix}time-picker-dropdown-border: #{$time-picker-dropdown-border-width} solid var(--#{$prefix}time-picker-dropdown-border-color);
3636
--#{$prefix}time-picker-dropdown-border-radius: #{$time-picker-dropdown-border-radius};
37+
--#{$prefix}time-picker-roll-col-border-width: #{$time-picker-roll-col-border-width};
3738
--#{$prefix}time-picker-roll-col-border-color: #{$time-picker-roll-col-border-color};
38-
--#{$prefix}time-picker-roll-col-border: #{$time-picker-roll-col-border-width} solid var(--#{$prefix}time-picker-roll-col-border-color);
3939
--#{$prefix}time-picker-roll-cell-selected-color: #{$time-picker-roll-cell-selected-color};
4040
--#{$prefix}time-picker-roll-cell-selected-bg: #{$time-picker-roll-cell-selected-bg};
4141
--#{$prefix}time-picker-inline-select-font-size: #{$time-picker-inline-select-font-size};
@@ -63,8 +63,9 @@
6363
align-items: stretch;
6464
width: 100%;
6565
background-color: var(--#{$prefix}time-picker-bg);
66-
border: var(--#{$prefix}time-picker-border);
67-
@include border-radius(var(--#{$prefix}time-picker-border-radius), 0);
66+
background-clip: padding-box;
67+
border: var(--#{$prefix}time-picker-border-width) solid var(--#{$prefix}time-picker-border-color);
68+
@include border-radius(var(--#{$prefix}time-picker-border-radius));
6869

6970
&:hover {
7071
.time-picker-input:not(:placeholder-shown) {
@@ -161,7 +162,7 @@
161162
width: min-content;
162163
background-color: var(--#{$prefix}time-picker-dropdown-bg);
163164
background-clip: padding-box;
164-
border: var(--#{$prefix}time-picker-dropdown-border);
165+
border: var(--#{$prefix}time-picker-dropdown-border-width) solid var(--#{$prefix}time-picker-dropdown-border-color);
165166
@include border-radius(var(--#{$prefix}time-picker-dropdown-border-radius));
166167
@include elevation(4);
167168

@@ -216,7 +217,7 @@
216217
display: flex;
217218
justify-content: flex-end;
218219
padding: var(--#{$prefix}time-picker-footer-padding);
219-
border-top: var(--#{$prefix}time-picker-footer-border-top);
220+
border-top: var(--#{$prefix}time-picker-footer-border-width) solid var(--#{$prefix}time-picker-footer-border-color);
220221

221222
.btn + .btn {
222223
margin-inline-start: .5rem;
@@ -226,13 +227,13 @@
226227
.time-picker-roll {
227228
padding: 0;
228229
overflow: hidden;
229-
border-radius: inherit; // stylelint-disable-line
230+
@include border-radius(inherit);
230231
}
231232

232233
.time-picker-roll-col {
233234
height: calc(8 * 32px); // stylelint-disable-line
234235
overflow: scroll;
235-
border-right: var(--#{$prefix}time-picker-roll-col-border);
236+
border-right: var(--#{$prefix}time-picker-roll-col-border-width) solid var(--#{$prefix}time-picker-roll-col-border-color);
236237

237238
-ms-overflow-style: none; /* Internet Explorer 10+ */
238239
scrollbar-width: none; /* Firefox */

‎scss/_variables.scss

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1229,9 +1229,6 @@ $form-multi-select-tag-delete-focus-color: $high-emphasis !default;
12291229
$form-multi-select-tag-delete-focus-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-tag-delete-focus-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
12301230
$form-multi-select-tag-delete-bg-size: .5rem !default;
12311231

1232-
$form-multi-select-buttons-padding-y: .375rem !default;
1233-
$form-multi-select-buttons-padding-x: .375rem !default;
1234-
12351232
$form-multi-select-cleaner-width: 1.5rem !default;
12361233
$form-multi-select-cleaner-height: 1.5rem !default;
12371234
$form-multi-select-cleaner-padding-x: 0 !default;
@@ -1619,32 +1616,33 @@ $card-group-margin: $grid-gutter-width * .5 !default;
16191616
// scss-docs-end card-variables
16201617

16211618
// Accordion
1619+
16221620
// scss-docs-start accordion-variables
16231621
$accordion-padding-y: 1rem !default;
16241622
$accordion-padding-x: 1.25rem !default;
1625-
$accordion-color: $body-color !default; // Sass variable because of $accordion-button-icon
1626-
$accordion-bg: $body-bg !default;
1627-
$accordion-border-width: $border-width !default;
1623+
$accordion-color: var(--#{$prefix}body-color) !default;
1624+
$accordion-bg: var(--#{$prefix}body-bg) !default;
1625+
$accordion-border-width: var(--#{$prefix}border-width) !default;
16281626
$accordion-border-color: var(--#{$prefix}border-color) !default;
1629-
$accordion-border-radius: $border-radius !default;
1627+
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
16301628
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
16311629

16321630
$accordion-body-padding-y: $accordion-padding-y !default;
16331631
$accordion-body-padding-x: $accordion-padding-x !default;
16341632

16351633
$accordion-button-padding-y: $accordion-padding-y !default;
16361634
$accordion-button-padding-x: $accordion-padding-x !default;
1637-
$accordion-button-color: $accordion-color !default;
1635+
$accordion-button-color: var(--#{$prefix}body-color) !default;
16381636
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
16391637
$accordion-transition: $btn-transition, border-radius .15s ease !default;
1640-
$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
1641-
$accordion-button-active-color: shade-color($primary, 10%) !default;
1638+
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
1639+
$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
16421640

16431641
$accordion-button-focus-border-color: $input-focus-border-color !default;
16441642
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
16451643

16461644
$accordion-icon-width: 1.25rem !default;
1647-
$accordion-icon-color: $accordion-button-color !default;
1645+
$accordion-icon-color: $body-color !default;
16481646
$accordion-icon-active-color: $accordion-button-active-color !default;
16491647
$accordion-icon-transition: transform .2s ease-in-out !default;
16501648
$accordion-icon-transform: rotate(-180deg) !default;

0 commit comments

Comments
 (0)