diff --git a/STARTERKIT/styleguide/section-base.html b/STARTERKIT/styleguide/section-base.html index c3171ef4c29f44cce0135e94d2dabbef5b539757..a91cc18f68df078c0bd20e57bcc74b22b278ddc4 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.

-
- 
<h1 class="">Heading Level 1 (h1)</h1>
+                  

+            
<h1 class="">Heading Level 1 (h1)</h1>
 <p>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.</p>
 <h2 class="">Heading Level 2 (h2)</h2>
 <p>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.</p>
@@ -353,8 +353,8 @@ heading but still want your text to be displayed inline.

 <h6 class="">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</h6>
 <p>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.</p>
 

-        

-      
+
+
Source: base/headings/_headings.scss, line 1
@@ -437,11 +437,11 @@ download a resource.

-
- 
This is a <a href="#" class="[modifier class]">link to another web page</a>.
+                  

+            
This is a <a href="#" class="[modifier class]">link to another web page</a>.
 

-        

-      
+
+
Source: base/links/_links.scss, line 1
@@ -513,8 +513,8 @@ erat porttitor ligula, eget lacinia odio sem nec elit.

-
- 
<p class="">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
+                  

+            
<p class="">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.</p>
 
@@ -527,8 +527,8 @@ elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
 non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi
 erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 

-        

-      
+
+
Source: base/grouping/_grouping.scss, line 152
@@ -604,8 +604,8 @@ explicitly matter.

-
- 
<ol class="">
+                  

+            
<ol class="">
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetur adipiscing elit</li>
   <li>Integer molestie lorem at massa</li>
@@ -623,8 +623,8 @@ explicitly matter.

   <li>Eget porttitor lorem</li>
 </ol>
 

-        

-      
+
+
Source: base/grouping/_grouping.scss, line 26
@@ -678,8 +678,8 @@ explicitly matter.

-
- 
<ul class="">
+                  

+            
<ul class="">
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetur adipiscing elit</li>
   <li>Integer molestie lorem at massa</li>
@@ -697,8 +697,8 @@ explicitly matter.

   <li>Eget porttitor lorem</li>
 </ul>
 

-        

-      
+
+
Source: base/grouping/_grouping.scss, line 17
@@ -743,8 +743,8 @@ explicitly matter.

-
- 
<dl class="">
+                  

+            
<dl class="">
   <dt>Description lists</dt>
   <dd>A description list is perfect for defining terms.</dd>
   <dt>Euismod</dt>
@@ -754,8 +754,8 @@ explicitly matter.

   <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
 </dl>
 

-        

-      
+
+
Source: base/grouping/_grouping.scss, line 35
@@ -807,8 +807,8 @@ the name of the source work in <cite>.

-
- 
<blockquote class="">
+                  

+            
<blockquote class="">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
   erat a ante.</p>
 </blockquote>
@@ -820,8 +820,8 @@ the name of the source work in <cite>.

   Title</cite></footer>
 </blockquote>
 

-        

-      
+
+
Source: base/grouping/_grouping.scss, line 94
@@ -868,8 +868,8 @@ caption of the figure.

-
- 
<figure class="">
+                  

+            
<figure class="">
   An illustration, diagram, photo, code listing, etc.
 </figure>
 
@@ -878,8 +878,8 @@ caption of the figure.

   <figcaption>Figure 1</figcaption>
 </figure>
 

-        

-      
+
+
Source: base/grouping/_grouping.scss, line 114
@@ -925,8 +925,8 @@ ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

-
- 
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
+                  

+            
<p>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.</p>
 
@@ -935,8 +935,8 @@ dolor id nibh ultricies vehicula.</p>
 <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
 ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
 

-        

-      
+
+
Source: base/grouping/_grouping.scss, line 135
@@ -977,14 +977,14 @@ fragments of computer code, ASCII art, etc.

-
- 
The following text is preformatted:
+                  

+            
The following text is preformatted:
 <pre class="">
 (ノ゜Д゜)ノ ︵ ┻━┻
 </pre>
 

-        

-      
+
+
Source: base/grouping/_grouping.scss, line 170
@@ -1059,8 +1059,8 @@ fragments of computer code, ASCII art, etc.

-
- 
<table class="">
+                  

+            
<table class="">
   <caption>Optional table caption.</caption>
   <thead>
     <tr>
