diff --git a/src/media/css/header--global.styl b/src/media/css/header--global.styl index 0506d599b2..8fe039b09b 100644 --- a/src/media/css/header--global.styl +++ b/src/media/css/header--global.styl @@ -22,7 +22,12 @@ search-sprite() { } &.searching { .header--search-content { - transform: translate(8px, 0); + +ltr() { + transform: translate(8px, 0); + } + +rtl() { + transform: translate(-8px, 0); + } } > *:not(.header--search-form) { opacity: 0; @@ -70,29 +75,38 @@ search-sprite() { flex-grow: 1; height: $symbol-height; margin: 0 5px 0 15px; + + +rtl() { + margin: 0 15px 0 5px; + } } .header--search-content { display: flex; justify-content: space-between; min-width: 300px; - margin-left: - $symbol-height - 10; position: relative; - transform: translate(calc(100% - 34px), 0); transition: transform 200ms ease; + +ltr() { + margin-left: - $symbol-height - 10; + transform: translate(calc(100% - 34px), 0); + } + +rtl() { + margin-right: - $symbol-height - 10; + transform: translate(calc(-100% + 34px), 0); + } > * { align-self: center; } - label { - color: $greyscale-dark-grey; - display: none; - font-size: 18px; - left: 48px; - position: absolute; - top: 11px; - z-index: 1; + color: $greyscale-dark-grey; + display: none; + font-size: 18px; + left: 48px; + position: absolute; + top: 11px; + z-index: 1; &.search-empty { display: block; diff --git a/src/media/css/nav--global.styl b/src/media/css/nav--global.styl index de251c5ccc..6b412c2443 100644 --- a/src/media/css/nav--global.styl +++ b/src/media/css/nav--global.styl @@ -225,11 +225,16 @@ desktop-link-active() { height: 40px; opacity: 0; position: fixed; - right: 20px; transition: 200ms opacity ease; width: 40px; z-index: 110; + +ltr() { + right: 20px; + } + +rtl() { + left: 20px; + } &.overlay-close-visible { opacity: 1; }