diff --git a/docs/pages/components/product-switch.md b/docs/pages/components/product-switch.md index 5d79edfaba..4382db9522 100644 --- a/docs/pages/components/product-switch.md +++ b/docs/pages/components/product-switch.md @@ -388,3 +388,110 @@ Add the modifier class `fd-product-switch__body--mobile` for a list layout. {% endcapture %} {% include display-component.html component=product-switch-body-mobile %} + + +
+ +## Product Switch - Smallest Screen, RTL + +{% capture product-switch-body-mobile %} +
+
+ +
+
+{% endcapture %} +{% include display-component.html component=product-switch-body-mobile %} diff --git a/src/product-switch.scss b/src/product-switch.scss index 632432f0a4..173b8d9e67 100644 --- a/src/product-switch.scss +++ b/src/product-switch.scss @@ -104,6 +104,17 @@ $block: #{$fd-namespace}-product-switch; margin-bottom: 0; margin-right: 0.75rem; } + + @include fd-rtl() { + .#{$block}__icon { + margin-right: 0; + margin-left: 0.75rem; + } + + .#{$block}__text { + align-items: flex-start; + } + } } &__list {