Merge pull request #53 from dev-onenetworkecommerce/loaders

[WIP] Init loaders.

docs/routes.js

@@ -21,6 +21,7 @@ export default (
         <Route path="list-group" component={require('./sections/Docs-ListGroup')} />
         <Route path="nav" component={require('./sections/Docs-Nav')} />
         <Route path="slate" component={require('./sections/Docs-Slate')} />
+        <Route path="loaders" component={require('./sections/Docs-Loaders')} />
         <Route path="utilities" component={require('./sections/Docs-Utilities')} />
         <Route path="dropdown" component={require('./sections/Docs-Dropdown')} />
         <Route path="modal" component={require('./sections/Docs-Modal')} />

docs/sections/Docs-Buttons/index.jsx

@@ -64,6 +64,27 @@ export default class Buttons extends React.Component {
           </div>
         </section>
 
+        <section className="doc-bottom-space-large">
+          <h3 className="doc-heading"> Button with Loader </h3>
+          <div className="doc-btn-group"> 
+            <button className="btn -default"> 
+              <div className="tri-circle-loader">
+                <div />
+                <div />
+                <div />
+              </div>
+            </button>
+
+            <button className="btn -primary">
+              <div className="tri-circle-loader -light">
+                <div />
+                <div />
+                <div />
+              </div>
+            </button>
+          </div>
+        </section>
+
         <section className="doc-bottom-space-large">
           <h3 className="doc-heading">Disabled</h3>
           <button className="btn -default -disabled">Button</button>
@@ -80,7 +101,7 @@ export default class Buttons extends React.Component {
               <i className="icon icon-user3" />
             </button>
 
-            <button className="btn -emerald">Button <i className="icon icon-user3" /> </button>
+            <button className="btn -emerald"> Button <i className="icon icon-user3" /> </button>
           </div>
 
           <div className="doc-btn-group">

docs/sections/Docs-Loaders/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default class Loader extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1 className="doc-heading">Loaders</h1>
+        <p className="lead">Loaders are a great way to indicate that a process is still in progress.</p>
+        <p>Our loader is mainly inspired by <a href="https://heroku.com">Heroku</a> and <a href="https://travis-ci.org">Travis CI</a>.</p>
+
+        <div className="tri-circle-loader">
+          <div />
+          <div />
+          <div />
+        </div>
+      </div>
+    );
+  }
+}

docs/sections/Docs-Slate/index.jsx

@@ -22,6 +22,18 @@ export default class Slate extends React.Component {
           </div>
         </section>
 
+        <section className="doc-bottom-space-large">
+          <h3 className="doc-heading"> Loading Slate </h3>
+          <div className="slate">
+            <div className="tri-circle-loader">
+              <div />
+              <div />
+              <div />
+            </div>
+            <h3> I am a Loading Slate </h3>
+          </div>
+        </section>
+
         <section className="doc-bottom-space">
           <h3 className="doc-heading">Plain Slate</h3>
           <p>You can make a plain slate by adding the .-plain modifier class</p>

docs/sections/Docs/index.jsx

@@ -27,6 +27,7 @@ export default class Docs extends React.Component {
               <Link to="/slate" activeClassName="-selected" className="menuitem">Slate</Link>
               <Link to="/dropdown" activeClassName="-selected" className="menuitem">Dropdown</Link>
               <Link to="/modal" activeClassName="-selected" className="menuitem">Modal</Link>
+              <Link to="/loaders" activeClassName="-selected" className="menuitem">Loaders</Link>
               <Link to="/steps" activeClassName="-selected" className="menuitem">Steps</Link>
             </nav>
 

styles/_main.scss

@@ -26,3 +26,4 @@
 @import "components/modal";
 @import "components/tooltip";
 @import "components/slate";
+@import "components/tri-circle-loader";

styles/components/_slate.scss

@@ -5,20 +5,14 @@
   background: $brand-gray-lt;
   border-radius: $border-radius-base;
 
-	&.-spacious {
-		padding: 60px;
-	}
-
-	&.-plain {
-		background: $brand-white;
-	}
+	&.-spacious { padding: 60px; }
+	&.-plain { background: $brand-white; }
 
   > .icon:first-child {
     display: block;
     margin-bottom: $spacer-large;
   }
 
-  > *:last-child {
-    margin-bottom: 0;
-  }
+  > *:last-child { margin-bottom: 0; }
+  > .tri-circle-loader { margin-bottom: $spacer-large; }
 }

styles/components/tri-circle-loader.scss

@@ -0,0 +1,48 @@
+@mixin tri-circle-loader-variant($color) {
+  & > div {
+    background: $color;
+  }
+}
+
+.tri-circle-loader {
+  &.-light { @include tri-circle-loader-variant($brand-white); }
+  &.-sky { @include tri-circle-loader-variant($brand-sky); }
+  &.-emerald { @include tri-circle-loader-variant($brand-emerald); }
+  &.-sun { @include tri-circle-loader-variant($brand-sun); }
+  &.-crimson { @include tri-circle-loader-variant($brand-crimson); }
+
+  > div {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: $brand-black;
+    border-radius: 100%;
+    animation: fadeDelay 1.4s infinite ease-in-out;
+    animation-fill-mode: both;
+  }
+
+  > div:not(:last-child) {
+    margin-right: 2px;
+  }
+
+  > div:first-child {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  > div:nth-child(2) {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+
+  > div:last-child {
+    -webkit-animation-delay: -0.08s;
+    animation-delay: -0.08s;
+  }
+
+  @keyframes fadeDelay {
+    0% { opacity: 1; }
+    50% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+}