Added form normalisation and button style. Removed IE 7 fixes.

sass/_zen.scss

@@ -269,6 +269,20 @@ body {
 }
 
 
+/* Form */
+
+.contact-form {
+  input,
+  textarea {
+    @include margin-bottom(.75);
+    width: 95%;
+  }
+
+  button {
+    display: block;
+  }
+}
+
 /* Print. */
 
 aside,

sass/base/_normalize.scss

@@ -17,6 +17,7 @@
 @import 'text/text';
 @import 'grouping/grouping';
 @import 'embedded/embedded';
+@import 'forms/forms';
 @import 'tables/tables';
 
 // Note: we allow the .button component (loaded by forms) to override :link, by

sass/base/embedded/_embedded.scss

@@ -15,11 +15,6 @@
 img {
   // Remove the border on images inside links in IE <11.
   border-style: none;
-  @if support-for(ie, 7) {
-    // Improve image quality when scaled in IE 7.
-    // sass-lint:disable no-vendor-prefixes
-    -ms-interpolation-mode: bicubic;
-  }
 }
 
 img,

sass/base/forms/_forms.scss

@@ -0,0 +1,237 @@
+// sass-lint:disable no-vendor-prefixes, no-css-comments
+
+// Form defaults
+//
+// These are the default base styles applied to HTML form elements.
+//
+// Component classes can override these styles, but if no class applies a style
+// to an HTML form element, these styles will be the ones displayed.
+//
+// Weight: -1
+//
+// Style guide: forms.base
+
+//
+// The following rules are from normalize.css and help to fix inconsistencies
+// across various browsers. You should probably leave these rules as is and jump
+// to the "Buttons" rule on line 92 before you start editing this file.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  // Keep form elements constrained in their containers.
+  box-sizing: border-box;
+  max-width: 100%;
+  // Change font properties to `inherit` in all browsers (opinionated).
+  font: inherit;
+  // Remove the margin in Firefox and Safari.
+  margin: 0;
+}
+
+// Show the overflow in IE.
+button {
+  overflow: visible;
+}
+
+// Remove the inheritance of text transform in Edge, Firefox, and IE.
+button,
+select {
+  text-transform: none;
+}
+
+// Show the overflow in Edge.
+input {
+  overflow: visible;
+  @if support-for(firefox, 29) {
+    // Firefox sets `line-height` using `!important` in the UA stylesheet.
+    line-height: normal;
+  }
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type='search'] {
+  // Correct the odd appearance in Chrome and Safari.
+  -webkit-appearance: textfield;
+  // Correct the outline style in Safari.
+  outline-offset: -2px;
+
+  // Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+// Correct the text style of placeholders in Chrome, Edge, and Safari.
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: .54;
+}
+
+::-webkit-file-upload-button {
+  // Correct the inability to style clickable types in iOS and Safari.
+  -webkit-appearance: button;
+  // Change font properties to `inherit` in Safari.
+  font: inherit;
+}
+
+// The %text-form-element can be used to style `<input>` text types and
+// `<textarea>` elements at the same time.
+%text-form-element {
+  // Add your styles.
+}
+
+// Inputs
+//
+// The `<input>` element is mostly used for text-based inputs that include the
+// HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
+// `time`, `number`, `range`, `color`, and `file`.
+//
+// Markup: forms-input.twig
+//
+// Style guide: forms.base.input
+
+[type='text'],
+[type='search'],
+[type='tel'],
+[type='url'],
+[type='email'],
+[type='password'],
+[type='date'],
+[type='time'],
+[type='number'] {
+  @extend %text-form-element !optional;
+}
+
+[type='range'] {
+  // Add your styles.
+}
+
+[type='color'] {
+  // Add your styles.
+}
+
+[type='file'] {
+  // Add your styles.
+}
+
+// Checkboxes
+//
+// If an `<input>` element has the `type='checkbox'` attribute set, the form
+// field is displayed as a checkbox.
+//
+// It's recommended that you don't attempt to style these elements. Firefox's
+// implementation doesn't respect `box-sizing`, `padding`, or `width`.
+//
+// Markup: forms-input-checkbox.twig
+//
+// Style guide: forms.base.input-checkbox
+
+// Radio buttons
+//
+// If an `<input>` element has the `type='radio'` attribute set, the form field
+// is displayed as a radio button.
+//
+// It's recommended that you don't attempt to style these elements. Firefox's
+// implementation doesn't respect `box-sizing`, `padding`, or `width`.
+//
+// Markup: forms-input-radio.twig
+//
+// Style guide: forms.base.input-radio
+
+[type='checkbox'],
+[type='radio'] {
+  // Add the correct box sizing in IE <11.
+  box-sizing: border-box;
+  // Remove the padding in IE <11.
+  padding: 0;
+}
+
+// Fieldsets
+//
+// The `<fieldset>` element groups a set of form fields, optionally under a
+// common name given by the `<legend>` element.
+//
+// Markup: forms-fieldset.twig
+//
+// Style guide: forms.base.fieldset
+
+fieldset {
+  // Change the border, margin, and padding in all browsers (opinionated).
+  @include padding(.35 .625 .65);
+  border: 1px solid color(border);
+  margin: 0 2px;
+}
+
+legend {
+  // Correct the text wrapping in Edge and IE.
+  box-sizing: border-box;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  // Correct the color inheritance from `fieldset` elements in IE.
+  color: inherit;
+  // Align legend text with a fieldset's text while removing left padding so
+  // people aren't caught out if they zero out fieldset padding.
+  margin-left: -5px;
+  padding: 0 5px;
+}
+
+// Labels
+//
+// The `<label>` element represents a caption of a form field. The label can be
+// associated with a specific form control by using the `for` attribute or by
+// putting the form control inside the label element itself.
+//
+// Markup: forms-label.twig
+//
+// Style guide: forms.base.label
+
+label {
+  // Drupal-style form labels.
+  display: block;
+  font-weight: bold;
+}
+
+// Select list
+//
+// The `<select>` element represents a form field for selecting amongst a set of
+// options.
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `<select>`, unless a `border` property is set.
+//
+// Markup: forms-select.twig
+//
+// Style guide: forms.base.select
+
+select {
+  // Add your styles.
+}
+
+optgroup {
+  // Restore the font weight unset by a previous rule.
+  font-weight: bold;
+}
+
+// Text areas
+//
+// The `<textarea>` element represents a multi-line plain text form field.
+//
+// Markup: forms-textarea.twig
+//
+// Style guide: forms.base.textarea
+
+textarea {
+  @extend %text-form-element !optional;
+  // Remove the default vertical scrollbar in IE.
+  overflow: auto;
+}