@@ -1100,8 +1100,8 @@ fragments of computer code, ASCII art, etc.

   </tfoot>
 </table>
 

-        

-      
+
+
Source: base/tables/_tables.scss, line 1
@@ -1169,13 +1169,13 @@ text. Bold text nested inside italic text should still be -
- 
The following snippets of text are <strong class="">rendered</strong> as <b class="">bold
+                  

+            
The following snippets of text are <strong class="">rendered</strong> as <b class="">bold
 text</b>. Bold text nested inside <i>italic text <b>should</b></i> <em>still be
 <strong>bold</strong></em>.
 

-        

-      
+
+
Source: base/text/_text.scss, line 30
@@ -1217,13 +1217,13 @@ Italic text nested inside bold text should still be -
- 
The following snippets of text are <em class="">rendered</em> as <i class="">italic text</i>.
+                  

+            
The following snippets of text are <em class="">rendered</em> as <i class="">italic text</i>.
 Italic text nested inside <b>bold text <i>should</i></b> <strong>still be
 <em>italic</em></strong>.
 

-        

-      
+
+
Source: base/text/_text.scss, line 105
@@ -1262,12 +1262,12 @@ And HTML is an acroynm. -
- 
An abbreviation of the word attribute is <abbr class="" title="attribute">attr</abbr>.
+                  

+            
An abbreviation of the word attribute is <abbr class="" title="attribute">attr</abbr>.
 And <abbr class="" title="HyperText Markup Language">HTML</abbr> is an acroynm.
 

-        

-      
+
+
Source: base/text/_text.scss, line 9
@@ -1306,13 +1306,13 @@ And <abbr class="" title="HyperText Markup Language">H -
- 
<p>Who is your favorite doctor (in <cite class="">Doctor Who</cite>)?</p>
+                  

+            
<p>Who is your favorite doctor (in <cite class="">Doctor Who</cite>)?</p>
 
 <p>Comment by <cite class=""><a href="#">Oli Walberg</a></cite></p>
 

-        

-      
+
+
Source: base/text/_text.scss, line 50
@@ -1359,8 +1359,8 @@ what that meant.

-
- 
<p>The <code class="">code</code> element represents a fragment of computer code.</p>
+                  

+            
<p>The <code class="">code</code> element represents a fragment of computer code.</p>
 
 <p>There are <var class="">n</var> flavors of ice cream to be available for purchase!</p>
 
@@ -1369,8 +1369,8 @@ what that meant.</p>
 
 <p>To make George eat an apple, select <kbd class="">File | Eat Apple…</kbd></p>
 

-        

-      
+
+
Source: base/text/_text.scss, line 62
@@ -1407,11 +1407,11 @@ what that meant.</p> -
- 
<del class="">This line of text is meant to be treated as deleted text.</del>
+                  

+            
<del class="">This line of text is meant to be treated as deleted text.</del>
 

-        

-      
+
+
Source: base/text/_text.scss, line 80
@@ -1452,15 +1452,15 @@ and so Hammond ordered the iris to be opened.

-
- 
<p>The <dfn class="" id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn> is a
+                  

+            
<p>The <dfn class="" id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn> is a
 device that allows off-world teams to open the iris.</p>
 
 <p>Teal'c activated his <a href="#gdo"><abbr title="Garage Door Opener">GDO</abbr></a>
 and so Hammond ordered the iris to be opened.</p>
 

-        

-      
+
+
Source: base/text/_text.scss, line 92
@@ -1498,12 +1498,12 @@ document. -
- 
<ins class="">This line of text is meant to be treated as an addition to the
+                  

+            
<ins class="">This line of text is meant to be treated as an addition to the
 document.</ins>
 

-        

-      
+
+
Source: base/text/_text.scss, line 124
@@ -1542,12 +1542,12 @@ context.

-
- 
You can use the mark tag to <mark>highlight</mark> text like this.
+                  

+            
You can use the mark tag to <mark>highlight</mark> text like this.
 <mark class="">New!</mark>
 

-        

-      
+
+
Source: base/text/_text.scss, line 136
@@ -1587,13 +1587,13 @@ source. -
- 
<q class="" cite="http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">The
+                  

+            
<q class="" cite="http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">The
 <code>q</code> element represents some phrasing content quoted from another
 source.</q>
 

