diff options
Diffstat (limited to 'site/docs/4.3/examples/floating-labels')
-rw-r--r-- | site/docs/4.3/examples/floating-labels/floating-labels.css | 100 | ||||
-rw-r--r-- | site/docs/4.3/examples/floating-labels/index.html | 32 |
2 files changed, 0 insertions, 132 deletions
diff --git a/site/docs/4.3/examples/floating-labels/floating-labels.css b/site/docs/4.3/examples/floating-labels/floating-labels.css deleted file mode 100644 index 295a7e695e..0000000000 --- a/site/docs/4.3/examples/floating-labels/floating-labels.css +++ /dev/null @@ -1,100 +0,0 @@ -html, -body { - height: 100%; -} - -body { - display: flex; - align-items: center; - padding-top: 40px; - padding-bottom: 40px; - background-color: #f5f5f5; -} - -.form-signin { - width: 100%; - max-width: 420px; - padding: 15px; - margin: auto; -} - -.form-label-group { - position: relative; - margin-bottom: 1rem; -} - -.form-label-group > input, -.form-label-group > label { - height: 3.125rem; - padding: .75rem; -} - -.form-label-group > label { - position: absolute; - top: 0; - left: 0; - display: block; - width: 100%; - margin-bottom: 0; /* Override default `<label>` margin */ - line-height: 1.5; - color: #495057; - pointer-events: none; - cursor: text; /* Match the input under the label */ - border: 1px solid transparent; - border-radius: .25rem; - transition: all .1s ease-in-out; -} - -.form-label-group input::-webkit-input-placeholder { - color: transparent; -} - -.form-label-group input:-ms-input-placeholder { - color: transparent; -} - -.form-label-group input::-ms-input-placeholder { - color: transparent; -} - -.form-label-group input::-moz-placeholder { - color: transparent; -} - -.form-label-group input::placeholder { - color: transparent; -} - -.form-label-group input:not(:placeholder-shown) { - padding-top: 1.25rem; - padding-bottom: .25rem; -} - -.form-label-group input:not(:placeholder-shown) ~ label { - padding-top: .25rem; - padding-bottom: .25rem; - font-size: 12px; - color: #777; -} - -/* Fallback for Edge --------------------------------------------------- */ -@supports (-ms-ime-align: auto) { - .form-label-group > label { - display: none; - } - .form-label-group input::-ms-input-placeholder { - color: #777; - } -} - -/* Fallback for IE --------------------------------------------------- */ -@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - .form-label-group > label { - display: none; - } - .form-label-group input:-ms-input-placeholder { - color: #777; - } -} diff --git a/site/docs/4.3/examples/floating-labels/index.html b/site/docs/4.3/examples/floating-labels/index.html deleted file mode 100644 index d837ccaf1c..0000000000 --- a/site/docs/4.3/examples/floating-labels/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -layout: examples -title: Floating labels example -extra_css: "floating-labels.css" -include_js: false ---- - -<form class="form-signin"> - <div class="text-center mb-4"> - <img class="mb-4" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"> - <h1 class="h3 mb-3 font-weight-normal">Floating labels</h1> - <p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p> - </div> - - <div class="form-label-group"> - <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> - <label for="inputEmail">Email address</label> - </div> - - <div class="form-label-group"> - <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> - <label for="inputPassword">Password</label> - </div> - - <div class="checkbox mb-3"> - <label> - <input type="checkbox" value="remember-me"> Remember me - </label> - </div> - <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> - <p class="mt-5 mb-3 text-muted text-center">© 2017-{{ site.time | date: "%Y" }}</p> -</form> |