prelude-framework 0.7

data/scss/prelude/modules/_forms.scss

@@ -0,0 +1,634 @@
+// =============================================================================
+// Forms
+//
+// Base styles for various input types, form layouts, and states
+//
+// Table of contents:
+// 1. General styles
+// 2. Form controls
+// 3. Checkboxes & radios
+// 4. Input sizes
+// 5. States
+// 6. Form actions
+// 7. Help text
+// 8. Input groups
+// 9. Search form
+// 10. Horizontal & vertical forms
+//
+// =============================================================================
+
+
+// Form states and alerts
+// =============================================================================
+
+@mixin formFieldState($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
+  // Set the text color
+  > label,
+  .help-block,
+  .help-inline {
+    color: $text-color;
+  }
+  // Style inputs accordingly
+  .checkbox,
+  .radio,
+  input,
+  select,
+  textarea {
+    color: $text-color;
+    border-color: $border-color;
+    &:focus {
+      border-color: darken($border-color, 10%);
+      @include box-shadow(0 0 6px lighten($border-color, 20%));
+    }
+  }
+  // Give a small background color for input--prepend/-append
+  .input--prepend .add-on,
+  .input--append .add-on {
+    color: $text-color;
+    background-color: $background-color;
+    border-color: $text-color;
+  }
+}
+
+
+// =============================================================================
+// 1. General styles
+// =============================================================================
+
+// Make all forms have space below them
+form {
+  margin: 0 0 $base-line-height;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+// Groups of fields with labels on top (legends)
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: $base-line-height * 1.5;
+  font-size: $base-font-size * 1.5;
+  line-height: $base-line-height * 2;
+  color: $gray-dark;
+  border: 0;
+  border-bottom: 1px solid #e5e5e5;
+
+  // Small
+  small {
+    font-size: $base-line-height * .75;
+    color: $gray-light;
+  }
+}
+
+// Set font for forms
+label,
+input,
+button,
+select,
+textarea {
+  @extend .milli !optional;
+  font-weight: normal;
+  line-height: $base-line-height;
+}
+
+input,
+button,
+select,
+textarea {
+  font-family: $base-font-family; // And only set font-family here for those that need it (note the missing label element)
+}
+
+// Identify controls by their labels
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+
+// =============================================================================
+// 2. Form controls
+// =============================================================================
+
+// Shared size and type resets
+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"],
+.input--uneditable {
+  display: inline-block;
+  height: 37px; // @was: $base-line-height
+  padding: 4px .5em; // @was: 4px
+  margin-bottom: 9px;
+  @extend .milli !optional;
+  line-height: $base-line-height;
+  color: $gray;
+}
+
+// Reset appearance properties for textual inputs and textarea
+// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
+input,
+textarea {
+  width: 210px;
+}
+
+// Reset height since textareas have rows
+textarea {
+  height: auto;
+}
+
+// Everything else
+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"],
+.input--uneditable {
+  border-radius: $input-border-radius;
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  @include transition(border linear .2s, box-shadow linear .2s);
+  background-color: $input-background;
+  border: 1px solid $input-border;
+
+  // Focus state
+  &:focus {
+    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
+    border-color: rgba(82,168,236,.8);
+    outline: 0;
+    outline: thin dotted \9; /* IE6-9 */
+  }
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 5px 0;
+  line-height: normal;
+  cursor: pointer;
+}
+
+// Reset width of input buttons, radios, checkboxes
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+  width: auto; // Override of generic input selector
+}
+
+// Make uneditable textareas behave like a textarea
+.uneditable-textarea {
+  width: auto;
+  height: auto;
+}
+
+// Set the height of select and file controls to match text inputs
+select,
+input[type="file"] {
+  line-height: 28px;
+}
+
+// Make select elements obey height by applying a border
+select {
+  width: 220px; // default input width + 10px of padding that doesn't get applied
+  border: 1px solid #bbb;
+}
+
+// Make multiple select elements height not fixed
+select[multiple],
+select[size] {
+  height: auto;
+}
+
+// Focus for select, file, radio, and checkbox
+select:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  //.tab-focus();
+}
+
+
+// =============================================================================
+// 3. Checkboxes & radios
+// =============================================================================
+
+// Indent the labels to position radios/checkboxes as hanging
+.radio,
+.checkbox {
+  min-height: 18px; // clear the floating input if there is no label text
+  padding-left: 18px;
+}
+
+.radio input[type="radio"],
+.checkbox input[type="checkbox"] {
+  float: left;
+  margin-left: -18px;
+}
+
+// Move the options list down to align with labels
+.controls > .radio:first-child,
+.controls > .checkbox:first-child {
+  padding-top: 5px; // has to be padding because margin collaspes
+}
+
+// Radios and checkboxes on same line
+// TODO v3: Convert .inline to .control-inline
+.radio.inline,
+.checkbox.inline {
+  display: inline-block;
+  padding-top: 5px;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
+  margin-left: 10px; // space out consecutive inline controls
+}
+
+
+// =============================================================================
+// 4. Input sizes
+// =============================================================================
+
+// General classes for quick sizes
+.input--mini       { width: 60px; }
+.input--small      { width: 90px; }
+.input--medium     { width: 150px; }
+.input--large      { width: 210px; }
+.input--xlarge     { width: 270px; }
+.input--xxlarge    { width: 530px; }
+.input--expand     { width: 100%; }
+
+// Grid style input sizes
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.input--uneditable[class*="span"],
+// Redeclare since the fluid row class is more specific
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .input--uneditable[class*="span"] {
+  float: none;
+  margin-left: 0;
+}
+
+// Ensure input--prepend/append never wraps
+.input--append input[class*="span"],
+.input--append .input--uneditable[class*="span"],
+.input--prepend input[class*="span"],
+.input--prepend .input--uneditable[class*="span"],
+.row-fluid .input--prepend [class*="span"],
+.row-fluid .input--append [class*="span"] {
+  display: inline-block;
+}
+
+
+// =============================================================================
+// 5. States
+// =============================================================================
+
+
+// Disabled states
+// =============================================================================
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  cursor: not-allowed;
+  background-color: $input-disabled-background;
+  border-color: #ddd;
+}
+
+// Explicitly reset the colors here
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+  background-color: transparent;
+}
+
+
+// Form field feedback states
+// =============================================================================
+
+// Warning
+.control-group.warning {
+  @include formFieldState($warning-text, $warning-text, $warning-background);
+}
+
+// Error
+.control-group.error {
+  @include formFieldState($error-text, $error-text, $error-background);
+}
+
+// Success
+.control-group.success {
+  @include formFieldState($success-text, $success-text, $success-background);
+}
+
+// HTML5 invalid states
+// Shares styles with the .control-group.error above
+input:focus:required:invalid,
+textarea:focus:required:invalid,
+select:focus:required:invalid {
+  color: #b94a48;
+  border-color: #ee5f5b;
+  &:focus {
+    border-color: darken(#ee5f5b, 10%);
+    @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
+  }
+}
+
+
+// =============================================================================
+// 6. Form actions
+// =============================================================================
+
+.form-actions {
+  @include pie-clearfix; // Adding clearfix to allow for .pull-right button containers
+  padding: ($base-line-height - 1) 20px $base-line-height;
+  margin-top: $base-line-height;
+  margin-bottom: $base-line-height;
+  background-color: $form-actions-background;
+  border-top: 1px solid #e5e5e5;
+}
+
+// For text that needs to appear as an input but should not be an input
+.input--uneditable {
+  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+  overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
+  white-space: nowrap;
+  cursor: not-allowed;
+  background-color: ·inputBackground;
+  border-color: #eee;
+}
+
+// Placeholder text gets special styles; can't be bundled together though for some reason
+// --> .placeholder();
+
+
+// =============================================================================
+// 7. Help text
+// =============================================================================
+
+.help-block,
+.help-inline {
+  color: $gray; // lighten the text some for contrast
+}
+
+.help-block {
+  display: block; // account for any element using help-block
+  margin-bottom: $base-line-height / 2;
+}
+
+.help-inline {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 5px;
+}
+
+
+// =============================================================================
+// 8. Input groups
+// =============================================================================
+
+// Allow us to put symbols and text within the input field for a cleaner look
+.input--prepend,
+.input--append {
+  margin-bottom: 5px;
+  input,
+  select,
+  .input--uneditable {
+    position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
+    margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
+    vertical-align: middle;
+    border-radius: 0 $input-border-radius $input-border-radius 0;
+    // Make input on top when focused so blue border and shadow always show
+    &:focus {
+      z-index: 2;
+    }
+  }
+  .input--uneditable {
+    border-left-color: #ccc;
+  }
+  .add-on {
+    display: inline-block;
+    width: auto;
+    height: 36px; // @was: $base-line-height
+    min-width: 16px;
+    padding: 4px 5px;
+    font-weight: normal;
+    line-height: $base-line-height;
+    text-align: center;
+    text-shadow: 0 1px 0 $white;
+    vertical-align: middle;
+    background-color: $gray-lighter;
+    border: 1px solid #ccc;
+  }
+  .add-on,
+  .btn {
+    border-radius: 0;
+    margin-left: -1px;
+  }
+  .active {
+    background-color: lighten($green, 30);
+    border-color: $green;
+  }
+}
+.input--prepend {
+  .add-on,
+  .btn {
+    margin-right: -1px;
+  }
+  .add-on:first-child,
+  .btn:first-child {
+    border-radius: $input-border-radius 0 0 $input-border-radius;
+  }
+}
+
+.input--append {
+  input,
+  select,
+  .input--uneditable {
+    border-radius: $input-border-radius 0 0 $input-border-radius;
+  }
+  .input--uneditable {
+    border-right-color: #ccc;
+    border-left-color: #eee;
+  }
+  .add-on:last-child,
+  .btn:last-child {
+    border-radius: 0 $input-border-radius $input-border-radius 0;
+  }
+}
+// Remove all border-radius for inputs with both prepend and append
+.input--prepend.input--append {
+  input,
+  select,
+  .input--uneditable {
+    border-radius: 0;
+  }
+  .add-on:first-child,
+  .btn:first-child {
+    margin-right: -1px;
+    border-radius: $input-border-radius 0 0 $input-border-radius;
+  }
+  .add-on:last-child,
+  .btn:last-child {
+    margin-left: -1px;
+    border-radius: 0 $input-border-radius $input-border-radius 0;
+  }
+}
+
+// =============================================================================
+// 9. Search form
+// =============================================================================
+
+.search-query {
+  border-radius: 14px;
+  padding-right: 14px;
+  padding-right: 4px \9;
+  padding-left: 14px;
+  padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
+  margin-bottom: 0; // remove the default margin on all inputs
+}
+
+
+// =============================================================================
+// 10. Horizontal & vertical forms
+// =============================================================================
+
+// Common properties
+// =============================================================================
+
+.form--search,
+.form--inline,
+.form--horizontal {
+  input,
+  textarea,
+  select,
+  .help-inline,
+  .input--uneditable,
+  .input--prepend,
+  .input--append {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+  // Re-hide hidden elements due to specifity
+  .hide {
+    display: none;
+  }
+}
+
+.form--search label,
+.form--inline label {
+  display: inline-block;
+}
+
+// Remove margin for input--prepend/-append
+.form--search .input--append,
+.form--inline .input--append,
+.form--search .input--prepend,
+.form--inline .input--prepend {
+  margin-bottom: 0;
+}
+
+// Inline checkbox/radio labels (remove padding on left)
+.form--search .radio,
+.form--search .checkbox,
+.form--inline .radio,
+.form--inline .checkbox {
+  padding-left: 0;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+// Remove float and margin, set to inline-block
+.form--search .radio input[type="radio"],
+.form--search .checkbox input[type="checkbox"],
+.form--inline .radio input[type="radio"],
+.form--inline .checkbox input[type="checkbox"] {
+  float: left;
+  margin-right: 3px;
+  margin-left: 0;
+}
+
+// Margin to space out fieldsets
+.control-group {
+  margin-bottom: $base-line-height / 2;
+}
+
+// Legend collapses margin, so next element is responsible for spacing
+legend + .control-group {
+  margin-top: $base-line-height;
+  -webkit-margin-top-collapse: separate;
+}
+
+
+// Horizontal-specific styles
+// =============================================================================
+
+.form--horizontal {
+  // Increase spacing between groups
+  .control-group {
+    @include pie-clearfix;
+    margin-bottom: $base-line-height;
+  }
+
+  // Float the labels left
+  .control-label {
+    float: left;
+    width: 140px;
+    padding-top: 5px;
+    text-align: right;
+  }
+
+  // Move over all input controls and content
+  .controls {
+    margin-left: 160px;
+  }
+
+  // Remove bottom margin on block level help text since that's accounted for on .control-group
+  .help-block {
+    margin-top: $base-line-height / 2;
+    margin-bottom: 0;
+  }
+
+  // Move over buttons in .form-actions to align with .controls
+  .form-actions {
+    padding-left: 160px;
+  }
+}