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

Add prefix support to Fields

Browse source 
This allows Fields to have an optional prefix component which is placed inside
the border of the Field and to the left of the input. Since this label animation
would be complex to get right for this case, it is instead fixed to the top left
if there is a prefix component.

This canonical example of this today would be a phone number field which
includes a country dropdown.
This commit is contained in:
J. Ryan Stinnett 2019-03-05 15:13:12 +00:00
parent ae5c32d28b
commit 26b2aa174b
2 changed files with 27 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,7 @@ 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;
@ -24,6 +25,10 @@ limitations under the License.
border: 1px solid $input-border-color;
}
.mx_Field_prefix {
border-right: 1px solid $input-border-color;
}
.mx_Field input,
.mx_Field select,
.mx_Field textarea {
@ -106,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,