github.com/kardianos/nomad@v0.1.3-0.20151022182107-b13df73ee850/website/source/assets/stylesheets/_mixins.scss (about) 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 #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 @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 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 @mixin 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 @mixin 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 @mixin border-top-radius($radius) { 88 border-top-right-radius: $radius; 89 border-top-left-radius: $radius; 90 } 91 @mixin border-right-radius($radius) { 92 border-bottom-right-radius: $radius; 93 border-top-right-radius: $radius; 94 } 95 @mixin border-bottom-radius($radius) { 96 border-bottom-right-radius: $radius; 97 border-bottom-left-radius: $radius; 98 } 99 @mixin border-left-radius($radius) { 100 border-bottom-left-radius: $radius; 101 border-top-left-radius: $radius; 102 } 103 104 // Drop shadows 105 @mixin box-shadow($shadow) { 106 -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 107 box-shadow: $shadow; 108 } 109 110 // Transitions 111 @mixin transition($transition) { 112 -webkit-transition: $transition; 113 transition: $transition; 114 } 115 @mixin transition-delay($transition-delay) { 116 -webkit-transition-delay: $transition-delay; 117 transition-delay: $transition-delay; 118 } 119 @mixin transition-duration($transition-duration) { 120 -webkit-transition-duration: $transition-duration; 121 transition-duration: $transition-duration; 122 } 123 @mixin 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 @mixin transform($transform...) { 132 -webkit-transform: $transform; 133 -ms-transform: $transform; 134 transform: $transform; 135 } 136 137 @mixin rotate($degrees) { 138 -webkit-transform: rotate($degrees); 139 -ms-transform: rotate($degrees); // IE9+ 140 transform: rotate($degrees); 141 } 142 143 @mixin scale($ratio) { 144 -webkit-transform: scale($ratio); 145 -ms-transform: scale($ratio); // IE9+ 146 transform: scale($ratio); 147 } 148 149 @mixin translate($x, $y) { 150 -webkit-transform: translate($x, $y); 151 -ms-transform: translate($x, $y); // IE9+ 152 transform: translate($x, $y); 153 } 154 @mixin skew($x, $y) { 155 -webkit-transform: skew($x, $y); 156 -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ 157 transform: skew($x, $y); 158 } 159 @mixin translate3d($x, $y, $z) { 160 -webkit-transform: translate3d($x, $y, $z); 161 transform: translate3d($x, $y, $z); 162 } 163 //transform origin 164 @mixin transform-origin ($origin) { 165 moz-transform-origin: $origin; 166 -o-transform-origin: $origin; 167 -ms-transform-origin: $origin; 168 -webkit-transform-origin: $origin; 169 transform-origin: $origin; 170 } 171 172 // Backface visibility 173 // Prevent browsers from flickering when using CSS 3D transforms. 174 // Default value is `visible`, but can be changed to `hidden` 175 // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples 176 @mixin backface-visibility($visibility) { 177 -webkit-backface-visibility: $visibility; 178 -moz-backface-visibility: $visibility; 179 backface-visibility: $visibility; 180 } 181 182 // Box sizing 183 @mixin box-sizing($boxmodel) { 184 -webkit-box-sizing: $boxmodel; 185 -moz-box-sizing: $boxmodel; 186 box-sizing: $boxmodel; 187 } 188 189 // User select 190 // For selecting text on the page 191 @mixin user-select($select) { 192 -webkit-user-select: $select; 193 -moz-user-select: $select; 194 -ms-user-select: $select; // IE10+ 195 -o-user-select: $select; 196 user-select: $select; 197 } 198 199 // Resize anything 200 @mixin resizable($direction) { 201 resize: $direction; // Options: horizontal, vertical, both 202 overflow: auto; // Safari fix 203 } 204 205 // CSS3 Content Columns 206 @mixin content-columns($column-count, $column-gap: $grid-gutter-width) { 207 -webkit-column-count: $column-count; 208 -moz-column-count: $column-count; 209 column-count: $column-count; 210 -webkit-column-gap: $column-gap; 211 -moz-column-gap: $column-gap; 212 column-gap: $column-gap; 213 } 214 215 // Optional hyphenation 216 @mixin hyphens($mode: auto) { 217 word-wrap: break-word; 218 -webkit-hyphens: $mode; 219 -moz-hyphens: $mode; 220 -ms-hyphens: $mode; // IE10+ 221 -o-hyphens: $mode; 222 hyphens: $mode; 223 } 224 225 // Opacity 226 @mixin opacity($opacity) { 227 opacity: $opacity; 228 // IE8 filter 229 $opacity-ie: ($opacity * 100); 230 filter: #{"alpha(opacity=#{opacity-ie})"}; 231 } 232 233 234 235 // GRADIENTS 236 // -------------------------------------------------- 237 238 #gradient { 239 240 // Horizontal gradient, from left to right 241 // 242 // Creates two color stops, start and end, by specifying a color and position for each color stop. 243 // Color stops are not available in IE9 and below. 244 @mixin horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { 245 background-image: -webkit-gradient(linear, $start-percent top, $end-percent top, from($start-color), to($end-color)); // Safari 4+, Chrome 2+ 246 background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1+, Chrome 10+ 247 background-image: -moz-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // FF 3.6+ 248 background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10 249 background-repeat: repeat-x; 250 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{argb($start-color)}', endColorstr='#{argb($end-color)}', GradientType=1); // IE9 and down 251 } 252 253 // Vertical gradient, from top to bottom 254 // 255 // Creates two color stops, start and end, by specifying a color and position for each color stop. 256 // Color stops are not available in IE9 and below. 257 @mixin vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { 258 background-image: -webkit-gradient(linear, left $start-percent, left $end-percent, from($start-color), to($end-color)); // Safari 4+, Chrome 2+ 259 background-image: -webkit-linear-gradient(top, $start-color, $start-percent, $end-color, $end-percent); // Safari 5.1+, Chrome 10+ 260 background-image: -moz-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // FF 3.6+ 261 background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10 262 background-repeat: repeat-x; 263 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{argb($start-color)}', endColorstr='#{argb($end-color)}', GradientType=0); // IE9 and down 264 } 265 266 @mixin directional($start-color: #555, $end-color: #333, $deg: 45deg) { 267 background-repeat: repeat-x; 268 background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1+, Chrome 10+ 269 background-image: -moz-linear-gradient($deg, $start-color, $end-color); // FF 3.6+ 270 background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10 271 } 272 @mixin horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { 273 background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from($start-color), color-stop($color-stop, $mid-color), to($end-color)); 274 background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); 275 background-image: -moz-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color); 276 background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); 277 background-repeat: no-repeat; 278 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{argb($start-color)}', endColorstr='#{argb($end-color)}', GradientType=1); // IE9 and down 279 } 280 @mixin vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { 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: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{argb($start-color)}', endColorstr='#{argb($end-color)}', GradientType=0); // IE9 and down 287 } 288 @mixin radial($inner-color: #555, $outer-color: #333) { 289 background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($inner-color), to($outer-color)); 290 background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color); 291 background-image: -moz-radial-gradient(circle, $inner-color, $outer-color); 292 background-image: radial-gradient(circle, $inner-color, $outer-color); 293 background-repeat: no-repeat; 294 } 295 @mixin striped($color: #555, $angle: 45deg) { 296 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)); 297 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); 298 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); 299 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); 300 } 301 } 302 303 // Reset filters for IE 304 // 305 // When you need to remove a gradient background, do not forget to use this to reset 306 // the IE filter for IE9 and below. 307 @mixin reset-filter() { 308 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 309 } 310 311 312 313 // Retina images 314 // 315 // Short retina mixin for setting background-image and -size 316 317 @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { 318 background-image: image-url("#{$file-1x}"); 319 background-size: $width-1x $height-1x; 320 321 @media 322 only screen and (-webkit-min-device-pixel-ratio: 2), 323 only screen and ( min--moz-device-pixel-ratio: 2), 324 only screen and ( -o-min-device-pixel-ratio: 2/1), 325 only screen and ( min-device-pixel-ratio: 2), 326 only screen and ( min-resolution: 192dpi), 327 only screen and ( min-resolution: 2dppx) { 328 background-image: image-url("#{$file-2x}"); 329 background-size: $width-1x $height-1x; 330 } 331 } 332 333 334 // Responsive image 335 // 336 // Keep images from scaling beyond the width of their parents. 337 338 @mixin img-responsive($display: block) { 339 display: $display; 340 max-width: 100%; // Part 1: Set a maximum relative to the parent 341 height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching 342 } 343 344 345 // COMPONENT MIXINS 346 // -------------------------------------------------- 347 348 // Horizontal dividers 349 // ------------------------- 350 // Dividers (basically an hr) within dropdowns and nav lists 351 @mixin nav-divider($color: #e5e5e5) { 352 height: 1px; 353 margin: (($line-height-computed / 2) - 1) 0; 354 overflow: hidden; 355 background-color: $color; 356 } 357 358 // Panels 359 // ------------------------- 360 @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) { 361 border-color: $border; 362 & > .panel-heading { 363 color: $heading-text-color; 364 background-color: $heading-bg-color; 365 border-color: $heading-border; 366 + .panel-collapse .panel-body { 367 border-top-color: $border; 368 } 369 } 370 & > .panel-footer { 371 + .panel-collapse .panel-body { 372 border-bottom-color: $border; 373 } 374 } 375 } 376 377 // Alerts 378 // ------------------------- 379 @mixin alert-variant($background, $border, $text-color) { 380 background-color: $background; 381 border-color: $border; 382 color: $text-color; 383 hr { 384 border-top-color: darken($border, 5%); 385 } 386 .alert-link { 387 color: darken($text-color, 10%); 388 } 389 } 390 391 // Tables 392 // ------------------------- 393 @mixin table-row-variant($state, $background, $border) { 394 // Exact selectors below required to override `.table-striped` and prevent 395 // inheritance to nested tables. 396 .table > thead > tr, 397 .table > tbody > tr, 398 .table > tfoot > tr { 399 > td.#{state}, 400 > th.#{state}, 401 &.#{state} > td, 402 &.#{state} > th { 403 background-color: $background; 404 border-color: $border; 405 } 406 } 407 408 // Hover states for `.table-hover` 409 // Note: this is not available for cells or rows within `thead` or `tfoot`. 410 .table-hover > tbody > tr { 411 > td.#{state}:hover, 412 > th.#{state}:hover, 413 &.#{state}:hover > td { 414 background-color: darken($background, 5%); 415 border-color: darken($border, 5%); 416 } 417 } 418 } 419 420 // Button variants 421 // ------------------------- 422 // Easily pump out default styles, as well as :hover, :focus, :active, 423 // and disabled options for all buttons 424 @mixin button-variant($color, $background, $border) { 425 color: $color; 426 background-color: $background; 427 border-color: $border; 428 429 &:hover, 430 &:focus, 431 &:active, 432 &.active, 433 .open .dropdown-toggle& { 434 color: $color; 435 background-color: darken($background, 8%); 436 border-color: darken($border, 12%); 437 } 438 &:active, 439 &.active, 440 .open .dropdown-toggle& { 441 background-image: none; 442 } 443 &.disabled, 444 &[disabled], 445 fieldset[disabled] & { 446 &, 447 &:hover, 448 &:focus, 449 &:active, 450 &.active { 451 background-color: $background; 452 border-color: $border 453 } 454 } 455 } 456 457 // Button sizes 458 // ------------------------- 459 @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { 460 padding: $padding-vertical $padding-horizontal; 461 font-size: $font-size; 462 line-height: $line-height; 463 border-radius: $border-radius; 464 } 465 466 // Pagination 467 // ------------------------- 468 @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { 469 > li { 470 > a, 471 > span { 472 padding: $padding-vertical $padding-horizontal; 473 font-size: $font-size; 474 } 475 &:first-child { 476 > a, 477 > span { 478 @include border-left-radius($border-radius); 479 } 480 } 481 &:last-child { 482 > a, 483 > span { 484 @include border-right-radius($border-radius); 485 } 486 } 487 } 488 } 489 490 // Labels 491 // ------------------------- 492 @mixin label-variant($color) { 493 background-color: $color; 494 &[href] { 495 &:hover, 496 &:focus { 497 background-color: darken($color, 10%); 498 } 499 } 500 } 501 502 // Navbar vertical align 503 // ------------------------- 504 // Vertically center elements in the navbar. 505 // Example: an element has a height of 30px, so write out `@include navbar-vertical-align(30px);` to calculate the appropriate top margin. 506 @mixin navbar-vertical-align($element-height) { 507 margin-top: (($navbar-height - $element-height) / 2); 508 margin-bottom: (($navbar-height - $element-height) / 2); 509 } 510 511 // Progress bars 512 // ------------------------- 513 // @mixin progress-bar-variant($color) { 514 // background-color: $color; 515 // .progress-striped & { 516 // #gradient > @include striped($color); 517 // } 518 // } 519 520 // Responsive utilities 521 // ------------------------- 522 // More easily include all the states for responsive-utilities.less. 523 @mixin responsive-visibility() { 524 display: block !important; 525 tr& { display: table-row !important; } 526 th&, 527 td& { display: table-cell !important; } 528 } 529 530 @mixin responsive-invisibility() { 531 display: none !important; 532 tr& { display: none !important; } 533 th&, 534 td& { display: none !important; } 535 } 536 537 // Grid System 538 // ----------- 539 540 // Centered container element 541 @mixin container-fixed() { 542 margin-right: auto; 543 margin-left: auto; 544 padding-left: ($grid-gutter-width / 2); 545 padding-right: ($grid-gutter-width / 2); 546 @include clearfix(); 547 } 548 549 // Creates a wrapper for a series of columns 550 @mixin make-row($gutter: $grid-gutter-width) { 551 margin-left: ($gutter / -2); 552 margin-right: ($gutter / -2); 553 @include clearfix(); 554 } 555 556 // Generate the extra small columns 557 @mixin make-xs-column($columns, $gutter: $grid-gutter-width) { 558 position: relative; 559 float: left; 560 width: percentage(($columns / $grid-columns)); 561 // Prevent columns from collapsing when empty 562 min-height: 1px; 563 // Inner gutter via padding 564 padding-left: ($gutter / 2); 565 padding-right: ($gutter / 2); 566 } 567 568 // Generate the small columns 569 @mixin make-sm-column($columns, $gutter: $grid-gutter-width) { 570 position: relative; 571 // Prevent columns from collapsing when empty 572 min-height: 1px; 573 // Inner gutter via padding 574 padding-left: ($gutter / 2); 575 padding-right: ($gutter / 2); 576 577 // Calculate width based on number of columns available 578 @media (min-width: $screen-sm) { 579 float: left; 580 width: percentage(($columns / $grid-columns)); 581 } 582 } 583 584 // Generate the small column offsets 585 @mixin make-sm-column-offset($columns) { 586 @media (min-width: $screen-sm) { 587 margin-left: percentage(($columns / $grid-columns)); 588 } 589 } 590 @mixin make-sm-column-push($columns) { 591 @media (min-width: $screen-sm) { 592 left: percentage(($columns / $grid-columns)); 593 } 594 } 595 @mixin make-sm-column-pull($columns) { 596 @media (min-width: $screen-sm) { 597 right: percentage(($columns / $grid-columns)); 598 } 599 } 600 601 // Generate the medium columns 602 @mixin make-md-column($columns, $gutter: $grid-gutter-width) { 603 position: relative; 604 // Prevent columns from collapsing when empty 605 min-height: 1px; 606 // Inner gutter via padding 607 padding-left: ($gutter / 2); 608 padding-right: ($gutter / 2); 609 610 // Calculate width based on number of columns available 611 @media (min-width: $screen-md) { 612 float: left; 613 width: percentage(($columns / $grid-columns)); 614 } 615 } 616 617 // Generate the large column offsets 618 @mixin make-md-column-offset($columns) { 619 @media (min-width: $screen-md) { 620 margin-left: percentage(($columns / $grid-columns)); 621 } 622 } 623 @mixin make-md-column-push($columns) { 624 @media (min-width: $screen-md) { 625 left: percentage(($columns / $grid-columns)); 626 } 627 } 628 @mixin make-md-column-pull($columns) { 629 @media (min-width: $screen-md) { 630 right: percentage(($columns / $grid-columns)); 631 } 632 } 633 634 // Generate the large columns 635 @mixin make-lg-column($columns, $gutter: $grid-gutter-width) { 636 position: relative; 637 // Prevent columns from collapsing when empty 638 min-height: 1px; 639 // Inner gutter via padding 640 padding-left: ($gutter / 2); 641 padding-right: ($gutter / 2); 642 643 // Calculate width based on number of columns available 644 @media (min-width: $screen-lg) { 645 float: left; 646 width: percentage(($columns / $grid-columns)); 647 } 648 } 649 650 // Generate the large column offsets 651 @mixin make-lg-column-offset($columns) { 652 @media (min-width: $screen-lg) { 653 margin-left: percentage(($columns / $grid-columns)); 654 } 655 } 656 @mixin make-lg-column-push($columns) { 657 @media (min-width: $screen-lg) { 658 left: percentage(($columns / $grid-columns)); 659 } 660 } 661 @mixin make-lg-column-pull($columns) { 662 @media (min-width: $screen-lg) { 663 right: percentage(($columns / $grid-columns)); 664 } 665 } 666 667 668 // Form validation states 669 // 670 // Used in forms.less to generate the form validation CSS for warnings, errors, 671 // and successes. 672 673 @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { 674 // Color the label and help text 675 .help-block, 676 .control-label { 677 color: $text-color; 678 } 679 // Set the border and box shadow on specific inputs to match 680 .form-control { 681 border-color: $border-color; 682 @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 683 &:focus { 684 border-color: darken($border-color, 10%); 685 $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); 686 @include box-shadow($shadow); 687 } 688 } 689 // Set validation states also for addons 690 .input-group-addon { 691 color: $text-color; 692 border-color: $border-color; 693 background-color: $background-color; 694 } 695 } 696 697 // Form control focus state 698 // 699 // Generate a customized focus state and for any input with the specified color, 700 // which defaults to the `$input-focus-border` variable. 701 // 702 // We highly encourage you to not customize the default value, but instead use 703 // this to tweak colors on an as-needed basis. This aesthetic change is based on 704 // WebKit's default styles, but applicable to a wider range of browsers. Its 705 // usability and accessibility should be taken into account with any change. 706 // 707 // Example usage: change the default blue border and shadow to white for better 708 // contrast against a dark gray background. 709 710 @mixin form-control-focus($color: $input-border-focus) { 711 $color-rgba: rgba(red($color), green($color), blue($color), .6); 712 &:focus { 713 border-color: $color; 714 outline: 0; 715 @include box-shadow(#{"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #{color-rgba}"}); 716 } 717 } 718 719 // Form control sizing 720 // 721 // Relative text size, padding, and border-radii changes for form controls. For 722 // horizontal sizing, wrap controls in the predefined grid classes. `<select>` 723 // element gets special love because it's special, and that's a fact! 724 725 @mixin input-size($input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { 726 height: $input-height; 727 padding: $padding-vertical $padding-horizontal; 728 font-size: $font-size; 729 line-height: $line-height; 730 border-radius: $border-radius; 731 732 select& { 733 height: $input-height; 734 line-height: $input-height; 735 } 736 737 textarea& { 738 height: auto; 739 } 740 } 741 742 743 //mixins 744 @mixin img-retina($image1x, $image, $width, $height) { 745 background-image: url($image1x); 746 background-size: $width $height; 747 background-repeat: no-repeat; 748 749 @media (min--moz-device-pixel-ratio: 1.3), 750 (-o-min-device-pixel-ratio: 2.6/2), 751 (-webkit-min-device-pixel-ratio: 1.3), 752 (min-device-pixel-ratio: 1.3), 753 (min-resolution: 1.3dppx) { 754 /* on retina, use image that's scaled by 2 */ 755 background-image: url($image); 756 background-size: $width $height; 757 } 758 } 759 760 @mixin btn-shadow{ 761 box-shadow: 2px 3px 2px rgba(0,0,0,0.08); 762 }