Commit | Line | Data |
---|---|---|
7b869721 S |
1 | // |
2 | // Mixins | |
3 | // -------------------------------------------------- | |
4 | ||
5 | ||
6 | // Utilities | |
7 | // ------------------------- | |
8 | ||
9 | // Clearfix | |
10 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ | |
11 | // | |
12 | // For modern browsers | |
13 | // 1. The space content is one way to avoid an Opera bug when the | |
14 | // contenteditable attribute is included anywhere else in the document. | |
15 | // Otherwise it causes space to appear at the top and bottom of elements | |
16 | // that are clearfixed. | |
17 | // 2. The use of `table` rather than `block` is only necessary if using | |
18 | // `:before` to contain the top-margins of child elements. | |
19 | .clearfix() { | |
20 | &:before, | |
21 | &:after { | |
22 | content: " "; /* 1 */ | |
23 | display: table; /* 2 */ | |
24 | } | |
25 | &:after { | |
26 | clear: both; | |
27 | } | |
28 | } | |
29 | ||
30 | // WebKit-style focus | |
31 | .tab-focus() { | |
32 | // Default | |
33 | outline: thin dotted #333; | |
34 | // WebKit | |
35 | outline: 5px auto -webkit-focus-ring-color; | |
36 | outline-offset: -2px; | |
37 | } | |
38 | ||
39 | // Center-align a block level element | |
40 | .center-block() { | |
41 | display: block; | |
42 | margin-left: auto; | |
43 | margin-right: auto; | |
44 | } | |
45 | ||
46 | // Sizing shortcuts | |
47 | .size(@width; @height) { | |
48 | width: @width; | |
49 | height: @height; | |
50 | } | |
51 | .square(@size) { | |
52 | .size(@size; @size); | |
53 | } | |
54 | ||
55 | // Placeholder text | |
56 | .placeholder(@color: @input-color-placeholder) { | |
57 | &:-moz-placeholder { color: @color; } // Firefox 4-18 | |
58 | &::-moz-placeholder { color: @color; } // Firefox 19+ | |
59 | &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ | |
60 | &::-webkit-input-placeholder { color: @color; } // Safari and Chrome | |
61 | } | |
62 | ||
63 | // Text overflow | |
64 | // Requires inline-block or block for proper styling | |
65 | .text-overflow() { | |
66 | overflow: hidden; | |
67 | text-overflow: ellipsis; | |
68 | white-space: nowrap; | |
69 | } | |
70 | ||
71 | // CSS image replacement | |
72 | // | |
73 | // Heads up! v3 launched with with only `.hide-text()`, but per our pattern for | |
74 | // mixins being reused as classes with the same name, this doesn't hold up. As | |
75 | // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note | |
76 | // that we cannot chain the mixins together in Less, so they are repeated. | |
77 | // | |
78 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 | |
79 | ||
80 | // Deprecated as of v3.0.1 (will be removed in v4) | |
81 | .hide-text() { | |
82 | font: ~"0/0" a; | |
83 | color: transparent; | |
84 | text-shadow: none; | |
85 | background-color: transparent; | |
86 | border: 0; | |
87 | } | |
88 | // New mixin to use as of v3.0.1 | |
89 | .text-hide() { | |
90 | font: ~"0/0" a; | |
91 | color: transparent; | |
92 | text-shadow: none; | |
93 | background-color: transparent; | |
94 | border: 0; | |
95 | } | |
96 | ||
97 | ||
98 | ||
99 | // CSS3 PROPERTIES | |
100 | // -------------------------------------------------- | |
101 | ||
102 | // Single side border-radius | |
103 | .border-top-radius(@radius) { | |
104 | border-top-right-radius: @radius; | |
105 | border-top-left-radius: @radius; | |
106 | } | |
107 | .border-right-radius(@radius) { | |
108 | border-bottom-right-radius: @radius; | |
109 | border-top-right-radius: @radius; | |
110 | } | |
111 | .border-bottom-radius(@radius) { | |
112 | border-bottom-right-radius: @radius; | |
113 | border-bottom-left-radius: @radius; | |
114 | } | |
115 | .border-left-radius(@radius) { | |
116 | border-bottom-left-radius: @radius; | |
117 | border-top-left-radius: @radius; | |
118 | } | |
119 | ||
120 | // Drop shadows | |
121 | .box-shadow(@shadow) { | |
122 | -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 | |
123 | box-shadow: @shadow; | |
124 | } | |
125 | ||
126 | // Transitions | |
127 | .transition(@transition) { | |
128 | -webkit-transition: @transition; | |
129 | transition: @transition; | |
130 | } | |
131 | .transition-property(@transition-property) { | |
132 | -webkit-transition-property: @transition-property; | |
133 | transition-property: @transition-property; | |
134 | } | |
135 | .transition-delay(@transition-delay) { | |
136 | -webkit-transition-delay: @transition-delay; | |
137 | transition-delay: @transition-delay; | |
138 | } | |
139 | .transition-duration(@transition-duration) { | |
140 | -webkit-transition-duration: @transition-duration; | |
141 | transition-duration: @transition-duration; | |
142 | } | |
143 | .transition-transform(@transition) { | |
144 | -webkit-transition: -webkit-transform @transition; | |
145 | -moz-transition: -moz-transform @transition; | |
146 | -o-transition: -o-transform @transition; | |
147 | transition: transform @transition; | |
148 | } | |
149 | ||
150 | // Transformations | |
151 | .rotate(@degrees) { | |
152 | -webkit-transform: rotate(@degrees); | |
153 | -ms-transform: rotate(@degrees); // IE9+ | |
154 | transform: rotate(@degrees); | |
155 | } | |
156 | .scale(@ratio) { | |
157 | -webkit-transform: scale(@ratio); | |
158 | -ms-transform: scale(@ratio); // IE9+ | |
159 | transform: scale(@ratio); | |
160 | } | |
161 | .translate(@x; @y) { | |
162 | -webkit-transform: translate(@x, @y); | |
163 | -ms-transform: translate(@x, @y); // IE9+ | |
164 | transform: translate(@x, @y); | |
165 | } | |
166 | .skew(@x; @y) { | |
167 | -webkit-transform: skew(@x, @y); | |
168 | -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ | |
169 | transform: skew(@x, @y); | |
170 | } | |
171 | .translate3d(@x; @y; @z) { | |
172 | -webkit-transform: translate3d(@x, @y, @z); | |
173 | transform: translate3d(@x, @y, @z); | |
174 | } | |
175 | ||
176 | .rotateX(@degrees) { | |
177 | -webkit-transform: rotateX(@degrees); | |
178 | -ms-transform: rotateX(@degrees); // IE9+ | |
179 | transform: rotateX(@degrees); | |
180 | } | |
181 | .rotateY(@degrees) { | |
182 | -webkit-transform: rotateY(@degrees); | |
183 | -ms-transform: rotateY(@degrees); // IE9+ | |
184 | transform: rotateY(@degrees); | |
185 | } | |
186 | .perspective(@perspective) { | |
187 | -webkit-perspective: @perspective; | |
188 | -moz-perspective: @perspective; | |
189 | perspective: @perspective; | |
190 | } | |
191 | .perspective-origin(@perspective) { | |
192 | -webkit-perspective-origin: @perspective; | |
193 | -moz-perspective-origin: @perspective; | |
194 | perspective-origin: @perspective; | |
195 | } | |
196 | .transform-origin(@origin) { | |
197 | -webkit-transform-origin: @origin; | |
198 | -moz-transform-origin: @origin; | |
199 | transform-origin: @origin; | |
200 | } | |
201 | ||
202 | // Animations | |
203 | .animation(@animation) { | |
204 | -webkit-animation: @animation; | |
205 | animation: @animation; | |
206 | } | |
207 | ||
208 | // Backface visibility | |
209 | // Prevent browsers from flickering when using CSS 3D transforms. | |
210 | // Default value is `visible`, but can be changed to `hidden` | |
211 | .backface-visibility(@visibility){ | |
212 | -webkit-backface-visibility: @visibility; | |
213 | -moz-backface-visibility: @visibility; | |
214 | backface-visibility: @visibility; | |
215 | } | |
216 | ||
217 | // Box sizing | |
218 | .box-sizing(@boxmodel) { | |
219 | -webkit-box-sizing: @boxmodel; | |
220 | -moz-box-sizing: @boxmodel; | |
221 | box-sizing: @boxmodel; | |
222 | } | |
223 | ||
224 | // User select | |
225 | // For selecting text on the page | |
226 | .user-select(@select) { | |
227 | -webkit-user-select: @select; | |
228 | -moz-user-select: @select; | |
229 | -ms-user-select: @select; // IE10+ | |
230 | -o-user-select: @select; | |
231 | user-select: @select; | |
232 | } | |
233 | ||
234 | // Resize anything | |
235 | .resizable(@direction) { | |
236 | resize: @direction; // Options: horizontal, vertical, both | |
237 | overflow: auto; // Safari fix | |
238 | } | |
239 | ||
240 | // CSS3 Content Columns | |
241 | .content-columns(@column-count; @column-gap: @grid-gutter-width) { | |
242 | -webkit-column-count: @column-count; | |
243 | -moz-column-count: @column-count; | |
244 | column-count: @column-count; | |
245 | -webkit-column-gap: @column-gap; | |
246 | -moz-column-gap: @column-gap; | |
247 | column-gap: @column-gap; | |
248 | } | |
249 | ||
250 | // Optional hyphenation | |
251 | .hyphens(@mode: auto) { | |
252 | word-wrap: break-word; | |
253 | -webkit-hyphens: @mode; | |
254 | -moz-hyphens: @mode; | |
255 | -ms-hyphens: @mode; // IE10+ | |
256 | -o-hyphens: @mode; | |
257 | hyphens: @mode; | |
258 | } | |
259 | ||
260 | // Opacity | |
261 | .opacity(@opacity) { | |
262 | opacity: @opacity; | |
263 | // IE8 filter | |
264 | @opacity-ie: (@opacity * 100); | |
265 | filter: ~"alpha(opacity=@{opacity-ie})"; | |
266 | } | |
267 | ||
268 | ||
269 | ||
270 | // GRADIENTS | |
271 | // -------------------------------------------------- | |
272 | ||
273 | #gradient { | |
274 | ||
275 | // Horizontal gradient, from left to right | |
276 | // | |
277 | // Creates two color stops, start and end, by specifying a color and position for each color stop. | |
278 | // Color stops are not available in IE9 and below. | |
279 | .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { | |
280 | background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ | |
281 | background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+ | |
282 | background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ | |
283 | background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 | |
284 | background-repeat: repeat-x; | |
285 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down | |
286 | } | |
287 | ||
288 | // Vertical gradient, from top to bottom | |
289 | // | |
290 | // Creates two color stops, start and end, by specifying a color and position for each color stop. | |
291 | // Color stops are not available in IE9 and below. | |
292 | .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { | |
293 | background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ | |
294 | background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1+, Chrome 10+ | |
295 | background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ | |
296 | background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 | |
297 | background-repeat: repeat-x; | |
298 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down | |
299 | } | |
300 | ||
301 | .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { | |
302 | background-repeat: repeat-x; | |
303 | background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+ | |
304 | background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+ | |
305 | background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10 | |
306 | } | |
307 | .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { | |
308 | background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); | |
309 | background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); | |
310 | background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); | |
311 | background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); | |
312 | background-repeat: no-repeat; | |
313 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback | |
314 | } | |
315 | .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { | |
316 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); | |
317 | background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); | |
318 | background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color); | |
319 | background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); | |
320 | background-repeat: no-repeat; | |
321 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback | |
322 | } | |
323 | .radial(@inner-color: #555; @outer-color: #333) { | |
324 | background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color)); | |
325 | background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); | |
326 | background-image: -moz-radial-gradient(circle, @inner-color, @outer-color); | |
327 | background-image: radial-gradient(circle, @inner-color, @outer-color); | |
328 | background-repeat: no-repeat; | |
329 | } | |
330 | .striped(@color: rgba(255,255,255,.15); @angle: 45deg) { | |
331 | background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, @color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, @color), color-stop(.75, @color), color-stop(.75, transparent), to(transparent)); | |
332 | background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); | |
333 | background-image: -moz-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); | |
334 | background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); | |
335 | } | |
336 | } | |
337 | ||
338 | // Reset filters for IE | |
339 | // | |
340 | // When you need to remove a gradient background, do not forget to use this to reset | |
341 | // the IE filter for IE9 and below. | |
342 | .reset-filter() { | |
343 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); | |
344 | } | |
345 | ||
346 | ||
347 | ||
348 | // Retina images | |
349 | // | |
350 | // Short retina mixin for setting background-image and -size | |
351 | ||
352 | .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { | |
353 | background-image: url("@{file-1x}"); | |
354 | ||
355 | @media | |
356 | only screen and (-webkit-min-device-pixel-ratio: 2), | |
357 | only screen and ( min--moz-device-pixel-ratio: 2), | |
358 | only screen and ( -o-min-device-pixel-ratio: 2/1), | |
359 | only screen and ( min-device-pixel-ratio: 2), | |
360 | only screen and ( min-resolution: 192dpi), | |
361 | only screen and ( min-resolution: 2dppx) { | |
362 | background-image: url("@{file-2x}"); | |
363 | background-size: @width-1x @height-1x; | |
364 | } | |
365 | } | |
366 | ||
367 | ||
368 | // Responsive image | |
369 | // | |
370 | // Keep images from scaling beyond the width of their parents. | |
371 | ||
372 | .img-responsive(@display: block;) { | |
373 | display: @display; | |
374 | max-width: 100%; // Part 1: Set a maximum relative to the parent | |
375 | height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching | |
376 | } | |
377 | ||
378 | ||
379 | // COMPONENT MIXINS | |
380 | // -------------------------------------------------- | |
381 | ||
382 | // Horizontal dividers | |
383 | // ------------------------- | |
384 | // Dividers (basically an hr) within dropdowns and nav lists | |
385 | .nav-divider(@color: #e5e5e5) { | |
386 | height: 1px; | |
387 | margin: ((@line-height-computed / 2) - 1) 0; | |
388 | overflow: hidden; | |
389 | background-color: @color; | |
390 | } | |
391 | ||
392 | // Panels | |
393 | // ------------------------- | |
394 | .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) { | |
395 | border-color: @border; | |
396 | ||
397 | & > .panel-heading { | |
398 | color: @heading-text-color; | |
399 | background-color: @heading-bg-color; | |
400 | border-color: @heading-border; | |
401 | ||
402 | + .panel-collapse .panel-body { | |
403 | border-top-color: @border; | |
404 | } | |
405 | & > .dropdown .caret { | |
406 | border-color: @heading-text-color transparent; | |
407 | } | |
408 | } | |
409 | & > .panel-footer { | |
410 | + .panel-collapse .panel-body { | |
411 | border-bottom-color: @border; | |
412 | } | |
413 | } | |
414 | } | |
415 | ||
416 | // Alerts | |
417 | // ------------------------- | |
418 | .alert-variant(@background; @border; @text-color) { | |
419 | background-color: @background; | |
420 | border-color: @border; | |
421 | color: @text-color; | |
422 | ||
423 | hr { | |
424 | border-top-color: darken(@border, 5%); | |
425 | } | |
426 | .alert-link { | |
427 | color: darken(@text-color, 10%); | |
428 | } | |
429 | } | |
430 | ||
431 | // Tables | |
432 | // ------------------------- | |
433 | .table-row-variant(@state; @background; @border) { | |
434 | // Exact selectors below required to override `.table-striped` and prevent | |
435 | // inheritance to nested tables. | |
436 | .table > thead > tr, | |
437 | .table > tbody > tr, | |
438 | .table > tfoot > tr { | |
439 | > td.@{state}, | |
440 | > th.@{state}, | |
441 | &.@{state} > td, | |
442 | &.@{state} > th { | |
443 | background-color: @background; | |
444 | } | |
445 | } | |
446 | ||
447 | // Hover states for `.table-hover` | |
448 | // Note: this is not available for cells or rows within `thead` or `tfoot`. | |
449 | .table-hover > tbody > tr { | |
450 | > td.@{state}:hover, | |
451 | > th.@{state}:hover, | |
452 | &.@{state}:hover > td, | |
453 | &.@{state}:hover > th { | |
454 | background-color: darken(@background, 5%); | |
455 | } | |
456 | } | |
457 | } | |
458 | ||
459 | // Button variants | |
460 | // ------------------------- | |
461 | // Easily pump out default styles, as well as :hover, :focus, :active, | |
462 | // and disabled options for all buttons | |
463 | .button-variant(@color; @background; @border) { | |
464 | color: @color; | |
465 | background-color: @background; | |
466 | border-color: @border; | |
467 | ||
468 | &:hover, | |
469 | &:focus, | |
470 | &:active, | |
471 | &.active, | |
472 | .open .dropdown-toggle& { | |
473 | color: @color; | |
474 | background-color: darken(@background, 8%); | |
475 | border-color: darken(@border, 12%); | |
476 | } | |
477 | &:active, | |
478 | &.active, | |
479 | .open .dropdown-toggle& { | |
480 | background-image: none; | |
481 | } | |
482 | &.disabled, | |
483 | &[disabled], | |
484 | fieldset[disabled] & { | |
485 | &, | |
486 | &:hover, | |
487 | &:focus, | |
488 | &:active, | |
489 | &.active { | |
490 | background-color: @background; | |
491 | border-color: @border; | |
492 | } | |
493 | } | |
494 | } | |
495 | ||
496 | // Button sizes | |
497 | // ------------------------- | |
498 | .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { | |
499 | padding: @padding-vertical @padding-horizontal; | |
500 | font-size: @font-size; | |
501 | line-height: @line-height; | |
502 | border-radius: @border-radius; | |
503 | } | |
504 | ||
505 | // Pagination | |
506 | // ------------------------- | |
507 | .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) { | |
508 | > li { | |
509 | > a, | |
510 | > span { | |
511 | padding: @padding-vertical @padding-horizontal; | |
512 | font-size: @font-size; | |
513 | } | |
514 | &:first-child { | |
515 | > a, | |
516 | > span { | |
517 | .border-left-radius(@border-radius); | |
518 | } | |
519 | } | |
520 | &:last-child { | |
521 | > a, | |
522 | > span { | |
523 | .border-right-radius(@border-radius); | |
524 | } | |
525 | } | |
526 | } | |
527 | } | |
528 | ||
529 | // Labels | |
530 | // ------------------------- | |
531 | .label-variant(@color) { | |
532 | background-color: @color; | |
533 | &[href] { | |
534 | &:hover, | |
535 | &:focus { | |
536 | background-color: darken(@color, 10%); | |
537 | } | |
538 | } | |
539 | } | |
540 | ||
541 | // Navbar vertical align | |
542 | // ------------------------- | |
543 | // Vertically center elements in the navbar. | |
544 | // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. | |
545 | .navbar-vertical-align(@element-height) { | |
546 | margin-top: ((@navbar-height - @element-height) / 2); | |
547 | margin-bottom: ((@navbar-height - @element-height) / 2); | |
548 | } | |
549 | ||
550 | // Progress bars | |
551 | // ------------------------- | |
552 | .progress-bar-variant(@color) { | |
553 | background-color: @color; | |
554 | .progress-striped & { | |
555 | #gradient > .striped(); | |
556 | } | |
557 | } | |
558 | ||
559 | // Responsive utilities | |
560 | // ------------------------- | |
561 | // More easily include all the states for responsive-utilities.less. | |
562 | .responsive-visibility() { | |
563 | display: block !important; | |
564 | tr& { display: table-row !important; } | |
565 | th&, | |
566 | td& { display: table-cell !important; } | |
567 | } | |
568 | ||
569 | .responsive-invisibility() { | |
570 | &, | |
571 | tr&, | |
572 | th&, | |
573 | td& { display: none !important; } | |
574 | } | |
575 | ||
576 | ||
577 | // Grid System | |
578 | // ----------- | |
579 | ||
580 | // Centered container element | |
581 | .container-fixed() { | |
582 | margin-right: auto; | |
583 | margin-left: auto; | |
584 | padding-left: (@grid-gutter-width / 2); | |
585 | padding-right: (@grid-gutter-width / 2); | |
586 | .clearfix(); | |
587 | } | |
588 | ||
589 | // Creates a wrapper for a series of columns | |
590 | .make-row(@gutter: @grid-gutter-width) { | |
591 | margin-left: (@gutter / -2); | |
592 | margin-right: (@gutter / -2); | |
593 | .clearfix(); | |
594 | } | |
595 | ||
596 | // Generate the extra small columns | |
597 | .make-xs-column(@columns; @gutter: @grid-gutter-width) { | |
598 | position: relative; | |
599 | float: left; | |
600 | width: percentage((@columns / @grid-columns)); | |
601 | // Prevent columns from collapsing when empty | |
602 | min-height: 1px; | |
603 | // Inner gutter via padding | |
604 | padding-left: (@gutter / 2); | |
605 | padding-right: (@gutter / 2); | |
606 | } | |
607 | ||
608 | // Generate the small columns | |
609 | .make-sm-column(@columns; @gutter: @grid-gutter-width) { | |
610 | position: relative; | |
611 | // Prevent columns from collapsing when empty | |
612 | min-height: 1px; | |
613 | // Inner gutter via padding | |
614 | padding-left: (@gutter / 2); | |
615 | padding-right: (@gutter / 2); | |
616 | ||
617 | // Calculate width based on number of columns available | |
618 | @media (min-width: @screen-sm-min) { | |
619 | float: left; | |
620 | width: percentage((@columns / @grid-columns)); | |
621 | } | |
622 | } | |
623 | ||
624 | // Generate the small column offsets | |
625 | .make-sm-column-offset(@columns) { | |
626 | @media (min-width: @screen-sm-min) { | |
627 | margin-left: percentage((@columns / @grid-columns)); | |
628 | } | |
629 | } | |
630 | .make-sm-column-push(@columns) { | |
631 | @media (min-width: @screen-sm-min) { | |
632 | left: percentage((@columns / @grid-columns)); | |
633 | } | |
634 | } | |
635 | .make-sm-column-pull(@columns) { | |
636 | @media (min-width: @screen-sm-min) { | |
637 | right: percentage((@columns / @grid-columns)); | |
638 | } | |
639 | } | |
640 | ||
641 | // Generate the medium columns | |
642 | .make-md-column(@columns; @gutter: @grid-gutter-width) { | |
643 | position: relative; | |
644 | // Prevent columns from collapsing when empty | |
645 | min-height: 1px; | |
646 | // Inner gutter via padding | |
647 | padding-left: (@gutter / 2); | |
648 | padding-right: (@gutter / 2); | |
649 | ||
650 | // Calculate width based on number of columns available | |
651 | @media (min-width: @screen-md-min) { | |
652 | float: left; | |
653 | width: percentage((@columns / @grid-columns)); | |
654 | } | |
655 | } | |
656 | ||
657 | // Generate the medium column offsets | |
658 | .make-md-column-offset(@columns) { | |
659 | @media (min-width: @screen-md-min) { | |
660 | margin-left: percentage((@columns / @grid-columns)); | |
661 | } | |
662 | } | |
663 | .make-md-column-push(@columns) { | |
664 | @media (min-width: @screen-md) { | |
665 | left: percentage((@columns / @grid-columns)); | |
666 | } | |
667 | } | |
668 | .make-md-column-pull(@columns) { | |
669 | @media (min-width: @screen-md-min) { | |
670 | right: percentage((@columns / @grid-columns)); | |
671 | } | |
672 | } | |
673 | ||
674 | // Generate the large columns | |
675 | .make-lg-column(@columns; @gutter: @grid-gutter-width) { | |
676 | position: relative; | |
677 | // Prevent columns from collapsing when empty | |
678 | min-height: 1px; | |
679 | // Inner gutter via padding | |
680 | padding-left: (@gutter / 2); | |
681 | padding-right: (@gutter / 2); | |
682 | ||
683 | // Calculate width based on number of columns available | |
684 | @media (min-width: @screen-lg-min) { | |
685 | float: left; | |
686 | width: percentage((@columns / @grid-columns)); | |
687 | } | |
688 | } | |
689 | ||
690 | // Generate the large column offsets | |
691 | .make-lg-column-offset(@columns) { | |
692 | @media (min-width: @screen-lg-min) { | |
693 | margin-left: percentage((@columns / @grid-columns)); | |
694 | } | |
695 | } | |
696 | .make-lg-column-push(@columns) { | |
697 | @media (min-width: @screen-lg-min) { | |
698 | left: percentage((@columns / @grid-columns)); | |
699 | } | |
700 | } | |
701 | .make-lg-column-pull(@columns) { | |
702 | @media (min-width: @screen-lg-min) { | |
703 | right: percentage((@columns / @grid-columns)); | |
704 | } | |
705 | } | |
706 | ||
707 | ||
708 | // Framework grid generation | |
709 | // | |
710 | // Used only by Bootstrap to generate the correct number of grid classes given | |
711 | // any value of `@grid-columns`. | |
712 | ||
713 | .make-grid-columns() { | |
714 | // Common styles for all sizes of grid columns, widths 1-12 | |
715 | .col(@index) when (@index = 1) { // initial | |
716 | @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | |
717 | .col(@index + 1, @item); | |
718 | } | |
719 | .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo | |
720 | @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | |
721 | .col(@index + 1, ~"@{list}, @{item}"); | |
722 | } | |
723 | .col(@index, @list) when (@index > @grid-columns) { // terminal | |
724 | @{list} { | |
725 | position: relative; | |
726 | // Prevent columns from collapsing when empty | |
727 | min-height: 1px; | |
728 | // Inner gutter via padding | |
729 | padding-left: (@grid-gutter-width / 2); | |
730 | padding-right: (@grid-gutter-width / 2); | |
731 | } | |
732 | } | |
733 | .col(1); // kickstart it | |
734 | } | |
735 | ||
736 | .make-grid-columns-float(@class) { | |
737 | .col(@index) when (@index = 1) { // initial | |
738 | @item: ~".col-@{class}-@{index}"; | |
739 | .col(@index + 1, @item); | |
740 | } | |
741 | .col(@index, @list) when (@index < @grid-columns) { // general | |
742 | @item: ~".col-@{class}-@{index}"; | |
743 | .col(@index + 1, ~"@{list}, @{item}"); | |
744 | } | |
745 | .col(@index, @list) when (@index = @grid-columns) { // terminal | |
746 | @{list} { | |
747 | float: left; | |
748 | } | |
749 | } | |
750 | .col(1); // kickstart it | |
751 | } | |
752 | ||
753 | .calc-grid(@index, @class, @type) when (@type = width) { | |
754 | .col-@{class}-@{index} { | |
755 | width: percentage((@index / @grid-columns)); | |
756 | } | |
757 | } | |
758 | .calc-grid(@index, @class, @type) when (@type = push) { | |
759 | .col-@{class}-push-@{index} { | |
760 | left: percentage((@index / @grid-columns)); | |
761 | } | |
762 | } | |
763 | .calc-grid(@index, @class, @type) when (@type = pull) { | |
764 | .col-@{class}-pull-@{index} { | |
765 | right: percentage((@index / @grid-columns)); | |
766 | } | |
767 | } | |
768 | .calc-grid(@index, @class, @type) when (@type = offset) { | |
769 | .col-@{class}-offset-@{index} { | |
770 | margin-left: percentage((@index / @grid-columns)); | |
771 | } | |
772 | } | |
773 | ||
774 | // Basic looping in LESS | |
775 | .make-grid(@index, @class, @type) when (@index > 0) { | |
776 | .calc-grid(@index, @class, @type); | |
777 | // next iteration | |
778 | .make-grid(@index - 1, @class, @type); | |
779 | } | |
780 | ||
781 | ||
782 | // Form validation states | |
783 | // | |
784 | // Used in forms.less to generate the form validation CSS for warnings, errors, | |
785 | // and successes. | |
786 | ||
787 | .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { | |
788 | // Color the label and help text | |
789 | .help-block, | |
790 | .control-label, | |
791 | .radio, | |
792 | .checkbox, | |
793 | .radio-inline, | |
794 | .checkbox-inline { | |
795 | color: @text-color; | |
796 | } | |
797 | // Set the border and box shadow on specific inputs to match | |
798 | .form-control { | |
799 | border-color: @border-color; | |
800 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work | |
801 | &:focus { | |
802 | border-color: darken(@border-color, 10%); | |
803 | @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); | |
804 | .box-shadow(@shadow); | |
805 | } | |
806 | } | |
807 | // Set validation states also for addons | |
808 | .input-group-addon { | |
809 | color: @text-color; | |
810 | border-color: @border-color; | |
811 | background-color: @background-color; | |
812 | } | |
813 | } | |
814 | ||
815 | // Form control focus state | |
816 | // | |
817 | // Generate a customized focus state and for any input with the specified color, | |
818 | // which defaults to the `@input-focus-border` variable. | |
819 | // | |
820 | // We highly encourage you to not customize the default value, but instead use | |
821 | // this to tweak colors on an as-needed basis. This aesthetic change is based on | |
822 | // WebKit's default styles, but applicable to a wider range of browsers. Its | |
823 | // usability and accessibility should be taken into account with any change. | |
824 | // | |
825 | // Example usage: change the default blue border and shadow to white for better | |
826 | // contrast against a dark gray background. | |
827 | ||
828 | .form-control-focus(@color: @input-border-focus) { | |
829 | @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); | |
830 | &:focus { | |
831 | border-color: @color; | |
832 | outline: 0; | |
833 | .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); | |
834 | } | |
835 | } | |
836 | ||
837 | // Form control sizing | |
838 | // | |
839 | // Relative text size, padding, and border-radii changes for form controls. For | |
840 | // horizontal sizing, wrap controls in the predefined grid classes. `<select>` | |
841 | // element gets special love because it's special, and that's a fact! | |
842 | ||
843 | .input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { | |
844 | height: @input-height; | |
845 | padding: @padding-vertical @padding-horizontal; | |
846 | font-size: @font-size; | |
847 | line-height: @line-height; | |
848 | border-radius: @border-radius; | |
849 | ||
850 | select& { | |
851 | height: @input-height; | |
852 | line-height: @input-height; | |
853 | } | |
854 | ||
855 | textarea& { | |
856 | height: auto; | |
857 | } | |
858 | } |