active_frontend 10.3.0 → 11.0.0

data/vendor/assets/stylesheets/_panel.scss

@@ -20,7 +20,7 @@
   padding: 14px 15px 12px 15px;
 }
 .panel-header .btn {
-  margin-bottom: -5px;
+  margin-bottom: -4px;
   margin-top: -6px;
 }
 .panel-title {
@@ -28,8 +28,7 @@
   display: inline-block;
   font-size: 16px;
   line-height: 1;
-  margin-bottom: 0;
-  margin-top: 0;
+  margin: 0;
 }
 .panel-body { padding: 15px; }
 .panel-body-chart {
@@ -38,7 +37,7 @@
 }
 .panel-body > .table-responsive {
   border: 0;
-  margin-bottom: 0;
+  margin: 0;
 }
 .panel-footer {
   background: $color-white;

data/vendor/assets/stylesheets/_placeholder.scss

@@ -1,7 +1,8 @@
 /* Table of Contents
 ==================================================
 # Placeholder
-# Size
+# Sizes
+# Colors
 # Media Queries */
 
 /* # Placeholder
@@ -28,7 +29,7 @@
   line-height: 22px;
 }
 
-/* # Size
+/* # Sizes
 ================================================== */
 .placeholder-large > i {
   background: $color-transparent;
@@ -40,13 +41,18 @@
   width: initial;
 }
 .placeholder-divider {
-  background: $color-light-haze;
+  background: $color-white;
   border-radius: 500px;
   height: 8px;
   margin: 20px auto;
   width: 50%;
 }
 
+/* # Sizes
+================================================== */
+.placeholder-dark > .placeholder-divider { background: $color-light-black; }
+.placeholder-light > .placeholder-divider { background: $color-light-haze; }
+
 /* # Media Queries
 ================================================== */
 @media only screen and (max-width: 767px) {

data/vendor/assets/stylesheets/_popover.scss

@@ -21,7 +21,7 @@
   top: 0;
   white-space: normal;
   width: 276px;
-  z-index: 1060;
+  z-index: 1010;
 }
 .popover.top { margin-top: -10px; }
 .popover.right { margin-left: 10px; }
@@ -30,7 +30,7 @@
 .popover-title,
 .popover-content {
   color: $color-black;
-  font-family: 'Gotham', 'Helvetica', Helvetica, Arial, sans-serif;
+  font-family: $typography-sans-serif;
   font-size: 14px;
   letter-spacing: 0;
   margin: 0;

data/vendor/assets/stylesheets/_progress.scss

@@ -9,46 +9,26 @@
 /* # Variables
 ================================================== */
 $colors: (
-  dark-black:   $color-dark-black,
-  black:        $color-black,
-  light-black:  $color-light-black,
-  dark-gray:    $color-dark-gray,
-  gray:         $color-gray,
-  light-gray:   $color-light-gray,
-  dark-haze:    $color-dark-haze,
-  haze:         $color-haze,
-  light-haze:   $color-light-haze,
-  white:        $color-white,
-  dark-lime:    $color-dark-lime,
-  lime:         $color-lime,
-  light-lime:   $color-light-lime,
-  dark-green:   $color-dark-green,
-  green:        $color-green,
-  light-green:  $color-light-green,
-  dark-teal:    $color-dark-teal,
-  teal:         $color-teal,
-  light-teal:   $color-light-teal,
-  dark-blue:    $color-dark-blue,
-  blue:         $color-blue,
-  light-blue:   $color-light-blue,
-  dark-indigo:  $color-dark-indigo,
-  indigo:       $color-indigo,
-  light-indigo: $color-light-indigo,
-  dark-purple:  $color-dark-purple,
-  purple:       $color-purple,
-  light-purple: $color-light-purple,
-  dark-pink:    $color-dark-pink,
-  pink:         $color-pink,
-  light-pink:   $color-light-pink,
-  dark-red:     $color-dark-red,
-  red:          $color-red,
-  light-red:    $color-light-red,
-  orange:       $color-orange,
-  dark-orange:  $color-dark-orange,
-  light-orange: $color-light-orange,
-  dark-yellow:  $color-dark-yellow,
-  yellow:       $color-yellow,
-  light-yellow: $color-light-yellow
+  dark-black: $color-dark-black,
+  black: $color-black,
+  light-black: $color-light-black,
+  dark-gray: $color-dark-gray,
+  gray: $color-gray,
+  light-gray: $color-light-gray,
+  dark-haze: $color-dark-haze,
+  haze: $color-haze,
+  light-haze: $color-light-haze,
+  white: $color-white,
+  lime: $color-lime,
+  green: $color-green,
+  teal: $color-teal,
+  blue: $color-blue,
+  indigo: $color-indigo,
+  purple: $color-purple,
+  pink: $color-pink,
+  red: $color-red,
+  orange: $color-orange,
+  yellow: $color-yellow
 );
 
 /* # Keyframes
@@ -65,7 +45,7 @@ $colors: (
 /* # Progress
 ================================================== */
 .progress {
-  background: $color-light-haze;
+  background: $color-white;
   border-radius: 500px;
   height: 25px;
   overflow: hidden;
@@ -77,9 +57,7 @@ $colors: (
   float: left;
   font-size: 13px;
   height: 100%;
-  -webkit-transition: width 0.6s ease;
-      -ms-transition: width 0.6s ease;
-          transition: width 0.6s ease;
+  @include transition(width 0.6s ease);
   text-align: center;
   width: 0;
 }
@@ -91,18 +69,16 @@ $colors: (
   .progress > .bar-#{$name} { background: $color; }
 }
 
+.progress-dark { background: $color-black; }
+.progress-light { background: $color-light-haze; }
+
 /* # Animations
 ================================================== */
 .progress > .bar-striped {
-  background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, $color-transparent 25%, $color-transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, $color-transparent 75%, $color-transparent);
-  background-image:     -ms-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, $color-transparent 25%, $color-transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, $color-transparent 75%, $color-transparent);
-  background-image:         linear-gradient(45deg, rgba(255,255,255,0.15) 25%, $color-transparent 25%, $color-transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, $color-transparent 75%, $color-transparent);
-  -webkit-background-size: 40px 40px;
-      -ms-background-size: 40px 40px;
-          background-size: 40px 40px;
+  background-image: -webkit-linear-gradient(45deg, transparentize($color-white, 0.85) 25%, $color-transparent 25%, $color-transparent 50%, transparentize($color-white, 0.85) 50%, transparentize($color-white, 0.85) 75%, $color-transparent 75%, $color-transparent);
+  background-image:     -ms-linear-gradient(45deg, transparentize($color-white, 0.85) 25%, $color-transparent 25%, $color-transparent 50%, transparentize($color-white, 0.85) 50%, transparentize($color-white, 0.85) 75%, $color-transparent 75%, $color-transparent);
+  background-image:         linear-gradient(45deg, transparentize($color-white, 0.85) 25%, $color-transparent 25%, $color-transparent 50%, transparentize($color-white, 0.85) 50%, transparentize($color-white, 0.85) 75%, $color-transparent 75%, $color-transparent);
+  @include background-size(40px 40px);
+  @include transition(width 0.6s ease);
 }
-.progress > .bar-striped.active {
-  -webkit-animation: progress-bar-stripes 2s linear infinite;
-      -ms-animation: progress-bar-stripes 2s linear infinite;
-          animation: progress-bar-stripes 2s linear infinite;
-}
+.progress > .bar-striped.active { @include animation(progress-bar-stripes 2s linear infinite); }

data/vendor/assets/stylesheets/_reset.scss

@@ -21,6 +21,7 @@ h5,
 h6,
 form,
 fieldset,
+label,
 p,
 blockquote,
 th,
@@ -49,11 +50,12 @@ h4,
 h5,
 h6 {
   font-size: 100%;
+  font-style: normal;
   font-weight: normal;
 }
 abbr,
 acronym {
-  border-bottom: 1px dotted $color-black;
+  border-bottom: 1px dotted inherit;
   font-variant: normal;
 }
 caption,
@@ -75,26 +77,22 @@ select {
   *font-size: 100%;
   font-weight: inherit;
 }
+html { background: $color-white; }
 html,
 body {
   color: $color-black;
-  font-family: 'Gotham', 'Helvetica', Helvetica, Arial, sans-serif;
+  font-family: $typography-sans-serif;
   font-size: 100%;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   font-smooth: always;
+  font-weight: normal;
   height: 100%;
-  -webkit-overflow-scrolling: touch;
-      -ms-overflow-scrolling: touch;
-          overflow-scrolling: touch;
-  -webkit-tap-highlight-color: $color-transparent;
-      -ms-tap-highlight-color: $color-transparent;
-          tap-highlight-color: $color-transparent;
+  @include overflow-scrolling(touch);
+  @include tap-highlight-color($color-transparent);
   text-rendering: optimizeLegibility;
-  -webkit-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-          text-size-adjust: 100%;
+  @include text-size-adjust(100%);
 }
-html { background: $color-white; }
 ::-moz-selection {
   background: $color-primary;
   color: $color-white;
@@ -107,5 +105,6 @@ html { background: $color-white; }
 /* # Color
 ================================================== */
 .html-dark { background: $color-black; }
-.html-light { background: $color-dark-white; }
-.html-white { background: $color-white; }
+.html-dark,
+.html-dark body { color: $color-white; }
+.html-light { background: $color-light-haze; }

data/vendor/assets/stylesheets/_sidebar.scss

@@ -19,29 +19,26 @@
   border-right: 1px solid $color-haze;
   border-left: 0;
 }
-.sidebar-striped { border-top: 3px solid $color-primary !important; }
 .sidebar-header {
   border-bottom: 1px solid $color-haze;
   font-size: 12px;
-  line-height: 12px;
-  padding: 12px 20px 10px 10px;
+  line-height: 1;
+  padding: 10px 20px 8px 10px;
 }
 .sidebar-alt > .sidebar-header {
   padding-left: 20px;
   padding-right: 10px;
 }
 .sidebar-header > h6 {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: normal;
   letter-spacing: 1px;
-  line-height: 12px;
+  line-height: 1;
   text-transform: uppercase;
 }
 .sidebar-content {
-  height: calc(100% - 54px);
-  -webkit-overflow-scrolling: touch;
-      -ms-overflow-scrolling: touch;
-          overflow-scrolling: touch;
+  height: calc(100% - 50px);
+  @include overflow-scrolling(touch);
   overflow-x: hidden;
   overflow-y: auto;
   padding: 10px 20px 10px 10px;
@@ -53,28 +50,20 @@
 .sidebar-scrollable {
   border-bottom: 1px solid $color-light-haze;
   height: auto;
-  max-height: calc(50% - 54px);
-  -webkit-overflow-scrolling: touch;
-      -ms-overflow-scrolling: touch;
-          overflow-scrolling: touch;
+  max-height: calc(50% - 50px);
+  @include overflow-scrolling(touch);
   overflow-y: auto;
 }
 
 /* # Colors
 ================================================== */
-.sidebar-dark {
-  background: $color-black;
-  border-color: $color-dark-black;
-}
-.sidebar-dark.sidebar-alt,
+.sidebar-dark { background: $color-black; }
+.sidebar-dark,
 .sidebar-dark > .sidebar-header,
 .sidebar-dark > .sidebar-scrollable { border-color: $color-dark-black; }
 .sidebar-dark > .sidebar-header > h6 { color: $color-white; }
-.sidebar-light {
-  background: $color-light-haze;
-  border-color: $color-dark-haze;
-}
-.sidebar-light.sidebar-alt,
+.sidebar-light { background: $color-light-haze; }
+.sidebar-light,
 .sidebar-light > .sidebar-header,
 .sidebar-light > .sidebar-scrollable { border-color: $color-dark-haze; }
 

data/vendor/assets/stylesheets/_spinner.scss

@@ -1,379 +1,158 @@
 /* Table of Contents
 ==================================================
 # Keyframes
-# Spinner */
+# Spinner
+# Colors */
 
 /* # Keyframes
 ================================================== */
 @-webkit-keyframes spinner-beat {
-  0% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-  14% {
-    -webkit-transform: scale(1.5);
-            transform: scale(1.5);
-  }
-  28% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-  42% {
-    -webkit-transform: scale(1.5);
-            transform: scale(1.5);
-  }
-  70% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
+  0% { @include transform(scale(1)); }
+  14% { @include transform(scale(1.5)); }
+  28% { @include transform(scale(1)); }
+  42% { @include transform(scale(1.5)); }
+  70% { @include transform(scale(1)); }
 }
 @keyframes spinner-beat {
-  0% {
-    -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-            transform: scale(1);
-  }
-  14% {
-    -webkit-transform: scale(1.5);
-        -ms-transform: scale(1.5);
-            transform: scale(1.5);
-  }
-  28% {
-    -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-            transform: scale(1);
-  }
-  42% {
-    -webkit-transform: scale(1.5);
-        -ms-transform: scale(1.5);
-            transform: scale(1.5);
-  }
-  70% {
-    -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-            transform: scale(1);
-  }
+  0% { @include transform(scale(1)); }
+  14% { @include transform(scale(1.5)); }
+  28% { @include transform(scale(1)); }
+  42% { @include transform(scale(1.5)); }
+  70% { @include transform(scale(1)); }
 }
 @-webkit-keyframes spinner-circle {
-  0%, 80%, 100% {
-    -webkit-transform: scale(0);
-            transform: scale(0);
-  }
-  40% {
-    -webkit-transform: scale(1.0);
-            transform: scale(1.0);
-  }
+  0%, 80%, 100% { @include transform(scale(0)); }
+  40% { @include transform(scale(1)); }
 }
 @keyframes spinner-circle {
-  0%, 80%, 100% {
-    -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-            transform: scale(0);
-  }
-  40% {
-    -webkit-transform: scale(1.0);
-        -ms-transform: scale(1.0);
-            transform: scale(1.0);
-  }
+  0%, 80%, 100% { @include transform(scale(0)); }
+  40% { @include transform(scale(1)); }
 }
 @-webkit-keyframes spinner-chase-rotate {
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  100% { @include transform(scale(360deg)); }
 }
 @keyframes spinner-chase-rotate {
-  100% {
-    -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  100% { @include transform(scale(360deg)); }
 }
 @-webkit-keyframes spinner-chase-bounce {
-  0%, 100% {
-    -webkit-transform: scale(0);
-            transform: scale(0);
-  }
-  50% {
-    -webkit-transform: scale(1.0);
-            transform: scale(1.0);
-  }
+  0%, 100% { @include transform(scale(0)); }
+  50% { @include transform(scale(1)); }
 }
 @keyframes spinner-chase-bounce {
-  0%, 100% {
-    -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-            transform: scale(0);
-  }
-  50% {
-    -webkit-transform: scale(1.0);
-        -ms-transform: scale(1.0);
-            transform: scale(1.0);
-  }
+  0%, 100% { @include transform(scale(0)); }
+  50% { @include transform(scale(1)); }
 }
 @-webkit-keyframes spinner-crescent {
-  0% {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  0% { @include transform(rotate(0)); }
+  100% { @include transform(rotate(360deg)); }
 }
 @keyframes spinner-crescent {
-  0% {
-    -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  0% { @include transform(rotate(0)); }
+  100% { @include transform(rotate(360deg)); }
 }
 @-webkit-keyframes spinner-cube {
-  0%, 70%, 100% {
-    -webkit-transform:scale3D(1.0,1.0,1.0);
-            transform:scale3D(1.0,1.0,1.0);
-  }
-  35% {
-    -webkit-transform:scale3D(0.0,0.0,1.0);
-            transform:scale3D(0.0,0.0,1.0);
-  }
+  0%, 70%, 100% { @include transform(scale3D(1,1,1)); }
+  35% { @include transform(scale3D(0,0,1)); }
 }
 @keyframes spinner-cube {
-  0%, 70%, 100% {
-    -webkit-transform:scale3D(1.0,1.0,1.0);
-        -ms-transform:scale3D(1.0,1.0,1.0);
-            transform:scale3D(1.0,1.0,1.0);
-  }
-  35%           {
-    -webkit-transform:scale3D(0.0,0.0,1.0);
-        -ms-transform:scale3D(0.0,0.0,1.0);
-            transform:scale3D(0.0,0.0,1.0);
-  }
+  0%, 70%, 100% { @include transform(scale3D(1,1,1)); }
+  35% { @include transform(scale3D(0,0,1)); }
 }
 @-webkit-keyframes spinner-double-bounce {
-  0%, 100% {
-    -webkit-transform: scale(0);
-            transform: scale(0);
-  }
-  50% {
-    -webkit-transform: scale(1.0);
-            transform: scale(1.0);
-  }
+  0%, 100% { @include transform(scale(0)); }
+  50% { @include transform(scale(1)); }
 }
 @keyframes spinner-double-bounce {
-  0%, 100% {
-    -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-            transform: scale(0);
-  }
-  50% {
-    -webkit-transform: scale(1.0);
-        -ms-transform: scale(1.0);
-            transform: scale(1.0);
-  }
+  0%, 100% { @include transform(scale(0)); }
+  50% { @include transform(scale(1)); }
 }
 @-webkit-keyframes spinner-flower {
   0% {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    @include transform(rotate(0));
     box-shadow: $color-primary 0 0 23px 0, $color-primary -20px -20px 0 0, $color-primary 20px -20px 0 0, $color-primary 20px 20px 0 0, $color-primary -20px 20px 0 0;
   }
   50% {
-    -webkit-transform: rotate(1080deg);
-            transform: rotate(1080deg);
+    @include transform(rotate(1080deg));
     box-shadow: $color-primary 0 0 23px 0, $color-primary 20px 20px 0 0, $color-primary -20px 20px 0 0, $color-primary -20px -20px 0 0, $color-primary 20px -20px 0 0;
   }
 }
 @keyframes spinner-flower {
   0% {
-    -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-            transform: rotate(0deg);
+    @include transform(rotate(0));
     box-shadow: $color-primary 0 0 23px 0, $color-primary -20px -20px 0 0, $color-primary 20px -20px 0 0, $color-primary 20px 20px 0 0, $color-primary -20px 20px 0 0;
   }
   50% {
-    -webkit-transform: rotate(1080deg);
-        -ms-transform: rotate(1080deg);
-            transform: rotate(1080deg);
+    @include transform(rotate(1080deg));
     box-shadow: $color-primary 0 0 23px 0, $color-primary 20px 20px 0 0, $color-primary -20px 20px 0 0, $color-primary -20px -20px 0 0, $color-primary 20px -20px 0 0;
   }
 }
 @-webkit-keyframes spinner-orbit {
-  0% {
-    -webkit-transform: rotate(0);
-            transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  0% { @include transform(rotate(0)); }
+  100% { @include transform(rotate(360deg)); }
 }
 @keyframes spinner-orbit {
-  0% {
-    -webkit-transform: rotate(0);
-        -ms-transform: rotate(0);
-            transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  0% { @include transform(rotate(0)); }
+  100% { @include transform(rotate(360deg)); }
 }
 @-webkit-keyframes spinner-pulse {
   0% {
     opacity: 1;
-    -webkit-transform: scale(0);
-            transform: scale(0);
+    @include transform(scale(0));
   }
   100% {
     opacity: 0;
-    -webkit-transform: scale(1.0);
-            transform: scale(1.0);
+    @include transform(scale(1));
   }
 }
 @keyframes spinner-pulse {
   0% {
     opacity: 1;
-    -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-            transform: scale(0);
+    @include transform(scale(0));
   }
   100% {
     opacity: 0;
-    -webkit-transform: scale(1.0);
-        -ms-transform: scale(1.0);
-            transform: scale(1.0);
+    @include transform(scale(1));
   }
 }
 @-webkit-keyframes spinner-rotating-plane {
-  0%   {
-    -webkit-transform: perspective(120px);
-            transform: perspective(120px);
-  }
-  50%  {
-    -webkit-transform: perspective(120px) rotateY(180deg);
-            transform: perspective(120px) rotateY(180deg);
-  }
-  100% {
-    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
-            transform: perspective(120px) rotateY(180deg) rotateX(180deg);
-  }
+  0% { @include transform(perspective(120px) rotateX(0) rotateY(0)); }
+  50% { @include transform(perspective(120px) rotateX(-180.1deg) rotateY(0)); }
+  100% { @include transform(perspective(120px) rotateX(-180deg) rotateY(-179.9deg)); }
 }
 @keyframes spinner-rotating-plane {
-  0% {
-    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-        -ms-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-  }
-  50% {
-    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-        -ms-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-  }
-  100% {
-    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-        -ms-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-  }
+  0% { @include transform(perspective(120px) rotateX(0) rotateY(0)); }
+  50% { @include transform(perspective(120px) rotateX(-180.1deg) rotateY(0)); }
+  100% { @include transform(perspective(120px) rotateX(-180deg) rotateY(-179.9deg)); }
 }
 @-webkit-keyframes spinner-triple-bounce {
-  0%, 80%, 100% {
-    -webkit-transform: scale(0);
-            transform: scale(0);
-  }
-  40% {
-    -webkit-transform: scale(1.0);
-            transform: scale(1.0);
-  }
+  0%, 80%, 100% { @include transform(scale(0)); }
+  40% { @include transform(scale(1)); }
 }
 @keyframes spinner-triple-bounce {
-  0%, 80%, 100% {
-    -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-            transform: scale(0);
-  }
-  40% {
-    -webkit-transform: scale(1.0);
-        -ms-transform: scale(1.0);
-            transform: scale(1.0);
-  }
+  0%, 80%, 100% { @include transform(scale(0)); }
+  40% { @include transform(scale(1)); }
 }
 @-webkit-keyframes spinner-wander {
-  25% {
-    -webkit-transform: translateX(50px) rotate(-90deg) scale(0.5);
-            transform: translateX(50px) rotate(-90deg) scale(0.5);
-  }
-  50% {
-    -webkit-transform: translateX(50px) translateY(50px) rotate(-179deg);
-            transform: translateX(50px) translateY(50px) rotate(-179deg);
-  }
-  50.1% {
-    -webkit-transform: translateX(50px) translateY(50px) rotate(-180deg);
-            transform: translateX(50px) translateY(50px) rotate(-180deg);
-  }
-  75% {
-    -webkit-transform: translateX(0px) translateY(50px) rotate(-270deg) scale(0.5);
-            transform: translateX(0px) translateY(50px) rotate(-270deg) scale(0.5);
-  }
-  100% {
-    -webkit-transform: rotate(-360deg);
-            transform: rotate(-360deg);
-  }
+  25% { @include transform(translateX(50px) rotate(-90deg) scale(0.5)); }
+  50% { @include transform(translateX(50px) translateY(50px) rotate(-179deg)); }
+  50.1% { @include transform(translateX(50px) translateY(50px) rotate(-180deg)); }
+  75% { @include transform(translateX(0px) translateY(50px) rotate(-270deg) scale(0.5)); }
+  100% { @include transform(rotate(-360deg)); }
 }
 @keyframes spinner-wander {
-  25% {
-    -webkit-transform: translateX(50px) rotate(-90deg) scale(0.5);
-        -ms-transform: translateX(50px) rotate(-90deg) scale(0.5);
-            transform: translateX(50px) rotate(-90deg) scale(0.5);
-  }
-  50% {
-    -webkit-transform: translateX(50px) translateY(50px) rotate(-179deg);
-        -ms-transform: translateX(50px) translateY(50px) rotate(-179deg);
-            transform: translateX(50px) translateY(50px) rotate(-179deg);
-  }
-  50.1% {
-    -webkit-transform: translateX(50px) translateY(50px) rotate(-180deg);
-        -ms-transform: translateX(50px) translateY(50px) rotate(-180deg);
-            transform: translateX(50px) translateY(50px) rotate(-180deg);
-  }
-  75% {
-    -webkit-transform: translateX(0px) translateY(50px) rotate(-270deg) scale(0.5);
-        -ms-transform: translateX(0px) translateY(50px) rotate(-270deg) scale(0.5);
-            transform: translateX(0px) translateY(50px) rotate(-270deg) scale(0.5);
-  }
-  100% {
-    -webkit-transform: rotate(-360deg);
-        -ms-transform: rotate(-360deg);
-            transform: rotate(-360deg);
-  }
+  25% { @include transform(translateX(50px) rotate(-90deg) scale(0.5)); }
+  50% { @include transform(translateX(50px) translateY(50px) rotate(-179deg)); }
+  50.1% { @include transform(translateX(50px) translateY(50px) rotate(-180deg)); }
+  75% { @include transform(translateX(0px) translateY(50px) rotate(-270deg) scale(0.5)); }
+  100% { @include transform(rotate(-360deg)); }
 }
 @-webkit-keyframes spinner-wave {
-  0%, 40%, 100% {
-    -webkit-transform: scaleY(0.4);
-            transform: scaleY(0.4);
-  }
-  20% {
-    -webkit-transform: scaleY(1.0);
-            transform: scaleY(1.0);
-  }
+  0%, 40%, 100% { @include transform(scaleY(0.4)); }
+  20% { @include transform(scaleY(1)); }
 }
 @keyframes spinner-wave {
-  0%, 40%, 100% {
-    -webkit-transform: scaleY(0.4);
-        -ms-transform: scaleY(0.4);
-            transform: scaleY(0.4);
-  }
-  20% {
-    -webkit-transform: scaleY(1.0);
-        -ms-transform: scaleY(1.0);
-            transform: scaleY(1.0);
-  }
+  0%, 40%, 100% { @include transform(scaleY(0.4)); }
+  20% { @include transform(scaleY(1)); }
 }
 @-webkit-keyframes spinner-wobbler {
   0%  { left: 4px; }
@@ -435,7 +214,7 @@
 /* # Spinner
 ================================================== */
 .spinner-backdrop {
-  background: rgba(255,255,255,0.9);
+  background: transparentize($color-white, 0.1);
   bottom: 0;
   left: 0;
   position: fixed;
@@ -444,9 +223,7 @@
   z-index: 2040;
 }
 .spinner {
-  -webkit-animation-fill-mode: both;
-      -ms-animation-fill-mode: both;
-          animation-fill-mode: both;
+  @include animation-fill-mode(both);
   margin: 15% auto 0 auto;
   position: relative;
   text-align: center;
@@ -496,18 +273,14 @@
   box-sizing: border-box;
 }
 .spinner-beat {
-  -webkit-animation: spinner-beat 1.3s infinite ease-in-out;
-      -ms-animation: spinner-beat 1.3s infinite ease-in-out;
-          animation: spinner-beat 1.3s infinite ease-in-out;
-  background: $color-white;
+  @include animation(spinner-beat 1.3s infinite ease-in-out);
+  background: $color-transparent;
   border-width: 2px;
 }
 .spinner-circle-container-1 > div,
 .spinner-circle-container-2 > div,
 .spinner-circle-container-3 > div {
-  -webkit-animation: spinner-circle 1.2s infinite ease-in-out;
-      -ms-animation: spinner-circle 1.2s infinite ease-in-out;
-          animation: spinner-circle 1.2s infinite ease-in-out;
+  @include animation(spinner-circle 1.2s infinite ease-in-out);
   background: $color-primary;
   height: 15px;
   position: absolute;
@@ -518,42 +291,20 @@
   height: 100%;
   width: 100%;
 }
-.spinner-circle-container-2 {
-  -webkit-transform: rotateZ(45deg);
-      -ms-transform: rotateZ(45deg);
-          transform: rotateZ(45deg);
-}
-.spinner-circle-container-3 {
-  -webkit-transform: rotateZ(90deg);
-      -ms-transform: rotateZ(90deg);
-          transform: rotateZ(90deg);
-}
-.spinner-circle-1 {
-  left: 0;
-  top: 0;
-}
-.spinner-circle-2 {
-  right: 0;
-  top: 0;
-}
-.spinner-circle-3 {
-  bottom: 0;
-  right: 0;
-}
-.spinner-circle-4 {
-  bottom: 0;
-  left: 0;
-}
-.spinner-chase {
-  -webkit-animation: spinner-chase-rotate 2.0s infinite linear;
-      -ms-animation: spinner-chase-rotate 2.0s infinite linear;
-          animation: spinner-chase-rotate 2.0s infinite linear;
-}
+.spinner-circle-container-2 { @include transform(rotateZ(45deg)); }
+.spinner-circle-container-3 { @include transform(rotateZ(90deg)); }
+.spinner-circle-1,
+.spinner-circle-2 { top: 0; }
+.spinner-circle-1 { left: 0; }
+.spinner-circle-2 { right: 0; }
+.spinner-circle-3,
+.spinner-circle-4 { bottom: 0; }
+.spinner-circle-3 { right: 0; }
+.spinner-circle-4 { left: 0; }
+.spinner-chase { @include animation(spinner-chase-rotate 2s infinite linear); }
 .spinner-chase-1,
 .spinner-chase-2 {
-  -webkit-animation: spinner-chase-bounce 2.0s infinite ease-in-out;
-      -ms-animation: spinner-chase-bounce 2.0s infinite ease-in-out;
-          animation: spinner-chase-bounce 2.0s infinite ease-in-out;
+  @include animation(spinner-chase-bounce 2s infinite ease-in-out);
   background: $color-primary;
   display: inline-block;
   height: 60%;
@@ -566,9 +317,7 @@
   top: auto;
 }
 .spinner-crescent {
-  -webkit-animation: spinner-crescent 1.2s infinite linear;
-      -ms-animation: spinner-crescent 1.2s infinite linear;
-          animation: spinner-crescent 1.2s infinite linear;
+  @include animation(spinner-crescent 1.2s infinite linear);
   border-width: 9px;
   border-right-color: $color-transparent;
 }
@@ -581,9 +330,7 @@
 .spinner-cube-7,
 .spinner-cube-8,
 .spinner-cube-9 {
-  -webkit-animation: spinner-cube 1.3s infinite ease-in-out;
-      -ms-animation: spinner-cube 1.3s infinite ease-in-out;
-          animation: spinner-cube 1.3s infinite ease-in-out;
+  @include animation(spinner-cube 1.3s infinite ease-in-out);
   background: $color-primary;
   border-color: $color-white;
   float: left;
@@ -595,9 +342,7 @@
 .spinner-cube-9 { margin-top: -1px; }
 .spinner-double-bounce-1,
 .spinner-double-bounce-2 {
-  -webkit-animation: spinner-double-bounce 2.0s infinite ease-in-out;
-      -ms-animation: spinner-double-bounce 2.0s infinite ease-in-out;
-          animation: spinner-double-bounce 2.0s infinite ease-in-out;
+  @include animation(spinner-double-bounce 2s infinite ease-in-out);
   background: $color-primary;
   border-radius: 50%;
   height: 100%;
@@ -608,36 +353,24 @@
   width: 100%;
 }
 .spinner-flower {
-  -webkit-animation: spinner-flower 5s infinite ease-in-out;
-      -ms-animation: spinner-flower 5s infinite ease-in-out;
-          animation: spinner-flower 5s infinite ease-in-out;
+  @include animation(spinner-flower 5s infinite ease-in-out);
   background: $color-primary;
   height: 23px;
-  -webkit-transform-origin: 50% 50%;
-      -ms-transform-origin: 50% 50%;
-          transform-origin: 50% 50%;
+  @include transform-origin(50% 50%);
   width: 23px;
 }
-.spinner-orbit {
-  -webkit-animation: spinner-orbit 1s linear infinite;
-      -ms-animation: spinner-orbit 1s linear infinite;
-          animation: spinner-orbit 1s linear infinite;
-}
+.spinner-orbit { @include animation(spinner-orbit 1s linear infinite); }
 .spinner-orbit-1 {
   background: $color-primary;
   height: 20px;
   width: 20px;
 }
 .spinner-pulse {
-  -webkit-animation: spinner-pulse 1.0s infinite ease-in-out;
-      -ms-animation: spinner-pulse 1.0s infinite ease-in-out;
-          animation: spinner-pulse 1.0s infinite ease-in-out;
+  @include animation(spinner-pulse 1s infinite ease-in-out);
   background: $color-primary;
 }
 .spinner-rotating-plane {
-  -webkit-animation: spinner-rotating-plane 1.2s infinite ease-in-out;
-      -ms-animation: spinner-rotating-plane 1.2s infinite ease-in-out;
-          animation: spinner-rotating-plane 1.2s infinite ease-in-out;
+  @include animation(spinner-rotating-plane 1.2s infinite ease-in-out);
   background: $color-primary;
   border-radius: 0;
   height: 100px;
@@ -645,9 +378,7 @@
 }
 .spinner-triple-bounce { width: 100px; }
 .spinner-triple-bounce > div {
-  -webkit-animation: spinner-triple-bounce 1.4s infinite ease-in-out;
-      -ms-animation: spinner-triple-bounce 1.4s infinite ease-in-out;
-          animation: spinner-triple-bounce 1.4s infinite ease-in-out;
+  @include animation(spinner-triple-bounce 1.4s infinite ease-in-out);
   background: $color-primary;
   display: inline-block;
   height: 25px;
@@ -659,9 +390,7 @@
 }
 .spinner-wander-1,
 .spinner-wander-2 {
-  -webkit-animation: spinner-wander 1.8s infinite ease-in-out;
-      -ms-animation: spinner-wander 1.8s infinite ease-in-out;
-          animation: spinner-wander 1.8s infinite ease-in-out;
+  @include animation(spinner-wander 1.8s infinite ease-in-out);
   background: $color-primary;
   border-radius: 0;
   height: 20px;
@@ -672,9 +401,7 @@
 }
 .spinner-wave { height: 100px; }
 .spinner-wave > div {
-  -webkit-animation: spinner-wave 1.2s infinite ease-in-out;
-      -ms-animation: spinner-wave 1.2s infinite ease-in-out;
-          animation: spinner-wave 1.2s infinite ease-in-out;
+  @include animation(spinner-wave 1.2s infinite ease-in-out);
   background: $color-primary;
   border-radius: 0;
   display: inline-block;
@@ -686,9 +413,7 @@
   width: 150px;
 }
 .spinner-wobbler::after {
-  -webkit-animation: spinner-wobbler 15s infinite ease-in-out;
-      -ms-animation: spinner-wobbler 15s infinite ease-in-out;
-          animation: spinner-wobbler 15s infinite ease-in-out;
+  @include animation(spinner-wobbler 15s infinite ease-in-out);
   background: $color-primary;
   content: '';
   height: 20px;
@@ -698,99 +423,36 @@
   width: 20px;
 }
 .spinner-circle > .spinner-circle-container-2 .spinner-circle-1,
-.spinner-wave > .spinner-wave-2 {
-  -webkit-animation-delay: -1.1s;
-      -ms-animation-delay: -1.1s;
-          animation-delay: -1.1s;
-}
+.spinner-wave > .spinner-wave-2 { @include animation-delay(-1.1s); }
 .spinner-circle > .spinner-circle-container-3 .spinner-circle-1,
 .spinner-circle > .spinner-circle-container-3 .spinner-circle-4,
 .spinner-chase-2,
 .spinner-double-bounce-2,
-.spinner-wave > .spinner-wave-3 {
-  -webkit-animation-delay: -1.0s;
-      -ms-animation-delay: -1.0s;
-          animation-delay: -1.0s;
-}
+.spinner-wave > .spinner-wave-3 { @include animation-delay(-1s); }
 .spinner-circle > .spinner-circle-container-1 .spinner-circle-2,
 .spinner-wander > .spinner-wander-2,
-.spinner-wave > .spinner-wave-4 {
-  -webkit-animation-delay: -0.9s;
-      -ms-animation-delay: -0.9s;
-          animation-delay: -0.9s;
-}
+.spinner-wave > .spinner-wave-4 { @include animation-delay(-0.9s); }
 .spinner-circle > .spinner-circle-container-2 .spinner-circle-2,
-.spinner-wave > .spinner-wave-5 {
-  -webkit-animation-delay: -0.8s;
-      -ms-animation-delay: -0.8s;
-          animation-delay: -0.8s;
-}
-.spinner-circle > .spinner-circle-container-3 > .spinner-circle-2 {
-  -webkit-animation-delay: -0.7s;
-      -ms-animation-delay: -0.7s;
-          animation-delay: -0.7s;
-}
-.spinner-circle > .spinner-circle-container-1 > .spinner-circle-3 {
-  -webkit-animation-delay: -0.6s;
-      -ms-animation-delay: -0.6s;
-          animation-delay: -0.6s;
-}
-.spinner-circle > .spinner-circle-container-2 > .spinner-circle-3 {
-  -webkit-animation-delay: -0.5s;
-      -ms-animation-delay: -0.5s;
-          animation-delay: -0.5s;
-}
-.spinner-circle > .spinner-circle-container-3 > .spinner-circle-3 {
-  -webkit-animation-delay: -0.4s;
-      -ms-animation-delay: -0.4s;
-          animation-delay: -0.4s;
-}
-.spinner-circle > .spinner-circle-container-1 > .spinner-circle-4 {
-  -webkit-animation-delay: -0.3s;
-      -ms-animation-delay: -0.3s;
-          animation-delay: -0.3s;
-}
-.spinner-circle > .spinner-circle-container-2 > .spinner-circle-4 {
-  -webkit-animation-delay: -0.2s;
-      -ms-animation-delay: -0.2s;
-          animation-delay: -0.2s;
-}
-.spinner-cube > .spinner-cube-7 {
-  -webkit-animation-delay: 0.0s;
-      -ms-animation-delay: 0.0s;
-          animation-delay: 0.0s;
-}
+.spinner-wave > .spinner-wave-5 { @include animation-delay(-0.8s); }
+.spinner-circle > .spinner-circle-container-3 > .spinner-circle-2 { @include animation-delay(-0.7s); }
+.spinner-circle > .spinner-circle-container-1 > .spinner-circle-3 { @include animation-delay(-0.6s); }
+.spinner-circle > .spinner-circle-container-2 > .spinner-circle-3 { @include animation-delay(-0.5s); }
+.spinner-circle > .spinner-circle-container-3 > .spinner-circle-3 { @include animation-delay(-0.4s); }
+.spinner-circle > .spinner-circle-container-1 > .spinner-circle-4 { @include animation-delay(-0.3s); }
+.spinner-circle > .spinner-circle-container-2 > .spinner-circle-4 { @include animation-delay(-0.2s); }
+.spinner-cube > .spinner-cube-7 { @include animation-delay(0s); }
 .spinner-cube > .spinner-cube-4,
-.spinner-cube > .spinner-cube-8 {
-  -webkit-animation-delay: 0.1s;
-      -ms-animation-delay: 0.1s;
-          animation-delay: 0.1s;
-}
+.spinner-cube > .spinner-cube-8 { @include animation-delay(0.1s); }
 .spinner-cube > .spinner-cube-1,
 .spinner-cube > .spinner-cube-5,
-.spinner-cube > .spinner-cube-9 {
-  -webkit-animation-delay: 0.2s;
-      -ms-animation-delay: 0.2s;
-          animation-delay: 0.2s;
-}
+.spinner-cube > .spinner-cube-9 { @include animation-delay(0.2s); }
 .spinner-cube > .spinner-cube-2,
-.spinner-cube > .spinner-cube-6 {
-  -webkit-animation-delay: 0.3s;
-      -ms-animation-delay: 0.3s;
-          animation-delay: 0.3s;
-}
-.spinner-cube > .spinner-cube-3 {
-  -webkit-animation-delay: 0.4s;
-      -ms-animation-delay: 0.4s;
-          animation-delay: 0.4s;
-}
-.spinner-triple-bounce > .spinner-triple-bounce-1 {
-  -webkit-animation-delay: -0.32s;
-      -ms-animation-delay: -0.32s;
-          animation-delay: -0.32s;
-}
-.spinner-triple-bounce > .spinner-triple-bounce-2 {
-  -webkit-animation-delay: -0.16s;
-      -ms-animation-delay: -0.16s;
-          animation-delay: -0.16s;
-}
+.spinner-cube > .spinner-cube-6 { @include animation-delay(0.3s); }
+.spinner-cube > .spinner-cube-3 { @include animation-delay(0.4s); }
+.spinner-triple-bounce > .spinner-triple-bounce-1 { @include animation-delay(-0.32s); }
+.spinner-triple-bounce > .spinner-triple-bounce-2 { @include animation-delay(-0.16s); }
+
+/* # Colors
+================================================== */
+.spinner-dark.spinner-backdrop { background: transparentize($color-black, 0.1); }
+.spinner-light.spinner-backdrop { background: transparentize($color-haze, 0.1); }