-        

-      
+
+
Source: base/text/_text.scss, line 150
@@ -1630,11 +1630,11 @@ source.</q> -
- 
<s class="">This line of text is meant to be treated as no longer accurate.</s>
+                  

+            
<s class="">This line of text is meant to be treated as no longer accurate.</s>
 

-        

-      
+
+
Source: base/text/_text.scss, line 163
@@ -1672,11 +1672,11 @@ text at 80% the size of the parent.

-
- 
<small class="">This line of text is meant to be treated as fine print.</small>
+                  

+            
<small class="">This line of text is meant to be treated as fine print.</small>
 

-        

-      
+
+
Source: base/text/_text.scss, line 175
@@ -1714,11 +1714,11 @@ represents a subscript.

-
- 
<abbr>M<sup class="">lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub class="">4</sub>x<sup class="">n</sup></code>.
+                  

+            
<abbr>M<sup class="">lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub class="">4</sub>x<sup class="">n</sup></code>.
 

-        

-      
+
+
Source: base/text/_text.scss, line 189
@@ -1756,11 +1756,11 @@ used by web browsers to style hyperlinks.

-
- 
<u class="">This line of text will render as underlined</u>
+                  

+            
<u class="">This line of text will render as underlined</u>
 

-        

-      
+
+
Source: base/text/_text.scss, line 215
@@ -1824,16 +1824,16 @@ used by web browsers to style hyperlinks.

-
- 
<p>An image <img class="" src="kss-assets/sample-inline.png"> that is inline with other text.</p>
+                  

+            
<p>An image <img class="" src="kss-assets/sample-inline.png"> that is inline with other text.</p>
 
 <figure style="width: 50%; max-width: 300px;">
   <figcaption>An image inside a figure.</figcaption>
   <img class="" src="kss-assets/sample.png">
 </figure>
 

-        

-      
+
+
Source: base/embedded/_embedded.scss, line 7
@@ -1877,8 +1877,8 @@ used by web browsers to style hyperlinks.

-
- 
<p>A svg image <svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  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 "/></svg> that is inline with other text.</p>
+                  

+            
<p>A svg image <svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  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 "/></svg> that is inline with other text.</p>
 
 <figure style="width: 50%; max-width: 300px;">
   <figcaption>A svg inside a figure.</figcaption>
@@ -1887,8 +1887,8 @@ used by web browsers to style hyperlinks.

   </svg>
 </figure>
 

-        

-      
+
+
Source: base/embedded/_embedded.scss, line 37
diff --git a/STARTERKIT/styleguide/section-components.html b/STARTERKIT/styleguide/section-components.html index 1fff1c440703a0ff4655ed22b49bbb1c7a3b8ff5..164ac0410b8791b9d54372748c025443d36ccf7c 100644 --- a/STARTERKIT/styleguide/section-components.html +++ b/STARTERKIT/styleguide/section-components.html @@ -274,16 +274,16 @@ building a good component.

-
- 
<div class="box [modifier class]">
+                  

+            
<div class="box [modifier class]">
   <h2 class="box__title">Box title</h2>
   <div class="box__content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>
 </div>
 

-        

-      
+
+
Source: components/box/_box.scss, line 1
@@ -323,13 +323,13 @@ elements. See http:// -
- 
<div class="clearfix">
+                  

+            
<div class="clearfix">
   <div style="float: left; height: 50px; width: 50%;">A floated item.</div>
 </div>
 

-        

-      
+
+
Source: components/clearfix/_clearfix.scss, line 1
@@ -431,8 +431,8 @@ elements. See http:// -
- 
<div class="comment__section">
+                  

+            
<div class="comment__section">
   <article class="comment [modifier class]">
     <header>
       <p><a href="#">Jane A. User</a> replied on <time>Wed, 08/19/2015 - 17:51</time>
@@ -448,8 +448,8 @@ elements. See http://
   </article>
 </div>
 

-        

-      
+
+
Source: components/comment/_comment.scss, line 1
@@ -496,8 +496,8 @@ elements. See http:// -
- 
<div class="divider "></div>
+                  

+            
<div class="divider "></div>
 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -509,8 +509,8 @@ elements. See http://
 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 

-        

