refactor: create mixin for likert item

cultureamp · Aug 24, 2023 · 708e56c · 708e56c
1 parent eacda05
commit 708e56c
Showing 1 changed file with 18 additions and 19 deletions.
diff --git a/...-packages/likert-scale-legacy/KaizenDraft/LikertScaleLegacy/LikertScaleLegacy.module.scss b/...-packages/likert-scale-legacy/KaizenDraft/LikertScaleLegacy/LikertScaleLegacy.module.scss
@@ -33,47 +33,49 @@ $fifth: $color-red-500;
   -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
 }
 
+@mixin right-likert-item($height) {
+  border-top-right-radius: $height;
+  border-bottom-right-radius: $height;
+}
+
+@mixin left-likert-item($height) {
+  border-top-left-radius: $height;
+  border-bottom-left-radius: $height;
+}
+
 @mixin fill($height) {
   &:first-child .likertItemFill {
-    border-top-left-radius: $height;
-    border-bottom-left-radius: $height;
+    @include left-likert-item($height);
 
     [dir="rtl"] & {
       border-radius: 0;
-      border-top-right-radius: $height;
-      border-bottom-right-radius: $height;
+      @include right-likert-item($height);
     }
 
     &::after {
-      border-top-right-radius: $height;
-      border-bottom-right-radius: $height;
+      @include right-likert-item($height);
 
       [dir="rtl"] & {
         border-radius: 0;
-        border-top-right-radius: $height;
-        border-bottom-right-radius: $height;
+        @include right-likert-item($height);
       }
     }
   }
 
   &:last-child .likertItemFill {
-    border-top-right-radius: $height;
-    border-bottom-right-radius: $height;
+    @include right-likert-item($height);
 
     [dir="rtl"] & {
       border-radius: 0;
-      border-top-left-radius: $height;
-      border-bottom-left-radius: $height;
+      @include left-likert-item($height);
     }
 
     &::after {
-      border-top-left-radius: $height;
-      border-bottom-left-radius: $height;
+      @include left-likert-item($height);
 
       [dir="rtl"] & {
         border-radius: 0;
-        border-top-left-radius: $height;
-        border-bottom-left-radius: $height;
+        @include left-likert-item($height);
       }
     }
   }
@@ -153,9 +155,6 @@ $fifth: $color-red-500;
 
   &[dir="rtl"],
   [dir="rtl"] & {
-    margin-right: 2px;
-    margin-left: 2px;
-
     &:first-child {
       margin-left: 2px;
     }