diff options
Diffstat (limited to 'src/sass/bootstrap4/_forms.scss')
| -rw-r--r-- | src/sass/bootstrap4/_forms.scss | 452 |
1 files changed, 452 insertions, 0 deletions
diff --git a/src/sass/bootstrap4/_forms.scss b/src/sass/bootstrap4/_forms.scss new file mode 100644 index 0000000..20a70b3 --- /dev/null +++ b/src/sass/bootstrap4/_forms.scss @@ -0,0 +1,452 @@ +// +// Textual form controls +// + +.form-control { + display: block; + width: 100%; + // // Make inputs at least the height of their button counterpart (base line-height + padding + border) + // height: $input-height; + padding: $input-padding-y $input-padding-x; + font-size: $font-size-base; + line-height: $line-height; + color: $input-color; + background-color: $input-bg; + // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214. + background-image: none; + border: $input-btn-border-width solid $input-border-color; + // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. + @include border-radius($input-border-radius); + @include box-shadow($input-box-shadow); + @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); + + // Make inputs at least the height of their button counterpart (base line-height + padding + border). + // Only apply the height to textual inputs and some selects. + // &:not(textarea), + // &:not(select[size]), + // &:not(select[multiple]) { + // height: $input-height; + // } + + // Unstyle the caret on `<select>`s in IE10+. + &::-ms-expand { + background-color: transparent; + border: 0; + } + + // Customize the `:focus` state to imitate native WebKit styles. + @include form-control-focus(); + + // Placeholder + &::placeholder { + color: $input-color-placeholder; + // 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-bg-disabled; + // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. + opacity: 1; + } + + &:disabled { + cursor: $cursor-disabled; + } +} + + +// Make file inputs better match text inputs by forcing them to new lines. +.form-control-file, +.form-control-range { + display: block; +} + + +// +// Labels +// + +// For use with horizontal and inline forms, when you need the label text to +// align with the form controls. +.form-control-label { + padding: $input-padding-y $input-padding-x; + margin-bottom: 0; // Override the `<label>` default +} + + +// Todo: clear this up + +// Special styles for iOS temporal inputs +// +// In Mobile Safari, setting `display: block` on temporal inputs causes the +// text within the input to become vertically misaligned. As a workaround, we +// set a pixel line-height that matches the given height of the input, but only +// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 +// +// Note that as of 8.3, iOS doesn't support `datetime` or `week`. + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type="date"], + input[type="time"], + input[type="datetime-local"], + input[type="month"] { + &.form-control { + line-height: $input-height; + } + + &.input-sm, + .input-group-sm &.form-control { + line-height: $input-height-sm; + } + + &.input-lg, + .input-group-lg &.form-control { + line-height: $input-height-lg; + } + } +} + + +// Static form control text +// +// Apply class to an element to make any string of text align with labels in a +// horizontal form layout. + +.form-control-static { + min-height: $input-height; + // Size it appropriately next to real form controls + padding-top: $input-padding-y; + padding-bottom: $input-padding-y; + // Remove default margin from `p` + margin-bottom: 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. +// +// The `.form-group-* form-control` variations are sadly duplicated to avoid the +// issue documented in https://github.com/twbs/bootstrap/issues/15074. + +.form-control-sm { + // height: $input-height-sm; + padding: $input-padding-y-sm $input-padding-x-sm; + font-size: $font-size-sm; + line-height: $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; + font-size: $font-size-lg; + line-height: $line-height-lg; + @include border-radius($input-border-radius-lg); +} + + +// Form groups +// +// Designed to help with the organization and spacing of vertical forms. For +// horizontal forms, use the predefined grid classes. + +.form-group { + margin-bottom: $form-group-margin-bottom; +} + + +// Checkboxes and radios +// +// Indent the labels to position radios/checkboxes as hanging controls. + +.radio, +.checkbox { + position: relative; + display: block; + // margin-top: ($spacer * .75); + margin-bottom: ($spacer * .75); + + label { + padding-left: 1.25rem; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; + + // When there's no labels, don't position the input. + input:only-child { + position: static; + } + } +} +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + position: absolute; + margin-top: .25rem; + // margin-top: 4px \9; + margin-left: -1.25rem; +} + +.radio + .radio, +.checkbox + .checkbox { + // Move up sibling radios or checkboxes for tighter spacing + margin-top: -.25rem; +} + +// Radios and checkboxes on same line +.radio-inline, +.checkbox-inline { + position: relative; + display: inline-block; + padding-left: 1.25rem; + margin-bottom: 0; + font-weight: normal; + vertical-align: middle; + cursor: pointer; +} +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: .75rem; +} + +// Apply same disabled cursor tweak as for inputs +// Some special care is needed because <label>s don't inherit their parent's `cursor`. +// +// Note: Neither radios nor checkboxes can be readonly. +input[type="radio"], +input[type="checkbox"] { + &:disabled, + &.disabled { + cursor: $cursor-disabled; + } +} +// These classes are used directly on <label>s +.radio-inline, +.checkbox-inline { + &.disabled { + cursor: $cursor-disabled; + } +} +// These classes are used on elements with <label> descendants +.radio, +.checkbox { + &.disabled { + label { + cursor: $cursor-disabled; + } + } +} + + +// Form control feedback states +// +// Apply contextual and semantic states to individual form controls. + +.form-control-success, +.form-control-warning, +.form-control-danger { + padding-right: ($input-padding-x * 3); + background-repeat: no-repeat; + background-position: center right ($input-height * .25); + background-size: ($input-height * .65) ($input-height * .65); +} + +// Form validation states +.has-success { + @include form-control-validation($brand-success); + + .form-control-success { + background-image: url($form-icon-success); + } +} + +.has-warning { + @include form-control-validation($brand-warning); + + .form-control-warning { + background-image: url($form-icon-warning); + } +} + +.has-danger { + @include form-control-validation($brand-danger); + + .form-control-danger { + background-image: url($form-icon-danger); + } +} + + + + +// .form-control-success { +// background-image: url("#{$form-icon-success}"); +// border-color: $brand-success; +// } +// +// .form-control-warning { +// background-image: url("#{$form-icon-warning}"); +// border-color: $brand-warning; +// } +// +// .form-control-error { +// background-image: url("#{$form-icon-danger}"); +// border-color: $brand-danger; +// } + + +// .has-feedback { +// // Enable absolute positioning +// position: relative; +// +// // Ensure icons don't overlap text +// .form-control { +// padding-right: ($input-height * 1.25); +// } +// } +// // Feedback icon +// .form-control-feedback { +// position: absolute; +// top: 0; +// right: 0; +// z-index: 2; // Ensure icon is above input groups +// display: block; +// width: $input-height; +// height: $input-height; +// line-height: $input-height; +// text-align: center; +// pointer-events: none; +// } +// .input-lg + .form-control-feedback, +// .input-group-lg + .form-control-feedback { +// width: $input-height-lg; +// height: $input-height-lg; +// line-height: $input-height-lg; +// } +// .input-sm + .form-control-feedback, +// .input-group-sm + .form-control-feedback { +// width: $input-height-sm; +// height: $input-height-sm; +// line-height: $input-height-sm; +// } +// +// // Form validation states +// .has-success { +// @include form-control-validation($state-success-text, $state-success-text, $state-success-bg); +// } +// .has-warning { +// @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg); +// } +// .has-danger { +// @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg); +// } +// +// // Reposition feedback icon if input has visible label above +// .has-feedback label { +// +// ~ .form-control-feedback { +// // TODO: redo this since we nuked the `$line-height-computed` +// top: 0; // Height of the `label` and its margin +// } +// +// &.sr-only ~ .form-control-feedback { +// top: 0; +// } +// } + + +// Inline forms +// +// Make forms appear inline(-block) by adding the `.form-inline` class. Inline +// forms begin stacked on extra small (mobile) devices and then go inline when +// viewports reach <768px. +// +// Requires wrapping inputs and labels with `.form-group` for proper display of +// default HTML form controls and our custom form controls (e.g., input groups). + +.form-inline { + + // Kick in the inline + @include media-breakpoint-up(sm) { + // Inline-block all the things for "inline" + .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + + // Allow folks to *not* use `.form-group` + .form-control { + display: inline-block; + width: auto; // Prevent labels from stacking above inputs in `.form-group` + vertical-align: middle; + } + + // Make static controls behave like regular ones + .form-control-static { + display: inline-block; + } + + .input-group { + display: inline-table; + vertical-align: middle; + + .input-group-addon, + .input-group-btn, + .form-control { + width: auto; + } + } + + // Input groups need that 100% width though + .input-group > .form-control { + width: 100%; + } + + .form-control-label { + margin-bottom: 0; + vertical-align: middle; + } + + // Remove default margin on radios/checkboxes that were used for stacking, and + // then undo the floating of radios and checkboxes to match. + .radio, + .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + + label { + padding-left: 0; + } + } + .radio input[type="radio"], + .checkbox input[type="checkbox"] { + position: relative; + margin-left: 0; + } + + // Re-override the feedback icon. + .has-feedback .form-control-feedback { + top: 0; + } + } +} |