-      
+
+
Source: components/divider/_divider.scss, line 1
@@ -546,14 +546,14 @@ elements. See http:// -
- 
  
+                  

+            
  
   <footer class="footer " role="contentinfo">
     Copyright statement here. Legalize here.
   </footer>
 

-        

-      
+
+
Source: components/footer/footer.scss, line 3
@@ -609,8 +609,8 @@ elements. See http:// -
- 
<header class="header " role="banner">
+                  

+            
<header class="header " role="banner">
   <a href="/" title="Home" rel="home" class="header__logo">
     <img src="kss-assets/sample-inline.png" alt="Home" class="header__logo-image">
   </a>
@@ -635,8 +635,8 @@ elements. See http://
   </div>
 </header>
 

-        

-      
+
+
Source: components/header/_header.scss, line 5
@@ -680,13 +680,13 @@ the .js-hidden class.

-
- 
<div class="hidden ">
+                  

+            
<div class="hidden ">
   This content is hidden.
 </div>
 

-        

-      
+
+
Source: components/hidden/_hidden.scss, line 1
@@ -725,11 +725,11 @@ element directly.

-
- 
<mark class="highlight-mark">New</mark>
+                  

+            
<mark class="highlight-mark">New</mark>
 

-        

-      
+
+
Source: components/highlight-mark/_highlight-mark.scss, line 1
@@ -769,14 +769,14 @@ element directly.

-
- 
<ul class="inline-links ">
+                  

+            
<ul class="inline-links ">
   <li class="inline-links__item"><a href="#">Read more</a></li>
   <li class="inline-links__item"><a href="#">Comment</a></li>
 </ul>
 

-        

-      
+
+
Source: components/inline-links/_inline-links.scss, line 1
@@ -814,12 +814,12 @@ element directly.

-
- 
<h4 class="inline-sibling ">A Heading</h4>
+                  

+            
<h4 class="inline-sibling ">A Heading</h4>
 <p>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.</p>
 

-        

-      
+
+
Source: components/inline-sibling/_inline-sibling.scss, line 1
@@ -993,8 +993,8 @@ should use the .messages--error class.

-
- 

+                  

+            

 
 <div class="messages [modifier class]" role="contentinfo" aria-label="Status message" >
   
@@ -1010,8 +1010,8 @@ should use the .messages--error class.

   
   </div>
 

-        

-      
+
+
Source: components/messages/messages.scss, line 3
@@ -1053,13 +1053,13 @@ performance.

-
- 
<p class="print-none">
+                  

+            
<p class="print-none">
   This item will not be printed.
 </p>
 

-        

-      
+
+
Source: components/print-none/_print-none.scss, line 1
@@ -1115,13 +1115,13 @@ intrinsic aspect ratio is preserved at any screen width. The -
- 
<div class="responsive-video [modifier class]">
+                  

+            
<div class="responsive-video [modifier class]">
   <iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
 </div>
 

-        

-      
+
+
Source: components/responsive-video/_responsive-video.scss, line 1
@@ -1199,13 +1199,13 @@ intrinsic aspect ratio is preserved at any screen width. The -
- 
<div class="visually-hidden [modifier class]">
+                  

+            
<div class="visually-hidden [modifier class]">
   This text will be read by screen readers, but will be visually hidden.
 </div>
 

-        

-      
+
+
Source: components/visually-hidden/_visually-hidden.scss, line 1
@@ -1246,15 +1246,15 @@ intrinsic aspect ratio is preserved at any screen width. The -
- 
<div>
+                  

+            
<div>
   <mark class="watermark ">Unpublished</mark>
 
       <div>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.</div>
   </div>
 

-        

-      
+
+
Source: components/watermark/_watermark.scss, line 1
@@ -1296,13 +1296,13 @@ variable: $with-wireframes: true;

-
- 
<div class="wireframe">
+                  

+            
<div class="wireframe">
   An item inside a wireframe.
 </div>
 

-        

-      
+
+
Source: components/wireframe/_wireframe.scss, line 3
diff --git a/STARTERKIT/styleguide/section-forms.html b/STARTERKIT/styleguide/section-forms.html index 873df8b75bb37fecc181be5995ca4a98260aa0a4..73c7ab410f654f6c106ddd27e5fe60191bdf33bf 100644 --- a/STARTERKIT/styleguide/section-forms.html +++ b/STARTERKIT/styleguide/section-forms.html @@ -369,8 +369,8 @@ see the button component. -
- 
<p>
+                  

