diff --git a/STARTERKIT/components/asset-builds/css/clearfix.css b/STARTERKIT/components/asset-builds/css/clearfix.css new file mode 100644 index 0000000000000000000000000000000000000000..3a06e2ddd32e2405442981dbf2be119ed37b2e1d --- /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 c8cd3018b0b8f763f87c7965bbc4f5f02276bda5..f4802614fdbf5ee4531fa5c438e7ef463b9f6b92 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 0000000000000000000000000000000000000000..c16d52f5ac57e561e8d314b1be1defd30f9d5df3 --- /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 5a25f74f5093f94214ab1e4c8fff3ef26cd33f0f..9082fde4d3dfdb3d0b7b28f739e8119a597ddecc 100644 --- a/STARTERKIT/styleguide/index.html +++ b/STARTERKIT/styleguide/index.html @@ -11,14 +11,16 @@ - + + + diff --git a/STARTERKIT/styleguide/section-base.html b/STARTERKIT/styleguide/section-base.html index 475fe5fdcc8d2389e9325898d87107b959ba173d..553b9f3682ca1c4bc92994772991806a84c3dbc9 100644 --- a/STARTERKIT/styleguide/section-base.html +++ b/STARTERKIT/styleguide/section-base.html @@ -11,14 +11,16 @@ - + + + @@ -213,6 +215,12 @@ 2.6.2Scalable vector + +
  • + + 2.7Root +
    • @@ -1895,6 +1903,58 @@ used by web browsers to style hyperlinks.

    Source: base/embedded/_embedded.scss, line 35 +
    +
    +

    + + + 2.7 + + base.root + + + Root + +

    + +
    +

    The HTML root component contains the doctype, HTML element, HEAD element and +BODY element. It also contains the CSS for those elements and the * +universal selector.

    + +
    + +
    + +
    +
    + Example
    + + +
    + + +
    + +
    +
    + 
    
+<!DOCTYPE html>
+<html >
+  <head>
+          <title></title>
+      </head>
+  <body >
+          
+      </body>
+</html>
+
    +
    + +
    + Source: base/root/_root.scss, line 3 +
    +
    diff --git a/STARTERKIT/styleguide/section-components.html b/STARTERKIT/styleguide/section-components.html index 1c0f38802e9917b66c2028600acdc2a6c4dae564..bd0b08a757b359e2be47cc862acc9607dcee8933 100644 --- a/STARTERKIT/styleguide/section-components.html +++ b/STARTERKIT/styleguide/section-components.html @@ -11,14 +11,16 @@ - + + + @@ -333,7 +335,7 @@ elements. See http://
    - Source: components/clearfix/_clearfix.scss, line 1 + Source: components/clearfix/clearfix.scss, line 3
    @@ -543,8 +545,8 @@ elements. See http://
    - Copyright statement here. Legalize here. -
    + Copyright statement here. Legalize here. + @@ -553,8 +555,8 @@ elements. See     http:// 
    
 
 <footer class="footer " role="contentinfo">
-  Copyright statement here. Legalize here.
-</footer>
+      Copyright statement here. Legalize here.
+  </footer>
    diff --git a/STARTERKIT/styleguide/section-forms.html b/STARTERKIT/styleguide/section-forms.html index 66c29871c13085a7c39ee9f9c4230a36c78ef783..21937cb5e05558dcd5553cc5dd300d054ee2193c 100644 --- a/STARTERKIT/styleguide/section-forms.html +++ b/STARTERKIT/styleguide/section-forms.html @@ -11,14 +11,16 @@ - + + + @@ -212,7 +214,7 @@ or form elements.

    - Source: components.scss, line 71 + Source: components.scss, line 69
    diff --git a/STARTERKIT/styleguide/section-layouts.html b/STARTERKIT/styleguide/section-layouts.html index e2dfcdce696275dae3845ba8b4a554863e45d10c..18dc12e70dc34144b37707fb7393d946d60381c4 100644 --- a/STARTERKIT/styleguide/section-layouts.html +++ b/STARTERKIT/styleguide/section-layouts.html @@ -11,14 +11,16 @@ - + + + diff --git a/STARTERKIT/styleguide/section-navigation.html b/STARTERKIT/styleguide/section-navigation.html index 7e6c444d3f7f34d61419871fc355a5e38a28c6da..ad67bd74d69ac5874be06f6f0a99fefe91c998fd 100644 --- a/STARTERKIT/styleguide/section-navigation.html +++ b/STARTERKIT/styleguide/section-navigation.html @@ -11,14 +11,16 @@ - + + + @@ -146,7 +148,7 @@ page navigation.

    - Source: components.scss, line 57 + Source: components.scss, line 56
    @@ -625,12 +627,9 @@ with the visually-hidden component.

    - + +<ul class="tabs clearfix [modifier class]"></ul>
    @@ -640,25 +639,19 @@ with the visually-hidden component.

    Secondary tabs
    - + +<ul class="tabs clearfix tabs--secondary"></ul>
    - 
    <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;
    - Source: navigation/tabs/_tabs.scss, line 4 + Source: navigation/tabs/tabs.scss, line 3
    @@ -689,38 +682,26 @@ is slightly different.

    - + + +<ul class="tabs clearfix "></ul> - +<ul class="tabs clearfix tabs--secondary"></ul>
    - 
    <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>
+            
    
 
-<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 &quot;&gt;&lt;/ul&gt;
+
+
+&lt;ul class=&quot;tabs clearfix tabs--secondary&quot;&gt;&lt;/ul&gt;
    - Source: navigation/tabs/_tabs.scss, line 14 + Source: navigation/tabs/tabs.scss, line 13
    diff --git a/STARTERKIT/styleguide/section-sass.html b/STARTERKIT/styleguide/section-sass.html index ad8bcd31854ef951ca03c793b055e508544e86f7..95581ec9797a12911d2c0a01193b37b31b741fcc 100644 --- a/STARTERKIT/styleguide/section-sass.html +++ b/STARTERKIT/styleguide/section-sass.html @@ -11,14 +11,16 @@ - + + +