mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 09:56:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Floating label was moving on the textareas when the textareas grow

Browse source
This commit is contained in:
Yohn 2025-01-19 20:56:22 -05:00
parent b4e4b87527
commit 6054ddcb14
1 changed files with 11 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

23
scss/forms/_floating.scss
View file

@ -2,7 +2,7 @@
@use "../settings" as *; @use "../settings" as *;
@if map.get($modules, "forms/floating") { @if map.get($modules, "forms/floating") {
// and $enable-classes {
$transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); $transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
#{$parent-selector} section[role="form"] { #{$parent-selector} section[role="form"] {
@ -33,17 +33,6 @@
transition: 0.3s ease; transition: 0.3s ease;
} }
// Used this before I tried: >select:has(option:checked:not([disabled]))+label
//> select + label {
// position: absolute;
// top: -5%;
// left: 0.8rem;
// padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
// transform: translateY(-50%) scale(0.85);
// background: var(#{$css-var-prefix}form-element-background-color);
// cursor: text;
//}
> input:not(:placeholder-shown) + label, > input:not(:placeholder-shown) + label,
> input:focus + label, > input:focus + label,
> textarea:not(:placeholder-shown) + label, > textarea:not(:placeholder-shown) + label,
@ -60,6 +49,16 @@
transition: all $transition-fast; transition: all $transition-fast;
} }
> textarea + label {
top: 1rem;
transform: translateY(0);
}
> textarea:not(:placeholder-shown) + label,
> textarea:focus + label {
top: 0;
transform: translateY(-50%) scale(0.8);
}
@if map.get($modules, "forms/validation") { @if map.get($modules, "forms/validation") {
> input:user-invalid:not(:placeholder-shown) + label, > input:user-invalid:not(:placeholder-shown) + label,
> textarea:user-invalid:not(:placeholder-shown) + label { > textarea:user-invalid:not(:placeholder-shown) + label {