+            
<p>
   <button type="button" class="[modifier class]">Standard button</button>
   <button type="button" class="[modifier class]" disabled>disabled button</button>
 </p>
@@ -395,8 +395,8 @@ see the button component.

-        

-      
+
+
Source: base/forms/_forms.scss, line 97
@@ -455,8 +455,8 @@ common name given by the <legend> element.

-
- 
<fieldset class="">
+                  

+            
<fieldset class="">
   <legend>A fieldset</legend>
   <label for="fieldsetText">Text input</label>
   <input type="text" id="fieldsetText" placeholder="Text input">
@@ -479,8 +479,8 @@ common name given by the <legend> element.

   </div>
 </fieldset>
 

-        

-      
+
+
Source: base/forms/_forms.scss, line 206
@@ -615,8 +615,8 @@ HTML5 types: text, search, tel, url -
- 
<div>
+                  

+            
<div>
   <label for="inputText">Text</label>
   <input type="text" class="" id="inputText" placeholder="Enter some text">
 </div>
@@ -714,8 +714,8 @@ HTML5 types: text, search, tel, url
   <input type="file" class="" disabled id="inputFile">
 </div>
 

-        

-      
+
+
Source: base/forms/_forms.scss, line 130
@@ -761,8 +761,8 @@ implementation doesn't respect box-sizing, padding -
- 
<div>
+                  

+            
<div>
   <label><input type="checkbox" class=""> Check me out</label>
 </div>
 
@@ -770,8 +770,8 @@ implementation doesn't respect box-sizing, padding
   <label><input type="checkbox" class="" value="" disabled> Option two is disabled</label>
 </div>
 

-        

-      
+
+
Source: base/forms/_forms.scss, line 166
@@ -821,8 +821,8 @@ implementation doesn't respect box-sizing, padding -
- 
<div>
+                  

+            
<div>
   <label><input type="radio" class="" value="option1" name="example-radio" checked> Option one</label>
 </div>
 
@@ -834,8 +834,8 @@ implementation doesn't respect box-sizing, padding
   <label><input type="radio" class="" value="option3" name="example-radio" disabled> Option three is disabled</label>
 </div>
 

-        

-      
+
+
Source: base/forms/_forms.scss, line 178
@@ -881,8 +881,8 @@ putting the form control inside the label element itself.

-
- 
<div>
+                  

+            
<div>
   <label class="" for="lableInputText">A label for a text input</label>
   <input type="text" id="lableInputText" placeholder="Enter some text">
 </div>
@@ -891,8 +891,8 @@ putting the form control inside the label element itself.

   <label class=""><input type="checkbox"> A label wrapped around a checkbox</label>
 </div>
 

-        

-      
+
+
Source: base/forms/_forms.scss, line 238
@@ -969,8 +969,8 @@ styling of <select>, unless a border property is -
- 
<div>
+                  

+            
<div>
   <label for="selectDropdown">A standard drop-down</label>
   <select class="" id="selectDropdown">
     <option>Option 1</option>
@@ -1009,8 +1009,8 @@ styling of <select>, unless a border property is
   </select>
 </div>
 

-        

-      
+
+
Source: base/forms/_forms.scss, line 254
@@ -1054,8 +1054,8 @@ styling of <select>, unless a border property is -
- 
<div>
+                  

+            
<div>
   <label for="exampleTextarea">Text area</label>
   <textarea class="" rows="3" id="exampleTextarea"></textarea>
 </div>
@@ -1064,8 +1064,8 @@ styling of <select>, unless a border property is
   <textarea class="" rows="3" id="exampleTextarea" disabled></textarea>
 </div>
 

-        

-      
+
+
Source: base/forms/_forms.scss, line 276
@@ -1130,8 +1130,8 @@ item allowing them to choose an option.

-
- 
<input type="text" value="" class="autocomplete [modifier class]">
+                  

+            
<input type="text" value="" class="autocomplete [modifier class]">
 <div class="autocomplete__list-wrapper">
   <ul class="autocomplete__list">
   <li class="autocomplete__list-item">guwatif</li>
