From aaf03bdc9e3cfa0d625f9758ad059c0db9fe2abe Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 12 Jul 2019 16:52:33 -0500 Subject: v5: Forms update (#28450) * Initial spike of consolidated form checks * Stub out forms rearrangement - Prepping to drop non-custom file and range inputs - Prepping to merge custom and native checks and radios (with switches) - Prepping to merge custom select with form select - Moving docs arround so forms has it's own area given volume of CSS * Move input group Sass file to forms subdir * Start to split and move the docs around * Simpler imports * Copyediting * delete overview file * Remove commented out code * remove the custom-forms import * rewrite flex-check as form-check, replace all custom properties * Remove old forms doc * stub out new subpage link section * update migration guide * Update nav, forms overview in page nav, and descriptions * fix check bg position * fix margin-top calculation * rename .custom-select to .form-select * Update validation styles for new checks * add some vertical margin, fix inline checks * fix docs examples * better way to do this contents stuff, redo the toc while i'm at it * page restyle for docs while here * un-callout that, edit text * redo padding on toc * fix toc * start to cleanup checks docs * Rewrite Markdown tables into HTML * Redesign tables, redo their docs * Replace Open Iconic icons with custom Bootstrap icons * Redesign the docs navbar, add a subheader, redo the sidebar * Redesign docs homepage a bit * Simplify table style overrides for docs tables * Simplify docs typography for page titles and reading line length * Stub out icons page * Part of sidebar update, remove migration from nav.yml * Move toc CSS to separate partial * Change appearance of overview page * fix sidebar arrow direction * Add footer to docs layout * Update descriptions * Drop the .form-group class for margin utilities * Remove lingering form-group-margin-bottom var * improve footer spacing * add headings to range page * uncomment form range css * Rename .custom-range to .form-range * Drop unused docs var * Uncomment the comment * Remove unused variable * Fix radio image sizing * Reboot update: reset horizontal ul and ol padding * de-dupe IDs * tweak toc styles * nvm, fix dropdown versions stuff * remove sidebar nav toggle for now * broken html * fix more broken html, move css * scss linting * comment out broken helper docs * scope styles * scope styles * Fixes #25540 and fixes #26407 for v5 only * Update sidebar once more * Match new sidenav order * fix syntax error * Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696 * rename back * fix size and alignment * rename that back too --- scss/_custom-forms.scss | 514 -------- scss/_forms.scss | 343 +---- scss/_input-group.scss | 188 --- scss/_reboot.scss | 6 + scss/_tables.scss | 8 +- scss/_variables.scss | 260 ++-- scss/bootstrap.scss | 2 - scss/forms/_form-check.scss | 116 ++ scss/forms/_form-control.scss | 115 ++ scss/forms/_form-file.scss | 72 ++ scss/forms/_form-range.scss | 142 +++ scss/forms/_form-select.scss | 76 ++ scss/forms/_input-group.scss | 188 +++ scss/forms/_labels.scss | 27 + scss/forms/_layout.scss | 101 ++ scss/forms/_validation.scss | 10 + scss/mixins/_forms.scss | 55 +- site/content/docs/4.3/components/alerts.md | 65 +- site/content/docs/4.3/components/buttons.md | 30 +- site/content/docs/4.3/components/carousel.md | 63 +- site/content/docs/4.3/components/collapse.md | 43 +- site/content/docs/4.3/components/dropdowns.md | 108 +- site/content/docs/4.3/components/forms.md | 1319 -------------------- site/content/docs/4.3/components/icons.md | 21 + site/content/docs/4.3/components/input-group.md | 376 ------ site/content/docs/4.3/components/list-group.md | 2 +- site/content/docs/4.3/components/modal.md | 8 +- site/content/docs/4.3/components/navs.md | 4 +- site/content/docs/4.3/components/popovers.md | 6 +- site/content/docs/4.3/components/scrollspy.md | 6 +- site/content/docs/4.3/components/toasts.md | 6 +- site/content/docs/4.3/components/tooltips.md | 6 +- site/content/docs/4.3/content/reboot.md | 2 +- site/content/docs/4.3/content/tables.md | 198 ++- site/content/docs/4.3/forms/checks.md | 217 ++++ site/content/docs/4.3/forms/file.md | 37 + site/content/docs/4.3/forms/form-control.md | 75 ++ site/content/docs/4.3/forms/input-group.md | 376 ++++++ site/content/docs/4.3/forms/layout.md | 388 ++++++ site/content/docs/4.3/forms/overview.md | 123 ++ site/content/docs/4.3/forms/range.md | 34 + site/content/docs/4.3/forms/select.md | 62 + site/content/docs/4.3/forms/validation.md | 404 ++++++ .../docs/4.3/getting-started/browsers-devices.md | 64 +- .../docs/4.3/getting-started/build-tools.md | 53 +- site/content/docs/4.3/getting-started/contents.md | 32 +- site/content/docs/4.3/layout/grid.md | 24 +- site/content/docs/4.3/migration.md | 23 +- site/content/docs/4.3/utilities/display.md | 72 +- site/data/nav.yml | 21 +- site/layouts/_default/docs.html | 50 +- site/layouts/_default/single.html | 25 +- site/layouts/partials/docs-navbar.html | 24 +- site/layouts/partials/docs-search.html | 3 + site/layouts/partials/docs-sidebar.html | 31 +- site/layouts/partials/docs-versions.html | 19 + site/layouts/partials/footer.html | 4 +- site/layouts/partials/home/masthead-followup.html | 119 +- site/layouts/partials/home/masthead.html | 32 +- .../partials/icons/booticon-chevron-right.svg | 1 + .../partials/icons/bootstrap-logo-solid.svg | 1 + site/static/docs/4.3/assets/js/src/application.js | 14 + site/static/docs/4.3/assets/scss/_content.scss | 40 +- site/static/docs/4.3/assets/scss/_masthead.scss | 42 +- site/static/docs/4.3/assets/scss/_nav.scss | 49 +- site/static/docs/4.3/assets/scss/_sidebar.scss | 151 +-- site/static/docs/4.3/assets/scss/_toc.scss | 25 + site/static/docs/4.3/assets/scss/docs.scss | 15 + 68 files changed, 3690 insertions(+), 3446 deletions(-) delete mode 100644 scss/_custom-forms.scss delete mode 100644 scss/_input-group.scss create mode 100644 scss/forms/_form-check.scss create mode 100644 scss/forms/_form-control.scss create mode 100644 scss/forms/_form-file.scss create mode 100644 scss/forms/_form-range.scss create mode 100644 scss/forms/_form-select.scss create mode 100644 scss/forms/_input-group.scss create mode 100644 scss/forms/_labels.scss create mode 100644 scss/forms/_layout.scss create mode 100644 scss/forms/_validation.scss delete mode 100644 site/content/docs/4.3/components/forms.md create mode 100644 site/content/docs/4.3/components/icons.md delete mode 100644 site/content/docs/4.3/components/input-group.md create mode 100644 site/content/docs/4.3/forms/checks.md create mode 100644 site/content/docs/4.3/forms/file.md create mode 100644 site/content/docs/4.3/forms/form-control.md create mode 100644 site/content/docs/4.3/forms/input-group.md create mode 100644 site/content/docs/4.3/forms/layout.md create mode 100644 site/content/docs/4.3/forms/overview.md create mode 100644 site/content/docs/4.3/forms/range.md create mode 100644 site/content/docs/4.3/forms/select.md create mode 100644 site/content/docs/4.3/forms/validation.md create mode 100644 site/layouts/partials/docs-search.html create mode 100644 site/layouts/partials/docs-versions.html create mode 100644 site/layouts/partials/icons/booticon-chevron-right.svg create mode 100644 site/layouts/partials/icons/bootstrap-logo-solid.svg create mode 100644 site/static/docs/4.3/assets/scss/_toc.scss diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss deleted file mode 100644 index ce49f3060a..0000000000 --- a/scss/_custom-forms.scss +++ /dev/null @@ -1,514 +0,0 @@ -// Embedded icons from Open Iconic. -// Released under MIT and copyright 2014 Waybury. -// https://useiconic.com/open - - -// Checkboxes and radios -// -// Base class takes care of all the key behavioral aspects. - -.custom-control { - position: relative; - display: block; - min-height: $font-size-base * $line-height-base; - padding-left: $custom-control-gutter + $custom-control-indicator-size; -} - -.custom-control-inline { - display: inline-flex; - margin-right: $custom-control-spacer-x; -} - -.custom-control-input { - position: absolute; - z-index: -1; // Put the input behind the label so it doesn't overlay text - opacity: 0; - - &:checked ~ .custom-control-label::before { - color: $custom-control-indicator-checked-color; - border-color: $custom-control-indicator-checked-border-color; - @include gradient-bg($custom-control-indicator-checked-bg); - @include box-shadow($custom-control-indicator-checked-box-shadow); - } - - &:focus ~ .custom-control-label::before { - // the mixin is not used here to make sure there is feedback - @if $enable-shadows { - box-shadow: $input-box-shadow, $input-focus-box-shadow; - } @else { - box-shadow: $custom-control-indicator-focus-box-shadow; - } - } - - &:focus:not(:checked) ~ .custom-control-label::before { - border-color: $custom-control-indicator-focus-border-color; - } - - &:not(:disabled):active ~ .custom-control-label::before { - color: $custom-control-indicator-active-color; - background-color: $custom-control-indicator-active-bg; - border-color: $custom-control-indicator-active-border-color; - @include box-shadow($custom-control-indicator-active-box-shadow); - } - - // Use disabled attribute instead of :disabled pseudo-class - // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231 - &[disabled] { - ~ .custom-control-label { - color: $custom-control-label-disabled-color; - - &::before { - background-color: $custom-control-indicator-disabled-bg; - } - } - } -} - -// Custom control indicators -// -// Build the custom controls out of pseudo-elements. - -.custom-control-label { - position: relative; - margin-bottom: 0; - color: $custom-control-label-color; - vertical-align: top; - - // Background-color and (when enabled) gradient - &::before { - position: absolute; - top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; - left: -($custom-control-gutter + $custom-control-indicator-size); - display: block; - width: $custom-control-indicator-size; - height: $custom-control-indicator-size; - pointer-events: none; - content: ""; - background-color: $custom-control-indicator-bg; - border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width; - @include box-shadow($custom-control-indicator-box-shadow); - } - - // Foreground (icon) - &::after { - position: absolute; - top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; - left: -($custom-control-gutter + $custom-control-indicator-size); - display: block; - width: $custom-control-indicator-size; - height: $custom-control-indicator-size; - content: ""; - background: no-repeat 50% / #{$custom-control-indicator-bg-size}; - } -} - - -// Checkboxes -// -// Tweak just a few things for checkboxes. - -.custom-checkbox { - .custom-control-label::before { - @include border-radius($custom-checkbox-indicator-border-radius); - } - - .custom-control-input:checked ~ .custom-control-label { - &::after { - background-image: $custom-checkbox-indicator-icon-checked; - } - } - - .custom-control-input:indeterminate ~ .custom-control-label { - &::before { - border-color: $custom-checkbox-indicator-indeterminate-border-color; - @include gradient-bg($custom-checkbox-indicator-indeterminate-bg); - @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); - } - &::after { - background-image: $custom-checkbox-indicator-icon-indeterminate; - } - } - - .custom-control-input:disabled { - &:checked ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; - } - &:indeterminate ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; - } - } -} - -// Radios -// -// Tweak just a few things for radios. - -.custom-radio { - .custom-control-label::before { - // stylelint-disable-next-line property-blacklist - border-radius: $custom-radio-indicator-border-radius; - } - - .custom-control-input:checked ~ .custom-control-label { - &::after { - background-image: $custom-radio-indicator-icon-checked; - } - } - - .custom-control-input:disabled { - &:checked ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; - } - } -} - - -// switches -// -// Tweak a few things for switches - -.custom-switch { - padding-left: $custom-switch-width + $custom-control-gutter; - - .custom-control-label { - &::before { - left: -($custom-switch-width + $custom-control-gutter); - width: $custom-switch-width; - pointer-events: all; - // stylelint-disable-next-line property-blacklist - border-radius: $custom-switch-indicator-border-radius; - } - - &::after { - top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2}); - left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2}); - width: $custom-switch-indicator-size; - height: $custom-switch-indicator-size; - background-color: $custom-control-indicator-border-color; - // stylelint-disable-next-line property-blacklist - border-radius: $custom-switch-indicator-border-radius; - @include transition(transform .15s ease-in-out, $custom-forms-transition); - } - } - - .custom-control-input:checked ~ .custom-control-label { - &::after { - background-color: $custom-control-indicator-bg; - transform: translateX($custom-switch-width - $custom-control-indicator-size); - } - } - - .custom-control-input:disabled { - &:checked ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; - } - } -} - - -// Select -// -// Replaces the browser default select with a custom one, mostly pulled from -// https://primer.github.io/. -// - -.custom-select { - display: inline-block; - width: 100%; - height: $custom-select-height; - padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; - font-family: $custom-select-font-family; - @include font-size($custom-select-font-size); - font-weight: $custom-select-font-weight; - line-height: $custom-select-line-height; - color: $custom-select-color; - vertical-align: middle; - background: $custom-select-background; - background-color: $custom-select-bg; - border: $custom-select-border-width solid $custom-select-border-color; - @include border-radius($custom-select-border-radius, 0); - @include box-shadow($custom-select-box-shadow); - appearance: none; - - &:focus { - border-color: $custom-select-focus-border-color; - outline: 0; - @if $enable-shadows { - box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow; - } @else { - box-shadow: $custom-select-focus-box-shadow; - } - - &::-ms-value { - // For visual consistency with other platforms/browsers, - // suppress the default white text on blue background highlight given to - // the selected option text when the (still closed) s in some browsers, due to the limited stylability of ``s in IE10+. - &::-ms-expand { - background-color: transparent; - border: 0; - } - - // Customize the `:focus` state to imitate native WebKit styles. - @include form-control-focus($ignore-warning: true); - - // Placeholder - &::placeholder { - color: $input-placeholder-color; - // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. - opacity: 1; - } - - // Disabled and read-only inputs - // - // HTML5 says that controls under a fieldset > legend:first-child won't be - // disabled if the fieldset is disabled. Due to implementation difficulty, we - // don't honor that edge case; we style them as disabled anyway. - &:disabled, - &[readonly] { - background-color: $input-disabled-bg; - // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. - opacity: 1; - } -} - -select.form-control { - &:focus::-ms-value { - // Suppress the nested default white text on blue background highlight given to - // the selected option text when the (still closed) s in some browsers, due to the limited stylability of ``s in IE10+. + &::-ms-expand { + background-color: transparent; + border: 0; + } + + // Customize the `:focus` state to imitate native WebKit styles. + &:focus { + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color; + outline: 0; + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $input-focus-box-shadow; + } + } + + // Placeholder + &::placeholder { + color: $input-placeholder-color; + // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. + opacity: 1; + } + + // Disabled and read-only inputs + // + // HTML5 says that controls under a fieldset > legend:first-child won't be + // disabled if the fieldset is disabled. Due to implementation difficulty, we + // don't honor that edge case; we style them as disabled anyway. + &:disabled, + &[readonly] { + background-color: $input-disabled-bg; + // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. + opacity: 1; + } +} + +// Readonly controls as plain text +// +// Apply class to a readonly input to make it appear like regular plain +// text (without any border, background color, focus indicator) + +.form-control-plaintext { + display: block; + width: 100%; + padding: $input-padding-y 0; + margin-bottom: 0; // match inputs if this class comes on inputs with default margins + line-height: $input-line-height; + color: $input-plaintext-color; + background-color: transparent; + border: solid transparent; + border-width: $input-border-width 0; + + &.form-control-sm, + &.form-control-lg { + padding-right: 0; + padding-left: 0; + } +} + +// Form control sizing +// +// Build on `.form-control` with modifier classes to decrease or increase the +// height and font-size of form controls. +// +// Repeated in `_input_group.scss` to avoid Sass extend issues. + +.form-control-sm { + height: $input-height-sm; + padding: $input-padding-y-sm $input-padding-x-sm; + @include font-size($input-font-size-sm); + line-height: $input-line-height-sm; + @include border-radius($input-border-radius-sm); +} + +.form-control-lg { + height: $input-height-lg; + padding: $input-padding-y-lg $input-padding-x-lg; + @include font-size($input-font-size-lg); + line-height: $input-line-height-lg; + @include border-radius($input-border-radius-lg); +} + +textarea.form-control { + height: auto; +} diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss new file mode 100644 index 0000000000..bbc38a9f81 --- /dev/null +++ b/scss/forms/_form-file.scss @@ -0,0 +1,72 @@ +.form-file { + position: relative; + display: inline-block; + width: 100%; + height: $form-file-height; + margin-bottom: 0; +} + +.form-file-input { + position: relative; + z-index: 2; + width: 100%; + height: $form-file-height; + margin: 0; + opacity: 0; + + &:focus ~ .form-file-label { + border-color: $form-file-focus-border-color; + box-shadow: $form-file-focus-box-shadow; + } + + // Use disabled attribute instead of :disabled pseudo-class + // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231 + &[disabled] ~ .form-file-label { + background-color: $form-file-disabled-bg; + } +} + +.form-file-label { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 1; + display: flex; + height: $form-file-height; + border-color: $form-file-border-color; + @include border-radius($form-file-border-radius); + @include box-shadow($form-file-box-shadow); +} + +.form-file-text { + display: block; + flex-grow: 1; + padding: $form-file-padding-y $form-file-padding-x; + overflow: hidden; + font-family: $form-file-font-family; + font-weight: $form-file-font-weight; + line-height: $form-file-line-height; + color: $form-file-color; + text-overflow: ellipsis; + white-space: nowrap; + background-color: $form-file-bg; + border-color: inherit; + border-style: solid; + border-width: $form-file-border-width; + @include border-left-radius(inherit); +} + +.form-file-button { + display: block; + flex-shrink: 0; + padding: $form-file-padding-y $form-file-padding-x; + margin-left: -$form-file-border-width; + line-height: $form-file-line-height; + color: $form-file-button-color; + @include gradient-bg($form-file-button-bg); + border-color: inherit; + border-style: solid; + border-width: $form-file-border-width; + @include border-right-radius(inherit); +} diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss new file mode 100644 index 0000000000..b54d4d6aaf --- /dev/null +++ b/scss/forms/_form-range.scss @@ -0,0 +1,142 @@ +// Range +// +// Style range inputs the same across browsers. Vendor-specific rules for pseudo +// elements cannot be mixed. As such, there are no shared styles for focus or +// active states on prefixed selectors. + +.form-range { + width: 100%; + height: calc(#{$form-range-thumb-height} + #{$form-range-thumb-focus-box-shadow-width * 2}); + padding: 0; // Need to reset padding + background-color: transparent; + appearance: none; + + &:focus { + outline: none; + + // Pseudo-elements must be split across multiple rulesets to have an effect. + // No box-shadow() mixin for focus accessibility. + &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } + &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } + &::-ms-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } + } + + &::-moz-focus-outer { + border: 0; + } + + &::-webkit-slider-thumb { + width: $form-range-thumb-width; + height: $form-range-thumb-height; + margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific + @include gradient-bg($form-range-thumb-bg); + border: $form-range-thumb-border; + @include border-radius($form-range-thumb-border-radius); + @include box-shadow($form-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($form-range-thumb-active-bg); + } + } + + &::-webkit-slider-runnable-track { + width: $form-range-track-width; + height: $form-range-track-height; + color: transparent; // Why? + cursor: $form-range-track-cursor; + background-color: $form-range-track-bg; + border-color: transparent; + @include border-radius($form-range-track-border-radius); + @include box-shadow($form-range-track-box-shadow); + } + + &::-moz-range-thumb { + width: $form-range-thumb-width; + height: $form-range-thumb-height; + @include gradient-bg($form-range-thumb-bg); + border: $form-range-thumb-border; + @include border-radius($form-range-thumb-border-radius); + @include box-shadow($form-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($form-range-thumb-active-bg); + } + } + + &::-moz-range-track { + width: $form-range-track-width; + height: $form-range-track-height; + color: transparent; + cursor: $form-range-track-cursor; + background-color: $form-range-track-bg; + border-color: transparent; // Firefox specific? + @include border-radius($form-range-track-border-radius); + @include box-shadow($form-range-track-box-shadow); + } + + &::-ms-thumb { + width: $form-range-thumb-width; + height: $form-range-thumb-height; + margin-top: 0; // Edge specific + margin-right: $form-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + margin-left: $form-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + @include gradient-bg($form-range-thumb-bg); + border: $form-range-thumb-border; + @include border-radius($form-range-thumb-border-radius); + @include box-shadow($form-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($form-range-thumb-active-bg); + } + } + + &::-ms-track { + width: $form-range-track-width; + height: $form-range-track-height; + color: transparent; + cursor: $form-range-track-cursor; + background-color: transparent; + border-color: transparent; + border-width: $form-range-thumb-height / 2; + @include box-shadow($form-range-track-box-shadow); + } + + &::-ms-fill-lower { + background-color: $form-range-track-bg; + @include border-radius($form-range-track-border-radius); + } + + &::-ms-fill-upper { + margin-right: 15px; // arbitrary? + background-color: $form-range-track-bg; + @include border-radius($form-range-track-border-radius); + } + + &:disabled { + &::-webkit-slider-thumb { + background-color: $form-range-thumb-disabled-bg; + } + + &::-webkit-slider-runnable-track { + cursor: default; + } + + &::-moz-range-thumb { + background-color: $form-range-thumb-disabled-bg; + } + + &::-moz-range-track { + cursor: default; + } + + &::-ms-thumb { + background-color: $form-range-thumb-disabled-bg; + } + } +} diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss new file mode 100644 index 0000000000..e0b69c04f7 --- /dev/null +++ b/scss/forms/_form-select.scss @@ -0,0 +1,76 @@ +// Select +// +// Replaces the browser default select with a custom one, mostly pulled from +// https://primer.github.io/. + +.form-select { + display: inline-block; + width: 100%; + 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); + font-weight: $form-select-font-weight; + line-height: $form-select-line-height; + color: $form-select-color; + vertical-align: middle; + background: $form-select-background; + background-color: $form-select-bg; + border: $form-select-border-width solid $form-select-border-color; + @include border-radius($form-select-border-radius, 0); + @include box-shadow($form-select-box-shadow); + appearance: none; + + &:focus { + border-color: $form-select-focus-border-color; + outline: 0; + @if $enable-shadows { + box-shadow: $form-select-box-shadow, $form-select-focus-box-shadow; + } @else { + box-shadow: $form-select-focus-box-shadow; + } + + &::-ms-value { + // For visual consistency with other platforms/browsers, + // suppress the default white text on blue background highlight given to + // the selected option text when the (still closed) - We'll never share your email with anyone else. - -
- - -
-
- - -
- - -{{< /example >}} - -## Form controls - -Textual form controls—like ``s, ` - - -{{< /example >}} - -For file inputs, swap the `.form-control` for `.form-control-file`. - -{{< example >}} -
-
- - -
-
-{{< /example >}} - -### Sizing - -Set heights using classes like `.form-control-lg` and `.form-control-sm`. - -{{< example >}} - - - -{{< /example >}} - -{{< example >}} - - - -{{< /example >}} - -### Readonly - -Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. - -{{< example >}} - -{{< /example >}} - -### Readonly plain text - -If you want to have `` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding. - -{{< example >}} -
-
- -
- -
-
-
- -
- -
-
-
-{{< /example >}} - -{{< example >}} -
-
- - -
-
- - -
- -
-{{< /example >}} - -## Range Inputs - -Set horizontally scrollable range inputs using `.form-control-range`. - -{{< example >}} -
-
- - -
-
-{{< /example >}} - -## Checkboxes and radios - -Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. - -Disabled checkboxes and radios are supported. The `disabled` attribute will apply a lighter color to help indicate the input's state. - -Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our ``s and `