← Back to branch summary

~ubuntu-branches/ubuntu/quantal/horizon/quantal

« back to all changes in this revision

Viewing changes to openstack_dashboard/static/bootstrap/less/mixins.less

  • Committer: Package Import Robot
  • Author(s): Chuck Short
  • Date: 2012-07-06 11:38:55 UTC
  • mfrom: (1.1.16)
  • Revision ID: package-import@ubuntu.com-20120706113855-js8fsldgtool47yj
Tags: 2012.2~f2-0ubuntu1
New usptream version. 

Show diffs side-by-side

added added

removed removed

Lines of Context:
openstack_dashboard/static/bootstrap/less/mixins.less
 
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%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
 
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
}