diff options
author | Mark Otto <markd.otto@gmail.com> | 2020-10-28 06:45:48 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-10-28 06:45:48 +0300 |
commit | 3e2f9ab237e0e338fbe497213ad2353e59fbee9c (patch) | |
tree | d1f1843ce62f3c5754e46f0df8eceb4d67a9b72d /scss | |
parent | 582f52e9e147c5386d07f241a74a185175cc461d (diff) |
v5: Floating labels (#30449)
* v5: Promote floating labels example to component
- Adds new .form-floating
- Stubs out basics of a docs page
- Removes existing Example
* Update floating labels to support .form-select, make inputs and selects more consistent
- To do this, I made the .form-control and .form-select consistent in min-height vs height
- Removed some unused variables now
- Updated -color to be the -color because I don't know why this was any different before
- Update page to include some examples for layout, validation, and value
- Rewrite styles to not modify padding, but instead transform and opacity
* Streamline and bulletproof some things
- Apply some optimizations from code review
- Removed unecessary properties from the label
- Add some comments for what properties are required
- Move from fixed height for labels to height 100% so we can support textareas
- Improve docs a little bit, add ToC
* Move some values to variables, switch from scaling font-size to scale, update transforms
* Bring over changes from #30966 and add to them to tighten things up
* Delete the now unused example images
* Fix typo
* Allowlist the calc function
* Add transform-origin, update transform values
* Test out autofill fix
* Fix linter issue
* Mention it in the migration guide
* Bump bundlesize
* Add one more variable per review
* Shave .25rem off the height
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_forms.scss | 1 | ||||
-rw-r--r-- | scss/_variables.scss | 11 | ||||
-rw-r--r-- | scss/forms/_floating-labels.scss | 85 | ||||
-rw-r--r-- | scss/forms/_form-select.scss | 2 |
4 files changed, 96 insertions, 3 deletions
diff --git a/scss/_forms.scss b/scss/_forms.scss index 39ba90d672..d2a15a4f2e 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 6fba4d8352..1c0429f9a9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -648,7 +648,7 @@ $input-bg: $white !default; $input-disabled-bg: $gray-200 !default; $input-disabled-border-color: null !default; -$input-color: $gray-700 !default; +$input-color: $body-color !default; $input-border-color: $gray-400 !default; $input-border-width: $input-btn-border-width !default; $input-box-shadow: $box-shadow-inset !default; @@ -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,14 @@ $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: add(3.5rem, $input-height-border) !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: .625rem !default; +$form-floating-label-opacity: .65 !default; +$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default; +$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default; // Form validation diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss new file mode 100644 index 0000000000..b35f1c3bdc --- /dev/null +++ b/scss/forms/_floating-labels.scss @@ -0,0 +1,85 @@ +// stylelint-disable selector-no-vendor-prefix + +.form-floating { + position: relative; + + > .form-control, + > .form-select { + height: $form-floating-height; + padding: $form-floating-padding-y $form-floating-padding-x; + } + + > label { + position: absolute; + top: 0; + left: 0; + height: 100%; // allow textareas + padding: $form-floating-padding-y $form-floating-padding-x; + pointer-events: none; + border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model + transform-origin: 0 0; + @include transition($form-floating-transition); + } + + // stylelint-disable no-duplicate-selectors + > .form-control { + &::placeholder { + color: transparent; + } + + &:focus, + &:not(:placeholder-shown) { + padding-top: $form-floating-input-padding-t; + padding-bottom: $form-floating-input-padding-b; + } + // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped + &:-webkit-autofill { + padding-top: $form-floating-input-padding-t; + padding-bottom: $form-floating-input-padding-b; + } + } + + > .form-select { + padding-top: $form-floating-input-padding-t; + padding-bottom: $form-floating-input-padding-b; + } + + > .form-control:focus, + > .form-control:not(:placeholder-shown), + > .form-select { + ~ label { + opacity: $form-floating-label-opacity; + transform: $form-floating-label-transform; + } + } + // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped + > .form-control:-webkit-autofill { + ~ label { + opacity: $form-floating-label-opacity; + transform: $form-floating-label-transform; + } + } + // stylelint-enable no-duplicate-selectors +} + + +// +// Fallback for classic Edge +// + +@supports (-ms-ime-align: auto) { + .form-floating { + display: flex; + flex-direction: column-reverse; + } + .form-floating > label { + position: static; + padding: 0; + margin-bottom: calc(#{$form-floating-padding-y} / 2); // stylelint-disable-line function-disallowed-list + border: 0; + @include transition(none); + } + .form-floating > .form-control::-ms-input-placeholder { + color: $input-placeholder-color; + } +} diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index e4cab0878a..5a684baa5c 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -6,7 +6,7 @@ .form-select { display: block; width: 100%; - height: $form-select-height; + min-height: $form-select-height; padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x; font-family: $form-select-font-family; @include font-size($form-select-font-size); |