sass/base/forms/forms-button.twig

@@ -0,0 +1,24 @@
+<p>
+  <button type="button" class="{{modifier_class}}">Standard button</button>
+  <button type="button" class="{{modifier_class}}" disabled>disabled button</button>
+</p>
+<p>
+  <button type="submit" class="{{modifier_class}}">Submit button</button>
+  <button type="submit" class="{{modifier_class}}" disabled>Disabled submit button</button>
+</p>
+<p>
+  <button type="reset" class="{{modifier_class}}">Reset button</button>
+  <button type="reset" class="{{modifier_class}}" disabled>Disabled reset button</button>
+</p>
+<p>
+  <input type="button" class="{{modifier_class}}" value="Input button">
+  <input type="button" class="{{modifier_class}}" value="Disabled input button" disabled>
+</p>
+<p>
+  <input type="submit" class="{{modifier_class}}" value="Input submit button">
+  <input type="submit" class="{{modifier_class}}" value="Disabled input submit button" disabled>
+</p>
+<p>
+  <input type="reset" class="{{modifier_class}}" value="Input reset button">
+  <input type="reset" class="{{modifier_class}}" value="Disabled input reset button" disabled>
+</p>

sass/base/forms/forms-fieldset.twig

@@ -0,0 +1,22 @@
+<fieldset class="{{modifier_class}}">
+  <legend>A fieldset</legend>
+  <label for="fieldsetText">Text input</label>
+  <input type="text" id="fieldsetText" placeholder="Text input">
+</fieldset>
+
+<fieldset class="{{modifier_class}}" disabled>
+  <legend>A disabled fieldset</legend>
+  <div>
+    <label for="fieldsetText2">Disabled text input</label>
+    <input type="text" id="fieldsetText2" placeholder="Disabled input">
+  </div>
+  <div>
+    <label for="fieldsetSelect">Disabled select menu</label>
+    <select id="fieldsetSelect">
+      <option>Disabled select</option>
+    </select>
+  </div>
+  <div>
+    <label><input type="checkbox"> Can't check this</label>
+  </div>
+</fieldset>

