mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 00:59:51 +02:00
Mark Otto
249
scss/_forms.scss
249
scss/_forms.scss
@@ -85,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
|
||||
@@ -170,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
|
||||
//
|
||||
@@ -186,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"] {
|
||||
position: absolute;
|
||||
margin-top: .25rem;
|
||||
// margin-top: 4px \9;
|
||||
margin-left: -1.25rem;
|
||||
|
||||
.form-check-label {
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0; // Override default `<label>` bottom margin
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio + .radio,
|
||||
.checkbox + .checkbox {
|
||||
// Move up sibling radios or checkboxes for tighter spacing
|
||||
margin-top: -.25rem;
|
||||
.form-check-input {
|
||||
position: absolute;
|
||||
margin-top: .25rem;
|
||||
margin-left: -1.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,
|
||||
+ .form-check-inline {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
&.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-feedback {
|
||||
margin-top: ($spacer * .25);
|
||||
}
|
||||
|
||||
.form-control-success,
|
||||
.form-control-warning,
|
||||
.form-control-danger {
|
||||
@@ -309,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
|
||||
@@ -442,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;
|
||||
}
|
||||
|
||||
@@ -321,6 +321,29 @@ textarea {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
// Apply a disabled cursor for radios and checkboxes.
|
||||
//
|
||||
// Note: Neither radios nor checkboxes can be readonly.
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
|
||||
// bug where setting a custom line-height prevents text from being vertically
|
||||
// centered within the input.
|
||||
//
|
||||
// Bug report: https://github.com/twbs/bootstrap/issues/11266
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||
resize: vertical;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
@mixin form-control-validation($color) {
|
||||
// Color the label and help text
|
||||
.text-help,
|
||||
.form-control-feedback,
|
||||
.form-control-label,
|
||||
.radio,
|
||||
.checkbox,
|
||||
|
||||
Reference in New Issue
Block a user