RTL: Flip search icons
This commit is contained in:
parent
9a5a8cf107
commit
761c8a1bd4
2 changed files with 11 additions and 6 deletions
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue