fennec 2.0.0 → 2.0.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 (70) hide show
  1. data/README.md +23 -6
  2. data/lib/fennec/version.rb +1 -1
  3. data/vendor/assets/javascripts/bootstrap-alert.js +8 -5
  4. data/vendor/assets/javascripts/bootstrap-button.js +5 -3
  5. data/vendor/assets/javascripts/bootstrap-carousel.js +9 -2
  6. data/vendor/assets/javascripts/bootstrap-collapse.js +5 -3
  7. data/vendor/assets/javascripts/bootstrap-dropdown.js +2 -2
  8. data/vendor/assets/javascripts/bootstrap-modal.js +3 -3
  9. data/vendor/assets/javascripts/bootstrap-popover.js +2 -2
  10. data/vendor/assets/javascripts/bootstrap-scrollspy.js +2 -2
  11. data/vendor/assets/javascripts/bootstrap-tab.js +2 -2
  12. data/vendor/assets/javascripts/bootstrap-tooltip.js +3 -3
  13. data/vendor/assets/javascripts/bootstrap-transition.js +3 -3
  14. data/vendor/assets/javascripts/bootstrap-typeahead.js +8 -8
  15. data/vendor/assets/javascripts/bootstrap.js +1726 -0
  16. data/vendor/assets/javascripts/bootstrap.min.js +6 -0
  17. data/vendor/assets/stylesheets/bootstrap-responsive.css +337 -218
  18. data/vendor/assets/stylesheets/bootstrap.css +1022 -397
  19. data/vendor/assets/stylesheets/docs.css +85 -30
  20. metadata +13 -61
  21. data/vendor/assets/javascripts/tests/index.html +0 -49
  22. data/vendor/assets/javascripts/tests/unit/bootstrap-alert.js +0 -41
  23. data/vendor/assets/javascripts/tests/unit/bootstrap-button.js +0 -54
  24. data/vendor/assets/javascripts/tests/unit/bootstrap-collapse.js +0 -25
  25. data/vendor/assets/javascripts/tests/unit/bootstrap-dropdown.js +0 -53
  26. data/vendor/assets/javascripts/tests/unit/bootstrap-modal.js +0 -85
  27. data/vendor/assets/javascripts/tests/unit/bootstrap-popover.js +0 -93
  28. data/vendor/assets/javascripts/tests/unit/bootstrap-scrollspy.js +0 -31
  29. data/vendor/assets/javascripts/tests/unit/bootstrap-tab.js +0 -45
  30. data/vendor/assets/javascripts/tests/unit/bootstrap-tooltip.js +0 -62
  31. data/vendor/assets/javascripts/tests/unit/bootstrap-transition.js +0 -13
  32. data/vendor/assets/javascripts/tests/unit/bootstrap-typeahead.js +0 -128
  33. data/vendor/assets/javascripts/tests/vendor/jquery.js +0 -9252
  34. data/vendor/assets/javascripts/tests/vendor/qunit.css +0 -232
  35. data/vendor/assets/javascripts/tests/vendor/qunit.js +0 -1510
  36. data/vendor/assets/stylesheets/bootstrap/accordion.less +0 -28
  37. data/vendor/assets/stylesheets/bootstrap/alerts.less +0 -70
  38. data/vendor/assets/stylesheets/bootstrap/bootstrap.less +0 -62
  39. data/vendor/assets/stylesheets/bootstrap/breadcrumbs.less +0 -22
  40. data/vendor/assets/stylesheets/bootstrap/button-groups.less +0 -147
  41. data/vendor/assets/stylesheets/bootstrap/buttons.less +0 -165
  42. data/vendor/assets/stylesheets/bootstrap/carousel.less +0 -121
  43. data/vendor/assets/stylesheets/bootstrap/close.less +0 -18
  44. data/vendor/assets/stylesheets/bootstrap/code.less +0 -44
  45. data/vendor/assets/stylesheets/bootstrap/component-animations.less +0 -18
  46. data/vendor/assets/stylesheets/bootstrap/dropdowns.less +0 -131
  47. data/vendor/assets/stylesheets/bootstrap/forms.less +0 -515
  48. data/vendor/assets/stylesheets/bootstrap/grid.less +0 -8
  49. data/vendor/assets/stylesheets/bootstrap/hero-unit.less +0 -20
  50. data/vendor/assets/stylesheets/bootstrap/labels.less +0 -16
  51. data/vendor/assets/stylesheets/bootstrap/layouts.less +0 -17
  52. data/vendor/assets/stylesheets/bootstrap/mixins.less +0 -537
  53. data/vendor/assets/stylesheets/bootstrap/modals.less +0 -72
  54. data/vendor/assets/stylesheets/bootstrap/navbar.less +0 -292
  55. data/vendor/assets/stylesheets/bootstrap/navs.less +0 -344
  56. data/vendor/assets/stylesheets/bootstrap/pager.less +0 -30
  57. data/vendor/assets/stylesheets/bootstrap/pagination.less +0 -55
  58. data/vendor/assets/stylesheets/bootstrap/popovers.less +0 -49
  59. data/vendor/assets/stylesheets/bootstrap/progress-bars.less +0 -95
  60. data/vendor/assets/stylesheets/bootstrap/reset.less +0 -126
  61. data/vendor/assets/stylesheets/bootstrap/responsive.less +0 -323
  62. data/vendor/assets/stylesheets/bootstrap/scaffolding.less +0 -29
  63. data/vendor/assets/stylesheets/bootstrap/sprites.less +0 -156
  64. data/vendor/assets/stylesheets/bootstrap/tables.less +0 -139
  65. data/vendor/assets/stylesheets/bootstrap/thumbnails.less +0 -35
  66. data/vendor/assets/stylesheets/bootstrap/tooltip.less +0 -35
  67. data/vendor/assets/stylesheets/bootstrap/type.less +0 -217
  68. data/vendor/assets/stylesheets/bootstrap/utilities.less +0 -23
  69. data/vendor/assets/stylesheets/bootstrap/variables.less +0 -99
  70. data/vendor/assets/stylesheets/bootstrap/wells.less +0 -17
