From 097a3e94551c94739aa6b0c9acfa19c165dd0aa7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 15 Sep 2020 22:20:09 -0700 Subject: Add new .form-control-with-icons --- scss/_variables.scss | 9 ++- scss/forms/_form-control.scss | 54 ++++++++++++++++++ site/content/docs/5.0/forms/file.md | 85 +++++++++++++++++++++++++++++ site/content/docs/5.0/forms/form-control.md | 64 ++++++++++++++++++++++ site/content/docs/5.0/forms/select.md | 80 +++++++++++++++++++++++++++ 5 files changed, 289 insertions(+), 3 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index bdf2d62a4a..e6082f4a01 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -659,12 +659,15 @@ $input-height-inner: add($input-line-height * 1em, $input-pad $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default; $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default; -$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default; -$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default; -$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default; +$input-height: add($input-font-size * $line-height-base, add($input-padding-y * 2, $input-height-border, false)) !default; +$input-height-sm: add($input-font-size-sm * $line-height-base, add($input-padding-y-sm * 2, $input-height-border, false)) !default; +$input-height-lg: add($input-font-size-lg * $line-height-base, add($input-padding-y-lg * 2, $input-height-border, false)) !default; $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$input-with-icon-width: $input-height !default; +$input-with-icon-width-sm: $input-height-sm !default; +$input-with-icon-width-lg: $input-height-lg !default; $form-check-input-width: 1em !default; $form-check-min-height: $font-size-base * $line-height-base !default; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 6686ecfb80..6c92e1a818 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -114,3 +114,57 @@ .form-control-color::-webkit-color-swatch { @include border-radius($input-border-radius); } + + +// With icons + +.form-control-with-icon { + position: relative; + + .form-control, + .form-select, + .form-file-text { + padding-left: $input-with-icon-width; + } + + .form-control-icon { + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + width: $input-with-icon-width; + color: $input-placeholder-color; + } + + .form-control-sm, + .form-select-sm, + .form-file-sm .form-file-text { + padding-left: $input-with-icon-width-sm; + } + + .form-control-sm, + .form-select-sm, + .form-file-sm { + + .form-control-icon { + width: $input-with-icon-width-sm; + } + } + + .form-control-lg, + .form-select-lg, + .form-file-lg .form-file-text { + padding-left: $input-with-icon-width-lg; + } + + .form-control-lg, + .form-select-lg, + .form-file-lg { + + .form-control-icon { + width: $input-with-icon-width-lg; + } + } +} diff --git a/site/content/docs/5.0/forms/file.md b/site/content/docs/5.0/forms/file.md index 466e7b0950..7d04aeea20 100644 --- a/site/content/docs/5.0/forms/file.md +++ b/site/content/docs/5.0/forms/file.md @@ -71,3 +71,88 @@ You may also choose from small and large file inputs to match our similarly size {{< /example >}} + +## With icons + +Like our textual `.form-control`, you can overlay icons on `.form-file`s. See the [form control with icon docs]({{< docsref "/forms/form-control#with-icons" >}}) for more details. + +We've also customized the file input's text here to match our icon. + +{{< example >}} +
+
+ + +
+
+ + + + +
+
+{{< /example >}} + +### Spinners + +You can also place any of Bootstrap's [spinners]({{< docsref "/components/spinners" >}}) within the `.form-control-icon`. + +{{< example >}} +
+
+ + +
+
+ +
+
+{{< /example >}} + +### Sizing + +Add `.form-file-sm` or `.form-file-lg` to your `.form-file` and the `.form-control-icon` will automatically resize. However, the sizing of the icons themselves is up to you. + +{{< example >}} +
+
+ + +
+
+ + + + +
+
+{{< /example >}} + +{{< example >}} +
+
+ + +
+
+ + + + +
+
+{{< /example >}} diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md index 3f10138e99..98375e301e 100644 --- a/site/content/docs/5.0/forms/form-control.md +++ b/site/content/docs/5.0/forms/form-control.md @@ -96,3 +96,67 @@ Learn more about [support for datalist elements](https://caniuse.com/#feat=datal {{< /example >}} + +## With icons + +Like our textual `.form-control`, you can overlay icons on `.form-select`s. See the [form control with icon docs]({{< docsref "/forms/form-control#with-icons" >}}) for more details. + +{{< example >}} + +
+ +
+ + + +
+
+{{< /example >}} + +### Spinners + +You can also place any of Bootstrap's [spinners]({{< docsref "/components/spinners" >}}) within the `.form-control-icon`. + +{{< example >}} + +
+ +
+ +
+
+{{< /example >}} + +### Sizing + +Add `.form-select-sm` or `.form-select-lg` to your `.form-select` and the `.form-control-icon` will automatically resize. However, the sizing of the icons themselves is up to you. + +{{< example >}} + +
+ +
+ + + +
+
+{{< /example >}} + +{{< example >}} + +
+ +
+ + + +
+
+{{< /example >}} -- cgit v1.2.3