// 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);
}
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; }
}