sass/base/forms/forms-input-checkbox.twig

@@ -0,0 +1,7 @@
+<div>
+  <label><input type="checkbox" class="{{modifier_class}}"> Check me out</label>
+</div>
+
+<div>
+  <label><input type="checkbox" class="{{modifier_class}}" value="" disabled> Option two is disabled</label>
+</div>

sass/base/forms/forms-input-radio.twig

@@ -0,0 +1,11 @@
+<div>
+  <label><input type="radio" class="{{modifier_class}}" value="option1" name="example-radio" checked> Option one</label>
+</div>
+
+<div>
+  <label><input type="radio" class="{{modifier_class}}" value="option2" name="example-radio"> Option two</label>
+</div>
+
+<div>
+  <label><input type="radio" class="{{modifier_class}}" value="option3" name="example-radio" disabled> Option three is disabled</label>
+</div>

sass/base/forms/forms-input.twig

@@ -0,0 +1,97 @@
+<div>
+  <label for="inputText">Text</label>
+  <input type="text" class="{{modifier_class}}" id="inputText" placeholder="Enter some text">
+</div>
+<div>
+  <label for="inputSearch">Search</label>
+  <input type="search" class="{{modifier_class}}" id="inputSearch" placeholder="Search">
+</div>
+<div>
+  <label for="inputTel">Telephone</label>
+  <input type="text" class="{{modifier_class}}" id="inputTel" placeholder="Enter some text">
+</div>
+<div>
+  <label for="inputURL">URL</label>
+  <input type="url" class="{{modifier_class}}" id="inputURL" placeholder="Enter a URL">
+</div>
+<div>
+  <label for="inputEmail">Email address</label>
+  <input type="email" class="{{modifier_class}}" id="inputEmail" placeholder="Enter email">
+</div>
+<div>
+  <label for="inputPassword">Password</label>
+  <input type="password" class="{{modifier_class}}" id="inputPassword" placeholder="Password">
+</div>
+<div>
+  <label for="inputDate">Date</label>
+  <input type="date" class="{{modifier_class}}" id="inputDate" placeholder="Enter a date">
+</div>
+<div>
+  <label for="inputTime">Time</label>
+  <input type="time" class="{{modifier_class}}" id="inputTime" placeholder="Enter a time">
+</div>
+<div>
+  <label for="inputNumber">Number</label>
+  <input type="number" class="{{modifier_class}}" id="inputNumber" placeholder="Enter a number">
+</div>
+<div>
+  <label for="inputRange">Range</label>
+  <input type="range" class="{{modifier_class}}" id="inputRange" placeholder="Enter a range">
+</div>
+<div>
+  <label for="inputColor">Color</label>
+  <input type="color" class="{{modifier_class}}" id="inputColor" placeholder="Enter a color">
+</div>
+<div>
+  <label for="inputFile">File input</label>
+  <input type="file" class="{{modifier_class}}" id="inputFile">
+</div>
+
+<div>
+  <label for="inputText">Disabled text</label>
+  <input type="text" class="{{modifier_class}}" disabled id="inputText" placeholder="Disabled text">
+</div>
+<div>
+  <label for="inputSearch">Disabled search</label>
+  <input type="search" class="{{modifier_class}}" disabled id="inputSearch" placeholder="Disabled search">
+</div>
+<div>
+  <label for="inputTel">Disabled telephone</label>
+  <input type="text" class="{{modifier_class}}" disabled id="inputTel" placeholder="Disabled telephone">
+</div>
+<div>
+  <label for="inputURL">Disabled URL</label>
+  <input type="url" class="{{modifier_class}}" disabled id="inputURL" placeholder="Disabled URL">
+</div>
+<div>
+  <label for="inputEmail">Disabled email address</label>
+  <input type="email" class="{{modifier_class}}" disabled id="inputEmail" placeholder="Disabled email">
+</div>
+<div>
+  <label for="inputPassword">Disabled password</label>
+  <input type="password" class="{{modifier_class}}" disabled id="inputPassword" placeholder="Disabled password">
+</div>
+<div>
+  <label for="inputDate">Disabled date</label>
+  <input type="date" class="{{modifier_class}}" disabled id="inputDate" placeholder="Disabled date">
+</div>
+<div>
+  <label for="inputTime">Disabled time</label>
+  <input type="time" class="{{modifier_class}}" disabled id="inputTime" placeholder="Disabled time">
+</div>
+<div>
+  <label for="inputNumber">Disabled number</label>
+  <input type="number" class="{{modifier_class}}" disabled id="inputNumber" placeholder="Disabled number">
+</div>
+<div>
+  <label for="inputRange">Disabled range</label>
+  <input type="range" class="{{modifier_class}}" disabled id="inputRange" placeholder="Disabled range">
+</div>
+<div>
+  <label for="inputColor">Disabled color</label>
+  <input type="color" class="{{modifier_class}}" disabled id="inputColor" placeholder="Disabled color">
+</div>
+<div>
+  <label for="inputFile">Disabled file input</label>
+  <input type="file" class="{{modifier_class}}" disabled id="inputFile">
+</div>

