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@mixin 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@mixin tab-focus() { 32 // Default 33 outline: thin dotted; 34 // WebKit 35 outline: 5px auto -webkit-focus-ring-color; 36 outline-offset: -2px; 37} 38 39// Center-align a block level element 40@mixin center-block() { 41 display: block; 42 margin-left: auto; 43 margin-right: auto; 44} 45 46// Sizing shortcuts 47@mixin size($width, $height) { 48 width: $width; 49 height: $height; 50} 51@mixin square($size) { 52 @include size($size, $size); 53} 54 55// Placeholder text 56@mixin placeholder($color: $input-color-placeholder) { 57 &::-moz-placeholder { color: $color; // Firefox 58 opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526 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@mixin text-overflow() { 66 overflow: hidden; 67 text-overflow: ellipsis; 68 white-space: nowrap; 69} 70 71// CSS image replacement 72// 73// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for 74// mixins being reused as classes with the same name, this doesn't hold up. As 75// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note 76// that we cannot chain the mixins together in Less, so they are repeated. 77// 78// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 79 80// Deprecated as of v3.0.1 (will be removed in v4) 81@mixin hide-text() { 82 font: #{0/0} a; 83 color: transparent; 84 text-shadow: none; 85 background-color: transparent; 86 border: 0; 87} 88// New mixin to use as of v3.0.1 89@mixin text-hide() { 90 @include hide-text(); 91} 92 93 94 95// CSS3 PROPERTIES 96// -------------------------------------------------- 97 98// Single side border-radius 99@mixin border-top-radius($radius) { 100 border-top-right-radius: $radius; 101 border-top-left-radius: $radius; 102} 103@mixin border-right-radius($radius) { 104 border-bottom-right-radius: $radius; 105 border-top-right-radius: $radius; 106} 107@mixin border-bottom-radius($radius) { 108 border-bottom-right-radius: $radius; 109 border-bottom-left-radius: $radius; 110} 111@mixin border-left-radius($radius) { 112 border-bottom-left-radius: $radius; 113 border-top-left-radius: $radius; 114} 115 116// Drop shadows 117// 118// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's 119// supported browsers that have box shadow capabilities now support the 120// standard `box-shadow` property. 121@mixin box-shadow($shadow...) { 122 -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 123 box-shadow: $shadow; 124} 125 126// Transitions 127@mixin transition($transition...) { 128 -webkit-transition: $transition; 129 transition: $transition; 130} 131@mixin transition-property($transition-property...) { 132 -webkit-transition-property: $transition-property; 133 transition-property: $transition-property; 134} 135@mixin transition-delay($transition-delay) { 136 -webkit-transition-delay: $transition-delay; 137 transition-delay: $transition-delay; 138} 139@mixin transition-duration($transition-duration...) { 140 -webkit-transition-duration: $transition-duration; 141 transition-duration: $transition-duration; 142} 143@mixin transition-transform($transition...) { 144 -webkit-transition: -webkit-transform $transition; 145 -moz-transition: -moz-transform $transition; 146 -o-transition: -o-transform $transition; 147 transition: transform $transition; 148} 149 150// Transformations 151@mixin rotate($degrees) { 152 -webkit-transform: rotate($degrees); 153 -ms-transform: rotate($degrees); // IE9 only 154 transform: rotate($degrees); 155} 156@mixin scale($scale-args...) { 157 -webkit-transform: scale($scale-args); 158 -ms-transform: scale($scale-args); // IE9 only 159 transform: scale($scale-args); 160} 161@mixin translate($x, $y) { 162 -webkit-transform: translate($x, $y); 163 -ms-transform: translate($x, $y); // IE9 only 164 transform: translate($x, $y); 165} 166@mixin skew($x, $y) { 167 -webkit-transform: skew($x, $y); 168 -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ 169 transform: skew($x, $y); 170} 171@mixin translate3d($x, $y, $z) { 172 -webkit-transform: translate3d($x, $y, $z); 173 transform: translate3d($x, $y, $z); 174} 175 176@mixin rotateX($degrees) { 177 -webkit-transform: rotateX($degrees); 178 -ms-transform: rotateX($degrees); // IE9 only 179 transform: rotateX($degrees); 180} 181@mixin rotateY($degrees) { 182 -webkit-transform: rotateY($degrees); 183 -ms-transform: rotateY($degrees); // IE9 only 184 transform: rotateY($degrees); 185} 186@mixin perspective($perspective) { 187 -webkit-perspective: $perspective; 188 -moz-perspective: $perspective; 189 perspective: $perspective; 190} 191@mixin perspective-origin($perspective) { 192 -webkit-perspective-origin: $perspective; 193 -moz-perspective-origin: $perspective; 194 perspective-origin: $perspective; 195} 196@mixin transform-origin($origin) { 197 -webkit-transform-origin: $origin; 198 -moz-transform-origin: $origin; 199 -ms-transform-origin: $origin; // IE9 only 200 transform-origin: $origin; 201} 202 203// Animations 204@mixin animation($animation) { 205 -webkit-animation: $animation; 206 animation: $animation; 207} 208@mixin animation-name($name) { 209 -webkit-animation-name: $name; 210 animation-name: $name; 211} 212@mixin animation-duration($duration) { 213 -webkit-animation-duration: $duration; 214 animation-duration: $duration; 215} 216@mixin animation-timing-function($timing-function) { 217 -webkit-animation-timing-function: $timing-function; 218 animation-timing-function: $timing-function; 219} 220@mixin animation-delay($delay) { 221 -webkit-animation-delay: $delay; 222 animation-delay: $delay; 223} 224@mixin animation-iteration-count($iteration-count) { 225 -webkit-animation-iteration-count: $iteration-count; 226 animation-iteration-count: $iteration-count; 227} 228@mixin animation-direction($direction) { 229 -webkit-animation-direction: $direction; 230 animation-direction: $direction; 231} 232 233// Backface visibility 234// Prevent browsers from flickering when using CSS 3D transforms. 235// Default value is `visible`, but can be changed to `hidden` 236@mixin backface-visibility($visibility){ 237 -webkit-backface-visibility: $visibility; 238 -moz-backface-visibility: $visibility; 239 backface-visibility: $visibility; 240} 241 242// Box sizing 243@mixin box-sizing($boxmodel) { 244 -webkit-box-sizing: $boxmodel; 245 -moz-box-sizing: $boxmodel; 246 box-sizing: $boxmodel; 247} 248 249// User select 250// For selecting text on the page 251@mixin user-select($select) { 252 -webkit-user-select: $select; 253 -moz-user-select: $select; 254 -ms-user-select: $select; // IE10+ 255 user-select: $select; 256} 257 258// Resize anything 259@mixin resizable($direction) { 260 resize: $direction; // Options: horizontal, vertical, both 261 overflow: auto; // Safari fix 262} 263 264// CSS3 Content Columns 265@mixin content-columns($column-count, $column-gap: $grid-gutter-width) { 266 -webkit-column-count: $column-count; 267 -moz-column-count: $column-count; 268 column-count: $column-count; 269 -webkit-column-gap: $column-gap; 270 -moz-column-gap: $column-gap; 271 column-gap: $column-gap; 272} 273 274// Optional hyphenation 275@mixin hyphens($mode: auto) { 276 word-wrap: break-word; 277 -webkit-hyphens: $mode; 278 -moz-hyphens: $mode; 279 -ms-hyphens: $mode; // IE10+ 280 -o-hyphens: $mode; 281 hyphens: $mode; 282} 283 284// Opacity 285@mixin opacity($opacity) { 286 opacity: $opacity; 287 // IE8 filter 288 $opacity-ie: ($opacity * 100); 289 filter: #{alpha(opacity=$opacity-ie)}; 290} 291 292 293 294// GRADIENTS 295// -------------------------------------------------- 296 297 298 299// Horizontal gradient, from left to right 300// 301// Creates two color stops, start and end, by specifying a color and position for each color stop. 302// Color stops are not available in IE9 and below. 303@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { 304 background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1-6, Chrome 10+ 305 background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ 306 background-repeat: repeat-x; 307 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down 308} 309 310// Vertical gradient, from top to bottom 311// 312// Creates two color stops, start and end, by specifying a color and position for each color stop. 313// Color stops are not available in IE9 and below. 314@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { 315 background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+ 316 background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ 317 background-repeat: repeat-x; 318 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down 319} 320 321@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { 322 background-repeat: repeat-x; 323 background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+ 324 background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ 325} 326@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { 327 background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); 328 background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); 329 background-repeat: no-repeat; 330 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback 331} 332@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { 333 background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color); 334 background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); 335 background-repeat: no-repeat; 336 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback 337} 338@mixin gradient-radial($inner-color: #555, $outer-color: #333) { 339 background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color); 340 background-image: radial-gradient(circle, $inner-color, $outer-color); 341 background-repeat: no-repeat; 342} 343@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) { 344 background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 345 background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 346} 347 348// Reset filters for IE 349// 350// When you need to remove a gradient background, do not forget to use this to reset 351// the IE filter for IE9 and below. 352@mixin reset-filter() { 353 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 354} 355 356 357 358// Retina images 359// 360// Short retina mixin for setting background-image and -size 361 362@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { 363 background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}")); 364 365 @media 366 only screen and (-webkit-min-device-pixel-ratio: 2), 367 only screen and ( min--moz-device-pixel-ratio: 2), 368 only screen and ( -o-min-device-pixel-ratio: 2/1), 369 only screen and ( min-device-pixel-ratio: 2), 370 only screen and ( min-resolution: 192dpi), 371 only screen and ( min-resolution: 2dppx) { 372 background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}")); 373 background-size: $width-1x $height-1x; 374 } 375} 376 377 378// Responsive image 379// 380// Keep images from scaling beyond the width of their parents. 381 382@mixin img-responsive($display: block) { 383 display: $display; 384 max-width: 100%; // Part 1: Set a maximum relative to the parent 385 height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching 386} 387 388 389// COMPONENT MIXINS 390// -------------------------------------------------- 391 392// Horizontal dividers 393// ------------------------- 394// Dividers (basically an hr) within dropdowns and nav lists 395@mixin nav-divider($color: #e5e5e5) { 396 height: 1px; 397 margin: (($line-height-computed / 2) - 1) 0; 398 overflow: hidden; 399 background-color: $color; 400} 401 402// Panels 403// ------------------------- 404@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) { 405 border-color: $border; 406 407 & > .panel-heading { 408 color: $heading-text-color; 409 background-color: $heading-bg-color; 410 border-color: $heading-border; 411 412 + .panel-collapse .panel-body { 413 border-top-color: $border; 414 } 415 } 416 & > .panel-footer { 417 + .panel-collapse .panel-body { 418 border-bottom-color: $border; 419 } 420 } 421} 422 423// Alerts 424// ------------------------- 425@mixin alert-variant($background, $border, $text-color) { 426 background-color: $background; 427 border-color: $border; 428 color: $text-color; 429 430 hr { 431 border-top-color: darken($border, 5%); 432 } 433 .alert-link { 434 color: darken($text-color, 10%); 435 } 436} 437 438// Tables 439// ------------------------- 440@mixin table-row-variant($state, $background) { 441 // Exact selectors below required to override `.table-striped` and prevent 442 // inheritance to nested tables. 443 .table > thead > tr, 444 .table > tbody > tr, 445 .table > tfoot > tr { 446 > td.#{$state}, 447 > th.#{$state}, 448 &.#{$state} > td, 449 &.#{$state} > th { 450 background-color: $background; 451 } 452 } 453 454 // Hover states for `.table-hover` 455 // Note: this is not available for cells or rows within `thead` or `tfoot`. 456 .table-hover > tbody > tr { 457 > td.#{$state}:hover, 458 > th.#{$state}:hover, 459 &.#{$state}:hover > td, 460 &.#{$state}:hover > th { 461 background-color: darken($background, 5%); 462 } 463 } 464} 465 466// List Groups 467// ------------------------- 468@mixin list-group-item-variant($state, $background, $color) { 469 .list-group-item-#{$state} { 470 color: $color; 471 background-color: $background; 472 473 // [converter] extracted a& to a.list-group-item-#{$state} 474 } 475 476 a.list-group-item-#{$state} { 477 color: $color; 478 479 .list-group-item-heading { color: inherit; } 480 481 &:hover, 482 &:focus { 483 color: $color; 484 background-color: darken($background, 5%); 485 } 486 &.active, 487 &.active:hover, 488 &.active:focus { 489 color: #fff; 490 background-color: $color; 491 border-color: $color; 492 } 493 } 494} 495 496// Button variants 497// ------------------------- 498// Easily pump out default styles, as well as :hover, :focus, :active, 499// and disabled options for all buttons 500@mixin button-variant($color, $background, $border) { 501 color: $color; 502 background-color: $background; 503 border-color: $border; 504 505 &:hover, 506 &:focus, 507 &:active, 508 &.active { 509 color: $color; 510 background-color: darken($background, 8%); 511 border-color: darken($border, 12%); 512 } 513 .open & { &.dropdown-toggle { 514 color: $color; 515 background-color: darken($background, 8%); 516 border-color: darken($border, 12%); 517 } } 518 &:active, 519 &.active { 520 background-image: none; 521 } 522 .open & { &.dropdown-toggle { 523 background-image: none; 524 } } 525 &.disabled, 526 &[disabled], 527 fieldset[disabled] & { 528 &, 529 &:hover, 530 &:focus, 531 &:active, 532 &.active { 533 background-color: $background; 534 border-color: $border; 535 } 536 } 537 538 .badge { 539 color: $background; 540 background-color: $color; 541 } 542} 543 544// Button sizes 545// ------------------------- 546@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { 547 padding: $padding-vertical $padding-horizontal; 548 font-size: $font-size; 549 line-height: $line-height; 550 border-radius: $border-radius; 551} 552 553// Pagination 554// ------------------------- 555@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { 556 > li { 557 > a, 558 > span { 559 padding: $padding-vertical $padding-horizontal; 560 font-size: $font-size; 561 } 562 &:first-child { 563 > a, 564 > span { 565 @include border-left-radius($border-radius); 566 } 567 } 568 &:last-child { 569 > a, 570 > span { 571 @include border-right-radius($border-radius); 572 } 573 } 574 } 575} 576 577// Labels 578// ------------------------- 579@mixin label-variant($color) { 580 background-color: $color; 581 &[href] { 582 &:hover, 583 &:focus { 584 background-color: darken($color, 10%); 585 } 586 } 587} 588 589// Contextual backgrounds 590// ------------------------- 591// [converter] $parent hack 592@mixin bg-variant($parent, $color) { 593 #{$parent} { 594 background-color: $color; 595 } 596 a#{$parent}:hover { 597 background-color: darken($color, 10%); 598 } 599} 600 601// Typography 602// ------------------------- 603// [converter] $parent hack 604@mixin text-emphasis-variant($parent, $color) { 605 #{$parent} { 606 color: $color; 607 } 608 a#{$parent}:hover { 609 color: darken($color, 10%); 610 } 611} 612 613// Navbar vertical align 614// ------------------------- 615// Vertically center elements in the navbar. 616// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. 617@mixin navbar-vertical-align($element-height) { 618 margin-top: (($navbar-height - $element-height) / 2); 619 margin-bottom: (($navbar-height - $element-height) / 2); 620} 621 622// Progress bars 623// ------------------------- 624@mixin progress-bar-variant($color) { 625 background-color: $color; 626 .progress-striped & { 627 @include gradient-striped(); 628 } 629} 630 631// Responsive utilities 632// ------------------------- 633// More easily include all the states for responsive-utilities.less. 634// [converter] $parent hack 635@mixin responsive-visibility($parent) { 636 #{$parent} { 637 display: block !important; 638 } 639 table#{$parent} { display: table; } 640 tr#{$parent} { display: table-row !important; } 641 th#{$parent}, 642 td#{$parent} { display: table-cell !important; } 643} 644 645// [converter] $parent hack 646@mixin responsive-invisibility($parent) { 647 #{$parent} { 648 display: none !important; 649 } 650} 651 652 653// Grid System 654// ----------- 655 656// Centered container element 657@mixin container-fixed() { 658 margin-right: auto; 659 margin-left: auto; 660 padding-left: ($grid-gutter-width / 2); 661 padding-right: ($grid-gutter-width / 2); 662 @include clearfix(); 663} 664 665// Creates a wrapper for a series of columns 666@mixin make-row($gutter: $grid-gutter-width) { 667 margin-left: ($gutter / -2); 668 margin-right: ($gutter / -2); 669 @include clearfix(); 670} 671 672// Generate the extra small columns 673@mixin make-xs-column($columns, $gutter: $grid-gutter-width) { 674 position: relative; 675 float: left; 676 width: percentage(($columns / $grid-columns)); 677 min-height: 1px; 678 padding-left: ($gutter / 2); 679 padding-right: ($gutter / 2); 680} 681@mixin make-xs-column-offset($columns) { 682 @media (min-width: $screen-xs-min) { 683 margin-left: percentage(($columns / $grid-columns)); 684 } 685} 686@mixin make-xs-column-push($columns) { 687 @media (min-width: $screen-xs-min) { 688 left: percentage(($columns / $grid-columns)); 689 } 690} 691@mixin make-xs-column-pull($columns) { 692 @media (min-width: $screen-xs-min) { 693 right: percentage(($columns / $grid-columns)); 694 } 695} 696 697 698// Generate the small columns 699@mixin make-sm-column($columns, $gutter: $grid-gutter-width) { 700 position: relative; 701 min-height: 1px; 702 padding-left: ($gutter / 2); 703 padding-right: ($gutter / 2); 704 705 @media (min-width: $screen-sm-min) { 706 float: left; 707 width: percentage(($columns / $grid-columns)); 708 } 709} 710@mixin make-sm-column-offset($columns) { 711 @media (min-width: $screen-sm-min) { 712 margin-left: percentage(($columns / $grid-columns)); 713 } 714} 715@mixin make-sm-column-push($columns) { 716 @media (min-width: $screen-sm-min) { 717 left: percentage(($columns / $grid-columns)); 718 } 719} 720@mixin make-sm-column-pull($columns) { 721 @media (min-width: $screen-sm-min) { 722 right: percentage(($columns / $grid-columns)); 723 } 724} 725 726 727// Generate the medium columns 728@mixin make-md-column($columns, $gutter: $grid-gutter-width) { 729 position: relative; 730 min-height: 1px; 731 padding-left: ($gutter / 2); 732 padding-right: ($gutter / 2); 733 734 @media (min-width: $screen-md-min) { 735 float: left; 736 width: percentage(($columns / $grid-columns)); 737 } 738} 739@mixin make-md-column-offset($columns) { 740 @media (min-width: $screen-md-min) { 741 margin-left: percentage(($columns / $grid-columns)); 742 } 743} 744@mixin make-md-column-push($columns) { 745 @media (min-width: $screen-md-min) { 746 left: percentage(($columns / $grid-columns)); 747 } 748} 749@mixin make-md-column-pull($columns) { 750 @media (min-width: $screen-md-min) { 751 right: percentage(($columns / $grid-columns)); 752 } 753} 754 755 756// Generate the large columns 757@mixin make-lg-column($columns, $gutter: $grid-gutter-width) { 758 position: relative; 759 min-height: 1px; 760 padding-left: ($gutter / 2); 761 padding-right: ($gutter / 2); 762 763 @media (min-width: $screen-lg-min) { 764 float: left; 765 width: percentage(($columns / $grid-columns)); 766 } 767} 768@mixin make-lg-column-offset($columns) { 769 @media (min-width: $screen-lg-min) { 770 margin-left: percentage(($columns / $grid-columns)); 771 } 772} 773@mixin make-lg-column-push($columns) { 774 @media (min-width: $screen-lg-min) { 775 left: percentage(($columns / $grid-columns)); 776 } 777} 778@mixin make-lg-column-pull($columns) { 779 @media (min-width: $screen-lg-min) { 780 right: percentage(($columns / $grid-columns)); 781 } 782} 783 784 785// Framework grid generation 786// 787// Used only by Bootstrap to generate the correct number of grid classes given 788// any value of `$grid-columns`. 789 790// [converter] This is defined recursively in LESS, but Sass supports real loops 791@mixin make-grid-columns() { 792 $list: ''; 793 $i: 1; 794 $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; 795 @for $i from (1 + 1) through $grid-columns { 796 $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; 797 } 798 #{$list} { 799 position: relative; 800 // Prevent columns from collapsing when empty 801 min-height: 1px; 802 // Inner gutter via padding 803 padding-left: ($grid-gutter-width / 2); 804 padding-right: ($grid-gutter-width / 2); 805 } 806} 807 808 809// [converter] This is defined recursively in LESS, but Sass supports real loops 810@mixin float-grid-columns($class) { 811 $list: ''; 812 $i: 1; 813 $list: ".col-#{$class}-#{$i}"; 814 @for $i from (1 + 1) through $grid-columns { 815 $list: "#{$list}, .col-#{$class}-#{$i}"; 816 } 817 #{$list} { 818 float: left; 819 } 820} 821 822 823@mixin calc-grid-column($index, $class, $type) { 824 @if ($type == width) and ($index > 0) { 825 .col-#{$class}-#{$index} { 826 width: percentage(($index / $grid-columns)); 827 } 828 } 829 @if ($type == push) { 830 .col-#{$class}-push-#{$index} { 831 left: percentage(($index / $grid-columns)); 832 } 833 } 834 @if ($type == pull) { 835 .col-#{$class}-pull-#{$index} { 836 right: percentage(($index / $grid-columns)); 837 } 838 } 839 @if ($type == offset) { 840 .col-#{$class}-offset-#{$index} { 841 margin-left: percentage(($index / $grid-columns)); 842 } 843 } 844} 845 846// [converter] This is defined recursively in LESS, but Sass supports real loops 847@mixin loop-grid-columns($columns, $class, $type) { 848 @for $i from 0 through $columns { 849 @include calc-grid-column($i, $class, $type); 850 } 851} 852 853 854// Create grid for specific class 855@mixin make-grid($class) { 856 @include float-grid-columns($class); 857 @include loop-grid-columns($grid-columns, $class, width); 858 @include loop-grid-columns($grid-columns, $class, pull); 859 @include loop-grid-columns($grid-columns, $class, push); 860 @include loop-grid-columns($grid-columns, $class, offset); 861} 862 863// Form validation states 864// 865// Used in forms.less to generate the form validation CSS for warnings, errors, 866// and successes. 867 868@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { 869 // Color the label and help text 870 .help-block, 871 .control-label, 872 .radio, 873 .checkbox, 874 .radio-inline, 875 .checkbox-inline { 876 color: $text-color; 877 } 878 // Set the border and box shadow on specific inputs to match 879 .form-control { 880 border-color: $border-color; 881 @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 882 &:focus { 883 border-color: darken($border-color, 10%); 884 $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); 885 @include box-shadow($shadow); 886 } 887 } 888 // Set validation states also for addons 889 .input-group-addon { 890 color: $text-color; 891 border-color: $border-color; 892 background-color: $background-color; 893 } 894 // Optional feedback icon 895 .form-control-feedback { 896 color: $text-color; 897 } 898} 899 900// Form control focus state 901// 902// Generate a customized focus state and for any input with the specified color, 903// which defaults to the `$input-focus-border` variable. 904// 905// We highly encourage you to not customize the default value, but instead use 906// this to tweak colors on an as-needed basis. This aesthetic change is based on 907// WebKit's default styles, but applicable to a wider range of browsers. Its 908// usability and accessibility should be taken into account with any change. 909// 910// Example usage: change the default blue border and shadow to white for better 911// contrast against a dark gray background. 912 913@mixin form-control-focus($color: $input-border-focus) { 914 $color-rgba: rgba(red($color), green($color), blue($color), .6); 915 &:focus { 916 border-color: $color; 917 outline: 0; 918 @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba); 919 } 920} 921 922// Form control sizing 923// 924// Relative text size, padding, and border-radii changes for form controls. For 925// horizontal sizing, wrap controls in the predefined grid classes. `<select>` 926// element gets special love because it's special, and that's a fact! 927 928// [converter] $parent hack 929@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { 930 #{$parent} { 931 height: $input-height; 932 padding: $padding-vertical $padding-horizontal; 933 font-size: $font-size; 934 line-height: $line-height; 935 border-radius: $border-radius; 936 } 937 938 select#{$parent} { 939 height: $input-height; 940 line-height: $input-height; 941 } 942 943 textarea#{$parent}, 944 select[multiple]#{$parent} { 945 height: auto; 946 } 947} 948