diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss index 0bed0410b7..92e512a892 100644 --- a/packages/styles/src/mixins/_forms.scss +++ b/packages/styles/src/mixins/_forms.scss @@ -233,6 +233,32 @@ $fd-input-field-height--compact: 1.625rem; } } +@mixin fd-input-group-button($selector, $first: true) { + #{$selector} { + @if $first { + @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder)); + + @include fd-hover() { + @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder_Active)); + } + + @include fd-active() { + @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder_Active)); + } + } @else { + @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder)); + + @include fd-hover() { + @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder_Active)); + } + + @include fd-active() { + @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder_Active)); + } + } + } +} + @mixin fd-input-group-button-overwrite() { $fd-input-group-button-states: ( 'success': ( @@ -257,35 +283,12 @@ $fd-input-field-height--compact: 1.625rem; ) ); - .#{$block}__addon { - &:first-child { - .#{$block}__button { - @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder)); + @include fd-input-group-button(".#{$block}__button:first-child"); + @include fd-input-group-button(".#{$block}__button:not(:first-child)", false); - @include fd-hover() { - @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder_Active)); - } - - @include fd-active() { - @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder_Active)); - } - } - } - - &:not(:first-child) { - .#{$block}__button { - @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder)); - - @include fd-hover() { - @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder_Active)); - } - - @include fd-active() { - @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder_Active)); - } - } - } - } + // To support `fd-input-group__addon` and avoid breaking changes + @include fd-input-group-button(".#{$block}__addon:first-child .#{$block}__button"); + @include fd-input-group-button(".#{$block}__addon:not(:first-child) .#{$block}__button", false); .#{$block}__button { @include fd-ellipsis(); diff --git a/packages/styles/src/select.scss b/packages/styles/src/select.scss index 59f2612452..2d91ce648c 100644 --- a/packages/styles/src/select.scss +++ b/packages/styles/src/select.scss @@ -18,6 +18,13 @@ $fd-select-padding-x-compact: 0.5rem; box-shadow: var(--fdInput_Group_Button_Box_Shadow); @content; } + + @include fd-rtl() { + .#{$block}__button { + border-left-color: transparent; + border-right-color: $borderLeft; + } + } } @mixin fd-select-states-overwrite() { @@ -62,6 +69,13 @@ $fd-select-padding-x-compact: 0.5rem; box-shadow: map_get($set-props, "hoverBoxShadow"); } + @include fd-rtl() { + .#{$block}__button { + border-left-color: transparent; + border-right-color: var(--fdSelect_Expanded_Button_Border_Left_Color); + } + } + @include fd-focus() { box-shadow: none; } @@ -97,7 +111,6 @@ $fd-select-padding-x-compact: 0.5rem; .#{$block}__button { @include fd-set-margin-left(0.25rem); - @include fd-input-group-button-overwrite(); } @include fd-readonly() {