@@ -1140,8 +1140,8 @@ item allowing them to choose an option.

 </div>
 <p>&nbsp;</p>
 

-        

-      
+
+
Source: forms/autocomplete/_autocomplete.scss, line 1
@@ -1285,8 +1285,8 @@ link).

-
- 
<p>
+                  

+            
<p>
   <button class="button [modifier class]" type="button">Standard button</button>
   <button class="button [modifier class]" type="button" disabled>Disabled button</button>
 </p>
@@ -1315,8 +1315,8 @@ link).

   <a class="button [modifier class]" disabled href="#">Disabled link button</a>
 </p>
 

-        

-      
+
+
Source: forms/button/_button.scss, line 1
@@ -1386,8 +1386,8 @@ link).

-
- 
<fieldset class="collapsible-fieldset [modifier class]">
+                  

+            
<fieldset class="collapsible-fieldset [modifier class]">
   <legend>
     <span class="collapsible-fieldset__legend">
       A collapsible fieldset
@@ -1399,8 +1399,8 @@ link).

   </div>
 </fieldset>
 

-        

-      
+
+
Source: forms/collapsible-fieldset/_collapsible-fieldset.scss, line 1
@@ -1522,8 +1522,8 @@ link).

-
- 
<div class="form-item [modifier class]">
+                  

+            
<div class="form-item [modifier class]">
   <label class="form-item__label" for="form-item-input">Label <span class="form-item__required" title="This field is required.">*</span></label>
   <input class="form-item__widget" type="text" id="form-item-input" value="Text value">
   <div class="form-item__description">
@@ -1538,8 +1538,8 @@ link).

   </div>
 </div>
 

-        

-      
+
+
Source: forms/form-item/_form-item.scss, line 4
@@ -1633,8 +1633,8 @@ the normal form item and is placed on each of the nested form items.

-
- 
<div class="form-item">
+                  

+            
<div class="form-item">
   <label class="form-item__label" for="group">Label for the group</label>
   <div class="form-item__description">
     Form group description.
@@ -1657,8 +1657,8 @@ the normal form item and is placed on each of the nested form items.

   </div>
 </div>
 

-        

-      
+
+
Source: forms/form-item/_form-item.scss, line 17
@@ -1801,8 +1801,8 @@ delete this component to save file weight in the generated CSS.

-
- 
<table class="form-table__sticky-header" style="position: fixed; visibility: visible;">
+                  

+            
<table class="form-table__sticky-header" style="position: fixed; visibility: visible;">
 <thead>
   <tr>
     <th>Permission</th>
@@ -1908,8 +1908,8 @@ delete this component to save file weight in the generated CSS.

   </tr>
 </tbody>
 </table>

-        

-      
+
+
Source: forms/form-table/_form-table.scss, line 1
@@ -1967,15 +1967,15 @@ delete this component to save file weight in the generated CSS.

-
- 
<div class="progress-bar [modifier class]">
+                  

+            
<div class="progress-bar [modifier class]">
   <div class="progress-bar__bar"><div class="progress-bar__fill" style="width: 60%"></div></div>
   <div class="progress-bar__percentage">60%</div>
   <div class="progress-bar__message">Installing...</div>
 </div>
 

-        

-      
+
+
Source: forms/progress-bar/_progress-bar.scss, line 1
@@ -2015,14 +2015,14 @@ delete this component to save file weight in the generated CSS.

-
- 
<div class="progress-throbber ">
+                  

+            
<div class="progress-throbber ">
   <div class="progress-throbber__widget">&nbsp;</div>
   <div class="progress-throbber__message">Progress message</div>
 </div>
 

-        

-      
+
+
Source: forms/progress-throbber/_progress-throbber.scss, line 1
@@ -2064,16 +2064,16 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu -
- 
<textarea class="resizable-textarea " rows="5">
+                  

+            
<textarea class="resizable-textarea " rows="5">
 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.
 </textarea>
 <div class="resizable-textarea__grippie"></div>
 

-        

-      
+
+
Source: forms/resizable-textarea/_resizable-textarea.scss, line 1
@@ -2221,8 +2221,8 @@ delete this component to save file weight in the generated CSS.

-
- 
<table class="tabledrag-processed">
+                  

+            
<table class="tabledrag-processed">
 <thead><tr><th>Field</th><th>Label</th><th colspan="3">Format</th></tr></thead>
 <tbody>
   <tr class="region-message region-visible-message region-populated">
