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

Add a form field component for the redesign

Browse source 
The label moves into the border on focus and after being filled. A valid color
is applied to the label and input border. Other states like invalid can be added
later as needed.

Adapted from @ara4n's experiment into a React component with a CSS only
approach.
This commit is contained in:
J. Ryan Stinnett 2019-01-19 22:11:20 -06:00
parent 7c9509ceb8
commit efd5405267
5 changed files with 137 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
res/themes/dharma/css/_dharma.scss
View file

@ -71,6 +71,9 @@ $input-darker-bg-color: rgba(193, 201, 214, 0.29);
$input-darker-fg-color: #9fa9ba;
$input-lighter-bg-color: #f2f5f8;
$input-lighter-fg-color: $input-darker-fg-color;
$input-valid-border-color: #7ac9a1;
$field-focused-label-bg-color: #ffffff;
$button-bg-color: #7ac9a1;
$button-fg-color: white;
@ -198,8 +201,8 @@ $memberstatus-placeholder-color: $roomtile-name-color;
.mx_MatrixChat {
:not(.mx_textinput) > input[type=text],
:not(.mx_textinput) > input[type=search],
:not(.mx_textinput):not(.mx_Field) > input[type=text],
:not(.mx_textinput):not(.mx_Field) > input[type=search],
.mx_textinput {
display: block;
margin: 9px;