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

Lift border up to the Field root

Browse source 
By placing the Field's border on the Field component root instead of the input,
it's easier to wrap it around additional elements that we'll soon stuff inside
the field.
This commit is contained in:
J. Ryan Stinnett 2019-03-01 16:45:33 +00:00
parent bfe120fbf4
commit ae5c32d28b
1 changed files with 10 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,6 +19,9 @@ limitations under the License.
.mx_Field {
position: relative;
margin: 1em 0;
border-radius: 4px;
transition: border-color 0.25s;
border: 1px solid $input-border-color;
}
.mx_Field input,
@ -27,9 +30,10 @@ limitations under the License.
font-weight: normal;
font-family: $font-family;
font-size: 14px;
border: none;
// Even without a border here, we still need this avoid overlapping the rounded
// corners on the field above.
border-radius: 4px;
transition: border-color 0.25s;
border: 1px solid $input-border-color;
padding: 8px 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
@ -55,11 +59,14 @@ limitations under the License.
pointer-events: none;
}
.mx_Field:focus-within {
border-color: $input-focused-border-color;
}
.mx_Field input:focus,
.mx_Field select:focus,
.mx_Field textarea:focus {
outline: 0;
border-color: $input-focused-border-color;
}
.mx_Field input::placeholder,