diff --git a/draft-packages/likert-scale-legacy/KaizenDraft/LikertScaleLegacy/LikertScaleLegacy.module.scss b/draft-packages/likert-scale-legacy/KaizenDraft/LikertScaleLegacy/LikertScaleLegacy.module.scss index 4e90d24..4f3093a 100644 --- a/draft-packages/likert-scale-legacy/KaizenDraft/LikertScaleLegacy/LikertScaleLegacy.module.scss +++ b/draft-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; }