2012-06-29 04:46:45 +00:00
//
// Forms
// --------------------------------------------------
2011-06-30 07:15:37 +00:00
2011-11-12 08:46:02 +00:00
2013-07-26 01:29:51 +00:00
// Normalize non-controls
//
// Restyle and baseline non-control form elements.
2012-01-20 21:16:40 +00:00
fieldset {
2014-06-13 18:37:40 +00:00
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
2014-01-24 17:55:59 +00:00
// 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 ;
2014-12-11 20:05:29 +00:00
padding : 0 ;
margin : 0 ;
border : 0 ;
2011-08-25 07:13:40 +00:00
}
2011-08-17 05:58:01 +00:00
2011-09-29 08:40:27 +00:00
legend {
display : block ;
width : 100 % ;
2012-01-20 21:16:40 +00:00
padding : 0 ;
2014-12-02 22:02:35 +00:00
margin-bottom : $line-height-computed ;
font-size : ( $font-size-base * 1 .5 ) ;
2013-05-15 06:21:30 +00:00
line-height : inherit ;
2014-12-02 22:02:35 +00:00
color : $legend-color ;
2012-01-20 21:16:40 +00:00
border : 0 ;
2014-12-02 22:02:35 +00:00
border-bottom : 1 px solid $legend-border-color ;
2011-08-25 07:13:40 +00:00
}
2011-08-17 05:58:01 +00:00
2011-08-25 07:13:40 +00:00
label {
2012-11-30 21:35:20 +00:00
display : inline-block ;
2011-09-29 08:40:27 +00:00
margin-bottom : 5 px ;
2011-08-25 07:13:40 +00:00
}
2011-08-17 05:58:01 +00:00
2012-05-15 06:40:06 +00:00
2013-07-26 01:29:51 +00:00
// Normalize form controls
2014-01-23 03:43:08 +00:00
//
// 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.
2012-11-30 21:35:20 +00:00
2013-04-14 04:45:21 +00:00
// Override content-box in Normalize (* isn't specific enough)
input [ type = " search " ] {
2014-07-08 09:04:48 +00:00
box-sizing : border-box ;
2013-04-14 04:45:21 +00:00
}
2012-05-15 07:17:02 +00:00
// Position radios and checkboxes better
2012-05-15 06:40:06 +00:00
input [ type = " radio " ] ,
input [ type = " checkbox " ] {
2012-08-14 22:34:10 +00:00
margin : 4 px 0 0 ;
2014-07-09 02:20:45 +00:00
margin-top : 1 px \ 9 ; // IE9
2012-05-15 07:17:02 +00:00
line-height : normal ;
2012-01-25 19:21:44 +00:00
}
2012-05-15 07:17:02 +00:00
2014-01-10 22:34:25 +00:00
// Set the height of file controls to match text inputs
2012-01-28 04:05:03 +00:00
input [ type = " file " ] {
2013-07-21 04:09:03 +00:00
display : block ;
2011-09-12 01:01:29 +00:00
}
2011-09-02 05:53:24 +00:00
2014-01-10 02:07:14 +00:00
// Make range inputs behave like textual form controls
input [ type = " range " ] {
display : block ;
width : 100 % ;
}
2011-09-14 15:58:20 +00:00
// Make multiple select elements height not fixed
2011-12-27 22:08:07 +00:00
select [ multiple ] ,
select [ size ] {
2012-01-25 19:51:13 +00:00
height : auto ;
2011-09-14 15:58:20 +00:00
}
2014-01-10 22:34:25 +00:00
// Focus for file, radio, and checkbox
2012-05-15 16:04:44 +00:00
input [ type = " file " ] : focus ,
input [ type = " radio " ] : focus ,
input [ type = " checkbox " ] : focus {
2014-12-02 22:02:35 +00:00
@include tab-focus () ;
2012-05-15 16:04:44 +00:00
}
2012-01-26 18:00:09 +00:00
2013-08-24 07:14:09 +00:00
// Adjust output element
output {
display : block ;
2014-12-02 22:02:35 +00:00
padding-top : ( $padding-base-vertical + 1 ) ;
font-size : $font-size-base ;
line-height : $line-height-base ;
color : $input-color ;
2013-08-24 07:14:09 +00:00
}
2011-08-17 05:58:01 +00:00
2011-08-25 07:13:40 +00:00
2014-12-02 22:02:35 +00:00
//
2013-07-26 01:29:51 +00:00
// Common form controls
//
2014-12-02 22:02:35 +00:00
2013-07-26 01:29:51 +00:00
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]
. form-control {
display : block ;
width : 100 % ;
2014-12-02 22:02:35 +00:00
height : $input-height-base ; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding : $padding-base-vertical $padding-base-horizontal ;
font-size : $font-size-base ;
line-height : $line-height-base ;
color : $input-color ;
background-color : $input-bg ;
2013-08-28 22:37:34 +00:00
background-image : none ; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
2014-12-02 22:02:35 +00:00
border : 1 px solid $input-border ;
2015-01-19 22:48:12 +00:00
@include border-radius ( $input-border-radius ) ; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
2014-12-02 22:02:35 +00:00
@include box-shadow ( inset 0 1 px 1 px rgba ( 0 , 0 , 0 ,. 075 )) ;
2014-07-08 09:04:48 +00:00
transition : border-color ease-in-out .15 s , box-shadow ease-in-out .15 s ;
2013-07-26 01:29:51 +00:00
2013-08-05 06:05:54 +00:00
// Customize the `:focus` state to imitate native WebKit styles.
2014-12-02 22:02:35 +00:00
@include form-control-focus () ;
2013-07-26 01:29:51 +00:00
2013-11-02 08:35:51 +00:00
// Placeholder
2014-07-08 09:04:48 +00:00
& : : placeholder {
2014-12-02 22:02:35 +00:00
color : $input-color-placeholder ;
2014-12-23 01:27:08 +00:00
opacity : 1 ; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
2014-07-08 09:04:48 +00:00
}
2013-11-02 08:35:51 +00:00
2013-07-26 01:29:51 +00:00
// Disabled and read-only inputs
2014-02-07 10:58:10 +00:00
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
2014-12-22 21:33:58 +00:00
& : disabled ,
2013-07-26 01:29:51 +00:00
& [ readonly ] ,
fieldset [ disabled ] & {
2014-12-02 22:02:35 +00:00
background-color : $input-bg-disabled ;
2014-12-23 00:54:50 +00:00
opacity : 1 ; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
2013-07-26 01:29:51 +00:00
}
2015-03-01 21:44:10 +00:00
2015-01-29 21:51:21 +00:00
& [ disabled ] ,
fieldset [ disabled ] & {
2015-03-01 21:44:10 +00:00
cursor : $cursor-disabled ;
2015-01-29 21:51:21 +00:00
}
2013-07-26 01:29:51 +00:00
2014-12-03 19:23:53 +00:00
// Reset height for `textarea`s
textarea . form-control {
height : auto ;
padding-top : $padding-base-horizontal ;
padding-bottom : $padding-base-horizontal ;
2013-07-26 01:29:51 +00:00
}
2014-02-07 10:08:32 +00:00
// 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 ;
}
2014-05-21 23:44:09 +00:00
// Special styles for iOS temporal inputs
2013-12-15 23:27:46 +00:00
//
2014-05-21 23:44:09 +00:00
// In Mobile Safari, setting `display: block` on temporal inputs causes the
2014-11-09 23:04:32 +00:00
// 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
2014-12-22 23:02:34 +00:00
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
2014-02-07 10:08:32 +00:00
2014-11-09 23:04:32 +00:00
@media screen and ( - webkit-min-device-pixel-ratio : 0 ) {
2014-11-09 23:03:33 +00:00
input [ type = " date " ] ,
input [ type = " time " ] ,
input [ type = " datetime-local " ] ,
input [ type = " month " ] {
2015-01-04 04:16:46 +00:00
line-height : $input-height-base ;
2014-12-23 03:28:29 +00:00
& . input-sm ,
. input-group-sm & {
2015-01-04 04:16:46 +00:00
line-height : $input-height-sm ;
2014-12-23 03:28:29 +00:00
}
& . input-lg ,
. input-group-lg & {
2015-01-04 04:16:46 +00:00
line-height : $input-height-lg ;
2014-12-23 03:28:29 +00:00
}
2014-08-03 04:16:32 +00:00
}
}
2013-07-26 01:29:51 +00:00
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
. form-group {
2015-02-02 20:16:26 +00:00
margin-bottom : @ form-group-margin-bottom ;
2013-07-26 01:29:51 +00:00
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
2012-01-05 22:11:41 +00:00
. radio ,
. checkbox {
2014-06-11 03:50:58 +00:00
position : relative ;
2012-11-30 21:35:20 +00:00
display : block ;
2013-05-09 22:05:06 +00:00
margin-top : 10 px ;
margin-bottom : 10 px ;
2014-03-10 23:43:57 +00:00
2013-01-16 20:20:34 +00:00
label {
2014-12-02 22:02:35 +00:00
min-height : $line-height-computed ; // Ensure the input doesn't jump when there is no text
2014-03-10 23:41:56 +00:00
padding-left : 20 px ;
margin-bottom : 0 ;
2013-01-16 20:20:34 +00:00
font-weight : normal ;
2013-05-03 18:56:00 +00:00
cursor : pointer ;
2013-01-16 20:20:34 +00:00
}
2012-01-05 22:11:41 +00:00
}
2012-01-28 04:05:03 +00:00
. radio input [ type = " radio " ] ,
2013-01-16 20:20:34 +00:00
. radio-inline input [ type = " radio " ] ,
. checkbox input [ type = " checkbox " ] ,
. checkbox-inline input [ type = " checkbox " ] {
2014-06-11 03:50:58 +00:00
position : absolute ;
margin-top : 4 px \ 9 ;
2014-12-11 20:05:29 +00:00
margin-left : - 20 px ;
2012-01-05 22:11:41 +00:00
}
2014-06-11 03:50:58 +00:00
2013-01-16 20:20:34 +00:00
. radio + . radio ,
. checkbox + . checkbox {
2013-05-09 22:05:06 +00:00
margin-top : - 5 px ; // Move up sibling radios or checkboxes for tighter spacing
2013-01-16 20:20:34 +00:00
}
2012-01-05 22:11:41 +00:00
2012-01-07 07:59:22 +00:00
// Radios and checkboxes on same line
2013-01-16 20:20:34 +00:00
. radio-inline ,
. checkbox-inline {
2015-01-23 19:14:10 +00:00
position : relative ;
2012-01-07 07:59:22 +00:00
display : inline-block ;
2013-01-16 20:20:34 +00:00
padding-left : 20 px ;
2012-01-07 08:26:58 +00:00
margin-bottom : 0 ;
2013-01-16 20:20:34 +00:00
font-weight : normal ;
2014-12-11 20:05:29 +00:00
vertical-align : middle ;
2013-05-03 18:56:00 +00:00
cursor : pointer ;
2012-01-07 07:59:22 +00:00
}
2013-01-16 20:20:34 +00:00
. radio-inline + . radio-inline ,
. checkbox-inline + . checkbox-inline {
margin-top : 0 ;
2012-01-07 08:26:58 +00:00
margin-left : 10 px ; // space out consecutive inline controls
2012-01-07 07:59:22 +00:00
}
2013-08-15 01:20:28 +00:00
// Apply same disabled cursor tweak as for inputs
2014-06-05 20:31:39 +00:00
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
2013-08-15 18:52:22 +00:00
//
2013-08-15 01:20:28 +00:00
// Note: Neither radios nor checkboxes can be readonly.
2013-08-15 18:52:22 +00:00
input [ type = " radio " ] ,
2014-06-05 20:31:39 +00:00
input [ type = " checkbox " ] {
2014-12-22 21:33:58 +00:00
& : disabled ,
2014-06-05 20:31:39 +00:00
& . disabled ,
fieldset [ disabled ] & {
2014-12-02 22:02:35 +00:00
cursor : $cursor-disabled ;
2014-06-05 20:31:39 +00:00
}
}
// These classes are used directly on <label>s
2013-08-15 01:20:28 +00:00
. radio-inline ,
. checkbox-inline {
2014-06-05 20:31:39 +00:00
& . disabled ,
2013-08-15 01:20:28 +00:00
fieldset [ disabled ] & {
2014-12-02 22:02:35 +00:00
cursor : $cursor-disabled ;
2013-08-15 01:20:28 +00:00
}
}
2014-06-05 20:31:39 +00:00
// These classes are used on elements with <label> descendants
. radio ,
. checkbox {
& . disabled ,
fieldset [ disabled ] & {
label {
2014-12-02 22:02:35 +00:00
cursor : $cursor-disabled ;
2014-06-05 20:31:39 +00:00
}
}
}
2012-01-05 22:11:41 +00:00
2013-12-15 23:24:52 +00:00
2014-06-20 20:24:14 +00:00
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
. form-control-static {
// Size it appropriately next to real form controls
2014-12-02 22:02:35 +00:00
padding-top : ( $padding-base-vertical + 1 ) ;
padding-bottom : ( $padding-base-vertical + 1 ) ;
2014-06-20 20:24:14 +00:00
// Remove default margin from `p`
margin-bottom : 0 ;
2015-01-29 13:19:09 +00:00
min-height : ( @ line - height-computed + @ font-size-base ) ;
2014-06-20 20:24:14 +00:00
& . input-lg ,
& . input-sm {
padding-right : 0 ;
2014-12-11 20:05:29 +00:00
padding-left : 0 ;
2014-06-20 20:24:14 +00:00
}
}
2013-07-26 01:29:51 +00:00
// Form control sizing
2013-12-15 23:24:52 +00:00
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
2014-11-30 04:57:04 +00:00
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
2013-12-15 23:24:52 +00:00
2014-12-02 22:02:35 +00:00
@include input-size ( ' .input-sm ' , $input-height-sm , $padding-sm-vertical , $padding-sm-horizontal , $font-size-sm , $line-height-sm , $input-border-radius-sm ) ;
2014-11-30 04:57:04 +00:00
. form-group-sm {
2014-12-02 22:02:35 +00:00
@include input-size ( ' .form-control ' , $input-height-sm , $padding-sm-vertical , $padding-sm-horizontal , $font-size-sm , $line-height-sm , $input-border-radius-sm ) ;
2015-01-19 22:48:12 +00:00
2015-01-16 00:03:13 +00:00
. form-control-static {
2015-01-19 22:48:12 +00:00
height : $input-height-sm ;
padding : $padding-sm-vertical $padding-sm-horizontal ;
font-size : $font-size-sm ;
line-height : $line-height-sm ;
2015-03-01 21:44:10 +00:00
min-height : ( $line-height-computed + $font-size-sm ) ;
2015-01-16 00:03:13 +00:00
}
2014-11-30 04:57:04 +00:00
}
2013-07-30 00:30:36 +00:00
2014-12-02 22:02:35 +00:00
@include input-size ( ' .input-lg ' , $input-height-lg , $padding-lg-vertical , $padding-lg-horizontal , $font-size-lg , $line-height-lg , $input-border-radius-lg ) ;
2014-11-30 04:57:04 +00:00
. form-group-lg {
2014-12-02 22:02:35 +00:00
@include input-size ( ' .form-control ' , $input-height-lg , $padding-lg-vertical , $padding-lg-horizontal , $font-size-lg , $line-height-lg , $input-border-radius-lg ) ;
2015-01-19 22:48:12 +00:00
2015-01-16 00:03:13 +00:00
. form-control-static {
2015-01-19 22:48:12 +00:00
height : $input-height-lg ;
padding : $padding-lg-vertical $padding-lg-horizontal ;
font-size : $font-size-lg ;
line-height : $line-height-lg ;
2015-03-01 21:44:10 +00:00
min-height : ( $line-height-computed + $font-size-lg ) ;
2015-01-16 00:03:13 +00:00
}
2014-11-30 04:57:04 +00:00
}
2011-08-17 05:58:01 +00:00
2012-09-25 22:01:03 +00:00
2013-07-26 01:29:51 +00:00
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
2011-09-29 08:40:27 +00:00
2013-12-16 01:15:09 +00:00
. has-feedback {
// Enable absolute positioning
position : relative ;
// Ensure icons don't overlap text
. form-control {
2014-12-02 22:02:35 +00:00
padding-right : ( $input-height-base * 1 .25 ) ;
2013-12-16 01:15:09 +00:00
}
2014-03-04 22:12:57 +00:00
}
2014-07-08 07:33:21 +00:00
// Feedback icon
2014-03-04 22:12:57 +00:00
. form-control-feedback {
position : absolute ;
2014-07-01 15:15:00 +00:00
top : 0 ;
2014-03-04 22:12:57 +00:00
right : 0 ;
2014-03-25 03:07:54 +00:00
z-index : 2 ; // Ensure icon is above input groups
2014-03-04 22:12:57 +00:00
display : block ;
2014-12-02 22:02:35 +00:00
width : $input-height-base ;
height : $input-height-base ;
line-height : $input-height-base ;
2014-03-04 22:12:57 +00:00
text-align : center ;
2014-07-09 23:21:45 +00:00
pointer-events : none ;
2014-03-04 22:12:57 +00:00
}
. input-lg + . form-control-feedback {
2014-12-02 22:02:35 +00:00
width : $input-height-lg ;
height : $input-height-lg ;
line-height : $input-height-lg ;
2014-03-04 22:12:57 +00:00
}
. input-sm + . form-control-feedback {
2014-12-02 22:02:35 +00:00
width : $input-height-sm ;
height : $input-height-sm ;
line-height : $input-height-sm ;
2013-12-16 01:15:09 +00:00
}
2014-12-02 22:02:35 +00:00
// Form validation states
2014-01-07 21:24:45 +00:00
. has-success {
2014-12-02 22:02:35 +00:00
@include form-control-validation ( $state-success-text , $state-success-text , $state-success-bg ) ;
2014-01-07 21:24:45 +00:00
}
2012-12-26 21:57:52 +00:00
. has-warning {
2014-12-02 22:02:35 +00:00
@include form-control-validation ( $state-warning-text , $state-warning-text , $state-warning-bg ) ;
2012-01-25 00:54:35 +00:00
}
2012-12-26 21:57:52 +00:00
. has-error {
2014-12-02 22:02:35 +00:00
@include form-control-validation ( $state-danger-text , $state-danger-text , $state-danger-bg ) ;
2011-11-12 08:46:02 +00:00
}
2011-09-29 08:40:27 +00:00
2014-07-01 15:15:00 +00:00
// Reposition feedback icon if input has visible label above
. has-feedback label {
2014-07-03 05:54:56 +00:00
2014-12-11 20:05:29 +00:00
~ . form-control-feedback {
top : ( $line-height-computed + 5 ) ; // Height of the `label` and its margin
2014-07-01 15:15:00 +00:00
}
2014-12-11 20:05:29 +00:00
2014-07-01 15:15:00 +00:00
& . sr-only ~ . form-control-feedback {
2014-12-11 20:05:29 +00:00
top : 0 ;
2014-07-01 15:15:00 +00:00
}
2014-04-11 00:43:53 +00:00
}
2013-07-26 01:29:51 +00:00
// Help text
//
// Apply to any element you wish to create light text for placement immediately
// below a form control. Use for general help, formatting, or instructional text.
2011-09-29 02:15:31 +00:00
2012-01-06 05:43:28 +00:00
. help-block {
2012-02-13 06:49:06 +00:00
display : block ; // account for any element using help-block
2013-05-09 22:05:06 +00:00
margin-top : 5 px ;
margin-bottom : 10 px ;
2014-12-02 22:02:35 +00:00
color : lighten ( $text-color , 25 % ) ; // lighten the text some for contrast
2011-05-04 01:09:25 +00:00
}
2013-08-03 01:48:44 +00:00
// Inline forms
//
2013-08-12 18:07:23 +00:00
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
2013-08-12 23:09:21 +00:00
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
2013-08-03 01:48:44 +00:00
. form-inline {
2013-08-05 18:47:12 +00:00
2013-08-12 18:07:23 +00:00
// Kick in the inline
2014-12-29 21:40:19 +00:00
@include media-breakpoint-up ( sm ) {
2013-08-12 18:07:23 +00:00
// Inline-block all the things for "inline"
2013-12-16 01:15:09 +00:00
. form-group {
2013-08-12 18:07:23 +00:00
display : inline-block ;
margin-bottom : 0 ;
vertical-align : middle ;
}
2013-08-12 23:09:21 +00:00
// In navbar-form, allow folks to *not* use `.form-group`
. form-control {
display : inline-block ;
2013-12-16 01:15:09 +00:00
width : auto ; // Prevent labels from stacking above inputs in `.form-group`
2013-12-08 09:59:44 +00:00
vertical-align : middle ;
2013-08-12 23:09:21 +00:00
}
2014-03-10 04:25:51 +00:00
2014-07-24 03:54:07 +00:00
// Make static controls behave like regular ones
. form-control-static {
display : inline-block ;
}
2014-03-10 04:25:51 +00:00
. input-group {
display : inline-table ;
vertical-align : middle ;
. input-group-addon ,
. input-group-btn ,
. form-control {
width : auto ;
}
}
2014-02-07 10:58:10 +00:00
// Input groups need that 100% width though
. input-group > . form-control {
width : 100 % ;
}
2013-08-12 18:07:23 +00:00
2013-12-16 01:15:09 +00:00
. control-label {
margin-bottom : 0 ;
vertical-align : middle ;
2013-12-15 22:52:49 +00:00
}
2013-08-12 18:07:23 +00:00
// Remove default margin on radios/checkboxes that were used for stacking, and
2014-12-22 22:57:40 +00:00
// then undo the floating of radios and checkboxes to match.
2013-08-12 18:07:23 +00:00
. radio ,
. checkbox {
display : inline-block ;
margin-top : 0 ;
margin-bottom : 0 ;
2013-12-08 09:59:44 +00:00
vertical-align : middle ;
2014-05-23 01:42:21 +00:00
label {
padding-left : 0 ;
}
2013-08-12 18:07:23 +00:00
}
. radio input [ type = " radio " ] ,
. checkbox input [ type = " checkbox " ] {
2014-06-25 23:56:36 +00:00
position : relative ;
2013-08-12 18:07:23 +00:00
margin-left : 0 ;
}
2013-12-16 01:15:09 +00:00
2014-07-03 05:54:56 +00:00
// Re-override the feedback icon.
2013-12-16 01:15:09 +00:00
. has-feedback . form-control-feedback {
top : 0 ;
}
2014-12-02 22:02:35 +00:00
}
2013-08-03 01:48:44 +00:00
}
// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
. form-horizontal {
2013-08-18 22:41:24 +00:00
2014-03-10 00:22:52 +00:00
// Consistent vertical alignment of radios and checkboxes
//
2014-03-10 04:35:48 +00:00
// Labels also get some reset styles, but that is scoped to a media query below.
2013-08-18 22:41:24 +00:00
. radio ,
. checkbox ,
. radio-inline ,
. checkbox-inline {
2014-12-11 20:05:29 +00:00
padding-top : ( $padding-base-vertical + .1 ) ; // Default padding plus a border
2013-08-18 22:41:24 +00:00
margin-top : 0 ;
margin-bottom : 0 ;
}
2013-12-01 07:17:43 +00:00
// Account for padding we're adding to ensure the alignment and of help text
// and other content below items
. radio ,
. checkbox {
2014-12-02 22:02:35 +00:00
min-height : ( $line-height-computed + ( $padding-base-vertical + .1 )) ;
2013-12-01 07:17:43 +00:00
}
2013-08-18 22:41:24 +00:00
// Make form groups behave like rows
2013-08-03 01:48:44 +00:00
. form-group {
2014-12-02 22:02:35 +00:00
@include make-row () ;
2013-08-03 01:48:44 +00:00
}
2014-03-10 00:22:52 +00:00
// Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example.
2014-12-29 21:40:19 +00:00
@include media-breakpoint-up ( sm ) {
2013-08-18 22:41:24 +00:00
. control-label {
2014-12-02 22:02:35 +00:00
padding-top : ( $padding-base-vertical + .1 ) ; // Default padding plus a border
2014-12-11 20:05:29 +00:00
margin-bottom : 0 ;
text-align : right ;
2013-08-18 22:41:24 +00:00
}
2014-12-02 22:02:35 +00:00
}
2013-12-16 01:15:09 +00:00
// Validation states
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
. has-feedback . form-control-feedback {
2014-12-02 22:02:35 +00:00
right : ( $grid-gutter-width / 2 ) ;
2013-12-16 01:15:09 +00:00
}
2014-06-19 01:19:17 +00:00
// Form group sizes
//
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`.
. form-group-lg {
2014-12-29 21:40:19 +00:00
@include media-breakpoint-up ( sm ) {
2014-06-19 01:19:17 +00:00
. control-label {
2014-12-02 22:02:35 +00:00
padding-top : $padding-lg-vertical ;
2014-06-19 01:19:17 +00:00
}
}
}
. form-group-sm {
2014-12-29 21:40:19 +00:00
@include media-breakpoint-up ( sm ) {
2014-06-19 01:19:17 +00:00
. control-label {
2014-12-02 22:02:35 +00:00
padding-top : ( $padding-sm-vertical + .1 ) ;
2014-06-19 01:19:17 +00:00
}
}
}
2013-08-03 01:48:44 +00:00
}