Quote element (#100)

* Created quote element within elements directory based on design Kerri made for the Engineering project * Adjustments to quote element after review * use bourbon margin mixin and update icongrid index file to match others * spacing FIXUP * template cleanup
SU-SWS · Apr 20, 2018 · e2b7795 · e2b7795
1 parent 61e0264
commit e2b7795
Show file tree

Hide file tree

Showing 63 changed files with 6,698 additions and 297 deletions.
diff --git a/css/decanter.css b/css/decanter.css
diff --git a/js/decanter.min.js b/js/decanter.min.js
diff --git a/scss/elements/_quote.scss b/scss/elements/_quote.scss
@@ -0,0 +1,14 @@
+@charset "UTF-8";
+
+//
+// Quote
+//
+// Default styling for a quote element.
+//
+// Markup: ../../templates/elements/quote/quote.html.twig
+//
+// Style guide: Elements.Quote
+//
+.decanter-quote {
+  @include decanter-quote;
+}
diff --git a/scss/elements/index.scss b/scss/elements/index.scss
@@ -13,5 +13,6 @@
   'inputs',
   'links',
   'list',
+  'quote',
   'table',
   'typography';
diff --git a/scss/utilities/mixins/icon-grid/_icon-grid.scss b/scss/utilities/mixins/icon-grid/_icon-grid.scss
@@ -5,7 +5,7 @@
 //
 // Grid of icons (or images) with text.
 //
-// Style guide: Mixins.icon-grid
+// Style guide: Mixins.IconGrid.icon-grid
 //
 @mixin icon-grid {
   .decanter-icon-grid__row {

diff --git a/scss/utilities/mixins/icon-grid/index.scss b/scss/utilities/mixins/icon-grid/index.scss
@@ -1,8 +1,12 @@
 @charset "UTF-8";
 
-///
-/// ROLL UP
-///
+//
+// Icon Grid
+//
+// Mixins for Icon Grid
+//
+// Style guide: Mixins.IconGrid
+//
 
 @import
   'icon-grid';
diff --git a/scss/utilities/mixins/index.scss b/scss/utilities/mixins/index.scss
@@ -16,5 +16,6 @@
   'lists/index',
   'menus/index',
   'navigation/index',
+  'quote/index',
   'tables/index',
   'typography/index';
diff --git a/scss/utilities/mixins/quote/_quote.scss b/scss/utilities/mixins/quote/_quote.scss
@@ -0,0 +1,41 @@
+@charset "UTF-8";
+
+//
+// @quote
+//
+// Default styling for a quote element.
+//
+// Style guide: Mixins.Quote.quote
+//
+@mixin decanter-quote {
+  @include padding(1em);
+  @include overflow;
+
+  .decanter-quote__img {
+    @include media-block-img;
+
+    border-radius: 150px;
+    border: 7px solid;
+    height: 300px;
+    width: 300px;
+
+    @include margin(null 2em null null);
+  }
+
+  .decanter-quote__body {
+    .decanter-quote__heading {
+      font-size: 2em;
+      font-weight: 600;
+      margin-bottom: .5em;
+    }
+
+    .decanter-quote__detail {
+      margin: 0;
+    }
+
+    .decanter-quote__quote {
+      font-size: 1.5em;
+      font-weight: 600;
+    }
+  }
+}
diff --git a/scss/utilities/mixins/quote/index.scss b/scss/utilities/mixins/quote/index.scss
@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+//
+// Quote
+//
+// Mixins for Quote
+//
+// Style guide: Mixins.Quote
+//
+
+@import
+'quote';
diff --git a/styleguide/item-atoms-buttons.html b/styleguide/item-atoms-buttons.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Decanter Style Guide and Pattern Library</title>
+
+  <meta name="description" content="">
+  <meta name="generator" content="kss-node">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="kss-assets/kss.css">
+  <link rel="stylesheet" href="css/decanter.css">
+
+</head>
+<body id="kss-node" class="kss-fullscreen-mode">
+
+<div class="kss-sidebar kss-style">
+  <header class="kss-header">
+    <h1 class="kss-doc-title">Decanter Style Guide and Pattern Library</h1>
+  </header>
+  <nav class="kss-nav">
+    <ul class="kss-nav__menu">
+      <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="./">
+          <span class="kss-nav__ref">0</span
+          ><span class="kss-nav__name">Overview</span>
+        </a>
+      </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-atoms.html">
+          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Atoms</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-molecules.html">
+          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Molecules</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-organisims.html">
+          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Organisims</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-templates.html">
+          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Templates</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-core.html">
+          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Core</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-elements.html">
+          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Elements</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-functions.html">
+          <span class="kss-nav__ref">7</span><span class="kss-nav__name">Functions</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-mixins.html">
+          <span class="kss-nav__ref">8</span><span class="kss-nav__name">Mixins</span>
+        </a>
+              </li>
+          <li class="kss-nav__menu-item">
+        <a class="kss-nav__menu-link" href="section-variables.html">
+          <span class="kss-nav__ref">9</span><span class="kss-nav__name">Variables</span>
+        </a>
+              </li>
+        </ul>
+  </nav>
+</div>
+<article role="main" class="kss-main">
+
+
+          <div id="kssref-atoms-buttons" class="kss-section kss-section--depth-2 is-fullscreen">
+      <div class="kss-style">
+                <h2 class="kss-title kss-title--level-2">
+          <a class="kss-title__permalink" href="#kssref-atoms-buttons">
+            <span class="kss-title__ref">
+              1.1
+              <span class="kss-title__permalink-hash">
+                Atoms.Buttons
+              </span>
+            </span>
+            Buttons
+          </a>
+        </h2>
+
+                  <p class="kss-toolbar">
+                        <a href="#kssref-atoms-buttons" data-kss-guides="true">
+              <span class="kss-toolbar__tooltip">Toggle example guides</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
+                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
+                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
+              </svg>
+            </a>
+            <a href="#kssref-atoms-buttons" data-kss-markup="true">
+              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
+                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
+                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
+              </svg>
+            </a>
+          </p>
+
+                  <div class="kss-description">
+            <p>Simple button element to aid in creating interactive design.</p>
+
+          </div>
+
+              </div>
+
+              <div class="kss-modifier__wrapper">
+          <div class="kss-modifier__heading kss-style">
+            Examples          </div>
+
+                      <div class="kss-modifier__default-name kss-style">
+              Default styling
+            </div>
+
+          <div class="kss-modifier__example">
+            <a href="#" class="decanter-button ">Button Title</a>
+
+            <div class="kss-modifier__example-footer"></div>
+          </div>
+
+                      <div class="kss-modifier__name kss-style">
+              .decanter-button--secondary
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Secondary button
+            </div>
+            <div class="kss-modifier__example">
+              <a href="#" class="decanter-button decanter-button--secondary">Button Title</a>
+
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+                      <div class="kss-modifier__name kss-style">
+              .decanter-button--big
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Big button
+            </div>
+            <div class="kss-modifier__example">
+              <a href="#" class="decanter-button decanter-button--big">Button Title</a>
+
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+                      <div class="kss-modifier__name kss-style">
+              .decanter-button--unstyled
+            </div>
+            <div class="kss-modifier__description kss-style">
+              Unstyled button
+            </div>
+            <div class="kss-modifier__example">
+              <a href="#" class="decanter-button decanter-button--unstyled">Button Title</a>
+
+              <div class="kss-modifier__example-footer"></div>
+            </div>
+                  </div>
+                  <details class="kss-markup kss-style">
+            <summary>
+                              Markup: <code>../templates/components/atoms/buttons/buttons.html.twig</code>
+                          </summary>
+            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href=&quot;#&quot; class=&quot;decanter-button [modifier class]&quot;&gt;Button Title&lt;/a&gt;
+</code></pre>
+          </details>
+
+              <div class="kss-source kss-style">
+          Source: <code>components/atoms/_buttons.scss</code>, line 3
+        </div>
+          </div>
+  </article>
+
+<!-- SCRIPTS -->
+<script src="kss-assets/kss.js"></script>
+<script src="kss-assets/scrollspy.js"></script>
+<script src="kss-assets/prettify.js"></script>
+<script src="kss-assets/kss-fullscreen.js"></script>
+<script src="kss-assets/kss-guides.js"></script>
+<script src="kss-assets/kss-markup.js"></script>
+<script>
+  prettyPrint();
+  var spy = new ScrollSpy('#kss-node', {
+    nav: '.kss-nav__menu-child > li > a',
+    className: 'is-in-viewport'
+  });
+  var kssFullScreen = new KssFullScreen({
+    idPrefix: 'kss-fullscreen-',
+    bodyClass: 'kss-fullscreen-mode',
+    elementClass: 'is-fullscreen'
+  });
+  var kssGuides = new KssGuides({
+    bodyClass: 'kss-guides-mode'
+  });
+  var kssMarkup = new KssMarkup({
+    bodyClass: 'kss-markup-mode',
+    detailsClass: 'kss-markup'
+  });
+</script>
+<script src="js/decanter.min.js"></script>
+
+
+
+
+<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
+</body>
+</html>