From d183a80949822395e930643383c127cea3701969 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Mar 2020 02:56:12 +0200 Subject: [PATCH 01/15] v5: Promote floating labels example to component - Adds new .form-floating - Stubs out basics of a docs page - Removes existing Example --- scss/_forms.scss | 1 + scss/_variables.scss | 10 +- scss/forms/_floating-labels.scss | 58 ++++++++++ .../floating-labels/floating-labels.css | 101 ------------------ .../5.0/examples/floating-labels/index.html | 35 ------ .../content/docs/5.0/forms/floating-labels.md | 23 ++++ site/content/docs/5.0/forms/overview.md | 2 + site/data/examples.yml | 2 - site/data/sidebar.yml | 1 + 9 files changed, 94 insertions(+), 139 deletions(-) create mode 100644 scss/forms/_floating-labels.scss delete mode 100644 site/content/docs/5.0/examples/floating-labels/floating-labels.css delete mode 100644 site/content/docs/5.0/examples/floating-labels/index.html create mode 100644 site/content/docs/5.0/forms/floating-labels.md diff --git a/scss/_forms.scss b/scss/_forms.scss index 39ba90d672c3..d2a15a4f2edb 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -5,5 +5,6 @@ @import "forms/form-check"; @import "forms/form-file"; @import "forms/form-range"; +@import "forms/floating-labels"; @import "forms/input-group"; @import "forms/validation"; diff --git a/scss/_variables.scss b/scss/_variables.scss index 6fba4d835262..a3300095c056 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -733,7 +733,6 @@ $input-group-addon-color: $input-color !default; $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; - $form-select-padding-y: $input-padding-y !default; $form-select-padding-x: $input-padding-x !default; $form-select-font-family: $input-font-family !default; @@ -824,6 +823,15 @@ $form-file-padding-x-lg: $input-padding-x-lg !default; $form-file-font-size-lg: $input-font-size-lg !default; $form-file-height-lg: $input-height-lg !default; +$form-floating-height: 3.5rem !default; +$form-floating-padding-x: $input-padding-x !default; +$form-floating-padding-y: 1rem !default; +$form-floating-input-padding-t: 1.625rem !default; +$form-floating-input-padding-b: .375rem !default; +$form-floating-label-padding-y: $form-floating-input-padding-b !default; +$form-floating-label-font-size: .85rem !default; +$form-floating-label-color: $gray-500 !default; + // Form validation diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss new file mode 100644 index 000000000000..418b37bf6ad7 --- /dev/null +++ b/scss/forms/_floating-labels.scss @@ -0,0 +1,58 @@ +// stylelint-disable selector-no-vendor-prefix + +.form-floating { + position: relative; + + > label, + > .form-control { + height: $form-floating-height; + padding: $form-floating-padding-y $form-floating-padding-x; + } + + > label { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + margin-bottom: 0; // Override default `