imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use custom appearance and arrow for select fields

Browse source
This commit is contained in:
J. Ryan Stinnett 2019-01-30 16:40:53 -06:00
parent b093119d30
commit d6f55a508c
2 changed files with 21 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

20
res/css/views/elements/_Field.scss
View file

@ -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 {