sass/base/forms/forms-label.twig

@@ -0,0 +1,8 @@
+<div>
+  <label class="{{modifier_class}}" for="lableInputText">A label for a text input</label>
+  <input type="text" id="lableInputText" placeholder="Enter some text">
+</div>
+
+<div>
+  <label class="{{modifier_class}}"><input type="checkbox"> A label wrapped around a checkbox</label>
+</div>

sass/base/forms/forms-select.twig

@@ -0,0 +1,38 @@
+<div>
+  <label for="selectDropdown">A standard drop-down</label>
+  <select class="{{modifier_class}}" id="selectDropdown">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+<div>
+  <label for="selectMultiItem">A multi-item select field</label>
+  <select class="{{modifier_class}}" id="selectMultiItem" multiple>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+<div>
+  <label for="selectDisabled">A disabled drop-down</label>
+  <select class="{{modifier_class}}" id="selectDisabled" disabled>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>

sass/base/forms/forms-textarea.twig

@@ -0,0 +1,8 @@
+<div>
+  <label for="exampleTextarea">Text area</label>
+  <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea"></textarea>
+</div>
+<div>
+  <label for="exampleTextarea">Disabled text area</label>
+  <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea" disabled></textarea>
+</div>

sass/base/grouping/_grouping.scss

@@ -103,15 +103,6 @@ ul {
   }
 }
 
-@if support-for(ie, 7) {
-  // Correct list images handled incorrectly in IE 7.
-  nav ul,
-  nav ol {
-    list-style: none;
-    list-style-image: none;
-  }
-}
-
 // Figures
 //
 // The `<figure>` element can be used to annotate illustrations, diagrams,

sass/components/button/_button.scss

