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/forms | |
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/forms')
-rw-r--r-- | scss/forms/_floating-labels.scss | 85 | ||||
-rw-r--r-- | scss/forms/_form-select.scss | 2 |
2 files changed, 86 insertions, 1 deletions
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); |