Merge pull request #48 from Yohn/textarea-floating-labels

Textarea floating labels
Yohn · Jan 20, 2025 · 2ed6335 · 2ed6335
2 parents b4e4b87 + 6054ddc
commit 2ed6335
Showing 1 changed file with 11 additions and 12 deletions.
diff --git 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 {