bootstrapped-rails 2.0.7.2 → 2.0.7.3

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 (63) hide show
  1. data/app/helpers/twitter_breadcrumbs_helper.rb +5 -0
  2. data/app/views/twitter_bootstrap/_breadcrumbs.html.erb +14 -0
  3. data/bootstrapped-rails.gemspec +2 -2
  4. data/lib/bootstrapped-rails/breadcrumbs.rb +21 -0
  5. data/lib/bootstrapped-rails/engine.rb +8 -0
  6. data/lib/bootstrapped-rails/version.rb +1 -1
  7. data/logical_license +23 -0
  8. data/readme.md +58 -25
  9. data/vendor/assets/javascripts/bootstrapped/bootstrap-alert.js +1 -1
  10. data/vendor/assets/javascripts/bootstrapped/bootstrap-button.js +4 -2
  11. data/vendor/assets/javascripts/bootstrapped/bootstrap-carousel.js +7 -3
  12. data/vendor/assets/javascripts/bootstrapped/bootstrap-collapse.js +4 -2
  13. data/vendor/assets/javascripts/bootstrapped/bootstrap-dropdown.js +1 -1
  14. data/vendor/assets/javascripts/bootstrapped/bootstrap-modal.js +1 -1
  15. data/vendor/assets/javascripts/bootstrapped/bootstrap-popover.js +1 -1
  16. data/vendor/assets/javascripts/bootstrapped/bootstrap-scrollspy.js +1 -1
  17. data/vendor/assets/javascripts/bootstrapped/bootstrap-tab.js +1 -1
  18. data/vendor/assets/javascripts/bootstrapped/bootstrap-tooltip.js +2 -2
  19. data/vendor/assets/javascripts/bootstrapped/bootstrap-transition.js +1 -1
  20. data/vendor/assets/javascripts/bootstrapped/bootstrap-typeahead.js +7 -7
  21. data/vendor/assets/stylesheets/bootstrapped-sass/_reset.scss +31 -10
  22. data/vendor/assets/stylesheets/custom_partials/animation.scss +170 -0
  23. data/vendor/assets/stylesheets/custom_partials/box-shadow.scss +13 -0
  24. data/vendor/assets/stylesheets/custom_partials/box-sizing.scss +6 -0
  25. data/vendor/assets/stylesheets/custom_partials/flex-box.scss +64 -0
  26. data/vendor/assets/stylesheets/custom_partials/license +24 -0
  27. data/vendor/toolkit/twitter/bootstrap/accordion.less +28 -0
  28. data/vendor/toolkit/twitter/bootstrap/alerts.less +70 -0
  29. data/vendor/toolkit/twitter/bootstrap/bootstrap.less +62 -0
  30. data/vendor/toolkit/twitter/bootstrap/breadcrumbs.less +22 -0
  31. data/vendor/toolkit/twitter/bootstrap/button-groups.less +148 -0
  32. data/vendor/toolkit/twitter/bootstrap/buttons.less +183 -0
  33. data/vendor/toolkit/twitter/bootstrap/carousel.less +121 -0
  34. data/vendor/toolkit/twitter/bootstrap/close.less +18 -0
  35. data/vendor/toolkit/twitter/bootstrap/code.less +57 -0
  36. data/vendor/toolkit/twitter/bootstrap/component-animations.less +18 -0
  37. data/vendor/toolkit/twitter/bootstrap/dropdowns.less +130 -0
  38. data/vendor/toolkit/twitter/bootstrap/forms.less +522 -0
  39. data/vendor/toolkit/twitter/bootstrap/grid.less +8 -0
  40. data/vendor/toolkit/twitter/bootstrap/hero-unit.less +20 -0
  41. data/vendor/toolkit/twitter/bootstrap/labels.less +32 -0
  42. data/vendor/toolkit/twitter/bootstrap/layouts.less +17 -0
  43. data/vendor/toolkit/twitter/bootstrap/mixins.less +590 -0
  44. data/vendor/toolkit/twitter/bootstrap/modals.less +83 -0
  45. data/vendor/toolkit/twitter/bootstrap/navbar.less +299 -0
  46. data/vendor/toolkit/twitter/bootstrap/navs.less +353 -0
  47. data/vendor/toolkit/twitter/bootstrap/pager.less +30 -0
  48. data/vendor/toolkit/twitter/bootstrap/pagination.less +55 -0
  49. data/vendor/toolkit/twitter/bootstrap/popovers.less +49 -0
  50. data/vendor/toolkit/twitter/bootstrap/progress-bars.less +95 -0
  51. data/vendor/toolkit/twitter/bootstrap/reset.less +126 -0
  52. data/vendor/toolkit/twitter/bootstrap/responsive.less +327 -0
  53. data/vendor/toolkit/twitter/bootstrap/scaffolding.less +29 -0
  54. data/vendor/toolkit/twitter/bootstrap/sprites.less +158 -0
  55. data/vendor/toolkit/twitter/bootstrap/tables.less +150 -0
  56. data/vendor/toolkit/twitter/bootstrap/thumbnails.less +35 -0
  57. data/vendor/toolkit/twitter/bootstrap/tooltip.less +35 -0
  58. data/vendor/toolkit/twitter/bootstrap/type.less +218 -0
  59. data/vendor/toolkit/twitter/bootstrap/utilities.less +23 -0
  60. data/vendor/toolkit/twitter/bootstrap/variables.less +107 -0
  61. data/vendor/toolkit/twitter/bootstrap/wells.less +17 -0
  62. data/vendor/toolkit/twitter/bootstrap_base.less +2 -0
  63. metadata +64 -10
