fix: radio button alignment in RTL mode

SAP · Mar 3, 2020 · 115ff32 · 115ff32
1 parent 8018718
commit 115ff32
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/mixins/_forms.scss b/src/mixins/_forms.scss
@@ -149,7 +149,7 @@
 
   @include fd-rtl() {
     &::after {
-      left: $fd-radio-label-padding - $fd-radio-focus-offset;
+      left: $fd-radio-label-padding;
       right: $margin - $fd-radio-focus-offset;
     }
   }

diff --git a/src/radio.scss b/src/radio.scss
@@ -48,6 +48,10 @@ $block: #{$fd-namespace}-radio;
     align-items: center;
     overflow: hidden;
     padding: $fd-radio-outer-circle-margin 0 $fd-radio-outer-circle-margin $fd-radio-outer-circle-margin;
+
+    @include fd-rtl() {
+      padding: $fd-radio-outer-circle-margin $fd-radio-outer-circle-margin $fd-radio-outer-circle-margin 0;
+    }
 
     &::before {
       content: "";
@@ -61,11 +65,19 @@ $block: #{$fd-namespace}-radio;
       font-family: "SAP-icons";
       background-color: var(--sapField_Background);
       margin-right: $fd-radio-outer-circle-margin;
+      margin-left: 0;
       color: var(--sapSelectedColor);
       border: var(--sapField_BorderWidth) solid var(--sapField_BorderColor);
       border-radius: 50%;
     }
 
+    @include fd-rtl() {
+      &::before {
+        margin-left: $fd-radio-outer-circle-margin;
+        margin-right: 0;
+      }
+    }
+
     @include fd-hover() {
       &::before {
         background-color: var(--sapField_Hover_Background);
@@ -120,12 +132,23 @@ $block: #{$fd-namespace}-radio;
     + .#{$block}__label {
       padding: $fd-radio-outer-circle-margin-compact 0 $fd-radio-outer-circle-margin-compact $fd-radio-outer-circle-margin-compact;
 
+      @include fd-rtl() {
+        padding: $fd-radio-outer-circle-margin-compact $fd-radio-outer-circle-margin-compact $fd-radio-outer-circle-margin-compact 0;
+      }
       &::before {
         font-size: 0.4375rem;
         height: $fd-radio-inner-circle-diameter-compact;
         width: $fd-radio-inner-circle-diameter-compact;
         min-width: $fd-radio-inner-circle-diameter-compact;
         margin-right: $fd-radio-outer-circle-margin-compact;
+        margin-left: 0
+      }
+
+      @include fd-rtl() {
+        &::before {
+          margin-left: $fd-radio-outer-circle-margin-compact;
+          margin-right: 0;
+        }
       }
     }