diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css index 93ef5b4408a1d701fc624a0f41b9ad994844dd58..397c679da34811e8170a422d6f24dc336a619db4 100644 --- a/src/components/stage-header/stage-header.css +++ b/src/components/stage-header/stage-header.css @@ -31,9 +31,16 @@ .stage-size-toggle-group { display: flex; +} + +[dir="ltr"] .stage-size-toggle-group { margin-right: .2rem; } +[dir="rtl"] .stage-size-toggle-group { + margin-left: .2rem; +} + .stage-button { display: block; border: 1px solid $ui-black-transparent; @@ -51,13 +58,24 @@ height: 100%; } -.stage-button-right { +[dir="ltr"] .stage-button-first { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +[dir="ltr"] .stage-button-last { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; } -.stage-button-left { +[dir="rtl"] .stage-button-first { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +[dir="rtl"] .stage-button-last { + border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx index 21a156a95a6add7ff7caa60b21aa23c28b04b6d7..43414179b7b4d4f26454b0ef92d8ed16e6af28be 100644 --- a/src/components/stage-header/stage-header.jsx +++ b/src/components/stage-header/stage-header.jsx @@ -96,7 +96,7 @@ const StageHeaderComponent = function (props) { <Button className={classNames( styles.stageButton, - styles.stageButtonLeft, + styles.stageButtonFirst, (stageSizeMode === STAGE_SIZE_MODES.small) ? null : styles.stageButtonToggledOff )} onClick={onSetStageSmall} @@ -113,7 +113,7 @@ const StageHeaderComponent = function (props) { <Button className={classNames( styles.stageButton, - styles.stageButtonRight, + styles.stageButtonLast, (stageSizeMode === STAGE_SIZE_MODES.large) ? null : styles.stageButtonToggledOff )} onClick={onSetStageLarge}