You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
658 lines
14 KiB
658 lines
14 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Form related components |
|
* |
|
* Overrides for bootstrap form related components |
|
* |
|
* Version: 1.1 |
|
* Latest update: Mar 10, 2015 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
|
|
/* Form controls |
|
----------------------------------*/ |
|
|
|
// Normalize non-controls |
|
// ------------------------- |
|
|
|
// Legend |
|
legend { |
|
font-size: @font-size-small; |
|
padding-top: (@line-height-computed / 2); |
|
padding-bottom: (@line-height-computed / 2); |
|
text-transform: uppercase; |
|
|
|
// Remove top padding in first items |
|
fieldset:first-child & { |
|
&:first-child { |
|
padding-top: 0; |
|
} |
|
} |
|
|
|
// Control arrow |
|
.control-arrow { |
|
float: right; |
|
color: @text-muted; |
|
|
|
&:hover { |
|
color: @text-color; |
|
} |
|
} |
|
} |
|
|
|
// Label |
|
label { |
|
margin-bottom: @padding-base-vertical; |
|
font-weight: 400; |
|
} |
|
|
|
|
|
// Normalize form controls |
|
// ------------------------- |
|
|
|
// Multiple select |
|
select[multiple], |
|
select[size] { |
|
height: 200px; |
|
padding: @padding-base-vertical; |
|
|
|
// Option |
|
option { |
|
padding: @padding-base-vertical @padding-base-horizontal; |
|
border-radius: @input-border-radius; |
|
|
|
+ option { |
|
margin-top: 1px; |
|
} |
|
} |
|
} |
|
|
|
// Focus for file, radio, and checkbox |
|
input[type="file"]:focus, |
|
input[type="radio"]:focus, |
|
input[type="checkbox"]:focus { |
|
outline: 0; |
|
} |
|
|
|
|
|
// Common form controls |
|
// ------------------------- |
|
|
|
.form-control { |
|
.box-shadow(none); |
|
|
|
// Remove outline and shadow on focus |
|
&:focus { |
|
outline: 0; |
|
.box-shadow(none); |
|
} |
|
&[class*=bg-]:focus { |
|
border-color: transparent; |
|
} |
|
|
|
// Placeholder in colored input |
|
&[class*=bg-] { |
|
.placeholder(@input-placeholder-light); |
|
} |
|
} |
|
|
|
|
|
// Form controls options |
|
// ------------------------- |
|
|
|
// Rounded input |
|
.input-rounded { |
|
border-radius: 100px; |
|
} |
|
|
|
// Roundless input |
|
.input-roundless { |
|
border-radius: 0; |
|
} |
|
|
|
// Transparent input |
|
.form-control-unstyled { |
|
padding: 0; |
|
border: 0; |
|
background-color: transparent; |
|
} |
|
|
|
// Remove inputs shadow in mobile browsers |
|
input[type="text"], |
|
input[type="password"], |
|
input[type="search"], |
|
input[type="email"], |
|
input[type="number"], |
|
input[type="datetime"], |
|
input[type="datetime-local"], |
|
input[type="date"], |
|
input[type="month"], |
|
input[type="time"], |
|
input[type="week"], |
|
input[type="url"], |
|
input[type="tel"], |
|
textarea { |
|
-webkit-appearance: none; |
|
} |
|
|
|
|
|
|
|
/* Form components |
|
----------------------------------*/ |
|
|
|
// Form groups |
|
// ------------------------- |
|
|
|
.form-group { |
|
margin-bottom: @form-group-margin-bottom; |
|
position: relative; |
|
|
|
// Form group nesting |
|
.form-group { |
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
// Vertical spacing for stacked columns |
|
// |
|
// When nested form groups stack, add top margin for each column, except first. |
|
@media (max-width: @screen-sm-max) { |
|
div[class*="col-md-"]:not(.control-label) + div[class*="col-md-"] { |
|
margin-top: @form-group-margin-bottom; |
|
} |
|
} |
|
@media (max-width: @screen-md-max) { |
|
div[class*="col-lg-"]:not(.control-label) + div[class*="col-lg-"] { |
|
margin-top: @form-group-margin-bottom; |
|
} |
|
} |
|
@media (max-width: @screen-xs-max) { |
|
div[class*="col-sm-"]:not(.control-label) + div[class*="col-sm-"] { |
|
margin-top: @form-group-margin-bottom; |
|
} |
|
} |
|
} |
|
|
|
|
|
// Floating labels |
|
// ------------------------- |
|
|
|
.form-group-material { |
|
|
|
// Labels |
|
> .control-label { |
|
position: relative; |
|
top: @padding-base-vertical; |
|
.opacity(0); |
|
|
|
// Top spacing for contextual icon |
|
~ .form-control-feedback { |
|
top: (@line-height-computed + @padding-base-vertical); |
|
} |
|
} |
|
|
|
// Display label |
|
> .control-label.is-visible { |
|
top: 0; |
|
.opacity(1); |
|
} |
|
|
|
// Label animation |
|
> .control-label.animate { |
|
.transition(all linear 0.1s); |
|
} |
|
} |
|
|
|
|
|
// Checkboxes and radios |
|
// ------------------------- |
|
|
|
// Containers |
|
.radio, |
|
.checkbox { |
|
|
|
// Make them vertically centered depending on the base input height |
|
margin-top: ((@input-height-base - @line-height-computed) / 2); |
|
margin-bottom: ((@input-height-base - @line-height-computed) / 2); |
|
|
|
// Inner label element |
|
label { |
|
padding-left: (@checkbox-size + @content-padding-small); |
|
} |
|
} |
|
|
|
// Checkbox and radio inputs |
|
.radio input[type="radio"], |
|
.radio-inline input[type="radio"], |
|
.checkbox input[type="checkbox"], |
|
.checkbox-inline input[type="checkbox"] { |
|
margin-left: 0; |
|
left: 0; |
|
} |
|
|
|
// Siblings |
|
.radio + .radio, |
|
.checkbox + .checkbox { |
|
margin-top: 0; |
|
} |
|
|
|
// Radios and checkboxes on same line |
|
.radio-inline, |
|
.checkbox-inline { |
|
position: relative; |
|
padding-left: (@checkbox-size + @content-padding-small); |
|
} |
|
|
|
|
|
// |
|
// Right position |
|
// |
|
|
|
// Radio |
|
.radio-right { |
|
&.radio-inline, |
|
label { |
|
padding-left: 0; |
|
padding-right: (@checkbox-size + @content-padding-small); |
|
} |
|
|
|
input[type="radio"] { |
|
left: auto; |
|
right: 0; |
|
} |
|
} |
|
|
|
// Checkbox |
|
.checkbox-right:extend(.radio-right all) { |
|
&.checkbox-inline, |
|
label { |
|
&:extend(.radio-right.radio-inline); |
|
} |
|
input[type="checkbox"] { |
|
&:extend(.radio-right input[type="radio"]); |
|
} |
|
} |
|
|
|
// Inline siblings |
|
.radio-inline + .radio-inline, |
|
.checkbox-inline + .checkbox-inline { |
|
margin-left: @content-padding-base; |
|
} |
|
|
|
// Disabled state |
|
.radio, |
|
.checkbox { |
|
&, |
|
&-inline { |
|
&.disabled, |
|
fieldset[disabled] & { |
|
color: @gray-light; |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
/* Form control sizing |
|
----------------------------------*/ |
|
|
|
// The `.form-group-* form-control` variations are sadly duplicated to avoid the |
|
// issue documented in https://github.com/twbs/bootstrap/issues/15074. |
|
|
|
// XLarge |
|
.input-xlg { |
|
.input-size(@input-height-xlarge; @padding-xlarge-vertical; @padding-xlarge-horizontal; @font-size-xlarge; @line-height-xlarge; @input-border-radius-large); |
|
} |
|
.form-group-xlg { |
|
.form-control { |
|
.input-size(@input-height-xlarge; @padding-xlarge-vertical; @padding-xlarge-horizontal; @font-size-xlarge; @line-height-xlarge; @input-border-radius-large); |
|
} |
|
.form-control-static { |
|
height: @input-height-xlarge; |
|
min-height: (@line-height-computed + @font-size-xlarge); |
|
padding: @padding-xlarge-vertical @padding-xlarge-horizontal; |
|
font-size: @font-size-xlarge; |
|
line-height: @line-height-xlarge; |
|
} |
|
} |
|
|
|
// Mini |
|
.input-xs { |
|
.input-size(@input-height-mini; @padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @input-border-radius-small); |
|
} |
|
.form-group-xs { |
|
.form-control { |
|
.input-size(@input-height-mini; @padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @input-border-radius-small); |
|
} |
|
.form-control-static { |
|
height: @input-height-mini; |
|
min-height: (@line-height-computed + @font-size-small); |
|
padding: @padding-xs-vertical @padding-xs-horizontal; |
|
font-size: @font-size-small; |
|
line-height: @line-height-small; |
|
} |
|
} |
|
|
|
|
|
|
|
/* Form helpers |
|
----------------------------------*/ |
|
|
|
// Form control feedback states |
|
// ------------------------- |
|
|
|
// Default right icon position |
|
.has-feedback { |
|
|
|
// Ensure icons don't overlap text |
|
.form-control { |
|
padding-right: @input-height-base; |
|
|
|
&.input-xlg { |
|
padding-right: @input-height-xlarge; |
|
} |
|
|
|
&.input-lg { |
|
padding-right: @input-height-large; |
|
} |
|
|
|
&.input-sm { |
|
padding-right: @input-height-small; |
|
} |
|
|
|
&.input-xs { |
|
padding-right: @input-height-mini; |
|
} |
|
} |
|
} |
|
|
|
// Feedback icon |
|
.form-control-feedback { |
|
width: @input-height-base + 2; |
|
color: @input-color; |
|
z-index: 3; |
|
|
|
// Change color if comes after colored input |
|
input[class*=bg-] + & { |
|
color: #fff; |
|
} |
|
} |
|
|
|
// Left icon position |
|
.has-feedback-left { |
|
.form-control { |
|
padding-right: @padding-base-horizontal; |
|
padding-left: @input-height-base; |
|
|
|
&.input-xlg { |
|
padding-right: @padding-xlarge-vertical; |
|
padding-left: @input-height-xlarge; |
|
} |
|
|
|
&.input-lg { |
|
padding-right: @padding-large-horizontal; |
|
padding-left: @input-height-large; |
|
} |
|
|
|
&.input-sm { |
|
padding-right: @padding-small-horizontal; |
|
padding-left: @input-height-small; |
|
} |
|
|
|
&.input-xs { |
|
padding-right: @padding-xs-horizontal; |
|
padding-left: @input-height-mini; |
|
} |
|
} |
|
.form-control-feedback { |
|
right: auto; |
|
left: 0; |
|
} |
|
} |
|
|
|
|
|
// |
|
// Sizing |
|
// |
|
|
|
// XLarge |
|
.input-xlg + .form-control-feedback, |
|
.form-group-xlg > .form-control-feedback { |
|
width: @input-height-xlarge + 2; |
|
height: @input-height-xlarge; |
|
line-height: @input-height-xlarge; |
|
} |
|
|
|
// Large |
|
.input-lg + .form-control-feedback, |
|
.form-group-lg > .form-control-feedback { |
|
width: @input-height-large + 2; |
|
} |
|
|
|
// Small |
|
.input-sm + .form-control-feedback, |
|
.form-group-sm > .form-control-feedback { |
|
width: @input-height-small + 2; |
|
} |
|
|
|
// Mini |
|
.input-xs + .form-control-feedback, |
|
.form-group-xs > .form-control-feedback { |
|
width: @input-height-mini + 2; |
|
height: @input-height-mini; |
|
line-height: @input-height-mini; |
|
} |
|
|
|
|
|
// |
|
// Feedback states |
|
// |
|
|
|
.has-success, |
|
.has-warning, |
|
.has-error { |
|
.form-control:focus { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
|
|
|
|
// Help text |
|
// ------------------------- |
|
|
|
// Block helpers |
|
.help-block { |
|
color: @text-muted; |
|
font-size: @font-size-small; |
|
margin-top: @padding-base-vertical; |
|
margin-bottom: @padding-base-vertical; |
|
} |
|
|
|
// Inline helpers |
|
.help-inline { |
|
display: inline-block; |
|
color: @text-muted; |
|
font-size: @font-size-small; |
|
margin-top: (@padding-base-vertical + 1); |
|
margin-bottom: (@padding-base-vertical + 1); |
|
|
|
// Remove gutter if inside column |
|
.form-horizontal .form-group > div[class*="col-"] + & { |
|
margin-left: (@grid-gutter-width / 2); |
|
margin-right: (@grid-gutter-width / 2); |
|
} |
|
|
|
// Inline help works only on large screens |
|
@media (min-width: @screen-md) { |
|
display: inline-block; |
|
margin-top: (@padding-base-vertical + 1); |
|
margin-bottom: (@padding-base-vertical + 1); |
|
vertical-align: top; |
|
|
|
// Inline text helper |
|
&:not(.label) { |
|
color: @text-muted |
|
} |
|
|
|
// In large group |
|
.form-group-lg & { |
|
margin-top: (@padding-large-vertical + 1); |
|
} |
|
|
|
// In small group |
|
.form-group-sm & { |
|
margin-top: (@padding-small-vertical + 1); |
|
} |
|
|
|
// In mini group |
|
.form-group-xs & { |
|
margin-top: (@padding-xs-vertical + 1); |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
/* Form layouts |
|
----------------------------------*/ |
|
|
|
// Inline forms |
|
// ------------------------- |
|
|
|
.form-inline { |
|
@media (min-width: @screen-sm-min) { |
|
|
|
// Inline-block all the things for "inline" |
|
.form-group { |
|
& + .form-group { |
|
margin-left: @content-padding-base; |
|
} |
|
|
|
// Label setup |
|
> label { |
|
margin-right: @element-horizontal-spacing; |
|
position: relative; |
|
top: 1px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
// Horizontal forms |
|
// ------------------------- |
|
|
|
.form-horizontal { |
|
|
|
// Make form groups behave like rows |
|
.form-group { |
|
|
|
// Nesting |
|
.form-group { |
|
margin-left: 0; |
|
margin-right: 0; |
|
} |
|
} |
|
|
|
// Control label |
|
@media (min-width: @screen-sm-min) { |
|
.control-label { |
|
padding-bottom: @padding-base-vertical; |
|
padding-top: 0; |
|
|
|
&:not(.text-right) { |
|
text-align: left; |
|
} |
|
} |
|
} |
|
|
|
// Bottom padding for stacked control labels |
|
.control-label { |
|
@media (min-width: @screen-xs) { |
|
&[class*=col-xs-] { |
|
padding-top: (@padding-base-vertical + 1); |
|
} |
|
} |
|
|
|
@media (min-width: @screen-md) { |
|
&[class*=col-md-] { |
|
padding-top: (@padding-base-vertical + 1); |
|
} |
|
} |
|
|
|
@media (min-width: @screen-sm) { |
|
&[class*=col-sm-] { |
|
padding-top: (@padding-base-vertical + 1); |
|
} |
|
} |
|
|
|
@media (min-width: @screen-lg) { |
|
&[class*=col-lg-] { |
|
padding-top: (@padding-base-vertical + 1); |
|
} |
|
} |
|
} |
|
|
|
// Validation state icons |
|
.has-feedback { |
|
> .form-control-feedback { |
|
right: 0; |
|
} |
|
} |
|
.has-feedback-left { |
|
.form-control-feedback { |
|
right: auto; |
|
left: (@grid-gutter-width / 2); |
|
} |
|
|
|
> .form-control-feedback { |
|
left: 0; |
|
} |
|
} |
|
|
|
|
|
// |
|
// Form group sizes |
|
// |
|
|
|
// XLarge |
|
.form-group-xlg { |
|
@media (min-width: @screen-sm-min) { |
|
.control-label { |
|
font-size: @font-size-xlarge; |
|
padding-top: (@padding-xlarge-vertical + 1); |
|
} |
|
} |
|
} |
|
|
|
// Large |
|
.form-group-lg { |
|
@media (min-width: @screen-sm-min) { |
|
.control-label { |
|
padding-top: (@padding-large-vertical + 1); |
|
} |
|
} |
|
} |
|
|
|
// Small |
|
.form-group-sm { |
|
@media (min-width: @screen-sm-min) { |
|
.control-label { |
|
padding-top: (@padding-small-vertical + 1); |
|
} |
|
} |
|
} |
|
|
|
// Mini |
|
.form-group-xs { |
|
@media (min-width: @screen-sm-min) { |
|
.control-label { |
|
font-size: @font-size-small; |
|
padding-top: (@padding-xs-vertical + 1); |
|
} |
|
} |
|
} |
|
}
|
|
|