Test with @tkrotoff/bootstrap-floating-label

Author: tkrotoff

example/index.html

@@ -150,6 +150,108 @@ <h3 id="input-lg">lg</h3>
         <div class="spinner-border"></div>
       </div>
 
+      <h2 id="input-label">input + label</h2>
+
+      <div class="form-group">
+        <label for="input-label-1">Label</label>
+        <input id="input-label-1" class="form-control is-valid" placeholder="is-valid" />
+      </div>
+
+      <h3>sm</h3>
+
+      <div class="form-group">
+        <label for="input-label-sm">Label</label>
+        <div class="is-loading">
+          <input
+            id="input-label-sm"
+            class="form-control"
+            placeholder="spinner-border spinner-border-sm"
+          />
+          <div class="spinner-border spinner-border-sm"></div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="input-label-sm-is-valid">Label</label>
+        <div class="is-loading">
+          <input
+            id="input-label-sm-is-valid"
+            class="form-control is-valid"
+            placeholder="is-valid spinner-border spinner-border-sm"
+          />
+          <div class="spinner-border spinner-border-sm-is-valid"></div>
+        </div>
+      </div>
+
+      <h3>lg</h3>
+
+      <div class="form-group">
+        <label for="input-label-lg">Label</label>
+        <div class="is-loading">
+          <input id="input-label-lg" class="form-control" placeholder="spinner-border" />
+          <div class="spinner-border"></div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="input-label-lg-is-valid">Label</label>
+        <div class="is-loading">
+          <input
+            id="input-label-lg-is-valid"
+            class="form-control is-valid"
+            placeholder="is-valid spinner-border"
+          />
+          <div class="spinner-border"></div>
+        </div>
+      </div>
+
+      <h2 id="input-floating-label">input + @tkrotoff/bootstrap-floating-label</h2>
+
+      <div class="form-group floating-label">
+        <input id="input-floating-label-1" class="form-control is-valid" placeholder="is-valid" />
+        <label for="input-floating-label-1">Label</label>
+      </div>
+
+      <h3>sm</h3>
+
+      <div class="form-group floating-label is-loading">
+        <input
+          id="input-floating-label-sm"
+          class="form-control"
+          placeholder="spinner-border spinner-border-sm"
+        />
+        <label for="input-floating-label-sm">Label</label>
+        <div class="spinner-border spinner-border-sm"></div>
+      </div>
+
+      <div class="form-group floating-label is-loading">
+        <input
+          id="input-floating-label-sm-is-valid"
+          class="form-control is-valid"
+          placeholder="is-valid spinner-border spinner-border-sm"
+        />
+        <label for="input-floating-label-sm-is-valid">Label</label>
+        <div class="spinner-border spinner-border-sm"></div>
+      </div>
+
+      <h3>lg</h3>
+
+      <div class="form-group floating-label is-loading">
+        <input id="input-floating-label-lg" class="form-control" placeholder="spinner-border" />
+        <label for="input-floating-label-lg">Label</label>
+        <div class="spinner-border"></div>
+      </div>
+
+      <div class="form-group floating-label is-loading">
+        <input
+          id="input-floating-label-lg-is-valid"
+          class="form-control is-valid"
+          placeholder="is-valid spinner-border"
+        />
+        <label for="input-floating-label-lg-is-valid">Label</label>
+        <div class="spinner-border"></div>
+      </div>
+
       <h2 id="spinner-grow">spinner-grow</h2>
 
       <h3 id="spinner-grow-sm">sm</h3>

example/index.scss

@@ -1,4 +1,5 @@
 @import '~bootstrap/scss/bootstrap';
+@import '~@tkrotoff/bootstrap-floating-label/src/bootstrap-floating-label';
 //@import '~tocbot/src/scss/tocbot';
 
 @import '../src/bootstrap-input-spinner';

package-lock.json

@@ -37,6 +37,7 @@
     "bootstrap": ">=4.4"
   },
   "devDependencies": {
+    "@tkrotoff/bootstrap-floating-label": "^0.7.0",
     "@types/stylelint": "^9.10.1",
     "bootstrap": "^4.6.0",
     "husky": "^4.3.8",