// FORM STYLES // ———–

// Groups of fields with labels on top (legends) fieldset {

//margin: 0px 0px $baseline+5 0px;
padding: $baseline 18px 0px 18px;

legend {
  border-bottom:solid 1px $grayLighter;
  display: block;
  width:100%;
  padding: 18px 0px 6px 0px;
  margin-left: -18px;
  margin-right: -18px;

  > span {
    font-size: $basefont;
    letter-spacing: 0.1em; 
    text-transform: uppercase;
    color: $gray;
    line-height: 1;
    padding-left: 20px;
    *padding: 0 0 5px 15px; /* IE6-7 */
    *line-height: 1.5; /* IE6-7 */
  }
}

// Parent element that clears floats and wraps labels and fields together
.field, .clearfix {
  margin-bottom: 12px;
  @include clearfix();
}

}

// Set font for forms label, input, select, textarea {

@include sans-serif-font(normal,13px,normal);
max-width: 98%;

}

// default labels are block elements (stacked layout) label {

display: block;
font-size: $basefont;
line-height: $baseline+4;
color: $grayDark;
font-weight: bold;

}

// Checkboxs and radio buttons input, input {

cursor: pointer;

}

// Inputs, Textareas, Selects input, textarea, select, .uneditable-input {

display: inline-block;
//height: $baseline;
padding: 5px 5px 6px 5px;
font-size: $basefont;
color: $black;
border: 1px solid #ccc;
@include border-radius(3px);

}

// remove padding from select select {

padding: initial;
margin: 0px;

}

// mini reset for non-html5 file types input, input {

width: auto;
height: auto;
padding: 0;
margin: 3px 0;
*margin-top: 0; /* IE6-7 */
line-height: normal;
border: none;

}

// search box input {

border: 1px solid #ccc;
@include border-radius(3px);

}

input {

background-color: $white;
padding: initial;
border: initial;
line-height: initial;
@include box-shadow(none);

}

input, input, input {

width: auto;
height: auto;

}

select, input {

height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
*height: auto; // Reset for IE7
line-height: $baseline * 1.5;
*margin-top: 4px; /* For IE7, add top margin to align select with labels */

}

// Make multiple select elements height not fixed select {

height: inherit;
background-color: $white; // Fixes Chromium bug of unreadable items

}

textarea {

height: auto;

}

// For text that needs to appear as an input but should not be an input .uneditable-input {

background-color: $white;
display: block;
border-color: #eee;
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;

}

// Placeholder text gets special styles; can’t be bundled together though for some reason :-moz-placeholder {

color: $grayLight;

} ::-webkit-input-placeholder {

color: $grayLight;

}

// Focus states input, textarea {

$transition: border linear .1s, box-shadow linear .1s;
@include transition($transition);
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.1));

} input:focus, textarea:focus {

outline: 0;
border-color: $concerto-blue-2;  //rgba(82,168,236,.8);
$shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 0 3px $concerto-blue-2; // rgba(82,168,236,.6);
@include box-shadow($shadow);

} input:focus, input:focus, select:focus {

@include box-shadow(none); // override for file inputs
outline: 1px dotted #666; // Select elements don't get box-shadow styles, so instead we do outline

}

// FORM FIELD FEEDBACK STATES // ————————–

// Mixin for form field states @mixin formFieldState($textColor: #555, $borderColor: ccc, $backgroundColor: f5f5f5) {

// Set the text color
> label,
.help-block,
.help-inline {
  color: $textColor;
}
// Style inputs accordingly
input,
textarea {
  color: $textColor;
  border-color: $borderColor;
  &:focus {
    border-color: darken($borderColor, 10%);
    @include box-shadow(0 0 6px lighten($borderColor, 20%));
  }
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on,
.input-append .add-on {
  color: $textColor;
  background-color: $backgroundColor;
  border-color: $textColor;
}

} // Error form .clearfix.error {

@include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));

} // Warning form .clearfix.warning {

@include formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));

} // Success form .clearfix.success {

@include formFieldState(#468847, #57a957, lighten(#57a957, 30%));

}

// Form element sizes // TODO v2: remove duplication here and just stick to .input- in light of adding .spanN sizes .input-mini, input.mini, textarea.mini, select.mini {

width: 60px;

} .input-small, input.small, textarea.small, select.small {

width: 90px;

} .input-medium, input.medium, textarea.medium, select.medium {

width: 150px;

} .input-large, input.large, textarea.large, select.large {

width: 210px;

} .input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {

width: 270px;

} .input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {

width: 530px;

} textarea.xxlarge {

overflow-y: auto;

}

// Grid style input sizes // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border @mixin formColumns($columnSpan: 1 ) {

