padrino-admin 0.10.7 → 0.11.0

data/lib/padrino-admin/bootstrap-less/forms.less

@@ -0,0 +1,543 @@
+//
+// Forms
+// --------------------------------------------------
+
+
+// Non-controls
+// -------------------------
+
+form {
+  margin: 0;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: @line-height-base;
+  font-size: (@font-size-base * 1.5);
+  line-height: (@line-height-base * 2);
+  color: @grayDark;
+  border: 0;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+// 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"] {
+  display: inline-block;
+  min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: 6px 9px;
+  // margin-bottom: (@line-height-base / 2);
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @gray;
+  vertical-align: middle;
+  background-color: @input-background;
+  border: 1px solid @input-border;
+  border-radius: @input-border-radius;
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  .transition(~"border linear .2s, box-shadow linear .2s");
+}
+
+// Reset appearance properties for textual inputs and textarea
+// Can't be on input[type=*] selectors or it's too specific
+input,
+select,
+textarea {
+  width: 100%;
+}
+
+// Reset width of input images, buttons, radios, checkboxes
+input[type="file"],
+input[type="image"],
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+  width: auto; // Override of generic input selector
+}
+
+// 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"] {
+  // Focus state
+  &:focus {
+    border-color: rgba(82,168,236,.8);
+    outline: 0;
+    outline: thin dotted \9; /* IE6-9 */
+    //.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+    .box-shadow(0 0 8px rgba(82,168,236,.6));
+  }
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  margin-top: 1px \9; /* IE8-9 */
+  line-height: normal;
+}
+
+// Set the height of select and file controls to match text inputs
+select,
+input[type="file"] {
+  height: @input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
+  line-height: @input-height-base;
+}
+
+// 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();
+}
+
+
+// Placeholder
+// -------------------------
+
+// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
+input,
+textarea {
+  .placeholder();
+}
+
+
+// CHECKBOXES & RADIOS
+// -------------------
+
+// Indent the labels to position radios/checkboxes as hanging
+.radio,
+.checkbox {
+  display: block;
+  min-height: @line-height-base; // clear the floating input if there is no label text
+  margin-bottom: (@line-height-base / 2);
+  padding-left: 20px;
+  label {
+    display: inline;
+    margin-bottom: 0;
+    font-weight: normal;
+  }
+}
+
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+  float: left;
+  margin-left: -20px;
+}
+.radio + .radio,
+.checkbox + .checkbox {
+  margin-top: ((@line-height-base / 4) * -1);
+}
+
+// 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
+.radio-inline,
+.checkbox-inline {
+  display: inline-block;
+  padding-top: 5px;
+  padding-left: 20px;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-top: 0;
+  margin-left: 10px; // space out consecutive inline controls
+}
+
+
+
+// INPUT SIZES
+// -----------
+
+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-large {
+    padding: @padding-large;
+    font-size: @font-size-large;
+    border-radius: @border-radius-large;
+  }
+  &.input-small {
+    min-height: @input-height-small;
+    padding: @padding-small;
+    font-size: @font-size-small;
+    border-radius: @border-radius-small;
+  }
+}
+
+
+
+// GRID SIZING FOR INPUTS
+// ----------------------
+
+// Grid style input sizes
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"] {
+  float: none;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// Ensure input-prepend/append never wraps
+.input-append input[class*="span"],
+.input-prepend input[class*="span"] {
+  display: inline-block;
+}
+
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"] {
+  height: @input-height-base;
+}
+
+
+
+// DISABLED STATE
+// --------------
+
+// Disabled and read-only inputs
+// Note: HTML5 says that inputs 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.
+input,
+select,
+textarea {
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    background-color: @input-background-disabled;
+  }
+}
+// Explicitly reset the colors here
+input[type="radio"],
+input[type="checkbox"] {
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: transparent;
+  }
+}
+
+
+
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// Warning
+.has-warning {
+  .formFieldState(@state-warning-text, @state-warning-text, @state-warning-background);
+}
+// Error
+.has-error {
+  .formFieldState(@state-error-text, @state-error-text, @state-error-background);
+}
+// Success
+.has-success {
+  .formFieldState(@state-success-text, @state-success-text, @state-success-background);
+}
+
+// HTML5 invalid states
+// Shares styles with the .control-group.error above
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
+  color: #b94a48;
+  border-color: #ee5f5b;
+  &:focus {
+    border-color: darken(#ee5f5b, 10%);
+    @shadow: 0 0 6px lighten(#ee5f5b, 20%);
+    .box-shadow(@shadow);
+  }
+}
+
+
+
+// FORM ACTIONS
+// ------------
+
+.form-actions {
+  padding: (@line-height-base - 1) 20px @line-height-base;
+  margin-top: @line-height-base;
+  margin-bottom: @line-height-base;
+  background-color: @form-actions-background;
+  border-top: 1px solid #e5e5e5;
+  .clear_float(); // Adding clearfix to allow for .pull-right button containers
+}
+
+
+
+// HELP TEXT
+// ---------
+
+.help-block,
+.help-inline {
+  color: lighten(@text-color, 25%); // lighten the text some for contrast
+}
+
+.help-block {
+  display: block; // account for any element using help-block
+  margin-bottom: (@line-height-base / 2);
+}
+
+.help-inline {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 5px;
+}
+
+
+
+// Input groups
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+.input-group {
+  display: table;
+
+  // Undo padding and float of grid classes
+  &[class*="span"] {
+    float: none;
+    padding: 0;
+  }
+
+  input,
+  select {
+    width: 100%;
+  }
+}
+
+// Display as table-cell
+// -------------------------
+.input-group-addon,
+.input-group-btn,
+.input-group input {
+  display: table-cell;
+  margin: 0;
+  border-radius: 0;
+  &.input-small {
+    border-radius: 0;
+  }
+  &.input-large {
+    border-radius: 0;
+  }
+}
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  vertical-align: middle; // Match the inputs
+}
+
+// Text input groups
+// -------------------------
+.input-group-addon {
+  .box-sizing(border-box);
+  padding: 6px 8px;
+  font-size: @font-size-base;
+  font-weight: normal;
+  line-height: @line-height-base;
+  text-align: center;
+  text-shadow: 0 1px 0 #fff;
+  background-color: @grayLighter;
+  border: 1px solid #ccc;
+
+	&.input-small {
+	  padding: @padding-small;
+	  font-size: @font-size-small;
+  }
+	&.input-large {
+		padding: @padding-large;
+		font-size: @font-size-large;
+	}
+}
+
+// Reset rounded corners
+.input-group input:first-child,
+.input-group-addon:first-child {
+  .border-left-radius(@border-radius-base);
+  &.input-small {
+    .border-left-radius(@border-radius-small);
+  }
+  &.input-large {
+    .border-left-radius(@border-radius-large);
+  }
+}
+.input-group-addon:first-child {
+  border-right: 0;
+}
+.input-group input:last-child,
+.input-group-addon:last-child {
+  .border-right-radius(@border-radius-base);
+  &.input-small {
+    .border-right-radius(@border-radius-small);
+  }
+  &.input-large {
+    .border-right-radius(@border-radius-large);
+  }
+}
+.input-group-addon:last-child {
+  border-left: 0;
+}
+
+// Button input groups
+// -------------------------
+.input-group-btn {
+  position: relative;
+  white-space: nowrap;
+}
+.input-group-btn > .btn {
+  position: relative;
+  float: left; // Collapse white-space
+  border-radius: 0;
+  + .btn {
+    margin-left: -1px;
+  }
+  // Bring the "active" button to the front
+  &:hover,
+  &:active {
+    z-index: 2;
+  }
+}
+
+// Prepended buttons
+.input-group-btn:first-child {
+  // Round the left corners only
+  > .btn:first-child,
+  > .dropdown-toggle:first-child {
+    .border-left-radius(@border-radius-base);
+    &.btn-large { .border-left-radius(@border-radius-large); }
+    &.btn-small { .border-left-radius(@border-radius-small); }
+  }
+}
+
+// Appended buttons
+.input-group-btn:last-child {
+  // Round the right corners only
+  > .btn:last-child,
+  > .dropdown-toggle {
+    .border-right-radius(@border-radius-base);
+    &.btn-large { .border-right-radius(@border-radius-large); }
+    &.btn-small { .border-right-radius(@border-radius-small); }
+  }
+}
+
+
+
+// Horizontal forms
+// --------------------------------------------------
+
+@media screen and (min-width: 768px) {
+
+  .form-horizontal {
+
+    // Increase spacing between groups
+    .control-group {
+      position: relative;
+      margin-bottom: @line-height-base;
+      .clear_float();
+
+      input,
+      select,
+      textarea {
+        margin-bottom: 0;
+      }
+    }
+
+    // Float the labels left
+    .control-group > .control-label {
+      float: left;
+      width: (@component-offset-horizontal - 20);
+      padding-top: 6px;
+      text-align: right;
+    }
+
+    // Move over all input controls and content over
+    .control-group > .controls {
+      margin-left: @component-offset-horizontal;
+    }
+
+  }
+}