diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css index 7703802e307b871ecfb073f12458126d3b8b43f6..13a46d7301dbd6fbee7dbb123b4c2db06c44511e 100644 --- a/src/components/sound-editor/sound-editor.css +++ b/src/components/sound-editor/sound-editor.css @@ -14,6 +14,10 @@ align-items: center; } +[dir="rtl"] .row-reverse { + flex-direction: row-reverse; +} + .row + .row { margin-top: calc(2 * $space); } @@ -23,15 +27,31 @@ flex-direction: row; } -.input-group + .input-group { +[dir="ltr"] .input-group + .input-group { margin-left: calc(2 * $space); } -.input-group { +[dir="rtl"] .input-group + .input-group { + margin-right: calc(2 * $space); +} + +[dir="ltr"] .input-group { padding-right: calc(2 * $space); border-right: 1px dashed $ui-black-transparent; } +[dir="rtl"] .input-group { + padding-left: calc(2 * $space); + border-left: 1px dashed $ui-black-transparent; +} + +[dir="rtl"] .row-reverse > .input-group { + padding-left: 0; + padding-right: calc(2 * $space); + border-left: none; + border-right: 1px dashed $ui-black-transparent; +} + .waveform-container { display: flex; justify-content: space-around; @@ -92,21 +112,22 @@ $border-radius: 0.25rem; align-items: center; color: $text-primary; font-size: 0.625rem; - margin-left: 1rem; user-select: none; } +[dir="ltr"] .trim-button { + margin-left: 1rem; +} + +[dir="rtl"] .trim-button { + margin-right: 1rem; +} + .trim-button > img { width: 1.25rem; margin-bottom: -0.375rem; } -.input-group-right { - flex-grow: 1; - display: flex; - flex-direction: row-reverse; -} - .effect-button { flex-basis: 60px; color: $text-primary; @@ -124,26 +145,47 @@ $border-radius: 0.25rem; margin-bottom: -0.375rem; } -.button-group { +[dir="ltr"] .button-group { margin-left: 1rem; } +[dir="rtl"] .button-group { + margin-right: 1rem; +} + .button-group .button { border-radius: 0; +} + +[dir="ltr"] .button-group .button { border-left: none; } +[dir="rtl"] .button-group .button { + border-right: none; +} -.button-group .button:last-of-type { +[dir="ltr"] .button-group .button:last-of-type { border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius; } -.button-group .button:first-of-type { +[dir="ltr"] .button-group .button:first-of-type { border-left: 1px solid $ui-black-transparent; border-top-left-radius: $border-radius; border-bottom-left-radius: $border-radius; } +[dir="rtl"] .button-group .button:last-of-type { + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; +} + +[dir="rtl"] .button-group .button:first-of-type { + border-right: 1px solid $ui-black-transparent; + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; +} + .button:disabled > img { opacity: 0.25; } diff --git a/src/components/sound-editor/sound-editor.jsx b/src/components/sound-editor/sound-editor.jsx index a4aafcd9155968b46d30d8022092a3da11cc58ae..6814b94ae3b2b78652f16df05113ed38d8a25daa 100644 --- a/src/components/sound-editor/sound-editor.jsx +++ b/src/components/sound-editor/sound-editor.jsx @@ -168,7 +168,7 @@ const SoundEditor = props => ( /> </div> </div> - <div className={styles.row}> + <div className={classNames(styles.row, styles.rowReverse)}> <div className={styles.inputGroup}> {props.playhead ? ( <button