@@ -2333,8 +2333,8 @@ delete this component to save file weight in the generated CSS.

 </tbody>
 </table>
 

-        

-      
+
+
Source: forms/table-drag/_table-drag.scss, line 1
diff --git a/STARTERKIT/styleguide/section-layouts.html b/STARTERKIT/styleguide/section-layouts.html index ba136f45c97dc6bd371695a9258c9dca97ca806c..08536a80dc4d9c2513669c32a74669ba258d78e6 100644 --- a/STARTERKIT/styleguide/section-layouts.html +++ b/STARTERKIT/styleguide/section-layouts.html @@ -173,13 +173,13 @@ instead.

-
- 
<div class="layout-center [modifier class]">
+                  

+            
<div class="layout-center [modifier class]">
   This layout-center component has content that is centered on larger screens.
 </div>
 

-        

-      
+
+
Source: layouts/layout-center/_layout-center.scss, line 5
@@ -317,8 +317,8 @@ to the div to ensure its nested grid items align with the parent grid. -
- 
<div class="layout-3col ">
+                  

+            
<div class="layout-3col ">
   <div class="layout-3col__full">
     The <code>.layout-3col__full</code> grid item.
   </div>
@@ -377,8 +377,8 @@ to the div to ensure its nested grid items align with the parent grid.
   </div>
 </div>
 

-        

-      
+
+
Source: layouts/layout-3col/_layout-3col.scss, line 1
@@ -420,14 +420,14 @@ order.

-
- 
<div class="layout-swap">
+                  

+            
<div class="layout-swap">
   <div>This element comes <strong>first</strong> in the HTML source order.</div>
   <div class="layout-swap__top">This element comes <strong>second</strong> in the HTML source order.</div>
 </div>
 

-        

-      
+
+
Source: layouts/layout-swap/_layout-swap.scss, line 4
diff --git a/STARTERKIT/styleguide/section-navigation.html b/STARTERKIT/styleguide/section-navigation.html index 070454360b548bb911803fa8a358efe941ff0f12..8bfaa7bf2397b3ff1114eaab9505e16ff8691484 100644 --- a/STARTERKIT/styleguide/section-navigation.html +++ b/STARTERKIT/styleguide/section-navigation.html @@ -188,8 +188,8 @@ page navigation.

-
- 
<nav class="breadcrumb " role="navigation">
+                  

+            
<nav class="breadcrumb " role="navigation">
   <h2 class="breadcrumb__title">You are here</h2>
 
   <ol class="breadcrumb__list">
@@ -200,8 +200,8 @@ page navigation.

   </ol>
 </nav>
 

-        

-      
+
+
Source: navigation/breadcrumb/_breadcrumb.scss, line 4
@@ -244,8 +244,8 @@ page navigation.

-
- 
<div class="more-link ">
+                  

+            
<div class="more-link ">
   <a href="#">Read more…</a>
 </div>
 
@@ -253,8 +253,8 @@ page navigation.

   <a class="more-link__help-icon" href="#">Help</a>
 </div>
 

-        

-      
+
+
Source: navigation/more-link/_more-link.scss, line 1
@@ -319,8 +319,8 @@ side or below the main content.

-
- 
<ul class="nav-menu ">
+                  

+            
<ul class="nav-menu ">
   <li class="nav-menu__item">
     <a href="/" class="nav-menu__link">Home</a>
   </li>
@@ -349,8 +349,8 @@ side or below the main content.

   </li>
 </ul>
 

-        

-      
+
+
Source: navigation/nav-menu/_nav-menu.scss, line 1
@@ -395,8 +395,8 @@ side or below the main content.

-
- 
<ul class="navbar clearfix">
+                  

+            
<ul class="navbar clearfix">
   <li class="navbar__item"><a href="#">Home</a></li>
   <li class="navbar__item"><a href="#">Blandit Jugis</a></li>
   <li class="navbar__item"><a href="#">Causa Diam</a></li>
@@ -406,8 +406,8 @@ side or below the main content.

   <li class="navbar__item"><a href="#">Ut</a></li>
 </ul>
 

-        

-      
+
+
Source: navigation/navbar/_navbar.scss, line 4
@@ -471,8 +471,8 @@ is available.

