Skip to content

Commit 707d4fd

Browse files
mrholekmrholek
committed
refactor: migrate to CSS logical properties and values
1 parent aabd645 commit 707d4fd

35 files changed

+191
-209
lines changed

‎scss/_accordion.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@use "functions/escape-svg" as *;
22
@use "mixins/border-radius" as *;
33
@use "mixins/color-mode" as *;
4-
@use "mixins/ltr-rtl" as *;
54
@use "mixins/transition" as *;
65
@use "vendor/rfs" as *;
76
@use "variables" as *;
@@ -45,7 +44,7 @@
4544
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
4645
@include font-size($font-size-base);
4746
color: var(--#{$prefix}accordion-btn-color);
48-
@include ltr-rtl("text-align", left); // Reset button style
47+
text-align: start; // Reset button style
4948
background-color: var(--#{$prefix}accordion-btn-bg);
5049
border: 0;
5150
@include border-radius(0);
@@ -68,7 +67,7 @@
6867
flex-shrink: 0;
6968
width: var(--#{$prefix}accordion-btn-icon-width);
7069
height: var(--#{$prefix}accordion-btn-icon-width);
71-
@include ltr-rtl("margin-left", auto);
70+
margin-inline-start: auto;
7271
content: "";
7372
background-image: var(--#{$prefix}accordion-btn-icon);
7473
background-repeat: no-repeat;

‎scss/_alert.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use "sass:map";
22
@use "mixins/border-radius" as *;
3-
@use "mixins/ltr-rtl" as *;
43
@use "variables" as *;
54

65
//
@@ -47,13 +46,13 @@
4746
// Expand the right padding and account for the close button's positioning.
4847

4948
.alert-dismissible {
50-
@include ltr-rtl("padding-right", $alert-dismissible-padding-r);
49+
padding-inline-end: $alert-dismissible-padding-r;
5150

5251
// Adjust close link position
5352
.btn-close {
5453
position: absolute;
54+
inset-inline-end: 0;
5555
top: 0;
56-
@include ltr-rtl("right", 0);
5756
z-index: $stretched-link-z-index + 1;
5857
padding: $alert-padding-y * 1.25 $alert-padding-x;
5958
}

‎scss/_avatar.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use "sass:map";
22
@use "mixins/border-radius" as *;
3-
@use "mixins/ltr-rtl" as *;
43
@use "mixins/transition" as *;
54
@use "variables" as *;
65

@@ -35,7 +34,7 @@
3534

3635
.avatar-status {
3736
position: absolute;
38-
@include ltr-rtl("right", 0);
37+
inset-inline-end: 0;
3938
bottom: 0;
4039
display: block;
4140
width: var(--#{$prefix}avatar-status-width);
@@ -58,10 +57,10 @@
5857
display: flex;
5958

6059
.avatar {
61-
@include ltr-rtl("margin-right", calc(-.4 * var(--#{$prefix}avatar-width)));
60+
margin-inline-end: calc(-.4 * var(--#{$prefix}avatar-width)); // stylelint-disable-line function-disallowed-list
6261

6362
&:hover {
64-
@include ltr-rtl("margin-right", 0);
63+
margin-inline-end: 0;
6564
}
6665
}
6766
}

‎scss/_breadcrumb.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@
3030
.breadcrumb-item {
3131
// The separator between breadcrumbs (by default, a forward-slash: "/")
3232
+ .breadcrumb-item {
33-
@include ltr-rtl("padding-left", var(--#{$prefix}breadcrumb-item-padding-x));
33+
padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
3434

3535
&::before {
36-
@include ltr-rtl("float", left); // Suppress inline spacings and underlining of the separator
37-
@include ltr-rtl("padding-right", var(--#{$prefix}breadcrumb-item-padding-x));
36+
float: inline-start; // Suppress inline spacings and underlining of the separator
37+
padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
3838
color: var(--#{$prefix}breadcrumb-divider-color);
3939
@include ltr-rtl(
4040
"content",

‎scss/_button-group.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use "mixins/border-radius" as *;
22
@use "mixins/box-shadow" as *;
3-
@use "mixins/ltr-rtl" as *;
43
@use "variables" as *;
54

65
// Make the div behave like a button
@@ -44,7 +43,7 @@
4443
// Prevent double borders when buttons are next to each other
4544
> :not(.btn-check:first-child) + .btn,
4645
> .btn-group:not(:first-child) {
47-
@include ltr-rtl("margin-left", calc(#{$btn-border-width} * -1));
46+
margin-inline-start: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
4847
}
4948

5049
// Reset rounded corners
@@ -84,11 +83,11 @@
8483
&::after,
8584
.dropup &::after,
8685
.dropend &::after {
87-
@include ltr-rtl("margin-left", 0);
86+
margin-inline-start: 0;
8887
}
8988

9089
.dropstart &::before {
91-
@include ltr-rtl("margin-right", 0);
90+
margin-inline-end: 0;
9291
}
9392
}
9493

‎scss/_callout.scss

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

54
.callout {
@@ -17,8 +16,8 @@
1716
padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);
1817
margin: var(--#{$prefix}callout-margin-y) var(--#{$prefix}callout-margin-x);
1918
border: var(--#{$prefix}callout-border-width) solid var(--#{$prefix}callout-border-color);
20-
@include ltr-rtl("border-left-width", var(--#{$prefix}callout-border-left-width));
21-
@include ltr-rtl("border-left-color", var(--#{$prefix}callout-border-left-color));
19+
border-inline-start-color: var(--#{$prefix}callout-border-left-color);
20+
border-inline-start-width: var(--#{$prefix}callout-border-left-width);
2221
@include border-radius(var(--#{$prefix}callout-border-radius));
2322
}
2423

‎scss/_card.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@use "mixins/border-radius" as *;
22
@use "mixins/box-shadow" as *;
33
@use "mixins/breakpoints" as *;
4-
@use "mixins/ltr-rtl" as *;
54
@use "variables" as *;
65

76
//
@@ -101,7 +100,7 @@
101100
}
102101

103102
+ .card-link {
104-
@include ltr-rtl("margin-left", var(--#{$prefix}card-spacer-x));
103+
margin-inline-start: var(--#{$prefix}card-spacer-x);
105104
}
106105
}
107106

@@ -203,8 +202,8 @@
203202
margin-bottom: 0;
204203

205204
+ .card {
206-
@include ltr-rtl("margin-left", 0);
207-
@include ltr-rtl("border-left", 0);
205+
margin-inline-start: 0;
206+
border-inline-start: 0;
208207
}
209208

210209
// Handle rounded corners

‎scss/_dropdown.scss

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
@use "mixins/breakpoints" as *;
55
@use "mixins/caret" as *;
66
@use "mixins/gradients" as *;
7-
@use "mixins/ltr-rtl" as *;
87
@use "vendor/rfs" as *;
98
@use "variables" as *;
109

@@ -64,7 +63,7 @@
6463
margin: 0; // Override default margin of ul
6564
@include font-size(var(--#{$prefix}dropdown-font-size));
6665
color: var(--#{$prefix}dropdown-color);
67-
@include ltr-rtl("text-align", left); // Ensures proper alignment if parent has it changed (e.g., modal footer)
66+
text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
6867
list-style: none;
6968
background-color: var(--#{$prefix}dropdown-bg);
7069
background-clip: padding-box;
@@ -73,8 +72,8 @@
7372
@include box-shadow(var(--#{$prefix}dropdown-box-shadow));
7473

7574
&[data#{$data-infix}popper] {
75+
inset-inline-start: 0;
7676
top: 100%;
77-
@include ltr-rtl("left", 0);
7877
margin-top: var(--#{$prefix}dropdown-spacer);
7978
}
8079

@@ -103,17 +102,17 @@
103102
--#{$prefix}position: start;
104103

105104
&[data#{$data-infix}popper] {
106-
@include ltr-rtl("right", auto);
107-
@include ltr-rtl("left", 0);
105+
inset-inline-start: 0;
106+
inset-inline-end: auto;
108107
}
109108
}
110109

111110
.dropdown-menu#{$infix}-end {
112111
--#{$prefix}position: end;
113112

114113
&[data#{$data-infix}popper] {
115-
@include ltr-rtl("right", 0);
116-
@include ltr-rtl("left", auto);
114+
inset-inline-start: auto;
115+
inset-inline-end: 0;
117116
}
118117
}
119118
}
@@ -137,11 +136,11 @@
137136

138137
.dropend {
139138
.dropdown-menu[data#{$data-infix}popper] {
139+
inset-inline-start: 100%;
140+
inset-inline-end: auto;
140141
top: 0;
141-
@include ltr-rtl("right", auto);
142-
@include ltr-rtl("left", 100%);
142+
margin-inline-start: var(--#{$prefix}dropdown-spacer);
143143
margin-top: 0;
144-
@include ltr-rtl("margin-left", var(--#{$prefix}dropdown-spacer));
145144
}
146145

147146
.dropdown-toggle {
@@ -154,11 +153,11 @@
154153

155154
.dropstart {
156155
.dropdown-menu[data#{$data-infix}popper] {
156+
inset-inline-start: auto;
157+
inset-inline-end: 100%;
157158
top: 0;
158-
@include ltr-rtl("right", 100%);
159-
@include ltr-rtl("left", auto);
159+
margin-inline-end: var(--#{$prefix}dropdown-spacer);
160160
margin-top: 0;
161-
@include ltr-rtl("margin-right", var(--#{$prefix}dropdown-spacer));
162161
}
163162

164163
.dropdown-toggle {

‎scss/_header.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@use "functions/escape-svg" as *;
22
@use "mixins/border-radius" as *;
33
@use "mixins/breakpoints" as *;
4-
@use "mixins/ltr-rtl" as *;
54
@use "mixins/transition" as *;
65
@use "vendor/rfs" as *;
76
@use "variables" as *;
@@ -87,7 +86,7 @@
8786
.header-brand {
8887
padding-top: var(--#{$prefix}header-brand-padding-y);
8988
padding-bottom: var(--#{$prefix}header-brand-padding-y);
90-
@include ltr-rtl("margin-right", $header-brand-margin-end);
89+
margin-inline-end: $header-brand-margin-end;
9190
@include font-size($header-brand-font-size);
9291
color: var(--#{$prefix}header-brand-color);
9392
text-decoration: if($link-decoration == none, null, none);
@@ -107,7 +106,7 @@
107106
.header-nav {
108107
display: flex;
109108
flex-direction: row; // cannot use `inherit` to get the `.header`s value
110-
@include ltr-rtl("padding-left", 0);
109+
padding-inline-start: 0;
111110
margin-bottom: 0;
112111
list-style: none;
113112

‎scss/_list-group.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@use "sass:map";
22
@use "mixins/border-radius" as *;
33
@use "mixins/breakpoints" as *;
4-
@use "mixins/ltr-rtl" as *;
54
@use "variables" as *;
65

76
// Base class
@@ -33,7 +32,7 @@
3332
flex-direction: column;
3433

3534
// No need to set list-style: none; since .list-group-item is block level
36-
@include ltr-rtl("padding-left", 0); // reset padding because ul and ol
35+
padding-inline-start: 0; // reset padding because ul and ol
3736
margin-bottom: 0;
3837
@include border-radius(var(--#{$prefix}list-group-border-radius));
3938
}
@@ -148,12 +147,12 @@
148147
}
149148

150149
+ .list-group-item {
150+
border-inline-start-width: 0;
151151
border-top-width: var(--#{$prefix}list-group-border-width);
152-
@include ltr-rtl("border-left-width", 0);
153152

154153
&.active {
155-
@include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}list-group-border-width)));
156-
@include ltr-rtl("border-left-width", var(--#{$prefix}list-group-border-width));
154+
margin-inline-start: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
155+
border-inline-start-width: var(--#{$prefix}list-group-border-width);
157156
}
158157
}
159158
}

‎scss/_modal.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
@use "mixins/border-radius" as *;
55
@use "mixins/box-shadow" as *;
66
@use "mixins/breakpoints" as *;
7-
@use "mixins/ltr-rtl" as *;
87
@use "mixins/transition" as *;
98
@use "variables" as *;
109

@@ -41,8 +40,8 @@
4140
// scss-docs-end modal-css-vars
4241

4342
position: fixed;
43+
inset-inline-start: 0;
4444
top: 0;
45-
@include ltr-rtl("left", 0);
4645
z-index: var(--#{$prefix}modal-zindex);
4746
display: none;
4847
width: 100%;
@@ -140,7 +139,9 @@
140139

141140
.btn-close {
142141
padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
143-
@include ltr-rtl-value-only("margin", calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto, calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)));
142+
margin-inline: auto calc(-.5 * var(--#{$prefix}modal-header-padding-x));
143+
margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
144+
margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
144145
}
145146
}
146147

‎scss/_nav.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use "mixins/border-radius" as *;
22
@use "mixins/gradients" as *;
3-
@use "mixins/ltr-rtl" as *;
43
@use "mixins/transition" as *;
54
@use "vendor/rfs" as *;
65
@use "variables" as *;
@@ -23,7 +22,7 @@
2322

2423
display: flex;
2524
flex-wrap: wrap;
26-
@include ltr-rtl("padding-left", 0);
25+
padding-inline-start: 0;
2726
margin-bottom: 0;
2827
list-style: none;
2928
}

‎scss/_navbar.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
@use "mixins/color-mode" as *;
77
@use "mixins/deprecate" as *;
88
@use "mixins/gradients" as *;
9-
@use "mixins/ltr-rtl" as *;
109
@use "mixins/transition" as *;
1110
@use "vendor/rfs" as *;
1211
@use "variables" as *;
@@ -78,7 +77,7 @@
7877
.navbar-brand {
7978
padding-top: var(--#{$prefix}navbar-brand-padding-y);
8079
padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
81-
@include ltr-rtl("margin-right", var(--#{$prefix}navbar-brand-margin-end));
80+
margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
8281
@include font-size(var(--#{$prefix}navbar-brand-font-size));
8382
color: var(--#{$prefix}navbar-brand-color);
8483
text-decoration: if($link-decoration == none, null, none);
@@ -109,7 +108,7 @@
109108

110109
display: flex;
111110
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
112-
@include ltr-rtl("padding-left", 0);
111+
padding-inline-start: 0;
113112
margin-bottom: 0;
114113
list-style: none;
115114

‎scss/_offcanvas.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,18 +54,18 @@
5454
@include transition(var(--#{$prefix}offcanvas-transition));
5555

5656
&.offcanvas-start {
57+
inset-inline-start: 0;
5758
top: 0;
58-
@include ltr-rtl("left", 0);
5959
width: var(--#{$prefix}offcanvas-width);
60-
@include ltr-rtl("border-right", var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color));
60+
border-inline-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
6161
@include ltr-rtl-value-only("transform", translateX(-100%), translateX(100%));
6262
}
6363

6464
&.offcanvas-end {
65+
inset-inline-end: 0;
6566
top: 0;
66-
@include ltr-rtl("right", 0);
6767
width: var(--#{$prefix}offcanvas-width);
68-
@include ltr-rtl("border-left", var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color));
68+
border-inline-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
6969
transform: translateX(100%);
7070
}
7171

0 commit comments

Comments
 (0)