feat(spinners): add ionic color convention

Closes #3077
ionic-team · Feb 10, 2015 · 2b88b4f · 2b88b4f
1 parent 6c262ef
commit 2b88b4f
Show file tree

Hide file tree

Showing 4 changed files with 209 additions and 16 deletions.
diff --git a/js/angular/directive/spinner.js b/js/angular/directive/spinner.js
@@ -156,6 +156,15 @@
  * <ion-spinner icon="spiral"></ion-spinner>
  * ```
  *
+ * ## Spinner Colors
+ * Like with most of Ionic's other components, spinners can also be styled using
+ * Ionic's standard color naming convention. For example:
+ *
+ * ```html
+ * <ion-spinner class="spinner-energized"></ion-spinner>
+ * ```
+ *
+ *
  * ## Styling SVG with CSS
  * One cool thing about SVG is its ability to be styled with CSS! Some of the properties
  * have different names, for example, SVG uses the term `stroke` instead of `border`, and
@@ -170,10 +179,6 @@
  * }
  * ```
  *
- * By default, the spinners are designed to be above a light background color. If the spinner
- * is going to be sitting on a dark background color you can add the `.spinner-inverse` CSS
- * class to the directive.
- *
 */
 IonicModule
 .directive('ionSpinner', function() {

diff --git a/scss/_spinner.scss b/scss/_spinner.scss
@@ -5,16 +5,48 @@
 
 .spinner {
   svg {
-    width: 28px;
-    height: 28px;
+    width: $spinner-width;
+    height: $spinner-height;
   }
 
-  stroke: #444;
-  fill: #444;
+  stroke: $spinner-default-stroke;
+  fill: $spinner-default-fill;
 
-  &.spinner-inverse {
-    stroke: #fff;
-    fill: #fff;
+  &.spinner-light {
+    stroke: $spinner-light-stroke;
+    fill: $spinner-light-fill;
+  }
+  &.spinner-stable {
+    stroke: $spinner-stable-stroke;
+    fill: $spinner-stable-fill;
+  }
+  &.spinner-positive {
+    stroke: $spinner-positive-stroke;
+    fill: $spinner-positive-fill;
+  }
+  &.spinner-calm {
+    stroke: $spinner-calm-stroke;
+    fill: $spinner-calm-fill;
+  }
+  &.spinner-balanced {
+    stroke: $spinner-balanced-stroke;
+    fill: $spinner-balanced-fill;
+  }
+  &.spinner-assertive {
+    stroke: $spinner-assertive-stroke;
+    fill: $spinner-assertive-fill;
+  }
+  &.spinner-energized {
+    stroke: $spinner-energized-stroke;
+    fill: $spinner-energized-fill;
+  }
+  &.spinner-royal {
+    stroke: $spinner-royal-stroke;
+    fill: $spinner-royal-fill;
+  }
+  &.spinner-dark {
+    stroke: $spinner-dark-stroke;
+    fill: $spinner-dark-fill;
   }
 }
 
@@ -29,17 +61,16 @@
 
 .spinner-spiral {
   .stop1 {
-    stop-color: #fff;
+    stop-color: $spinner-light-fill;
     stop-opacity: 0;
   }
 
-  &.spinner-inverse {
+  &.spinner-light {
     .stop1 {
-      stop-color: #000;
+      stop-color: $spinner-default-fill;
     }
     .stop2 {
-      stop-color: #fff;
+      stop-color: $spinner-light-fill;
     }
   }
 }
-
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -680,6 +680,43 @@ $badge-default-bg:                transparent !default;
 $badge-default-text:              #AAAAAA !default;
 
 
+// Spinners
+// -------------------------------
+
+$spinner-width:                   28px !default;
+$spinner-height:                  28px !default;
+
+$spinner-light-stroke:            $light !default;
+$spinner-light-fill:              $light !default;
+
+$spinner-stable-stroke:           $stable !default;
+$spinner-stable-fill:             $stable !default;
+
+$spinner-positive-stroke:         $positive !default;
+$spinner-positive-fill:           $positive !default;
+
+$spinner-calm-stroke:             $calm !default;
+$spinner-calm-fill:               $calm !default;
+
+$spinner-balanced-stroke:         $balanced !default;
+$spinner-balanced-fill:           $balanced !default;
+
+$spinner-assertive-stroke:        $assertive !default;
+$spinner-assertive-fill:          $assertive !default;
+
+$spinner-energized-stroke:        $energized !default;
+$spinner-energized-fill:          $energized !default;
+
+$spinner-royal-stroke:            $royal !default;
+$spinner-royal-fill:              $royal !default;
+
+$spinner-dark-stroke:             $dark !default;
+$spinner-dark-fill:               $dark !default;
+
+$spinner-default-stroke:          $dark !default;
+$spinner-default-fill:            $dark !default;
+
+
 // Z-Indexes
 // -------------------------------
 

diff --git a/test/html/spinners.html b/test/html/spinners.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html ng-app="ionic">
+  <head>
+    <meta charset="utf-8">
+    <title>Spinners</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.bundle.js"></script>
+  </head>
+  <body>
+
+    <header class="bar bar-header bar-royal">
+      <h1 class="title">Spinners</h1>
+    </header>
+
+    <ion-content class="has-header padding">
+
+      <table class="table spinner-table" ng-app="ionic">
+       <tbody><tr>
+         <th>
+           <code>android</code>
+         </th>
+         <td>
+           <ion-spinner icon="android"></ion-spinner>
+           <ion-spinner icon="android" class="spinner-assertive"></ion-spinner>
+         </td>
+       </tr>
+       <tr>
+         <th>
+           <code>ios</code>
+         </th>
+         <td>
+           <ion-spinner icon="ios"></ion-spinner>
+           <ion-spinner icon="ios" class="spinner-positive"></ion-spinner>
+         </td>
+       </tr>
+       <tr>
+         <th>
+           <code>ios-small</code>
+         </th>
+         <td>
+           <ion-spinner icon="ios-small"></ion-spinner>
+           <ion-spinner icon="ios-small" class="spinner-calm"></ion-spinner>
+         </td>
+       </tr>
+       <tr>
+         <th>
+           <code>bubbles</code>
+         </th>
+         <td>
+           <ion-spinner icon="bubbles"></ion-spinner>
+           <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
+         </td>
+       </tr>
+       <tr>
+         <th>
+           <code>circles</code>
+         </th>
+         <td>
+           <ion-spinner icon="circles"></ion-spinner>
+           <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
+         </td>
+       </tr>
+       <tr>
+         <th>
+           <code>crescent</code>
+         </th>
+         <td>
+           <ion-spinner icon="crescent"></ion-spinner>
+           <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>
+         </td>
+       </tr>
+       <tr>
+         <th>
+           <code>dots</code>
+         </th>
+         <td>
+           <ion-spinner icon="dots"></ion-spinner>
+           <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
+         </td>
+       </tr>
+       <tr>
+         <th>
+           <code>lines</code>
+         </th>
+         <td>
+           <ion-spinner icon="lines"></ion-spinner>
+         </td>
+         <td style="background:black">
+           <ion-spinner icon="lines" class="spinner-light"></ion-spinner>
+         </td>
+       </tr>
+       <tr>
+         <th>
+           <code>ripple</code>
+         </th>
+         <td>
+           <ion-spinner icon="ripple"></ion-spinner>
+         </td>
+         <td style="background: black">
+           <ion-spinner icon="ripple" class="spinner-stable"></ion-spinner>
+         </td>
+       </tr>
+       <tr>
+         <th>
+           <code>spiral</code>
+         </th>
+         <td>
+           <ion-spinner icon="spiral"></ion-spinner>
+         </td>
+         <td style="background: black">
+           <ion-spinner icon="spiral" class="spinner-light"></ion-spinner>
+         </td>
+       </tr>
+      </tbody></table>
+
+    </ion-content>
+
+  </body>
+</html>