?
Path : /home/admin/public_html/old/plugins/system/t3/base-bs3/less/ |
Current File : /home/admin/public_html/old/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; }