refactor: improve RTL direction handling

mrholek · mrholek · commit 84cc9541fe82 · 2023-08-01T18:08:21.000+02:00
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
@@ -39,7 +39,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    @include ltr-rtl("margin-left", calc(#{$btn-border-width} * -1));
   }
 
   // Reset rounded corners
@@ -79,11 +79,11 @@
   &::after,
   .dropup &::after,
   .dropend &::after {
-    margin-left: 0;
+    @include ltr-rtl("margin-left", 0);
   }
 
   .dropstart &::before {
-    margin-right: 0;
+    @include ltr-rtl("margin-right", 0);
   }
 }
 
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -95,7 +95,7 @@
   }
 
   + .card-link {
-    margin-left: var(--#{$prefix}card-spacer-x);
+    @include ltr-rtl("margin-left", var(--#{$prefix}card-spacer-x));
   }
 }
 
@@ -198,8 +198,8 @@
       margin-bottom: 0;
 
       + .card {
-        margin-left: 0;
-        border-left: 0;
+        @include ltr-rtl("margin-left", 0);
+        @include ltr-rtl("border-left", 0);
       }
 
       // Handle rounded corners
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -93,17 +93,17 @@
       --cui-position: start;
 
       &[data-coreui-popper] {
-        right: auto;
-        left: 0;
+        @include ltr-rtl("right", auto);
+        @include ltr-rtl("left", 0);
       }
     }
 
     .dropdown-menu#{$infix}-end {
       --cui-position: end;
 
       &[data-coreui-popper] {
-        right: 0;
-        left: auto;
+        @include ltr-rtl("right", 0);
+        @include ltr-rtl("left", auto);
       }
     }
   }
diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -16,7 +16,7 @@
 
   display: flex;
   flex-wrap: wrap;
-  padding-left: 0;
+  @include ltr-rtl("padding-left", 0);
   margin-bottom: 0;
   list-style: none;
 }
diff --git a/scss/_type.scss b/scss/_type.scss
@@ -69,7 +69,7 @@
   display: inline-block;
 
   &:not(:last-child) {
-    margin-right: $list-inline-padding;
+    @include ltr-rtl("margin-right", $list-inline-padding);
   }
 }
 
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
@@ -12,7 +12,7 @@
   > label {
     position: absolute;
     top: 0;
-    left: 0;
+    @include ltr-rtl("left", 0);
     z-index: 2;
     height: 100%; // allow textareas
     padding: $form-floating-padding-y $form-floating-padding-x;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -15,14 +15,14 @@
 }
 
 .form-check-reverse {
-  padding-right: $form-check-padding-start;
-  padding-left: 0;
-  text-align: right;
+  @include ltr-rtl("padding-right", $form-check-padding-start);
+  @include ltr-rtl("padding-left", 0);
+  @include ltr-rtl("text-align", right);
 
   .form-check-input {
-    float: right;
-    margin-right: $form-check-padding-start * -1;
-    margin-left: 0;
+    @include ltr-rtl("float", right);
+    @include ltr-rtl("margin-right", $form-check-padding-start * -1);
+    @include ltr-rtl("margin-left", 0);
   }
 }
 
@@ -127,7 +127,7 @@
     --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
 
     width: $form-switch-width;
