From 70d852f649d48177898aadd994a2ee1e6356274a Mon Sep 17 00:00:00 2001 From: deno Date: Wed, 4 Mar 2020 11:05:28 -0500 Subject: [PATCH] fix: radio and checkbox button RTL alignments (#753) --- src/checkbox.scss | 24 ++++++++++++++++++ src/mixins/_forms.scss | 2 +- src/radio.scss | 23 +++++++++++++++++ test/templates/checkbox/index.njk | 12 +++++++++ test/templates/radio/index.njk | 13 ++++++++++ .../FS_checkbox_6_backstop__n6_0_.png | Bin 0 -> 5818 bytes .../FS_radio_6_backstop__n6_0_.png | Bin 0 -> 7119 bytes 7 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 test/visual-regression-tests/reference_images/FS_checkbox_6_backstop__n6_0_.png create mode 100644 test/visual-regression-tests/reference_images/FS_radio_6_backstop__n6_0_.png diff --git a/src/checkbox.scss b/src/checkbox.scss index 0fc52e8e9f..0f41577350 100644 --- a/src/checkbox.scss +++ b/src/checkbox.scss @@ -48,6 +48,10 @@ $block: #{$fd-namespace}-checkbox; display: flex; align-items: center; + @include fd-rtl() { + padding: $fd-checkbox-margin $fd-checkbox-margin $fd-checkbox-margin 0; + } + &::before { content: ""; height: $fd-checkbox-dimensions; @@ -60,11 +64,19 @@ $block: #{$fd-namespace}-checkbox; font-family: "SAP-icons"; background-color: var(--sapField_Background); margin-right: $fd-checkbox-margin; + margin-left: 0; color: var(--sapSelectedColor); border: var(--sapField_BorderWidth) solid var(--sapField_BorderColor); border-radius: var(--sapField_BorderCornerRadius); } + @include fd-rtl() { + &::before { + margin-left: $fd-checkbox-margin; + margin-right: 0; + } + } + @include fd-hover() { &::before { background-color: var(--sapField_Hover_Background); @@ -129,12 +141,24 @@ $block: #{$fd-namespace}-checkbox; + .#{$block}__label { padding: $fd-checkbox-margin-compact 0 $fd-checkbox-margin-compact $fd-checkbox-margin-compact; + @include fd-rtl() { + padding: $fd-checkbox-margin-compact $fd-checkbox-margin-compact $fd-checkbox-margin-compact 0; + } + &::before { font-size: 0.625rem; height: $fd-checkbox-dimensions-compact; width: $fd-checkbox-dimensions-compact; min-width: $fd-checkbox-dimensions-compact; margin-right: $fd-checkbox-margin-compact; + margin-left: 0; + } + + @include fd-rtl() { + &::before { + margin-left: $fd-checkbox-margin-compact; + margin-right: 0; + } } } diff --git a/src/mixins/_forms.scss b/src/mixins/_forms.scss index 605a038d72..8826cc040c 100644 --- 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 index 7e6947fd98..454e28bb9f 100644 --- a/src/radio.scss +++ b/src/radio.scss @@ -49,6 +49,10 @@ $block: #{$fd-namespace}-radio; 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: ""; height: $fd-radio-inner-circle-diameter; @@ -72,6 +76,13 @@ $block: #{$fd-namespace}-radio; border-color: var(--sapField_Hover_BorderColor); } } + + @include fd-rtl() { + &::before { + margin-left: $fd-radio-outer-circle-margin; + margin-right: 0; + } + } } &:checked + .#{$block}__label::before { @@ -120,12 +131,24 @@ $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; + } } } diff --git a/test/templates/checkbox/index.njk b/test/templates/checkbox/index.njk index 3e8889e0fb..ee0c6def6a 100644 --- a/test/templates/checkbox/index.njk +++ b/test/templates/checkbox/index.njk @@ -65,5 +65,17 @@ {{ checkbox(compact=true, properties='checked') }} {% endset %} +{{ format(example) }} + +

RTL mode

+{% set example %} +
+ {{ checkbox(compact=true) }} + {{ checkbox(compact=true, properties='checked') }} + {{ checkbox(compact=false) }} + {{ checkbox(compact=false, properties='checked') }} +
+{% endset %} + {{ format(example) }} {% endblock %} diff --git a/test/templates/radio/index.njk b/test/templates/radio/index.njk index 7de523b169..17edb06169 100644 --- a/test/templates/radio/index.njk +++ b/test/templates/radio/index.njk @@ -60,5 +60,18 @@ {{ radio(compact=true, properties='checked') }} {% endset %} +{{ format(example) }} + +

RTL

+ +{% set example %} +
+ {{ radio(compact=true) }} + {{ radio(compact=true, properties='checked') }} + {{ radio(compact=false) }} + {{ radio(compact=false, properties='checked') }} +
+{% endset %} + {{ format(example) }} {% endblock %} diff --git a/test/visual-regression-tests/reference_images/FS_checkbox_6_backstop__n6_0_.png b/test/visual-regression-tests/reference_images/FS_checkbox_6_backstop__n6_0_.png new file mode 100644 index 0000000000000000000000000000000000000000..94ca4f2b827ecb40ffa6569a073fb44e3c6d289a GIT binary patch literal 5818 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 literal 0 HcmV?d00001 diff --git a/test/visual-regression-tests/reference_images/FS_radio_6_backstop__n6_0_.png b/test/visual-regression-tests/reference_images/FS_radio_6_backstop__n6_0_.png new file mode 100644 index 0000000000000000000000000000000000000000..321c1d7b03703cb28b06d99e4384008e43e5df0e GIT binary patch literal 7119 zcmds6d05iTTjP>jie-uBLWzosNXyBlaw#-S zM7*YAuB0f2xRqm?3M9CTqA8FoDGDkg=Vwai-upcFInQ(NxzBUYD;lIc=&wB<` zfcxw!pFhDo_S*Mt%GbYxvwnVAT55N6vuBZhZCj6@MJk-pcFQ0;(NemJu34fp)7G

`pBlqE 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