@@ -0,0 +1,108 @@
+// Button
+//
+// In addition to the default styling of `<button>` and
+// `<input type="submit|image|reset|button">` elements, the `.button` class and
+// its variants can apply buttons styles to various elements (like an `<a>`
+// link).
+//
+// :hover  - Hover styling.
+// :active - Depressed button styling.
+//
+// Markup: button.twig
+//
+// Style guide: forms.button
+
+.button,
+%button,
+button,
+// 1
+html [type='button'],
+[type='reset'],
+[type='submit'] {
+  -moz-appearance: button;
+  -webkit-appearance: button; // 2
+}
+
+.button,
+%button,
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  @extend %button--disabled;
+  @include typeface(headings);
+  @include margin-right(.75);
+  @include margin-bottom(.75);
+  // Some styles don't apply to <a> links since they are inline elements by default.
+  display: inline-block;
+  padding: 2px 10px;
+  // Address Firefox 4+ setting `line-height` on `input` using `!important` in
+  // the UA stylesheet. And prevent its "line-height: normal" rule below from
+  // breaking the "appearance: button" styling on the input elements.
+  line-height: inherit;
+  text-decoration: none;
+  // Improve usability and consistency of cursor style between image-type `input` and others.
+  cursor: pointer;
+  color: color(button);
+  text-align: center;
+  background-image: linear-gradient(#f6f6f6, #e2e2e2);
+  border: 1px solid #e4e4e4;
+  border-left-color: #d2d2d2;
+  border-right-color: #d2d2d2;
+  border-bottom-color: #b4b4b4;
+  border-radius: 2px;
+
+
+  // Remove the inner border and padding in Firefox.
+  &::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  // Restore the focus styles unset by the previous rule.
+  &:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    // Override any link underlines and color changes.
+    text-decoration: none;
+    color: color(button);
+  }
+
+  &:active {
+    border-color: #555;
+    text-shadow: color(button) 0 -1px 0;
+    background: color(grey-dark);
+    color: color(text-bg);
+  }
+}
+
+// Add button variations here.
+.button,
+%button {
+  &--variant-name {
+    // Add styles here.
+  }
+}
+
+// The disabled variation should always go last, so that it overrides any
+// other variations.
+%button--disabled[disabled] {
+  // Re-set default cursor for disabled elements.
+  cursor: default;
+  color: color(button-disabled);
+  background-color: color(grey-extra-light);
+  border-color: color(grey-extra-light);
+  background-image: none;
+  text-shadow: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    // Override any link underlines and color changes.
+    color: color(button-disabled);
+  }
+}

sass/components/button/button.twig

@@ -0,0 +1,28 @@
+<p>
+  <button class="button {{modifier_class}}" type="button">Standard button</button>
+  <button class="button {{modifier_class}}" type="button" disabled>Disabled button</button>
+</p>
+<p>
+  <button class="button {{modifier_class}}" type="submit">Submit button</button>
+  <button class="button {{modifier_class}}" type="submit" disabled>Disabled submit button</button>
+</p>
+<p>
+  <button class="button {{modifier_class}}" type="reset">Reset button</button>
+  <button class="button {{modifier_class}}" type="reset" disabled>Disabled reset button</button>
+</p>
+<p>
+  <input class="button {{modifier_class}}" type="button" value="Input button">
+  <input class="button {{modifier_class}}" type="button" value="Disabled input button" disabled>
+</p>
+<p>
+  <input class="button {{modifier_class}}" type="submit" value="Input submit button">
+  <input class="button {{modifier_class}}" type="submit" value="Disabled input submit button" disabled>
+</p>
+<p>
+  <input class="button {{modifier_class}}" type="reset" value="Input reset button">
+  <input class="button {{modifier_class}}" type="reset" value="Disabled input reset button" disabled>
+</p>
+<p>
+  <a class="button {{modifier_class}}" href="#">Link button</a>
+  <a class="button {{modifier_class}}" disabled href="#">Disabled link button</a>
+</p>

sass/styles.scss

@@ -48,6 +48,7 @@
 // Style guide: components
 
 @import 'components/box/box';
+@import 'components/button/button';
 @import 'components/clearfix/clearfix';
 @import 'components/divider/divider';
 @import 'components/header/header';

styleguide/index.html

@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>

styleguide/item-base-embedded-img.html

@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>

styleguide/item-base-embedded-svg.html

@@ -39,18 +39,23 @@
         </a>
               </li>
           <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-forms.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-layouts.html">
-          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-components.html">
-          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
         </a>
               </li>
           <li class="kss-nav__menu-item">
         <a class="kss-nav__menu-link" href="section-navigation.html">
-          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
         </a>
               </li>
         </ul>
@@ -146,7 +151,7 @@
           </details>
               
               <div class="kss-source kss-style">
-          Source: <code>base/embedded/_embedded.scss</code>, line 35
+          Source: <code>base/embedded/_embedded.scss</code>, line 30
         </div>
           </div>
   </article>