d

Author: stopsopa

pages/html/float-label-pattern/floating-label-pattern.css

@@ -5,6 +5,7 @@
   --floating-label-text: #3c4043;
   --floating-label-label: #5f6368;
   --floating-label-bg: #ffffff;
+  --floating-label-font-size: 16px;
   --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -14,15 +15,15 @@
 }
 .floating-label {
   min-height: 58px;
+  margin-bottom: 12px;
 }
 /* things you might want to change ^^^^^ */
 
 .floating-label {
   position: relative;
-  display: grid;
-  grid-template-rows: var(--floating-label-height, 34px) auto;
-  gap: 0;
-  margin-bottom: 12px;
+  /* display: grid; */
+  /* grid-template-rows: var(--floating-label-height, 34px) auto; */
+  /* gap: 0; */
 }
 /* The visual border box */
 .floating-label::after {
@@ -46,14 +47,14 @@
 
 .floating-label input {
   grid-row: 1;
-  width: 100%;
+  /* width: 100%; */
   height: var(--floating-label-height, 34px);
   border: none;
   background: transparent;
   padding: 0 12px;
-  font-size: 16px;
-  color: var(--floating-label-text);
-  outline: none;
+  font-size: var(--floating-label-font-size);
+  /* color: var(--floating-label-text); */
+  /* outline: none; */
   box-sizing: border-box;
   z-index: 2;
   position: relative;
@@ -75,7 +76,7 @@
   left: 7px;
   top: 17px; /* 50% of 34px */
   transform: translateY(-50%);
-  font-size: 16px;
+  font-size: var(--floating-label-font-size);
   color: var(--floating-label-label);
   pointer-events: none;
   transition: all var(--transition);
@@ -102,7 +103,7 @@
   box-shadow: 0 0 0 2px var(--floating-label-error);
 }
 
-.floating-label[data-error] input:is(:not(:placeholder-shown), :focus) + label {
+.floating-label[data-error] input + label {
   color: var(--floating-label-error);
 }
 
@@ -118,8 +119,8 @@
   visibility: hidden;
   opacity: 0;
   transition: opacity var(--transition);
-  line-height: 16px;
-  height: 16px; /* Fixed height for reservation */
+  line-height: var(--floating-label-font-size);
+  height: var(--floating-label-font-size); /* Fixed height for reservation */
   z-index: 1;
 }