display: inline-block;
float: none;
width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 10;
margin-left: 0;

} input, textarea {

// Default columns
&.span1     { @include formColumns(1); }
&.span2     { @include formColumns(2); }
&.span3     { @include formColumns(3); }
&.span4     { @include formColumns(4); }
&.span5     { @include formColumns(5); }
&.span6     { @include formColumns(6); }
&.span7     { @include formColumns(7); }
&.span8     { @include formColumns(8); }
&.span9     { @include formColumns(9); }
&.span10    { @include formColumns(10); }
&.span11    { @include formColumns(11); }
&.span12    { @include formColumns(12); }
&.span13    { @include formColumns(13); }
&.span14    { @include formColumns(14); }
&.span15    { @include formColumns(15); }
&.span16    { @include formColumns(16); }

}

.fillWidth {

width: 100%;
box-sizing: border-box;

}

// Disabled and read-only inputs input, select, textarea, input, select, textarea {

background-color: #f5f5f5;
border-color: #ddd;
cursor: not-allowed;

}

// Actions (the buttons) .actions {

background: #f5f5f5;
margin-top: $baseline * 2;
padding: ($baseline - 1) 18px $baseline 18px;
border-top: 1px solid #ddd;
@include border-radius(0 0 3px 3px);
.secondary-action {
  float: right;
  a {
    line-height: 30px;
    &:hover {
      text-decoration: underline;
    }
  }
}

}

// Actions on Sub-Forms like in manager/users/id .sub_actions {

padding-top: 5px;

}

// Help Text .help-inline, .help-block {

font-size: $basefont;
line-height: $baseline;
color: $grayLight;

} .help-inline {

padding-left: 5px;
*position: relative; /* IE6-7 */
*top: -5px; /* IE6-7 */

}

// Big blocks of help text .help-block {

display: block;
max-width: 600px;

}

// Inline Fields (input fields that appear as inline objects .inline-inputs {

color: $gray;
span {
  padding: 0 2px 0 1px;
}

}

// Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append {

input {
  @include border-radius(0 3px 3px 0);
}
.add-on {
  position: relative;
  background: #f5f5f5;
  border: 1px solid #ccc;
  z-index: 2;
  float: left;
  display: block;
  width: auto;
  min-width: 16px;
  height: 18px;
  padding: 4px 4px 4px 5px;
  margin-right: -1px;
  font-weight: normal;
  line-height: 18px;
  color: $grayDark;
  text-align: center;
  text-shadow: 0 1px 0 $white;
  @include border-radius(3px 0 0 3px);
}
.active {
  background: lighten($green, 30);
  border-color: $green;
}

} .input-prepend {

.add-on {
  *margin-top: 1px; /* IE6-7 */
}

} .input-append {

input {
  float: left;
  @include border-radius(3px 0 0 3px);
}
.add-on {
  @include border-radius(0 3px 3px 0);
  margin-right: 0;
  margin-left: -1px;
}

}

// Stacked options for forms (radio buttons or checkboxes) .inputs-list {

margin: 0 0 5px;
width: 100%;
li {
  display: block;
  padding: 0;
  width: 100%;
}
label {
  display: block;
  float: none;
  width: auto;
  padding: 0;
  //margin-left: 20px;
  line-height: $baseline;
  text-align: left;
  white-space: normal;
  strong {
    color: $gray;
  }
  small {
    font-size: $basefont - 2;
    font-weight: normal;
  }
}
.inputs-list {
  margin-left: 25px;
  margin-bottom: 10px;
  padding-top: 0;
}
&:first-child {
  padding-top: 6px;
}
li + li {
  padding-top: 2px;
}
input[type=radio],
input[type=checkbox] {
  margin-bottom: 0;
  //margin-left: -20px;
  float: left;
}

} .checkbox .inputs-list label {

margin-left: 6px;

}

.checkbox label {

width: auto !important;
text-align: left !important;
padding-top: 0px !important;
float: none !important;
display: inline !important;
line-height: 18px;

}

/* changed from block to inline to stop splitting name fields to two lines */ div.inline-inputs div.field_with_errors {

display: inline!important;

}

/* Progressive Disclosure: this class should be applied to the

containers for fields that are shown and hidden in response 
to a radio button or checkbox selection of a higher-order 
form field */

.sub-fields {

border-left: solid 8px $grayLighter;
padding-left: 18px;
padding-top: 4px;
padding-bottom: 4px;

}

/* Special variant: for forms on dark-background,

color form elements appropriately */

.form-dark {

legend {
  color: $gray;
  font-weight: bold;
  margin-bottom: 6px;
  @extend .uppercase;
}

label {
  color: $grayLighter;
}

}