/* ------------------------------------------------------------------------------
*
* # Form related components
*
* Overrides for bootstrap form related components
*
* Version: 1.0
* Latest update: May 25, 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: 6px;
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;
}
}
}
// 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 + 10);
}
}
// 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-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
}
.form-group-xlg {
.form-control {
.input-size(@input-height-large + 4; @padding-large-vertical + 2; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
}
.form-control-static {
height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large;
}
}
// Small
.input-sm {
font-size: @font-size-base;
line-height: @line-height-base;
}
.form-group-sm {
.form-control {
font-size: @font-size-base;
line-height: @line-height-base;
}
.form-control-static {
font-size: @font-size-base;
line-height: @line-height-base;
}
}
// 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;
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;
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;
}
// 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;
margin-bottom: @padding-base-vertical;
// 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); // vertical padding + 1px border
vertical-align: top;
// Inline label helper
&.label {
margin-top: (@padding-base-vertical + 2); // vertical padding + 2px height difference
}
// Inline text helper
&:not(.label) {
color: @text-muted
}
// In large group
.form-group-lg & {
margin-top: 10px;
&.label {
margin-top: 11px;
}
}
// In small group
.form-group-sm & {
margin-top: 7px;
&.label {
margin-top: 8px;
}
}
// In mini group
.form-group-xs & {
margin-top: 6px;
&.label {
margin-top: 7px;
}
}
}
}
/* 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: 6px;
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-large;
padding-top: (@padding-xlarge-vertical + 1);
}
}
}
// Large
.form-group-lg {
@media (min-width: @screen-sm-min) {
.control-label {
font-size: @font-size-large;
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 {
padding-top: (@padding-xs-vertical + 1);
}
}
}
}