Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Merge pull request #2540 from jryans/field-select
Browse files Browse the repository at this point in the history
Use custom appearance and arrow for field selects
  • Loading branch information
ara4n authored Jan 31, 2019
2 parents 3a23423 + 6718ae8 commit 1465db3
Show file tree
Hide file tree
Showing 8 changed files with 33 additions and 104 deletions.
8 changes: 4 additions & 4 deletions res/css/structures/_RoomSubList.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
5 changes: 5 additions & 0 deletions res/css/structures/_TopLeftMenuButton.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion res/css/views/auth/_LanguageSelector.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
11 changes: 0 additions & 11 deletions res/css/views/elements/_Dropdown.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
21 changes: 21 additions & 0 deletions res/css/views/elements/_Field.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,33 @@ 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;
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 {
Expand Down
86 changes: 0 additions & 86 deletions res/img/topleft-chevron.svg

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/structures/TopLeftMenuButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default class TopLeftMenuButton extends React.Component {
resizeMethod="crop"
/>
{ nameElement }
<img className="mx_TopLeftMenuButton_chevron" src={require("../../../res/img/topleft-chevron.svg")} width="11" height="6" />
<span className="mx_TopLeftMenuButton_chevron"></span>
</AccessibleButton>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/elements/Field.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 <div className="mx_Field">
return <div className={`mx_Field mx_Field_${element}`}>
{fieldInput}
<label htmlFor={this.props.id}>{this.props.label}</label>
</div>;
Expand Down

0 comments on commit 1465db3

Please sign in to comment.