-    margin-left: $form-switch-padding-start * -1;
+    @include ltr-rtl("margin-left", $form-switch-padding-start * -1);
     background-image: var(--#{$prefix}form-switch-bg);
     background-position: left center;
     @include border-radius($form-switch-border-radius);
@@ -149,12 +149,12 @@
   }
 
   &.form-check-reverse {
-    padding-right: $form-switch-padding-start;
-    padding-left: 0;
+    @include ltr-rtl("padding-right", $form-check-padding-start);
+    @include ltr-rtl("padding-left", 0);
 
     .form-check-input {
-      margin-right: $form-switch-padding-start * -1;
-      margin-left: 0;
+      @include ltr-rtl("margin-right", $form-check-padding-start * -1);
+      @include ltr-rtl("margin-left", 0);
     }
   }
 }
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
@@ -35,7 +35,7 @@
   @if $enable-caret {
     &::after {
       display: inline-block;
-      margin-left: $spacing;
+      @include ltr-rtl("margin-left", $spacing);
       vertical-align: $vertical-align;
       content: "";
       @if $direction == down {
@@ -54,15 +54,15 @@
 
       &::before {
         display: inline-block;
-        margin-right: $spacing;
+        @include ltr-rtl("margin-right", $spacing);
         vertical-align: $vertical-align;
         content: "";
         @include caret-start($width);
       }
     }
 
     &:empty::after {
-      margin-left: 0;
+      @include ltr-rtl("margin-left", 0);
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@`
`39`	`39`	`// Prevent double borders when buttons are next to each other`
`40`	`40`	`> :not(.btn-check:first-child) + .btn,`
`41`	`41`	`> .btn-group:not(:first-child) {`
`42`		`- margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list`
	`42`	`+ @include ltr-rtl("margin-left", calc(#{$btn-border-width} * -1));`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`// Reset rounded corners`
`@@ -79,11 +79,11 @@`
`79`	`79`	`&::after,`
`80`	`80`	`.dropup &::after,`
`81`	`81`	`.dropend &::after {`
`82`		`- margin-left: 0;`
	`82`	`+ @include ltr-rtl("margin-left", 0);`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`.dropstart &::before {`
`86`		`- margin-right: 0;`
	`86`	`+ @include ltr-rtl("margin-right", 0);`
`87`	`87`	`}`
`88`	`88`	`}`
`89`	`89`
Original file line number	Diff line number	Diff line change
`@@ -95,7 +95,7 @@`
`95`	`95`	`}`
`96`	`96`
`97`	`97`	`+ .card-link {`
`98`		`- margin-left: var(--#{$prefix}card-spacer-x);`
	`98`	`+ @include ltr-rtl("margin-left", var(--#{$prefix}card-spacer-x));`
`99`	`99`	`}`
`100`	`100`	`}`
`101`	`101`
`@@ -198,8 +198,8 @@`
`198`	`198`	`margin-bottom: 0;`
`199`	`199`
`200`	`200`	`+ .card {`
`201`		`- margin-left: 0;`
`202`		`- border-left: 0;`
	`201`	`+ @include ltr-rtl("margin-left", 0);`
	`202`	`+ @include ltr-rtl("border-left", 0);`
`203`	`203`	`}`
`204`	`204`
`205`	`205`	`// Handle rounded corners`
Original file line number	Diff line number	Diff line change
`@@ -93,17 +93,17 @@`
`93`	`93`	`--cui-position: start;`
`94`	`94`
`95`	`95`	`&[data-coreui-popper] {`
`96`		`- right: auto;`
`97`		`- left: 0;`
	`96`	`+ @include ltr-rtl("right", auto);`
	`97`	`+ @include ltr-rtl("left", 0);`
`98`	`98`	`}`
`99`	`99`	`}`
`100`	`100`
`101`	`101`	`.dropdown-menu#{$infix}-end {`
`102`	`102`	`--cui-position: end;`
`103`	`103`
`104`	`104`	`&[data-coreui-popper] {`
`105`		`- right: 0;`
`106`		`- left: auto;`
	`105`	`+ @include ltr-rtl("right", 0);`
	`106`	`+ @include ltr-rtl("left", auto);`
`107`	`107`	`}`
`108`	`108`	`}`
`109`	`109`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`
`17`	`17`	`display: flex;`
`18`	`18`	`flex-wrap: wrap;`
`19`		`- padding-left: 0;`
	`19`	`+ @include ltr-rtl("padding-left", 0);`
`20`	`20`	`margin-bottom: 0;`
`21`	`21`	`list-style: none;`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@`
`69`	`69`	`display: inline-block;`
`70`	`70`
`71`	`71`	`&:not(:last-child) {`
`72`		`- margin-right: $list-inline-padding;`
	`72`	`+ @include ltr-rtl("margin-right", $list-inline-padding);`
`73`	`73`	`}`
`74`	`74`	`}`
`75`	`75`
Original file line number	Diff line number	Diff line change
`@@ -15,14 +15,14 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.form-check-reverse {`
`18`		`- padding-right: $form-check-padding-start;`
`19`		`- padding-left: 0;`
`20`		`- text-align: right;`
	`18`	`+ @include ltr-rtl("padding-right", $form-check-padding-start);`
	`19`	`+ @include ltr-rtl("padding-left", 0);`
	`20`	`+ @include ltr-rtl("text-align", right);`
`21`	`21`
`22`	`22`	`.form-check-input {`
`23`		`- float: right;`
`24`		`- margin-right: $form-check-padding-start * -1;`
`25`		`- margin-left: 0;`
	`23`	`+ @include ltr-rtl("float", right);`
	`24`	`+ @include ltr-rtl("margin-right", $form-check-padding-start * -1);`
	`25`	`+ @include ltr-rtl("margin-left", 0);`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`
`@@ -127,7 +127,7 @@`
`127`	`127`	`--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};`
`128`	`128`
`129`	`129`	`width: $form-switch-width;`
`130`		`- margin-left: $form-switch-padding-start * -1;`
	`130`	`+ @include ltr-rtl("margin-left", $form-switch-padding-start * -1);`
`131`	`131`	`background-image: var(--#{$prefix}form-switch-bg);`
`132`	`132`	`background-position: left center;`
`133`	`133`	`@include border-radius($form-switch-border-radius);`
`@@ -149,12 +149,12 @@`
`149`	`149`	`}`
`150`	`150`
`151`	`151`	`&.form-check-reverse {`
`152`		`- padding-right: $form-switch-padding-start;`
`153`		`- padding-left: 0;`
	`152`	`+ @include ltr-rtl("padding-right", $form-check-padding-start);`
	`153`	`+ @include ltr-rtl("padding-left", 0);`
`154`	`154`
`155`	`155`	`.form-check-input {`
`156`		`- margin-right: $form-switch-padding-start * -1;`
`157`		`- margin-left: 0;`
	`156`	`+ @include ltr-rtl("margin-right", $form-check-padding-start * -1);`
	`157`	`+ @include ltr-rtl("margin-left", 0);`
`158`	`158`	`}`
`159`	`159`	`}`
`160`	`160`	`}`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@`
`35`	`35`	`@if $enable-caret {`
`36`	`36`	`&::after {`
`37`	`37`	`display: inline-block;`
`38`		`- margin-left: $spacing;`
	`38`	`+ @include ltr-rtl("margin-left", $spacing);`
`39`	`39`	`vertical-align: $vertical-align;`
`40`	`40`	`content: "";`
`41`	`41`	`@if $direction == down {`
`@@ -54,15 +54,15 @@`
`54`	`54`
`55`	`55`	`&::before {`
`56`	`56`	`display: inline-block;`
`57`		`- margin-right: $spacing;`
	`57`	`+ @include ltr-rtl("margin-right", $spacing);`
`58`	`58`	`vertical-align: $vertical-align;`
`59`	`59`	`content: "";`
`60`	`60`	`@include caret-start($width);`
`61`	`61`	`}`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`&:empty::after {`
`65`		`- margin-left: 0;`
	`65`	`+ @include ltr-rtl("margin-left", 0);`
`66`	`66`	`}`
`67`	`67`	`}`
`68`	`68`	`}`