active_frontend 11.1.0 → 12.0.0

data/vendor/assets/stylesheets/_navbar.scss

@@ -10,6 +10,7 @@
   background: $color-white;
   border-collapse: separate;
   border-top: 1px solid $color-haze;
+  color: $color-black;
   box-sizing: border-box;
   display: table;
   height: 50px;
@@ -24,7 +25,6 @@
   z-index: 1030;
 }
 .navbar > a {
-  color: $color-gray;
   display: table-cell;
   float: none;
   font-size: 27px;
@@ -50,6 +50,7 @@
 .navbar-dark {
   background: $color-black;
   border-color: $color-dark-black;
+  color: $color-white;
 }
 .navbar-light {
   background: $color-light-haze;

data/vendor/assets/stylesheets/_pagination.scss

@@ -6,6 +6,7 @@
 
 /* # Pagination
 ================================================== */
+.pagination { color: $color-black; }
 .pagination > ul {
   display: inline-block;
   margin: 0;
@@ -22,7 +23,6 @@
 .pagination > ul > li.active {
   background: $color-white;
   border-radius: 500px;
-  color: $color-black;
   display: inline-block;
   min-width: 8px;
   text-align: center;
@@ -49,21 +49,19 @@
 
 /* # Colors
 ================================================== */
+.pagination-dark { color: $color-white; }
 .pagination-dark > ul > li > a,
-.pagination-dark > ul > li.active {
-  background: $color-black;
-  color: $color-white;
-}
+.pagination-dark > ul > li.active { background: $color-light-black; }
+.pagination-dark > ul > li > a:hover,
+.pagination-dark > ul > li > a:focus { background: $color-dark-black; }
 .pagination-light > ul > li > a,
 .pagination-light > ul > li.active { background: $color-light-haze; }
+.pagination-light > ul > li > a:hover,
+.pagination-light > ul > li > a:focus { background: $color-haze; }
 .pagination-dark > ul > li > a:active,
 .pagination-dark > ul > li.active,
 .pagination-light > ul > li > a:active,
 .pagination-light > ul > li.active {
   background: $color-primary;
   color: $color-white;
-}
-.pagination-dark > ul > li > a:hover,
-.pagination-dark > ul > li > a:focus { background: $color-light-black; }
-.pagination-light > ul > li > a:hover,
-.pagination-light > ul > li > a:focus { background: $color-haze; }
+}

data/vendor/assets/stylesheets/_panel.scss

@@ -8,40 +8,46 @@
 ================================================== */
 .panel {
   background: $color-white;
-  border: 1px solid $color-haze;
+  border: 1px solid;
+  border-color: $color-haze;
   border-radius: 2px;
+  color: $color-black;
   margin-bottom: 20px;
 }
 .panel-header {
-  background: $color-white;
-  border-bottom: 1px solid $color-haze;
+  border-bottom: 1px solid;
+  border-color: inherit;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   padding: 14px 15px 12px 15px;
 }
-.panel-header .btn {
-  margin-bottom: -4px;
-  margin-top: -6px;
-}
-.panel-title {
-  color: $color-black;
+.panel-header > h1,
+.panel-header > h2,
+.panel-header > h3,
+.panel-header > h4,
+.panel-header > h5,
+.panel-header > h6 {
   display: inline-block;
   font-size: 16px;
   line-height: 1;
   margin: 0;
+  padding: 0;
+}
+.panel-header .btn {
+  margin-bottom: -4px;
+  margin-top: -6px;
 }
 .panel-body { padding: 15px; }
 .panel-body-chart {
   margin-bottom: -10px;
   width: 100%;
 }
-.panel-body > .table-responsive {
-  border: 0;
-  margin: 0;
-}
+.panel-body > .table,
+.panel-body > .table-responsive { margin: 0; }
+.panel-body > .table-responsive { border: 0; }
 .panel-footer {
-  background: $color-white;
-  border-top: 1px solid $color-haze;
+  border-top: 1px solid;
+  border-color: inherit;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
   padding: 14px 15px 13px 15px;
@@ -49,20 +55,12 @@
 
 /* # Colors
 ================================================== */
-.panel-dark,
-.panel-dark .panel-header,
-.panel-dark .panel-title,
-.panel-dark .panel-body,
-.panel-dark .panel-footer {
+.panel-dark {
   background: $color-black;
   border-color: $color-dark-black;
   color: $color-white;
 }
-.panel-light,
-.panel-light .panel-header,
-.panel-light .panel-title,
-.panel-light .panel-body,
-.panel-light .panel-footer {
+.panel-light {
   background: $color-light-haze;
   border-color: $color-dark-haze;
 }

data/vendor/assets/stylesheets/_placeholder.scss

@@ -7,7 +7,10 @@
 
 /* # Placeholder
 ================================================== */
-.placeholder { text-align: center; }
+.placeholder {
+  color: $color-gray;
+  text-align: center;
+}
 .placeholder > i {
   background: $color-primary;
   border-radius: 500px;
@@ -19,36 +22,34 @@
   width: 120px;
 }
 .placeholder > h6 {
-  color: $color-dark-gray;
   letter-spacing: 1px;
   text-transform: uppercase;
 }
 .placeholder > p {
-  color: $color-gray;
   font-size: 14px;
   line-height: 22px;
 }
+.placeholder-divider {
+  background: $color-white;
+  border-radius: 500px;
+  height: 8px;
+  margin: 20px auto;
+  width: 50%;
+}
 
 /* # Sizes
 ================================================== */
 .placeholder-large > i {
   background: $color-transparent;
-  color: $color-dark-gray;
+  color: inherit;
   display: inline-block;
   font-size: 256px;
   height: initial;
   line-height: 0;
   width: initial;
 }
-.placeholder-divider {
-  background: $color-white;
-  border-radius: 500px;
-  height: 8px;
-  margin: 20px auto;
-  width: 50%;
-}
 
-/* # Sizes
+/* # Colors
 ================================================== */
 .placeholder-dark > .placeholder-divider { background: $color-light-black; }
 .placeholder-light > .placeholder-divider { background: $color-light-haze; }

data/vendor/assets/stylesheets/_progress.scss

@@ -35,11 +35,11 @@ $colors: (
 ================================================== */
 @-webkit-keyframes progress-bar-stripes {
   from { background-position: 40px 0; }
-  to   { background-position: 0 0; }
+  to { background-position: 0 0; }
 }
 @keyframes progress-bar-stripes {
   from { background-position: 40px 0; }
-  to   { background-position: 0 0; }
+  to { background-position: 0 0; }
 }
 
 /* # Progress
@@ -68,8 +68,7 @@ $colors: (
 @each $name, $color in $colors {
   .progress > .bar-#{$name} { background: $color; }
 }
-
-.progress-dark { background: $color-black; }
+.progress-dark { background: $color-light-black; }
 .progress-light { background: $color-light-haze; }
 
 /* # Animations

data/vendor/assets/stylesheets/_reset.scss

@@ -21,6 +21,7 @@ h5,
 h6,
 form,
 fieldset,
+legend,
 label,
 p,
 blockquote,

data/vendor/assets/stylesheets/_sidebar.scss

@@ -8,19 +8,23 @@
 ================================================== */
 .sidebar {
   background: $color-white;
-  border-left: 1px solid $color-haze;
+  border-left: 1px solid;
+  border-color: $color-haze;
   box-sizing: border-box;
+  color: $color-black;
   height: 100%;
   min-width: 280px;
   position: fixed;
   width: 280px;
 }
 .sidebar-alt {
-  border-right: 1px solid $color-haze;
+  border-right: 1px solid;
+  border-color: inherit;
   border-left: 0;
 }
 .sidebar-header {
-  border-bottom: 1px solid $color-haze;
+  border-bottom: 1px solid;
+  border-color: inherit;
   font-size: 12px;
   line-height: 1;
   padding: 10px 20px 8px 10px;
@@ -29,11 +33,18 @@
   padding-left: 20px;
   padding-right: 10px;
 }
+.sidebar-header > h1,
+.sidebar-header > h2,
+.sidebar-header > h3,
+.sidebar-header > h4,
+.sidebar-header > h5,
 .sidebar-header > h6 {
   font-size: 11px;
   font-weight: normal;
   letter-spacing: 1px;
   line-height: 1;
+  margin: 0;
+  padding: 0;
   text-transform: uppercase;
 }
 .sidebar-content {
@@ -48,7 +59,8 @@
   padding-left: 20px;
 }
 .sidebar-scrollable {
-  border-bottom: 1px solid $color-light-haze;
+  border-bottom: 1px solid;
+  border-color: inherit;
   height: auto;
   max-height: calc(50% - 50px);
   @include overflow-scrolling(touch);
@@ -57,15 +69,15 @@
 
 /* # Colors
 ================================================== */
-.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; }
-.sidebar-light,
-.sidebar-light > .sidebar-header,
-.sidebar-light > .sidebar-scrollable { border-color: $color-dark-haze; }
+.sidebar-dark {
+  background: $color-black;
+  border-color: $color-dark-black;
+  color: $color-white;
+}
+.sidebar-light {
+  background: $color-light-haze;
+  border-color: $color-dark-haze;
+}
 
 /* # Media Queries
 ================================================== */
@@ -94,5 +106,10 @@ only screen and (                min-resolution: 2dppx) {
   .sidebar,
   .sidebar-header,
   .sidebar-scrollable { border-width: 0.5px; }
+  .sidebar-header > h1,
+  .sidebar-header > h2,
+  .sidebar-header > h3,
+  .sidebar-header > h4,
+  .sidebar-header > h5,
   .sidebar-header > h6 { letter-spacing: 0.5px; }
 }

data/vendor/assets/stylesheets/_slider.scss

@@ -114,7 +114,7 @@
   position: absolute;
 }
 .slider-track,
-.slider.slider-disabled .slider-track { background: $color-light-haze; }
+.slider.slider-disabled .slider-track { background: $color-haze; }
 .slider-selection,
 .slider-selection.tick-slider-selection,
 .slider.slider-disabled .slider-handle { background: $color-dark-haze; }
@@ -134,7 +134,7 @@
   width: 16px;
 }
 .slider-handle { background: $color-primary; }
-.slider-tick { background: $color-light-haze; }
+.slider-tick { background: $color-haze; }
 .slider-tick.in-selection { background: $color-dark-haze; }
 .slider-handle.round,
 .slider-tick.round { border-radius: 500px; }

data/vendor/assets/stylesheets/_spinner.scss

@@ -7,40 +7,44 @@
 /* # Keyframes
 ================================================== */
 @-webkit-keyframes spinner-beat {
-  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)); }
+  0%, 28%, 70% { @include transform(scale(1)); }
+  14%, 42% { @include transform(scale(1.5)); }
 }
 @keyframes spinner-beat {
-  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)); }
+  0%, 28%, 70% { @include transform(scale(1)); }
+  14%, 42% { @include transform(scale(1.5)); }
 }
