OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Lift border up to the Field root 

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.
pull/21833/head
J. Ryan Stinnett 2019-03-01 16:45:33 +00:00
parent bfe120fbf4
commit ae5c32d28b
1 changed files with 10 additions and 3 deletions
Show Stats 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,