bootstrap3-wip-rails 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +17 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +54 -0
  6. data/Rakefile +1 -0
  7. data/bootstrap3-wip-rails.gemspec +25 -0
  8. data/lib/assets/javascripts/bootstrap.js +14 -0
  9. data/lib/bootstrap3/wip/rails.rb +10 -0
  10. data/lib/bootstrap3/wip/rails/version.rb +7 -0
  11. data/vendor/assets/images/glyphiconshalflings-regular.eot +0 -0
  12. data/vendor/assets/images/glyphiconshalflings-regular.otf +0 -0
  13. data/vendor/assets/images/glyphiconshalflings-regular.svg +175 -0
  14. data/vendor/assets/images/glyphiconshalflings-regular.ttf +0 -0
  15. data/vendor/assets/images/glyphiconshalflings-regular.woff +0 -0
  16. data/vendor/assets/javascripts/bootstrap-affix.js +117 -0
  17. data/vendor/assets/javascripts/bootstrap-alert.js +99 -0
  18. data/vendor/assets/javascripts/bootstrap-button.js +105 -0
  19. data/vendor/assets/javascripts/bootstrap-carousel.js +207 -0
  20. data/vendor/assets/javascripts/bootstrap-collapse.js +167 -0
  21. data/vendor/assets/javascripts/bootstrap-dropdown.js +165 -0
  22. data/vendor/assets/javascripts/bootstrap-modal.js +251 -0
  23. data/vendor/assets/javascripts/bootstrap-popover.js +114 -0
  24. data/vendor/assets/javascripts/bootstrap-scrollspy.js +162 -0
  25. data/vendor/assets/javascripts/bootstrap-tab.js +144 -0
  26. data/vendor/assets/javascripts/bootstrap-tooltip.js +361 -0
  27. data/vendor/assets/javascripts/bootstrap-transition.js +60 -0
  28. data/vendor/assets/javascripts/bootstrap-typeahead.js +335 -0
  29. data/vendor/assets/stylesheets/accordion.less +34 -0
  30. data/vendor/assets/stylesheets/alerts.less +97 -0
  31. data/vendor/assets/stylesheets/badges.less +58 -0
  32. data/vendor/assets/stylesheets/bootstrap.less +64 -0
  33. data/vendor/assets/stylesheets/breadcrumbs.less +28 -0
  34. data/vendor/assets/stylesheets/button-groups.less +166 -0
  35. data/vendor/assets/stylesheets/buttons.less +175 -0
  36. data/vendor/assets/stylesheets/carousel.less +191 -0
  37. data/vendor/assets/stylesheets/close.less +33 -0
  38. data/vendor/assets/stylesheets/code.less +61 -0
  39. data/vendor/assets/stylesheets/component-animations.less +32 -0
  40. data/vendor/assets/stylesheets/dropdowns.less +223 -0
  41. data/vendor/assets/stylesheets/forms.less +553 -0
  42. data/vendor/assets/stylesheets/glyphicons.less +200 -0
  43. data/vendor/assets/stylesheets/grid.less +57 -0
  44. data/vendor/assets/stylesheets/jumbotron.less +32 -0
  45. data/vendor/assets/stylesheets/labels.less +46 -0
  46. data/vendor/assets/stylesheets/list-group.less +96 -0
  47. data/vendor/assets/stylesheets/media.less +54 -0
  48. data/vendor/assets/stylesheets/mixins.less +551 -0
  49. data/vendor/assets/stylesheets/modals.less +137 -0
  50. data/vendor/assets/stylesheets/navbar.less +389 -0
  51. data/vendor/assets/stylesheets/navs.less +283 -0
  52. data/vendor/assets/stylesheets/normalize.less +396 -0
  53. data/vendor/assets/stylesheets/pager.less +54 -0
  54. data/vendor/assets/stylesheets/pagination.less +100 -0
  55. data/vendor/assets/stylesheets/panels.less +86 -0
  56. data/vendor/assets/stylesheets/popovers.less +133 -0
  57. data/vendor/assets/stylesheets/print.less +74 -0
  58. data/vendor/assets/stylesheets/progress-bars.less +118 -0
  59. data/vendor/assets/stylesheets/responsive-utilities.less +59 -0
  60. data/vendor/assets/stylesheets/scaffolding.less +91 -0
  61. data/vendor/assets/stylesheets/tables.less +241 -0
  62. data/vendor/assets/stylesheets/thumbnails.less +42 -0
  63. data/vendor/assets/stylesheets/tooltip.less +71 -0
  64. data/vendor/assets/stylesheets/type.less +253 -0
  65. data/vendor/assets/stylesheets/utilities.less +42 -0
  66. data/vendor/assets/stylesheets/variables.less +354 -0
  67. data/vendor/assets/stylesheets/wells.less +29 -0
  68. metadata +166 -0
