From de46e6aa0d9695b5f41d14c3e4a1afa73816ea57 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 30 Jan 2019 15:44:10 -0600 Subject: [PATCH 1/4] Use dropdown-arrow for all toggle arrows --- res/css/structures/_RoomSubList.scss | 8 +- res/css/structures/_TopLeftMenuButton.scss | 5 ++ res/img/topleft-chevron.svg | 86 ------------------- .../structures/TopLeftMenuButton.js | 2 +- 4 files changed, 10 insertions(+), 91 deletions(-) delete mode 100644 res/img/topleft-chevron.svg diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index e403057cd3..fcf6f41c80 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -99,13 +99,13 @@ limitations under the License. .mx_RoomSubList_chevron { pointer-events: none; - background-image: url('$(res)/img/topleft-chevron.svg'); - background-repeat: no-repeat; + mask: url('$(res)/img/feather-icons/dropdown-arrow.svg'); + mask-repeat: no-repeat; transition: transform 0.2s ease-in; width: 10px; - height: 10px; - background-position: center; + height: 6px; margin-left: 2px; + background-color: $roomsublist-label-fg-color; } .mx_RoomSubList_chevronDown { diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss index 43a1e27ee4..e72f1f16da 100644 --- a/res/css/structures/_TopLeftMenuButton.scss +++ b/res/css/structures/_TopLeftMenuButton.scss @@ -41,4 +41,9 @@ limitations under the License. .mx_TopLeftMenuButton_chevron { margin: 0 7px; + mask: url('$(res)/img/feather-icons/dropdown-arrow.svg'); + mask-repeat: no-repeat; + width: 10px; + height: 6px; + background-color: $roomsublist-label-fg-color; } diff --git a/res/img/topleft-chevron.svg b/res/img/topleft-chevron.svg deleted file mode 100644 index 1cfeaf6352..0000000000 --- a/res/img/topleft-chevron.svg +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - image/svg+xml - - dropdown - - - - - - dropdown - Created with Sketch. - - - - - - - - - - - - diff --git a/src/components/structures/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js index 601fb2e654..4e3f609c07 100644 --- a/src/components/structures/TopLeftMenuButton.js +++ b/src/components/structures/TopLeftMenuButton.js @@ -97,7 +97,7 @@ export default class TopLeftMenuButton extends React.Component { resizeMethod="crop" /> { nameElement } - + ); } From b093119d303849e3c0c2278038cba7825a104788 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 30 Jan 2019 15:48:08 -0600 Subject: [PATCH 2/4] Move dropdown arrow to primary element --- res/css/views/auth/_LanguageSelector.scss | 2 +- res/css/views/elements/_Dropdown.scss | 11 ----------- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/res/css/views/auth/_LanguageSelector.scss b/res/css/views/auth/_LanguageSelector.scss index be40c9e6cd..89232ab8af 100644 --- a/res/css/views/auth/_LanguageSelector.scss +++ b/res/css/views/auth/_LanguageSelector.scss @@ -25,6 +25,6 @@ limitations under the License. color: $authpage-lang-color; } -.mx_Auth_language .mx_Dropdown_arrow::before { +.mx_Auth_language .mx_Dropdown_arrow { background: $authpage-lang-color; } diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss index 9d4fb5c4a9..f83a754810 100644 --- a/res/css/views/elements/_Dropdown.scss +++ b/res/css/views/elements/_Dropdown.scss @@ -42,20 +42,9 @@ limitations under the License. } .mx_Dropdown_arrow { - display: block; - position: relative; width: 10px; height: 6px; padding-right: 8px; -} - -.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; From d6f55a508cf8bc25636e506ae2b55f5ab67ba98e Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 30 Jan 2019 16:40:53 -0600 Subject: [PATCH 3/4] Use custom appearance and arrow for select fields --- res/css/views/elements/_Field.scss | 20 ++++++++++++++++++++ src/components/views/elements/Field.js | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index d2877ca741..eca620376d 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -32,6 +32,26 @@ limitations under the License. padding: 8px 9px; } +.mx_Field select { + -moz-appearance: none; + -webkit-appearance: none; +} + +// Can't add pseudo-elements to a select directly, so we use its parent. +.mx_Field_select::before { + content: ""; + position: absolute; + top: 15px; + right: 10px; + width: 10px; + height: 6px; + mask: url('$(res)/img/feather-icons/dropdown-arrow.svg'); + mask-repeat: no-repeat; + background: $primary-fg-color; + z-index: 1; + pointer-events: none; +} + .mx_Field input:focus, .mx_Field select:focus, .mx_Field textarea:focus { diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js index 774ec1db88..55d1f42b55 100644 --- a/src/components/views/elements/Field.js +++ b/src/components/views/elements/Field.js @@ -60,7 +60,7 @@ export default class Field extends React.PureComponent { const element = this.props.element || "input"; const fieldInput = React.createElement(element, extraProps, this.props.children); - return
+ return
{fieldInput}
; From 6718ae8b7c3bfaadca17b359efd3081f49cd29c3 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 30 Jan 2019 17:52:18 -0600 Subject: [PATCH 4/4] Set standard font size for fields --- res/css/views/elements/_Field.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index eca620376d..c6657b23ff 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -26,6 +26,7 @@ limitations under the License. .mx_Field textarea { font-weight: normal; font-family: $font-family; + font-size: 14px; border-radius: 4px; transition: border-color 0.25s; border: 1px solid $input-border-color;