themes/default/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: hide;
  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: 2px) {
 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   .topright(@arrowWidth: 5px) {
 567     bottom: 0;
 568     left: auto;
 569     top: auto;
 570     right: @arrowWidth*3;
 571     margin-left: -@arrowWidth;
 572     border-left: @arrowWidth solid transparent;
 573     border-right: @arrowWidth solid transparent;
 574     border-top: @arrowWidth solid @black;
 575     border-bottom: 0px none;
 576   }
 577   .topleft(@arrowWidth: 5px) {
 578     bottom: 0;
 579     right: auto;
 580     top: auto;
 581     left: @arrowWidth*3;
 582     margin-left: -@arrowWidth;
 583     border-left: @arrowWidth solid transparent;
 584     border-right: @arrowWidth solid transparent;
 585     border-top: @arrowWidth solid @black;
 586     border-bottom: 0px none;
 587   }
 588   .left(@arrowWidth: 5px) {
 589     top: 50%;
 590     right: 0;
 591     margin-top: -@arrowWidth;
 592     border-top: @arrowWidth solid transparent;
 593     border-bottom: @arrowWidth solid transparent;
 594     border-left: @arrowWidth solid @black;
 595   }
 596   .bottom(@arrowWidth: 5px) {
 597     top: 0;
 598     left: 50%;
 599     margin-left: -@arrowWidth;
 600     border-left: @arrowWidth solid transparent;
 601     border-right: @arrowWidth solid transparent;
 602     border-bottom: @arrowWidth solid @black;
 603   }
 604   .bottomleft(@arrowWidth: 5px) {
 605     top: 0;
 606     left: @arrowWidth*3;
 607     margin-left: -@arrowWidth;
 608     border-left: @arrowWidth solid transparent;
 609     border-right: @arrowWidth solid transparent;
 610     border-bottom: @arrowWidth solid @black;
 611   }
 612   .bottomright(@arrowWidth: 5px) {
 613     top: 0;
 614     right: @arrowWidth*3;
 615     left: auto;
 616     margin-left: -@arrowWidth;
 617     border-left: @arrowWidth solid transparent;
 618     border-right: @arrowWidth solid transparent;
 619     border-bottom: @arrowWidth solid @black;
 620   }
 621   .right(@arrowWidth: 5px) {
 622     top: 50%;
 623     left: 0;
 624     margin-top: -@arrowWidth;
 625     border-top: @arrowWidth solid transparent;
 626     border-bottom: @arrowWidth solid transparent;
 627     border-right: @arrowWidth solid @black;
 628   }
 629 }