From 761c8a1bd47c751598b4cce663584e1f4592205c Mon Sep 17 00:00:00 2001 From: Abe Jellinek Date: Wed, 10 Jan 2024 11:34:36 -0500 Subject: [PATCH] RTL: Flip search icons --- scss/components/_search.scss | 11 ++++++++--- scss/elements/_quickSearchTextbox.scss | 6 +++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/scss/components/_search.scss b/scss/components/_search.scss index b094fad0ca..8f8a2ed03c 100644 --- a/scss/components/_search.scss +++ b/scss/components/_search.scss @@ -65,8 +65,13 @@ search-textbox { :is(search-textbox)::part(search-icon) { @include svgicon-menu("magnifier", "universal", "16"); color: var(--fill-secondary); - // inline-end: 2px padding + 8px dropmarker width + 4px padding + 6px padding - padding-inline: 6px 4px; - padding-block: 6px; + // right: 2px padding + 8px dropmarker width + 4px padding + 6px padding + // Use explicit left/right padding here because this element is flipped in RTL (see below) + padding: 6px 4px 6px 6px; margin: 0; } + +:is(search-textbox):-moz-locale-dir(rtl)::part(search-sign), +:is(search-textbox):-moz-locale-dir(rtl)::part(search-icon) { + transform: scaleX(-1); +} diff --git a/scss/elements/_quickSearchTextbox.scss b/scss/elements/_quickSearchTextbox.scss index f2b6358eed..30421babf3 100644 --- a/scss/elements/_quickSearchTextbox.scss +++ b/scss/elements/_quickSearchTextbox.scss @@ -14,9 +14,9 @@ quick-search-textbox { :is(search-textbox)::part(search-icon) { @include svgicon-menu("magnifier", "universal", "16"); color: var(--fill-secondary); - // inline-end: 2px padding + 8px dropmarker width + 4px padding + 6px padding - padding-inline: 6px 14px; - padding-block: 6px; + // right: 2px padding + 8px dropmarker width + 4px padding + 6px padding + // Use explicit left/right padding here because this element is flipped in RTL (see _search.scss) + padding: 6px 14px 6px 6px; margin: 0; } }