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

Merge pull request #2749 from jryans/auth-field

Browse source 
Use Field component in auth flows
This commit is contained in:
J. Ryan Stinnett 2019-03-06 11:18:24 +00:00 • committed by GitHub
commit 8bf5e1d19f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 212 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

6
res/css/views/auth/_AuthBody.scss
View file

@ -78,16 +78,16 @@ limitations under the License.
margin-bottom: 10px;
}
.mx_AuthBody_fieldRow > * {
.mx_AuthBody_fieldRow > .mx_Field {
margin: 0 5px;
flex: 1;
}
.mx_AuthBody_fieldRow > *:first-child {
.mx_AuthBody_fieldRow > .mx_Field:first-child {
margin-left: 0;
}
.mx_AuthBody_fieldRow > *:last-child {
.mx_AuthBody_fieldRow > .mx_Field:last-child {
margin-right: 0;
}

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

@ -17,8 +17,16 @@ limitations under the License.
/* TODO: Consider unifying with general input styles in _light.scss */
.mx_Field {
display: flex;
position: relative;
margin: 1em 0;
border-radius: 4px;
transition: border-color 0.25s;
border: 1px solid $input-border-color;
}
.mx_Field_prefix {
border-right: 1px solid $input-border-color;
}
.mx_Field input,
@ -27,9 +35,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 +64,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,
@ -99,7 +111,8 @@ limitations under the License.
.mx_Field input:not(:placeholder-shown) + label,
.mx_Field textarea:focus + label,
.mx_Field textarea:not(:placeholder-shown) + label,
.mx_Field select + label /* Always show a select's label on top to not collide with the value */ {
.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
.mx_Field_labelAlwaysTopLeft label {
transition:
font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s,
@ -127,3 +140,14 @@ limitations under the License.
background-color: $field-focused-label-bg-color;
color: $greyed-fg-color;
}
// Customise other components when placed inside a Field
.mx_Field .mx_Dropdown_input {
border: initial;
border-radius: initial;
}
.mx_Field .mx_CountryDropdown {
width: 67px;
}