diff --git a/res/css/views/auth/_LanguageSelector.scss b/res/css/views/auth/_LanguageSelector.scss index e73dd4ac64..be40c9e6cd 100644 --- a/res/css/views/auth/_LanguageSelector.scss +++ b/res/css/views/auth/_LanguageSelector.scss @@ -25,22 +25,6 @@ limitations under the License. color: $authpage-lang-color; } -/* TODO: Consider using this new arrow for all dropdowns */ -.mx_Auth_language .mx_Dropdown_arrow { - width: 10px; - height: 6px; - border: none; - right: 6px; -} - .mx_Auth_language .mx_Dropdown_arrow::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - mask: url('$(res)/img/feather-icons/dropdown-arrow.svg'); - mask-repeat: no-repeat; background: $authpage-lang-color; } diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss index 98b99ffe57..a6e7f1d0d2 100644 --- a/res/css/views/elements/_Dropdown.scss +++ b/res/css/views/elements/_Dropdown.scss @@ -23,6 +23,8 @@ limitations under the License. } .mx_Dropdown_input { + display: flex; + align-items: center; position: relative; border-radius: 3px; border: 1px solid $strong-input-border-color; @@ -41,19 +43,23 @@ limitations under the License. } .mx_Dropdown_arrow { - border-color: $primary-fg-color transparent transparent; - border-style: solid; - border-width: 5px 5px 0; display: block; - height: 0; - position: absolute; - right: 10px; - top: 14px; - width: 0 + position: relative; + width: 10px; + height: 6px; + padding-right: 8px; } -.mx_Dropdown.left_aligned .mx_Dropdown_arrow { - left: 10px; +.mx_Dropdown_arrow::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask: url('$(res)/img/feather-icons/dropdown-arrow.svg'); + mask-repeat: no-repeat; + background: $primary-fg-color; } .mx_Dropdown_input > .mx_Dropdown_option { @@ -62,10 +68,6 @@ limitations under the License. white-space: nowrap; } -.mx_Dropdown.left_aligned .mx_Dropdown_input > .mx_Dropdown_option { - padding-left: 25px; -} - .mx_Dropdown_option { height: 35px; line-height: 35px;