summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJohnAlbin2016-05-24 23:10:12 +0800
committerJohnAlbin2016-05-24 23:10:49 +0800
commitbcab72669b5e2dd15bb92f738dc08d2ef4e5bc33 (patch)
treec9e658f04d7d3ed2704292b3beb03095d27abe53
parentdde971fa94cc9411ea8641dcdd9754b799d7a573 (diff)
Build files.8.x-7.0-alpha12
-rw-r--r--STARTERKIT/components/asset-builds/css/clearfix.css10
-rw-r--r--STARTERKIT/components/asset-builds/css/components.css133
-rw-r--r--STARTERKIT/components/asset-builds/css/tabs.css104
-rw-r--r--STARTERKIT/styleguide/index.html4
-rw-r--r--STARTERKIT/styleguide/section-base.html62
-rw-r--r--STARTERKIT/styleguide/section-components.html14
-rw-r--r--STARTERKIT/styleguide/section-forms.html6
-rw-r--r--STARTERKIT/styleguide/section-layouts.html4
-rw-r--r--STARTERKIT/styleguide/section-navigation.html63
-rw-r--r--STARTERKIT/styleguide/section-sass.html4
10 files changed, 231 insertions, 173 deletions
diff --git a/STARTERKIT/components/asset-builds/css/clearfix.css b/STARTERKIT/components/asset-builds/css/clearfix.css
new file mode 100644
index 0000000..3a06e2d
--- /dev/null
+++ b/STARTERKIT/components/asset-builds/css/clearfix.css
@@ -0,0 +1,10 @@
+.clearfix:before {
+ content: '';
+ display: table;
+}
+
+.clearfix:after {
+ content: '';
+ display: table;
+ clear: both;
+}
diff --git a/STARTERKIT/components/asset-builds/css/components.css b/STARTERKIT/components/asset-builds/css/components.css
index c8cd301..f480261 100644
--- a/STARTERKIT/components/asset-builds/css/components.css
+++ b/STARTERKIT/components/asset-builds/css/components.css
@@ -16,21 +16,6 @@
border-color: #0072b9;
}
-.clearfix:before,
-.header:before,
-.tabs:before {
- content: '';
- display: table;
-}
-
-.clearfix:after,
-.header:after,
-.tabs:after {
- content: '';
- display: table;
- clear: both;
-}
-
.comment__section,
.comments {
margin: 1.5rem 0;
@@ -114,6 +99,19 @@ h6 {
margin-bottom: 1.5rem;
}
+.clearfix:before,
+.header:before {
+ content: '';
+ display: table;
+}
+
+.clearfix:after,
+.header:after {
+ content: '';
+ display: table;
+ clear: both;
+}
+
.header__logo {
float: left;
margin: 0 10px 0 0;
@@ -399,111 +397,6 @@ span.field-label {
font-weight: bold;
}
-.tabs {
- margin: 1.125rem 0 0;
- line-height: 1.875rem;
- border-bottom: 1px solid #cccccc \0/ie;
- background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
- background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
- padding: 0 2px;
- list-style: none;
- white-space: nowrap;
-}
-
-@media print {
- .tabs {
- display: none;
- }
-}
-
-.tabs__tab {
- float: left;
- margin: 0 3px;
- border: 1px solid #cccccc;
- border-top-left-radius: 8px;
- border-top-right-radius: 8px;
- border-bottom-color: transparent;
- border-bottom: 0 \0/ie;
- overflow: hidden;
- background: #dddddd;
-}
-
-[dir="rtl"] .tabs__tab {
- float: right;
-}
-
-.tabs__tab.is-active {
- border-bottom-color: #fff;
-}
-
-.tabs__tab-link {
- padding: 0 1.5rem;
- display: block;
- text-decoration: none;
- -webkit-transition: color .3s, background .3s, border .3s;
- transition: color .3s, background .3s, border .3s;
- text-shadow: #fff 0 1px 0;
- color: #000;
- background: #dddddd;
- letter-spacing: 1px;
-}
-
-.tabs__tab-link:focus, .tabs__tab-link:hover {
- background: #eaeaea;
-}
-
-.tabs__tab-link:active, .tabs__tab-link.is-active, .tabs__tab-link--is-active {
- background: #fff;
- text-shadow: none;
-}
-
-.tabs--secondary {
- margin-top: 1.5rem;
- font-size: 0.875rem;
- background-image: none;
-}
-
-.tabs + .tabs--secondary {
- margin-top: 0;
- background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
- background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
-}
-
-.tabs--secondary .tabs__tab {
- margin: 0.5625rem 0.1875rem;
- border: 0;
- background: transparent;
-}
-
-[dir="rtl"] .tabs--secondary .tabs__tab {
- float: right;
-}
-
-.tabs--secondary .tabs__tab.is-active {
- border-bottom-color: transparent;
-}
-
-.tabs--secondary .tabs__tab-link {
- border: 1px solid #cccccc;
- border-radius: 24px;
- color: #666666;
- background: #f1f1f1;
- letter-spacing: normal;
-}
-
-.tabs--secondary .tabs__tab-link:focus, .tabs--secondary .tabs__tab-link:hover {
- color: #333333;
- background: #dddddd;
- border-color: #999999;
-}
-
-.tabs--secondary .tabs__tab-link:active, .tabs--secondary .tabs__tab-link.is-active, .tabs--secondary .tabs__tab-link--is-active {
- color: white;
- text-shadow: #333333 0 1px 0;
- background: #666666;
- border-color: black;
-}
-
.autocomplete,
.form-autocomplete {
background-image: url(../..//forms/autocomplete/throbber-inactive.png);
diff --git a/STARTERKIT/components/asset-builds/css/tabs.css b/STARTERKIT/components/asset-builds/css/tabs.css
new file mode 100644
index 0000000..c16d52f
--- /dev/null
+++ b/STARTERKIT/components/asset-builds/css/tabs.css
@@ -0,0 +1,104 @@
+.tabs {
+ margin: 1.125rem 0 0;
+ line-height: 1.875rem;
+ border-bottom: 1px solid #cccccc \0/ie;
+ background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
+ background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
+ padding: 0 2px;
+ list-style: none;
+ white-space: nowrap;
+}
+
+@media print {
+ .tabs {
+ display: none;
+ }
+}
+
+.tabs__tab {
+ float: left;
+ margin: 0 3px;
+ border: 1px solid #cccccc;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ border-bottom-color: transparent;
+ border-bottom: 0 \0/ie;
+ overflow: hidden;
+ background: #dddddd;
+}
+
+[dir="rtl"] .tabs__tab {
+ float: right;
+}
+
+.tabs__tab.is-active {
+ border-bottom-color: #fff;
+}
+
+.tabs__tab-link {
+ padding: 0 1.5rem;
+ display: block;
+ text-decoration: none;
+ -webkit-transition: color .3s, background .3s, border .3s;
+ transition: color .3s, background .3s, border .3s;
+ text-shadow: #fff 0 1px 0;
+ color: #000;
+ background: #dddddd;
+ letter-spacing: 1px;
+}
+
+.tabs__tab-link:focus, .tabs__tab-link:hover {
+ background: #eaeaea;
+}
+
+.tabs__tab-link:active, .tabs__tab-link.is-active, .tabs__tab-link--is-active {
+ background: #fff;
+ text-shadow: none;
+}
+
+.tabs--secondary {
+ margin-top: 1.5rem;
+ font-size: 0.875rem;
+ background-image: none;
+}
+
+.tabs + .tabs--secondary {
+ margin-top: 0;
+ background-image: -webkit-linear-gradient(bottom, #cccccc 1px, transparent 1px);
+ background-image: linear-gradient(to top, #cccccc 1px, transparent 1px);
+}
+
+.tabs--secondary .tabs__tab {
+ margin: 0.5625rem 0.1875rem;
+ border: 0;
+ background: transparent;
+}
+
+[dir="rtl"] .tabs--secondary .tabs__tab {
+ float: right;
+}
+
+.tabs--secondary .tabs__tab.is-active {
+ border-bottom-color: transparent;
+}
+
+.tabs--secondary .tabs__tab-link {
+ border: 1px solid #cccccc;
+ border-radius: 24px;
+ color: #666666;
+ background: #f1f1f1;
+ letter-spacing: normal;
+}
+
+.tabs--secondary .tabs__tab-link:focus, .tabs--secondary .tabs__tab-link:hover {
+ color: #333333;
+ background: #dddddd;
+ border-color: #999999;
+}
+
+.tabs--secondary .tabs__tab-link:active, .tabs--secondary .tabs__tab-link.is-active, .tabs--secondary .tabs__tab-link--is-active {
+ color: white;
+ text-shadow: #333333 0 1px 0;
+ background: #666666;
+ border-color: black;
+}
diff --git a/STARTERKIT/styleguide/index.html b/STARTERKIT/styleguide/index.html
index 5a25f74..9082fde 100644
--- a/STARTERKIT/styleguide/index.html
+++ b/STARTERKIT/styleguide/index.html
@@ -11,14 +11,16 @@
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../components/asset-builds/css/base.css">
<link rel="stylesheet" href="../components/asset-builds/css/layouts.css">
-<link rel="stylesheet" href="../components/asset-builds/css/styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/chroma-kss-styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/kss-only.css">
<link rel="stylesheet" href="../components/asset-builds/css/breadcrumb.css">
+<link rel="stylesheet" href="../components/asset-builds/css/clearfix.css">
<link rel="stylesheet" href="../components/asset-builds/css/components.css">
<link rel="stylesheet" href="../components/asset-builds/css/footer.css">
<link rel="stylesheet" href="../components/asset-builds/css/messages.css">
+<link rel="stylesheet" href="../components/asset-builds/css/more-link.css">
<link rel="stylesheet" href="../components/asset-builds/css/skip-link.css">
+<link rel="stylesheet" href="../components/asset-builds/css/tabs.css">
<link rel="stylesheet" href="../components/asset-builds/css/visually-hidden.css">
</head>
diff --git a/STARTERKIT/styleguide/section-base.html b/STARTERKIT/styleguide/section-base.html
index 475fe5f..553b9f3 100644
--- a/STARTERKIT/styleguide/section-base.html
+++ b/STARTERKIT/styleguide/section-base.html
@@ -11,14 +11,16 @@
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../components/asset-builds/css/base.css">
<link rel="stylesheet" href="../components/asset-builds/css/layouts.css">
-<link rel="stylesheet" href="../components/asset-builds/css/styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/chroma-kss-styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/kss-only.css">
<link rel="stylesheet" href="../components/asset-builds/css/breadcrumb.css">
+<link rel="stylesheet" href="../components/asset-builds/css/clearfix.css">
<link rel="stylesheet" href="../components/asset-builds/css/components.css">
<link rel="stylesheet" href="../components/asset-builds/css/footer.css">
<link rel="stylesheet" href="../components/asset-builds/css/messages.css">
+<link rel="stylesheet" href="../components/asset-builds/css/more-link.css">
<link rel="stylesheet" href="../components/asset-builds/css/skip-link.css">
+<link rel="stylesheet" href="../components/asset-builds/css/tabs.css">
<link rel="stylesheet" href="../components/asset-builds/css/visually-hidden.css">
</head>
@@ -214,6 +216,12 @@
><span class="kss-nav__name">Scalable vector</span>
</a>
</li>
+ <li class="kss-nav__menu-item">
+ <a class="kss-nav__menu-link" href="section-base.html#kssref-base-root">
+ <span class="kss-nav__ref ">2.7</span
+ ><span class="kss-nav__name">Root</span>
+ </a>
+ </li>
</ul>
</li>
<li class="kss-nav__menu-item">
@@ -1895,6 +1903,58 @@ used by web browsers to style hyperlinks.</p>
Source: <code>base/embedded/_embedded.scss</code>, line 35
</div>
</section>
+ <section id="kssref-base-root" class="kss-section kss-section--depth-2">
+ <div class="kss-style">
+ <h2 class="kss-title kss-title--level-2">
+ <a class="kss-title__permalink" href="#kssref-base-root">
+ <span class="kss-title__ref">
+ 2.7
+ <span class="kss-title__permalink-hash">
+ base.root
+ </span>
+ </span>
+ Root
+ </a>
+ </h2>
+
+ <div class="kss-description">
+ <p>The HTML root component contains the doctype, HTML element, HEAD element and
+BODY element. It also contains the CSS for those elements and the <code>*</code>
+universal selector.</p>
+
+ </div>
+
+ </div>
+
+ <div class="kss-modifier__wrapper">
+ <div class="kss-modifier__heading kss-style">
+ Example </div>
+
+
+ <div class="kss-modifier__example">
+
+
+ </div>
+
+ </div>
+ <div class="kss-markup kss-style">
+ <pre class="prettyprint linenums lang-html"><code data-language="html">
+&lt;!DOCTYPE html&gt;
+&lt;html &gt;
+ &lt;head&gt;
+ &lt;title&gt;&lt;/title&gt;
+ &lt;/head&gt;
+ &lt;body &gt;
+
+ &lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+ </div>
+
+ <div class="kss-source kss-style">
+ Source: <code>base/root/_root.scss</code>, line 3
+ </div>
+ </section>
</article>
<!-- SCRIPTS -->
diff --git a/STARTERKIT/styleguide/section-components.html b/STARTERKIT/styleguide/section-components.html
index 1c0f388..bd0b08a 100644
--- a/STARTERKIT/styleguide/section-components.html
+++ b/STARTERKIT/styleguide/section-components.html
@@ -11,14 +11,16 @@
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../components/asset-builds/css/base.css">
<link rel="stylesheet" href="../components/asset-builds/css/layouts.css">
-<link rel="stylesheet" href="../components/asset-builds/css/styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/chroma-kss-styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/kss-only.css">
<link rel="stylesheet" href="../components/asset-builds/css/breadcrumb.css">
+<link rel="stylesheet" href="../components/asset-builds/css/clearfix.css">
<link rel="stylesheet" href="../components/asset-builds/css/components.css">
<link rel="stylesheet" href="../components/asset-builds/css/footer.css">
<link rel="stylesheet" href="../components/asset-builds/css/messages.css">
+<link rel="stylesheet" href="../components/asset-builds/css/more-link.css">
<link rel="stylesheet" href="../components/asset-builds/css/skip-link.css">
+<link rel="stylesheet" href="../components/asset-builds/css/tabs.css">
<link rel="stylesheet" href="../components/asset-builds/css/visually-hidden.css">
</head>
@@ -333,7 +335,7 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
</div>
<div class="kss-source kss-style">
- Source: <code>components/clearfix/_clearfix.scss</code>, line 1
+ Source: <code>components/clearfix/clearfix.scss</code>, line 3
</div>
</section>
<section id="kssref-components-comments" class="kss-section kss-section--depth-2">
@@ -543,8 +545,8 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
<footer class="footer " role="contentinfo">
- Copyright statement here. Legalize here.
-</footer>
+ Copyright statement here. Legalize here.
+ </footer>
</div>
@@ -553,8 +555,8 @@ elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://
<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;
+ Copyright statement here. Legalize here.
+ &lt;/footer&gt;
</code></pre>
</div>
diff --git a/STARTERKIT/styleguide/section-forms.html b/STARTERKIT/styleguide/section-forms.html
index 66c2987..21937cb 100644
--- a/STARTERKIT/styleguide/section-forms.html
+++ b/STARTERKIT/styleguide/section-forms.html
@@ -11,14 +11,16 @@
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../components/asset-builds/css/base.css">
<link rel="stylesheet" href="../components/asset-builds/css/layouts.css">
-<link rel="stylesheet" href="../components/asset-builds/css/styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/chroma-kss-styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/kss-only.css">
<link rel="stylesheet" href="../components/asset-builds/css/breadcrumb.css">
+<link rel="stylesheet" href="../components/asset-builds/css/clearfix.css">
<link rel="stylesheet" href="../components/asset-builds/css/components.css">
<link rel="stylesheet" href="../components/asset-builds/css/footer.css">
<link rel="stylesheet" href="../components/asset-builds/css/messages.css">
+<link rel="stylesheet" href="../components/asset-builds/css/more-link.css">
<link rel="stylesheet" href="../components/asset-builds/css/skip-link.css">
+<link rel="stylesheet" href="../components/asset-builds/css/tabs.css">
<link rel="stylesheet" href="../components/asset-builds/css/visually-hidden.css">
</head>
@@ -212,7 +214,7 @@ or form elements.</p>
<div class="kss-source kss-style">
- Source: <code>components.scss</code>, line 71
+ Source: <code>components.scss</code>, line 69
</div>
</div>
<section id="kssref-forms-base" class="kss-section kss-section--depth-2">
diff --git a/STARTERKIT/styleguide/section-layouts.html b/STARTERKIT/styleguide/section-layouts.html
index e2dfcdc..18dc12e 100644
--- a/STARTERKIT/styleguide/section-layouts.html
+++ b/STARTERKIT/styleguide/section-layouts.html
@@ -11,14 +11,16 @@
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../components/asset-builds/css/base.css">
<link rel="stylesheet" href="../components/asset-builds/css/layouts.css">
-<link rel="stylesheet" href="../components/asset-builds/css/styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/chroma-kss-styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/kss-only.css">
<link rel="stylesheet" href="../components/asset-builds/css/breadcrumb.css">
+<link rel="stylesheet" href="../components/asset-builds/css/clearfix.css">
<link rel="stylesheet" href="../components/asset-builds/css/components.css">
<link rel="stylesheet" href="../components/asset-builds/css/footer.css">
<link rel="stylesheet" href="../components/asset-builds/css/messages.css">
+<link rel="stylesheet" href="../components/asset-builds/css/more-link.css">
<link rel="stylesheet" href="../components/asset-builds/css/skip-link.css">
+<link rel="stylesheet" href="../components/asset-builds/css/tabs.css">
<link rel="stylesheet" href="../components/asset-builds/css/visually-hidden.css">
</head>
diff --git a/STARTERKIT/styleguide/section-navigation.html b/STARTERKIT/styleguide/section-navigation.html
index 7e6c444..ad67bd7 100644
--- a/STARTERKIT/styleguide/section-navigation.html
+++ b/STARTERKIT/styleguide/section-navigation.html
@@ -11,14 +11,16 @@
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../components/asset-builds/css/base.css">
<link rel="stylesheet" href="../components/asset-builds/css/layouts.css">
-<link rel="stylesheet" href="../components/asset-builds/css/styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/chroma-kss-styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/kss-only.css">
<link rel="stylesheet" href="../components/asset-builds/css/breadcrumb.css">
+<link rel="stylesheet" href="../components/asset-builds/css/clearfix.css">
<link rel="stylesheet" href="../components/asset-builds/css/components.css">
<link rel="stylesheet" href="../components/asset-builds/css/footer.css">
<link rel="stylesheet" href="../components/asset-builds/css/messages.css">
+<link rel="stylesheet" href="../components/asset-builds/css/more-link.css">
<link rel="stylesheet" href="../components/asset-builds/css/skip-link.css">
+<link rel="stylesheet" href="../components/asset-builds/css/tabs.css">
<link rel="stylesheet" href="../components/asset-builds/css/visually-hidden.css">
</head>
@@ -146,7 +148,7 @@ page navigation.</p>
<div class="kss-source kss-style">
- Source: <code>components.scss</code>, line 57
+ Source: <code>components.scss</code>, line 56
</div>
</div>
<section id="kssref-navigation-breadcrumb" class="kss-section kss-section--depth-2">
@@ -625,12 +627,9 @@ with the <code>visually-hidden</code> component.</p>
</div>
<div class="kss-modifier__example">
- <ul class="tabs [modifier class]">
- <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
-</ul>
+
+&lt;ul class=&quot;tabs clearfix [modifier class]&quot;&gt;&lt;/ul&gt;
</div>
<div class="kss-modifier__name kss-style">
@@ -640,25 +639,19 @@ with the <code>visually-hidden</code> component.</p>
Secondary tabs
</div>
<div class="kss-modifier__example">
- <ul class="tabs tabs--secondary">
- <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
-</ul>
+
+&lt;ul class=&quot;tabs clearfix tabs--secondary&quot;&gt;&lt;/ul&gt;
</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;
- &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>
+ <pre class="prettyprint linenums lang-html"><code data-language="html">
+
+&amp;lt;ul class=&amp;quot;tabs clearfix [modifier class]&amp;quot;&amp;gt;&amp;lt;/ul&amp;gt;</code></pre>
</div>
<div class="kss-source kss-style">
- Source: <code>navigation/tabs/_tabs.scss</code>, line 4
+ Source: <code>navigation/tabs/tabs.scss</code>, line 3
</div>
</section>
<section id="kssref-navigation-tabs-stacked" class="kss-section kss-section--depth-3">
@@ -689,38 +682,26 @@ is slightly different.</p>
<div class="kss-modifier__example">
- <ul class="tabs ">
- <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
-</ul>
+
+
+&lt;ul class=&quot;tabs clearfix &quot;&gt;&lt;/ul&gt;
-<ul class="tabs tabs--secondary">
- <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
- <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
-</ul>
+&lt;ul class=&quot;tabs clearfix tabs--secondary&quot;&gt;&lt;/ul&gt;
</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;
- &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;
+ <pre class="prettyprint linenums lang-html"><code data-language="html">
-&lt;ul class=&quot;tabs tabs--secondary&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>
+&amp;lt;ul class=&amp;quot;tabs clearfix &amp;quot;&amp;gt;&amp;lt;/ul&amp;gt;
+
+
+&amp;lt;ul class=&amp;quot;tabs clearfix tabs--secondary&amp;quot;&amp;gt;&amp;lt;/ul&amp;gt;</code></pre>
</div>
<div class="kss-source kss-style">
- Source: <code>navigation/tabs/_tabs.scss</code>, line 14
+ Source: <code>navigation/tabs/tabs.scss</code>, line 13
</div>
</section>
</article>
diff --git a/STARTERKIT/styleguide/section-sass.html b/STARTERKIT/styleguide/section-sass.html
index ad8bcd3..95581ec 100644
--- a/STARTERKIT/styleguide/section-sass.html
+++ b/STARTERKIT/styleguide/section-sass.html
@@ -11,14 +11,16 @@
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../components/asset-builds/css/base.css">
<link rel="stylesheet" href="../components/asset-builds/css/layouts.css">
-<link rel="stylesheet" href="../components/asset-builds/css/styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/chroma-kss-styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/kss-only.css">
<link rel="stylesheet" href="../components/asset-builds/css/breadcrumb.css">
+<link rel="stylesheet" href="../components/asset-builds/css/clearfix.css">
<link rel="stylesheet" href="../components/asset-builds/css/components.css">
<link rel="stylesheet" href="../components/asset-builds/css/footer.css">
<link rel="stylesheet" href="../components/asset-builds/css/messages.css">
+<link rel="stylesheet" href="../components/asset-builds/css/more-link.css">
<link rel="stylesheet" href="../components/asset-builds/css/skip-link.css">
+<link rel="stylesheet" href="../components/asset-builds/css/tabs.css">
<link rel="stylesheet" href="../components/asset-builds/css/visually-hidden.css">
</head>