git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/mixins.less

   1 //
   2 // Mixins
   3 // --------------------------------------------------
   4
   5
   6 // Utilities
   7 // -------------------------
   8
   9 // Clearfix
  10 // Source: http://nicolasgallagher.com/micro-clearfix-hack/
  11 //
  12 // For modern browsers
  13 // 1. The space content is one way to avoid an Opera bug when the
  14 //    contenteditable attribute is included anywhere else in the document.
  15 //    Otherwise it causes space to appear at the top and bottom of elements
  16 //    that are clearfixed.
  17 // 2. The use of `table` rather than `block` is only necessary if using
  18 //    `:before` to contain the top-margins of child elements.
  19 .clearfix() {
  20   &:before,
  21   &:after {
  22     content: " "; /* 1 */
  23     display: table; /* 2 */
  24   }
  25   &:after {
  26     clear: both;
  27   }
  28 }
  29
  30 // Webkit-style focus
  31 .tab-focus() {
  32   // Default
  33   outline: thin dotted #333;
  34   // Webkit
  35   outline: 5px auto -webkit-focus-ring-color;
  36   outline-offset: -2px;
  37 }
  38
  39 // Center-align a block level element
  40 .center-block() {
  41   display: block;
  42   margin-left: auto;
  43   margin-right: auto;
  44 }
  45
  46 // Sizing shortcuts
  47 .size(@width, @height) {
  48   width: @width;
  49   height: @height;
  50 }
  51 .square(@size) {
  52   .size(@size, @size);
  53 }
  54
  55 // Placeholder text
  56 .placeholder(@color: @input-color-placeholder) {
  57   &:-moz-placeholder            { color: @color; } // Firefox 4-18
  58   &::-moz-placeholder           { color: @color; } // Firefox 19+
  59   &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  60   &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
  61 }
  62
  63 // Text overflow
  64 // Requires inline-block or block for proper styling
  65 .text-overflow() {
  66   overflow: hidden;
  67   text-overflow: ellipsis;
  68   white-space: nowrap;
  69 }
  70
  71 // CSS image replacement
  72 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
  73 .hide-text() {
  74   font: ~"0/0" a;
  75   color: transparent;
  76   text-shadow: none;
  77   background-color: transparent;
  78   border: 0;
  79 }
  80
  81
  82
  83 // CSS3 PROPERTIES
  84 // --------------------------------------------------
  85
  86 // Single side border-radius
  87 .border-top-radius(@radius) {
  88   border-top-right-radius: @radius;
  89    border-top-left-radius: @radius;
  90 }
  91 .border-right-radius(@radius) {
  92   border-bottom-right-radius: @radius;
  93      border-top-right-radius: @radius;
  94 }
  95 .border-bottom-radius(@radius) {
  96   border-bottom-right-radius: @radius;
  97    border-bottom-left-radius: @radius;
  98 }
  99 .border-left-radius(@radius) {
 100   border-bottom-left-radius: @radius;
 101      border-top-left-radius: @radius;
 102 }
 103
 104 // Drop shadows
 105 .box-shadow(@shadow) {
 106   -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
 107           box-shadow: @shadow;
 108 }
 109
 110 // Transitions
 111 .transition(@transition) {
 112   -webkit-transition: @transition;
 113           transition: @transition;
 114 }
 115 .transition-delay(@transition-delay) {
 116   -webkit-transition-delay: @transition-delay;
 117           transition-delay: @transition-delay;
 118 }
 119 .transition-duration(@transition-duration) {
 120   -webkit-transition-duration: @transition-duration;
 121           transition-duration: @transition-duration;
 122 }
 123 .transition-transform(@transition) {
 124   -webkit-transition: -webkit-transform @transition;
 125      -moz-transition: -moz-transform @transition;
 126        -o-transition: -o-transform @transition;
 127           transition: transform @transition;
 128 }
 129
 130 // Transformations
 131 .rotate(@degrees) {
 132   -webkit-transform: rotate(@degrees);
 133       -ms-transform: rotate(@degrees);
 134           transform: rotate(@degrees);
 135 }
 136 .scale(@ratio) {
 137   -webkit-transform: scale(@ratio);
 138       -ms-transform: scale(@ratio);
 139           transform: scale(@ratio);
 140 }
 141 .translate(@x, @y) {
 142   -webkit-transform: translate(@x, @y);
 143       -ms-transform: translate(@x, @y);
 144           transform: translate(@x, @y);
 145 }
 146 .skew(@x, @y) {
 147   -webkit-transform: skew(@x, @y);
 148       -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
 149           transform: skew(@x, @y);
 150 }
 151 .translate3d(@x, @y, @z) {
 152   -webkit-transform: translate3d(@x, @y, @z);
 153           transform: translate3d(@x, @y, @z);
 154 }
 155
 156 // Backface visibility
 157 // Prevent browsers from flickering when using CSS 3D transforms.
 158 // Default value is `visible`, but can be changed to `hidden`
 159 // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
 160 .backface-visibility(@visibility){
 161         -webkit-backface-visibility: @visibility;
 162            -moz-backface-visibility: @visibility;
 163                 backface-visibility: @visibility;
 164 }
 165
 166 // Background clipping
 167 .background-clip(@clip) {
 168           background-clip: @clip;
 169 }
 170
 171 // Background sizing
 172 .background-size(@size) {
 173           background-size: @size;
 174 }
 175
 176 // Box sizing
 177 .box-sizing(@boxmodel) {
 178   -webkit-box-sizing: @boxmodel;
 179      -moz-box-sizing: @boxmodel;
 180           box-sizing: @boxmodel;
 181 }
 182
 183 // User select
 184 // For selecting text on the page
 185 .user-select(@select) {
 186   -webkit-user-select: @select;
 187      -moz-user-select: @select;
 188       -ms-user-select: @select;
 189        -o-user-select: @select;
 190           user-select: @select;
 191 }
 192
 193 // Resize anything
 194 .resizable(@direction) {
 195   resize: @direction; // Options: horizontal, vertical, both
 196   overflow: auto; // Safari fix
 197 }
 198
 199 // CSS3 Content Columns
 200 .content-columns(@column-count, @column-gap: @grid-gutter-width) {
 201   -webkit-column-count: @column-count;
 202      -moz-column-count: @column-count;
 203           column-count: @column-count;
 204   -webkit-column-gap: @column-gap;
 205      -moz-column-gap: @column-gap;
 206           column-gap: @column-gap;
 207 }
 208
 209 // Optional hyphenation
 210 .hyphens(@mode: auto) {
 211   word-wrap: break-word;
 212   -webkit-hyphens: @mode;
 213      -moz-hyphens: @mode;
 214       -ms-hyphens: @mode;
 215        -o-hyphens: @mode;
 216           hyphens: @mode;
 217 }
 218
 219 // Opacity
 220 .opacity(@opacity) {
 221   opacity: @opacity;
 222   // IE8 filter
 223   @opacity-ie: (@opacity * 100);
 224   filter: ~"alpha(opacity=@{opacity-ie})";
 225 }
 226
 227
 228
 229 // GRADIENTS
 230 // --------------------------------------------------
 231
 232 #gradient {
 233
 234   // Horizontal gradient, from left to right
 235   //
 236   // Creates two color stops, start and end, by specifying a color and position for each color stop.
 237   // Color stops are not available in IE9 and below.
 238   .horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
 239     background-color: @end-color;
 240     background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
 241     background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
 242     background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
 243     background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
 244     background-repeat: repeat-x;
 245     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
 246   }
 247
 248   // Vertical gradient, from top to bottom
 249   //
 250   // Creates two color stops, start and end, by specifying a color and position for each color stop.
 251   // Color stops are not available in IE9 and below.
 252   .vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
 253     background-color: @end-color;
 254     background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
 255     background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
 256     background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
 257     background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
 258     background-repeat: repeat-x;
 259     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
 260   }
 261
 262   .directional(@start-color: #555, @end-color: #333, @deg: 45deg) {
 263     background-color: @end-color;
 264     background-repeat: repeat-x;
 265     background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
 266     background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
 267     background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
 268   }
 269   .horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
 270     background-color: mix(@mid-color, @end-color, 80%);
 271     background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
 272     background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
 273     background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
 274     background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
 275     background-repeat: no-repeat;
 276     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
 277   }
 278
 279   .vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
 280     background-color: mix(@mid-color, @end-color, 80%);
 281     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
 282     background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
 283     background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
 284     background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
 285     background-repeat: no-repeat;
 286     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
 287   }
 288   .radial(@inner-color: #555, @outer-color: #333) {
 289     background-color: @outer-color;
 290     background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
 291     background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
 292     background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
 293     background-image: radial-gradient(circle, @inner-color, @outer-color);
 294     background-repeat: no-repeat;
 295   }
 296   .striped(@color: #555, @angle: 45deg) {
 297     background-color: @color;
 298     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));
 299     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);
 300     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);
 301     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);
 302   }
 303 }
 304
 305 // Reset filters for IE
 306 //
 307 // When you need to remove a gradient background, don't forget to use this to reset
 308 // the IE filter for IE9 and below.
 309 .reset-filter() {
 310   filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 311 }
 312
 313
 314
 315 // RETINA IMAGE SUPPORT
 316 // --------------------------------------------------
 317
 318 // Short retina mixin for setting background-image and -size
 319 .img-retina(@file-1x, @file-2x, @width-1x, @height-1x) {
 320   background-image: url("@{file-1x}");
 321
 322   @media
 323   only screen and (-webkit-min-device-pixel-ratio: 2),
 324   only screen and (   min--moz-device-pixel-ratio: 2),
 325   only screen and (     -o-min-device-pixel-ratio: 2/1),
 326   only screen and (        min-device-pixel-ratio: 2),
 327   only screen and (                min-resolution: 192dpi),
 328   only screen and (                min-resolution: 2dppx) {
 329     background-image: url("@{file-2x}");
 330     background-size: @width-1x @height-1x;
 331   }
 332 }
 333
 334
 335 // COMPONENT MIXINS
 336 // --------------------------------------------------
 337
 338 // Horizontal dividers
 339 // -------------------------
 340 // Dividers (basically an hr) within dropdowns and nav lists
 341 .nav-divider(@color: #e5e5e5) {
 342   height: 1px;
 343   margin: ((@line-height-computed / 2) - 1) 0;
 344   overflow: hidden;
 345   background-color: @color;
 346 }
 347
 348 // Alerts
 349 // -------------------------
 350 .alert-variant(@background, @border, @text-color) {
 351   background-color: @background;
 352   border-color: @border;
 353   color: @text-color;
 354   hr {
 355     border-top-color: darken(@border, 5%);
 356   }
 357   .alert-link {
 358     color: darken(@text-color, 10%);
 359   }
 360 }
 361
 362 // Button pseudo states
 363 // -------------------------
 364 // Easily pump out default styles, as well as :hover, :focus, :active,
 365 // and disabled options for all buttons
 366 .btn-pseudo-states(@color, @background, @border) {
 367   color: @color;
 368   background-color: @background;
 369   border-color: @border;
 370
 371   &:hover,
 372   &:focus,
 373   &:active,
 374   &.active {
 375     background-color: darken(@background, 5%);
 376         border-color: darken(@border, 10%);
 377   }
 378
 379   &.disabled,
 380   &[disabled],
 381   fieldset[disabled] & {
 382     &,
 383     &:hover,
 384     &:focus,
 385     &:active,
 386     &.active {
 387       background-color: @background;
 388           border-color: @border
 389     }
 390   }
 391 }
 392
 393 // Labels
 394 // -------------------------
 395 .label-variant(@color) {
 396   background-color: @color;
 397   &[href] {
 398     &:hover,
 399     &:focus {
 400       background-color: darken(@color, 10%);
 401     }
 402   }
 403 }
 404
 405 // Navbar vertical align
 406 // -------------------------
 407 // Vertically center elements in the navbar.
 408 // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
 409 .navbar-vertical-align(@element-height) {
 410   margin-top: ((@navbar-height - @element-height) / 2);
 411   margin-bottom: ((@navbar-height - @element-height) / 2);
 412 }
 413
 414 // Progress bars
 415 // -------------------------
 416 .progress-bar-variant(@color) {
 417   background-color: @color;
 418   .progress-striped & {
 419     #gradient > .striped(@color);
 420   }
 421 }
 422
 423 // Responsive utilities
 424 // -------------------------
 425 // More easily include all the states for responsive-utilities.less.
 426 .responsive-visibility() {
 427   display: block !important;
 428   tr& { display: table-row !important; }
 429   th&,
 430   td& { display: table-cell !important; }
 431 }
 432
 433 .responsive-invisibility() {
 434   display: none !important;
 435   tr& { display: none !important; }
 436   th&,
 437   td& { display: none !important; }
 438 }
 439
 440 // Grid System
 441 // -----------
 442
 443 // Centered container element
 444 .container-fixed() {
 445   margin-right: auto;
 446   margin-left: auto;
 447   .clearfix();
 448 }
 449
 450 // Creates a wrapper for a series of columns
 451 .make-row() {
 452   // Then clear the floated columns
 453   .clearfix();
 454
 455   @media (min-width: @screen-small) {
 456     margin-left:  (@grid-gutter-width / -2);
 457     margin-right: (@grid-gutter-width / -2);
 458   }
 459
 460   // Negative margin nested rows out to align the content of columns
 461   .row {
 462     margin-left:  (@grid-gutter-width / -2);
 463     margin-right: (@grid-gutter-width / -2);
 464   }
 465 }
 466
 467 // Generate the columns
 468 .make-column(@columns) {
 469   position: relative;
 470   // Prevent columns from collapsing when empty
 471   min-height: 1px;
 472   // Inner gutter via padding
 473   padding-left:  (@grid-gutter-width / 2);
 474   padding-right: (@grid-gutter-width / 2);
 475
 476   // Calculate width based on number of columns available
 477   @media (min-width: @grid-float-breakpoint) {
 478     float: left;
 479     width: percentage((@columns / @grid-columns));
 480   }
 481 }
 482
 483 // Generate the column offsets
 484 .make-column-offset(@columns) {
 485   @media (min-width: @grid-float-breakpoint) {
 486     margin-left: percentage((@columns / @grid-columns));
 487   }
 488 }
 489 .make-column-push(@columns) {
 490   @media (min-width: @grid-float-breakpoint) {
 491     left: percentage((@columns / @grid-columns));
 492   }
 493 }
 494 .make-column-pull(@columns) {
 495   @media (min-width: @grid-float-breakpoint) {
 496     right: percentage((@columns / @grid-columns));
 497   }
 498 }
 499
 500 // Generate the small columns
 501 .make-small-column(@columns) {
 502   position: relative;
 503   float: left;
 504   // Prevent columns from collapsing when empty
 505   min-height: 1px;
 506   // Inner gutter via padding
 507   padding-left:  (@grid-gutter-width / 2);
 508   padding-right: (@grid-gutter-width / 2);
 509   @max-width: (@grid-float-breakpoint - 1);
 510
 511   // Calculate width based on number of columns available
 512   @media (max-width: @max-width) {
 513     width: percentage((@columns / @grid-columns));
 514   }
 515 }
 516
 517
 518 // Form validation states
 519 //
 520 // Used in forms.less to generate the form validation CSS for warnings, errors,
 521 // and successes.
 522
 523 .form-control-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
 524   // Color the label and help text
 525   .help-block,
 526   .control-label {
 527     color: @text-color;
 528   }
 529   // Set the border and box shadow on specific inputs to match
 530   .form-control {
 531     padding-right: 32px; // to account for the feedback icon
 532     border-color: @border-color;
 533     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
 534     &:focus {
 535       border-color: darken(@border-color, 10%);
 536       @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
 537       .box-shadow(@shadow);
 538     }
 539   }
 540   // Set validation states also for addons
 541   .input-group-addon {
 542     color: @text-color;
 543     border-color: @border-color;
 544     background-color: @background-color;
 545   }
 546 }