Changeset View
Changeset View
Standalone View
Standalone View
autotests/input/highlight.scss
| Show First 20 Lines • Show All 587 Lines • ▼ Show 20 Line(s) | |||||
| 588 | @each $animal, $color, $cursor in (puma, black, default), | 588 | @each $animal, $color, $cursor in (puma, black, default), | ||
| 589 | (sea-slug, blue, pointer), | 589 | (sea-slug, blue, pointer), | ||
| 590 | (egret, white, move) { | 590 | (egret, white, move) { | ||
| 591 | .#{$animal}-icon { | 591 | .#{$animal}-icon { | ||
| 592 | background-image: url('/images/#{$animal}.png'); | 592 | background-image: url('/images/#{$animal}.png'); | ||
| 593 | border: 2px solid $color; | 593 | border: 2px solid $color; | ||
| 594 | cursor: $cursor; | 594 | cursor: $cursor; | ||
| 595 | } | 595 | } | ||
| 596 | } | ||||
| 597 | | ||||
| 598 | @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { | ||||
| 599 | #{$header} { | ||||
| 600 | font-size: $size; | ||||
| 601 | } | ||||
| 602 | } | ||||
| 603 | | ||||
| 604 | $i: 6; | ||||
| 605 | @while $i > 0 { | ||||
| 596 | } | 606 | .item-#{$i} { width: 2em * $i; } | ||
| 597 | 607 | $i: $i - 2; | |||
| 598 | @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { | 608 | } | ||
| 599 | #{$header} { | 609 | | ||
| 600 | font-size: $size; | 610 | @mixin large-text { | ||
| 601 | } | 611 | font: { | ||
| 602 | } | 612 | family: Arial; | ||
| 603 | 613 | size: 20px; | |||
| 604 | $i: 6; | 614 | weight: bold; | ||
| 605 | @while $i > 0 { | 615 | } | ||
| 606 | .item-#{$i} { width: 2em * $i; } | 616 | color: #ff0000; | ||
| 607 | $i: $i - 2; | 617 | } | ||
| 608 | } | 618 | | ||
| 609 | 619 | @mixin clearfix { | |||
| 610 | @mixin large-text { | 620 | display: inline-block; | ||
| 611 | font: { | 621 | &:after { | ||
| 612 | family: Arial; | 622 | content: "."; | ||
| 613 | size: 20px; | 623 | display: block; | ||
| 614 | weight: bold; | 624 | height: 0; | ||
| 615 | } | 625 | clear: both; | ||
| 616 | color: #ff0000; | 626 | visibility: hidden; | ||
| 617 | } | 627 | } | ||
| 618 | 628 | * html & { height: 1px } | |||
| 619 | @mixin clearfix { | 629 | } | ||
| 620 | display: inline-block; | 630 | | ||
| 621 | &:after { | 631 | .page-title { | ||
| 622 | content: "."; | 632 | @include large-text; | ||
| 623 | display: block; | 633 | padding: 4px; | ||
| 624 | height: 0; | 634 | margin-top: 10px; | ||
| 625 | clear: both; | 635 | } | ||
| 626 | visibility: hidden; | 636 | | ||
| 627 | } | 637 | @mixin compound { | ||
| 628 | * html & { height: 1px } | 638 | @include highlighted-background; | ||
| 629 | } | 639 | @include header-text; | ||
| 630 | 640 | } | |||
| 631 | .page-title { | 641 | | ||
| 632 | @include large-text; | 642 | @mixin highlighted-background { background-color: #fc0; } | ||
| 633 | padding: 4px; | 643 | @mixin header-text { font-size: 20px; } | ||
| 634 | margin-top: 10px; | 644 | | ||
| 635 | } | 645 | @mixin sexy-border($color, $width) { | ||
| 636 | 646 | border: { | |||
| 637 | @mixin compound { | 647 | color: $color; | ||
| 638 | @include highlighted-background; | 648 | width: $width; | ||
| 639 | @include header-text; | 649 | style: dashed; | ||
| 640 | } | 650 | } | ||
| 641 | 651 | } | |||
| 642 | @mixin highlighted-background { background-color: #fc0; } | 652 | | ||
| 643 | @mixin header-text { font-size: 20px; } | 653 | p { @include sexy-border(blue, 1in); } | ||
| 644 | 654 | | |||
| 645 | @mixin sexy-border($color, $width) { | 655 | p { @include sexy-border($color: blue); } | ||
| 646 | border: { | 656 | h1 { @include sexy-border($color: blue, $width: 2in); } | ||
| 647 | color: $color; | 657 | | ||
| 648 | width: $width; | 658 | | ||
| 649 | style: dashed; | 659 | @mixin colors($text, $background, $border) { | ||
| 650 | } | 660 | color: $text; | ||
| 651 | } | 661 | background-color: $background; | ||
| 652 | 662 | border-color: $border; | |||
| 653 | p { @include sexy-border(blue, 1in); } | 663 | } | ||
| 654 | 664 | | |||
| 655 | p { @include sexy-border($color: blue); } | 665 | $values: #ff0000, #00ff00, #0000ff; | ||
| 656 | h1 { @include sexy-border($color: blue, $width: 2in); } | 666 | .primary { | ||
| 657 | 667 | @include colors($values...); | |||
| 658 | 668 | } | |||
| 659 | @mixin colors($text, $background, $border) { | 669 | | ||
| 660 | color: $text; | 670 | $value-map: (text: #00ff00, background: #0000ff, border: #ff0000); | ||
| 661 | background-color: $background; | 671 | .secondary { | ||
| 662 | border-color: $border; | 672 | @include colors($value-map...); | ||
| 663 | } | 673 | } | ||
| 664 | 674 | | |||
| 665 | $values: #ff0000, #00ff00, #0000ff; | 675 | @mixin apply-to-ie6-only { | ||
| 666 | .primary { | 676 | * html { | ||
| 667 | @include colors($values...); | 677 | @content; | ||
| 668 | } | 678 | } | ||
| 669 | 679 | } | |||
| 670 | $value-map: (text: #00ff00, background: #0000ff, border: #ff0000); | 680 | @include apply-to-ie6-only { | ||
| 671 | .secondary { | 681 | #logo { | ||
| 672 | @include colors($value-map...); | 682 | background-image: url(/logo.gif); | ||
| 673 | } | 683 | } | ||
| 674 | 684 | } | |||
| 675 | @mixin apply-to-ie6-only { | 685 | | ||
| 676 | * html { | 686 | $grid-width: 40px; | ||
| 677 | @content; | 687 | $gutter-width: 10px; | ||
| 678 | } | 688 | | ||
| 679 | } | 689 | @function grid-width($n) { | ||
| 680 | @include apply-to-ie6-only { | 690 | @return $n * $grid-width + ($n - 1) * $gutter-width; | ||
| 681 | #logo { | 691 | } | ||
| 682 | background-image: url(/logo.gif); | 692 | | ||
| 683 | } | 693 | #sidebar { width: grid-width(5); } | ||
| 684 | } | 694 | | ||
| 685 | 695 | @mixin unify-parent($child) { | |||
| 686 | $grid-width: 40px; | 696 | @at-root #{selector-unify(&, $child)} { | ||
| 687 | $gutter-width: 10px; | 697 | @content; | ||
| 688 | 698 | } | |||
| 689 | @function grid-width($n) { | 699 | } | ||
| 690 | @return $n * $grid-width + ($n - 1) * $gutter-width; | 700 | | ||
| 691 | } | 701 | :root { | ||
| 692 | 702 | --font-family-sans-serif: #{inspect($font-family-sans-serif)}; | |||
| 693 | #sidebar { width: grid-width(5); } | 703 | --font-family-monospace: #{inspect($font-family-monospace)}; | ||
| 694 | 704 | } | |||
| 695 | @mixin unify-parent($child) { | 705 | | ||
| 696 | @at-root #{selector-unify(&, $child)} { | 706 | div { | ||
| 697 | @content; | 707 | background-image: url("/icons/#{$name}.svg"); | ||
| 698 | } | 708 | font: #{"string"}; | ||
| 699 | } | 709 | | ||
| 700 | 710 | .icon-#{$name} { | |||
| 701 | :root { | 711 | position: absolute; | ||
| 702 | --font-family-sans-serif: #{inspect($font-family-sans-serif)}; | 712 | #{$top-or-bottom}: 0; | ||
| 703 | --font-family-monospace: #{inspect($font-family-monospace)}; | 713 | -#{$prefix}-#{$property}: $value; | ||
| 704 | } | 714 | .icon-#{$name} { | ||
| 705 | 715 | position: absolute; | |||
| 706 | div { | 716 | #{$top-or-bottom}: 0; | ||
| 707 | background-image: url("/icons/#{$name}.svg"); | 717 | -#{$prefix}-#{$property}-image: $value | ||
| 708 | font: #{"string"}; | 718 | } | ||
| 709 | } | 719 | } | ||