Differential D23195 Diff 63845 autotests/folding/highlight.scss.fold

Changeset View

Standalone View

View Options

autotests/folding/highlight.scss.fold

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