Mercurial > wikked

comparison static/bootstrap/less/mixins.less @ 149:d29e2f337b00

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