Mercurial > wikked

comparison static/bootstrap/less/mixins.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents
children a5a3d454eac9
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
1 //
2 // Mixins
3 // --------------------------------------------------
4
5
6 // UTILITY MIXINS
7 // --------------------------------------------------
8
9 // Clearfix
10 // --------
11 // For clearing floats like a boss h5bp.com/q
12 .clearfix {
13 *zoom: 1;
14 &:before,
15 &:after {
16 display: table;
17 content: "";
18 // Fixes Opera/contenteditable bug:
19 // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
20 line-height: 0;
21 }
22 &:after {
23 clear: both;
24 }
25 }
26
27 // Webkit-style focus
28 // ------------------
29 .tab-focus() {
30 // Default
31 outline: thin dotted #333;
32 // Webkit
33 outline: 5px auto -webkit-focus-ring-color;
34 outline-offset: -2px;
35 }
36
37 // Center-align a block level element
38 // ----------------------------------
39 .center-block() {
40 display: block;
41 margin-left: auto;
42 margin-right: auto;
43 }
44
45 // IE7 inline-block
46 // ----------------
47 .ie7-inline-block() {
48 *display: inline; /* IE7 inline-block hack */
49 *zoom: 1;
50 }
51
52 // IE7 likes to collapse whitespace on either side of the inline-block elements.
53 // Ems because we're attempting to match the width of a space character. Left
54 // version is for form buttons, which typically come after other elements, and
55 // right version is for icons, which come before. Applying both is ok, but it will
56 // mean that space between those elements will be .6em (~2 space characters) in IE7,
57 // instead of the 1 space in other browsers.
58 .ie7-restore-left-whitespace() {
59 *margin-left: .3em;
60
61 &:first-child {
62 *margin-left: 0;
63 }
64 }
65
66 .ie7-restore-right-whitespace() {
67 *margin-right: .3em;
68 }
69
70 // Sizing shortcuts
71 // -------------------------
72 .size(@height, @width) {
73 width: @width;
74 height: @height;
75 }
76 .square(@size) {
77 .size(@size, @size);
78 }
79
80 // Placeholder text
81 // -------------------------
82 .placeholder(@color: @placeholderText) {
83 &:-moz-placeholder {
84 color: @color;
85 }
86 &:-ms-input-placeholder {
87 color: @color;
88 }
89 &::-webkit-input-placeholder {
90 color: @color;
91 }
92 }
93
94 // Text overflow
95 // -------------------------
96 // Requires inline-block or block for proper styling
97 .text-overflow() {
98 overflow: hidden;
99 text-overflow: ellipsis;
100 white-space: nowrap;
101 }
102
103 // CSS image replacement
104 // -------------------------
105 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
106 .hide-text {
107 font: 0/0 a;
108 color: transparent;
109 text-shadow: none;
110 background-color: transparent;
111 border: 0;
112 }
113
114
115 // FONTS
116 // --------------------------------------------------
117
118 #font {
119 #family {
120 .serif() {
121 font-family: @serifFontFamily;
122 }
123 .sans-serif() {
124 font-family: @sansFontFamily;
125 }
126 .monospace() {
127 font-family: @monoFontFamily;
128 }
129 }
130 .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
131 font-size: @size;
132 font-weight: @weight;
133 line-height: @lineHeight;
134 }
135 .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
136 #font > #family > .serif;
137 #font > .shorthand(@size, @weight, @lineHeight);
138 }
139 .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
140 #font > #family > .sans-serif;
141 #font > .shorthand(@size, @weight, @lineHeight);
142 }
143 .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
144 #font > #family > .monospace;
145 #font > .shorthand(@size, @weight, @lineHeight);
146 }
147 }
148
149
150 // FORMS
151 // --------------------------------------------------
152
153 // Block level inputs
154 .input-block-level {
155 display: block;
156 width: 100%;
157 min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
158 .box-sizing(border-box); // Makes inputs behave like true block-level elements
159 }
160
161
162
163 // Mixin for form field states
164 .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
165 // Set the text color
166 .control-label,
167 .help-block,
168 .help-inline {
169 color: @textColor;
170 }
171 // Style inputs accordingly
172 .checkbox,
173 .radio,
174 input,
175 select,
176 textarea {
177 color: @textColor;
178 }
179 input,
180 select,
181 textarea {
182 border-color: @borderColor;
183 .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
184 &:focus {
185 border-color: darken(@borderColor, 10%);
186 @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
187 .box-shadow(@shadow);
188 }
189 }
190 // Give a small background color for input-prepend/-append
191 .input-prepend .add-on,
192 .input-append .add-on {
193 color: @textColor;
194 background-color: @backgroundColor;
195 border-color: @textColor;
196 }
197 }
198
199
200
201 // CSS3 PROPERTIES
202 // --------------------------------------------------
203
204 // Border Radius
205 .border-radius(@radius) {
206 -webkit-border-radius: @radius;
207 -moz-border-radius: @radius;
208 border-radius: @radius;
209 }
210
211 // Single Corner Border Radius
212 .border-top-left-radius(@radius) {
213 -webkit-border-top-left-radius: @radius;
214 -moz-border-radius-topleft: @radius;
215 border-top-left-radius: @radius;
216 }
217 .border-top-right-radius(@radius) {
218 -webkit-border-top-right-radius: @radius;
219 -moz-border-radius-topright: @radius;
220 border-top-right-radius: @radius;
221 }
222 .border-bottom-right-radius(@radius) {
223 -webkit-border-bottom-right-radius: @radius;
224 -moz-border-radius-bottomright: @radius;
225 border-bottom-right-radius: @radius;
226 }
227 .border-bottom-left-radius(@radius) {
228 -webkit-border-bottom-left-radius: @radius;
229 -moz-border-radius-bottomleft: @radius;
230 border-bottom-left-radius: @radius;
231 }
232
233 // Single Side Border Radius
234 .border-top-radius(@radius) {
235 .border-top-right-radius(@radius);
236 .border-top-left-radius(@radius);
237 }
238 .border-right-radius(@radius) {
239 .border-top-right-radius(@radius);
240 .border-bottom-right-radius(@radius);
241 }
242 .border-bottom-radius(@radius) {
243 .border-bottom-right-radius(@radius);
244 .border-bottom-left-radius(@radius);
245 }
246 .border-left-radius(@radius) {
247 .border-top-left-radius(@radius);
248 .border-bottom-left-radius(@radius);
249 }
250
251 // Drop shadows
252 .box-shadow(@shadow) {
253 -webkit-box-shadow: @shadow;
254 -moz-box-shadow: @shadow;
255 box-shadow: @shadow;
256 }
257
258 // Transitions
259 .transition(@transition) {
260 -webkit-transition: @transition;
261 -moz-transition: @transition;
262 -o-transition: @transition;
263 transition: @transition;
264 }
265 .transition-delay(@transition-delay) {
266 -webkit-transition-delay: @transition-delay;
267 -moz-transition-delay: @transition-delay;
268 -o-transition-delay: @transition-delay;
269 transition-delay: @transition-delay;
270 }
271
272 // Transformations
273 .rotate(@degrees) {
274 -webkit-transform: rotate(@degrees);
275 -moz-transform: rotate(@degrees);
276 -ms-transform: rotate(@degrees);
277 -o-transform: rotate(@degrees);
278 transform: rotate(@degrees);
279 }
280 .scale(@ratio) {
281 -webkit-transform: scale(@ratio);
282 -moz-transform: scale(@ratio);
283 -ms-transform: scale(@ratio);
284 -o-transform: scale(@ratio);
285 transform: scale(@ratio);
286 }
287 .translate(@x, @y) {
288 -webkit-transform: translate(@x, @y);
289 -moz-transform: translate(@x, @y);
290 -ms-transform: translate(@x, @y);
291 -o-transform: translate(@x, @y);
292 transform: translate(@x, @y);
293 }
294 .skew(@x, @y) {
295 -webkit-transform: skew(@x, @y);
296 -moz-transform: skew(@x, @y);
297 -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
298 -o-transform: skew(@x, @y);
299 transform: skew(@x, @y);
300 -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
301 }
302 .translate3d(@x, @y, @z) {
303 -webkit-transform: translate3d(@x, @y, @z);
304 -moz-transform: translate3d(@x, @y, @z);
305 -o-transform: translate3d(@x, @y, @z);
306 transform: translate3d(@x, @y, @z);
307 }
308
309 // Backface visibility
310 // Prevent browsers from flickering when using CSS 3D transforms.
311 // Default value is `visible`, but can be changed to `hidden
312 // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
313 .backface-visibility(@visibility){
314 -webkit-backface-visibility: @visibility;
315 -moz-backface-visibility: @visibility;
316 backface-visibility: @visibility;
317 }
318
319 // Background clipping
320 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
321 .background-clip(@clip) {
322 -webkit-background-clip: @clip;
323 -moz-background-clip: @clip;
324 background-clip: @clip;
325 }
326
327 // Background sizing
328 .background-size(@size) {
329 -webkit-background-size: @size;
330 -moz-background-size: @size;
331 -o-background-size: @size;
332 background-size: @size;
333 }
334
335
336 // Box sizing
337 .box-sizing(@boxmodel) {
338 -webkit-box-sizing: @boxmodel;
339 -moz-box-sizing: @boxmodel;
340 box-sizing: @boxmodel;
341 }
342
343 // User select
344 // For selecting text on the page
345 .user-select(@select) {
346 -webkit-user-select: @select;
347 -moz-user-select: @select;
348 -ms-user-select: @select;
349 -o-user-select: @select;
350 user-select: @select;
351 }
352
353 // Resize anything
354 .resizable(@direction) {
355 resize: @direction; // Options: horizontal, vertical, both
356 overflow: auto; // Safari fix
357 }
358
359 // CSS3 Content Columns
360 .content-columns(@columnCount, @columnGap: @gridGutterWidth) {
361 -webkit-column-count: @columnCount;
362 -moz-column-count: @columnCount;
363 column-count: @columnCount;
364 -webkit-column-gap: @columnGap;
365 -moz-column-gap: @columnGap;
366 column-gap: @columnGap;
367 }
368
369 // Optional hyphenation
370 .hyphens(@mode: auto) {
371 word-wrap: break-word;
372 -webkit-hyphens: @mode;
373 -moz-hyphens: @mode;
374 -ms-hyphens: @mode;
375 -o-hyphens: @mode;
376 hyphens: @mode;
377 }
378
379 // Opacity
380 .opacity(@opacity) {
381 opacity: @opacity / 100;
382 filter: ~"alpha(opacity=@{opacity})";
383 }
384
385
386
387 // BACKGROUNDS
388 // --------------------------------------------------
389
390 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
391 #translucent {
392 .background(@color: @white, @alpha: 1) {
393 background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
394 }
395 .border(@color: @white, @alpha: 1) {
396 border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
397 .background-clip(padding-box);
398 }
399 }
400
401 // Gradient Bar Colors for buttons and alerts
402 .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
403 color: @textColor;
404 text-shadow: @textShadow;
405 #gradient > .vertical(@primaryColor, @secondaryColor);
406 border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
407 border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
408 }
409
410 // Gradients
411 #gradient {
412 .horizontal(@startColor: #555, @endColor: #333) {
413 background-color: @endColor;
414 background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
415 background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
416 background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
417 background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
418 background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
419 background-repeat: repeat-x;
420 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
421 }
422 .vertical(@startColor: #555, @endColor: #333) {
423 background-color: mix(@startColor, @endColor, 60%);
424 background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
425 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
426 background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
427 background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
428 background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
429 background-repeat: repeat-x;
430 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
431 }
432 .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
433 background-color: @endColor;
434 background-repeat: repeat-x;
435 background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
436 background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
437 background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
438 background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
439 }
440 .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
441 background-color: mix(@midColor, @endColor, 80%);
442 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
443 background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
444 background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
445 background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
446 background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
447 background-repeat: no-repeat;
448 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
449 }
450 .radial(@innerColor: #555, @outerColor: #333) {
451 background-color: @outerColor;
452 background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
453 background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
454 background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
455 background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
456 background-repeat: no-repeat;
457 }
458 .striped(@color: #555, @angle: 45deg) {
459 background-color: @color;
460 background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
461 background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
462 background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
463 background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
464 background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
465 }
466 }
467 // Reset filters for IE
468 .reset-filter() {
469 filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
470 }
471
472
473
474 // COMPONENT MIXINS
475 // --------------------------------------------------
476
477 // Horizontal dividers
478 // -------------------------
479 // Dividers (basically an hr) within dropdowns and nav lists
480 .nav-divider(@top: #e5e5e5, @bottom: @white) {
481 // IE7 needs a set width since we gave a height. Restricting just
482 // to IE7 to keep the 1px left/right space in other browsers.
483 // It is unclear where IE is getting the extra space that we need
484 // to negative-margin away, but so it goes.
485 *width: 100%;
486 height: 1px;
487 margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
488 *margin: -5px 0 5px;
489 overflow: hidden;
490 background-color: @top;
491 border-bottom: 1px solid @bottom;
492 }
493
494 // Button backgrounds
495 // ------------------
496 .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
497 // gradientBar will set the background to a pleasing blend of these, to support IE<=9
498 .gradientBar(@startColor, @endColor, @textColor, @textShadow);
499 *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
500 .reset-filter();
501
502 // in these cases the gradient won't cover the background, so we override
503 &:hover, &:active, &.active, &.disabled, &[disabled] {
504 color: @textColor;
505 background-color: @endColor;
506 *background-color: darken(@endColor, 5%);
507 }
508
509 // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
510 &:active,
511 &.active {
512 background-color: darken(@endColor, 10%) e("\9");
513 }
514 }
515
516 // Navbar vertical align
517 // -------------------------
518 // Vertically center elements in the navbar.
519 // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
520 .navbarVerticalAlign(@elementHeight) {
521 margin-top: (@navbarHeight - @elementHeight) / 2;
522 }
523
524
525
526 // Grid System
527 // -----------
528
529 // Centered container element
530 .container-fixed() {
531 margin-right: auto;
532 margin-left: auto;
533 .clearfix();
534 }
535
536 // Table columns
537 .tableColumns(@columnSpan: 1) {
538 float: none; // undo default grid column styles
539 width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
540 margin-left: 0; // undo default grid column styles
541 }
542
543 // Make a Grid
544 // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
545 .makeRow() {
546 margin-left: @gridGutterWidth * -1;
547 .clearfix();
548 }
549 .makeColumn(@columns: 1, @offset: 0) {
550 float: left;
551 margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
552 width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
553 }
554
555 // The Grid
556 #grid {
557
558 .core (@gridColumnWidth, @gridGutterWidth) {
559
560 .spanX (@index) when (@index > 0) {
561 (~".span@{index}") { .span(@index); }
562 .spanX(@index - 1);
563 }
564 .spanX (0) {}
565
566 .offsetX (@index) when (@index > 0) {
567 (~".offset@{index}") { .offset(@index); }
568 .offsetX(@index - 1);
569 }
570 .offsetX (0) {}
571
572 .offset (@columns) {
573 margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
574 }
575
576 .span (@columns) {
577 width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
578 }
579
580 .row {
581 margin-left: @gridGutterWidth * -1;
582 .clearfix();
583 }
584
585 [class*="span"] {
586 float: left;
587 min-height: 1px; // prevent collapsing columns
588 margin-left: @gridGutterWidth;
589 }
590
591 // Set the container width, and override it for fixed navbars in media queries
592 .container,
593 .navbar-static-top .container,
594 .navbar-fixed-top .container,
595 .navbar-fixed-bottom .container { .span(@gridColumns); }
596
597 // generate .spanX and .offsetX
598 .spanX (@gridColumns);
599 .offsetX (@gridColumns);
600
601 }
602
603 .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
604
605 .spanX (@index) when (@index > 0) {
606 (~".span@{index}") { .span(@index); }
607 .spanX(@index - 1);
608 }
609 .spanX (0) {}
610
611 .offsetX (@index) when (@index > 0) {
612 (~'.offset@{index}') { .offset(@index); }
613 (~'.offset@{index}:first-child') { .offsetFirstChild(@index); }
614 .offsetX(@index - 1);
615 }
616 .offsetX (0) {}
617
618 .offset (@columns) {
619 margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
620 *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
621 }
622
623 .offsetFirstChild (@columns) {
624 margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
625 *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
626 }
627
628 .span (@columns) {
629 width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
630 *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
631 }
632
633 .row-fluid {
634 width: 100%;
635 .clearfix();
636 [class*="span"] {
637 .input-block-level();
638 float: left;
639 margin-left: @fluidGridGutterWidth;
640 *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
641 }
642 [class*="span"]:first-child {
643 margin-left: 0;
644 }
645
646 // Space grid-sized controls properly if multiple per line
647 .controls-row [class*="span"] + [class*="span"] {
648 margin-left: @fluidGridGutterWidth;
649 }
650
651 // generate .spanX and .offsetX
652 .spanX (@gridColumns);
653 .offsetX (@gridColumns);
654 }
655
656 }
657
658 .input(@gridColumnWidth, @gridGutterWidth) {
659
660 .spanX (@index) when (@index > 0) {
661 (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
662 .spanX(@index - 1);
663 }
664 .spanX (0) {}
665
666 .span(@columns) {
667 width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
668 }
669
670 input,
671 textarea,
672 .uneditable-input {
673 margin-left: 0; // override margin-left from core grid system
674 }
675
676 // Space grid-sized controls properly if multiple per line
677 .controls-row [class*="span"] + [class*="span"] {
678 margin-left: @gridGutterWidth;
679 }
680
681 // generate .spanX
682 .spanX (@gridColumns);
683
684 }
685
686 }