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

73
res/css/structures/auth/_Login.scss
View file

@ -15,17 +15,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_Login_field {
width: 100%;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
padding: 9px;
margin-bottom: 14px;
}
.mx_Login_submit {
@mixin mx_DialogButton;
width: 100%;
@ -69,74 +58,24 @@ limitations under the License.
color: $warning-color;
font-weight: bold;
text-align: center;
/*
height: 24px;
*/
margin-top: 12px;
margin-bottom: 12px;
}
.mx_Login_type_container {
display: flex;
margin-bottom: 14px;
align-items: center;
color: $authpage-primary-color;
.mx_Field {
margin: 0;
}
}
.mx_Login_type_label {
flex-grow: 1;
line-height: 35px;
}
.mx_Login_type_dropdown {
display: inline-block;
min-width: 170px;
align-self: flex-end;
flex: 1 1 auto;
}
.mx_Login_field_prefix {
height: 38px;
padding: 0px 5px;
line-height: 38px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-right: 0px;
border-radius: 3px 0px 0px 3px;
text-align: center;
}
.mx_Login_field_has_prefix {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.mx_Login_phoneSection {
display:flex;
}
.mx_Login_phoneCountry {
margin-bottom: 14px;
/* To override mx_Login_field_prefix */
text-align: left;
padding: 0px;
background-color: $primary-bg-color;
}
.mx_Login_field_prefix .mx_Dropdown_input {
/* To use prefix border instead of dropdown border */
border: 0;
}
.mx_Login_phoneCountry .mx_Dropdown_option {
/* To match height of mx_Login_field */
height: 38px;
line-height: 38px;
}
.mx_Login_phoneCountry .mx_Dropdown_option img {
margin: 3px;
vertical-align: top;
min-width: 200px;
}

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;
}