@@ -1,8 +0,0 @@
1
- // GRID SYSTEM
2
- // -----------
3
-
4
- // Fixed (940px)
5
- #gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
6
-
7
- // Fluid (940px)
8
- #fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);
@@ -1,20 +0,0 @@
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
- }
@@ -1,16 +0,0 @@
1
- // LABELS
2
- // ------
3
-
4
- .label {
5
- padding: 1px 3px 2px;
6
- font-size: @baseFontSize * .75;
7
- font-weight: bold;
8
- color: @white;
9
- text-transform: uppercase;
10
- background-color: @grayLight;
11
- .border-radius(3px);
12
- }
13
- .label-important { background-color: @errorText; }
14
- .label-warning { background-color: @orange; }
15
- .label-success { background-color: @successText; }
16
- .label-info { background-color: @infoText; }
@@ -1,17 +0,0 @@
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
- }
@@ -1,537 +0,0 @@
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;
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
-
93
-
94
- // FONTS
95
- // --------------------------------------------------
96
-
97
- #font {
98
- #family {
99
- .serif() {
100
- font-family: Georgia, "Times New Roman", Times, serif;
101
- }
102
- .sans-serif() {
103
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
104
- }
105
- .monospace() {
106
- font-family: Menlo, Monaco, "Courier New", monospace;
107
- }
108
- }
109
- .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
110
- font-size: @size;
111
- font-weight: @weight;
112
- line-height: @lineHeight;
113
- }
114
- .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
115
- #font > #family > .serif;
116
- #font > .shorthand(@size, @weight, @lineHeight);
117
- }
118
- .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
119
- #font > #family > .sans-serif;
120
- #font > .shorthand(@size, @weight, @lineHeight);
121
- }
122
- .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
123
- #font > #family > .monospace;
124
- #font > .shorthand(@size, @weight, @lineHeight);
125
- }
126
- }
127
-
128
-
129
-
130
- // GRID SYSTEM
131
- // --------------------------------------------------
132
-
133
- // Site container
134
- // -------------------------
135
- .container-fixed() {
136
- width: @gridRowWidth;
137
- margin-left: auto;
138
- margin-right: auto;
139
- .clearfix();
140
- }
141
-
142
- // Le grid system
143
- // -------------------------
144
- #gridSystem {
145
- // Setup the mixins to be used
146
- .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
147
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
148
- }
149
- .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
150
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
151
- }
152
- .gridColumn(@gridGutterWidth) {
153
- float: left;
154
- margin-left: @gridGutterWidth;
155
- }
156
- // Take these values and mixins, and make 'em do their thang
157
- .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
158
- // Row surrounds the columns
159
- .row {
160
- margin-left: @gridGutterWidth * -1;
161
- .clearfix();
162
- }
163
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
164
- [class*="span"] {
165
- #gridSystem > .gridColumn(@gridGutterWidth);
166
- }
167
- // Default columns
168
- .span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
169
- .span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
170
- .span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
171
- .span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
172
- .span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
173
- .span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
174
- .span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
175
- .span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
176
- .span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
177
- .span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
178
- .span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
179
- .span12,
180
- .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
181
- // Offset column options
182
- .offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
183
- .offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
184
- .offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
185
- .offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
186
- .offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
187
- .offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
188
- .offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
189
- .offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
190
- .offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
191
- .offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
192
- .offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
193
- }
194
- }
195
-
196
- // Fluid grid system
197
- // -------------------------
198
- #fluidGridSystem {
199
- // Setup the mixins to be used
200
- .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
201
- width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
202
- }
203
- .gridColumn(@fluidGridGutterWidth) {
204
- float: left;
205
- margin-left: @fluidGridGutterWidth;
206
- }
207
- // Take these values and mixins, and make 'em do their thang
208
- .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
209
- // Row surrounds the columns
210
- .row-fluid {
211
- width: 100%;
212
- .clearfix();
213
-
214
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
215
- > [class*="span"] {
216
- #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
217
- }
218
- > [class*="span"]:first-child {
219
- margin-left: 0;
220
- }
221
- // Default columns
222
- .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
223
- .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
224
- .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
225
- .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
226
- .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
227
- .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
228
- .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
229
- .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
230
- .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
231
- .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
232
- .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
233
- .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
234
- }
235
- }
236
- }
237
-
238
-
239
-
240
- // Input grid system
241
- // -------------------------
242
- #inputGridSystem {
243
- .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
244
- width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
245
- }
246
- .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
247
- input,
248
- textarea,
249
- .uneditable-input {
250
- &.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
251
- &.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
252
- &.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
253
- &.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
254
- &.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
255
- &.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
256
- &.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
257
- &.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
258
- &.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
259
- &.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
260
- &.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
261
- &.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
262
- }
263
- }
264
- }
265
-
266
-
267
-
268
- // CSS3 PROPERTIES
269
- // --------------------------------------------------
270
-
271
- // Border Radius
272
- .border-radius(@radius: 5px) {
273
- -webkit-border-radius: @radius;
274
- -moz-border-radius: @radius;
275
- border-radius: @radius;
276
- }
277
-
278
- // Drop shadows
279
- .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
280
- -webkit-box-shadow: @shadow;
281
- -moz-box-shadow: @shadow;
282
- box-shadow: @shadow;
283
- }
284
-
285
- // Transitions
286
- .transition(@transition) {
287
- -webkit-transition: @transition;
288
- -moz-transition: @transition;
289
- -ms-transition: @transition;
290
- -o-transition: @transition;
291
- transition: @transition;
292
- }
293
-
294
- // Transformations
295
- .rotate(@degrees) {
296
- -webkit-transform: rotate(@degrees);
297
- -moz-transform: rotate(@degrees);
298
- -ms-transform: rotate(@degrees);
299
- -o-transform: rotate(@degrees);
300
- transform: rotate(@degrees);
301
- }
302
- .scale(@ratio) {
303
- -webkit-transform: scale(@ratio);
304
- -moz-transform: scale(@ratio);
305
- -ms-transform: scale(@ratio);
306
- -o-transform: scale(@ratio);
307
- transform: scale(@ratio);
308
- }
309
- .translate(@x: 0, @y: 0) {
310
- -webkit-transform: translate(@x, @y);
311
- -moz-transform: translate(@x, @y);
312
- -ms-transform: translate(@x, @y);
313
- -o-transform: translate(@x, @y);
314
- transform: translate(@x, @y);
315
- }
316
- .skew(@x: 0, @y: 0) {
317
- -webkit-transform: translate(@x, @y);
318
- -moz-transform: translate(@x, @y);
319
- -ms-transform: translate(@x, @y);
320
- -o-transform: translate(@x, @y);
321
- transform: translate(@x, @y);
322
- }
323
- .skew(@x: 0, @y: 0) {
324
- -webkit-transform: skew(@x, @y);
325
- -moz-transform: skew(@x, @y);
326
- -ms-transform: skew(@x, @y);
327
- -o-transform: skew(@x, @y);
328
- transform: skew(@x, @y);
329
- }
330
-
331
- // Background clipping
332
- // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
333
- .background-clip(@clip) {
334
- -webkit-background-clip: @clip;
335
- -moz-background-clip: @clip;
336
- background-clip: @clip;
337
- }
338
-
339
- // Background sizing
340
- .background-size(@size){
341
- -webkit-background-size: @size;
342
- -moz-background-size: @size;
343
- -o-background-size: @size;
344
- background-size: @size;
345
- }
346
-
347
-
348
- // Box sizing
349
- .box-sizing(@boxmodel) {
350
- -webkit-box-sizing: @boxmodel;
351
- -moz-box-sizing: @boxmodel;
352
- box-sizing: @boxmodel;
353
- }
354
-
355
- // User select
356
- // For selecting text on the page
357
- .user-select(@select) {
358
- -webkit-user-select: @select;
359
- -moz-user-select: @select;
360
- -o-user-select: @select;
361
- user-select: @select;
362
- }
363
-
364
- // Resize anything
365
- .resizable(@direction: both) {
366
- resize: @direction; // Options: horizontal, vertical, both
367
- overflow: auto; // Safari fix
368
- }
369
-
370
- // CSS3 Content Columns
371
- .content-columns(@columnCount, @columnGap: @gridColumnGutter) {
372
- -webkit-column-count: @columnCount;
373
- -moz-column-count: @columnCount;
374
- column-count: @columnCount;
375
- -webkit-column-gap: @columnGap;
376
- -moz-column-gap: @columnGap;
377
- column-gap: @columnGap;
378
- }
379
-
380
- // Opacity
381
- .opacity(@opacity: 100) {
382
- opacity: @opacity / 100;
383
- filter: e(%("alpha(opacity=%d)", @opacity));
384
- }
385
-
386
-
387
-
388
- // BACKGROUNDS
389
- // --------------------------------------------------
390
-
391
- // Add an alphatransparency value to any background or border color (via Elyse Holladay)
392
- #translucent {
393
- .background(@color: @white, @alpha: 1) {
394
- background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
395
- }
396
- .border(@color: @white, @alpha: 1) {
397
- border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
398
- .background-clip(padding-box);
399
- }
400
- }
401
-
402
- // Gradient Bar Colors for buttons and alerts
403
- .gradientBar(@primaryColor, @secondaryColor) {
404
- #gradient > .vertical(@primaryColor, @secondaryColor);
405
- border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
406
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
407
- }
408
-
409
- // Gradients
410
- #gradient {
411
- .horizontal(@startColor: #555, @endColor: #333) {
412
- background-color: @endColor;
413
- background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
414
- background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
415
- background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
416
- background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
417
- background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
418
- background-image: linear-gradient(left, @startColor, @endColor); // Le standard
419
- background-repeat: repeat-x;
420
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
421
- }
422
- .vertical(@startColor: #555, @endColor: #333) {
423
- background-color: mix(@startColor, @endColor, 60%);
424
- background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
425
- background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
426
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
427
- background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
428
- background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
429
- background-image: linear-gradient(top, @startColor, @endColor); // The standard
430
- background-repeat: repeat-x;
431
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
432
- }
433
- .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
434
- background-color: @endColor;
435
- background-repeat: repeat-x;
436
- background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
437
- background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
438
- background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
439
- background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
440
- background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
441
- }
442
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
443
- background-color: mix(@midColor, @endColor, 80%);
444
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
445
- background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
446
- background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
447
- background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
448
- background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
449
- background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
450
- background-repeat: no-repeat;
451
- 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
452
- }
453
- .radial(@innerColor: #555, @outerColor: #333) {
454
- background-color: @outerColor;
455
- background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
456
- background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
457
- background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
458
- background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
459
- background-repeat: no-repeat;
460
- // Opera cannot do radial gradients yet
461
- }
462
- .striped(@color, @angle: -45deg) {
463
- background-color: @color;
464
- 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));
465
- 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);
466
- 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);
467
- 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);
468
- 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);
469
- 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);
470
- }
471
- }
472
- // Reset filters for IE
473
- .reset-filter() {
474
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
475
- }
476
-
477
-
478
- // Mixin for generating button backgrounds
479
- // ---------------------------------------
480
- .buttonBackground(@startColor, @endColor) {
481
- // gradientBar will set the background to a pleasing blend of these, to support IE<=9
482
- .gradientBar(@startColor, @endColor);
483
- .reset-filter();
484
-
485
- // in these cases the gradient won't cover the background, so we override
486
- &:hover, &:active, &.active, &.disabled, &[disabled] {
487
- background-color: @endColor;
488
- }
489
-
490
- // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
491
- &:active,
492
- &.active {
493
- background-color: darken(@endColor, 10%) e("\9");
494
- }
495
- }
496
-
497
-
498
- // COMPONENT MIXINS
499
- // --------------------------------------------------
500
-
501
- // POPOVER ARROWS
502
- // -------------------------
503
- // For tipsies and popovers
504
- #popoverArrow {
505
- .top(@arrowWidth: 5px) {
506
- bottom: 0;
507
- left: 50%;
508
- margin-left: -@arrowWidth;
509
- border-left: @arrowWidth solid transparent;
510
- border-right: @arrowWidth solid transparent;
511
- border-top: @arrowWidth solid @black;
512
- }
513
- .left(@arrowWidth: 5px) {
514
- top: 50%;
515
- right: 0;
516
- margin-top: -@arrowWidth;
517
- border-top: @arrowWidth solid transparent;
518
- border-bottom: @arrowWidth solid transparent;
519
- border-left: @arrowWidth solid @black;
520
- }
521
- .bottom(@arrowWidth: 5px) {
522
- top: 0;
523
- left: 50%;
524
- margin-left: -@arrowWidth;
525
- border-left: @arrowWidth solid transparent;
526
- border-right: @arrowWidth solid transparent;
527
- border-bottom: @arrowWidth solid @black;
528
- }
529
- .right(@arrowWidth: 5px) {
530
- top: 50%;
531
- left: 0;
532
- margin-top: -@arrowWidth;
533
- border-top: @arrowWidth solid transparent;
534
- border-bottom: @arrowWidth solid transparent;
535
- border-right: @arrowWidth solid @black;
536
- }
537
- }