File indexing completed on 2024-05-12 04:02:07
0001 <!DOCTYPE html> 0002 <html><head> 0003 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 0004 <title>highlight.scss</title> 0005 <meta name="generator" content="KF5::SyntaxHighlighting - Definition (SCSS) - Theme (Breeze Dark)"/> 0006 </head><body style="background-color:#232629;color:#cfcfc2"><pre> 0007 <span style="color:#7a7c7d">/**</span> 0008 <span style="color:#7a7c7d"> * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.</span> 0009 <span style="color:#7a7c7d"> */</span> 0010 0011 <span style="color:#7a7c7d">/* Properties */</span> 0012 0013 body { 0014 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">15</span><span style="color:#2980b9">pt</span><span style="color:#3f8058">;</span> 0015 <span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> Verdana<span style="color:#3f8058">,</span> Helvetica<span style="color:#3f8058">,</span> <span style="color:#f44f4f">"Bitstream Vera Sans"</span><span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span><span style="color:#3f8058">;</span> 0016 <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* yet another comment */</span> 0017 <span style="font-weight:bold">margin-bottom</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0018 <span style="color:#7a7c7d">// this is no comment, it's just broken!</span> 0019 <span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">hsl(</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#2980b9">%</span><span style="color:#3f8058">,</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">95</span><span style="color:#2980b9">%</span> <span style="color:#3f8058">-</span> <span style="color:#f67400">3</span><span style="color:#2980b9">%</span><span style="color:#8e44ad">))</span><span style="color:#3f8058">;</span> 0020 <span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"Droid Sans"</span><span style="color:#3f8058">,</span> Arial<span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span><span style="color:#3f8058">;</span> 0021 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">11</span><span style="color:#2980b9">pt</span><span style="color:#3f8058">;</span> 0022 <span style="font-weight:bold">line-height</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1.5</span><span style="color:#2980b9">em</span><span style="color:#3f8058">;</span> 0023 <span style="font-weight:bold">background</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#fff000</span><span style="color:#3f8058">;</span> 0024 <span style="font-weight:bold">text-shadow</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span> <span style="color:#f67400">0</span> <span style="color:#f67400">2</span><span style="color:#2980b9">px</span> <span style="color:#8e44ad">rgba(</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0.3</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0025 <span style="font-weight:bold">box-sizing</span><span style="color:#3daee9">:</span> <span style="color:#f67400">border-box</span><span style="color:#3f8058">;</span> 0026 <span style="font-weight:bold">font-variant-alternates</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">styleset(</span>nice-style<span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0027 } 0028 0029 <span style="color:#7a7c7d">/* Selectors */</span> 0030 0031 body<span style="color:#3f8058">,</span> blockquote { 0032 <span style="font-weight:bold">margin</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#3f8058">;</span> 0033 } 0034 0035 header <span style="color:#27ae60;font-weight:bold">#logo</span> { 0036 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0037 } 0038 0039 div<span style="color:#27ae60;font-weight:bold">#footer</span> <span style="color:#8e44ad">.link</span> { 0040 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">blue</span><span style="color:#3f8058">;</span> 0041 } 0042 0043 <span style="color:#8e44ad">.something</span> 0044 { 0045 <span style="font-weight:bold">margin-right</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0046 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#cdd</span><span style="color:#3f8058">;</span> 0047 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#AAFE04</span><span style="color:#3f8058">;</span> 0048 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">rgb(</span><span style="color:#f67400">10</span><span style="color:#2980b9">%</span><span style="color:#3f8058">,</span><span style="color:#f67400">30</span><span style="color:#2980b9">%</span><span style="color:#3f8058">,</span><span style="color:#f67400">43</span><span style="color:#2980b9">%</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0049 <span style="font-weight:bold">background</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">maroon</span><span style="color:#3f8058">;</span> 0050 } 0051 0052 sidebar <span style="color:#27ae60;font-weight:bold">#subscribe</span> <span style="color:#8e44ad">.subscribe_form</span> input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">type</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"text"</span><span style="color:#0099ff;font-weight:bold">]</span> { 0053 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">20</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0054 } 0055 0056 sidebar <span style="color:#27ae60;font-weight:bold">#subscribe</span> <span style="color:#8e44ad">.subscribe_form</span><span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">2</span><span style="color:#2980b9">n</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">1</span><span style="color:#c45b00;font-style:italic">):hover</span> input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">class</span><span style="color:#3f8058">*=</span><span style="color:#f44f4f">"small-"</span><span style="color:#0099ff;font-weight:bold">]</span> { 0057 <span style="font-weight:bold">font-weight</span><span style="color:#3daee9">:</span> <span style="color:#f67400">bold</span><span style="color:#3f8058">;</span> 0058 } 0059 0060 input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">text</span><span style="color:#0099ff;font-weight:bold">]</span> 0061 input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span><span style="color:#f44f4f"> text </span><span style="color:#0099ff;font-weight:bold">]</span> 0062 input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span><span style="color:#f44f4f"> text </span><span style="color:#3f8058">i</span><span style="color:#0099ff;font-weight:bold">]</span> 0063 input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span><span style="color:#f44f4f"> "text" </span><span style="color:#3f8058">i</span><span style="color:#0099ff;font-weight:bold">]</span> 0064 input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">i</span><span style="color:#0099ff;font-weight:bold">]</span> 0065 input<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">value</span><span style="color:#3f8058">=</span><span style="color:#f44f4f"> i</span><span style="color:#0099ff;font-weight:bold">]</span> { 0066 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">20</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0067 } 0068 0069 <span style="color:#27ae60;font-weight:bold">#header</span><span style="color:#3f8058">,</span> 0070 a<span style="color:#c45b00;font-style:italic">:hover</span><span style="color:#3f8058">,</span> 0071 p<span style="color:#8e44ad">.intro</span><span style="color:#c45b00;font-style:italic">:first-letter</span><span style="color:#3f8058">,</span> 0072 p<span style="color:#c45b00;font-style:italic">:lang(</span><span style="color:#f44f4f">nl</span><span style="color:#c45b00;font-style:italic">)</span><span style="color:#3f8058">,</span> 0073 img<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">align</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"right"</span><span style="color:#0099ff;font-weight:bold">]</span> 0074 { 0075 <span style="font-weight:bold">border</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span> <span style="color:#f67400">solid</span> Qt::<span style="color:#27aeae;font-weight:bold">red</span> <span style="color:#2980b9">!important</span><span style="color:#3f8058">;</span> 0076 <span style="font-weight:bold;font-style:italic">-moz-border-radius</span><span style="color:#3daee9">:</span> <span style="color:#f67400">15</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* unknown properties render italic */</span> 0077 } 0078 0079 <span style="color:#8e44ad">.nice-look</span> { 0080 } 0081 0082 ul { 0083 <span style="font-weight:bold">list-style</span><span style="color:#3daee9">:</span> thumbs<span style="color:#3f8058">;</span> 0084 } 0085 0086 <span style="color:#7a7c7d">/* SVG <a> */</span> 0087 svg<span style="color:#3f8058">|</span>a {} 0088 0089 <span style="color:#7a7c7d">/* XHTML and SVG <a> */</span> 0090 <span style="color:#3f8058">*|</span>a {} 0091 0092 <span style="color:#3f8058">*</span>{} 0093 <span style="color:#8e44ad">.class</span>{} 0094 <span style="color:#27ae60;font-weight:bold">#id</span>{} 0095 <span style="color:#c45b00;font-style:italic">:hover</span>{} 0096 <span style="color:#c45b00;font-style:italic">:lang(</span><span style="color:#f44f4f">fr</span><span style="color:#c45b00;font-style:italic">)</span>{} 0097 E{} 0098 E F{} 0099 E<span style="color:#3f8058">></span>F{} 0100 E <span style="color:#3f8058">></span> F{} 0101 E<span style="color:#3f8058">~</span>F{} 0102 E <span style="color:#3f8058">~</span> F{} 0103 E<span style="color:#c45b00;font-style:italic">:first-child</span>{} 0104 E<span style="color:#c45b00;font-style:italic">:visited</span>{} 0105 E<span style="color:#c45b00;font-style:italic">::after</span>{} 0106 E<span style="color:#c45b00;font-style:italic">:lang(</span><span style="color:#f44f4f">c</span><span style="color:#c45b00;font-style:italic">)</span>{} 0107 E<span style="color:#c45b00;font-style:italic">:lang(</span><span style="color:#f44f4f">fr-ca</span><span style="color:#c45b00;font-style:italic">)</span>{} 0108 E <span style="color:#3f8058">+</span> F{} 0109 E<span style="color:#3f8058">+</span>F{} 0110 E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#0099ff;font-weight:bold">]</span>{} 0111 E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">warning</span><span style="color:#0099ff;font-weight:bold">]</span>{} 0112 E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"warning"</span><span style="color:#0099ff;font-weight:bold">]</span>{} 0113 E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">~=</span><span style="color:#f44f4f">"warning"</span><span style="color:#0099ff;font-weight:bold">]</span>{} 0114 E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">^=</span><span style="color:#f44f4f">"warning"</span><span style="color:#0099ff;font-weight:bold">]</span>{} 0115 E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">$=</span><span style="color:#f44f4f">"warning"</span><span style="color:#0099ff;font-weight:bold">]</span>{} 0116 E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">foo</span><span style="color:#3f8058">*=</span><span style="color:#f44f4f">"warning"</span><span style="color:#0099ff;font-weight:bold">]</span>{} 0117 E<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">lang</span><span style="color:#3f8058">|=</span><span style="color:#f44f4f">"en"</span><span style="color:#0099ff;font-weight:bold">]</span>{} 0118 DIV<span style="color:#8e44ad">.warning</span>{} 0119 DIV <span style="color:#8e44ad">.warning</span>{} 0120 E<span style="color:#27ae60;font-weight:bold">#myid</span>{} 0121 E <span style="color:#27ae60;font-weight:bold">#myid</span>{} 0122 E<span style="color:#3f8058">,</span>E{} 0123 E<span style="color:#3f8058">,</span> E{} 0124 E <span style="color:#3f8058">,</span>E{} 0125 E <span style="color:#3f8058">,</span> E{} 0126 0127 p<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">2</span><span style="color:#c45b00;font-style:italic">)</span> { 0128 <span style="font-weight:bold">background</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span> 0129 } 0130 0131 <span style="color:#7a7c7d">/* Elements that are not <div> or <span> elements */</span> 0132 body <span style="color:#c45b00;font-style:italic">:not(</span>div<span style="color:#c45b00;font-style:italic">):not(</span>span<span style="color:#c45b00;font-style:italic">)</span> { 0133 <span style="font-weight:bold">font-weight</span><span style="color:#3daee9">:</span> <span style="color:#f67400">bold</span><span style="color:#3f8058">;</span> 0134 } 0135 0136 <span style="color:#7a7c7d">/* Elements that are not `.crazy` or `.fancy` */</span> 0137 <span style="color:#7a7c7d">/* Note that this syntax is not well supported yet. */</span> 0138 body <span style="color:#c45b00;font-style:italic">:not(</span><span style="color:#8e44ad">.crazy</span><span style="color:#3f8058">,</span> <span style="color:#8e44ad">.fancy</span><span style="color:#c45b00;font-style:italic">)</span> { 0139 <span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> <span style="color:#f67400">sans-serif</span><span style="color:#3f8058">;</span> 0140 } 0141 0142 <span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">odd</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> } 0143 <span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">even</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> } 0144 <span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">4</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> } 0145 <span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">4</span><span style="color:#2980b9">n</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> } 0146 <span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">3</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">4</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> } 0147 <span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#3f8058">-</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">3</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> } 0148 <span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">8</span><span style="color:#c45b00;font-style:italic">):nth-child(</span><span style="color:#3f8058">-</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">15</span><span style="color:#c45b00;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> } 0149 0150 <span style="color:#8e44ad">.first</span> span<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">2</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">1</span><span style="color:#c45b00;font-style:italic">)</span><span style="color:#3f8058">,</span> 0151 <span style="color:#8e44ad">.second</span> span<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">2</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">1</span><span style="color:#c45b00;font-style:italic">)</span><span style="color:#3f8058">,</span> 0152 <span style="color:#8e44ad">.third</span> span<span style="color:#c45b00;font-style:italic">:nth-of-type(</span><span style="color:#f67400">2</span><span style="color:#2980b9">n</span><span style="color:#3f8058">+</span><span style="color:#f67400">1</span><span style="color:#c45b00;font-style:italic">)</span> { 0153 <span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> 0154 unknown-property<span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">lime</span><span style="color:#3f8058">;</span> 0155 } 0156 0157 <span style="color:#c45b00;font-style:italic">:root</span>{ 0158 <span style="color:#27aeae">--foo</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">if(</span>x <span style="color:#3f8058">></span> <span style="color:#f67400">5</span><span style="color:#8e44ad">)</span> this.width <span style="color:#3f8058">=</span> <span style="color:#f67400">10</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* valid custom property, invalid in any normal property */</span> 0159 } 0160 0161 <span style="color:#c45b00;font-style:italic">:root</span><span style="color:#3f8058">,</span> 0162 <span style="color:#c45b00;font-style:italic">:root:lang(</span><span style="color:#f44f4f">en</span><span style="color:#c45b00;font-style:italic">)</span> {<span style="color:#27aeae">--external-link</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"external link"</span><span style="color:#3f8058">;</span>} 0163 <span style="color:#c45b00;font-style:italic">:root:lang(</span><span style="color:#f44f4f">de</span><span style="color:#c45b00;font-style:italic">)</span> {<span style="color:#27aeae">--external-link</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"externer Link"</span><span style="color:#3f8058">;</span>} 0164 0165 a<span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">href</span><span style="color:#3f8058">^=</span><span style="color:#f44f4f">"http"</span><span style="color:#0099ff;font-weight:bold">]</span><span style="color:#c45b00;font-style:italic">::after</span> {<span style="font-weight:bold">content</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">" ("</span> <span style="color:#8e44ad">var(</span><span style="color:#27aeae">--external-link</span><span style="color:#8e44ad">)</span> <span style="color:#f44f4f">")"</span>} 0166 0167 one { <span style="color:#27aeae">--foo</span><span style="color:#3daee9">:</span> <span style="color:#f67400">10</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> } 0168 two { <span style="color:#27aeae">--bar</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(var(</span><span style="color:#27aeae">--foo</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">10</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> } 0169 three { <span style="color:#27aeae">--foo</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(var(</span><span style="color:#27aeae">--bar</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">10</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> } 0170 <span style="color:#8e44ad">.foo</span> { 0171 <span style="color:#27aeae">--gap</span><span style="color:#3daee9">:</span> <span style="color:#f67400">20</span><span style="color:#3f8058">;</span> 0172 <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">var(</span><span style="color:#27aeae">--gap</span><span style="color:#8e44ad">)</span>px<span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/*20 px*/</span> 0173 <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(var(</span><span style="color:#27aeae">--gap</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">*</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/*20px*/</span> 0174 } 0175 0176 foo { 0177 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span> <span style="color:#f67400">-8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* invalid */</span> 0178 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span><span style="color:#3f8058">-</span> <span style="color:#f67400">8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* invalid */</span> 0179 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span> <span style="color:#f67400">+8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* invalid */</span> 0180 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span><span style="color:#3f8058">+</span> <span style="color:#f67400">8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* invalid */</span> 0181 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">2</span><span style="color:#2980b9">px</span> <span style="color:#8e44ad">-var(</span>--a<span style="color:#8e44ad">))</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* invalid */</span> 0182 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span><span style="color:#3f8058">*</span><span style="color:#f67400">-8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0183 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span> <span style="color:#3f8058">-</span> <span style="color:#f67400">8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0184 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">-8</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0185 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">50</span><span style="color:#2980b9">%</span> <span style="color:#3f8058">+</span>(<span style="color:#f67400">8</span><span style="color:#2980b9">px</span>)<span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0186 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">2</span><span style="color:#2980b9">px</span> <span style="color:#8e44ad">-(var(</span><span style="color:#27aeae">--a</span><span style="color:#8e44ad">)))</span><span style="color:#3f8058">;</span> 0187 } 0188 0189 sweet-alert input<span style="color:#c45b00;font-style:italic">:focus::-moz-placeholder</span> { 0190 <span style="font-weight:bold;font-style:italic">-webkit-transition</span><span style="color:#3daee9">:</span> opacity <span style="color:#f67400">0.3</span><span style="color:#2980b9">s</span> <span style="color:#f67400">0.03</span><span style="color:#2980b9">s</span> <span style="color:#f67400">ease</span><span style="color:#3f8058">;</span> 0191 <span style="font-weight:bold">transition</span><span style="color:#3daee9">:</span> opacity <span style="color:#f67400">0.3</span><span style="color:#2980b9">s</span> <span style="color:#f67400">0.03</span><span style="color:#2980b9">s</span> <span style="color:#f67400">ease</span><span style="color:#3f8058">;</span> 0192 <span style="font-weight:bold">opacity</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0.5</span><span style="color:#3f8058">;</span> 0193 } 0194 0195 0196 <span style="color:#27ae60">@font-feature-values</span> Font One { 0197 <span style="color:#27ae60">@styleset</span> { 0198 nice-style<span style="color:#3daee9">:</span> <span style="color:#f67400">12</span><span style="color:#3f8058">;</span> 0199 } 0200 } 0201 0202 <span style="color:#27ae60">@font-feature-values</span> Font Two { 0203 <span style="color:#27ae60">@styleset</span> { 0204 nice-style<span style="color:#3daee9">:</span> <span style="color:#f67400">4</span><span style="color:#3f8058">;</span> 0205 } 0206 } 0207 0208 <span style="color:#27ae60">@font-palette-values</span> --identifier { 0209 <span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> Bixa<span style="color:#3f8058">;</span> 0210 } 0211 0212 <span style="color:#27ae60">@counter-style</span> thumbs { 0213 <span style="font-weight:bold">system</span><span style="color:#3daee9">:</span> <span style="color:#f67400">cyclic</span><span style="color:#3f8058">;</span> 0214 <span style="font-weight:bold">symbols</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"</span><span style="color:#3daee9">\1F44D</span><span style="color:#f44f4f">"</span><span style="color:#3f8058">;</span> 0215 <span style="font-weight:bold">suffix</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">" "</span><span style="color:#3f8058">;</span> 0216 } 0217 0218 <span style="color:#27ae60">@font-face</span> { 0219 <span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"Open Sans"</span><span style="color:#3f8058">;</span> 0220 <span style="color:#7a7c7d">/* comments */</span> 0221 unknown<span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0222 <span style="font-weight:bold">src</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"/fonts/OpenSans-Regular-webfont.woff2"</span><span style="color:#8e44ad">)</span> <span style="color:#8e44ad">format(</span><span style="color:#f44f4f">"woff2"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">,</span> 0223 <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"/fonts/OpenSans-Regular-webfont.woff"</span><span style="color:#8e44ad">)</span> <span style="color:#8e44ad">format(</span><span style="color:#f44f4f">"woff"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0224 } 0225 0226 <span style="color:#27ae60">@page</span> { 0227 <span style="font-weight:bold">margin</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#2980b9">cm</span><span style="color:#3f8058">;</span> 0228 } 0229 0230 <span style="color:#27ae60">@page</span> <span style="color:#c45b00;font-style:italic">:first</span> { 0231 <span style="font-weight:bold">margin</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">cm</span><span style="color:#3f8058">;</span> 0232 <span style="color:#7a7c7d">/* comments */</span> 0233 marks<span style="color:#3daee9">:</span> crop cross<span style="color:#3f8058">;</span> 0234 } 0235 0236 <span style="color:#27ae60">@page</span> <span style="color:#c45b00;font-style:italic">:</span>unknown { 0237 <span style="font-weight:bold">margin</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">cm</span><span style="color:#3f8058">;</span> 0238 } 0239 0240 <span style="color:#27ae60">@document</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"https://www.example.com/"</span><span style="color:#8e44ad">)</span> { 0241 h1 { 0242 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">green</span><span style="color:#3f8058">;</span> 0243 } 0244 } 0245 0246 <span style="color:#27ae60">@charset</span> <span style="color:#f44f4f">"UTF-8"</span><span style="color:#3f8058">;</span> 0247 0248 <span style="color:#27ae60">@import</span> <span style="color:#f44f4f">'custom.css'</span><span style="color:#3f8058">;</span> 0249 <span style="color:#27ae60">@import</span> <span style="color:#f44f4f">"common.css"</span> <span style="color:#3f8058">screen</span><span style="color:#3f8058">;</span> 0250 <span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"fineprint.css"</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">print</span><span style="color:#3f8058">;</span> 0251 <span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">fineprint.css</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">print</span><span style="color:#3f8058">;</span> 0252 <span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">'bluish.css'</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">speech</span><span style="color:#3f8058">;</span> 0253 <span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"chrome://communicator/skin/"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0254 <span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">'landscape.css'</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">screen</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">orientation</span><span style="color:#3daee9">:</span>landscape<span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0255 <span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"othersheet.css"</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">screen</span>, <span style="color:#3f8058">print</span><span style="color:#3f8058">;</span> 0256 0257 <span style="color:#27ae60">@namespace</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">http://www.w3.org/1999/xhtml</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0258 <span style="color:#27ae60">@namespace</span> svg <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">http://www.w3.org/2000/svg</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0259 0260 <span style="color:#7a7c7d">/* Animation (Keyframes) */</span> 0261 0262 <span style="color:#27ae60">@keyframes</span> important1 { 0263 <span style="color:#f67400">from</span> { <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">50</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> } 0264 <span style="color:#f67400">50%</span> { <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">150</span><span style="color:#2980b9">px</span> <span style="color:#2980b9">!important</span><span style="color:#3f8058">;</span> } <span style="color:#7a7c7d">/* ignored */</span> 0265 <span style="color:#f67400">to</span> { <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> } 0266 } 0267 0268 <span style="color:#27ae60">@keyframes</span> important2 { 0269 <span style="color:#f67400">from</span> { <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">50</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0270 <span style="font-weight:bold">margin-bottom</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> } 0271 <span style="color:#f67400">to</span> { <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#f67400">150</span><span style="color:#2980b9">px</span> <span style="color:#2980b9">!important</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">/* ignored */</span> 0272 <span style="font-weight:bold">margin-bottom</span><span style="color:#3daee9">:</span> <span style="color:#f67400">50</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> } 0273 } 0274 0275 <span style="color:#27ae60">@keyframes</span> slidein { 0276 <span style="color:#f67400">from</span> { 0277 <span style="font-weight:bold">margin-left</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 0278 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 0279 } 0280 0281 <span style="color:#f67400">to</span> { 0282 <span style="font-weight:bold">margin-left</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 0283 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 0284 } 0285 } 0286 0287 <span style="color:#7a7c7d">/* Media Queries */</span> 0288 0289 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">print</span> { 0290 <span style="color:#8e44ad">.container</span> { 0291 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 0292 } 0293 a<span style="color:#c45b00;font-style:italic">:hover</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span> } 0294 <span style="color:#7a7c7d">/* comments */</span> 0295 a<span style="color:#c45b00;font-style:italic">:hover</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span> } 0296 0297 <span style="color:#27ae60;font-weight:bold">#header</span> 0298 { 0299 <span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">none</span><span style="color:#3f8058">;</span> 0300 } 0301 } 0302 0303 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">screen</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">orientation</span><span style="color:#3daee9">:</span> landscape<span style="color:#8e44ad">)</span> { 0304 <span style="color:#8e44ad">.sidebar</span> { 0305 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">500</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> } } 0306 0307 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">screen</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">min-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">768</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">max-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">960</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> { 0308 <span style="color:#8e44ad">.container</span> { 0309 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">720</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0310 } 0311 } 0312 0313 <span style="color:#27ae60">@media</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">max-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">600</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> { 0314 <span style="color:#8e44ad">.sidebar</span> { 0315 <span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">none</span><span style="color:#3f8058">;</span> 0316 } 0317 } 0318 0319 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">print</span> { 0320 } 0321 0322 <span style="color:#27ae60">@media</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">height</span> <span style="color:#3f8058">></span> <span style="color:#f67400">600</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> { 0323 body { 0324 <span style="font-weight:bold">line-height</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1.4</span><span style="color:#3f8058">;</span> 0325 } 0326 } 0327 0328 <span style="color:#27ae60">@media</span> <span style="color:#8e44ad">(</span><span style="color:#f67400">400</span><span style="color:#2980b9">px</span> <span style="color:#3f8058"><=</span> <span style="font-weight:bold">width</span> <span style="color:#3f8058"><=</span> <span style="color:#f67400">700</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> { 0329 body { 0330 <span style="font-weight:bold">line-height</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1.4</span><span style="color:#3f8058">;</span> 0331 } 0332 } 0333 0334 <span style="color:#27ae60">@supports</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">grid</span><span style="color:#8e44ad">)</span> { 0335 div { 0336 <span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">grid</span><span style="color:#3f8058">;</span> 0337 } 0338 } 0339 0340 <span style="color:#27ae60">@supports</span> <span style="color:#8e44ad">font-tech(</span>color-COLRv1<span style="color:#8e44ad">)</span> { 0341 div {} 0342 } 0343 0344 <span style="color:#27ae60">@supports</span> <span style="font-weight:bold">not</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">not</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">transform-origin</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">))</span> { 0345 div {} 0346 } 0347 0348 <span style="color:#27ae60">@supports</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">grid</span><span style="color:#8e44ad">)</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">not</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">inline-grid</span><span style="color:#8e44ad">))</span> { 0349 div {} 0350 } 0351 0352 <span style="color:#7a7c7d">/*</span> 0353 <span style="color:#7a7c7d"> * CSS Syntax Highlight Sample File (Standard)</span> 0354 <span style="color:#7a7c7d"> *</span> 0355 <span style="color:#7a7c7d"> * This file contains most CSS syntax, CSS3 properties, @media, @font-face and</span> 0356 <span style="color:#7a7c7d"> * @keyframes annotations.</span> 0357 <span style="color:#7a7c7d"> *</span> 0358 <span style="color:#7a7c7d"> * @author Guo Yunhe guoyunhebrave@gmail.com</span> 0359 <span style="color:#7a7c7d"> * @date 2016-09-16</span> 0360 <span style="color:#7a7c7d"> */</span> 0361 0362 <span style="color:#7a7c7d">/*</span> 0363 <span style="color:#7a7c7d"> * Block comment</span> 0364 <span style="color:#7a7c7d"> *</span> 0365 <span style="color:#7a7c7d"> * Alert keywords:</span> 0366 <span style="color:#7a7c7d"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">TODO</span><span style="color:#7a7c7d"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">BUG</span><span style="color:#7a7c7d"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">FIXME</span> 0367 <span style="color:#7a7c7d"> */</span> 0368 0369 0370 <span style="color:#7a7c7d">/* Region markers */</span> 0371 0372 <span style="color:#2980b9;background-color:#153042">/*BEGIN Comment */</span> 0373 0374 0375 <span style="color:#2980b9;background-color:#153042">/*END Comment */</span> 0376 0377 <span style="color:#7a7c7d">/*</span> 0378 <span style="color:#7a7c7d"> * CSS Syntax Highlight Sample File (Complex)</span> 0379 <span style="color:#7a7c7d"> *</span> 0380 <span style="color:#7a7c7d"> * This file contains complex CSS syntax that can test unexpected situations.</span> 0381 <span style="color:#7a7c7d"> *</span> 0382 <span style="color:#7a7c7d"> * @author Guo Yunhe guoyunhebrave@gmail.com</span> 0383 <span style="color:#7a7c7d"> * @date 2016-09-16</span> 0384 <span style="color:#7a7c7d"> */</span> 0385 0386 0387 <span style="color:#7a7c7d">/* Comments with special content */</span> 0388 0389 <span style="color:#7a7c7d">/*</span> 0390 <span style="color:#7a7c7d"> * .class-selector #id "string" 'comment' // comment {} [] () /* comment</span> 0391 <span style="color:#7a7c7d"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">TODO</span><span style="color:#7a7c7d"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">BUG</span><span style="color:#7a7c7d"> DEBUG</span> 0392 <span style="color:#7a7c7d"> * body {</span> 0393 <span style="color:#7a7c7d"> * margin: 0 !important;</span> 0394 <span style="color:#7a7c7d"> * }</span> 0395 <span style="color:#7a7c7d"> */</span> 0396 0397 <span style="color:#7a7c7d">/* Comments in special positions */</span> 0398 0399 header<span style="color:#7a7c7d">/* comment here */</span><span style="color:#8e44ad">.active</span> <span style="color:#7a7c7d">/* comment here */</span> { 0400 <span style="color:#7a7c7d">/* comment here */</span> <span style="font-weight:bold">color</span> <span style="color:#3daee9">:</span> <span style="color:#7a7c7d">/* comment here */</span> <span style="color:#27aeae;font-weight:bold">blue</span><span style="color:#7a7c7d">/* comment here */</span><span style="color:#3f8058">;</span> 0401 <span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> Arial <span style="color:#7a7c7d">/* comment here */</span><span style="color:#3f8058">,</span> 0402 <span style="color:#f44f4f">"Droid Sans"</span><span style="color:#3f8058">,</span> <span style="color:#7a7c7d">/* comment here */</span> 0403 <span style="color:#f67400">sans-serif</span><span style="color:#7a7c7d">/* comment here */</span><span style="color:#3f8058">;</span> 0404 } 0405 0406 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">screen</span> <span style="color:#7a7c7d">/* comment here */</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">max-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span> <span style="color:#7a7c7d">/* comment here */</span><span style="color:#8e44ad">)</span> <span style="color:#7a7c7d">/* comment here */</span> {<span style="color:#7a7c7d">/* comment here */</span>} 0407 0408 0409 <span style="color:#7a7c7d">/* Strings with special content */</span> 0410 0411 <span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"{} $variable /* comment */"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0412 0413 0414 <span style="color:#7a7c7d">/* Without extra breaklines and spaces */</span> 0415 0416 pre<span style="color:#8e44ad">.primary</span><span style="color:#c45b00;font-style:italic">:hover</span><span style="color:#8e44ad">.large</span><span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">2</span><span style="color:#2980b9">n</span><span style="color:#3f8058">-</span><span style="color:#f67400">1</span><span style="color:#c45b00;font-style:italic">)</span>{<span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span><span style="color:#f67400">17</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span><span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span><span style="color:#f44f4f">"Noto Sans"</span><span style="color:#3f8058">;</span><span style="font-weight:bold;font-style:italic">-webkit-box-shadow</span><span style="color:#3daee9">:</span><span style="color:#f67400">1</span><span style="color:#2980b9">px</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span> <span style="color:#f67400">3</span><span style="color:#2980b9">px</span> <span style="color:#8e44ad">rgba(</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span><span style="color:#f67400">0.3</span><span style="color:#8e44ad">)</span>} 0417 0418 0419 <span style="color:#7a7c7d">/* With unnecessary breaklines and spaces */</span> 0420 0421 blockquote <span style="color:#8e44ad">.ref</span> 0422 { 0423 <span style="font-weight:bold">flex</span> <span style="color:#3daee9">:</span> <span style="color:#f67400">0</span> <span style="color:#f67400">1</span> <span style="color:#f67400">30</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 0424 <span style="font-weight:bold">flex-wrap</span> <span style="color:#3daee9">:</span> <span style="color:#f67400">wrap</span><span style="color:#3f8058">;</span> 0425 } 0426 0427 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">screen</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">orientation</span><span style="color:#3daee9">:</span> landscape<span style="color:#8e44ad">)</span> { 0428 <span style="color:#8e44ad">.sidebar</span> { 0429 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">500</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> } } 0430 0431 0432 0433 <span style="color:#7a7c7d">/* Special selectors: HTML5 allows user defined tags */</span> 0434 0435 header { 0436 flex { 0437 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0438 } 0439 } 0440 0441 <span style="color:#7a7c7d">/* CSS Nesting */</span> 0442 0443 header { 0444 <span style="color:#8e44ad">.abc</span> { 0445 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0446 } 0447 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0448 <span style="color:#3f8058">&</span> width<span style="color:#c45b00;font-style:italic">:hover</span> { 0449 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0450 } 0451 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0452 } 0453 0454 0455 <span style="color:#7a7c7d">/**</span> 0456 <span style="color:#7a7c7d"> * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html</span> 0457 <span style="color:#7a7c7d"> */</span> 0458 <span style="color:#7a7c7d">// These comments are only one line long each.</span> 0459 <span style="color:#7a7c7d">// They won't appear in the CSS output,</span> 0460 <span style="color:#7a7c7d">// since they use the single-line comment syntax.</span> 0461 0462 <span style="color:#27ae60;font-weight:bold">#sidebar</span> { <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">grid-width(</span><span style="color:#f67400">5</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> } 0463 0464 <span style="color:#27ae60;font-weight:bold">#main</span> { 0465 <span style="font-weight:bold">content</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$content</span><span style="color:#3f8058">;</span> 0466 new-content<span style="color:#3daee9">:</span> <span style="color:#27aeae">$new_content</span><span style="color:#3f8058">;</span> 0467 } 0468 0469 <span style="color:#27ae60;font-weight:bold">#main</span> { 0470 <span style="color:#27aeae">$width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">5</span><span style="color:#2980b9">em</span> <span style="color:#2980b9">!global</span><span style="color:#3f8058">;</span> 0471 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$width</span><span style="color:#3f8058">;</span> 0472 } 0473 0474 <span style="color:#27ae60;font-weight:bold">#main</span> { 0475 <span style="color:#27ae60">@import</span> <span style="color:#f44f4f">"example"</span><span style="color:#3f8058">;</span> 0476 } 0477 0478 <span style="color:#27ae60;font-weight:bold">#main</span> { 0479 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">black</span><span style="color:#3f8058">;</span> 0480 <span style="color:#3f8058">&</span>-sidebar { <span style="font-weight:bold">border</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span> <span style="color:#f67400">solid</span><span style="color:#3f8058">;</span> } 0481 } 0482 0483 <span style="color:#27ae60;font-weight:bold">#main</span> p { 0484 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#00ff00</span><span style="color:#3f8058">;</span> 0485 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">97</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 0486 0487 <span style="color:#8e44ad">.redbox</span> { 0488 <span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#ff0000</span><span style="color:#3f8058">;</span> 0489 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#000000</span><span style="color:#3f8058">;</span> 0490 } 0491 } 0492 0493 <span style="color:#27ae60;font-weight:bold">#main</span> { 0494 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">black</span><span style="color:#3f8058">;</span> 0495 a { 0496 <span style="font-weight:bold">font-weight</span><span style="color:#3daee9">:</span> <span style="color:#f67400">bold</span><span style="color:#3f8058">;</span> 0497 <span style="color:#3f8058">&</span><span style="color:#c45b00;font-style:italic">:hover</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span> } 0498 } 0499 } 0500 0501 <span style="color:#8e44ad">.sidebar</span> { 0502 <span style="font-weight:bold">float</span><span style="color:#3daee9">:</span> <span style="color:#f67400">left</span><span style="color:#3f8058">;</span> 0503 <span style="font-weight:bold">margin-left</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">pow(</span><span style="color:#f67400">4</span><span style="color:#3f8058">,</span> <span style="color:#f67400">3</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">*</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0504 } 0505 0506 <span style="color:#8e44ad">.banner</span> { 0507 <span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$primary-color</span><span style="color:#3f8058">;</span> 0508 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">scale-color(</span><span style="color:#27aeae">$primary-color</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$lightness</span>: <span style="color:#3f8058">+</span><span style="color:#f67400">40</span><span style="color:#2980b9">%</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0509 } 0510 0511 <span style="color:#8e44ad">.micro</span> { 0512 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">sum(</span><span style="color:#f67400">50</span><span style="color:#2980b9">px</span><span style="color:#3f8058">,</span> <span style="color:#f67400">30</span><span style="color:#2980b9">px</span><span style="color:#3f8058">,</span> <span style="color:#f67400">100</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0513 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">min(</span><span style="color:#27aeae">$widths</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0514 } 0515 0516 a<span style="color:#8e44ad">.funky</span><span style="color:#c45b00;font-style:italic">:hover</span> { 0517 <span style="font-weight:bold">font</span><span style="color:#3daee9">:</span> <span style="color:#f67400">20</span><span style="color:#2980b9">px</span><span style="color:#3f8058">/</span><span style="color:#f67400">24</span><span style="color:#2980b9">px</span> <span style="color:#f67400">fantasy</span> { 0518 <span style="font-weight:bold">weight</span><span style="color:#3daee9">:</span> <span style="color:#f67400">bold</span><span style="color:#3f8058">;</span> 0519 } 0520 } 0521 0522 <span style="color:#8e44ad">.foo.bar</span> <span style="color:#8e44ad">.baz.bang</span><span style="color:#3f8058">,</span> <span style="color:#8e44ad">.bip.qux</span> { 0523 <span style="color:#27aeae">$selector</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">&</span><span style="color:#3f8058">;</span> 0524 } 0525 0526 ul<span style="color:#3f8058">,</span> ol { 0527 <span style="font-weight:bold">text-align</span><span style="color:#3daee9">:</span> <span style="color:#f67400">left</span><span style="color:#3f8058">;</span> 0528 0529 <span style="color:#3f8058">&</span> <span style="color:#3f8058">&</span> { 0530 <span style="font-weight:bold">padding</span><span style="color:#3daee9">:</span> { 0531 <span style="font-weight:bold">bottom</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#3f8058">;</span> 0532 <span style="font-weight:bold">left</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#3f8058">;</span> 0533 } 0534 } 0535 0536 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">scale-below(</span><span style="color:#f67400">20</span><span style="color:#2980b9">px</span><span style="color:#3f8058">,</span> <span style="color:#f67400">16</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0537 <span style="font-weight:bold">border-radius</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$border-radius</span><span style="color:#3f8058">;</span> 0538 <span style="font-weight:bold">box-shadow</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$box-shadow</span><span style="color:#3f8058">;</span> 0539 } 0540 0541 ul li { 0542 <span style="color:#27aeae">$padding</span><span style="color:#3daee9">:</span> <span style="color:#f67400">16</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0543 <span style="font-weight:bold">padding-left</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$padding</span><span style="color:#3f8058">;</span> 0544 <span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">dir</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">rtl</span><span style="color:#0099ff;font-weight:bold">]</span> <span style="color:#3f8058">&</span> { 0545 <span style="font-weight:bold">padding</span><span style="color:#3daee9">:</span> { 0546 <span style="font-weight:bold">left</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#3f8058">;</span> 0547 <span style="font-weight:bold">right</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$padding</span><span style="color:#3f8058">;</span> 0548 } 0549 } 0550 } 0551 0552 div { 0553 <span style="font-weight:bold">background-image</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"/icons/</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span><span style="color:#f44f4f">.svg"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0554 <span style="font-weight:bold">font</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">#{</span><span style="color:#f44f4f">"string"</span><span style="color:#3f8058">}</span><span style="color:#3f8058">;</span> 0555 } 0556 0557 p { 0558 <span style="font-weight:bold">font</span><span style="color:#3daee9">:</span> <span style="color:#f67400">10</span><span style="color:#2980b9">px</span><span style="color:#3f8058">/</span><span style="color:#f67400">8</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// Plain CSS, no division</span> 0559 <span style="color:#27aeae">$width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1000</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0560 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$width</span><span style="color:#3f8058">/</span><span style="color:#f67400">2</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// Uses a variable, does division</span> 0561 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">round(</span><span style="color:#f67400">1.5</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">/</span><span style="color:#f67400">2</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// Uses a function, does division</span> 0562 <span style="font-weight:bold">height</span><span style="color:#3daee9">:</span> (<span style="color:#f67400">500</span><span style="color:#2980b9">px</span><span style="color:#3f8058">/</span><span style="color:#f67400">2</span>)<span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// Uses parentheses, does division</span> 0563 <span style="font-weight:bold">margin-left</span><span style="color:#3daee9">:</span> <span style="color:#f67400">5</span><span style="color:#2980b9">px</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">8</span><span style="color:#2980b9">px</span><span style="color:#3f8058">/</span><span style="color:#f67400">2</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// Uses +, does division</span> 0564 <span style="font-weight:bold">font</span><span style="color:#3daee9">:</span> (<span style="color:#f67400">italic</span> <span style="color:#f67400">bold</span> <span style="color:#f67400">10</span><span style="color:#2980b9">px</span><span style="color:#3f8058">/</span><span style="color:#f67400">8</span><span style="color:#2980b9">px</span>)<span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// In a list, parentheses don't count</span> 0565 } 0566 0567 p { 0568 <span style="color:#27aeae">$font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">12</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0569 <span style="color:#27aeae">$line-height</span><span style="color:#3daee9">:</span> <span style="color:#f67400">30</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0570 <span style="font-weight:bold">font</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">#{</span><span style="color:#27aeae">$font-size</span><span style="color:#3f8058">}</span><span style="color:#3f8058">/</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$line-height</span><span style="color:#3f8058">}</span><span style="color:#3f8058">;</span> 0571 } 0572 0573 p { 0574 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#010203</span> <span style="color:#3f8058">+</span> <span style="color:#27aeae;font-weight:bold">#040506</span><span style="color:#3f8058">;</span> 0575 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">rgba(</span><span style="color:#f67400">255</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0.75</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">+</span> <span style="color:#8e44ad">rgba(</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">255</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0.75</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0576 } 0577 0578 p { 0579 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">opacify(</span><span style="color:#27aeae">$translucent-red</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0.3</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0580 <span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">transparentize(</span><span style="color:#27aeae">$translucent-red</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0.25</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0581 } 0582 0583 div { 0584 <span style="font-weight:bold">filter</span><span style="color:#3daee9">:</span> progid:DXImageTransform.Microsoft.<span style="color:#8e44ad">gradient(</span>enabled<span style="color:#3f8058">=</span><span style="color:#f44f4f">'false'</span><span style="color:#3f8058">,</span> startColorstr<span style="color:#3f8058">=</span><span style="color:#f44f4f">'</span><span style="color:#3f8058">#{</span><span style="color:#8e44ad">ie-hex-str(</span><span style="color:#27aeae">$green</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">}</span><span style="color:#f44f4f">'</span><span style="color:#3f8058">,</span> endColorstr<span style="color:#3f8058">=</span><span style="color:#f44f4f">'</span><span style="color:#3f8058">#{</span><span style="color:#8e44ad">ie-hex-str(</span><span style="color:#27aeae">$translucent-red</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">}</span><span style="color:#f44f4f">'</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0585 } 0586 0587 p { 0588 <span style="font-weight:bold">cursor</span><span style="color:#3daee9">:</span> e <span style="color:#3f8058">+</span> -resize<span style="color:#3f8058">;</span> 0589 } 0590 0591 p { 0592 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#2980b9">em</span> <span style="color:#3f8058">+</span> (<span style="color:#f67400">2</span><span style="color:#2980b9">em</span> <span style="color:#3f8058">*</span> <span style="color:#f67400">3</span>)<span style="color:#3f8058">;</span> 0593 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">#{</span><span style="color:#27aeae">$n</span><span style="color:#3f8058">}</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0594 } 0595 0596 p { 0597 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">hsl(</span><span style="color:#27aeae">$hue</span>: <span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$saturation</span>: <span style="color:#f67400">100</span><span style="color:#2980b9">%</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$lightness</span>: <span style="color:#f67400">50</span><span style="color:#2980b9">%</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0598 } 0599 0600 <span style="color:#c45b00;font-style:italic">:root</span> { 0601 <span style="color:#27aeae">--font-family-sans-serif</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">#{</span><span style="color:#8e44ad">inspect(</span><span style="color:#27aeae">$font-family-sans-serif</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">}</span><span style="color:#3f8058">;</span> 0602 <span style="color:#27aeae">--font-family-monospace</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">#{</span><span style="color:#8e44ad">inspect(</span><span style="color:#27aeae">$font-family-monospace</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">}</span><span style="color:#3f8058">;</span> 0603 } 0604 0605 p<span style="color:#c45b00;font-style:italic">:before</span> { 0606 <span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> sans- <span style="color:#3f8058">+</span> <span style="color:#f44f4f">"serif"</span><span style="color:#3f8058">;</span> 0607 <span style="font-weight:bold">content</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"Foo "</span> <span style="color:#3f8058">+</span> Bar<span style="color:#3f8058">;</span> 0608 <span style="font-weight:bold">content</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"I ate </span><span style="color:#3f8058">#{</span><span style="color:#f67400">5</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">10</span><span style="color:#3f8058">}</span><span style="color:#f44f4f"> pies!"</span><span style="color:#3f8058">;</span> 0609 <span style="font-weight:bold">content</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"I ate </span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$value</span><span style="color:#3f8058">}</span><span style="color:#f44f4f"> pies!"</span><span style="color:#3f8058">;</span> 0610 } 0611 0612 a { 0613 <span style="font-weight:bold">font-weight</span><span style="color:#3daee9">:</span> <span style="color:#f67400">bold</span><span style="color:#3f8058">;</span> 0614 <span style="font-weight:bold">text-decoration</span><span style="color:#3daee9">:</span> <span style="color:#f67400">none</span><span style="color:#3f8058">;</span> 0615 <span style="color:#3f8058">&</span><span style="color:#c45b00;font-style:italic">:hover</span> { <span style="font-weight:bold">text-decoration</span><span style="color:#3daee9">:</span> <span style="color:#f67400">underline</span><span style="color:#3f8058">;</span> } 0616 body<span style="color:#8e44ad">.firefox</span> <span style="color:#3f8058">&</span> { <span style="font-weight:bold">font-weight</span><span style="color:#3daee9">:</span> <span style="color:#f67400">normal</span><span style="color:#3f8058">;</span> } 0617 } 0618 0619 0620 <span style="color:#27ae60;font-weight:bold">#context</span> a<span style="color:#7f8c8d">%extreme</span> a <span style="color:#7f8c8d">%extreme</span> { 0621 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">blue</span><span style="color:#3f8058">;</span> 0622 <span style="font-weight:bold">font-weight</span><span style="color:#3daee9">:</span> <span style="color:#f67400">bold</span><span style="color:#3f8058">;</span> 0623 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">em</span><span style="color:#3f8058">;</span> 0624 } 0625 0626 <span style="color:#7f8c8d">%strong-alert</span><span style="color:#c45b00;font-style:italic">:hover</span> { 0627 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span> 0628 } 0629 <span style="color:#8e44ad">.alert</span><span style="color:#c45b00;font-style:italic">:hover</span><span style="color:#3f8058">,</span> <span style="color:#7f8c8d">%strong-alert</span> { 0630 <span style="font-weight:bold">font-weight</span><span style="color:#3daee9">:</span> <span style="color:#f67400">bold</span><span style="color:#3f8058">;</span> 0631 } 0632 0633 0634 p<span style="color:#8e44ad">.</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span> { 0635 <span style="color:#3f8058">#{</span><span style="color:#27aeae">$attr</span><span style="color:#3f8058">}</span>-color<span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">blue</span><span style="color:#3f8058">;</span> 0636 } 0637 0638 p { 0639 <span style="font-weight:bold">background</span><span style="color:#3daee9">:</span> { 0640 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span> 0641 } 0642 background-<span style="color:#3f8058">#{</span>prop<span style="color:#3f8058">}</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span> 0643 <span style="color:#3f8058">#{</span>prop<span style="color:#3f8058">}</span>-color<span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span> 0644 0645 <span style="color:#27ae60;font-weight:bold">#a</span><span style="color:#3f8058">#{</span><span style="color:#f44f4f">""</span><span style="color:#3f8058">}</span><span style="color:#27ae60;font-weight:bold">c</span> <span style="color:#8e44ad">.a</span><span style="color:#3f8058">#{</span><span style="color:#f44f4f">""</span><span style="color:#3f8058">}</span><span style="color:#8e44ad">c</span> a<span style="color:#3f8058">#{</span><span style="color:#f44f4f">""</span><span style="color:#3f8058">}</span>c { 0646 } 0647 } 0648 0649 <span style="color:#8e44ad">.icon-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span> { 0650 <span style="font-weight:bold">position</span><span style="color:#3daee9">:</span> <span style="color:#f67400">absolute</span><span style="color:#3f8058">;</span> 0651 <span style="color:#3f8058">#{</span><span style="color:#27aeae">$top-or-bottom</span><span style="color:#3f8058">}</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#3f8058">;</span> 0652 -<span style="color:#3f8058">#{</span><span style="color:#27aeae">$prefix</span><span style="color:#3f8058">}</span>-<span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$value</span><span style="color:#3f8058">;</span> 0653 <span style="color:#8e44ad">.icon-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span> { 0654 <span style="font-weight:bold">position</span><span style="color:#3daee9">:</span> <span style="color:#f67400">absolute</span><span style="color:#3f8058">;</span> 0655 <span style="color:#3f8058">#{</span><span style="color:#27aeae">$top-or-bottom</span><span style="color:#3f8058">}</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#3f8058">;</span> 0656 -<span style="color:#3f8058">#{</span><span style="color:#27aeae">$prefix</span><span style="color:#3f8058">}</span>-<span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span>-image<span style="color:#3daee9">:</span> <span style="color:#27aeae">$value</span> 0657 } 0658 } 0659 0660 0661 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">firefox-message(</span><span style="color:#27aeae">$selector</span><span style="color:#8e44ad">)</span> { 0662 body<span style="color:#8e44ad">.firefox</span> <span style="color:#3f8058">#{</span><span style="color:#27aeae">$selector</span><span style="color:#3f8058">}</span><span style="color:#c45b00;font-style:italic">:before</span> { 0663 <span style="font-weight:bold">content</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"Hi, Firefox users!"</span><span style="color:#3f8058">;</span> 0664 } 0665 } 0666 0667 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">clearfix</span> { 0668 <span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">inline-block</span><span style="color:#3f8058">;</span> 0669 <span style="color:#3f8058">&</span><span style="color:#c45b00;font-style:italic">:after</span> { 0670 <span style="font-weight:bold">content</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"."</span><span style="color:#3f8058">;</span> 0671 <span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">block</span><span style="color:#3f8058">;</span> 0672 } 0673 <span style="color:#3f8058">*</span> html <span style="color:#3f8058">&</span> { <span style="font-weight:bold">height</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span> } 0674 } 0675 0676 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">apply-to-ie6-only</span> { 0677 <span style="color:#3f8058">*</span> html { 0678 <span style="color:#27ae60">@content</span><span style="color:#3f8058">;</span> 0679 } 0680 } 0681 0682 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">highlighted-background</span> { <span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#fc0</span><span style="color:#3f8058">;</span> } 0683 0684 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">sexy-border(</span><span style="color:#27aeae">$color</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$width</span><span style="color:#8e44ad">)</span> { 0685 <span style="font-weight:bold">border</span><span style="color:#3daee9">:</span> { 0686 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$color</span><span style="color:#3f8058">;</span> 0687 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$width</span><span style="color:#3f8058">;</span> 0688 <span style="font-weight:bold">style</span><span style="color:#3daee9">:</span> <span style="color:#f67400">dashed</span><span style="color:#3f8058">;</span> 0689 } 0690 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#ff0000</span><span style="color:#3f8058">;</span> 0691 } 0692 0693 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">border-radius(</span><span style="color:#27aeae">$radius</span><span style="color:#8e44ad">)</span> { 0694 <span style="font-weight:bold;font-style:italic">-webkit-border-radius</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$radius</span><span style="color:#3f8058">;</span> 0695 <span style="font-weight:bold;font-style:italic">-moz-border-radius</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$radius</span><span style="color:#3f8058">;</span> 0696 <span style="font-weight:bold;font-style:italic">-ms-border-radius</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$radius</span><span style="color:#3f8058">;</span> 0697 <span style="font-weight:bold">border-radius</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$radius</span><span style="color:#3f8058">;</span> 0698 } 0699 0700 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">define-emoji(</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$glyph</span><span style="color:#8e44ad">)</span> { 0701 span<span style="color:#8e44ad">.emoji-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span> { 0702 <span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> IconFont<span style="color:#3f8058">;</span> 0703 } 0704 } 0705 0706 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">styles</span> { 0707 code { 0708 <span style="font-weight:bold">border-radius</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$-border-radius</span><span style="color:#3f8058">;</span> 0709 <span style="font-weight:bold">box-shadow</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">-box-shadow()</span><span style="color:#3f8058">;</span> 0710 } 0711 } 0712 0713 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">rtl(</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$ltr-value</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$rtl-value</span><span style="color:#8e44ad">)</span> { 0714 <span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$ltr-value</span><span style="color:#3f8058">;</span> 0715 0716 <span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">dir</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">rtl</span><span style="color:#0099ff;font-weight:bold">]</span> <span style="color:#3f8058">&</span> { 0717 <span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$rtl-value</span><span style="color:#3f8058">;</span> 0718 } 0719 } 0720 0721 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">replace-text(</span><span style="color:#27aeae">$image</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$x</span><span style="color:#3daee9">:</span> <span style="color:#f67400">50</span><span style="color:#2980b9">%</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$y</span><span style="color:#3daee9">:</span> <span style="color:#f67400">50</span><span style="color:#2980b9">%</span><span style="color:#8e44ad">)</span> { 0722 <span style="font-weight:bold">text-indent</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">-</span><span style="color:#f67400">99999</span><span style="color:#2980b9">em</span><span style="color:#3f8058">;</span> 0723 <span style="font-weight:bold">overflow</span><span style="color:#3daee9">:</span> <span style="color:#f67400">hidden</span><span style="color:#3f8058">;</span> 0724 <span style="font-weight:bold">text-align</span><span style="color:#3daee9">:</span> <span style="color:#f67400">left</span><span style="color:#3f8058">;</span> 0725 0726 <span style="font-weight:bold">background</span><span style="color:#3daee9">:</span> { 0727 <span style="font-weight:bold">image</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$image</span><span style="color:#3f8058">;</span> 0728 <span style="font-weight:bold">repeat</span><span style="color:#3daee9">:</span> <span style="color:#f67400">no-repeat</span><span style="color:#3f8058">;</span> 0729 <span style="font-weight:bold">position</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$x</span> <span style="color:#27aeae">$y</span><span style="color:#3f8058">;</span> 0730 } 0731 } 0732 0733 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">btn(</span><span style="color:#27aeae">$args</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span> { 0734 <span style="color:#27ae60">@warn</span> <span style="color:#f44f4f">"The btn() mixin is deprecated. Include button() instead."</span><span style="color:#3f8058">;</span> 0735 <span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"http://fonts.googleapis.com/css?family=</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$family</span><span style="color:#3f8058">}</span><span style="color:#f44f4f">"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0736 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">button(</span><span style="color:#27aeae">$args</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0737 } 0738 0739 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">hover</span> { 0740 <span style="color:#3f8058">&</span><span style="color:#c45b00;font-style:italic">:not(</span><span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">disabled</span><span style="color:#0099ff;font-weight:bold">]</span><span style="color:#c45b00;font-style:italic">):hover</span> { 0741 <span style="color:#27ae60">@content</span><span style="color:#3f8058">;</span> 0742 } 0743 } 0744 0745 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">adjust-location(</span><span style="color:#27aeae">$x</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$y</span><span style="color:#8e44ad">)</span> { 0746 <span style="color:#27ae60">@if</span> <span style="color:#8e44ad">unitless(</span><span style="color:#27aeae">$x</span><span style="color:#8e44ad">)</span> { 0747 <span style="color:#27ae60">@error</span> <span style="color:#f44f4f">"$x may not be unitless, was </span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$x</span><span style="color:#3f8058">}</span><span style="color:#f44f4f">."</span><span style="color:#3f8058">;</span> 0748 <span style="color:#27ae60">@warn</span> <span style="color:#f44f4f">"Assuming </span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$x</span><span style="color:#3f8058">}</span><span style="color:#f44f4f"> to be in pixels"</span><span style="color:#3f8058">;</span> 0749 <span style="color:#27aeae">$x</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span> <span style="color:#3f8058">*</span> <span style="color:#27aeae">$x</span><span style="color:#3f8058">;</span> 0750 } 0751 <span style="color:#27ae60">@if</span> <span style="color:#8e44ad">unitless(</span><span style="color:#27aeae">$y</span><span style="color:#8e44ad">)</span> { 0752 <span style="color:#27ae60">@error</span> <span style="color:#f44f4f">"$y may not be unitless, was </span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$y</span><span style="color:#3f8058">}</span><span style="color:#f44f4f">."</span><span style="color:#3f8058">;</span> 0753 <span style="color:#27ae60">@warn</span> <span style="color:#f44f4f">"Assuming </span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$y</span><span style="color:#3f8058">}</span><span style="color:#f44f4f"> to be in pixels"</span><span style="color:#3f8058">;</span> 0754 <span style="color:#27aeae">$y</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span> <span style="color:#3f8058">*</span> <span style="color:#27aeae">$y</span><span style="color:#3f8058">;</span> 0755 } 0756 <span style="font-weight:bold">position</span><span style="color:#3daee9">:</span> <span style="color:#f67400">relative</span><span style="color:#3f8058">;</span> <span style="font-weight:bold">left</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$x</span><span style="color:#3f8058">;</span> <span style="font-weight:bold">top</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$y</span><span style="color:#3f8058">;</span> 0757 } 0758 0759 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">avatar(</span><span style="color:#27aeae">$size</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$circle</span><span style="color:#3daee9">:</span> <span style="color:#7f8c8d">false</span><span style="color:#8e44ad">)</span> { 0760 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$size</span><span style="color:#3f8058">;</span> 0761 <span style="font-weight:bold">height</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$size</span><span style="color:#3f8058">;</span> 0762 0763 <span style="color:#27ae60">@if</span> <span style="color:#27aeae">$circle</span> <span style="color:#3f8058">!=</span> <span style="color:#f67400">0</span> { 0764 <span style="font-weight:bold">border-radius</span><span style="color:#3daee9">:</span> math.<span style="color:#8e44ad">div(</span><span style="color:#27aeae">$size</span><span style="color:#3f8058">,</span> <span style="color:#f67400">2</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0765 } 0766 } 0767 0768 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">theme-colors(</span><span style="color:#27aeae">$light-theme</span><span style="color:#3daee9">:</span> <span style="color:#7f8c8d">true</span><span style="color:#8e44ad">)</span> { 0769 <span style="color:#27ae60">@if</span> <span style="color:#27aeae">$light-theme</span> { 0770 <span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$light-background</span><span style="color:#3f8058">;</span> 0771 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$light-text</span><span style="color:#3f8058">;</span> 0772 } <span style="color:#27ae60">@else</span> { 0773 <span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$dark-background</span><span style="color:#3f8058">;</span> 0774 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$dark-text</span><span style="color:#3f8058">;</span> 0775 } 0776 } 0777 0778 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">configure(</span><span style="color:#27aeae">$black</span><span style="color:#3daee9">:</span> <span style="color:#7f8c8d">null</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$border-radius</span><span style="color:#3daee9">:</span> <span style="color:#7f8c8d">null</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$box-shadow</span><span style="color:#3daee9">:</span> <span style="color:#7f8c8d">null</span><span style="color:#8e44ad">)</span> { 0779 <span style="color:#27ae60">@if</span> <span style="color:#27aeae">$black</span> { 0780 <span style="color:#27aeae">$-black</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$black</span> <span style="color:#2980b9">!global</span><span style="color:#3f8058">;</span> 0781 } 0782 <span style="color:#27ae60">@if</span> <span style="color:#27aeae">$border-radius</span> { 0783 <span style="color:#27aeae">$-border-radius</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$border-radius</span> <span style="color:#2980b9">!global</span><span style="color:#3f8058">;</span> 0784 } 0785 } 0786 0787 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">does-parent-exist</span> { 0788 <span style="color:#27ae60">@if</span> <span style="color:#7f8c8d">&</span> { 0789 <span style="color:#3f8058">&</span><span style="color:#c45b00;font-style:italic">:hover</span> { 0790 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span> 0791 } 0792 } <span style="color:#27ae60">@else</span> { 0793 a { 0794 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span> 0795 } 0796 } 0797 } 0798 0799 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">order(</span><span style="color:#27aeae">$height</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$selectors</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span> { 0800 <span style="color:#27ae60">@for</span> <span style="color:#27aeae">$i</span> <span style="font-weight:bold">from</span> <span style="color:#f67400">0</span> <span style="font-weight:bold">to</span> <span style="color:#8e44ad">length(</span><span style="color:#27aeae">$selectors</span><span style="color:#8e44ad">)</span> { 0801 <span style="color:#3f8058">#{</span><span style="color:#8e44ad">nth(</span><span style="color:#27aeae">$selectors</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$i</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">1</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">}</span> { 0802 <span style="font-weight:bold">position</span><span style="color:#3daee9">:</span> <span style="color:#f67400">absolute</span><span style="color:#3f8058">;</span> 0803 <span style="font-weight:bold">height</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$height</span><span style="color:#3f8058">;</span> 0804 <span style="font-weight:bold">margin-top</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$i</span> <span style="color:#3f8058">*</span> <span style="color:#27aeae">$height</span><span style="color:#3f8058">;</span> 0805 } 0806 } 0807 } 0808 0809 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">syntax-colors(</span><span style="color:#27aeae">$args</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span> { 0810 <span style="color:#27ae60">@debug</span> meta.<span style="color:#8e44ad">keywords(</span><span style="color:#27aeae">$args</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0811 <span style="color:#7a7c7d">// (string: #080, comment: #800, variable: #60b)</span> 0812 0813 <span style="color:#27ae60">@each</span> <span style="color:#27aeae">$name</span>, <span style="color:#27aeae">$color</span> <span style="font-weight:bold">in</span> meta.<span style="color:#8e44ad">keywords(</span><span style="color:#27aeae">$args</span><span style="color:#8e44ad">)</span> { 0814 pre span<span style="color:#8e44ad">.stx-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span> { 0815 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$color</span><span style="color:#3f8058">;</span> 0816 } 0817 } 0818 } 0819 0820 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">media(</span><span style="color:#27aeae">$types</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span> { 0821 <span style="color:#27ae60">@each</span> <span style="color:#27aeae">$type</span> <span style="font-weight:bold">in</span> <span style="color:#27aeae">$types</span> { 0822 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">#{</span><span style="color:#27aeae">$type</span><span style="color:#3f8058">}</span> { 0823 <span style="color:#27ae60">@content</span>(<span style="color:#27aeae">$type</span>)<span style="color:#3f8058">;</span> 0824 } 0825 } 0826 } 0827 0828 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">reflexive-position(</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$value</span><span style="color:#8e44ad">)</span> { 0829 <span style="color:#27ae60">@if</span> <span style="color:#27aeae">$property</span> <span style="color:#3f8058">!=</span> left <span style="color:#3f8058">and</span> <span style="color:#27aeae">$property</span> <span style="color:#3f8058">!=</span> right { 0830 <span style="color:#27ae60">@error</span> <span style="color:#f44f4f">"Property </span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span><span style="color:#f44f4f"> must be either left or right."</span><span style="color:#3f8058">;</span> 0831 } 0832 0833 <span style="color:#27aeae">$left-value</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">if(</span><span style="color:#27aeae">$property</span> <span style="color:#3f8058">==</span> <span style="color:#f67400">right</span><span style="color:#3f8058">,</span> <span style="color:#7f8c8d">initial</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$value</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0834 <span style="color:#27aeae">$right-value</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">if(</span><span style="color:#27aeae">$property</span> <span style="color:#3f8058">==</span> <span style="color:#f67400">right</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$value</span><span style="color:#3f8058">,</span> <span style="color:#7f8c8d">initial</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0835 0836 <span style="font-weight:bold">left</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$left-value</span><span style="color:#3f8058">;</span> 0837 <span style="font-weight:bold">right</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$right-value</span><span style="color:#3f8058">;</span> 0838 <span style="color:#0099ff;font-weight:bold">[</span><span style="color:#da4453">dir</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">rtl</span><span style="color:#0099ff;font-weight:bold">]</span> <span style="color:#3f8058">&</span> { 0839 <span style="font-weight:bold">left</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$right-value</span><span style="color:#3f8058">;</span> 0840 <span style="font-weight:bold">right</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$left-value</span><span style="color:#3f8058">;</span> 0841 } 0842 } 0843 0844 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">prefix(</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$value</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$prefixes</span><span style="color:#8e44ad">)</span> { 0845 <span style="color:#27ae60">@each</span> <span style="color:#27aeae">$prefix</span> <span style="font-weight:bold">in</span> <span style="color:#27aeae">$prefixes</span> { 0846 <span style="color:#27ae60">@if</span> <span style="color:#3f8058">not</span> <span style="color:#8e44ad">index(</span><span style="color:#27aeae">$known-prefixes</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$prefix</span><span style="color:#8e44ad">)</span> { 0847 <span style="color:#27ae60">@warn</span> <span style="color:#f44f4f">"Unknown prefix </span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$prefix</span><span style="color:#3f8058">}</span><span style="color:#f44f4f">."</span><span style="color:#3f8058">;</span> 0848 } 0849 0850 -<span style="color:#3f8058">#{</span><span style="color:#27aeae">$prefix</span><span style="color:#3f8058">}</span>-<span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$value</span><span style="color:#3f8058">;</span> 0851 } 0852 <span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$value</span><span style="color:#3f8058">;</span> 0853 } 0854 0855 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">inset-divider-offset(</span><span style="color:#27aeae">$offset</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$padding</span><span style="color:#8e44ad">)</span> { 0856 <span style="color:#27aeae">$divider-offset</span><span style="color:#3daee9">:</span> (<span style="color:#f67400">2</span> <span style="color:#3f8058">*</span> <span style="color:#27aeae">$padding</span>) <span style="color:#3f8058">+</span> <span style="color:#27aeae">$offset</span><span style="color:#3f8058">;</span> 0857 <span style="color:#27ae60">@debug</span> <span style="color:#f44f4f">"divider offset: </span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$divider-offset</span><span style="color:#3f8058">}</span><span style="color:#f44f4f">"</span><span style="color:#3f8058">;</span> 0858 0859 <span style="font-weight:bold">margin-left</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$divider-offset</span><span style="color:#3f8058">;</span> 0860 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">calc(</span><span style="color:#f67400">100</span><span style="color:#2980b9">%</span> <span style="color:#3f8058">-</span> <span style="color:#3f8058">#{</span><span style="color:#27aeae">$divider-offset</span><span style="color:#3f8058">}</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0861 } 0862 0863 0864 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">sticky-position</span> { 0865 <span style="font-weight:bold">position</span><span style="color:#3daee9">:</span> <span style="color:#f67400">fixed</span><span style="color:#3f8058">;</span> 0866 <span style="color:#27ae60">@supports</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">position</span><span style="color:#3daee9">:</span> <span style="color:#f67400">sticky</span><span style="color:#8e44ad">)</span> { 0867 <span style="font-weight:bold">position</span><span style="color:#3daee9">:</span> <span style="color:#f67400">sticky</span><span style="color:#3f8058">;</span> 0868 } 0869 } 0870 0871 0872 <span style="color:#27ae60">@at-root</span> <span style="color:#8e44ad">(</span>without<span style="color:#3daee9">:</span> media<span style="color:#8e44ad">)</span><span style="color:#27ae60"> {</span> 0873 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#111</span><span style="color:#3f8058">;</span> 0874 } 0875 <span style="color:#27ae60">@at-root</span> <span style="color:#8e44ad">(</span>with<span style="color:#3daee9">:</span> rule<span style="color:#8e44ad">)</span><span style="color:#27ae60"> {</span> 0876 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1.2</span><span style="color:#2980b9">em</span><span style="color:#3f8058">;</span> 0877 } 0878 0879 <span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">unify-parent(</span><span style="color:#27aeae">$child</span><span style="color:#8e44ad">)</span> { 0880 <span style="color:#27ae60">@at-root</span> #{selector<span style="color:#8e44ad">.unify</span><span style="color:#c45b00;font-style:italic">(</span><span style="color:#3f8058">&</span><span style="color:#3f8058">,</span> <span style="color:#da4453;text-decoration:underline">$</span>child<span style="color:#c45b00;font-style:italic">)</span>} { 0881 <span style="color:#27ae60">@content</span><span style="color:#3f8058">;</span> 0882 } 0883 <span style="color:#27ae60">@at-root</span> #{selector-unify<span style="color:#c45b00;font-style:italic">(</span><span style="color:#3f8058">&</span><span style="color:#3f8058">,</span> <span style="color:#da4453;text-decoration:underline">$</span>child<span style="color:#c45b00;font-style:italic">)</span>} { 0884 <span style="color:#27ae60">@content</span><span style="color:#3f8058">;</span> 0885 } 0886 } 0887 0888 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">print</span> { 0889 <span style="color:#8e44ad">.page</span> { 0890 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">8</span><span style="color:#2980b9">in</span><span style="color:#3f8058">;</span> 0891 <span style="color:#27ae60">@at-root</span> <span style="color:#8e44ad">(</span>without<span style="color:#3daee9">:</span> media<span style="color:#8e44ad">)</span><span style="color:#27ae60"> {</span> 0892 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span> 0893 } 0894 } 0895 } 0896 0897 <span style="color:#8e44ad">.sidebar</span> { 0898 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0899 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">screen</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">orientation</span><span style="color:#3daee9">:</span> landscape<span style="color:#8e44ad">)</span> { 0900 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">500</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0901 } 0902 } 0903 0904 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">screen</span> { 0905 <span style="color:#8e44ad">.sidebar</span> { 0906 <span style="color:#27ae60">@media</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">orientation</span><span style="color:#3daee9">:</span> landscape<span style="color:#8e44ad">)</span> { 0907 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">500</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0908 } 0909 } 0910 } 0911 0912 <span style="color:#27ae60">@media</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">min-width</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$layout-breakpoint-small</span><span style="color:#8e44ad">)</span> { 0913 <span style="color:#8e44ad">.hide-extra-small</span> { 0914 <span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">none</span><span style="color:#3f8058">;</span> 0915 } 0916 } 0917 0918 <span style="color:#27ae60">@media</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">hover</span><span style="color:#3daee9">:</span> <span style="font-weight:bold">hover</span><span style="color:#8e44ad">)</span> { 0919 <span style="color:#8e44ad">.button</span><span style="color:#c45b00;font-style:italic">:hover</span> { 0920 <span style="font-weight:bold">border</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">px</span> <span style="color:#f67400">solid</span> <span style="color:#27aeae;font-weight:bold">black</span><span style="color:#3f8058">;</span> 0921 0922 <span style="color:#27ae60">@media</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">color</span><span style="color:#8e44ad">)</span> { 0923 <span style="font-weight:bold">border-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#036</span><span style="color:#3f8058">;</span> 0924 } 0925 } 0926 } 0927 0928 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">#{</span><span style="color:#27aeae">$media</span><span style="color:#3f8058">}</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="color:#27aeae">$feature</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$value</span><span style="color:#8e44ad">)</span> { 0929 <span style="color:#8e44ad">.sidebar</span> { 0930 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">500</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0931 } 0932 } 0933 0934 0935 <span style="color:#27ae60">@extend</span> <span style="color:#8e44ad">.error</span><span style="color:#3f8058">;</span> 0936 0937 <span style="color:#8e44ad">.hoverlink</span> { 0938 <span style="color:#27ae60">@extend</span> a<span style="color:#c45b00;font-style:italic">:hover</span><span style="color:#3f8058">;</span> 0939 <span style="color:#27ae60">@extend</span> <span style="color:#7f8c8d">%extreme</span><span style="color:#3f8058">;</span> 0940 <span style="color:#27ae60">@extend</span> <span style="color:#8e44ad">.message</span><span style="color:#3f8058">;</span> 0941 <span style="color:#27ae60">@extend</span> <span style="color:#8e44ad">.notice</span> <span style="color:#2980b9">!optional</span><span style="color:#3f8058">;</span> 0942 <span style="font-weight:bold">border-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">3</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0943 } 0944 0945 <span style="color:#8e44ad">.error</span> { 0946 <span style="font-weight:bold">border</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span> <span style="color:#27aeae;font-weight:bold">#f00</span><span style="color:#3f8058">;</span> 0947 <span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#fdd</span><span style="color:#3f8058">;</span> 0948 0949 <span style="color:#3f8058">&</span>--serious { 0950 <span style="color:#27ae60">@extend</span> <span style="color:#8e44ad">.error</span><span style="color:#3f8058">;</span> 0951 <span style="font-weight:bold">border-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">3</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 0952 } 0953 } 0954 0955 0956 p { 0957 <span style="color:#27ae60">@if</span> <span style="color:#f67400">1</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">1</span> <span style="color:#3f8058">==</span> <span style="color:#f67400">2</span> { <span style="font-weight:bold">border</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#2980b9">px</span> <span style="color:#f67400">solid</span><span style="color:#3f8058">;</span> } 0958 <span style="color:#27ae60">@if</span> <span style="color:#f67400">5</span> <span style="color:#3f8058"><</span> <span style="color:#f67400">3</span> { <span style="font-weight:bold">border</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">px</span> <span style="color:#f67400">dotted</span><span style="color:#3f8058">;</span> } 0959 <span style="color:#27ae60">@if</span> <span style="color:#7f8c8d">null</span> { <span style="font-weight:bold">border</span><span style="color:#3daee9">:</span> <span style="color:#f67400">3</span><span style="color:#2980b9">px</span> <span style="color:#f67400">double</span><span style="color:#3f8058">;</span> } 0960 } 0961 0962 p { 0963 <span style="color:#27ae60">@if</span> <span style="color:#27aeae">$type</span> <span style="color:#3f8058">==</span> ocean { 0964 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">blue</span><span style="color:#3f8058">;</span> 0965 } <span style="color:#27ae60">@else</span> <span style="color:#27ae60">if</span> <span style="color:#27aeae">$type</span> <span style="color:#3f8058">==</span> matador { 0966 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span> 0967 } <span style="color:#27ae60">@else</span> <span style="color:#27ae60">if</span> <span style="color:#27aeae">$type</span> <span style="color:#3f8058">==</span> monster { 0968 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">green</span><span style="color:#3f8058">;</span> 0969 } <span style="color:#27ae60">@else</span> { 0970 <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">black</span><span style="color:#3f8058">;</span> 0971 } 0972 } 0973 0974 0975 <span style="color:#27ae60">@each</span> <span style="color:#27aeae">$animal</span> <span style="font-weight:bold">in</span> puma, sea-slug, egret, salamander { 0976 <span style="color:#8e44ad">.</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$animal</span><span style="color:#3f8058">}</span><span style="color:#8e44ad">-icon</span> { 0977 <span style="font-weight:bold">background-image</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">'/images/</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$animal</span><span style="color:#3f8058">}</span><span style="color:#f44f4f">.png'</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 0978 } 0979 } 0980 0981 <span style="color:#27ae60">@each</span> <span style="color:#27aeae">$name</span>, <span style="color:#27aeae">$glyph</span> <span style="font-weight:bold">in</span> <span style="color:#27aeae">$icons</span> { 0982 <span style="color:#8e44ad">.icon-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span><span style="color:#c45b00;font-style:italic">:before</span> { 0983 <span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">inline-block</span><span style="color:#3f8058">;</span> 0984 <span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"Icon Font"</span><span style="color:#3f8058">;</span> 0985 <span style="font-weight:bold">content</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$glyph</span><span style="color:#3f8058">;</span> 0986 } 0987 } 0988 0989 <span style="color:#27ae60">@each</span> <span style="color:#27aeae">$size</span> <span style="font-weight:bold">in</span> <span style="color:#27aeae">$sizes</span> { 0990 <span style="color:#8e44ad">.icon-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$size</span><span style="color:#3f8058">}</span> { 0991 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$size</span><span style="color:#3f8058">;</span> 0992 <span style="font-weight:bold">height</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$size</span><span style="color:#3f8058">;</span> 0993 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$size</span><span style="color:#3f8058">;</span> 0994 } 0995 } 0996 0997 <span style="color:#27ae60">@each</span> <span style="color:#27aeae">$animal</span>, <span style="color:#27aeae">$color</span>, <span style="color:#27aeae">$cursor</span> <span style="font-weight:bold">in</span> (puma, black, default), 0998 (sea-slug, blue, pointer), 0999 (egret, white, move) { 1000 <span style="color:#8e44ad">.</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$animal</span><span style="color:#3f8058">}</span><span style="color:#8e44ad">-icon</span> { 1001 <span style="font-weight:bold">background-image</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">'/images/</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$animal</span><span style="color:#3f8058">}</span><span style="color:#f44f4f">.png'</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1002 <span style="font-weight:bold">border</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">px</span> <span style="color:#f67400">solid</span> <span style="color:#27aeae">$color</span><span style="color:#3f8058">;</span> 1003 <span style="font-weight:bold">cursor</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$cursor</span><span style="color:#3f8058">;</span> 1004 } 1005 } 1006 1007 <span style="color:#27ae60">@each</span> <span style="color:#27aeae">$header</span>, <span style="color:#27aeae">$size</span> <span style="font-weight:bold">in</span> (h1: <span style="color:#f67400">2</span><span style="color:#2980b9">em</span>, h2: <span style="color:#f67400">1.5</span><span style="color:#2980b9">em</span>, h3: <span style="color:#f67400">1.2</span><span style="color:#2980b9">em</span>) { 1008 <span style="color:#3f8058">#{</span><span style="color:#27aeae">$header</span><span style="color:#3f8058">}</span> { 1009 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$size</span><span style="color:#3f8058">;</span> 1010 } 1011 } 1012 1013 1014 <span style="color:#27ae60">@for</span> <span style="color:#27aeae">$i</span> <span style="font-weight:bold">from</span> <span style="color:#f67400">1</span> <span style="font-weight:bold">through</span> <span style="color:#f67400">3</span> { 1015 <span style="color:#8e44ad">.item-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$i</span><span style="color:#3f8058">}</span> { <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">em</span> <span style="color:#3f8058">*</span> <span style="color:#27aeae">$i</span><span style="color:#3f8058">;</span> } 1016 } 1017 1018 <span style="color:#27ae60">@for</span> <span style="color:#27aeae">$i</span> <span style="font-weight:bold">from</span> <span style="color:#f67400">1</span> <span style="font-weight:bold">to</span> <span style="color:#f67400">3</span> { 1019 ul<span style="color:#c45b00;font-style:italic">:nth-child(</span><span style="color:#f67400">3</span><span style="color:#2980b9">n</span> <span style="color:#3f8058">+</span> <span style="color:#3f8058">#{</span><span style="color:#27aeae">$i</span><span style="color:#3f8058">}</span><span style="color:#c45b00;font-style:italic">)</span> { 1020 <span style="font-weight:bold">background-color</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">lighten(</span><span style="color:#27aeae">$base-color</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$i</span> <span style="color:#3f8058">*</span> <span style="color:#f67400">5</span><span style="color:#2980b9">%</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1021 } 1022 } 1023 1024 1025 <span style="color:#27ae60">@while</span> <span style="color:#27aeae">$i</span> <span style="color:#3f8058">></span> <span style="color:#f67400">0</span> { 1026 <span style="color:#8e44ad">.item-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$i</span><span style="color:#3f8058">}</span> { <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">em</span> <span style="color:#3f8058">*</span> <span style="color:#27aeae">$i</span><span style="color:#3f8058">;</span> } 1027 <span style="color:#27aeae">$i</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$i</span> <span style="color:#3f8058">-</span> <span style="color:#f67400">2</span><span style="color:#3f8058">;</span> 1028 } 1029 1030 1031 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">order(</span><span style="color:#f67400">150</span><span style="color:#2980b9">px</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$form-selectors</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1032 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">order(</span><span style="color:#f67400">150</span><span style="color:#2980b9">px</span><span style="color:#3f8058">,</span> <span style="color:#f44f4f">"input.name"</span><span style="color:#3f8058">,</span> <span style="color:#f44f4f">"input.address"</span><span style="color:#3f8058">,</span> <span style="color:#f44f4f">"input.zip"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1033 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">unify-parent(</span><span style="color:#f44f4f">"input"</span><span style="color:#8e44ad">)</span> { } 1034 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">google-font(</span><span style="color:#f44f4f">"Droid Sans"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1035 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">library.styles</span><span style="color:#3f8058">;</span> 1036 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">library.configure(</span> 1037 <span style="color:#27aeae">$black</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#222</span><span style="color:#3f8058">,</span> 1038 <span style="color:#27aeae">$border-radius</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0.1</span><span style="color:#2980b9">rem</span> 1039 <span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1040 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">firefox-message(</span><span style="color:#f44f4f">".header"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1041 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">apply-to-ie6-only</span> { 1042 <span style="color:#27ae60;font-weight:bold">#logo</span> { 1043 <span style="font-weight:bold">background-image</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">/logo.gif</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1044 } 1045 } 1046 1047 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">media(</span><span style="color:#f67400">screen</span><span style="color:#3f8058">,</span> print<span style="color:#8e44ad">)</span> <span style="font-weight:bold">using</span> <span style="color:#8e44ad">(</span><span style="color:#27aeae">$type</span><span style="color:#8e44ad">)</span> { 1048 h1 { 1049 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">40</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 1050 <span style="color:#27ae60">@if</span> <span style="color:#27aeae">$type</span> <span style="color:#3f8058">==</span> print { 1051 <span style="font-weight:bold">font-family</span><span style="color:#3daee9">:</span> Calluna<span style="color:#3f8058">;</span> 1052 } 1053 } 1054 } 1055 1056 p { <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">sexy-border(</span><span style="color:#27aeae;font-weight:bold">blue</span><span style="color:#3f8058">,</span> <span style="color:#f67400">1</span><span style="color:#2980b9">in</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> } 1057 h1 { <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">sexy-border(</span><span style="color:#27aeae">$color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">blue</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">in</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> } 1058 nav ul { 1059 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">corners.rounded</span><span style="color:#3f8058">;</span> 1060 <span style="font-weight:bold">padding</span><span style="color:#3daee9">:</span> <span style="color:#f67400">5</span><span style="color:#2980b9">px</span> <span style="color:#3f8058">+</span> corners.<span style="color:#27aeae">$radius</span><span style="color:#3f8058">;</span> 1061 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">horizontal-list</span><span style="color:#3f8058">;</span> 1062 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">rtl(</span>float<span style="color:#3f8058">,</span> <span style="color:#f67400">left</span><span style="color:#3f8058">,</span> <span style="color:#f67400">right</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1063 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">hover</span> { 1064 <span style="font-weight:bold">border-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 1065 } 1066 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">replace-text(url(</span><span style="color:#f44f4f">"/images/mail.svg"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1067 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">square(</span><span style="color:#f67400">100</span><span style="color:#2980b9">px</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$radius</span><span style="color:#3daee9">:</span> <span style="color:#f67400">4</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1068 <span style="color:#7a7c7d">// Oops, we typo'd "webkit" as "wekbit"!</span> 1069 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">prefix(</span>transform<span style="color:#3f8058">,</span> <span style="color:#8e44ad">rotate(</span><span style="color:#f67400">15</span><span style="color:#2980b9">deg</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">,</span> wekbit ms<span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1070 } 1071 1072 <span style="color:#8e44ad">.primary</span> { 1073 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">colors(</span><span style="color:#27aeae">$value-map</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1074 } 1075 <span style="color:#8e44ad">.box</span> { <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">border-radius(</span><span style="color:#f67400">10</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> } 1076 1077 <span style="color:#8e44ad">.wrapper</span> <span style="color:#8e44ad">.field</span> { 1078 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">unify-parent(</span><span style="color:#f44f4f">"input"</span><span style="color:#8e44ad">)</span> { 1079 <span style="color:#7a7c7d">/* ... */</span> 1080 } 1081 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">unify-parent(</span><span style="color:#f44f4f">"select"</span><span style="color:#8e44ad">)</span> { 1082 <span style="color:#7a7c7d">/* ... */</span> 1083 } 1084 } 1085 1086 <span style="color:#8e44ad">.banner</span> { 1087 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">theme-colors(</span><span style="color:#27aeae">$light-theme</span><span style="color:#3daee9">:</span> <span style="color:#7f8c8d">true</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1088 body<span style="color:#8e44ad">.dark</span> <span style="color:#3f8058">&</span> { 1089 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">theme-colors(</span><span style="color:#27aeae">$light-theme</span><span style="color:#3daee9">:</span> <span style="color:#7f8c8d">false</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1090 } 1091 } 1092 1093 1094 1095 <span style="color:#27ae60">@function</span> <span style="color:#8e44ad">grid-width(</span><span style="color:#27aeae">$n</span><span style="color:#8e44ad">)</span> { 1096 <span style="color:#27ae60">@return</span> <span style="color:#27aeae">$n</span> <span style="color:#3f8058">*</span> <span style="color:#27aeae">$grid-width</span> <span style="color:#3f8058">+</span> (<span style="color:#27aeae">$n</span> <span style="color:#3f8058">-</span> <span style="color:#f67400">1</span>) <span style="color:#3f8058">*</span> <span style="color:#27aeae">$gutter-width</span><span style="color:#3f8058">;</span> 1097 } 1098 1099 <span style="color:#27ae60">@function</span> <span style="color:#8e44ad">scale-below(</span><span style="color:#27aeae">$value</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$base</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$ratio</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1.618</span><span style="color:#8e44ad">)</span> { 1100 <span style="color:#27ae60">@while</span> <span style="color:#27aeae">$value</span> <span style="color:#3f8058">></span> <span style="color:#27aeae">$base</span> { 1101 <span style="color:#27aeae">$value</span><span style="color:#3daee9">:</span> math.<span style="color:#8e44ad">div(</span><span style="color:#27aeae">$value</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$ratio</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1102 } 1103 <span style="color:#27ae60">@return</span> <span style="color:#27aeae">$value</span><span style="color:#3f8058">;</span> 1104 } 1105 1106 <span style="color:#7a7c7d">/// If the user has configured `$-box-shadow`, returns their configured value.</span> 1107 <span style="color:#7a7c7d">/// Otherwise returns a value derived from `$-black`.</span> 1108 <span style="color:#27ae60">@function</span> <span style="color:#8e44ad">-box-shadow()</span> { 1109 <span style="color:#27ae60">@return</span> <span style="color:#27aeae">$-box-shadow</span> <span style="color:#3f8058">or</span> (<span style="color:#f67400">0</span> <span style="color:#f67400">0.5</span><span style="color:#2980b9">rem</span> <span style="color:#f67400">1</span><span style="color:#2980b9">rem</span> <span style="color:#8e44ad">rgba(</span><span style="color:#27aeae">$-black</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0.15</span><span style="color:#8e44ad">)</span>)<span style="color:#3f8058">;</span> 1110 } 1111 1112 <span style="color:#27ae60">@function</span> <span style="color:#8e44ad">pow(</span><span style="color:#27aeae">$base</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$exponent</span><span style="color:#8e44ad">)</span> { 1113 <span style="color:#27aeae">$result</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1</span><span style="color:#3f8058">;</span> 1114 <span style="color:#27ae60">@for</span> <span style="color:#27aeae">$_</span> <span style="font-weight:bold">from</span> <span style="color:#f67400">1</span> <span style="font-weight:bold">through</span> <span style="color:#27aeae">$exponent</span> { 1115 <span style="color:#27aeae">$result</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$result</span> <span style="color:#3f8058">*</span> <span style="color:#27aeae">$base</span><span style="color:#3f8058">;</span> 1116 } 1117 <span style="color:#27ae60">@return</span> <span style="color:#27aeae">$result</span><span style="color:#3f8058">;</span> 1118 } 1119 1120 <span style="color:#27ae60">@function</span> <span style="color:#8e44ad">invert(</span><span style="color:#27aeae">$color</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$amount</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span><span style="color:#8e44ad">)</span> { 1121 <span style="color:#27aeae">$inverse</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">change-color(</span><span style="color:#27aeae">$color</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$hue</span>: <span style="color:#8e44ad">hue(</span><span style="color:#27aeae">$color</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">180</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1122 <span style="color:#27ae60">@return</span> <span style="color:#8e44ad">mix(</span><span style="color:#27aeae">$inverse</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$color</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$amount</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1123 } 1124 1125 <span style="color:#27ae60">@function</span> <span style="color:#8e44ad">sum(</span><span style="color:#27aeae">$numbers</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span> { 1126 <span style="color:#27aeae">$sum</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span><span style="color:#3f8058">;</span> 1127 <span style="color:#27ae60">@each</span> <span style="color:#27aeae">$number</span> <span style="font-weight:bold">in</span> <span style="color:#27aeae">$numbers</span> { 1128 <span style="color:#27aeae">$sum</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$sum</span> <span style="color:#3f8058">+</span> <span style="color:#27aeae">$number</span><span style="color:#3f8058">;</span> 1129 } 1130 <span style="color:#27ae60">@return</span> <span style="color:#27aeae">$sum</span><span style="color:#3f8058">;</span> 1131 } 1132 1133 <span style="color:#27ae60">@function</span> <span style="color:#8e44ad">fg(</span><span style="color:#27aeae">$args</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span> { 1134 <span style="color:#27ae60">@warn</span> <span style="color:#f44f4f">"The fg() function is deprecated. Call foreground() instead."</span><span style="color:#3f8058">;</span> 1135 <span style="color:#27ae60">@return</span> <span style="color:#8e44ad">foreground(</span><span style="color:#27aeae">$args</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1136 } 1137 1138 <span style="color:#27ae60">@function</span> <span style="color:#8e44ad">str-insert(</span><span style="color:#27aeae">$string</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$insert</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$index</span><span style="color:#8e44ad">)</span> { 1139 <span style="color:#7a7c7d">// Avoid making new strings if we don't need to.</span> 1140 <span style="color:#27ae60">@if</span> string.<span style="color:#8e44ad">length(</span><span style="color:#27aeae">$string</span><span style="color:#8e44ad">)</span> <span style="color:#3f8058">==</span> <span style="color:#f67400">0</span> { 1141 <span style="color:#27ae60">@return</span> <span style="color:#27aeae">$insert</span><span style="color:#3f8058">;</span> 1142 } 1143 1144 <span style="color:#27aeae">$before</span><span style="color:#3daee9">:</span> string.<span style="color:#8e44ad">slice(</span><span style="color:#27aeae">$string</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$index</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1145 <span style="color:#27aeae">$after</span><span style="color:#3daee9">:</span> string.<span style="color:#8e44ad">slice(</span><span style="color:#27aeae">$string</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$index</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1146 <span style="color:#27ae60">@return</span> <span style="color:#27aeae">$before</span> <span style="color:#3f8058">+</span> <span style="color:#27aeae">$insert</span> <span style="color:#3f8058">+</span> <span style="color:#27aeae">$after</span><span style="color:#3f8058">;</span> 1147 } 1148 1149 1150 <span style="color:#7a7c7d">// Variable define</span> 1151 1152 <span style="color:#27aeae">$image-path</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"../../static/images"</span><span style="color:#3f8058">;</span> 1153 <span style="color:#27aeae">$-text-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#333</span> <span style="color:#2980b9">!default</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// Default can be overrided</span> 1154 <span style="color:#27aeae">$default-font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">16</span><span style="color:#2980b9">px</span> <span style="color:#2980b9">!default</span><span style="color:#3f8058">;</span> 1155 <span style="color:#27aeae">$default-font-family</span><span style="color:#3daee9">:</span> Roboto<span style="color:#3f8058">,</span> <span style="color:#f44f4f">"Droid Sans"</span><span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span><span style="color:#3f8058">;</span> 1156 <span style="color:#27aeae">$default-font-weight</span><span style="color:#3daee9">:</span> <span style="color:#f67400">400</span><span style="color:#3f8058">;</span> 1157 <span style="color:#27aeae">$default-line-height</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$default-font-size</span> <span style="color:#3f8058">*</span> <span style="color:#f67400">1.8</span><span style="color:#3f8058">;</span> 1158 <span style="color:#27aeae">$shadow-transparence</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0.25</span><span style="color:#3f8058">;</span> 1159 <span style="color:#27aeae">$box-shadow</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span> <span style="color:#f67400">0</span> <span style="color:#f67400">3</span><span style="color:#2980b9">px</span> <span style="color:#8e44ad">rgba(</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span><span style="color:#f67400">0</span><span style="color:#3f8058">,</span><span style="color:#27aeae">$shadow-transparence</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1160 <span style="color:#27aeae">$page-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">rem</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// kabab-case</span> 1161 <span style="color:#27aeae">$gapOfArticle</span><span style="color:#3daee9">:</span> <span style="color:#f67400">20</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// camelCase</span> 1162 <span style="color:#27aeae">$body_background_color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">white</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// snake_case</span> 1163 <span style="color:#27aeae">$-box-shadow</span><span style="color:#3daee9">:</span> <span style="color:#7f8c8d">null</span><span style="color:#3f8058">;</span> 1164 <span style="color:#27aeae">$sizes</span><span style="color:#3daee9">:</span> <span style="color:#f67400">40</span><span style="color:#2980b9">px</span><span style="color:#3f8058">,</span> <span style="color:#f67400">50</span><span style="color:#2980b9">px</span><span style="color:#3f8058">,</span> <span style="color:#f67400">80</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 1165 <span style="color:#27aeae">$icons</span><span style="color:#3daee9">:</span> (<span style="color:#f44f4f">"eye"</span>: <span style="color:#f44f4f">"</span><span style="color:#3daee9">\f112</span><span style="color:#f44f4f">"</span><span style="color:#3f8058">,</span> <span style="color:#f44f4f">"start"</span>: <span style="color:#f44f4f">"</span><span style="color:#3daee9">\f12e</span><span style="color:#f44f4f">"</span><span style="color:#3f8058">,</span> <span style="color:#f44f4f">"stop"</span>: <span style="color:#f44f4f">"</span><span style="color:#3daee9">\f12f</span><span style="color:#f44f4f">"</span>)<span style="color:#3f8058">;</span> 1166 <span style="color:#27aeae">$value-map</span><span style="color:#3daee9">:</span> (<span style="color:#f67400">text</span>: <span style="color:#27aeae;font-weight:bold">#00ff00</span><span style="color:#3f8058">,</span> background: <span style="color:#27aeae;font-weight:bold">#0000ff</span><span style="color:#3f8058">,</span> <span style="color:#f67400">border</span>: <span style="color:#27aeae;font-weight:bold">#ff0000</span>)<span style="color:#3f8058">;</span> 1167 <span style="color:#27aeae">$map</span><span style="color:#3daee9">:</span> (key1: value1<span style="color:#3f8058">,</span> key2: value2<span style="color:#3f8058">,</span> key3: value3)<span style="color:#3f8058">;</span> 1168 <span style="color:#27aeae">$icons</span><span style="color:#3daee9">:</span> 1169 <span style="color:#f44f4f">"eye"</span> <span style="color:#f44f4f">"</span><span style="color:#3daee9">\f112</span><span style="color:#f44f4f">"</span> <span style="color:#f67400">12</span><span style="color:#2980b9">px</span><span style="color:#3f8058">,</span> 1170 <span style="color:#f44f4f">"start"</span> <span style="color:#f44f4f">"</span><span style="color:#3daee9">\f12e</span><span style="color:#f44f4f">"</span> <span style="color:#f67400">16</span><span style="color:#2980b9">px</span><span style="color:#3f8058">,</span> 1171 <span style="color:#f44f4f">"stop"</span> <span style="color:#f44f4f">"</span><span style="color:#3daee9">\f12f</span><span style="color:#f44f4f">"</span> <span style="color:#f67400">10</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 1172 <span style="color:#27aeae">$known-prefixes</span><span style="color:#3daee9">:</span> webkit<span style="color:#3f8058">,</span> moz<span style="color:#3f8058">,</span> ms<span style="color:#3f8058">,</span> o<span style="color:#3f8058">;</span> 1173 <span style="color:#27aeae">$primary-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#036</span><span style="color:#3f8058">;</span> 1174 <span style="color:#27aeae">$form-selectors</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"input.name"</span><span style="color:#3f8058">,</span> <span style="color:#f44f4f">"input.address"</span><span style="color:#3f8058">,</span> <span style="color:#f44f4f">"input.zip"</span> <span style="color:#2980b9">!default</span><span style="color:#3f8058">;</span> 1175 <span style="color:#27aeae">$color1</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">hsl(</span><span style="color:#f67400">120</span><span style="color:#2980b9">deg</span><span style="color:#3f8058">,</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span><span style="color:#3f8058">,</span> <span style="color:#f67400">50</span><span style="color:#2980b9">%</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1176 <span style="color:#27aeae">$color2</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">rgb(</span><span style="color:#27aeae">$red</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$green</span><span style="color:#3f8058">,</span> <span style="color:#8e44ad">blue(</span><span style="color:#27aeae">$color1</span><span style="color:#8e44ad">))</span><span style="color:#3f8058">;</span> 1177 <span style="color:#27aeae">$color3</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">mix(</span><span style="color:#27aeae">$color1</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$color2</span><span style="color:#3f8058">,</span> [<span style="color:#27aeae">$weight</span>]<span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1178 <span style="color:#27aeae">$translucent-red</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad">rgba(</span><span style="color:#f67400">255</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0</span><span style="color:#3f8058">,</span> <span style="color:#f67400">0.5</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1179 <span style="color:#27aeae">$name</span><span style="color:#3daee9">:</span> foo<span style="color:#3f8058">;</span> 1180 <span style="color:#27aeae">$attr</span><span style="color:#3daee9">:</span> <span style="color:#f67400">border</span><span style="color:#3f8058">;</span> 1181 <span style="color:#27aeae">$media</span><span style="color:#3daee9">:</span> <span style="color:#f67400">screen</span><span style="color:#3f8058">;</span> 1182 <span style="color:#27aeae">$feature</span><span style="color:#3daee9">:</span> -webkit-min-device-pixel-ratio<span style="color:#3f8058">;</span> 1183 <span style="color:#27aeae">$value</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1.5</span><span style="color:#3f8058">;</span> 1184 <span style="color:#27aeae">$values</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#ff0000</span><span style="color:#3f8058">,</span> <span style="color:#27aeae;font-weight:bold">#00ff00</span><span style="color:#3f8058">,</span> <span style="color:#27aeae;font-weight:bold">#0000ff</span><span style="color:#3f8058">;</span> 1185 library.<span style="color:#27aeae">$color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">blue</span><span style="color:#3f8058">;</span> 1186 1187 1188 <span style="color:#7a7c7d">// Nesting</span> 1189 1190 <span style="color:#27ae60;font-weight:bold">#home-page</span> { 1191 1192 header { 1193 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">80</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 1194 <span style="font-weight:bold">margin</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0</span> <span style="color:#7f8c8d">auto</span><span style="color:#3f8058">;</span> 1195 1196 <span style="color:#8e44ad">.cover</span> { 1197 <span style="color:#27ae60">@include</span> <span style="color:#8e44ad">border-radius(</span><span style="color:#f67400">20</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1198 <span style="font-weight:bold">max-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 1199 1200 <span style="color:#3f8058">&</span><span style="color:#c45b00;font-style:italic">:hover</span> { 1201 <span style="font-weight:bold">background</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#ffffff</span><span style="color:#3f8058">;</span> 1202 } 1203 1204 <span style="color:#8e44ad">.like-button</span> { 1205 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$default-font-size</span> <span style="color:#3f8058">*</span> <span style="color:#f67400">0.8</span><span style="color:#3f8058">;</span> 1206 1207 <span style="color:#27ae60">@media</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">max-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> <span style="font-weight:bold">and</span> <span style="color:#8e44ad">(</span><span style="font-weight:bold">min-width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">200</span><span style="color:#2980b9">px</span><span style="color:#8e44ad">)</span> { 1208 <span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$default-font-size</span> <span style="color:#3f8058">*</span> <span style="color:#f67400">0.8</span><span style="color:#3f8058">;</span> 1209 1210 <span style="color:#8e44ad">.icon</span> { 1211 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">20</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 1212 <span style="font-weight:bold">height</span><span style="color:#3daee9">:</span> <span style="color:#f67400">20</span><span style="color:#2980b9">px</span><span style="color:#3f8058">;</span> 1213 } 1214 } 1215 1216 <span style="color:#27ae60">@media</span> <span style="color:#3f8058">print</span> { 1217 <span style="font-weight:bold">display</span><span style="color:#3daee9">:</span> <span style="color:#f67400">none</span><span style="color:#3f8058">;</span> 1218 } 1219 } 1220 } 1221 } 1222 } 1223 1224 1225 <span style="color:#27ae60">@use</span> <span style="color:#f44f4f">"sass:selector"</span><span style="color:#3f8058">;</span> 1226 <span style="color:#27ae60">@use</span> <span style="color:#f44f4f">'library'</span><span style="color:#3f8058">;</span> 1227 <span style="color:#27ae60">@use</span> <span style="color:#f44f4f">"src/corners"</span> <span style="font-weight:bold">as</span> <span style="color:#3f8058">*</span><span style="color:#3f8058">;</span> 1228 <span style="color:#27ae60">@use</span> <span style="color:#f44f4f">"src/corners"</span> <span style="font-weight:bold">as</span> c<span style="color:#3f8058">;</span> 1229 <span style="color:#27ae60">@use</span> <span style="color:#f44f4f">'opinionated'</span> <span style="font-weight:bold">with</span> <span style="color:#8e44ad">(</span><span style="color:#27aeae">$black</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#333</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1230 <span style="color:#27ae60">@use</span> <span style="color:#f44f4f">'library'</span> <span style="font-weight:bold">with</span> <span style="color:#8e44ad">(</span> 1231 <span style="color:#27aeae">$black</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#222</span><span style="color:#3f8058">,</span> 1232 <span style="color:#27aeae">$border-radius</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0.1</span><span style="color:#2980b9">rem</span> 1233 <span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1234 1235 <span style="color:#27ae60">@forward</span> <span style="color:#f44f4f">"src/list"</span> <span style="font-weight:bold">hide</span> list-reset<span style="color:#3f8058">,</span> <span style="color:#27aeae">$horizontal-list-gap</span><span style="color:#3f8058">;</span> 1236 <span style="color:#27ae60">@forward</span> <span style="color:#f44f4f">"src/list"</span> <span style="font-weight:bold">as</span> list-<span style="color:#3f8058">*</span><span style="color:#3f8058">;</span> 1237 <span style="color:#27ae60">@forward</span> <span style="color:#f44f4f">'library'</span> <span style="font-weight:bold">with</span> <span style="color:#8e44ad">(</span> 1238 <span style="color:#27aeae">$black</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#222</span> <span style="color:#2980b9">!default</span><span style="color:#3f8058">,</span> 1239 <span style="color:#27aeae">$border-radius</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0.1</span><span style="color:#2980b9">rem</span> <span style="color:#2980b9">!default</span> 1240 <span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1241 1242 <span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">"http://fonts.googleapis.com/css?family=</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$family</span><span style="color:#3f8058">}</span><span style="color:#f44f4f">"</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1243 <span style="color:#27ae60">@import</span> <span style="color:#f44f4f">'foundation/code'</span>, <span style="color:#f44f4f">'foundation/lists'</span><span style="color:#3f8058">;</span> 1244 <span style="color:#27ae60">@import</span> <span style="color:#f44f4f">"http://fonts.googleapis.com/css?family=Droid+Sans"</span><span style="color:#3f8058">;</span> 1245 1246 <span style="color:#27ae60">@error</span> <span style="color:#f44f4f">"Property </span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span><span style="color:#f44f4f"> must be either left or right."</span><span style="color:#3f8058">;</span> 1247 <span style="color:#27ae60">@error</span> <span style="color:#8e44ad">var(</span><span style="color:#27aeae">--abcd</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> 1248 1249 <span style="color:#27ae60">@debug</span> <span style="color:#f67400">10</span><span style="color:#2980b9">em</span> <span style="color:#3f8058">+</span> <span style="color:#f67400">12</span><span style="color:#2980b9">em</span><span style="color:#3f8058">;</span> 1250 <span style="color:#27ae60">@debug</span> library.<span style="color:#27aeae">$color</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">//=> blue</span> 1251 <span style="color:#27ae60">@debug</span> <span style="color:#8e44ad">radial-gradient(</span><span style="color:#27aeae">$primary</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$accent</span><span style="color:#8e44ad">)</span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// radial-gradient(#f2ece4, #e1d7d2)</span> 1252 <span style="color:#27ae60">@debug</span> -webkit-flex<span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// -webkit-flex</span> 1253 1254 1255 <span style="color:#27ae60">@keyframes</span> slide-in { 1256 <span style="color:#f67400">from</span> { 1257 <span style="font-weight:bold">margin-left</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 1258 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">300</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 1259 } 1260 1261 <span style="color:#3f8058">#{</span><span style="color:#27aeae">$x</span><span style="color:#3f8058">}</span><span style="color:#f67400">%</span> { 1262 <span style="font-weight:bold">margin-left</span><span style="color:#3daee9">:</span> <span style="color:#f67400">90</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 1263 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">150</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 1264 } 1265 1266 <span style="color:#f67400">70%</span> { 1267 <span style="font-weight:bold">margin-left</span><span style="color:#3daee9">:</span> <span style="color:#f67400">90</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 1268 <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">150</span><span style="color:#2980b9">%</span><span style="color:#3f8058">;</span> 1269 } 1270 } 1271 </pre></body></html>