PageRenderTime 56ms CodeModel.GetById 26ms app.highlight 27ms RepoModel.GetById 1ms app.codeStats 0ms

/sass/bootstrap/_forms.scss

https://bitbucket.org/decore/my-svadba.ru
Sass | 482 lines | 325 code | 73 blank | 84 comment | 0 complexity | f8e73a8befa8593d7a962e27ed7bbec7 MD5 | raw file
  1// Forms.less
  2// Base styles for various input types, form layouts, and states
  3// -------------------------------------------------------------
  4
  5
  6// GENERAL STYLES
  7// --------------
  8
  9// Make all forms have space below them
 10form {
 11  margin: 0 0 $baseLineHeight;
 12}
 13
 14fieldset {
 15  padding: 0;
 16  margin: 0;
 17  border: 0;
 18}
 19
 20// Groups of fields with labels on top (legends)
 21legend {
 22  display: block;
 23  width: 100%;
 24  padding: 0;
 25  margin-bottom: $baseLineHeight * 1.5;
 26  font-size: $baseFontSize * 1.5;
 27  line-height: $baseLineHeight * 2;
 28  color: $grayDark;
 29  border: 0;
 30  border-bottom: 1px solid #e5e5e5;
 31
 32  // Small
 33  small {
 34    font-size: $baseLineHeight * .75;
 35    color: $grayLight;
 36  }
 37}
 38
 39// Set font for forms
 40label, input, button, select, textarea {
 41  @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
 42}
 43input, button, select, textarea {
 44  font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
 45}
 46
 47// Identify controls by their labels
 48label {
 49  display: block;
 50  margin-bottom: 5px;
 51}
 52
 53// Form controls
 54// -------------------------
 55
 56// Shared size and type resets
 57select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
 58input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
 59input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
 60  display: inline-block;
 61  height: $baseLineHeight;
 62  padding: 4px;
 63  margin-bottom: 9px;
 64  font-size: $baseFontSize;
 65  line-height: $baseLineHeight;
 66  color: $gray;
 67}
 68
 69// Reset appearance properties for textual inputs and textarea
 70// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
 71input, textarea {
 72  width: 210px;
 73}
 74// Reset height since textareas have rows
 75textarea {
 76  height: auto;
 77}
 78// Everything else
 79textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
 80input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"],
 81input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
 82  background-color: $inputBackground;
 83  border: 1px solid $inputBorder;
 84  @include border-radius($inputBorderRadius);
 85  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
 86  @include transition(#{border linear .2s, box-shadow linear .2s});
 87
 88  // Focus state
 89  &:focus {
 90    border-color: rgba(119,90,78,.8);
 91    outline: 0;
 92    outline: thin dotted \9; /* IE6-9 */
 93    @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(119,90,78,.6)});
 94  }
 95}
 96// 0 0 8px rgba(82,168,236,.6)});
 97// Position radios and checkboxes better
 98input[type="radio"], input[type="checkbox"] {
 99  margin: 3px 0;
100  *margin-top: 0; /* IE7 */
101  line-height: normal;
102  cursor: pointer;
103}
104
105// Reset width of input buttons, radios, checkboxes
106input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {
107  width: auto; // Override of generic input selector
108}
109
110// Make uneditable textareas behave like a textarea
111.uneditable-textarea {
112  width: auto;
113  height: auto;
114}
115
116// Set the height of select and file controls to match text inputs
117select, input[type="file"] {
118  height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
119  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
120  line-height: 28px;
121}
122
123// Make select elements obey height by applying a border
124select {
125  width: 220px; // default input width + 10px of padding that doesn't get applied
126  border: 1px solid #bbb;
127}
128
129// Make multiple select elements height not fixed
130select[multiple], select[size] {
131  height: auto;
132}
133
134// Focus for select, file, radio, and checkbox
135select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
136  @include tab-focus();
137}
138
139
140
141// CHECKBOXES & RADIOS
142// -------------------
143
144// Indent the labels to position radios/checkboxes as hanging
145.radio, .checkbox {
146  min-height: 18px; // clear the floating input if there is no label text
147  padding-left: 18px;
148}
149.radio input[type="radio"], .checkbox input[type="checkbox"] {
150  float: left;
151  margin-left: -18px;
152}
153
154// Move the options list down to align with labels
155.controls > .radio:first-child, .controls > .checkbox:first-child {
156  padding-top: 5px; // has to be padding because margin collaspes
157}
158
159// Radios and checkboxes on same line
160// TODO v3: Convert .inline to .control-inline
161.radio.inline, .checkbox.inline {
162  display: inline-block;
163  padding-top: 5px;
164  margin-bottom: 0;
165  vertical-align: middle;
166}
167.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
168  margin-left: 10px; // space out consecutive inline controls
169}
170
171
172
173// INPUT SIZES
174// -----------
175
176// General classes for quick sizes
177.input-mini       { width: 60px; }
178.input-small      { width: 90px; }
179.input-medium     { width: 150px; }
180.input-large      { width: 210px; }
181.input-xlarge     { width: 270px; }
182.input-xxlarge    { width: 530px; }
183
184// Grid style input sizes
185input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"],
186// Redeclare since the fluid row class is more specific
187.row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] {
188  float: none;
189  margin-left: 0;
190}
191// Ensure input-prepend/append never wraps
192.input-append input[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"],
193.input-prepend .uneditable-input[class*="span"], .row-fluid .input-prepend [class*="span"], .row-fluid .input-append [class*="span"] {
194  display: inline-block;
195}
196
197
198
199// GRID SIZING FOR INPUTS
200// ----------------------
201
202@include gridInput($gridColumnWidth, $gridGutterWidth);
203
204
205
206// DISABLED STATE
207// --------------
208
209// Disabled and read-only inputs
210input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
211  cursor: not-allowed;
212  background-color: $inputDisabledBackground;
213  border-color: #ddd;
214}
215// Explicitly reset the colors here
216input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
217  background-color: transparent;
218}
219
220
221
222
223// FORM FIELD FEEDBACK STATES
224// --------------------------
225
226// Warning
227.control-group.warning {
228  @include formFieldState($warningText, $warningText, $warningBackground);
229}
230// Error
231.control-group.error {
232  @include formFieldState($errorText, $errorText, $errorBackground);
233}
234// Success
235.control-group.success {
236  @include formFieldState($successText, $successText, $successBackground);
237}
238
239// HTML5 invalid states
240// Shares styles with the .control-group.error above
241input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
242  color: #b94a48;
243  border-color: #ee5f5b;
244  &:focus {
245    border-color: darken(#ee5f5b, 10%);
246    @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
247  }
248}
249
250
251
252// FORM ACTIONS
253// ------------
254
255.form-actions {
256  padding: ($baseLineHeight - 1) 20px $baseLineHeight;
257  margin-top: $baseLineHeight;
258  margin-bottom: $baseLineHeight;
259  background-color: $formActionsBackground;
260  border-top: 1px solid #e5e5e5;
261  @include clearfix(); // Adding clearfix to allow for .pull-right button containers
262}
263
264// For text that needs to appear as an input but should not be an input
265.uneditable-input {
266  overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
267  white-space: nowrap;
268  cursor: not-allowed;
269  background-color: $inputBackground;
270  border-color: #eee;
271  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
272}
273
274// Placeholder text gets special styles; can't be bundled together though for some reason
275// (sass-edit) - need special mixin
276@include rootPlaceholder();
277
278
279
280// HELP TEXT
281// ---------
282
283.help-block, .help-inline {
284  color: $gray; // lighten the text some for contrast
285}
286
287.help-block {
288  display: block; // account for any element using help-block
289  margin-bottom: $baseLineHeight / 2;
290}
291
292.help-inline {
293  display: inline-block;
294  @include ie7-inline-block();
295  vertical-align: middle;
296  padding-left: 5px;
297}
298
299
300
301// INPUT GROUPS
302// ------------
303
304// Allow us to put symbols and text within the input field for a cleaner look
305.input-prepend, .input-append {
306  margin-bottom: 5px;
307  input, select, .uneditable-input {
308    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
309    margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
310    *margin-left: 0;
311    vertical-align: middle;
312    @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
313    // Make input on top when focused so blue border and shadow always show
314    &:focus {
315      z-index: 2;
316    }
317  }
318  .uneditable-input {
319    border-left-color: #ccc;
320  }
321  .add-on {
322    display: inline-block;
323    width: auto;
324    height: $baseLineHeight;
325    min-width: 16px;
326    padding: 4px 5px;
327    font-weight: normal;
328    line-height: $baseLineHeight;
329    text-align: center;
330    text-shadow: 0 1px 0 $white;
331    vertical-align: middle;
332    background-color: $grayLighter;
333    border: 1px solid #ccc;
334  }
335  .add-on, .btn {
336    margin-left: -1px;
337    @include border-radius(0);
338  }
339  .active {
340    background-color: lighten($green, 30);
341    border-color: $green;
342  }
343}
344.input-prepend {
345  .add-on, .btn {
346    margin-right: -1px;
347  }
348  .add-on:first-child, .btn:first-child {
349    @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
350  }
351}
352.input-append {
353  input, select, .uneditable-input {
354    @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
355  }
356  .uneditable-input {
357    border-right-color: #ccc;
358    border-left-color: #eee;
359  }
360  .add-on:last-child, .btn:last-child {
361    @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
362  }
363}
364// Remove all border-radius for inputs with both prepend and append
365.input-prepend.input-append {
366  input, select, .uneditable-input {
367    @include border-radius(0);
368  }
369  .add-on:first-child, .btn:first-child {
370    margin-right: -1px;
371    @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
372  }
373  .add-on:last-child, .btn:last-child {
374    margin-left: -1px;
375    @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
376  }
377}
378
379
380
381// SEARCH FORM
382// -----------
383
384.search-query {
385  padding-right: 14px;
386  padding-right: 4px \9;
387  padding-left: 14px;
388  padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
389  margin-bottom: 0; // remove the default margin on all inputs
390  @include border-radius(14px);
391}
392
393
394
395// HORIZONTAL & VERTICAL FORMS
396// ---------------------------
397
398// Common properties
399// -----------------
400
401.form-search, .form-inline, .form-horizontal {
402  input, textarea, select, .help-inline, .uneditable-input, .input-prepend, .input-append {
403    display: inline-block;
404    @include ie7-inline-block();
405    margin-bottom: 0;
406  }
407  // Re-hide hidden elements due to specifity
408  .hide {
409    display: none;
410  }
411}
412.form-search label, .form-inline label {
413  display: inline-block;
414}
415// Remove margin for input-prepend/-append
416.form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend {
417  margin-bottom: 0;
418}
419// Inline checkbox/radio labels (remove padding on left)
420.form-search .radio, .form-search .checkbox, .form-inline .radio, .form-inline .checkbox {
421  padding-left: 0;
422  margin-bottom: 0;
423  vertical-align: middle;
424}
425// Remove float and margin, set to inline-block
426.form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"],
427.form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] {
428  float: left;
429  margin-right: 3px;
430  margin-left: 0;
431}
432
433
434// Margin to space out fieldsets
435.control-group {
436  margin-bottom: $baseLineHeight / 2;
437}
438
439// Legend collapses margin, so next element is responsible for spacing
440legend + .control-group {
441  margin-top: $baseLineHeight;
442  -webkit-margin-top-collapse: separate;
443}
444
445// Horizontal-specific styles
446// --------------------------
447
448.form-horizontal {
449  // Increase spacing between groups
450  .control-group {
451    margin-bottom: $baseLineHeight;
452    @include clearfix();
453  }
454  // Float the labels left
455  .control-label {
456    float: left;
457    width: 140px;
458    padding-top: 5px;
459    text-align: right;
460  }
461  // Move over all input controls and content
462  .controls {
463    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
464    // don't inherit the margin of the parent, in this case .controls
465    *display: inline-block;
466    *padding-left: 20px;
467    margin-left: 160px;
468    *margin-left: 0;
469    &:first-child {
470      *padding-left: 160px;
471    }
472  }
473  // Remove bottom margin on block level help text since that's accounted for on .control-group
474  .help-block {
475    margin-top: $baseLineHeight / 2;
476    margin-bottom: 0;
477  }
478  // Move over buttons in .form-actions to align with .controls
479  .form-actions {
480    padding-left: 160px;
481  }
482}