Fix input group styles on RTL layout

Liggliluff · Sep 21, 2021 · 9c6f05c · 9c6f05c
1 parent 4e0baac
commit 9c6f05c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -6,15 +6,21 @@
 
 :root {
   color-scheme: dark;
-}
 
-:root[dir='rtl'] {
-  .input-group > .input-group-prepend > .btn {
-    border-radius: 0 $input-border-radius $input-border-radius 0;
-  }
+  &[dir='rtl'] {
+    .input-group > .input-group-prepend > {
+      .btn,
+      .input-group-text {
+        border-radius: 0 $input-border-radius $input-border-radius 0;
+      }
+    }
 
-  .input-group > .input-group-append > .input-group-text {
-    border-radius: $input-border-radius 0 0 $input-border-radius;
+    .input-group > {
+      .form-control:last-child,
+      .input-group-append > .input-group-text {
+        border-radius: $input-border-radius 0 0 $input-border-radius;
+      }
+    }
   }
 }
 

diff --git a/src/scss/modules/TimestampPicker.module.scss b/src/scss/modules/TimestampPicker.module.scss
@@ -105,17 +105,7 @@ $rdt-disabled-color: invert(#999999);
 }
 
 :root[dir='rtl'] {
-  .date-input-group {
-    flex-direction: row-reverse;
-  }
-
   .datepicker .form-label {
     text-align: right;
   }
 }
-
-:root[dir='rtl'] {
-  .date-input-group {
-    flex-direction: row-reverse;
-  }
-}