Skip to content

Commit 69648b4

Browse files
committed
refactor: migrate to CSS logical properties and values
1 parent fa57277 commit 69648b4

File tree

6 files changed

+20
-34
lines changed

6 files changed

+20
-34
lines changed

scss/_calendar.scss

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -206,38 +206,38 @@
206206
}
207207

208208
.calendars:not(.select-week) &.range:not(.range ~ *) .calendar-cell-inner::after {
209-
@include border-start-radius-flex($border-radius);
209+
@include border-start-radius($border-radius);
210210
}
211211

212212
.calendars:not(.select-week) &.range:not(:has(~ .range)) .calendar-cell-inner::after {
213-
@include border-end-radius-flex($border-radius);
213+
@include border-end-radius($border-radius);
214214
}
215215

216216
&.range-hover:first-of-type,
217217
&:not(.range-hover) + &.range-hover {
218218
.calendar-cell-inner::before {
219219
border-inline-start: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
220-
@include border-start-radius-flex($border-radius);
220+
@include border-start-radius($border-radius);
221221
}
222222
}
223223

224224
&.range-hover:not(:has(~ .range-hover)) .calendar-cell-inner::before {
225225
border-inline-end: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
226-
@include border-end-radius-flex($border-radius);
226+
@include border-end-radius($border-radius);
227227
}
228228

229229
// stylelint-disable-next-line at-rule-no-vendor-prefix
230230
@-moz-document url-prefix() {
231231
.calendars:not(.select-week) &:nth-last-child(1 of .range),
232232
.calendars:not(.select-week) &:nth-last-child(1 of .available) {
233233
.calendar-cell-inner::after {
234-
@include border-end-radius-flex($border-radius);
234+
@include border-end-radius($border-radius);
235235
}
236236
}
237237

238238
&:nth-last-child(1 of .range-hover) .calendar-cell-inner::before {
239239
border-inline-end: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
240-
@include border-end-radius-flex($border-radius);
240+
@include border-end-radius($border-radius);
241241
}
242242
}
243243

@@ -270,18 +270,18 @@
270270
}
271271

272272
.calendar-cell:first-of-type .calendar-cell-inner {
273-
@include border-start-radius-flex($border-radius);
273+
@include border-start-radius($border-radius);
274274
&::before,
275275
&::after {
276-
@include border-start-radius-flex($border-radius);
276+
@include border-start-radius($border-radius);
277277
}
278278
}
279279

280280
.calendar-cell:last-of-type .calendar-cell-inner {
281-
@include border-end-radius-flex($border-radius);
281+
@include border-end-radius($border-radius);
282282
&::before,
283283
&::after {
284-
@include border-end-radius-flex($border-radius);
284+
@include border-end-radius($border-radius);
285285
}
286286
}
287287

scss/_loading-button.scss

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use "mixins/ltr-rtl" as *;
21
@use "mixins/transition" as *;
32
@use "variables" as *;
43

@@ -12,16 +11,15 @@
1211
}
1312

1413
.btn-loading-spinner {
15-
@include ltr-rtl("margin-right", $spacer);
16-
@include ltr-rtl("margin-left", ($spacer * -2));
14+
margin-inline: ($spacer * -2) $spacer;
1715
opacity: 0;
1816
@include transition(margin .15s, opacity .15s, border .15s);
1917
}
2018

2119
.btn-loading.is-loading {
2220
.btn-loading-spinner {
2321
width: 1rem;
24-
@include ltr-rtl("margin-left", 0);
22+
margin-inline-start: 0;
2523
opacity: 1;
2624
}
2725
}

scss/_range-slider.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,7 @@
260260
}
261261

