Show More
form-bootstrap.less
264 lines
| 6.5 KiB
| text/x-less
|
LessCssLexer
r1 | // | |||
// Forms | ||||
// -------------------------------------------------- | ||||
// Form validation states | ||||
// | ||||
// Used to generate the form validation CSS for warnings, errors, and successes. | ||||
.form-control-validation(@text-color: @grey3; @border-color: @grey4; @background-color: @grey6) { | ||||
// Color the label and help text | ||||
.help-block, | ||||
.control-label, | ||||
.radio, | ||||
.checkbox, | ||||
.radio-inline, | ||||
.checkbox-inline, | ||||
&.radio label, | ||||
&.checkbox label, | ||||
&.radio-inline label, | ||||
&.checkbox-inline label { | ||||
color: @text-color; | ||||
} | ||||
} | ||||
// Form control focus state | ||||
// | ||||
// Generate a customized focus state and for any input with the specified color, | ||||
// which defaults to the `@input-border-focus` variable. | ||||
// | ||||
// We highly encourage you to not customize the default value, but instead use | ||||
// this to tweak colors on an as-needed basis. This aesthetic change is based on | ||||
// WebKit's default styles, but applicable to a wider range of browsers. Its | ||||
// usability and accessibility should be taken into account with any change. | ||||
// | ||||
// Example usage: change the default blue border and shadow to white for better | ||||
// contrast against a dark gray background. | ||||
.form-control-focus(@color: @input-border-focus) { | ||||
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6); | ||||
&:focus { | ||||
border-color: @color; | ||||
outline: 0; | ||||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); | ||||
} | ||||
} | ||||
// Form control sizing | ||||
// | ||||
// Relative text size, padding, and border-radii changes for form controls. For | ||||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>` | ||||
// element gets special love because it's special, and that's a fact! | ||||
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { | ||||
height: @input-height; | ||||
padding: @padding-vertical @padding-horizontal; | ||||
font-size: @font-size; | ||||
line-height: @line-height; | ||||
border-radius: @border-radius; | ||||
select& { | ||||
height: @input-height; | ||||
line-height: @input-height; | ||||
} | ||||
textarea&, | ||||
select[multiple]& { | ||||
height: auto; | ||||
} | ||||
} | ||||
// Normalize non-controls | ||||
// | ||||
// Restyle and baseline non-control form elements. | ||||
fieldset { | ||||
padding: 0; | ||||
margin: 0; | ||||
border: 0; | ||||
// Chrome and Firefox set a `min-width: min-content;` on fieldsets, | ||||
// so we reset that to ensure it behaves more like a standard block element. | ||||
// See https://github.com/twbs/bootstrap/issues/12359. | ||||
min-width: 0; | ||||
} | ||||
legend { | ||||
display: block; | ||||
width: 100%; | ||||
padding: 0; | ||||
} | ||||
label { | ||||
display: inline-block; | ||||
max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) | ||||
margin-bottom: 5px; | ||||
//TODO: lisa: this should probably be @text-bold instead | ||||
font-weight: bold; | ||||
} | ||||
// Normalize form controls | ||||
// | ||||
// While most of our form styles require extra classes, some basic normalization | ||||
// is required to ensure optimum display with or without those classes to better | ||||
// address browser inconsistencies. | ||||
// Override content-box in Normalize (* isn't specific enough) | ||||
input[type="search"] { | ||||
.box-sizing(border-box); | ||||
} | ||||
// Position radios and checkboxes better | ||||
input[type="radio"], | ||||
input[type="checkbox"] { | ||||
margin: 4px 0 0; | ||||
margin-top: 1px \9; // IE8-9 | ||||
line-height: normal; | ||||
} | ||||
// Set the height of file controls to match text inputs | ||||
input[type="file"] { | ||||
display: block; | ||||
} | ||||
// Make range inputs behave like textual form controls | ||||
input[type="range"] { | ||||
display: block; | ||||
width: 100%; | ||||
} | ||||
// Make multiple select elements height not fixed | ||||
select[multiple], | ||||
select[size] { | ||||
height: auto; | ||||
} | ||||
// Focus for file, radio, and checkbox | ||||
input[type="file"]:focus, | ||||
input[type="radio"]:focus, | ||||
input[type="checkbox"]:focus { | ||||
.tab-focus(); | ||||
} | ||||
// Adjust output element | ||||
output { | ||||
display: block; | ||||
padding-top: (@padding-base-vertical + 1); | ||||
font-size: @font-size-base; | ||||
line-height: @line-height-base; | ||||
color: @input-color; | ||||
} | ||||
// Search inputs in iOS | ||||
// | ||||
// This overrides the extra rounded corners on search inputs in iOS so that our | ||||
// `.form-control` class can properly style them. Note that this cannot simply | ||||
// be added to `.form-control` as it's not specific enough. For details, see | ||||
// https://github.com/twbs/bootstrap/issues/11586. | ||||
input[type="search"] { | ||||
-webkit-appearance: none; | ||||
} | ||||
// 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. | ||||
@media screen and (-webkit-min-device-pixel-ratio: 0) { | ||||
input[type="date"], | ||||
input[type="time"], | ||||
input[type="datetime-local"], | ||||
input[type="month"] { | ||||
line-height: @input-height-base; | ||||
} | ||||
input[type="date"].input-sm, | ||||
input[type="time"].input-sm, | ||||
input[type="datetime-local"].input-sm, | ||||
input[type="month"].input-sm { | ||||
line-height: @input-height-small; | ||||
} | ||||
input[type="date"].input-lg, | ||||
input[type="time"].input-lg, | ||||
input[type="datetime-local"].input-lg, | ||||
input[type="month"].input-lg { | ||||
line-height: @input-height-large; | ||||
} | ||||
} | ||||
// Checkboxes and radios | ||||
// | ||||
// Indent the labels to position radios/checkboxes as hanging controls. | ||||
.radio, | ||||
.checkbox { | ||||
position: relative; | ||||
display: inline-block; | ||||
margin-bottom: 10px; | ||||
label { | ||||
min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text | ||||
padding-left: 20px; | ||||
margin-bottom: 0; | ||||
font-weight: normal; | ||||
cursor: pointer; | ||||
} | ||||
} | ||||
.radio + .radio, | ||||
.checkbox + .checkbox { | ||||
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing | ||||
} | ||||
// Radios and checkboxes on same line | ||||
.radio-inline, | ||||
.checkbox-inline { | ||||
display: inline-block; | ||||
padding-left: 20px; | ||||
margin-bottom: 0; | ||||
vertical-align: middle; | ||||
font-weight: normal; | ||||
cursor: pointer; | ||||
} | ||||
.radio-inline + .radio-inline, | ||||
.checkbox-inline + .checkbox-inline { | ||||
margin-top: 0; | ||||
margin-left: 10px; // space out consecutive inline controls | ||||
} | ||||
// 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, | ||||
fieldset[disabled] & { | ||||
cursor: @cursor-disabled; | ||||
} | ||||
} | ||||
// These classes are used directly on <label>s | ||||
.radio-inline, | ||||
.checkbox-inline { | ||||
&.disabled, | ||||
fieldset[disabled] & { | ||||
cursor: @cursor-disabled; | ||||
} | ||||
} | ||||
// These classes are used on elements with <label> descendants | ||||
.radio, | ||||
.checkbox { | ||||
&.disabled, | ||||
fieldset[disabled] & { | ||||
label { | ||||
cursor: @cursor-disabled; | ||||
} | ||||
} | ||||
} | ||||