Browse Source

Fix input label font-weight transition

master
Eduard Kuzmenko 3 years ago
parent
commit
cdd4a6f96b
  1. 8
      src/scss/partials/_input.scss

8
src/scss/partials/_input.scss

@ -47,7 +47,7 @@
height: 1.5rem; height: 1.5rem;
transform: translate(0, 0); transform: translate(0, 0);
background-color: #fff; background-color: #fff;
transition: .2s transform, .2s padding, .1s opacity; transition: .2s transform, .2s padding, .1s opacity, font-weight 0s .1s;
transform-origin: left center; transform-origin: left center;
pointer-events: none; pointer-events: none;
margin-top: calc((var(--height) - 1.5rem) / 2); // * Center of first line margin-top: calc((var(--height) - 1.5rem) / 2); // * Center of first line
@ -132,7 +132,6 @@
&:focus ~ .arrow-down { &:focus ~ .arrow-down {
margin-top: -4px; margin-top: -4px;
transform: rotate(225deg); transform: rotate(225deg);
-webkit-transform: rotate(225deg);
border-color: $button-primary-background; border-color: $button-primary-background;
} }
@ -141,7 +140,10 @@
font-weight: 500; font-weight: 500;
} }
&:focus ~ label, &:valid ~ label, &:not(:empty) ~ label, &:disabled ~ label { &:focus ~ label,
&:valid ~ label,
&:not(:empty) ~ label,
&:disabled ~ label {
transform: translate(-.25rem, calc(var(--height) / -2 + .125rem)) scale(.75); transform: translate(-.25rem, calc(var(--height) / -2 + .125rem)) scale(.75);
padding: 0 6px; padding: 0 6px;
opacity: 1; opacity: 1;

Loading…
Cancel
Save