AnonymousFox

/home/develito/www/plugins/system/t3/base-bs3/less/legacy-forms.less

/** 
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         http://t3-framework.org 
 *------------------------------------------------------------------------------
 */

// ------------------------------------------------------
// LEGACY FORM ELEMENTS
// ------------------------------------------------------

//
// GENERIC STYLES
// ------------------------------------------------------

// Common form controls
// --------------------

// Legacy class below
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"],
.inputbox {

.form-control();

// Customize the `:focus` state to imitate native WebKit styles.
  .form-control-focus();

// Placeholder
  //
  // Placeholder text gets special styles because when browsers invalidate entire
  // lines if it doesn't understand a selector/
  .placeholder();

// Disabled and read-only inputs
  // Note: 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.
  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    cursor: not-allowed;
    background-color: @input-bg-disabled;
  }

// Reset height for `textarea`s
  textarea& {
    height: auto;
  }

// Reset Width for Legacy classes in Medium Screen
  @media screen and (min-width: @screen-sm) {
    width: auto;
  }

}

// Redefine padding for <select>
select,
select.form-control,
select.inputbox,
select.input {
  padding-right: 5px;
}

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

// Redefind BS3 Input Sizes
input.input-sm {
  .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}

input.input-lg {
  .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}

// Inline forms
//
// 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).
//
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.

.form-inline {

// Kick in the inline
  @media (min-width: @screen-sm) {
    // Legacy class below
    .inputbox,
    select,
    textarea,
    input {
      display: inline-block;
    }
  }
}

// HORIZONTAL & VERTICAL FORMS
// ---------------------------

// Common properties
// -----------------

// Margin to space out fieldsets
.control-group {
  margin-bottom: @line-height-computed / 2;
}

// Legend collapses margin, so next element is responsible for spacing
legend + .control-group {
  margin-top: @line-height-computed;
  -webkit-margin-top-collapse: separate;
}

// Horizontal-specific styles
// --------------------------
.form-horizontal {

.control-group {
    margin-bottom: @line-height-computed;
    .clearfix();

// Float the labels left
    .control-label {
      display: block;
      width: 100%;

@media (min-width: @screen-sm-min) {
        display: inline-block;
        float: left;
        width: @component-offset-horizontal - 20;
        padding-top: 5px;
        text-align: right;
      }
    }

// Move over all input controls and content
    .controls {
      margin-left: @component-offset-horizontal;
    }

}

//
// OTHER LEGACY CLASSES FROM BS2
// ------------------------------------------------------

// FORM ACTIONS
// ------------
// Adding the legacy "form-actions" from BS2

.form-actions {
  .clearfix();
  padding: @t3-global-padding;
  margin: @t3-global-margin 0;
  background-color: @gray-lighter;
  border-radius: @border-radius-base;
  // Reset the padding of offset col
  [class*="col-sm-offset-"],
  [class*="col-md-offset-"] {
    padding-left: 5px !important;
  }
}

// INPUT GROUPS
// ------------

// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
  display: inline-block;
  margin-bottom: @line-height-computed / 2;
  vertical-align: middle;
  font-size: 0; // white space collapse hack
  white-space: nowrap; // Prevent span and input from separating

// Reset the white space collapse hack
  input,
  select,
  .uneditable-input,
  .dropdown-menu,
  .popover {
    font-size: @font-size-base;
  }

input,
  select,
  .uneditable-input {
    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
    *margin-left: 0;
    vertical-align: top;
    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;
    }
  }
  .add-on {
    display: inline-block;
    width: auto;
    height: @input-height-base;
    min-width: 16px;
    padding: 4px 5px;
    font-size: @font-size-base;
    font-weight: normal;
    line-height: @line-height-base;
    text-align: center;
    background-color: @gray-lighter;
    border: 1px solid #ccc;
  }
  .add-on,
  .btn,
  .btn-group > .dropdown-toggle {
    vertical-align: top;
    border-radius: 0;
  }
  .active {
    background-color: lighten(@green, 30);
    border-color: @green;
  }
}

.input-prepend {
  .add-on,
  .btn {
    margin-right: -1px;
  }
  .add-on:first-child,
  .btn:first-child {
    // FYI, `.btn:first-child` accounts for a button group that's prepended
    border-radius: @input-border-radius 0 0 @input-border-radius;
  }
}

.input-append {
  input,
  select,
  .uneditable-input {
    border-radius: @input-border-radius 0 0 @input-border-radius;
    + .btn-group .btn:last-child {
      border-radius: 0 @input-border-radius @input-border-radius 0;
    }
  }
  .add-on,
  .btn,
  .btn-group {
    margin-left: -1px;
  }
  .add-on:last-child,
  .btn:last-child,
  .btn-group:last-child > .dropdown-toggle {
    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,
  .uneditable-input {
    border-radius: 0;
    + .btn-group .btn {
      border-radius: 0 @input-border-radius @input-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;
  }
  .btn-group:first-child {
    margin-left: 0;
  }
}

//
// BUTTONS
// ------------------------------------------------------

// Lagacy Button Sizes
// --------------------------------------------------

// Large
.btn-large {
  padding: @padding-large-vertical @padding-large-horizontal;
  font-size: @font-size-large;
  border-radius: @border-radius-large;
}

.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
  margin-top: 4px;
}

// Small
.btn-small {
  padding: @padding-small-vertical @padding-small-horizontal;
  font-size: @font-size-small;
  border-radius: @border-radius-small;
}

.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
  margin-top: 0;
}

// Mini
.btn-mini {
  padding: 2px 4px;
  font-size: @font-size-small;
  border-radius: @border-radius-small;
}

.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
  margin-top: -1px;
}