@@ -0,0 +1,8 @@
1
+ // GRID SYSTEM
2
+ // -----------
3
+
4
+ // Fixed (940px)
5
+ #gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
6
+
7
+ // Fluid (940px)
8
+ #fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);
@@ -0,0 +1,20 @@
1
+ // HERO UNIT
2
+ // ---------
3
+
4
+ .hero-unit {
5
+ padding: 60px;
6
+ margin-bottom: 30px;
7
+ background-color: #f5f5f5;
8
+ .border-radius(6px);
9
+ h1 {
10
+ margin-bottom: 0;
11
+ font-size: 60px;
12
+ line-height: 1;
13
+ letter-spacing: -1px;
14
+ }
15
+ p {
16
+ font-size: 18px;
17
+ font-weight: 200;
18
+ line-height: @baseLineHeight * 1.5;
19
+ }
20
+ }
@@ -0,0 +1,32 @@
1
+ // LABELS
2
+ // ------
3
+
4
+ // Base
5
+ .label {
6
+ padding: 2px 4px 3px;
7
+ font-size: @baseFontSize * .85;
8
+ font-weight: bold;
9
+ color: @white;
10
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
11
+ background-color: @grayLight;
12
+ .border-radius(3px);
13
+ }
14
+
15
+ // Hover state
16
+ .label:hover {
17
+ color: @white;
18
+ text-decoration: none;
19
+ }
20
+
21
+ // Colors
22
+ .label-important { background-color: @errorText; }
23
+ .label-important:hover { background-color: darken(@errorText, 10%); }
24
+
25
+ .label-warning { background-color: @orange; }
26
+ .label-warning:hover { background-color: darken(@orange, 10%); }
27
+
28
+ .label-success { background-color: @successText; }
29
+ .label-success:hover { background-color: darken(@successText, 10%); }
30
+
31
+ .label-info { background-color: @infoText; }
32
+ .label-info:hover { background-color: darken(@infoText, 10%); }
@@ -0,0 +1,17 @@
1
+ //
2
+ // Layouts
3
+ // Fixed-width and fluid (with sidebar) layouts
4
+ // --------------------------------------------
5
+
6
+
7
+ // Container (centered, fixed-width layouts)
8
+ .container {
9
+ .container-fixed();
10
+ }
11
+
12
+ // Fluid layouts (left aligned, with sidebar, min- & max-width content)
13
+ .container-fluid {
14
+ padding-left: @gridGutterWidth;
15
+ padding-right: @gridGutterWidth;
16
+ .clearfix();
17
+ }
@@ -0,0 +1,590 @@
1
+ // Mixins.less
2
+ // Snippets of reusable CSS to develop faster and keep code readable
3
+ // -----------------------------------------------------------------
4
+
5
+
6
+ // UTILITY MIXINS
7
+ // --------------------------------------------------
8
+
9
+ // Clearfix
10
+ // --------
11
+ // For clearing floats like a boss h5bp.com/q
12
+ .clearfix {
13
+ *zoom: 1;
14
+ &:before,
15
+ &:after {
16
+ display: table;
17
+ content: "";
18
+ }
19
+ &:after {
20
+ clear: both;
21
+ }
22
+ }
23
+
24
+ // Webkit-style focus
25
+ // ------------------
26
+ .tab-focus() {
27
+ // Default
28
+ outline: thin dotted #333;
29
+ // Webkit
30
+ outline: 5px auto -webkit-focus-ring-color;
31
+ outline-offset: -2px;
32
+ }
33
+
34
+ // Center-align a block level element
35
+ // ----------------------------------
36
+ .center-block() {
37
+ display: block;
38
+ margin-left: auto;
39
+ margin-right: auto;
40
+ }
41
+
42
+ // IE7 inline-block
43
+ // ----------------
44
+ .ie7-inline-block() {
45
+ *display: inline; /* IE7 inline-block hack */
46
+ *zoom: 1;
47
+ }
48
+
49
+ // IE7 likes to collapse whitespace on either side of the inline-block elements.
50
+ // Ems because we're attempting to match the width of a space character. Left
51
+ // version is for form buttons, which typically come after other elements, and
52
+ // right version is for icons, which come before. Applying both is ok, but it will
53
+ // mean that space between those elements will be .6em (~2 space characters) in IE7,
54
+ // instead of the 1 space in other browsers.
55
+ .ie7-restore-left-whitespace() {
56
+ *margin-left: .3em;
57
+
58
+ &:first-child {
59
+ *margin-left: 0;
60
+ }
61
+ }
62
+
63
+ .ie7-restore-right-whitespace() {
64
+ *margin-right: .3em;
65
+
66
+ &:last-child {
67
+ *margin-left: 0;
68
+ }
69
+ }
70
+
71
+ // Sizing shortcuts
72
+ // -------------------------
73
+ .size(@height: 5px, @width: 5px) {
74
+ width: @width;
75
+ height: @height;
76
+ }
77
+ .square(@size: 5px) {
78
+ .size(@size, @size);
79
+ }
80
+
81
+ // Placeholder text
82
+ // -------------------------
83
+ .placeholder(@color: @placeholderText) {
84
+ :-moz-placeholder {
85
+ color: @color;
86
+ }
87
+ ::-webkit-input-placeholder {
88
+ color: @color;
89
+ }
90
+ }
91
+
92
+ // Text overflow
93
+ // -------------------------
94
+ // Requires inline-block or block for proper styling
95
+ .text-overflow() {
96
+ overflow: hidden;
97
+ text-overflow: ellipsis;
98
+ white-space: nowrap;
99
+ }
100
+
101
+
102
+
103
+ // FONTS
104
+ // --------------------------------------------------
105
+
106
+ #font {
107
+ #family {
108
+ .serif() {
109
+ font-family: Georgia, "Times New Roman", Times, serif;
110
+ }
111
+ .sans-serif() {
112
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
113
+ }
114
+ .monospace() {
115
+ font-family: Menlo, Monaco, "Courier New", monospace;
116
+ }
117
+ }
118
+ .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
119
+ font-size: @size;
120
+ font-weight: @weight;
121
+ line-height: @lineHeight;
122
+ }
123
+ .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
124
+ #font > #family > .serif;
125
+ #font > .shorthand(@size, @weight, @lineHeight);
126
+ }
127
+ .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
128
+ #font > #family > .sans-serif;
129
+ #font > .shorthand(@size, @weight, @lineHeight);
130
+ }
131
+ .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
132
+ #font > #family > .monospace;
133
+ #font > .shorthand(@size, @weight, @lineHeight);
134
+ }
135
+ }
136
+
137
+
138
+
139
+ // GRID SYSTEM
140
+ // --------------------------------------------------
141
+
142
+ // Site container
143
+ // -------------------------
144
+ .container-fixed() {
145
+ width: @gridRowWidth;
146
+ margin-left: auto;
147
+ margin-right: auto;
148
+ .clearfix();
149
+ }
150
+
151
+ // Le grid system
152
+ // -------------------------
153
+ #gridSystem {
154
+ // Setup the mixins to be used
155
+ .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
156
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
157
+ }
158
+ .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
159
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
160
+ }
161
+ .gridColumn(@gridGutterWidth) {
162
+ float: left;
163
+ margin-left: @gridGutterWidth;
164
+ }
165
+ // Take these values and mixins, and make 'em do their thang
166
+ .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
167
+ // Row surrounds the columns
168
+ .row {
169
+ margin-left: @gridGutterWidth * -1;
170
+ .clearfix();
171
+ }
172
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
173
+ [class*="span"] {
174
+ #gridSystem > .gridColumn(@gridGutterWidth);
175
+ }
176
+ // Default columns
177
+ .span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
178
+ .span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
179
+ .span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
180
+ .span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
181
+ .span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
182
+ .span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
183
+ .span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
184
+ .span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
185
+ .span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
186
+ .span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
187
+ .span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
188
+ .span12,
189
+ .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
190
+ // Offset column options
191
+ .offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
192
+ .offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
193
+ .offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
194
+ .offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
195
+ .offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
196
+ .offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
197
+ .offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
198
+ .offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
199
+ .offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
200
+ .offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
201
+ .offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
202
+ }
203
+ }
204
+
205
+ // Fluid grid system
206
+ // -------------------------
207
+ #fluidGridSystem {
208
+ // Setup the mixins to be used
209
+ .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
210
+ width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
211
+ }
212
+ .gridColumn(@fluidGridGutterWidth) {
213
+ float: left;
214
+ margin-left: @fluidGridGutterWidth;
215
+ }
216
+ // Take these values and mixins, and make 'em do their thang
217
+ .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
218
+ // Row surrounds the columns
219
+ .row-fluid {
220
+ width: 100%;
221
+ .clearfix();
222
+
223
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
224
+ > [class*="span"] {
225
+ #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
226
+ }
227
+ > [class*="span"]:first-child {
228
+ margin-left: 0;
229
+ }
230
+ // Default columns
231
+ > .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
232
+ > .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
233
+ > .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
234
+ > .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
235
+ > .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
236
+ > .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
237
+ > .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
238
+ > .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
239
+ > .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
240
+ > .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
241
+ > .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
242
+ > .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
243
+ }
244
+ }
245
+ }
246
+
247
+ // Input grid system
248
+ // -------------------------
249
+ #inputGridSystem {
250
+ .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
251
+ width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
252
+ }
253
+ .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
254
+ input,
255
+ textarea,
256
+ .uneditable-input {
257
+ &.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
258
+ &.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
259
+ &.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
260
+ &.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
261
+ &.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
262
+ &.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
263
+ &.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
264
+ &.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
265
+ &.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
266
+ &.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
267
+ &.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
268
+ &.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
269
+ }
270
+ }
271
+ }
272
+
273
+ // Make a Grid
274
+ // -------------------------
275
+ // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
276
+ .makeRow() {
277
+ margin-left: @gridGutterWidth * -1;
278
+ .clearfix();
279
+ }
280
+ .makeColumn(@columns: 1) {
281
+ float: left;
282
+ margin-left: @gridGutterWidth;
283
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
284
+ }
285
+
286
+
287
+
288
+ // Form field states (used in forms.less)
289
+ // --------------------------------------------------
290
+
291
+ // Mixin for form field states
292
+ .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
293
+ // Set the text color
294
+ > label,
295
+ .help-block,
296
+ .help-inline {
297
+ color: @textColor;
298
+ }
299
+ // Style inputs accordingly
300
+ input,
301
+ select,
302
+ textarea {
303
+ color: @textColor;
304
+ border-color: @borderColor;
305
+ &:focus {
306
+ border-color: darken(@borderColor, 10%);
307
+ .box-shadow(0 0 6px lighten(@borderColor, 20%));
308
+ }
309
+ }
310
+ // Give a small background color for input-prepend/-append
311
+ .input-prepend .add-on,
312
+ .input-append .add-on {
313
+ color: @textColor;
314
+ background-color: @backgroundColor;
315
+ border-color: @textColor;
316
+ }
317
+ }
318
+
319
+
320
+
321
+ // CSS3 PROPERTIES
322
+ // --------------------------------------------------
323
+
324
+ // Border Radius
325
+ .border-radius(@radius: 5px) {
326
+ -webkit-border-radius: @radius;
327
+ -moz-border-radius: @radius;
328
+ border-radius: @radius;
329
+ }
330
+
331
+ // Drop shadows
332
+ .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
333
+ -webkit-box-shadow: @shadow;
334
+ -moz-box-shadow: @shadow;
335
+ box-shadow: @shadow;
336
+ }
337
+
338
+ // Transitions
339
+ .transition(@transition) {
340
+ -webkit-transition: @transition;
341
+ -moz-transition: @transition;
342
+ -ms-transition: @transition;
343
+ -o-transition: @transition;
344
+ transition: @transition;
345
+ }
346
+
347
+ // Transformations
348
+ .rotate(@degrees) {
349
+ -webkit-transform: rotate(@degrees);
350
+ -moz-transform: rotate(@degrees);
351
+ -ms-transform: rotate(@degrees);
352
+ -o-transform: rotate(@degrees);
353
+ transform: rotate(@degrees);
354
+ }
355
+ .scale(@ratio) {
356
+ -webkit-transform: scale(@ratio);
357
+ -moz-transform: scale(@ratio);
358
+ -ms-transform: scale(@ratio);
359
+ -o-transform: scale(@ratio);
360
+ transform: scale(@ratio);
361
+ }
362
+ .translate(@x: 0, @y: 0) {
363
+ -webkit-transform: translate(@x, @y);
364
+ -moz-transform: translate(@x, @y);
365
+ -ms-transform: translate(@x, @y);
366
+ -o-transform: translate(@x, @y);
367
+ transform: translate(@x, @y);
368
+ }
369
+ .skew(@x: 0, @y: 0) {
370
+ -webkit-transform: skew(@x, @y);
371
+ -moz-transform: skew(@x, @y);
372
+ -ms-transform: skew(@x, @y);
373
+ -o-transform: skew(@x, @y);
374
+ transform: skew(@x, @y);
375
+ }
376
+ .translate3d(@x: 0, @y: 0, @z: 0) {
377
+ -webkit-transform: translate(@x, @y, @z);
378
+ -moz-transform: translate(@x, @y, @z);
379
+ -ms-transform: translate(@x, @y, @z);
380
+ -o-transform: translate(@x, @y, @z);
381
+ transform: translate(@x, @y, @z);
382
+ }
383
+
384
+ // Background clipping
385
+ // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
386
+ .background-clip(@clip) {
387
+ -webkit-background-clip: @clip;
388
+ -moz-background-clip: @clip;
389
+ background-clip: @clip;
390
+ }
391
+
392
+ // Background sizing
393
+ .background-size(@size){
394
+ -webkit-background-size: @size;
395
+ -moz-background-size: @size;
396
+ -o-background-size: @size;
397
+ background-size: @size;
398
+ }
399
+
400
+
401
+ // Box sizing
402
+ .box-sizing(@boxmodel) {
403
+ -webkit-box-sizing: @boxmodel;
404
+ -moz-box-sizing: @boxmodel;
405
+ box-sizing: @boxmodel;
406
+ }
407
+
408
+ // User select
409
+ // For selecting text on the page
410
+ .user-select(@select) {
411
+ -webkit-user-select: @select;
412
+ -moz-user-select: @select;
413
+ -o-user-select: @select;
414
+ user-select: @select;
415
+ }
416
+
417
+ // Resize anything
418
+ .resizable(@direction: both) {
419
+ resize: @direction; // Options: horizontal, vertical, both
420
+ overflow: auto; // Safari fix
421
+ }
422
+
423
+ // CSS3 Content Columns
424
+ .content-columns(@columnCount, @columnGap: @gridColumnGutter) {
425
+ -webkit-column-count: @columnCount;
426
+ -moz-column-count: @columnCount;
427
+ column-count: @columnCount;
428
+ -webkit-column-gap: @columnGap;
429
+ -moz-column-gap: @columnGap;
430
+ column-gap: @columnGap;
431
+ }
432
+
433
+ // Opacity
434
+ .opacity(@opacity: 100) {
435
+ opacity: @opacity / 100;
436
+ filter: e(%("alpha(opacity=%d)", @opacity));
437
+ }
438
+
439
+
440
+
441
+ // BACKGROUNDS
442
+ // --------------------------------------------------
443
+
444
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
445
+ #translucent {
446
+ .background(@color: @white, @alpha: 1) {
447
+ background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
448
+ }
449
+ .border(@color: @white, @alpha: 1) {
450
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
451
+ .background-clip(padding-box);
452
+ }
453
+ }
454
+
455
+ // Gradient Bar Colors for buttons and alerts
456
+ .gradientBar(@primaryColor, @secondaryColor) {
457
+ #gradient > .vertical(@primaryColor, @secondaryColor);
458
+ border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
459
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
460
+ }
461
+
462
+ // Gradients
463
+ #gradient {
464
+ .horizontal(@startColor: #555, @endColor: #333) {
465
+ background-color: @endColor;
466
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
467
+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
468
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
469
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
470
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
471
+ background-image: linear-gradient(left, @startColor, @endColor); // Le standard
472
+ background-repeat: repeat-x;
473
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
474
+ }
475
+ .vertical(@startColor: #555, @endColor: #333) {
476
+ background-color: mix(@startColor, @endColor, 60%);
477
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
478
+ background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
479
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
480
+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
481
+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
482
+ background-image: linear-gradient(top, @startColor, @endColor); // The standard
483
+ background-repeat: repeat-x;
484
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
485
+ }
486
+ .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
487
+ background-color: @endColor;
488
+ background-repeat: repeat-x;
489
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
490
+ background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
491
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
492
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
493
+ background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
494
+ }
495
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
496
+ background-color: mix(@midColor, @endColor, 80%);
497
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
498
+ background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
499
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
500
+ background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
501
+ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
502
+ background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
503
+ background-repeat: no-repeat;
504
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
505
+ }
506
+ .radial(@innerColor: #555, @outerColor: #333) {
507
+ background-color: @outerColor;
508
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
509
+ background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
510
+ background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
511
+ background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
512
+ background-repeat: no-repeat;
513
+ // Opera cannot do radial gradients yet
514
+ }
515
+ .striped(@color, @angle: -45deg) {
516
+ background-color: @color;
517
+ 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));
518
+ 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);
519
+ 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);
520
+ background-image: -ms-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);
521
+ 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);
522
+ background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0));
523
+ }
524
+ }
525
+ // Reset filters for IE
526
+ .reset-filter() {
527
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
528
+ }
529
+
530
+
531
+ // Mixin for generating button backgrounds
532
+ // ---------------------------------------
533
+ .buttonBackground(@startColor, @endColor) {
534
+ // gradientBar will set the background to a pleasing blend of these, to support IE<=9
535
+ .gradientBar(@startColor, @endColor);
536
+ .reset-filter();
537
+
538
+ // in these cases the gradient won't cover the background, so we override
539
+ &:hover, &:active, &.active, &.disabled, &[disabled] {
540
+ background-color: @endColor;
541
+ }
542
+
543
+ // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
544
+ &:active,
545
+ &.active {
546
+ background-color: darken(@endColor, 10%) e("\9");
547
+ }
548
+ }
549
+
550
+
551
+ // COMPONENT MIXINS
552
+ // --------------------------------------------------
553
+
554
+ // POPOVER ARROWS
555
+ // -------------------------
556
+ // For tipsies and popovers
557
+ #popoverArrow {
558
+ .top(@arrowWidth: 5px) {
559
+ bottom: 0;
560
+ left: 50%;
561
+ margin-left: -@arrowWidth;
562
+ border-left: @arrowWidth solid transparent;
563
+ border-right: @arrowWidth solid transparent;
564
+ border-top: @arrowWidth solid @black;
565
+ }
566
+ .left(@arrowWidth: 5px) {
567
+ top: 50%;
568
+ right: 0;
569
+ margin-top: -@arrowWidth;
570
+ border-top: @arrowWidth solid transparent;
571
+ border-bottom: @arrowWidth solid transparent;
572
+ border-left: @arrowWidth solid @black;
573
+ }
574
+ .bottom(@arrowWidth: 5px) {
575
+ top: 0;
576
+ left: 50%;
577
+ margin-left: -@arrowWidth;
578
+ border-left: @arrowWidth solid transparent;
579
+ border-right: @arrowWidth solid transparent;
580
+ border-bottom: @arrowWidth solid @black;
581
+ }
582
+ .right(@arrowWidth: 5px) {
583
+ top: 50%;
584
+ left: 0;
585
+ margin-top: -@arrowWidth;
586
+ border-top: @arrowWidth solid transparent;
587
+ border-bottom: @arrowWidth solid transparent;
588
+ border-right: @arrowWidth solid @black;
589
+ }
590
+ }