From b7ea13d2a34da8fe2c8e191efced3000095e0509 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 6 Mar 2019 00:03:08 +0200 Subject: [PATCH 01/69] Initial spike of consolidated form checks --- scss/_forms.scss | 11 ++ scss/_variables.scss | 6 + scss/forms/_checks.scss | 130 ++++++++++++++++++++++ site/content/docs/4.3/components/forms.md | 85 ++++++++++++++ 4 files changed, 232 insertions(+) create mode 100644 scss/forms/_checks.scss diff --git a/scss/_forms.scss b/scss/_forms.scss index e31a47312e36..10c4ca16ee90 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,5 +1,16 @@ // stylelint-disable selector-no-qualifying-type +// @import "forms/labels.scss"; +// @import "forms/form-controls.scss"; +// @import "forms/select.scss"; +@import "forms/checks.scss"; +// @import "forms/file.scss"; +// @import "forms/range.scss"; +// @import "forms/form-layout.scss"; +// @import "forms/input_group.scss"; +// @import "forms/validation.scss"; + + // // Textual form controls // diff --git a/scss/_variables.scss b/scss/_variables.scss index dd141e84a3d9..6e60556fce4f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -498,6 +498,12 @@ $input-height-lg: calc(#{$input-line-height-lg * 1em} + #{ $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; + +$flex-check-input-width: 1.25em !default; +$flex-check-min-height: $font-size-base * $line-height-base !default; +$flex-check-padding-left: $flex-check-input-width + .5em !default; + + $form-text-margin-top: .25rem !default; $form-check-input-gutter: 1.25rem !default; diff --git a/scss/forms/_checks.scss b/scss/forms/_checks.scss new file mode 100644 index 000000000000..f169ab6348bc --- /dev/null +++ b/scss/forms/_checks.scss @@ -0,0 +1,130 @@ +// stylelint-disable + +:root { + --background: #fff; + --foreground: #333; + + --accent-color: #fff; + --accent-bg: var(--blue); + // --accent-bg: var(--purple); + + --check-width: 1.25em; + --check-bg-size: calc(var(--check-width) - .5em); + --check-gutter: calc(var(--check-width) + .5em); + + --switch-width: 2em; + --switch-gutter: calc(var(--switch-width) + .5em); + + --file-height: calc((.375em * 2) + 1.5em); + + --focus-ring: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} + +// +// Check/radio +// + +.flex-check { + // position: relative; + display: block; + padding-left: $flex-check-padding-left; + min-height: $flex-check-min-height; +} + +.flex-check-input { + -webkit-appearance: none; + appearance: none; + float: left; + width: $flex-check-input-width; + height: $flex-check-input-width; + margin-top: calc((1.5em - var(--check-width)) / 2); // line-height minus check height + margin-left: calc(var(--check-gutter) * -1); + background-color: #fff; + border: 1px solid rgba(0,0,0,.25); + + &[type="checkbox"] { + border-radius: .25em; + } + + &[type="radio"] { + border-radius: 50%; + } + + &:active { + filter: brightness(90%); + } + + &:focus { + outline: 0; + border-color: var(--accent-bg); + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); + } + + &:checked { + border-color: var(--accent-bg); + background-color: var(--accent-bg); + background-repeat: no-repeat; + background-position: center center; + background-size: var(--check-bg-size); + + &[type="checkbox"] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); + } + + &[type="radio"] { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); + } + } + + &[type="checkbox"]:indeterminate { + border-color: var(--accent-bg); + background-color: var(--accent-bg); + background-repeat: no-repeat; + background-position: center center; + background-size: var(--check-bg-size); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); + } + + &:disabled { + opacity: .5; + pointer-events: none; + filter: none; + + ~ .flex-check-label { + opacity: .5; + } + } +} + +.flex-check-label { + margin-bottom: 0; +} + +// +// Switch +// + +.flex-switch { + padding-left: var(--switch-gutter); + + .flex-check-input { + width: var(--switch-width); + margin-left: calc(var(--switch-gutter) * -1); + background-repeat: no-repeat; + background-position: left center; + background-size: calc(var(--check-width) - 2px); // Get a 1px separation + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,.25)'/%3e%3c/svg%3e"); + border-radius: 2em; + transition: .2s ease-in-out; + transition-property: background-position, background-color; + + &:focus { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='hsla(211, 100%, 75%, 1)'/%3e%3c/svg%3e"); + } + + &:checked { + background-position: right center; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1)'/%3e%3c/svg%3e"); + } + } +} diff --git a/site/content/docs/4.3/components/forms.md b/site/content/docs/4.3/components/forms.md index 20e6c40e87d4..6d18a10f7d29 100644 --- a/site/content/docs/4.3/components/forms.md +++ b/site/content/docs/4.3/components/forms.md @@ -163,6 +163,91 @@ Set horizontally scrollable range inputs using `.form-control-range`. ## Checkboxes and radios + + +{{< example >}} + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+{{< /example >}} + 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. From d78307a412455cba8fb6693b6210a7f1358a8251 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 10 Mar 2019 19:13:26 -0700 Subject: [PATCH 02/69] 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 --- scss/_custom-forms.scss | 974 +++++++++--------- scss/_forms.scss | 606 +++++------ scss/forms/{_checks.scss => _form-check.scss} | 0 scss/forms/_form-control.scss | 116 +++ scss/forms/_form-file.scss | 74 ++ scss/forms/_form-range.scss | 142 +++ scss/forms/_form-select.scss | 80 ++ scss/forms/_labels.scss | 27 + scss/forms/_layout.scss | 109 ++ scss/forms/_validation.scss | 10 + site/data/nav.yml | 17 +- site/docs/4.3/forms/overview.md | 7 + 12 files changed, 1370 insertions(+), 792 deletions(-) rename scss/forms/{_checks.scss => _form-check.scss} (100%) 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/_labels.scss create mode 100644 scss/forms/_layout.scss create mode 100644 scss/forms/_validation.scss create mode 100644 site/docs/4.3/forms/overview.md diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 03f3fc5be2da..feef70d5b28e 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -3,502 +3,502 @@ // https://useiconic.com/open -// Checkboxes and radios +// // Checkboxes and radios +// // +// // Base class takes care of all the key behavioral aspects. // -// 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); - } - - &:disabled { - ~ .custom-control-label { - color: $custom-control-label-disabled-color; - - &::before { - background-color: $custom-control-indicator-disabled-bg; - } - } - } -} - -// Custom control indicators +// .custom-control { +// position: relative; +// display: block; +// min-height: $font-size-base * $line-height-base; +// padding-left: $custom-control-gutter + $custom-control-indicator-size; +// } // -// Build the custom controls out of pseudo-elements. - -.custom-control-label { - position: relative; - margin-bottom: 0; - 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 +// .custom-control-inline { +// display: inline-flex; +// margin-right: $custom-control-spacer-x; +// } // -// 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 +// .custom-control-input { +// position: absolute; +// z-index: -1; // Put the input behind the label so it doesn't overlay text +// opacity: 0; // -// 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 +// &: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); +// } // -// 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 +// &: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; +// } +// } // -// Replaces the browser default select with a custom one, mostly pulled from -// https://primer.github.io/. +// &:focus:not(:checked) ~ .custom-control-label::before { +// border-color: $custom-control-indicator-focus-border-color; +// } // - -.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) receives focus +// // in IE and (under certain conditions) Edge. +// // See https://github.com/twbs/bootstrap/issues/19398. +// color: $input-color; +// background-color: $input-bg; +// } +// } +// +// &[multiple], +// &[size]:not([size="1"]) { +// height: auto; +// padding-right: $custom-select-padding-x; +// background-image: none; +// } +// +// &:disabled { +// color: $custom-select-disabled-color; +// background-color: $custom-select-disabled-bg; +// } +// +// // Hides the default caret in IE11 +// &::-ms-expand { +// display: none; +// } +// } +// +// .custom-select-sm { +// height: $custom-select-height-sm; +// padding-top: $custom-select-padding-y-sm; +// padding-bottom: $custom-select-padding-y-sm; +// padding-left: $custom-select-padding-x-sm; +// @include font-size($custom-select-font-size-sm); +// } +// +// .custom-select-lg { +// height: $custom-select-height-lg; +// padding-top: $custom-select-padding-y-lg; +// padding-bottom: $custom-select-padding-y-lg; +// padding-left: $custom-select-padding-x-lg; +// @include font-size($custom-select-font-size-lg); +// } + + +// // File +// // +// // Custom file input. +// +// .custom-file { +// position: relative; +// display: inline-block; +// width: 100%; +// height: $custom-file-height; +// margin-bottom: 0; +// } +// +// .custom-file-input { +// position: relative; +// z-index: 2; +// width: 100%; +// height: $custom-file-height; +// margin: 0; +// opacity: 0; +// +// &:focus ~ .custom-file-label { +// border-color: $custom-file-focus-border-color; +// box-shadow: $custom-file-focus-box-shadow; +// } +// +// &:disabled ~ .custom-file-label { +// background-color: $custom-file-disabled-bg; +// } +// +// @each $lang, $value in $custom-file-text { +// &:lang(#{$lang}) ~ .custom-file-label::after { +// content: $value; +// } +// } +// +// ~ .custom-file-label[data-browse]::after { +// content: attr(data-browse); +// } +// } +// +// .custom-file-label { +// position: absolute; +// top: 0; +// right: 0; +// left: 0; +// z-index: 1; +// height: $custom-file-height; +// padding: $custom-file-padding-y $custom-file-padding-x; +// font-family: $custom-file-font-family; +// font-weight: $custom-file-font-weight; +// line-height: $custom-file-line-height; +// color: $custom-file-color; +// background-color: $custom-file-bg; +// border: $custom-file-border-width solid $custom-file-border-color; +// @include border-radius($custom-file-border-radius); +// @include box-shadow($custom-file-box-shadow); +// +// &::after { +// position: absolute; +// top: 0; +// right: 0; +// bottom: 0; +// z-index: 3; +// display: block; +// height: $custom-file-height-inner; +// padding: $custom-file-padding-y $custom-file-padding-x; +// line-height: $custom-file-line-height; +// color: $custom-file-button-color; +// content: "Browse"; +// @include gradient-bg($custom-file-button-bg); +// border-left: inherit; +// @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); +// } +// } + +// // 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. +// +// .custom-range { +// width: 100%; +// height: calc(#{$custom-range-thumb-height} + #{$custom-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: $custom-range-thumb-focus-box-shadow; } +// &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } +// &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } +// } +// +// &::-moz-focus-outer { +// border: 0; +// } +// +// &::-webkit-slider-thumb { +// width: $custom-range-thumb-width; +// height: $custom-range-thumb-height; +// margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific +// @include gradient-bg($custom-range-thumb-bg); +// border: $custom-range-thumb-border; +// @include border-radius($custom-range-thumb-border-radius); +// @include box-shadow($custom-range-thumb-box-shadow); +// @include transition($custom-forms-transition); +// appearance: none; +// +// &:active { +// @include gradient-bg($custom-range-thumb-active-bg); +// } +// } +// +// &::-webkit-slider-runnable-track { +// width: $custom-range-track-width; +// height: $custom-range-track-height; +// color: transparent; // Why? +// cursor: $custom-range-track-cursor; +// background-color: $custom-range-track-bg; +// border-color: transparent; +// @include border-radius($custom-range-track-border-radius); +// @include box-shadow($custom-range-track-box-shadow); +// } +// +// &::-moz-range-thumb { +// width: $custom-range-thumb-width; +// height: $custom-range-thumb-height; +// @include gradient-bg($custom-range-thumb-bg); +// border: $custom-range-thumb-border; +// @include border-radius($custom-range-thumb-border-radius); +// @include box-shadow($custom-range-thumb-box-shadow); +// @include transition($custom-forms-transition); +// appearance: none; +// +// &:active { +// @include gradient-bg($custom-range-thumb-active-bg); +// } +// } +// +// &::-moz-range-track { +// width: $custom-range-track-width; +// height: $custom-range-track-height; +// color: transparent; +// cursor: $custom-range-track-cursor; +// background-color: $custom-range-track-bg; +// border-color: transparent; // Firefox specific? +// @include border-radius($custom-range-track-border-radius); +// @include box-shadow($custom-range-track-box-shadow); +// } +// +// &::-ms-thumb { +// width: $custom-range-thumb-width; +// height: $custom-range-thumb-height; +// margin-top: 0; // Edge specific +// margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. +// margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. +// @include gradient-bg($custom-range-thumb-bg); +// border: $custom-range-thumb-border; +// @include border-radius($custom-range-thumb-border-radius); +// @include box-shadow($custom-range-thumb-box-shadow); +// @include transition($custom-forms-transition); +// appearance: none; +// +// &:active { +// @include gradient-bg($custom-range-thumb-active-bg); +// } +// } +// +// &::-ms-track { +// width: $custom-range-track-width; +// height: $custom-range-track-height; +// color: transparent; +// cursor: $custom-range-track-cursor; +// background-color: transparent; +// border-color: transparent; +// border-width: $custom-range-thumb-height / 2; +// @include box-shadow($custom-range-track-box-shadow); +// } +// +// &::-ms-fill-lower { +// background-color: $custom-range-track-bg; +// @include border-radius($custom-range-track-border-radius); +// } +// +// &::-ms-fill-upper { +// margin-right: 15px; // arbitrary? +// background-color: $custom-range-track-bg; +// @include border-radius($custom-range-track-border-radius); +// } +// +// &:disabled { +// &::-webkit-slider-thumb { +// background-color: $custom-range-thumb-disabled-bg; +// } +// +// &::-webkit-slider-runnable-track { +// cursor: default; +// } +// +// &::-moz-range-thumb { +// background-color: $custom-range-thumb-disabled-bg; +// } +// +// &::-moz-range-track { +// cursor: default; +// } +// +// &::-ms-thumb { +// background-color: $custom-range-thumb-disabled-bg; +// } +// } +// } .custom-control-label::before, .custom-file-label, diff --git a/scss/_forms.scss b/scss/_forms.scss index 10c4ca16ee90..2d2db6d82214 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,80 +1,80 @@ // stylelint-disable selector-no-qualifying-type -// @import "forms/labels.scss"; -// @import "forms/form-controls.scss"; -// @import "forms/select.scss"; -@import "forms/checks.scss"; -// @import "forms/file.scss"; -// @import "forms/range.scss"; -// @import "forms/form-layout.scss"; +@import "forms/labels.scss"; +@import "forms/form-control.scss"; +@import "forms/form-select.scss"; +@import "forms/form-check.scss"; +@import "forms/form-file.scss"; +@import "forms/form-range.scss"; +@import "forms/layout.scss"; // @import "forms/input_group.scss"; -// @import "forms/validation.scss"; +@import "forms/validation.scss"; // // Textual form controls // -.form-control { - display: block; - width: 100%; - height: $input-height; - padding: $input-padding-y $input-padding-x; - font-family: $input-font-family; - @include font-size($input-font-size); - font-weight: $input-font-weight; - line-height: $input-line-height; - color: $input-color; - background-color: $input-bg; - background-clip: padding-box; - border: $input-border-width solid $input-border-color; - - // Note: This has no effect on `s in CSS. - @include border-radius($input-border-radius, 0); - - @include box-shadow($input-box-shadow); - @include transition($input-transition); - - // Unstyle the caret on ` receives focus - // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to - // match the appearance of the native widget. - // See https://github.com/twbs/bootstrap/issues/19398. - color: $input-color; - background-color: $input-bg; - } -} +// .form-control { +// display: block; +// width: 100%; +// height: $input-height; +// padding: $input-padding-y $input-padding-x; +// font-family: $input-font-family; +// @include font-size($input-font-size); +// font-weight: $input-font-weight; +// line-height: $input-line-height; +// color: $input-color; +// background-color: $input-bg; +// background-clip: padding-box; +// border: $input-border-width solid $input-border-color; +// +// // Note: This has no effect on `s in CSS. +// @include border-radius($input-border-radius, 0); +// +// @include box-shadow($input-box-shadow); +// @include transition($input-transition); +// +// // Unstyle the caret on ` receives focus +// // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to +// // match the appearance of the native widget. +// // See https://github.com/twbs/bootstrap/issues/19398. +// color: $input-color; +// background-color: $input-bg; +// } +// } // Make file inputs better match text inputs by forcing them to new lines. .form-control-file, @@ -84,103 +84,103 @@ select.form-control { } +// // +// // Labels +// // // -// Labels +// // For use with horizontal and inline forms, when you need the label (or legend) +// // text to align with the form controls. +// .col-form-label { +// padding-top: calc(#{$input-padding-y} + #{$input-border-width}); +// padding-bottom: calc(#{$input-padding-y} + #{$input-border-width}); +// margin-bottom: 0; // Override the `