diff --git a/scss/forms/_floating.scss b/scss/forms/_floating.scss index 69333f891..c5109f7b6 100644 --- a/scss/forms/_floating.scss +++ b/scss/forms/_floating.scss @@ -2,7 +2,7 @@ @use "../settings" as *; @if map.get($modules, "forms/floating") { - // and $enable-classes { + $transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); #{$parent-selector} section[role="form"] { @@ -33,17 +33,6 @@ 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:focus + label, > textarea:not(:placeholder-shown) + label, @@ -60,6 +49,16 @@ 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") { > input:user-invalid:not(:placeholder-shown) + label, > textarea:user-invalid:not(:placeholder-shown) + label {