// // RTL Forms // -------------------------------------------------- .radio, .checkbox { label { padding-right: 20px; padding-left: initial; } } .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { margin-right: -20px; margin-left: auto; } // Radios and checkboxes on same line .radio-inline, .checkbox-inline { padding-right: 20px; padding-left: 0; } .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-right: 10px; // space out consecutive inline controls margin-left: 0; } .has-feedback { // Ensure icons don't overlap text .form-control { padding-left: (@input-height-base * 1.25); padding-right: 12px; } } // Feedback icon (requires .glyphicon classes) .form-control-feedback { left: 0; right: auto; } // 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-min) { label { padding-right: 0; padding-left: initial; } .radio input[type="radio"], .checkbox input[type="checkbox"] { margin-right: 0; margin-left: auto; } } } // Horizontal forms // // Horizontal forms are built on grid classes and allow you to create forms with // labels on the left and inputs on the right. .form-horizontal { // Reset spacing and right align labels, but scope to media queries so that // labels on narrow viewports stack the same as a default form example. @media (min-width: @screen-sm-min) { .control-label { text-align: left; } } // Validation states // // Reposition the icon because it's now within a grid column and columns have // `position: relative;` on them. Also accounts for the grid gutter padding. .has-feedback .form-control-feedback { left: (@grid-gutter-width / 2); right: auto; } }