-@-webkit-keyframes spinner-circle {
+@-webkit-keyframes spinner-bounce-double {
+  0%, 100% { @include transform(scale(0)); }
+  50% { @include transform(scale(1)); }
+}
+@keyframes spinner-bounce-double {
+  0%, 100% { @include transform(scale(0)); }
+  50% { @include transform(scale(1)); }
+}
+@-webkit-keyframes spinner-bounce-triple {
   0%, 80%, 100% { @include transform(scale(0)); }
   40% { @include transform(scale(1)); }
 }
-@keyframes spinner-circle {
+@keyframes spinner-bounce-triple {
   0%, 80%, 100% { @include transform(scale(0)); }
   40% { @include transform(scale(1)); }
 }
-@-webkit-keyframes spinner-chase-rotate {
-  100% { @include transform(scale(360deg)); }
+@-webkit-keyframes spinner-circle-fading {
+  0%, 80%, 100% { @include transform(scale(0)); }
+  40% { @include transform(scale(1)); }
 }
-@keyframes spinner-chase-rotate {
-  100% { @include transform(scale(360deg)); }
+@keyframes spinner-circle-fading {
+  0%, 80%, 100% { @include transform(scale(0)); }
+  40% { @include transform(scale(1)); }
 }
-@-webkit-keyframes spinner-chase-bounce {
-  0%, 100% { @include transform(scale(0)); }
-  50% { @include transform(scale(1)); }
+@-webkit-keyframes spinner-circle-rotating {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
 }
-@keyframes spinner-chase-bounce {
-  0%, 100% { @include transform(scale(0)); }
-  50% { @include transform(scale(1)); }
+@keyframes spinner-circle-rotating {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
 }
 @-webkit-keyframes spinner-crescent {
   0% { @include transform(rotate(0)); }
@@ -50,40 +54,120 @@
   0% { @include transform(rotate(0)); }
   100% { @include transform(rotate(360deg)); }
 }
-@-webkit-keyframes spinner-cube {
+@-webkit-keyframes spinner-cube-grid {
   0%, 70%, 100% { @include transform(scale3D(1,1,1)); }
   35% { @include transform(scale3D(0,0,1)); }
 }
-@keyframes spinner-cube {
+@keyframes spinner-cube-grid {
   0%, 70%, 100% { @include transform(scale3D(1,1,1)); }
   35% { @include transform(scale3D(0,0,1)); }
 }
-@-webkit-keyframes spinner-double-bounce {
+@-webkit-keyframes spinner-cube-folding {
+  0%, 10% {
+    @include transform(perspective(140px) rotateX(-180deg));
+    opacity: 0;
+  }
+  25%, 75% {
+    @include transform(perspective(140px) rotateX(0));
+    opacity: 1;
+  }
+  90%, 100% {
+    @include transform(perspective(140px) rotateX(180deg));
+    opacity: 0;
+  }
+}
+@keyframes spinner-cube-folding {
+  0%, 10% {
+    @include transform(perspective(140px) rotateX(-180deg));
+    opacity: 0;
+  }
+  25%, 75% {
+    @include transform(perspective(140px) rotateX(0));
+    opacity: 1;
+  }
+  90%, 100% {
+    @include transform(perspective(140px) rotateX(180deg));
+    opacity: 0;
+  }
+}
+@-webkit-keyframes spinner-cube-wander {
+  0% { @include transform(rotate(0)); }
+  25% { @include transform(rotate(-90deg) translateX(30px) scale(0.5)); }
+  50% { @include transform(rotate(-179deg) translateX(30px) translateY(30px)); }
+  50.1% { @include transform(rotate(-180deg) translateX(30px) translateY(30px)); }
+  75% { @include transform(rotate(-270deg) translateX(0) translateY(30px) scale(0.5)); }
+  100% { @include transform(rotate(-360deg)); }
+}
+@keyframes spinner-cube-wander {
+  0% { @include transform(rotate(0)); }
+  25% { @include transform(rotate(-90deg) translateX(30px) scale(0.5)); }
+  50% { @include transform(rotate(-179deg) translateX(30px) translateY(30px)); }
+  50.1% { @include transform(rotate(-180deg) translateX(30px) translateY(30px)); }
+  75% { @include transform(rotate(-270deg) translateX(0) translateY(30px) scale(0.5)); }
+  100% { @include transform(rotate(-360deg)); }
+}
+@-webkit-keyframes spinner-dot-chasing-rotate {
+  100% { @include transform(rotate(360deg)); }
+}
+@keyframes spinner-dot-chasing-rotate {
+  100% { @include transform(rotate(360deg)); }
+}
+@-webkit-keyframes spinner-dot-chasing-bounce {
   0%, 100% { @include transform(scale(0)); }
   50% { @include transform(scale(1)); }
 }
-@keyframes spinner-double-bounce {
+@keyframes spinner-dot-chasing-bounce {
   0%, 100% { @include transform(scale(0)); }
   50% { @include transform(scale(1)); }
 }
+@-webkit-keyframes spinner-dot-loader {
+  0% { box-shadow: $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+  8.33% { box-shadow: $color-primary 14px -14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+  16.67% { box-shadow: $color-primary 14px 14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+  25% { box-shadow: $color-primary -14px 14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+  33.33% { box-shadow: $color-primary -14px -14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary -14px -14px 0 7px; }
+  41.67% { box-shadow: $color-primary 14px -14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px; }
+  50% { box-shadow: $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px; }
+  58.33% { box-shadow: $color-primary -14px 14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px; }
+  66.67% { box-shadow: $color-primary -14px -14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px; }
+  75% { box-shadow: $color-primary 14px -14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px -14px 0 7px; }
+  83.33% { box-shadow: $color-primary 14px 14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary 14px 14px 0 7px; }
+  91.67% { box-shadow: $color-primary -14px 14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+  100% { box-shadow: $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+}
+@keyframes spinner-dot-loader {
+  0% { box-shadow: $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+  8.33% { box-shadow: $color-primary 14px -14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+  16.67% { box-shadow: $color-primary 14px 14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+  25% { box-shadow: $color-primary -14px 14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+  33.33% { box-shadow: $color-primary -14px -14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary -14px -14px 0 7px; }
+  41.67% { box-shadow: $color-primary 14px -14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px; }
+  50% { box-shadow: $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px; }
+  58.33% { box-shadow: $color-primary -14px 14px 0 7px, $color-primary -14px 14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px; }
+  66.67% { box-shadow: $color-primary -14px -14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px; }
+  75% { box-shadow: $color-primary 14px -14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px -14px 0 7px; }
+  83.33% { box-shadow: $color-primary 14px 14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary 14px 14px 0 7px; }
+  91.67% { box-shadow: $color-primary -14px 14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+  100% { box-shadow: $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px; }
+}
 @-webkit-keyframes spinner-flower {
   0% {
     @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;
+    box-shadow: $color-transparent 0 0 0 0, lighten($color-primary, 25%) -20px -20px 0 0, lighten($color-primary, 25%) 20px -20px 0 0, lighten($color-primary, 25%) 20px 20px 0 0, lighten($color-primary, 25%) -20px 20px 0 0;
   }
   50% {
     @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;
+    box-shadow: $color-transparent 0 0 0 0, lighten($color-primary, 25%) 20px 20px 0 0, lighten($color-primary, 25%) -20px 20px 0 0, lighten($color-primary, 25%) -20px -20px 0 0, lighten($color-primary, 25%) 20px -20px 0 0;
   }
 }
 @keyframes spinner-flower {
   0% {
     @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;
+    box-shadow: $color-transparent 0 0 0 0, lighten($color-primary, 25%) -20px -20px 0 0, lighten($color-primary, 25%) 20px -20px 0 0, lighten($color-primary, 25%) 20px 20px 0 0, lighten($color-primary, 25%) -20px 20px 0 0;
   }
   50% {
     @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;
+    box-shadow: $color-transparent 0 0 0 0, lighten($color-primary, 25%) 20px 20px 0 0, lighten($color-primary, 25%) -20px 20px 0 0, lighten($color-primary, 25%) -20px -20px 0 0, lighten($color-primary, 25%) 20px -20px 0 0;
   }
 }
 @-webkit-keyframes spinner-orbit {
@@ -94,6 +178,16 @@
   0% { @include transform(rotate(0)); }
   100% { @include transform(rotate(360deg)); }
 }
+@-webkit-keyframes spinner-plane-rotating {
+  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-plane-rotating {
+  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-pulse {
   0% {
     opacity: 1;
@@ -114,38 +208,6 @@
     @include transform(scale(1));
   }
 }
-@-webkit-keyframes spinner-rotating-plane {
-  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% { @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% { @include transform(scale(0)); }
-  40% { @include transform(scale(1)); }
-}
-@keyframes spinner-triple-bounce {
-  0%, 80%, 100% { @include transform(scale(0)); }
-  40% { @include transform(scale(1)); }
-}
-@-webkit-keyframes spinner-wander {
-  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% { @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% { @include transform(scaleY(0.4)); }
   20% { @include transform(scaleY(1)); }
@@ -155,10 +217,10 @@
   20% { @include transform(scaleY(1)); }
 }
 @-webkit-keyframes spinner-wobbler {
-  0%  { left: 4px; }
-  3%  { left: 104px; }
-  6%  { left: 4px; }
-  9%  { left: 104px; }
+  0% { left: 4px; }
+  3% { left: 104px; }
+  6% { left: 4px; }
+  9% { left: 104px; }
   12% { left: 4px; }
   15% { left: 104px; }
   18% { left: 32px; }
@@ -183,10 +245,10 @@
   97% { left: 104px; }
 }
 @keyframes spinner-wobbler {
-  0%  { left: 4px; }
-  3%  { left: 104px; }
-  6%  { left: 4px; }
-  9%  { left: 104px; }
+  0% { left: 4px; }
+  3% { left: 104px; }
+  6% { left: 4px; }
+  9% { left: 104px; }
   12% { left: 4px; }
   15% { left: 104px; }
   18% { left: 32px; }
@@ -213,201 +275,267 @@
 
 /* # Spinner
 ================================================== */
-.spinner-backdrop {
-  background: transparentize($color-white, 0.1);
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 2040;
-}
 .spinner {
   @include animation-fill-mode(both);
-  margin: 15% auto 0 auto;
+  color: $color-primary;
+  margin: 23% auto 0 auto;
   position: relative;
   text-align: center;
 }
 .spinner-beat,
-.spinner-circle,
-.spinner-chase,
+.spinner-bounce-double,
+.spinner-dot-chasing,
 .spinner-crescent,
-.spinner-cube,
-.spinner-double-bounce,
+.spinner-circle-fading,
+.spinner-circle-rotating,
+.spinner-cube-folding,
+.spinner-cube-grid,
+.spinner-cube-wander,
 .spinner-orbit,
-.spinner-pulse {
+.spinner-pulse,
+.spinner-plane-rotating,
+.spinner-radiate {
   height: 60px;
   width: 60px;
 }
-.spinner-beat,
-.spinner-circle-container-1 > div,
-.spinner-circle-container-2 > div,
-.spinner-circle-container-3 > div,
-.spinner-chase-1,
-.spinner-chase-2,
-.spinner-crescent,
-.spinner-cube-1,
-.spinner-cube-2,
-.spinner-cube-3,
-.spinner-cube-4,
-.spinner-cube-5,
-.spinner-cube-6,
-.spinner-cube-7,
-.spinner-cube-8,
-.spinner-cube-9,
-.spinner-double-bounce-1,
-.spinner-double-bounce-2,
-.spinner-flower,
-.spinner-pulse,
-.spinner-rotating-plane,
-.spinner-orbit,
-.spinner-orbit-1,
-.spinner-triple-bounce > div,
-.spinner-wander-1,
-.spinner-wander-2,
-.spinner-wave > div,
-.spinner-wobbler,
-.spinner-wobbler::after  {
-  border: 1px solid $color-primary;
-  border-radius: 500px;
-  box-sizing: border-box;
-}
 .spinner-beat {
   @include animation(spinner-beat 1.3s infinite ease-in-out);
   background: $color-transparent;
-  border-width: 2px;
+  border: 2px solid;
+  border-radius: 500px;
+  box-sizing: border-box;
 }
-.spinner-circle-container-1 > div,
-.spinner-circle-container-2 > div,
-.spinner-circle-container-3 > div {
-  @include animation(spinner-circle 1.2s infinite ease-in-out);
+.spinner-bounce-double-child {
+  @include animation(spinner-bounce-double 2s infinite ease-in-out);
   background: $color-primary;
-  height: 15px;
-  position: absolute;
-  width: 15px;
-}
-.spinner-circle .spinner-circle-container {
-  position: absolute;
+  border-radius: 500px;
   height: 100%;
+  left: 0;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
   width: 100%;
 }
-.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 {
-  @include animation(spinner-chase-bounce 2s infinite ease-in-out);
+.spinner-bounce-double-child-2 { @include animation-delay(-1s); }
+.spinner-bounce-triple { width: 80px; }
+.spinner-bounce-triple-child {
+  @include animation(spinner-bounce-triple 1.4s infinite ease-in-out);
   background: $color-primary;
+  border-radius: 500px;
   display: inline-block;
-  height: 60%;
-  position: absolute;
-  top: 0;
-  width: 60%;
-}
-.spinner-chase-2 {
-  bottom: 0;
-  top: auto;
+  height: 20px;
+  width: 20px;
 }
+.spinner-bounce-triple-child-1 { @include animation-delay(-0.32s); }
+.spinner-bounce-triple-child-2 { @include animation-delay(-0.16s); }
 .spinner-crescent {
   @include animation(spinner-crescent 1.2s infinite linear);
-  border-width: 9px;
+  border: 9px solid;
   border-right-color: $color-transparent;
+  border-radius: 500px;
+  box-sizing: border-box;
+}
+.spinner-circle-fading-child:before,
+.spinner-circle-rotating-child:before {
+  background: $color-primary;
+  border-radius: 500px;
+  content: '';
+  display: block;
+  margin: 0 auto;
+  height: 15%;
+  width: 15%;
+}
+.spinner-circle-fading-child:before { @include animation(spinner-circle-fading 1.2s infinite ease-in-out); }
+.spinner-circle-rotating-child:before { @include animation(spinner-circle-rotating 1.2s infinite ease-in-out); }
+.spinner-circle-fading-child,
+.spinner-circle-rotating-child {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.spinner-circle-fading-child-2:before,
+.spinner-circle-rotating-child-2:before { @include animation-delay(-1.1s); }
+.spinner-circle-fading-child-3:before,
+.spinner-circle-rotating-child-3:before { @include animation-delay(-1s); }
+.spinner-circle-fading-child-4:before,
+.spinner-circle-rotating-child-4:before { @include animation-delay(-0.9s); }
+.spinner-circle-fading-child-5:before,
+.spinner-circle-rotating-child-5:before { @include animation-delay(-0.8s); }
+.spinner-circle-fading-child-6:before,
+.spinner-circle-rotating-child-6:before { @include animation-delay(-0.7s); }
+.spinner-circle-fading-child-7:before,
+.spinner-circle-rotating-child-7:before { @include animation-delay(-0.6s); }
+.spinner-circle-fading-child-8:before,
+.spinner-circle-rotating-child-8:before { @include animation-delay(-0.5s); }
+.spinner-circle-fading-child-9:before,
+.spinner-circle-rotating-child-9:before { @include animation-delay(-0.4s); }
+.spinner-circle-fading-child-10:before,
+.spinner-circle-rotating-child-10:before { @include animation-delay(-0.3s); }
+.spinner-circle-fading-child-11:before,
+.spinner-circle-rotating-child-11:before { @include animation-delay(-0.2s); }
+.spinner-circle-fading-child-12:before,
+.spinner-circle-rotating-child-12:before { @include animation-delay(-0.1s); }
+.spinner-circle-fading-child-2,
+.spinner-circle-rotating-child-2 { @include transform(rotate(30deg)); }
+.spinner-circle-fading-child-3,
+.spinner-circle-rotating-child-3 { @include transform(rotate(60deg)); }
+.spinner-circle-fading-child-4,
+.spinner-circle-rotating-child-4 { @include transform(rotate(90deg)); }
+.spinner-circle-fading-child-5,
+.spinner-circle-rotating-child-5 { @include transform(rotate(120deg)); }
+.spinner-circle-fading-child-6,
+.spinner-circle-rotating-child-6 { @include transform(rotate(150deg)); }
+.spinner-circle-fading-child-7,
+.spinner-circle-rotating-child-7 { @include transform(rotate(180deg)); }
+.spinner-circle-fading-child-8,
+.spinner-circle-rotating-child-8 { @include transform(rotate(210deg)); }
+.spinner-circle-fading-child-9,
+.spinner-circle-rotating-child-9 { @include transform(rotate(240deg)); }
+.spinner-circle-fading-child-10,
+.spinner-circle-rotating-child-10 { @include transform(rotate(270deg)); }
+.spinner-circle-fading-child-11,
+.spinner-circle-rotating-child-11 { @include transform(rotate(300deg)); }
+.spinner-circle-fading-child-12,
+.spinner-circle-rotating-child-12 { @include transform(rotate(330deg)); }
+.spinner-cube-folding { @include transform(rotateZ(45deg)); }
+.spinner-cube-folding-child:before {
+  @include animation(spinner-cube-folding 2.4s infinite linear);
+  background: $color-primary;
+  content: '';
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  @include transform-origin(100% 100%);
+  width: 100%;
 }
-.spinner-cube-1,
-.spinner-cube-2,
-.spinner-cube-3,
-.spinner-cube-4,
-.spinner-cube-5,
-.spinner-cube-6,
-.spinner-cube-7,
-.spinner-cube-8,
-.spinner-cube-9 {
-  @include animation(spinner-cube 1.3s infinite ease-in-out);
+.spinner-cube-folding-child {
+  float: left;
+  height: 50%;
+  position: relative;
+  @include transform(scale(1.1));
+  width: 50%;
+}
+.spinner-cube-folding-child-2:before { @include animation-delay(0.3s); }
+.spinner-cube-folding-child-3:before { @include animation-delay(0.6s); }
+.spinner-cube-folding-child-4:before { @include animation-delay(0.9s); }
+.spinner-cube-folding-child-2 { @include transform(scale(1.1) rotateZ(90deg)); }
+.spinner-cube-folding-child-3 { @include transform(scale(1.1) rotateZ(180deg)); }
+.spinner-cube-folding-child-4 { @include transform(scale(1.1) rotateZ(270deg)); }
+.spinner-cube-grid-child {
+  @include animation(spinner-cube-grid 1.3s infinite ease-in-out);
   background: $color-primary;
-  border-color: $color-white;
   float: left;
   height: 33%;
   width: 33%;
 }
-.spinner-cube-7,
-.spinner-cube-8,
-.spinner-cube-9 { margin-top: -1px; }
-.spinner-double-bounce-1,
-.spinner-double-bounce-2 {
-  @include animation(spinner-double-bounce 2s infinite ease-in-out);
+.spinner-cube-grid-child-1,
+.spinner-cube-grid-child-5,
+.spinner-cube-grid-child-9 { @include animation-delay(0.2s); }
+.spinner-cube-grid-child-2,
+.spinner-cube-grid-child-6 { @include animation-delay(0.3s); }
+.spinner-cube-grid-child-4,
+.spinner-cube-grid-child-8 { @include animation-delay(0.1s); }
+.spinner-cube-grid-child-3 { @include animation-delay(0.4s); }
+.spinner-cube-wander-child {
+  @include animation(spinner-cube-wander 1.8s ease-in-out -1.8s infinite);
   background: $color-primary;
-  border-radius: 50%;
-  height: 100%;
+  height: 10px;
   left: 0;
-  opacity: 0.75;
   position: absolute;
   top: 0;
-  width: 100%;
+  width: 10px;
+}
+.spinner-cube-wander-child-2 { @include animation-delay(-0.9s); }
+.spinner-dot-chasing { @include animation(spinner-dot-chasing-rotate 2s infinite linear); }
+.spinner-dot-chasing-child {
+  @include animation(spinner-dot-chasing-bounce 2s infinite ease-in-out);
+  background: $color-blue;
+  border-radius: 500px;
+  display: inline-block;
+  position: absolute;
+  height: 60%;
+  top: 0;
+  width: 60%;
+}
+.spinner-dot-chasing-child-2 {
+  @include animation-delay(-1s);
+  bottom: 0;
+  top: auto;
+}
+.spinner-dot-loader {
+  @include animation(spinner-dot-loader 5s infinite ease-in-out);
+  background: $color-transparent;
+  border-radius: 500px;
+  box-shadow: $color-primary -14px -14px 0 7px, $color-primary 14px -14px 0 7px, $color-primary 14px 14px 0 7px, $color-primary -14px 14px 0 7px;
+  display: inline-block;
+  height: 7px;
+  left: 50%;
+  overflow: hidden;
+  text-indent: -9999px;
+  @include transform-origin(50% 50%);
+  top: 0;
+  width: 7px;
 }
 .spinner-flower {
   @include animation(spinner-flower 5s infinite ease-in-out);
   background: $color-primary;
+  border: 1px solid $color-primary;
+  border-radius: 500px;
+  box-sizing: border-box;
   height: 23px;
   @include transform-origin(50% 50%);
   width: 23px;
 }
+.spinner-orbit,
+.spinner-orbit-child  {
+  border: 1px solid $color-primary;
+  border-radius: 500px;
+  box-sizing: border-box;
+}
 .spinner-orbit { @include animation(spinner-orbit 1s linear infinite); }
-.spinner-orbit-1 {
+.spinner-orbit-child {
   background: $color-primary;
   height: 20px;
   width: 20px;
 }
-.spinner-pulse {
-  @include animation(spinner-pulse 1s infinite ease-in-out);
-  background: $color-primary;
-}
-.spinner-rotating-plane {
-  @include animation(spinner-rotating-plane 1.2s infinite ease-in-out);
+.spinner-plane-rotating {
+  @include animation(spinner-plane-rotating 1.2s infinite ease-in-out);
   background: $color-primary;
-  border-radius: 0;
-  height: 100px;
-  width: 100px;
+  border: 1px solid $color-primary;
+  box-sizing: border-box;
 }
-.spinner-triple-bounce { width: 100px; }
-.spinner-triple-bounce > div {
-  @include animation(spinner-triple-bounce 1.4s infinite ease-in-out);
+.spinner-pulse {
+  @include animation(spinner-pulse 1s infinite ease-in-out);
   background: $color-primary;
-  display: inline-block;
-  height: 25px;
-  width: 25px;
+  border: 1px solid $color-primary;
+  border-radius: 500px;
+  box-sizing: border-box;
 }
-.spinner-wander {
-  height: 100px;
+.spinner-wave {
   width: 100px;
+  height: 80px;
 }
-.spinner-wander-1,
-.spinner-wander-2 {
-  @include animation(spinner-wander 1.8s infinite ease-in-out);
-  background: $color-primary;
-  border-radius: 0;
-  height: 20px;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 20px;
-}
-.spinner-wave { height: 100px; }
-.spinner-wave > div {
+.spinner-wave-child {
   @include animation(spinner-wave 1.2s infinite ease-in-out);
   background: $color-primary;
-  border-radius: 0;
   display: inline-block;
   height: 100%;
   width: 6px;
 }
+.spinner-wave-child-1 { @include animation-delay(-1.2s); }
+.spinner-wave-child-2 { @include animation-delay(-1.1s); }
+.spinner-wave-child-3 { @include animation-delay(-1s); }
+.spinner-wave-child-4 { @include animation-delay(-0.9s); }
+.spinner-wave-child-5 { @include animation-delay(-0.8s); }
+.spinner-wobbler,
+.spinner-wobbler::after  {
+  border: 1px solid $color-primary;
+  border-radius: 500px;
+  box-sizing: border-box;
+}
 .spinner-wobbler {
   height: 26px;
   width: 150px;
@@ -422,37 +550,21 @@
   top: 2px;
   width: 20px;
 }
-.spinner-circle > .spinner-circle-container-2 .spinner-circle-1,
-.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 { @include animation-delay(-1s); }
-.spinner-circle > .spinner-circle-container-1 .spinner-circle-2,
-.spinner-wander > .spinner-wander-2,
-.spinner-wave > .spinner-wave-4 { @include animation-delay(-0.9s); }
-.spinner-circle > .spinner-circle-container-2 .spinner-circle-2,
-.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 { @include animation-delay(0.1s); }
-.spinner-cube > .spinner-cube-1,
-.spinner-cube > .spinner-cube-5,
-.spinner-cube > .spinner-cube-9 { @include animation-delay(0.2s); }
-.spinner-cube > .spinner-cube-2,
-.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); }
+
+/* # Components
+================================================== */
+.spinner-backdrop {
+  background: transparentize($color-white, 0.1);
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 2040;
+}
 
 /* # Colors
 ================================================== */
-.spinner-dark.spinner-backdrop { background: transparentize($color-black, 0.1); }
-.spinner-light.spinner-backdrop { background: transparentize($color-haze, 0.1); }
+.spinner-dark { background: transparentize($color-black, 0.1); }
+.spinner-light { background: transparentize($color-haze, 0.1); }