-
- 
<ul class="pager ">
+                  

+            
<ul class="pager ">
   <li class="pager__item">
     <a title="Go to first page" href="/admin/content">« first</a>
   </li>
@@ -500,8 +500,8 @@ is available.

   </li>
 </ul>
 

-        

-      
+
+
Source: navigation/pager/_pager.scss, line 1
@@ -560,15 +560,15 @@ with the visually-hidden component.

-
- 

+                  

+            

 
 <a href="#main-content" class="skip-link [modifier class]">
   Skip to main content
 </a>
 

-        

-      
+
+
Source: navigation/skip-link/skip-link.scss, line 3
@@ -626,15 +626,15 @@ with the visually-hidden component.

-
- 
<ul class="tabs [modifier class]">
+                  

+            
<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>
 

-        

-      
+
+
Source: navigation/tabs/_tabs.scss, line 4
@@ -682,8 +682,8 @@ is slightly different.

-
- 
<ul class="tabs ">
+                  

+            
<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>
@@ -695,8 +695,8 @@ is slightly different.

   <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
 </ul>
 

-        

-      
+
+
Source: navigation/tabs/_tabs.scss, line 14
diff --git a/STARTERKIT/styleguide/section-sass.html b/STARTERKIT/styleguide/section-sass.html index 4124407a3e33682d60b2374e3773cd8874abf97c..1bd126f46134ad883a3cf8be8cb0f2556d3f83e8 100644 --- a/STARTERKIT/styleguide/section-sass.html +++ b/STARTERKIT/styleguide/section-sass.html @@ -233,11 +233,7 @@ -
- 
<!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. --><div class="kss-style"><h3 class="chroma-kss__title">branding</h3><p class="chroma-kss__description">The site's main colors. Can be used to define colors in other color schemes.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(black)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code></span> <span class="chroma-kss__reference">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</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(grey-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: button-disabled, fieldset-summary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(grey-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(grey-extra-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: resizable-grippie, row-stripe, watermark</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(white)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code></span> <span class="chroma-kss__reference">This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, skip-link, tabs-bg, tab-text-shadow</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code></span> <span class="chroma-kss__reference">This color is inherited by: link, link-visited, autocomplete-select-bg, progress-bar, status, status-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(red)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code></span> <span class="chroma-kss__reference">This color is inherited by: link-active, form-error, mark-highlight, error, error-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(yellow)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code></span> <span class="chroma-kss__reference">This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select</span></div><h3 class="chroma-kss__title">functional</h3><p class="chroma-kss__description">Colors used by functional parts of the design.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(text)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete, button, menu-active, status-highlight, warning, tab</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(text-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete-bg, body-bg, tabs-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(link)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #003353"></span><code class="chroma-kss__variable">color(link-visited)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#003353</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(link-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span> <span class="chroma-kss__reference">This color is inherited by: tabs-border</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(autocomplete)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(autocomplete-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(autocomplete-select)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(autocomplete-select-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(body-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(button)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(button-disabled)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(fieldset-summary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(form-error)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(mark-highlight)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(mark-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(menu-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffadb"></span><code class="chroma-kss__variable">color(preview-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffadb</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(progress-bar)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(progress-bar-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(progress-bar-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(resizable-grippie)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(row-stripe)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(row-disabled)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(skip-link)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(skip-link-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(status)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span> <span class="chroma-kss__reference">This color is inherited by: status-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f6fcff"></span><code class="chroma-kss__variable">color(status-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f6fcff</code> (status)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(status-highlight)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(warning)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffce6"></span><code class="chroma-kss__variable">color(warning-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffce6</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(warning-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(error)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span> <span class="chroma-kss__reference">This color is inherited by: error-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff0f0"></span><code class="chroma-kss__variable">color(error-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff0f0</code> (error)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(tabs-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (border)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(tabs-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(tab)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(tab-text-shadow)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #dddddd"></span><code class="chroma-kss__variable">color(tab-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#dddddd</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(tab-secondary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffadb"></span><code class="chroma-kss__variable">color(table-drag)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffadb</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffdf0"></span><code class="chroma-kss__variable">color(table-select)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffdf0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(watermark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div></div>
-
-
- +
Source: init/_colors.scss, line 3