add spinner section

CodeNow · Jan 12, 2016 · 86063b6 · 86063b6
1 parent 5fae0ac
commit 86063b6
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 15 deletions.
diff --git a/src/html/index.html b/src/html/index.html
@@ -37,6 +37,8 @@
  <a class="nav-link" href="#forms">Forms</a>
  <li class="li">
  <a class="nav-link" href="#validation">Validation</a>
+ <li class="li">
+ <a class="nav-link" href="#spinners">Spinners</a>
  </ul>
  </nav>
 
@@ -51,6 +53,7 @@
  @@include('buttons.html')
  @@include('forms.html')
  @@include('validation.html')
+ @@include('spinners.html')
  </main>
 
  </div>
diff --git a/src/html/spinners.html b/src/html/spinners.html
@@ -0,0 +1,82 @@
+<section id="spinners" class="section section-spinner">
+ <h1 class="h1">Spinners</h1>
+
+ <h2 class="h2">Usage</h2>
+
+ <p class="p">Hover over a spinner to see it in animation.</p>
+
+ <pre class="pre pre-code">
+&lt;svg class="spinner" viewbox='0 0 16 16'&gt;
+ &lt;circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"&gt;&lt;/circle&gt;
+&lt;/svg&gt;</pre>
+
+ <h2 class="h2">Colors</h2>
+
+ <p class="p">If no color is set, spinners will inherit their color from the text color.
+
+ <pre class="pre pre-code">
+&lt;svg class="spinner spinner-blue" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-gray" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-green" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-purple" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-white" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;</pre>
+
+ <div class="spinners-demo">
+ <div class="spinner-wrapper spinner-md spinner-blue">
+ <svg class="spinner" viewbox="0 0 16 16">
+ <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+ </svg>
+ </div>
+
+ <div class="spinner-wrapper spinner-md spinner-gray">
+ <svg class="spinner" viewbox="0 0 16 16">
+ <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+ </svg>
+ </div>
+
+ <div class="spinner-wrapper spinner-md spinner-green">
+ <svg class="spinner" viewbox="0 0 16 16">
+ <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+ </svg>
+ </div>
+
+ <div class="spinner-wrapper spinner-md spinner-purple">
+ <svg class="spinner" viewbox="0 0 16 16">
+ <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+ </svg>
+ </div>
+
+ <div class="spinner-wrapper spinner-md spinner-white">
+ <svg class="spinner" viewbox="0 0 16 16">
+ <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+ </svg>
+ </div>
+ </div>
+
+ <h2 class="h2">Sizes</h2>
+
+ <pre class="pre pre-code">
+&lt;svg class="spinner spinner-lg" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-md" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;
+&lt;svg class="spinner spinner-sm" viewbox='0 0 16 16'&gt;...&lt;/svg&gt;</pre>
+
+ <div class="spinners-demo">
+ <div class="spinner-wrapper spinner-lg">
+ <svg class="spinner" viewbox="0 0 16 16">
+ <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+ </svg>
+ </div>
+
+ <div class="spinner-wrapper spinner-md">
+ <svg class="spinner" viewbox="0 0 16 16">
+ <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+ </svg>
+ </div>
+
+ <div class="spinner-wrapper spinner-sm">
+ <svg class="spinner" viewbox="0 0 16 16">
+ <circle class="path" cx="8" cy="8" r="7" stroke-linecap="round"></circle>
+ </svg>
+ </div>
+ </div>
+</section>
diff --git a/src/html/validation.html b/src/html/validation.html
@@ -1,7 +1,7 @@
 <!-- section -->
 <section id="validation" class="section">
 
-<h1 class="h1">Validation</h1>
+ <h1 class="h1">Validation</h1>
 
  <h2 class="h2">Inputs</h2>
  <div class="forms-inputs">
@@ -32,4 +32,6 @@ <h2 class="h2">List of Requirements</h2>
  <ul class="list list-bulleted list-validation">
  <li class="list-item ng-invalid"> Use letters, numbers, and hyphens (-)
  <li class="list-item"> Use 10 characters or less
- <li class="list-item"> Use a unique name
+ <li class="list-item"> Use a unique name
+ </ul>
+</section>
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -9,6 +9,8 @@
 
 // California Style Sheets
 
+// scss-lint:disable StringQuotes
+
 // global
-@import "angular/index.scss";
-@import "styleguide.scss";
+@import "angular/index";
+@import "styleguide";
diff --git a/src/styles/scss/layout.scss b/src/styles/scss/layout.scss
@@ -45,12 +45,12 @@ body > svg {
 
 .main {
  margin-left: 240px;
- padding: 30px;
+ padding: 30px 30px 300px;
  position: relative;
 
  @media (max-width: 960px) {
- padding-top: 90px;
  margin: 0;
+ padding-top: 90px;
  }
 }
 
@@ -96,4 +96,4 @@ body > svg {
  padding: 15px;
  word-wrap: normal;
  }
-}
+}
diff --git a/src/styles/scss/spinners.scss b/src/styles/scss/spinners.scss
@@ -0,0 +1,33 @@
+.section-spinner {
+
+ .spinners-demo {
+ display: flex;
+ margin-left: 30px;
+ }
+
+ .spinner-wrapper {
+ align-items: center;
+ background: $gray-lighterest;
+ border: 1px solid $gray-lighter;
+ border-radius: $input-border-radius;
+ cursor: pointer;
+ display: flex;
+ float: left;
+ height: 90px;
+ margin: 6px;
+ width: 90px;
+
+ &:hover .spinner {
+ animation-play-state: running;
+ }
+
+ .spinner {
+ animation-play-state: paused;
+ }
+ }
+
+ .spinner-white {
+ background: $gray;
+ border-color: $gray-dark;
+ }
+}
diff --git a/src/styles/styleguide.scss b/src/styles/styleguide.scss
@@ -9,15 +9,18 @@
 
 // California Style Sheets
 
+// scss-lint:disable StringQuotes
+
 // global
-@import "scss/layout.scss";
-@import "scss/links.scss";
-@import "scss/figures.scss";
+@import "scss/layout";
+@import "scss/links";
+@import "scss/figures";
 
 // specific
-@import "scss/runnabear.scss";
-@import "scss/colors.scss";
-@import "scss/themes.scss";
-@import "scss/icons.scss";
+@import "scss/runnabear";
+@import "scss/colors";
+@import "scss/themes";
+@import "scss/icons";
 @import "scss/forms";
-@import "scss/buttons";
+@import "scss/buttons";
+@import "scss/spinners";