PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6783 from matrix-org/madlittlemods/12876-optimize-input-field-transition

Browse source 
Optimize input label transition on focus
This commit is contained in:
Travis Ralston 2021-09-13 20:57:41 -06:00 committed by GitHub
commit 298fb49017
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -98,14 +98,14 @@ limitations under the License.
transition: transition:
font-size 0.25s ease-out 0.1s, font-size 0.25s ease-out 0.1s,
color 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s, transform 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s; background-color 0.25s ease-out 0.1s;
color: $primary-content; color: $primary-content;
background-color: transparent; background-color: transparent;
font-size: $font-14px; font-size: $font-14px;
transform: translateY(0);
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 0px;
margin: 7px 8px; margin: 7px 8px;
padding: 2px; padding: 2px;
pointer-events: none; // Allow clicks to fall through to the input pointer-events: none; // Allow clicks to fall through to the input
@ -124,10 +124,10 @@ limitations under the License.
transition: transition:
font-size 0.25s ease-out 0s, font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s, color 0.25s ease-out 0s,
top 0.25s ease-out 0s, transform 0.25s ease-out 0s,
background-color 0.25s ease-out 0s; background-color 0.25s ease-out 0s;
font-size: $font-10px; font-size: $font-10px;
top: -13px; transform: translateY(-13px);
padding: 0 2px; padding: 0 2px;
background-color: $field-focused-label-bg-color; background-color: $field-focused-label-bg-color;
pointer-events: initial; pointer-events: initial;