diff options
author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2016-05-17 01:19:31 +0300 |
---|---|---|
committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2016-05-17 01:19:31 +0300 |
commit | f6a7b7bf41ea628b61693597be299c4257f93079 (patch) | |
tree | f4069a43a528fcd6b405f0e1a06133f2eddeabbe /assets/stylesheets/bootstrap/_forms.scss | |
parent | e39dac2c6684e478a6ace2f50259b29dcce781ea (diff) |
rake update[v4-dev]
Diffstat (limited to 'assets/stylesheets/bootstrap/_forms.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_forms.scss | 253 |
1 files changed, 80 insertions, 173 deletions
diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss index 9a031c3..263a8bc 100644 --- a/assets/stylesheets/bootstrap/_forms.scss +++ b/assets/stylesheets/bootstrap/_forms.scss @@ -60,6 +60,16 @@ select.form-control { &:not([size]):not([multiple]) { height: $input-height; } + + &:focus::-ms-value { + // Suppress the nested default white text on blue background highlight given to + // the selected option text when the (still closed) <select> 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. @@ -75,56 +85,39 @@ select.form-control { // 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; +.col-form-label { + padding-top: $input-padding-y; + padding-bottom: $input-padding-y; margin-bottom: 0; // Override the `<label>` default } +.col-form-label-lg { + padding-top: $input-padding-y-lg; + padding-bottom: $input-padding-y-lg; + font-size: $font-size-lg; +} + +.col-form-label-sm { + padding-top: $input-padding-y-sm; + padding-bottom: $input-padding-y-sm; + font-size: $font-size-sm; +} + + // // Legends // // For use with horizontal and inline forms, when you need the legend text to // be the same size as regular labels, and to align with the form controls. -.form-control-legend { - padding: $input-padding-y $input-padding-x; +.col-form-legend { + padding-top: $input-padding-y; + padding-bottom: $input-padding-y; margin-bottom: 0; font-size: $font-size-base; } -// 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 `week`. - -_::-webkit-full-page-media, // Hack to make this CSS be Safari-only; see http://browserbu.gs/css-hacks/webkit-full-page-media/ -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 @@ -160,12 +153,24 @@ input[type="month"] { @include border-radius($input-border-radius-sm); } +select.form-control-sm { + &:not([size]):not([multiple]) { + height: $input-height-sm; + } +} + .form-control-lg { padding: $input-padding-y-lg $input-padding-x-lg; font-size: $font-size-lg; @include border-radius($input-border-radius-lg); } +select.form-control-lg { + &:not([size]):not([multiple]) { + height: $input-height-lg; + } +} + // Form groups // @@ -176,94 +181,77 @@ input[type="month"] { margin-bottom: $form-group-margin-bottom; } +.form-text { + display: block; + margin-top: ($spacer * .25); +} + // Checkboxes and radios // // Indent the labels to position radios/checkboxes as hanging controls. -.radio, -.checkbox { +.form-check { position: relative; display: block; - // margin-top: ($spacer * .75); margin-bottom: ($spacer * .75); - label { - padding-left: 1.25rem; - margin-bottom: 0; - cursor: pointer; + // Move up sibling radios or checkboxes for tighter spacing + + .form-check { + margin-top: -.25rem; + } - // When there's no labels, don't position the input. - input:only-child { - position: static; + &.disabled { + .form-check-label { + color: $text-muted; + cursor: $cursor-disabled; } } } -.radio input[type="radio"], -.radio-inline input[type="radio"], -.checkbox input[type="checkbox"], -.checkbox-inline input[type="checkbox"] { + +.form-check-label { + padding-left: 1.25rem; + margin-bottom: 0; // Override default `<label>` bottom margin + cursor: pointer; +} + +.form-check-input { 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; + &:only-child { + position: static; + } } // Radios and checkboxes on same line -.radio-inline, -.checkbox-inline { +.form-check-inline { position: relative; display: inline-block; padding-left: 1.25rem; - margin-bottom: 0; + margin-bottom: 0; // Override default `<label>` bottom margin 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; + + .form-check-inline { + margin-left: .75rem; } -} -// 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-feedback { + margin-top: ($spacer * .25); +} + .form-control-success, .form-control-warning, .form-control-danger { @@ -299,84 +287,6 @@ input[type="checkbox"] { } - - -// .form-control-success { -// background-image: $form-icon-success; -// border-color: $brand-success; -// } -// -// .form-control-warning { -// background-image: $form-icon-warning; -// border-color: $brand-warning; -// } -// -// .form-control-error { -// background-image: $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 @@ -432,19 +342,16 @@ input[type="checkbox"] { // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match. - .radio, - .checkbox { + .form-check { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; - - label { - padding-left: 0; - } } - .radio input[type="radio"], - .checkbox input[type="checkbox"] { + .form-check-label { + padding-left: 0; + } + .form-check-input { position: relative; margin-left: 0; } |