262262
.range-slider-tooltip {
263-
@include ltr-rtl("right", calc(var(--#{$prefix}range-slider-tooltip-margin-end) + var(--#{$prefix}range-slider-thumb-width)));
263+
inset-inline-end: calc(var(--#{$prefix}range-slider-tooltip-margin-end) + var(--#{$prefix}range-slider-thumb-width)); // stylelint-disable-line function-disallowed-list
264264
flex-direction: row;
265265
transform: translateY(50%);
266266
}
@@ -270,8 +270,10 @@
270270
height: var(--#{$prefix}range-slider-tooltip-arrow-width);
271271

272272
&::before {
273-
@include ltr-rtl("border-width", calc(var(--#{$prefix}range-slider-tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}range-slider-tooltip-arrow-width) * .5) var(--#{$prefix}range-slider-tooltip-arrow-height), null, calc(var(--#{$prefix}range-slider-tooltip-arrow-width) * .5) var(--#{$prefix}range-slider-tooltip-arrow-height) calc(var(--#{$prefix}range-slider-tooltip-arrow-width) * .5) 0);
274-
@include ltr-rtl("border-left-color", var(--#{$prefix}range-slider-tooltip-bg));
273+
border-inline-start-color: var(--#{$prefix}range-slider-tooltip-bg);
274+
border-inline-width: calc(var(--#{$prefix}range-slider-tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
275+
border-top-width: calc(var(--#{$prefix}range-slider-tooltip-arrow-width) * .5); // stylelint-disable-line function-disallowed-list
276+
border-bottom-width: calc(var(--#{$prefix}range-slider-tooltip-arrow-width) * .5); // stylelint-disable-line function-disallowed-list
275277
}
276278
}
277279

scss/coreui.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
@forward "footer";
4848
@forward "header";
4949
@forward "icon";
50+
@forward "loading-button";
5051
@forward "range-slider";
5152
@forward "rating";
5253
@forward "sidebar";

scss/forms/_form-multi-select.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@use "../mixins/border-radius" as *;
33
@use "../mixins/box-shadow" as *;
44
@use "../mixins/elevation" as *;
5-
@use "../mixins/ltr-rtl" as *;
65
@use "../mixins/transition" as *;
76
@use "../vendor/rfs" as *;
87
@use "../variables" as *;
@@ -402,11 +401,11 @@ select.form-multi-select {
402401

403402
&.form-multi-select-option-with-checkbox {
404403
padding: $form-multi-select-option-padding-y $form-multi-select-option-padding-x;
405-
@include ltr-rtl("padding-left", calc(var(--#{$prefix}form-multi-select-option-padding-x) + var(--#{$prefix}form-multi-select-option-indicator-width)));
404+
padding-inline-start: calc(var(--#{$prefix}form-multi-select-option-padding-x) + var(--#{$prefix}form-multi-select-option-indicator-width)); // stylelint-disable-line function-disallowed-list
406405
&::before {
407406
position: absolute;
407+
inset-inline-start: calc(var(--#{$prefix}form-multi-select-option-padding-x) * .5); // stylelint-disable-line function-disallowed-list
408408
top: .7rem;
409-
@include ltr-rtl("left", calc(var(--#{$prefix}form-multi-select-option-padding-x) * .5));
410409
display: block;
411410
width: var(--#{$prefix}form-multi-select-option-indicator-width);
412411
height: var(--#{$prefix}form-multi-select-option-indicator-width);

scss/mixins/_border-radius.scss

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -79,18 +79,4 @@
7979
border-end-start-radius: valid-radius($radius);
8080
}
8181
}
82-
83-
@mixin border-start-radius-flex($radius: $border-radius) {
84-
@if $enable-rounded {
85-
border-start-start-radius: valid-radius($radius);
86-
border-end-start-radius: valid-radius($radius);
87-
}
88-
}
89-
90-
@mixin border-end-radius-flex($radius: $border-radius) {
91-
@if $enable-rounded {
92-
border-start-end-radius: valid-radius($radius);
93-
border-end-end-radius: valid-radius($radius);
94-
}
95-
}
9682
// scss-docs-end border-radius-mixins

0 commit comments

Comments
 (0)