@@ -0,0 +1,551 @@
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
+ // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
73
+ .hide-text() {
74
+ font: 0/0 a;
75
+ color: transparent;
76
+ text-shadow: none;
77
+ background-color: transparent;
78
+ border: 0;
79
+ }
80
+
81
+
82
+
83
+ // CSS3 PROPERTIES
84
+ // --------------------------------------------------
85
+
86
+ // Single side border-radius
87
+ .border-top-radius(@radius) {
88
+ border-top-right-radius: @radius;
89
+ border-top-left-radius: @radius;
90
+ }
91
+ .border-right-radius(@radius) {
92
+ border-bottom-right-radius: @radius;
93
+ border-top-right-radius: @radius;
94
+ }
95
+ .border-bottom-radius(@radius) {
96
+ border-bottom-right-radius: @radius;
97
+ border-bottom-left-radius: @radius;
98
+ }
99
+ .border-left-radius(@radius) {
100
+ border-bottom-left-radius: @radius;
101
+ border-top-left-radius: @radius;
102
+ }
103
+
104
+ // Drop shadows
105
+ .box-shadow(@shadow) {
106
+ -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
107
+ box-shadow: @shadow;
108
+ }
109
+
110
+ // Transitions
111
+ .transition(@transition) {
112
+ -webkit-transition: @transition;
113
+ -moz-transition: @transition;
114
+ -o-transition: @transition;
115
+ transition: @transition;
116
+ }
117
+ .transition-delay(@transition-delay) {
118
+ -webkit-transition-delay: @transition-delay;
119
+ -moz-transition-delay: @transition-delay;
120
+ -o-transition-delay: @transition-delay;
121
+ transition-delay: @transition-delay;
122
+ }
123
+ .transition-duration(@transition-duration) {
124
+ -webkit-transition-duration: @transition-duration;
125
+ -moz-transition-duration: @transition-duration;
126
+ -o-transition-duration: @transition-duration;
127
+ transition-duration: @transition-duration;
128
+ }
129
+
130
+ // Transformations
131
+ .rotate(@degrees) {
132
+ -webkit-transform: rotate(@degrees);
133
+ -moz-transform: rotate(@degrees);
134
+ -ms-transform: rotate(@degrees);
135
+ -o-transform: rotate(@degrees);
136
+ transform: rotate(@degrees);
137
+ }
138
+ .scale(@ratio) {
139
+ -webkit-transform: scale(@ratio);
140
+ -moz-transform: scale(@ratio);
141
+ -ms-transform: scale(@ratio);
142
+ -o-transform: scale(@ratio);
143
+ transform: scale(@ratio);
144
+ }
145
+ .translate(@x, @y) {
146
+ -webkit-transform: translate(@x, @y);
147
+ -moz-transform: translate(@x, @y);
148
+ -ms-transform: translate(@x, @y);
149
+ -o-transform: translate(@x, @y);
150
+ transform: translate(@x, @y);
151
+ }
152
+ .skew(@x, @y) {
153
+ -webkit-transform: skew(@x, @y);
154
+ -moz-transform: skew(@x, @y);
155
+ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
156
+ -o-transform: skew(@x, @y);
157
+ transform: skew(@x, @y);
158
+ }
159
+ .translate3d(@x, @y, @z) {
160
+ -webkit-transform: translate3d(@x, @y, @z);
161
+ -moz-transform: translate3d(@x, @y, @z);
162
+ -o-transform: translate3d(@x, @y, @z);
163
+ transform: translate3d(@x, @y, @z);
164
+ }
165
+
166
+ // Backface visibility
167
+ // Prevent browsers from flickering when using CSS 3D transforms.
168
+ // Default value is `visible`, but can be changed to `hidden
169
+ // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
170
+ .backface-visibility(@visibility){
171
+ -webkit-backface-visibility: @visibility;
172
+ -moz-backface-visibility: @visibility;
173
+ backface-visibility: @visibility;
174
+ }
175
+
176
+ // Background clipping
177
+ .background-clip(@clip) {
178
+ -webkit-background-clip: @clip;
179
+ -moz-background-clip: @clip;
180
+ background-clip: @clip;
181
+ }
182
+
183
+ // Background sizing
184
+ .background-size(@size) {
185
+ -webkit-background-size: @size;
186
+ -moz-background-size: @size;
187
+ -o-background-size: @size;
188
+ background-size: @size;
189
+ }
190
+
191
+ // Box sizing
192
+ .box-sizing(@boxmodel) {
193
+ -webkit-box-sizing: @boxmodel;
194
+ -moz-box-sizing: @boxmodel;
195
+ box-sizing: @boxmodel;
196
+ }
197
+
198
+ // User select
199
+ // For selecting text on the page
200
+ .user-select(@select) {
201
+ -webkit-user-select: @select;
202
+ -moz-user-select: @select;
203
+ -ms-user-select: @select;
204
+ -o-user-select: @select;
205
+ user-select: @select;
206
+ }
207
+
208
+ // Resize anything
209
+ .resizable(@direction) {
210
+ resize: @direction; // Options: horizontal, vertical, both
211
+ overflow: auto; // Safari fix
212
+ }
213
+
214
+ // CSS3 Content Columns
215
+ .content-columns(@column-count, @column-gap: @grid-gutter-width) {
216
+ -webkit-column-count: @column-count;
217
+ -moz-column-count: @column-count;
218
+ column-count: @column-count;
219
+ -webkit-column-gap: @column-gap;
220
+ -moz-column-gap: @column-gap;
221
+ column-gap: @column-gap;
222
+ }
223
+
224
+ // Optional hyphenation
225
+ .hyphens(@mode: auto) {
226
+ word-wrap: break-word;
227
+ -webkit-hyphens: @mode;
228
+ -moz-hyphens: @mode;
229
+ -ms-hyphens: @mode;
230
+ -o-hyphens: @mode;
231
+ hyphens: @mode;
232
+ }
233
+
234
+ // Opacity
235
+ .opacity(@opacity) {
236
+ opacity: @opacity;
237
+ // IE8 filter
238
+ @opacity-ie: (@opacity * 100);
239
+ filter: ~"alpha(opacity=@{opacity-ie})";
240
+ }
241
+
242
+
243
+
244
+ // BACKGROUNDS
245
+ // --------------------------------------------------
246
+
247
+ // Gradients
248
+ #gradient {
249
+ .horizontal(@startColor: #555, @endColor: #333) {
250
+ background-color: @endColor;
251
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
252
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
253
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
254
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
255
+ background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
256
+ background-repeat: repeat-x;
257
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
258
+ }
259
+ .vertical(@startColor: #555, @endColor: #333) {
260
+ background-color: @endColor;
261
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
262
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
263
+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
264
+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
265
+ background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
266
+ background-repeat: repeat-x;
267
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
268
+ }
269
+ .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
270
+ background-color: @endColor;
271
+ background-repeat: repeat-x;
272
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
273
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
274
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
275
+ background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
276
+ }
277
+ .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
278
+ background-color: mix(@midColor, @endColor, 80%);
279
+ background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
280
+ background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
281
+ background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
282
+ background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
283
+ background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
284
+ background-repeat: no-repeat;
285
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
286
+ }
287
+
288
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
289
+ background-color: mix(@midColor, @endColor, 80%);
290
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
291
+ background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
292
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
293
+ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
294
+ background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
295
+ background-repeat: no-repeat;
296
+ 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
297
+ }
298
+ .radial(@innerColor: #555, @outerColor: #333) {
299
+ background-color: @outerColor;
300
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
301
+ background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
302
+ background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
303
+ background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
304
+ background-image: radial-gradient(circle, @innerColor, @outerColor);
305
+ background-repeat: no-repeat;
306
+ }
307
+ .striped(@color: #555, @angle: 45deg) {
308
+ background-color: @color;
309
+ 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));
310
+ 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);
311
+ 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);
312
+ 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);
313
+ 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);
314
+ }
315
+ }
316
+ // Reset filters for IE
317
+ .reset-filter() {
318
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
319
+ }
320
+
321
+
322
+ // RETINA IMAGE SUPPORT
323
+ // --------------------------------------------------
324
+
325
+ // Short retina mixin for setting background-image and -size
326
+ .retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {
327
+ background-image: url("@{file-1x}");
328
+
329
+ @media
330
+ only screen and (-webkit-min-device-pixel-ratio: 2),
331
+ only screen and ( min--moz-device-pixel-ratio: 2),
332
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
333
+ only screen and ( min-device-pixel-ratio: 2),
334
+ only screen and ( min-resolution: 192dpi),
335
+ only screen and ( min-resolution: 2dppx) {
336
+ background-image: url("@{file-2x}");
337
+ background-size: @width-1x @height-1x;
338
+ }
339
+ }
340
+
341
+
342
+ // COMPONENT MIXINS
343
+ // --------------------------------------------------
344
+
345
+ // Horizontal dividers
346
+ // -------------------------
347
+ // Dividers (basically an hr) within dropdowns and nav lists
348
+ .nav-divider(@top: #e5e5e5, @bottom: #fff) {
349
+ height: 2px; // 1px for background, one for border
350
+ margin: ((@line-height-base / 2) - 1) 0;
351
+ overflow: hidden;
352
+ background-color: @top;
353
+ border-bottom: 1px solid @bottom;
354
+ }
355
+
356
+ // Button psuedo states
357
+ // -------------------------
358
+ // Easily pump out default styles, as well as :hover, :focus, :active,
359
+ // and disabled options for all buttons
360
+ .btn-pseudo-states(@background, @border) {
361
+ background-color: @background;
362
+ border-color: @border;
363
+
364
+ &:hover,
365
+ &:focus,
366
+ &:active,
367
+ &.active {
368
+ background-color: darken(@background, 5%);
369
+ border-color: darken(@border, 10%);
370
+ }
371
+
372
+ &.disabled,
373
+ &[disabled],
374
+ fieldset[disabled] & {
375
+ &:hover,
376
+ &:focus,
377
+ &:active,
378
+ &.active {
379
+ background-color: @background;
380
+ border-color: @border
381
+ }
382
+ }
383
+ }
384
+
385
+ // Navbar vertical align
386
+ // -------------------------
387
+ // Vertically center elements in the navbar.
388
+ // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
389
+ .navbar-vertical-align(@element-height) {
390
+ margin-top: ((@navbar-height - @element-height) / 2);
391
+ margin-bottom: ((@navbar-height - @element-height) / 2);
392
+ }
393
+
394
+
395
+
396
+ // Grid System
397
+ // -----------
398
+
399
+ // Centered container element
400
+ .container-fixed() {
401
+ margin-right: auto;
402
+ margin-left: auto;
403
+ .clearfix();
404
+ }
405
+
406
+ // Make a grid
407
+
408
+ // Creates a wrapper for a series of columns
409
+ .make-row() {
410
+ // Then clear the floated columns
411
+ .clearfix();
412
+
413
+ // Negative margin nested rows out to align the content of columns
414
+ .row {
415
+ margin-left: (@grid-gutter-width / -2);
416
+ margin-right: (@grid-gutter-width / -2);
417
+ }
418
+ }
419
+ // Generate the columns
420
+ .make-column(@columns) {
421
+ @media (min-width: @grid-float-breakpoint) {
422
+ float: left;
423
+ // Calculate width based on number of columns available
424
+ width: percentage(@columns / @grid-columns);
425
+ }
426
+ // Prevent columns from collapsing when empty
427
+ min-height: 1px;
428
+ // Set inner padding as gutters instead of margin
429
+ padding-left: (@grid-gutter-width / 2);
430
+ padding-right: (@grid-gutter-width / 2);
431
+ }
432
+ // Generate the column offsets
433
+ .make-column-offset(@columns) {
434
+ @media (min-width: @grid-float-breakpoint) {
435
+ margin-left: percentage((@columns / @grid-columns));
436
+ }
437
+ }
438
+ .make-column-push(@columns) {
439
+ @media (min-width: @grid-float-breakpoint) {
440
+ left: percentage((@columns / @grid-columns));
441
+ }
442
+ }
443
+ .make-column-pull(@columns) {
444
+ @media (min-width: @grid-float-breakpoint) {
445
+ right: percentage((@columns / @grid-columns));
446
+ }
447
+ }
448
+
449
+
450
+
451
+ // The Grid
452
+ .generate-grid-columns(@grid-columns) {
453
+
454
+ // Default columns
455
+ .col-span-X (@index) when (@index > 0) {
456
+ .col-span-@{index} { .col-span-(@index); }
457
+ .col-span-X((@index - 1));
458
+ }
459
+ .col-span-X(0) {}
460
+
461
+ // Offsets (gaps between columns)
462
+ .col-offset-X (@index) when (@index > 0) {
463
+ .col-offset-@{index} { .col-offset-(@index); }
464
+ .col-offset-X((@index - 1));
465
+ }
466
+ .col-offset-X (0) {}
467
+
468
+ // Source ordering
469
+ .col-push-X (@index) when (@index > 0) {
470
+ .col-push-@{index} { .col-push-(@index); }
471
+ .col-push-X((@index - 1));
472
+ }
473
+ .col-push-X (0) {}
474
+
475
+ // Source ordering
476
+ .col-pull-X (@index) when (@index > 0) {
477
+ .col-pull-@{index} { .col-pull-(@index); }
478
+ .col-pull-X((@index - 1));
479
+ }
480
+ .col-pull-X (0) {}
481
+
482
+ // Apply the styles
483
+ .col-span-(@columns) {
484
+ width: percentage((@columns / @grid-columns));
485
+ }
486
+ .col-offset-(@columns) {
487
+ margin-left: percentage((@columns / @grid-columns));
488
+ }
489
+ .col-push-(@columns) {
490
+ left: percentage((@columns / @grid-columns));
491
+ }
492
+ .col-pull-(@columns) {
493
+ right: percentage((@columns / @grid-columns));
494
+ }
495
+
496
+ // Generate .spanX and .offsetX
497
+ .col-span-X(@grid-columns);
498
+ .col-offset-X(@grid-columns);
499
+ .col-push-X(@grid-columns);
500
+ .col-pull-X(@grid-columns);
501
+ }
502
+
503
+ // Small device grid
504
+ .generate-small-grid-columns(@grid-columns) {
505
+
506
+ // Deterimine the classes
507
+ .col-small-span-X (@index) when (@index > 0) {
508
+ .col-small-span-@{index} { .col-small-span-(@index); }
509
+ .col-small-span-X((@index - 1));
510
+ }
511
+ .col-small-span-X(0) {}
512
+
513
+ // Specify widths
514
+ .col-small-span-(@columns) {
515
+ width: percentage((@columns / @grid-columns));
516
+ }
517
+
518
+ // Generate the CSS
519
+ .col-small-span-X(@grid-columns);
520
+ }
521
+
522
+
523
+ // Framework mixins
524
+ // --------------------------------------------------
525
+
526
+ // Generate rem font-sizes with pixel fallbacks
527
+ // By default uses `@font-size-base` with an initial value of 14 (1.4rem or 14px)
528
+ .font-size(@font-size: @font-size-base) {
529
+ @rem-size: (@font-size / 10);
530
+ font-size: ~"@{font-size}px";
531
+ font-size: ~"@{rem-size}rem";
532
+ }
533
+
534
+ // Generate form validation states
535
+ .formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
536
+ // Color the label text
537
+ .control-label {
538
+ color: @text-color;
539
+ }
540
+ // Set the border and box shadow on specific inputs to match
541
+ .input-with-feedback {
542
+ padding-right: 32px; // to account for the feedback icon
543
+ border-color: @border-color;
544
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
545
+ &:focus {
546
+ border-color: darken(@border-color, 10%);
547
+ @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
548
+ .box-shadow(@shadow);
549
+ }
550
+ }
551
+ }