[Summary view] [Print] [Text view]

   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  // New image replacement
 102  // -------------------------
 103  // Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
 104  .hide-text {
 105    overflow: hidden;
 106    text-indent: 100%;
 107    white-space: nowrap;
 108  }
 109  
 110  
 111  // FONTS
 112  // --------------------------------------------------
 113  
 114  #font {
 115    #family {
 116      .serif() {
 117        font-family: Georgia, "Times New Roman", Times, serif;
 118      }
 119      .sans-serif() {
 120        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 121      }
 122      .monospace() {
 123        font-family: Menlo, Monaco, "Courier New", monospace;
 124      }
 125    }
 126    .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
 127      font-size: @size;
 128      font-weight: @weight;
 129      line-height: @lineHeight;
 130    }
 131    .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
 132      #font > #family > .serif;
 133      #font > .shorthand(@size, @weight, @lineHeight);
 134    }
 135    .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
 136      #font > #family > .sans-serif;
 137      #font > .shorthand(@size, @weight, @lineHeight);
 138    }
 139    .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
 140      #font > #family > .monospace;
 141      #font > .shorthand(@size, @weight, @lineHeight);
 142    }
 143  }
 144  
 145  
 146  // FORMS
 147  // --------------------------------------------------
 148  
 149  // Block level inputs
 150  .input-block-level {
 151    display: block;
 152    width: 100%;
 153    min-height: 28px; /* Make inputs at least the height of their button counterpart */
 154    /* Makes inputs behave like true block-level elements */
 155    .box-sizing(border-box);
 156  }
 157  
 158  
 159  // Mixin for form field states
 160  .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
 161    // Set the text color
 162    > label,
 163    .help-block,
 164    .help-inline {
 165      color: @textColor;
 166    }
 167    // Style inputs accordingly
 168    input,
 169    select,
 170    textarea {
 171      color: @textColor;
 172      border-color: @borderColor;
 173      &:focus {
 174        border-color: darken(@borderColor, 10%);
 175        .box-shadow(0 0 6px lighten(@borderColor, 20%));
 176      }
 177    }
 178    // Give a small background color for input-prepend/-append
 179    .input-prepend .add-on,
 180    .input-append .add-on {
 181      color: @textColor;
 182      background-color: @backgroundColor;
 183      border-color: @textColor;
 184    }
 185  }
 186  
 187  
 188  
 189  // CSS3 PROPERTIES
 190  // --------------------------------------------------
 191  
 192  // Border Radius
 193  .border-radius(@radius: 5px) {
 194    -webkit-border-radius: @radius;
 195       -moz-border-radius: @radius;
 196            border-radius: @radius;
 197  }
 198  
 199  // Drop shadows
 200  .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
 201    -webkit-box-shadow: @shadow;
 202       -moz-box-shadow: @shadow;
 203            box-shadow: @shadow;
 204  }
 205  
 206  // Transitions
 207  .transition(@transition) {
 208    -webkit-transition: @transition;
 209       -moz-transition: @transition;
 210        -ms-transition: @transition;
 211         -o-transition: @transition;
 212            transition: @transition;
 213  }
 214  
 215  // Transformations
 216  .rotate(@degrees) {
 217    -webkit-transform: rotate(@degrees);
 218       -moz-transform: rotate(@degrees);
 219        -ms-transform: rotate(@degrees);
 220         -o-transform: rotate(@degrees);
 221            transform: rotate(@degrees);
 222  }
 223  .scale(@ratio) {
 224    -webkit-transform: scale(@ratio);
 225       -moz-transform: scale(@ratio);
 226        -ms-transform: scale(@ratio);
 227         -o-transform: scale(@ratio);
 228            transform: scale(@ratio);
 229  }
 230  .translate(@x: 0, @y: 0) {
 231    -webkit-transform: translate(@x, @y);
 232       -moz-transform: translate(@x, @y);
 233        -ms-transform: translate(@x, @y);
 234         -o-transform: translate(@x, @y);
 235            transform: translate(@x, @y);
 236  }
 237  .skew(@x: 0, @y: 0) {
 238    -webkit-transform: skew(@x, @y);
 239       -moz-transform: skew(@x, @y);
 240        -ms-transform: skew(@x, @y);
 241         -o-transform: skew(@x, @y);
 242            transform: skew(@x, @y);
 243  }
 244  .translate3d(@x: 0, @y: 0, @z: 0) {
 245    -webkit-transform: translate(@x, @y, @z);
 246       -moz-transform: translate(@x, @y, @z);
 247        -ms-transform: translate(@x, @y, @z);
 248         -o-transform: translate(@x, @y, @z);
 249            transform: translate(@x, @y, @z);
 250  }
 251  
 252  // Background clipping
 253  // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
 254  .background-clip(@clip) {
 255    -webkit-background-clip: @clip;
 256       -moz-background-clip: @clip;
 257            background-clip: @clip;
 258  }
 259  
 260  // Background sizing
 261  .background-size(@size){
 262    -webkit-background-size: @size;
 263       -moz-background-size: @size;
 264         -o-background-size: @size;
 265            background-size: @size;
 266  }
 267  
 268  
 269  // Box sizing
 270  .box-sizing(@boxmodel) {
 271    -webkit-box-sizing: @boxmodel;
 272       -moz-box-sizing: @boxmodel;
 273        -ms-box-sizing: @boxmodel;
 274            box-sizing: @boxmodel;
 275  }
 276  
 277  // User select
 278  // For selecting text on the page
 279  .user-select(@select) {
 280    -webkit-user-select: @select;
 281       -moz-user-select: @select;
 282         -o-user-select: @select;
 283            user-select: @select;
 284  }
 285  
 286  // Resize anything
 287  .resizable(@direction: both) {
 288    resize: @direction; // Options: horizontal, vertical, both
 289    overflow: auto; // Safari fix
 290  }
 291  
 292  // CSS3 Content Columns
 293  .content-columns(@columnCount, @columnGap: @gridColumnGutter) {
 294    -webkit-column-count: @columnCount;
 295       -moz-column-count: @columnCount;
 296            column-count: @columnCount;
 297    -webkit-column-gap: @columnGap;
 298       -moz-column-gap: @columnGap;
 299            column-gap: @columnGap;
 300  }
 301  
 302  // Opacity
 303  .opacity(@opacity: 100) {
 304    opacity: @opacity / 100;
 305     filter: ~"alpha(opacity=@{opacity})";
 306  }
 307  
 308  
 309  
 310  // BACKGROUNDS
 311  // --------------------------------------------------
 312  
 313  // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 314  #translucent {
 315    .background(@color: @white, @alpha: 1) {
 316      background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
 317    }
 318    .border(@color: @white, @alpha: 1) {
 319      border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
 320      .background-clip(padding-box);
 321    }
 322  }
 323  
 324  // Gradient Bar Colors for buttons and alerts
 325  .gradientBar(@primaryColor, @secondaryColor) {
 326    #gradient > .vertical(@primaryColor, @secondaryColor);
 327    border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
 328    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
 329  }
 330  
 331  // Gradients
 332  #gradient {
 333    .horizontal(@startColor: #555, @endColor: #333) {
 334      background-color: @endColor;
 335      background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
 336      background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
 337      background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
 338      background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
 339      background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
 340      background-image: linear-gradient(left, @startColor, @endColor); // Le standard
 341      background-repeat: repeat-x;
 342      filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
 343    }
 344    .vertical(@startColor: #555, @endColor: #333) {
 345      background-color: mix(@startColor, @endColor, 60%);
 346      background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
 347      background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
 348      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
 349      background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
 350      background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
 351      background-image: linear-gradient(top, @startColor, @endColor); // The standard
 352      background-repeat: repeat-x;
 353      filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
 354    }
 355    .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
 356      background-color: @endColor;
 357      background-repeat: repeat-x;
 358      background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
 359      background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
 360      background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
 361      background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
 362      background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
 363    }
 364    .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
 365      background-color: mix(@midColor, @endColor, 80%);
 366      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
 367      background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
 368      background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
 369      background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
 370      background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
 371      background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
 372      background-repeat: no-repeat;
 373      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
 374    }
 375    .radial(@innerColor: #555, @outerColor: #333)  {
 376      background-color: @outerColor;
 377      background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
 378      background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
 379      background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
 380      background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
 381      background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
 382      background-repeat: no-repeat;
 383    }
 384    .striped(@color, @angle: -45deg) {
 385      background-color: @color;
 386      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));
 387      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);
 388      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);
 389      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);
 390      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);
 391      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);
 392    }
 393  }
 394  // Reset filters for IE
 395  .reset-filter() {
 396    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 397  }
 398  
 399  
 400  
 401  // COMPONENT MIXINS
 402  // --------------------------------------------------
 403  
 404  // Horizontal dividers
 405  // -------------------------
 406  // Dividers (basically an hr) within dropdowns and nav lists
 407  .nav-divider() {
 408    height: 1px;
 409    margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
 410    overflow: hidden;
 411    background-color: #e5e5e5;
 412    border-bottom: 1px solid @white;
 413  
 414    // IE7 needs a set width since we gave a height. Restricting just
 415    // to IE7 to keep the 1px left/right space in other browsers.
 416    // It is unclear where IE is getting the extra space that we need
 417    // to negative-margin away, but so it goes.
 418    *width: 100%;
 419    *margin: -5px 0 5px;
 420  }
 421  
 422  // Button backgrounds
 423  // ------------------
 424  .buttonBackground(@startColor, @endColor) {
 425    // gradientBar will set the background to a pleasing blend of these, to support IE<=9
 426    .gradientBar(@startColor, @endColor);
 427    .reset-filter();
 428  
 429    // in these cases the gradient won't cover the background, so we override
 430    &:hover, &:active, &.active, &.disabled, &[disabled] {
 431      background-color: @endColor;
 432    }
 433  
 434    // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
 435    &:active,
 436    &.active {
 437      background-color: darken(@endColor, 10%) e("\9");
 438    }
 439  }
 440  
 441  // Navbar vertical align
 442  // -------------------------
 443  // Vertically center elements in the navbar.
 444  // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
 445  .navbarVerticalAlign(@elementHeight) {
 446    margin-top: (@navbarHeight - @elementHeight) / 2;
 447  }
 448  
 449  // Popover arrows
 450  // -------------------------
 451  // For tipsies and popovers
 452  #popoverArrow {
 453    .top(@arrowWidth: 5px, @color: @black) {
 454      bottom: 0;
 455      left: 50%;
 456      margin-left: -@arrowWidth;
 457      border-left: @arrowWidth solid transparent;
 458      border-right: @arrowWidth solid transparent;
 459      border-top: @arrowWidth solid @color;
 460    }
 461    .left(@arrowWidth: 5px, @color: @black) {
 462      top: 50%;
 463      right: 0;
 464      margin-top: -@arrowWidth;
 465      border-top: @arrowWidth solid transparent;
 466      border-bottom: @arrowWidth solid transparent;
 467      border-left: @arrowWidth solid @color;
 468    }
 469    .bottom(@arrowWidth: 5px, @color: @black) {
 470      top: 0;
 471      left: 50%;
 472      margin-left: -@arrowWidth;
 473      border-left: @arrowWidth solid transparent;
 474      border-right: @arrowWidth solid transparent;
 475      border-bottom: @arrowWidth solid @color;
 476    }
 477    .right(@arrowWidth: 5px, @color: @black) {
 478      top: 50%;
 479      left: 0;
 480      margin-top: -@arrowWidth;
 481      border-top: @arrowWidth solid transparent;
 482      border-bottom: @arrowWidth solid transparent;
 483      border-right: @arrowWidth solid @color;
 484    }
 485  }
 486  
 487  // Grid System
 488  // -----------
 489  
 490  // Centered container element
 491  .container-fixed() {
 492    margin-left: auto;
 493    margin-right: auto;
 494    .clearfix();
 495  }
 496  
 497  // Table columns
 498  .tableColumns(@columnSpan: 1) {
 499    float: none; // undo default grid column styles
 500    width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
 501    margin-left: 0; // undo default grid column styles
 502  }
 503  
 504  // Make a Grid
 505  // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
 506  .makeRow() {
 507    margin-left: @gridGutterWidth * -1;
 508    .clearfix();
 509  }
 510  .makeColumn(@columns: 1) {
 511    float: left;
 512    margin-left: @gridGutterWidth;
 513    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
 514  }
 515  
 516  // The Grid
 517  #grid {
 518  
 519    .core (@gridColumnWidth, @gridGutterWidth) {
 520  
 521      .spanX (@index) when (@index > 0) {
 522        (~".span@{index}") { .span(@index); }
 523        .spanX(@index - 1);
 524      }
 525      .spanX (0) {}
 526  
 527      .offsetX (@index) when (@index > 0) {
 528        (~".offset@{index}") { .offset(@index); }
 529        .offsetX(@index - 1);
 530      }
 531      .offsetX (0) {}
 532  
 533      .offset (@columns) {
 534        margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
 535      }
 536  
 537      .span (@columns) {
 538        width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
 539      }
 540  
 541      .row {
 542        margin-left: @gridGutterWidth * -1;
 543        .clearfix();
 544      }
 545  
 546      [class*="span"] {
 547        float: left;
 548        margin-left: @gridGutterWidth;
 549      }
 550  
 551      // Set the container width, and override it for fixed navbars in media queries
 552      .container,
 553      .navbar-fixed-top .container,
 554      .navbar-fixed-bottom .container { .span(@gridColumns); }
 555  
 556      // generate .spanX and .offsetX
 557      .spanX (@gridColumns);
 558      .offsetX (@gridColumns);
 559  
 560    }
 561  
 562    .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
 563  
 564      .spanX (@index) when (@index > 0) {
 565        (~"> .span@{index}") { .span(@index); }
 566        .spanX(@index - 1);
 567      }
 568      .spanX (0) {}
 569  
 570      .span (@columns) {
 571        width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
 572      }
 573  
 574      .row-fluid {
 575        width: 100%;
 576        .clearfix();
 577        > [class*="span"] {
 578          float: left;
 579          margin-left: @fluidGridGutterWidth;
 580        }
 581        > [class*="span"]:first-child {
 582          margin-left: 0;
 583        }
 584  
 585        // generate .spanX
 586        .spanX (@gridColumns);
 587      }
 588  
 589    }
 590  
 591    .input(@gridColumnWidth, @gridGutterWidth) {
 592  
 593      .spanX (@index) when (@index > 0) {
 594        (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
 595        .spanX(@index - 1);
 596      }
 597      .spanX (0) {}
 598  
 599      .span(@columns) {
 600        width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
 601      }
 602  
 603      input,
 604      textarea,
 605      .uneditable-input {
 606        margin-left: 0; // override margin-left from core grid system
 607      }
 608  
 609      // generate .spanX
 610      .spanX (@gridColumns);
 611  
 612    }
 613  
 614  }