summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJohnAlbin2016-05-11 10:08:21 (GMT)
committerJohnAlbin2016-05-11 10:08:21 (GMT)
commit20be5f010e5a12775a208ff6bdae13dc9ae79cea (patch)
treea400f311218b4842b808268d092088f577478d1b
parent78cffec9a183dfa216bfc74ddab313148fffbec7 (diff)
Build files.8.x-7.0-alpha10
-rw-r--r--STARTERKIT/styleguide/section-base.html216
-rw-r--r--STARTERKIT/styleguide/section-components.html128
-rw-r--r--STARTERKIT/styleguide/section-forms.html144
-rw-r--r--STARTERKIT/styleguide/section-layouts.html24
-rw-r--r--STARTERKIT/styleguide/section-navigation.html64
-rw-r--r--STARTERKIT/styleguide/section-sass.html6
6 files changed, 289 insertions, 293 deletions
diff --git a/STARTERKIT/styleguide/section-base.html b/STARTERKIT/styleguide/section-base.html
index c3171ef..a91cc18 100644
--- a/STARTERKIT/styleguide/section-base.html
+++ b/STARTERKIT/styleguide/section-base.html
@@ -326,8 +326,8 @@ heading but still want your text to be displayed inline.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h1 class=&quot;&quot;&gt;Heading Level 1 (h1)&lt;/h1&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h1 class=&quot;&quot;&gt;Heading Level 1 (h1)&lt;/h1&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.&lt;/p&gt;
&lt;h2 class=&quot;&quot;&gt;Heading Level 2 (h2)&lt;/h2&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.&lt;/p&gt;
@@ -353,8 +353,8 @@ heading but still want your text to be displayed inline.</p>
&lt;h6 class=&quot;&quot;&gt;Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line&lt;/h6&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/headings/_headings.scss</code>, line 1
</div>
@@ -437,11 +437,11 @@ download a resource.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">This is a &lt;a href=&quot;#&quot; class=&quot;[modifier class]&quot;&gt;link to another web page&lt;/a&gt;.
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">This is a &lt;a href=&quot;#&quot; class=&quot;[modifier class]&quot;&gt;link to another web page&lt;/a&gt;.
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/links/_links.scss</code>, line 1
</div>
@@ -513,8 +513,8 @@ erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class=&quot;&quot;&gt;Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class=&quot;&quot;&gt;Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
dolor id nibh ultricies vehicula.&lt;/p&gt;
@@ -527,8 +527,8 @@ elit. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi
erat porttitor ligula, eget lacinia odio sem nec elit.&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 152
</div>
@@ -604,8 +604,8 @@ explicitly matter.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ol class=&quot;&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ol class=&quot;&quot;&gt;
&lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
&lt;li&gt;Consectetur adipiscing elit&lt;/li&gt;
&lt;li&gt;Integer molestie lorem at massa&lt;/li&gt;
@@ -623,8 +623,8 @@ explicitly matter.</p>
&lt;li&gt;Eget porttitor lorem&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 26
</div>
@@ -678,8 +678,8 @@ explicitly matter.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;&quot;&gt;
&lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
&lt;li&gt;Consectetur adipiscing elit&lt;/li&gt;
&lt;li&gt;Integer molestie lorem at massa&lt;/li&gt;
@@ -697,8 +697,8 @@ explicitly matter.</p>
&lt;li&gt;Eget porttitor lorem&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 17
</div>
@@ -743,8 +743,8 @@ explicitly matter.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;dl class=&quot;&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;dl class=&quot;&quot;&gt;
&lt;dt&gt;Description lists&lt;/dt&gt;
&lt;dd&gt;A description list is perfect for defining terms.&lt;/dd&gt;
&lt;dt&gt;Euismod&lt;/dt&gt;
@@ -754,8 +754,8 @@ explicitly matter.</p>
&lt;dd&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/dd&gt;
&lt;/dl&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 35
</div>
@@ -807,8 +807,8 @@ the name of the source work in <code>&lt;cite&gt;</code>.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;blockquote class=&quot;&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;blockquote class=&quot;&quot;&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.&lt;/p&gt;
&lt;/blockquote&gt;
@@ -820,8 +820,8 @@ the name of the source work in <code>&lt;cite&gt;</code>.</p>
Title&lt;/cite&gt;&lt;/footer&gt;
&lt;/blockquote&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 94
</div>
@@ -868,8 +868,8 @@ caption of the figure.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;figure class=&quot;&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;figure class=&quot;&quot;&gt;
An illustration, diagram, photo, code listing, etc.
&lt;/figure&gt;
@@ -878,8 +878,8 @@ caption of the figure.</p>
&lt;figcaption&gt;Figure 1&lt;/figcaption&gt;
&lt;/figure&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 114
</div>
@@ -925,8 +925,8 @@ ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
dolor id nibh ultricies vehicula.&lt;/p&gt;
@@ -935,8 +935,8 @@ dolor id nibh ultricies vehicula.&lt;/p&gt;
&lt;p&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 135
</div>
@@ -977,14 +977,14 @@ fragments of computer code, ASCII art, etc.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">The following text is preformatted:
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">The following text is preformatted:
&lt;pre class=&quot;&quot;&gt;
(ノ゜Д゜)ノ ︵ ┻━┻
&lt;/pre&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 170
</div>
@@ -1059,8 +1059,8 @@ fragments of computer code, ASCII art, etc.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table class=&quot;&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table class=&quot;&quot;&gt;
&lt;caption&gt;Optional table caption.&lt;/caption&gt;
&lt;thead&gt;
&lt;tr&gt;
@@ -1100,8 +1100,8 @@ fragments of computer code, ASCII art, etc.</p>
&lt;/tfoot&gt;
&lt;/table&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/tables/_tables.scss</code>, line 1
</div>
@@ -1169,13 +1169,13 @@ text</b>. Bold text nested inside <i>italic text <b>should</b></i> <em>still be
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">The following snippets of text are &lt;strong class=&quot;&quot;&gt;rendered&lt;/strong&gt; as &lt;b class=&quot;&quot;&gt;bold
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">The following snippets of text are &lt;strong class=&quot;&quot;&gt;rendered&lt;/strong&gt; as &lt;b class=&quot;&quot;&gt;bold
text&lt;/b&gt;. Bold text nested inside &lt;i&gt;italic text &lt;b&gt;should&lt;/b&gt;&lt;/i&gt; &lt;em&gt;still be
&lt;strong&gt;bold&lt;/strong&gt;&lt;/em&gt;.
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 30
</div>
@@ -1217,13 +1217,13 @@ Italic text nested inside <b>bold text <i>should</i></b> <strong>still be
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">The following snippets of text are &lt;em class=&quot;&quot;&gt;rendered&lt;/em&gt; as &lt;i class=&quot;&quot;&gt;italic text&lt;/i&gt;.
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">The following snippets of text are &lt;em class=&quot;&quot;&gt;rendered&lt;/em&gt; as &lt;i class=&quot;&quot;&gt;italic text&lt;/i&gt;.
Italic text nested inside &lt;b&gt;bold text &lt;i&gt;should&lt;/i&gt;&lt;/b&gt; &lt;strong&gt;still be
&lt;em&gt;italic&lt;/em&gt;&lt;/strong&gt;.
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 105
</div>
@@ -1262,12 +1262,12 @@ And <abbr class="" title="HyperText Markup Language">HTML</abbr> is an acroynm.
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">An abbreviation of the word attribute is &lt;abbr class=&quot;&quot; title=&quot;attribute&quot;&gt;attr&lt;/abbr&gt;.
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">An abbreviation of the word attribute is &lt;abbr class=&quot;&quot; title=&quot;attribute&quot;&gt;attr&lt;/abbr&gt;.
And &lt;abbr class=&quot;&quot; title=&quot;HyperText Markup Language&quot;&gt;HTML&lt;/abbr&gt; is an acroynm.
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 9
</div>
@@ -1306,13 +1306,13 @@ And &lt;abbr class=&quot;&quot; title=&quot;HyperText Markup Language&quot;&gt;H
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Who is your favorite doctor (in &lt;cite class=&quot;&quot;&gt;Doctor Who&lt;/cite&gt;)?&lt;/p&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Who is your favorite doctor (in &lt;cite class=&quot;&quot;&gt;Doctor Who&lt;/cite&gt;)?&lt;/p&gt;
&lt;p&gt;Comment by &lt;cite class=&quot;&quot;&gt;&lt;a href=&quot;#&quot;&gt;Oli Walberg&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 50
</div>
@@ -1359,8 +1359,8 @@ what that meant.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;The &lt;code class=&quot;&quot;&gt;code&lt;/code&gt; element represents a fragment of computer code.&lt;/p&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;The &lt;code class=&quot;&quot;&gt;code&lt;/code&gt; element represents a fragment of computer code.&lt;/p&gt;
&lt;p&gt;There are &lt;var class=&quot;&quot;&gt;n&lt;/var&gt; flavors of ice cream to be available for purchase!&lt;/p&gt;
@@ -1369,8 +1369,8 @@ what that meant.&lt;/p&gt;
&lt;p&gt;To make George eat an apple, select &lt;kbd class=&quot;&quot;&gt;File | Eat Apple…&lt;/kbd&gt;&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 62
</div>
@@ -1407,11 +1407,11 @@ what that meant.&lt;/p&gt;
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;del class=&quot;&quot;&gt;This line of text is meant to be treated as deleted text.&lt;/del&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;del class=&quot;&quot;&gt;This line of text is meant to be treated as deleted text.&lt;/del&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 80
</div>
@@ -1452,15 +1452,15 @@ and so Hammond ordered the iris to be opened.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;The &lt;dfn class=&quot;&quot; id=&quot;gdo&quot;&gt;&lt;abbr title=&quot;Garage Door Opener&quot;&gt;GDO&lt;/abbr&gt;&lt;/dfn&gt; is a
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;The &lt;dfn class=&quot;&quot; id=&quot;gdo&quot;&gt;&lt;abbr title=&quot;Garage Door Opener&quot;&gt;GDO&lt;/abbr&gt;&lt;/dfn&gt; is a
device that allows off-world teams to open the iris.&lt;/p&gt;
&lt;p&gt;Teal&#039;c activated his &lt;a href=&quot;#gdo&quot;&gt;&lt;abbr title=&quot;Garage Door Opener&quot;&gt;GDO&lt;/abbr&gt;&lt;/a&gt;
and so Hammond ordered the iris to be opened.&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 92
</div>
@@ -1498,12 +1498,12 @@ document.</ins>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ins class=&quot;&quot;&gt;This line of text is meant to be treated as an addition to the
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ins class=&quot;&quot;&gt;This line of text is meant to be treated as an addition to the
document.&lt;/ins&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 124
</div>
@@ -1542,12 +1542,12 @@ context.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">You can use the mark tag to &lt;mark&gt;highlight&lt;/mark&gt; text like this.
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">You can use the mark tag to &lt;mark&gt;highlight&lt;/mark&gt; text like this.
&lt;mark class=&quot;&quot;&gt;New!&lt;/mark&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 136
</div>
@@ -1587,13 +1587,13 @@ source.</q>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;q class=&quot;&quot; cite=&quot;http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element&quot;&gt;The
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;q class=&quot;&quot; cite=&quot;http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element&quot;&gt;The
&lt;code&gt;q&lt;/code&gt; element represents some phrasing content quoted from another
source.&lt;/q&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 150
</div>
@@ -1630,11 +1630,11 @@ source.&lt;/q&gt;
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;s class=&quot;&quot;&gt;This line of text is meant to be treated as no longer accurate.&lt;/s&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;s class=&quot;&quot;&gt;This line of text is meant to be treated as no longer accurate.&lt;/s&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 163
</div>
@@ -1672,11 +1672,11 @@ text at 80% the size of the parent.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;small class=&quot;&quot;&gt;This line of text is meant to be treated as fine print.&lt;/small&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;small class=&quot;&quot;&gt;This line of text is meant to be treated as fine print.&lt;/small&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 175
</div>
@@ -1714,11 +1714,11 @@ represents a subscript.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;abbr&gt;M&lt;sup class=&quot;&quot;&gt;lle&lt;/sup&gt;&lt;/abbr&gt; Gwendoline wrote the equation &lt;code&gt;f(x, n) = log&lt;sub class=&quot;&quot;&gt;4&lt;/sub&gt;x&lt;sup class=&quot;&quot;&gt;n&lt;/sup&gt;&lt;/code&gt;.
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;abbr&gt;M&lt;sup class=&quot;&quot;&gt;lle&lt;/sup&gt;&lt;/abbr&gt; Gwendoline wrote the equation &lt;code&gt;f(x, n) = log&lt;sub class=&quot;&quot;&gt;4&lt;/sub&gt;x&lt;sup class=&quot;&quot;&gt;n&lt;/sup&gt;&lt;/code&gt;.
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 189
</div>
@@ -1756,11 +1756,11 @@ used by web browsers to style hyperlinks.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;u class=&quot;&quot;&gt;This line of text will render as underlined&lt;/u&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;u class=&quot;&quot;&gt;This line of text will render as underlined&lt;/u&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 215
</div>
@@ -1824,16 +1824,16 @@ used by web browsers to style hyperlinks.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;An image &lt;img class=&quot;&quot; src=&quot;kss-assets/sample-inline.png&quot;&gt; that is inline with other text.&lt;/p&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;An image &lt;img class=&quot;&quot; src=&quot;kss-assets/sample-inline.png&quot;&gt; that is inline with other text.&lt;/p&gt;
&lt;figure style=&quot;width: 50%; max-width: 300px;&quot;&gt;
&lt;figcaption&gt;An image inside a figure.&lt;/figcaption&gt;
&lt;img class=&quot;&quot; src=&quot;kss-assets/sample.png&quot;&gt;
&lt;/figure&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/embedded/_embedded.scss</code>, line 7
</div>
@@ -1877,8 +1877,8 @@ used by web browsers to style hyperlinks.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;A svg image &lt;svg class=&quot;&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot; x=&quot;0px&quot; y=&quot;0px&quot; width=&quot;10px&quot; height=&quot;10px&quot; viewBox=&quot;0 0 512 512&quot; enable-background=&quot;new 0 0 512 512&quot; xml:space=&quot;preserve&quot;&gt;&lt;polygon fill=&quot;#bdad94&quot; stroke=&quot;#bdad94&quot; stroke-width=&quot;37.6152&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-miterlimit=&quot;10&quot; points=&quot; 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 &quot;/&gt;&lt;/svg&gt; that is inline with other text.&lt;/p&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;A svg image &lt;svg class=&quot;&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot; x=&quot;0px&quot; y=&quot;0px&quot; width=&quot;10px&quot; height=&quot;10px&quot; viewBox=&quot;0 0 512 512&quot; enable-background=&quot;new 0 0 512 512&quot; xml:space=&quot;preserve&quot;&gt;&lt;polygon fill=&quot;#bdad94&quot; stroke=&quot;#bdad94&quot; stroke-width=&quot;37.6152&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-miterlimit=&quot;10&quot; points=&quot; 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 &quot;/&gt;&lt;/svg&gt; that is inline with other text.&lt;/p&gt;
&lt;figure style=&quot;width: 50%; max-width: 300px;&quot;&gt;
&lt;figcaption&gt;A svg inside a figure.&lt;/figcaption&gt;
@@ -1887,8 +1887,8 @@ used by web browsers to style hyperlinks.</p>
&lt;/svg&gt;
&lt;/figure&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/embedded/_embedded.scss</code>, line 37
</div>
diff --git a/STARTERKIT/styleguide/section-components.html b/STARTERKIT/styleguide/section-components.html
index 1fff1c4..164ac04 100644
--- a/STARTERKIT/styleguide/section-components.html
+++ b/STARTERKIT/styleguide/section-components.html
@@ -274,16 +274,16 @@ building a good component.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;box [modifier class]&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;box [modifier class]&quot;&gt;
&lt;h2 class=&quot;box__title&quot;&gt;Box title&lt;/h2&gt;
&lt;div class=&quot;box__content&quot;&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/box/_box.scss</code>, line 1
</div>
@@ -323,13 +323,13 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;clearfix&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;clearfix&quot;&gt;
&lt;div style=&quot;float: left; height: 50px; width: 50%;&quot;&gt;A floated item.&lt;/div&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/clearfix/_clearfix.scss</code>, line 1
</div>
@@ -431,8 +431,8 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;comment__section&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;comment__section&quot;&gt;
&lt;article class=&quot;comment [modifier class]&quot;&gt;
&lt;header&gt;
&lt;p&gt;&lt;a href=&quot;#&quot;&gt;Jane A. User&lt;/a&gt; replied on &lt;time&gt;Wed, 08/19/2015 - 17:51&lt;/time&gt;
@@ -448,8 +448,8 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
&lt;/article&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/comment/_comment.scss</code>, line 1
</div>
@@ -496,8 +496,8 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;divider &quot;&gt;&lt;/div&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;divider &quot;&gt;&lt;/div&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
@@ -509,8 +509,8 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/divider/_divider.scss</code>, line 1
</div>
@@ -546,14 +546,14 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">
&lt;footer class=&quot;footer &quot; role=&quot;contentinfo&quot;&gt;
Copyright statement here. Legalize here.
&lt;/footer&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/footer/footer.scss</code>, line 3
</div>
@@ -609,8 +609,8 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;header class=&quot;header &quot; role=&quot;banner&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;header class=&quot;header &quot; role=&quot;banner&quot;&gt;
&lt;a href=&quot;/&quot; title=&quot;Home&quot; rel=&quot;home&quot; class=&quot;header__logo&quot;&gt;
&lt;img src=&quot;kss-assets/sample-inline.png&quot; alt=&quot;Home&quot; class=&quot;header__logo-image&quot;&gt;
&lt;/a&gt;
@@ -635,8 +635,8 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
&lt;/div&gt;
&lt;/header&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/header/_header.scss</code>, line 5
</div>
@@ -680,13 +680,13 @@ the <code>.js-hidden</code> class.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;hidden &quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;hidden &quot;&gt;
This content is hidden.
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/hidden/_hidden.scss</code>, line 1
</div>
@@ -725,11 +725,11 @@ element directly.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;mark class=&quot;highlight-mark&quot;&gt;New&lt;/mark&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;mark class=&quot;highlight-mark&quot;&gt;New&lt;/mark&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/highlight-mark/_highlight-mark.scss</code>, line 1
</div>
@@ -769,14 +769,14 @@ element directly.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;inline-links &quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;inline-links &quot;&gt;
&lt;li class=&quot;inline-links__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Read more&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;inline-links__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Comment&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/inline-links/_inline-links.scss</code>, line 1
</div>
@@ -814,12 +814,12 @@ element directly.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h4 class=&quot;inline-sibling &quot;&gt;A Heading&lt;/h4&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h4 class=&quot;inline-sibling &quot;&gt;A Heading&lt;/h4&gt;
&lt;p&gt;A normal paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/inline-sibling/_inline-sibling.scss</code>, line 1
</div>
@@ -993,8 +993,8 @@ should use the <code>.messages--error</code> class.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">
&lt;div class=&quot;messages [modifier class]&quot; role=&quot;contentinfo&quot; aria-label=&quot;Status message&quot; &gt;
@@ -1010,8 +1010,8 @@ should use the <code>.messages--error</code> class.</p>
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/messages/messages.scss</code>, line 3
</div>
@@ -1053,13 +1053,13 @@ performance.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class=&quot;print-none&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class=&quot;print-none&quot;&gt;
This item will not be printed.
&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/print-none/_print-none.scss</code>, line 1
</div>
@@ -1115,13 +1115,13 @@ intrinsic aspect ratio is preserved at any screen width. The
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;responsive-video [modifier class]&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;responsive-video [modifier class]&quot;&gt;
&lt;iframe class=&quot;responsive-video__embed&quot; width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/8N_tupPBtWQ&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/responsive-video/_responsive-video.scss</code>, line 1
</div>
@@ -1199,13 +1199,13 @@ intrinsic aspect ratio is preserved at any screen width. The
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;visually-hidden [modifier class]&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;visually-hidden [modifier class]&quot;&gt;
This text will be read by screen readers, but will be visually hidden.
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/visually-hidden/_visually-hidden.scss</code>, line 1
</div>
@@ -1246,15 +1246,15 @@ intrinsic aspect ratio is preserved at any screen width. The
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
&lt;mark class=&quot;watermark &quot;&gt;Unpublished&lt;/mark&gt;
&lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/div&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/watermark/_watermark.scss</code>, line 1
</div>
@@ -1296,13 +1296,13 @@ variable: <code>$with-wireframes: true;</code></p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;wireframe&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;wireframe&quot;&gt;
An item inside a wireframe.
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>components/wireframe/_wireframe.scss</code>, line 3
</div>
diff --git a/STARTERKIT/styleguide/section-forms.html b/STARTERKIT/styleguide/section-forms.html
index 873df8b..73c7ab4 100644
--- a/STARTERKIT/styleguide/section-forms.html
+++ b/STARTERKIT/styleguide/section-forms.html
@@ -369,8 +369,8 @@ see the <a href="section-forms.html#kssref-forms-button">button component</a>.</
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;
&lt;button type=&quot;button&quot; class=&quot;[modifier class]&quot;&gt;Standard button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;[modifier class]&quot; disabled&gt;disabled button&lt;/button&gt;
&lt;/p&gt;
@@ -395,8 +395,8 @@ see the <a href="section-forms.html#kssref-forms-button">button component</a>.</
&lt;input type=&quot;reset&quot; class=&quot;[modifier class]&quot; value=&quot;Disabled input reset button&quot; disabled&gt;
&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/forms/_forms.scss</code>, line 97
</div>
@@ -455,8 +455,8 @@ common name given by the <code>&lt;legend&gt;</code> element.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;fieldset class=&quot;&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;fieldset class=&quot;&quot;&gt;
&lt;legend&gt;A fieldset&lt;/legend&gt;
&lt;label for=&quot;fieldsetText&quot;&gt;Text input&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;fieldsetText&quot; placeholder=&quot;Text input&quot;&gt;
@@ -479,8 +479,8 @@ common name given by the <code>&lt;legend&gt;</code> element.</p>
&lt;/div&gt;
&lt;/fieldset&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/forms/_forms.scss</code>, line 206
</div>
@@ -615,8 +615,8 @@ HTML5 types: <code>text</code>, <code>search</code>, <code>tel</code>, <code>url
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
&lt;label for=&quot;inputText&quot;&gt;Text&lt;/label&gt;
&lt;input type=&quot;text&quot; class=&quot;&quot; id=&quot;inputText&quot; placeholder=&quot;Enter some text&quot;&gt;
&lt;/div&gt;
@@ -714,8 +714,8 @@ HTML5 types: <code>text</code>, <code>search</code>, <code>tel</code>, <code>url
&lt;input type=&quot;file&quot; class=&quot;&quot; disabled id=&quot;inputFile&quot;&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/forms/_forms.scss</code>, line 130
</div>
@@ -761,8 +761,8 @@ implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;&quot;&gt; Check me out&lt;/label&gt;
&lt;/div&gt;
@@ -770,8 +770,8 @@ implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>
&lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;&quot; value=&quot;&quot; disabled&gt; Option two is disabled&lt;/label&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/forms/_forms.scss</code>, line 166
</div>
@@ -821,8 +821,8 @@ implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
&lt;label&gt;&lt;input type=&quot;radio&quot; class=&quot;&quot; value=&quot;option1&quot; name=&quot;example-radio&quot; checked&gt; Option one&lt;/label&gt;
&lt;/div&gt;
@@ -834,8 +834,8 @@ implementation doesn&#39;t respect <code>box-sizing</code>, <code>padding</code>
&lt;label&gt;&lt;input type=&quot;radio&quot; class=&quot;&quot; value=&quot;option3&quot; name=&quot;example-radio&quot; disabled&gt; Option three is disabled&lt;/label&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/forms/_forms.scss</code>, line 178
</div>
@@ -881,8 +881,8 @@ putting the form control inside the label element itself.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
&lt;label class=&quot;&quot; for=&quot;lableInputText&quot;&gt;A label for a text input&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;lableInputText&quot; placeholder=&quot;Enter some text&quot;&gt;
&lt;/div&gt;
@@ -891,8 +891,8 @@ putting the form control inside the label element itself.</p>
&lt;label class=&quot;&quot;&gt;&lt;input type=&quot;checkbox&quot;&gt; A label wrapped around a checkbox&lt;/label&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/forms/_forms.scss</code>, line 238
</div>
@@ -969,8 +969,8 @@ styling of <code>&lt;select&gt;</code>, unless a <code>border</code> property is
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
&lt;label for=&quot;selectDropdown&quot;&gt;A standard drop-down&lt;/label&gt;
&lt;select class=&quot;&quot; id=&quot;selectDropdown&quot;&gt;
&lt;option&gt;Option 1&lt;/option&gt;
@@ -1009,8 +1009,8 @@ styling of <code>&lt;select&gt;</code>, unless a <code>border</code> property is
&lt;/select&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/forms/_forms.scss</code>, line 254
</div>
@@ -1054,8 +1054,8 @@ styling of <code>&lt;select&gt;</code>, unless a <code>border</code> property is
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div&gt;
&lt;label for=&quot;exampleTextarea&quot;&gt;Text area&lt;/label&gt;
&lt;textarea class=&quot;&quot; rows=&quot;3&quot; id=&quot;exampleTextarea&quot;&gt;&lt;/textarea&gt;
&lt;/div&gt;
@@ -1064,8 +1064,8 @@ styling of <code>&lt;select&gt;</code>, unless a <code>border</code> property is
&lt;textarea class=&quot;&quot; rows=&quot;3&quot; id=&quot;exampleTextarea&quot; disabled&gt;&lt;/textarea&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>base/forms/_forms.scss</code>, line 276
</div>
@@ -1130,8 +1130,8 @@ item allowing them to choose an option.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;input type=&quot;text&quot; value=&quot;&quot; class=&quot;autocomplete [modifier class]&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;input type=&quot;text&quot; value=&quot;&quot; class=&quot;autocomplete [modifier class]&quot;&gt;
&lt;div class=&quot;autocomplete__list-wrapper&quot;&gt;
&lt;ul class=&quot;autocomplete__list&quot;&gt;
&lt;li class=&quot;autocomplete__list-item&quot;&gt;guwatif&lt;/li&gt;
@@ -1140,8 +1140,8 @@ item allowing them to choose an option.</p>
&lt;/div&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>forms/autocomplete/_autocomplete.scss</code>, line 1
</div>
@@ -1285,8 +1285,8 @@ link).</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;
&lt;button class=&quot;button [modifier class]&quot; type=&quot;button&quot;&gt;Standard button&lt;/button&gt;
&lt;button class=&quot;button [modifier class]&quot; type=&quot;button&quot; disabled&gt;Disabled button&lt;/button&gt;
&lt;/p&gt;
@@ -1315,8 +1315,8 @@ link).</p>
&lt;a class=&quot;button [modifier class]&quot; disabled href=&quot;#&quot;&gt;Disabled link button&lt;/a&gt;
&lt;/p&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>forms/button/_button.scss</code>, line 1
</div>
@@ -1386,8 +1386,8 @@ link).</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;fieldset class=&quot;collapsible-fieldset [modifier class]&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;fieldset class=&quot;collapsible-fieldset [modifier class]&quot;&gt;
&lt;legend&gt;
&lt;span class=&quot;collapsible-fieldset__legend&quot;&gt;
A collapsible fieldset
@@ -1399,8 +1399,8 @@ link).</p>
&lt;/div&gt;
&lt;/fieldset&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>forms/collapsible-fieldset/_collapsible-fieldset.scss</code>, line 1
</div>
@@ -1522,8 +1522,8 @@ link).</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form-item [modifier class]&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form-item [modifier class]&quot;&gt;
&lt;label class=&quot;form-item__label&quot; for=&quot;form-item-input&quot;&gt;Label &lt;span class=&quot;form-item__required&quot; title=&quot;This field is required.&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
&lt;input class=&quot;form-item__widget&quot; type=&quot;text&quot; id=&quot;form-item-input&quot; value=&quot;Text value&quot;&gt;
&lt;div class=&quot;form-item__description&quot;&gt;
@@ -1538,8 +1538,8 @@ link).</p>
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>forms/form-item/_form-item.scss</code>, line 4
</div>
@@ -1633,8 +1633,8 @@ the normal form item and is placed on each of the nested form items.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form-item&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;form-item&quot;&gt;
&lt;label class=&quot;form-item__label&quot; for=&quot;group&quot;&gt;Label for the group&lt;/label&gt;
&lt;div class=&quot;form-item__description&quot;&gt;
Form group description.
@@ -1657,8 +1657,8 @@ the normal form item and is placed on each of the nested form items.</p>
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>forms/form-item/_form-item.scss</code>, line 17
</div>
@@ -1801,8 +1801,8 @@ delete this component to save file weight in the generated CSS.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table class=&quot;form-table__sticky-header&quot; style=&quot;position: fixed; visibility: visible;&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table class=&quot;form-table__sticky-header&quot; style=&quot;position: fixed; visibility: visible;&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Permission&lt;/th&gt;
@@ -1908,8 +1908,8 @@ delete this component to save file weight in the generated CSS.</p>
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>forms/form-table/_form-table.scss</code>, line 1
</div>
@@ -1967,15 +1967,15 @@ delete this component to save file weight in the generated CSS.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;progress-bar [modifier class]&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;progress-bar [modifier class]&quot;&gt;
&lt;div class=&quot;progress-bar__bar&quot;&gt;&lt;div class=&quot;progress-bar__fill&quot; style=&quot;width: 60%&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;progress-bar__percentage&quot;&gt;60%&lt;/div&gt;
&lt;div class=&quot;progress-bar__message&quot;&gt;Installing...&lt;/div&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>forms/progress-bar/_progress-bar.scss</code>, line 1
</div>
@@ -2015,14 +2015,14 @@ delete this component to save file weight in the generated CSS.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;progress-throbber &quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;progress-throbber &quot;&gt;
&lt;div class=&quot;progress-throbber__widget&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;progress-throbber__message&quot;&gt;Progress message&lt;/div&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>forms/progress-throbber/_progress-throbber.scss</code>, line 1
</div>
@@ -2064,16 +2064,16 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;textarea class=&quot;resizable-textarea &quot; rows=&quot;5&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;textarea class=&quot;resizable-textarea &quot; rows=&quot;5&quot;&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
&lt;/textarea&gt;
&lt;div class=&quot;resizable-textarea__grippie&quot;&gt;&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>forms/resizable-textarea/_resizable-textarea.scss</code>, line 1
</div>
@@ -2221,8 +2221,8 @@ delete this component to save file weight in the generated CSS.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table class=&quot;tabledrag-processed&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table class=&quot;tabledrag-processed&quot;&gt;
&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Field&lt;/th&gt;&lt;th&gt;Label&lt;/th&gt;&lt;th colspan=&quot;3&quot;&gt;Format&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr class=&quot;region-message region-visible-message region-populated&quot;&gt;
@@ -2333,8 +2333,8 @@ delete this component to save file weight in the generated CSS.</p>
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>forms/table-drag/_table-drag.scss</code>, line 1
</div>
diff --git a/STARTERKIT/styleguide/section-layouts.html b/STARTERKIT/styleguide/section-layouts.html
index ba136f4..08536a8 100644
--- a/STARTERKIT/styleguide/section-layouts.html
+++ b/STARTERKIT/styleguide/section-layouts.html
@@ -173,13 +173,13 @@ instead.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;layout-center [modifier class]&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;layout-center [modifier class]&quot;&gt;
This layout-center component has content that is centered on larger screens.
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>layouts/layout-center/_layout-center.scss</code>, line 5
</div>
@@ -317,8 +317,8 @@ to the div to ensure its nested grid items align with the parent grid.</li>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;layout-3col &quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;layout-3col &quot;&gt;
&lt;div class=&quot;layout-3col__full&quot;&gt;
The &lt;code&gt;.layout-3col__full&lt;/code&gt; grid item.
&lt;/div&gt;
@@ -377,8 +377,8 @@ to the div to ensure its nested grid items align with the parent grid.</li>
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>layouts/layout-3col/_layout-3col.scss</code>, line 1
</div>
@@ -420,14 +420,14 @@ order.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;layout-swap&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;layout-swap&quot;&gt;
&lt;div&gt;This element comes &lt;strong&gt;first&lt;/strong&gt; in the HTML source order.&lt;/div&gt;
&lt;div class=&quot;layout-swap__top&quot;&gt;This element comes &lt;strong&gt;second&lt;/strong&gt; in the HTML source order.&lt;/div&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>layouts/layout-swap/_layout-swap.scss</code>, line 4
</div>
diff --git a/STARTERKIT/styleguide/section-navigation.html b/STARTERKIT/styleguide/section-navigation.html
index 0704543..8bfaa7b 100644
--- a/STARTERKIT/styleguide/section-navigation.html
+++ b/STARTERKIT/styleguide/section-navigation.html
@@ -188,8 +188,8 @@ page navigation.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;nav class=&quot;breadcrumb &quot; role=&quot;navigation&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;nav class=&quot;breadcrumb &quot; role=&quot;navigation&quot;&gt;
&lt;h2 class=&quot;breadcrumb__title&quot;&gt;You are here&lt;/h2&gt;
&lt;ol class=&quot;breadcrumb__list&quot;&gt;
@@ -200,8 +200,8 @@ page navigation.</p>
&lt;/ol&gt;
&lt;/nav&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>navigation/breadcrumb/_breadcrumb.scss</code>, line 4
</div>
@@ -244,8 +244,8 @@ page navigation.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;more-link &quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;more-link &quot;&gt;
&lt;a href=&quot;#&quot;&gt;Read more…&lt;/a&gt;
&lt;/div&gt;
@@ -253,8 +253,8 @@ page navigation.</p>
&lt;a class=&quot;more-link__help-icon&quot; href=&quot;#&quot;&gt;Help&lt;/a&gt;
&lt;/div&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>navigation/more-link/_more-link.scss</code>, line 1
</div>
@@ -319,8 +319,8 @@ side or below the main content.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;nav-menu &quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;nav-menu &quot;&gt;
&lt;li class=&quot;nav-menu__item&quot;&gt;
&lt;a href=&quot;/&quot; class=&quot;nav-menu__link&quot;&gt;Home&lt;/a&gt;
&lt;/li&gt;
@@ -349,8 +349,8 @@ side or below the main content.</p>
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>navigation/nav-menu/_nav-menu.scss</code>, line 1
</div>
@@ -395,8 +395,8 @@ side or below the main content.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;navbar clearfix&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;navbar clearfix&quot;&gt;
&lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Blandit Jugis&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Causa Diam&lt;/a&gt;&lt;/li&gt;
@@ -406,8 +406,8 @@ side or below the main content.</p>
&lt;li class=&quot;navbar__item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Ut&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>navigation/navbar/_navbar.scss</code>, line 4
</div>
@@ -471,8 +471,8 @@ is available.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;pager &quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;pager &quot;&gt;
&lt;li class=&quot;pager__item&quot;&gt;
&lt;a title=&quot;Go to first page&quot; href=&quot;/admin/content&quot;&gt;« first&lt;/a&gt;
&lt;/li&gt;
@@ -500,8 +500,8 @@ is available.</p>
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>navigation/pager/_pager.scss</code>, line 1
</div>
@@ -560,15 +560,15 @@ with the <code>visually-hidden</code> component.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">
&lt;a href=&quot;#main-content&quot; class=&quot;skip-link [modifier class]&quot;&gt;
Skip to main content
&lt;/a&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>navigation/skip-link/skip-link.scss</code>, line 3
</div>
@@ -626,15 +626,15 @@ with the <code>visually-hidden</code> component.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;tabs [modifier class]&quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;tabs [modifier class]&quot;&gt;
&lt;li class=&quot;tabs__tab is-active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link is-active&quot;&gt;View &lt;span class=&quot;visually-hidden&quot;&gt;(active tab)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>navigation/tabs/_tabs.scss</code>, line 4
</div>
@@ -682,8 +682,8 @@ is slightly different.</p>
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;tabs &quot;&gt;
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;tabs &quot;&gt;
&lt;li class=&quot;tabs__tab is-active&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link is-active&quot;&gt;View &lt;span class=&quot;visually-hidden&quot;&gt;(active tab)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Edit&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
@@ -695,8 +695,8 @@ is slightly different.</p>
&lt;li class=&quot;tabs__tab&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;tabs__tab-link&quot;&gt;Revisions&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
- </div>
-
+ </div>
+
<div class="kss-source kss-style">
Source: <code>navigation/tabs/_tabs.scss</code>, line 14
</div>
diff --git a/STARTERKIT/styleguide/section-sass.html b/STARTERKIT/styleguide/section-sass.html
index 4124407..1bd126f 100644
--- a/STARTERKIT/styleguide/section-sass.html
+++ b/STARTERKIT/styleguide/section-sass.html
@@ -233,11 +233,7 @@
</div>
</div>
- <div class="kss-markup kss-style">
- <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. --&gt;&lt;div class=&quot;kss-style&quot;&gt;&lt;h3 class=&quot;chroma-kss__title&quot;&gt;branding&lt;/h3&gt;&lt;p class=&quot;chroma-kss__description&quot;&gt;The site&#039;s main colors. Can be used to define colors in other color schemes.&lt;/p&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #000&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(black)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#000&lt;/code&gt;&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: grey-dark, grey, grey-light, grey-extra-light, text, border, autocomplete, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-stripe, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #666666&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(grey-dark)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#666666&lt;/code&gt; (black)&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #999999&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(grey)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#999999&lt;/code&gt; (black)&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: button-disabled, fieldset-summary&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #cccccc&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(grey-light)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#cccccc&lt;/code&gt; (black)&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #eeeeee&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(grey-extra-light)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#eeeeee&lt;/code&gt; (black)&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: resizable-grippie, row-stripe, watermark&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fff&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(white)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fff&lt;/code&gt;&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, skip-link, tabs-bg, tab-text-shadow&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #0072b9&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(blue)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#0072b9&lt;/code&gt;&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: link, link-visited, autocomplete-select-bg, progress-bar, status, status-bg&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #c00&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(red)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#c00&lt;/code&gt;&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: link-active, form-error, mark-highlight, error, error-bg&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fd0&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(yellow)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fd0&lt;/code&gt;&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select&lt;/span&gt;&lt;/div&gt;&lt;h3 class=&quot;chroma-kss__title&quot;&gt;functional&lt;/h3&gt;&lt;p class=&quot;chroma-kss__description&quot;&gt;Colors used by functional parts of the design.&lt;/p&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #000&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(text)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#000&lt;/code&gt; (black)&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: autocomplete, button, menu-active, status-highlight, warning, tab&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fff&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(text-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fff&lt;/code&gt; (white)&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: autocomplete-bg, body-bg, tabs-bg&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #0072b9&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(link)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#0072b9&lt;/code&gt; (blue)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #003353&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(link-visited)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#003353&lt;/code&gt; (blue)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #c00&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(link-active)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#c00&lt;/code&gt; (red)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #cccccc&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(border)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#cccccc&lt;/code&gt; (grey-light)&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: tabs-border&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #000&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(autocomplete)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#000&lt;/code&gt; (text)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fff&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(autocomplete-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fff&lt;/code&gt; (text-bg)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fff&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(autocomplete-select)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fff&lt;/code&gt; (white)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #0072b9&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(autocomplete-select-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#0072b9&lt;/code&gt; (blue)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fff&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(body-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fff&lt;/code&gt; (text-bg)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #000&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(button)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#000&lt;/code&gt; (text)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #999999&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(button-disabled)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#999999&lt;/code&gt; (grey)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #999999&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(fieldset-summary)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#999999&lt;/code&gt; (grey)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #c00&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(form-error)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#c00&lt;/code&gt; (red)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #c00&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(mark-highlight)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#c00&lt;/code&gt; (red)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fd0&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(mark-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fd0&lt;/code&gt; (yellow)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #000&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(menu-active)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#000&lt;/code&gt; (text)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fffadb&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(preview-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fffadb&lt;/code&gt; (yellow)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #0072b9&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(progress-bar)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#0072b9&lt;/code&gt; (blue)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #cccccc&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(progress-bar-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#cccccc&lt;/code&gt; (grey-light)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #666666&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(progress-bar-border)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#666666&lt;/code&gt; (grey-dark)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #eeeeee&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(resizable-grippie)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#eeeeee&lt;/code&gt; (grey-extra-light)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #eeeeee&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(row-stripe)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#eeeeee&lt;/code&gt; (grey-extra-light)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #cccccc&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(row-disabled)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#cccccc&lt;/code&gt; (grey-light)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fff&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(skip-link)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fff&lt;/code&gt; (white)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #666666&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(skip-link-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#666666&lt;/code&gt; (grey-dark)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #0072b9&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(status)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#0072b9&lt;/code&gt; (blue)&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: status-bg&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #f6fcff&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(status-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#f6fcff&lt;/code&gt; (status)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #000&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(status-highlight)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#000&lt;/code&gt; (text)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #000&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(warning)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#000&lt;/code&gt; (text)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fffce6&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(warning-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fffce6&lt;/code&gt; (yellow)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fd0&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(warning-border)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fd0&lt;/code&gt; (yellow)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #c00&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(error)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#c00&lt;/code&gt; (red)&lt;/span&gt; &lt;span class=&quot;chroma-kss__reference&quot;&gt;This color is inherited by: error-bg&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fff0f0&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(error-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fff0f0&lt;/code&gt; (error)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #cccccc&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(tabs-border)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#cccccc&lt;/code&gt; (border)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fff&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(tabs-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fff&lt;/code&gt; (text-bg)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #000&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(tab)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#000&lt;/code&gt; (text)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fff&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(tab-text-shadow)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fff&lt;/code&gt; (white)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #dddddd&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(tab-bg)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#dddddd&lt;/code&gt; (grey-light)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #666666&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(tab-secondary)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#666666&lt;/code&gt; (grey-dark)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fffadb&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(table-drag)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fffadb&lt;/code&gt; (yellow)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #fffdf0&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(table-select)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#fffdf0&lt;/code&gt; (yellow)&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;chroma-kss&quot;&gt;&lt;span class=&quot;chroma-kss__swatch&quot; style=&quot;background-color: #eeeeee&quot;&gt;&lt;/span&gt;&lt;code class=&quot;chroma-kss__variable&quot;&gt;color(watermark)&lt;/code&gt; &lt;span class=&quot;chroma-kss__alt-text&quot;&gt;uses the color:&lt;/span&gt; &lt;span class=&quot;chroma-kss__value&quot;&gt;&lt;code&gt;#eeeeee&lt;/code&gt; (grey-extra-light)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
-</code></pre>
- </div>
-
+
<div class="kss-source kss-style">
Source: <code>init/_colors.scss</code>, line 3
</div>