From 5e37f38e1899ea9b7ad58daa5f9e0bf0f1bb2adf Mon Sep 17 00:00:00 2001 From: Reza M Ghayeghchi Date: Wed, 11 Dec 2024 22:57:02 +0100 Subject: [PATCH 1/2] Support RTL for group component border radius styles --- scss/components/_group.scss | 40 +++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/scss/components/_group.scss b/scss/components/_group.scss index 536ac27b..7d273d08 100644 --- a/scss/components/_group.scss +++ b/scss/components/_group.scss @@ -129,4 +129,44 @@ } } } + + [dir="rtl"] { + #{$parent-selector} [role="search"], + #{$parent-selector} [role="group"] { + > *, + input:not([type="checkbox"], [type="radio"]), + select, + label { + &:not(:first-child) { + margin-right: 0; + margin-left: auto; + border-top-right-radius: 0; + border-top-left-radius: var(#{$css-var-prefix}border-radius); + border-bottom-right-radius: 0; + border-bottom-left-radius: var(#{$css-var-prefix}border-radius); + } + + &:not(:last-child) { + border-top-right-radius: var(#{$css-var-prefix}border-radius); + border-top-left-radius: 0; + border-bottom-right-radius: var(#{$css-var-prefix}border-radius); + border-bottom-left-radius: 0; + } + } + } + + button, + [type="submit"], + [type="reset"], + [type="button"], + [role="button"], + input:not([type="checkbox"], [type="radio"]), + select, + label { + &:not(:first-child) { + margin-right: calc(var(#{$css-var-prefix}border-width) * -1); + margin-left: auto; + } + } + } } From 6359082a45160f7d9f5d9cb39583819aa02d862b Mon Sep 17 00:00:00 2001 From: Reza M Ghayeghchi Date: Thu, 12 Dec 2024 00:03:39 +0100 Subject: [PATCH 2/2] Add RTL support for Accordion Marker --- scss/components/_accordion.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss index 73f0ad86..60ceeac7 100644 --- a/scss/components/_accordion.scss +++ b/scss/components/_accordion.scss @@ -110,9 +110,17 @@ &::after { float: left; + transform: rotate(90deg); background-position: left center; } } + &[open] { + > summary { + &::after { + transform: rotate(0); + } + } + } } } }