Mercurial > wikked

comparison static/bootstrap/less/mixins.less @ 88:a5a3d454eac9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated Bootstrap.
author Ludovic Chabant <ludovic@chabant.com>
date Fri, 05 Apr 2013 08:08:12 -0700
parents 130eccd396d8
children d29e2f337b00
comparison
equal deleted inserted replaced
87:c0cf67362fb1 88:a5a3d454eac9
266 -webkit-transition-delay: @transition-delay; 266 -webkit-transition-delay: @transition-delay;
267 -moz-transition-delay: @transition-delay; 267 -moz-transition-delay: @transition-delay;
268 -o-transition-delay: @transition-delay; 268 -o-transition-delay: @transition-delay;
269 transition-delay: @transition-delay; 269 transition-delay: @transition-delay;
270 } 270 }
271 .transition-duration(@transition-duration) {
272 -webkit-transition-duration: @transition-duration;
273 -moz-transition-duration: @transition-duration;
274 -o-transition-duration: @transition-duration;
275 transition-duration: @transition-duration;
276 }
271 277
272 // Transformations 278 // Transformations
273 .rotate(@degrees) { 279 .rotate(@degrees) {
274 -webkit-transform: rotate(@degrees); 280 -webkit-transform: rotate(@degrees);
275 -moz-transform: rotate(@degrees); 281 -moz-transform: rotate(@degrees);
435 background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ 441 background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
436 background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 442 background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
437 background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 443 background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
438 background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 444 background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
439 } 445 }
446 .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
447 background-color: mix(@midColor, @endColor, 80%);
448 background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
449 background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
450 background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
451 background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
452 background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
453 background-repeat: no-repeat;
454 filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
455 }
456
440 .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 457 .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
441 background-color: mix(@midColor, @endColor, 80%); 458 background-color: mix(@midColor, @endColor, 80%);
442 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); 459 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
443 background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); 460 background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
444 background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); 461 background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
498 .gradientBar(@startColor, @endColor, @textColor, @textShadow); 515 .gradientBar(@startColor, @endColor, @textColor, @textShadow);
499 *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ 516 *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
500 .reset-filter(); 517 .reset-filter();
501 518
502 // in these cases the gradient won't cover the background, so we override 519 // in these cases the gradient won't cover the background, so we override
503 &:hover, &:active, &.active, &.disabled, &[disabled] { 520 &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
504 color: @textColor; 521 color: @textColor;
505 background-color: @endColor; 522 background-color: @endColor;
506 *background-color: darken(@endColor, 5%); 523 *background-color: darken(@endColor, 5%);
507 } 524 }
508 525
556 #grid { 573 #grid {
557 574
558 .core (@gridColumnWidth, @gridGutterWidth) { 575 .core (@gridColumnWidth, @gridGutterWidth) {
559 576
560 .spanX (@index) when (@index > 0) { 577 .spanX (@index) when (@index > 0) {
561 (~".span@{index}") { .span(@index); } 578 .span@{index} { .span(@index); }
562 .spanX(@index - 1); 579 .spanX(@index - 1);
563 } 580 }
564 .spanX (0) {} 581 .spanX (0) {}
565 582
566 .offsetX (@index) when (@index > 0) { 583 .offsetX (@index) when (@index > 0) {
567 (~".offset@{index}") { .offset(@index); } 584 .offset@{index} { .offset(@index); }
568 .offsetX(@index - 1); 585 .offsetX(@index - 1);
569 } 586 }
570 .offsetX (0) {} 587 .offsetX (0) {}
571 588
572 .offset (@columns) { 589 .offset (@columns) {
601 } 618 }
602 619
603 .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { 620 .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
604 621
605 .spanX (@index) when (@index > 0) { 622 .spanX (@index) when (@index > 0) {
606 (~".span@{index}") { .span(@index); } 623 .span@{index} { .span(@index); }
607 .spanX(@index - 1); 624 .spanX(@index - 1);
608 } 625 }
609 .spanX (0) {} 626 .spanX (0) {}
610 627
611 .offsetX (@index) when (@index > 0) { 628 .offsetX (@index) when (@index > 0) {
612 (~'.offset@{index}') { .offset(@index); } 629 .offset@{index} { .offset(@index); }
613 (~'.offset@{index}:first-child') { .offsetFirstChild(@index); } 630 .offset@{index}:first-child { .offsetFirstChild(@index); }
614 .offsetX(@index - 1); 631 .offsetX(@index - 1);
615 } 632 }
616 .offsetX (0) {} 633 .offsetX (0) {}
617 634
618 .offset (@columns) { 635 .offset (@columns) {
656 } 673 }
657 674
658 .input(@gridColumnWidth, @gridGutterWidth) { 675 .input(@gridColumnWidth, @gridGutterWidth) {
659 676
660 .spanX (@index) when (@index > 0) { 677 .spanX (@index) when (@index > 0) {
661 (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); } 678 input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
662 .spanX(@index - 1); 679 .spanX(@index - 1);
663 } 680 }
664 .spanX (0) {} 681 .spanX (0) {}
665 682
666 .span(@columns) { 683 .span(@columns) {
680 697
681 // generate .spanX 698 // generate .spanX
682 .spanX (@gridColumns); 699 .spanX (@gridColumns);
683 700
684 } 701 }
685 702 }
686 }