fleetio_spark 0.1.0

data/app/assets/stylesheets/spark/components/header/_trial-status.scss

@@ -0,0 +1,43 @@
+.trial-status {
+  display: none;
+  flex-shrink: 0;
+  white-space: nowrap;
+  align-items: center;
+  font-size: 12px;
+  color: $fl-purple-600;
+  
+  .trial-status-link {
+    font-weight: 500;
+    text-decoration: none;
+    color: inherit;
+    background-color: transparent;
+    padding: $pad-xs $pad-base;
+    border-radius: 3px;
+    border: 1px solid $fl-purple-100;
+    margin-left: $pad-base;
+    transition-property: background-color, border-color;
+    transition-duration: $duration;
+    transition-timing-function: $timing;
+
+    &:hover,
+    &:focus {
+      background-color: $fl-purple-25;
+      border-color: $fl-purple-200;
+    }
+  }
+
+  @include at-least($width-sm) {
+    display: flex;
+    margin-right: $pad-lg;
+  }
+
+  &.trial-ending-soon {
+    color: $fl-yellow-600;
+    background-color: $fl-yellow-50;
+  }
+
+  &.trial-ended {
+    color: $fl-red-600;
+    background-color: $fl-red-25;
+  }
+}

data/app/assets/stylesheets/spark/core/_animations.scss

@@ -0,0 +1,154 @@
+@keyframes fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes fade-out {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes slide-down {
+  0% {
+    transform: translateY(-100%) 
+  } 100% {
+    transform: translateY(0) 
+  }
+}
+
+@keyframes slide-bg-down {
+  0% {
+    background-position: left bottom;
+  }
+  100% {
+    background-position: left top;
+  }
+}
+
+@keyframes slide-bg-up {
+  0% {
+    background-position: left top;
+  }
+  100% {
+    background-position: left bottom;
+  }
+}
+
+@keyframes slide-up {
+
+  0% {
+    transform: translateY(0) 
+  } 100% {
+    transform: translateY(-100%) 
+  }
+}
+@keyframes modal-open {
+  0% {
+    opacity: 0;
+    transform: scale(.97) perspective(300px);
+  }
+  20% { opacity: 1; }
+  100% { 
+    opacity: 1;
+    transform: scale(1) perspective(300px);
+  }
+}
+@keyframes modal-close {
+  0% {
+    opacity: 1;
+    transform: scale(1) perspective(300px);
+  }
+  80% { 
+    opacity: 0;
+  }
+  100% { 
+    opacity: 0;
+    transform: scale(.97) perspective(300px);
+  }
+}
+
+@keyframes dialog-open {
+  0% {
+    opacity: 0;
+    transform: translateY(-50px) scale(.95) perspective(300px) rotateX(-3deg);
+  }
+  20% { opacity: 1; }
+  100% { 
+    opacity: 1;
+    transform: translateY(0) scale(1) perspective(300px) rotateX(0);
+  }
+}
+
+@keyframes dialog-close {
+  0% {
+    opacity: 1;
+    transform: translateY(0px) scale(1) perspective(300px) rotateX(0deg);
+  }
+  80% { 
+    opacity: 0;
+  }
+  100% { 
+    opacity: 0;
+    transform: translateY(-50px) scale(.95) perspective(300px) rotateX(-3deg);
+  }
+}
+// Transition to form step
+@keyframes fade-in-right {
+  0% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(200px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+}
+
+// Transition away from form step
+@keyframes fade-out-left {
+  0% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+
+  99% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(-200px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(-9999px, 0, 0);
+  }
+}
+
+// Transition away from form step
+@keyframes fade-out-right {
+  0% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+
+  99% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(200px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(9999px, 0, 0);
+  }
+}
+// Return to previous form step
+@keyframes fade-in-left {
+  0% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(-200px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+}

data/app/assets/stylesheets/spark/core/_base.scss

@@ -0,0 +1,11 @@
+*,
+*:after,
+*:before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.hidden {
+  display: none;
+}

data/app/assets/stylesheets/spark/core/_colors.scss

@@ -0,0 +1,94 @@
+// Fleetio Custom Colors
+// ----------------------------------------------
+// Shade darkens from 25 - 1000
+
+// Grays
+// ----------------------------------------------
+$fl-white:                     #FFFFFF;
+$fl-gray-25:                   #F6F7F7;
+$fl-gray-50:                   #EDF1F2;
+$fl-gray-100:                  #D3D9DB;
+$fl-gray-200:                  #B7BEC1;
+$fl-gray-300:                  #A2ABAE;
+$fl-gray-400:                  #8D989C;
+$fl-gray-500:                  #78858A;
+$fl-gray-600:                  #636F73;
+$fl-gray-700:                  #4E595C;
+$fl-gray-800:                  #3A4245;
+$fl-gray-900:                  #262C2D;
+$fl-gray-1000:                 #121515;
+
+// Greens
+// ----------------------------------------------
+$fl-green-25:                  #ECFBF3;
+$fl-green-50:                  #C8F4DD;
+$fl-green-100:                 #A5ECC6;
+$fl-green-200:                 #81E5B0;
+$fl-green-300:                 #5EDD99;
+$fl-green-400:                 #3BD583;
+$fl-green-500:                 #18cc6c;
+$fl-green-600:                 #0FB860;
+$fl-green-700:                 #07A254;
+$fl-green-800:                 #028A48;
+$fl-green-900:                 #00703B;
+$fl-green-1000:                #00542C;
+
+// Blues
+// ----------------------------------------------
+$fl-blue-25:                   #EBF6FE;
+$fl-blue-50:                   #C4E6FA;
+$fl-blue-100:                  #9CD5F7;
+$fl-blue-200:                  #75C4F3;
+$fl-blue-300:                  #4EB3EF;
+$fl-blue-400:                  #27A2EB;
+$fl-blue-500:                  #0091E6;
+$fl-blue-600:                  #007FD0;
+$fl-blue-700:                  #006CB8;
+$fl-blue-800:                  #00599C;
+$fl-blue-900:                  #00467A;
+$fl-blue-1000:                 #00325C;
+
+// Yellows
+// ----------------------------------------------
+$fl-yellow-25:                 #FFFAEE;
+$fl-yellow-50:                 #FFF1CF;
+$fl-yellow-100:                #FFE8AF;
+$fl-yellow-200:                #FFDF90;
+$fl-yellow-300:                #FFD571;
+$fl-yellow-400:                #FFCC52;
+$fl-yellow-500:                #FFC234;
+$fl-yellow-600:                #F2AA2A;
+$fl-yellow-700:                #E69120;
+$fl-yellow-800:                #D97818;
+$fl-yellow-900:                #CC5E10;
+$fl-yellow-1000:               #BF4509;
+
+// Reds
+// ----------------------------------------------
+$fl-red-25:                    #FFF0EF;
+$fl-red-50:                    #FDD2CF;
+$fl-red-100:                   #FCB5B0;
+$fl-red-200:                   #FF9992;
+$fl-red-300:                   #F97C73;
+$fl-red-400:                   #F65F54;
+$fl-red-500:                   #F44336;
+$fl-red-600:                   #EA352B;
+$fl-red-700:                   #DB2821;
+$fl-red-800:                   #CA1C19;
+$fl-red-900:                   #B81111;
+$fl-red-1000:                  #A60A0D;
+
+// Purples
+// ----------------------------------------------
+$fl-purple-25:                 #F5F4FD;
+$fl-purple-50:                 #E1DFF9;
+$fl-purple-100:                #CECBF5;
+$fl-purple-200:                #BBB6F1;
+$fl-purple-300:                #A8A2EC;
+$fl-purple-400:                #958DE8;
+$fl-purple-500:                #8279E3;
+$fl-purple-600:                #6C66C9;
+$fl-purple-700:                #5853AE;
+$fl-purple-800:                #454292;
+$fl-purple-900:                #333275;
+$fl-purple-1000:               #232357;

data/app/assets/stylesheets/spark/core/_index.scss

@@ -0,0 +1,7 @@
+@import 'colors';
+@import 'vars';
+@import 'mixins';
+@import 'base';
+@import 'layout';
+@import 'animations';
+@import 'text';

data/app/assets/stylesheets/spark/core/_layout.scss

@@ -0,0 +1,39 @@
+.app-layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+
+  main {
+    min-height: 100vh;
+  }
+}
+
+.app-layout {
+  @include at-least( $width-md ) {
+    margin-left: $primary-sidebar-width;
+
+    .app-nav-header {
+      left: $primary-sidebar-width;
+    }
+    .sidebar-nav { z-index: 1050; }
+
+    .hide-sidebar {
+      .app-layout { margin-left: 0; }
+      .app-nav-header { left: 0; }
+      .sidebar-nav { z-index: -1; }
+    }
+  }
+}
+
+.app-container {
+  flex-grow: 1;
+  position: relative;
+  padding-top: $app-nav-header-height;
+  background-color: $fl-gray-25;
+}
+
+body {
+  display: flex;
+  min-height: 100%;
+}

data/app/assets/stylesheets/spark/core/_mixins.scss

@@ -0,0 +1,86 @@
+// Until width media query mixin
+@mixin until($width) {
+  $width: $width - 1;
+  @media all and (max-width: $width) {
+    @content;
+  }
+}
+
+// At least width media query mixin
+@mixin at-least($width) {
+  @media all and (min-width: $width) {
+    @content;
+  }
+}
+
+// Between widths media query mixin
+@mixin between($small-width, $large-width) {
+  $large-width: $large-width - 1;
+  @media (max-width: $large-width) and (min-width: $small-width) {
+    @content;
+  }
+}
+
+// HDPI media query mixin
+@mixin hdpi() {
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 1.25),
+  only screen and ( min--moz-device-pixel-ratio: 1.25),
+  only screen and ( -o-min-device-pixel-ratio: 1.25/1),
+  only screen and ( min-device-pixel-ratio: 1.25),
+  only screen and ( min-resolution: 200dpi),
+  only screen and ( min-resolution: 1.25dppx) {
+    @content;
+  }
+}
+
+@mixin circular-button($size: 28px) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  text-align: center;
+}
+
+// Font Smoothing (Useful for light text on dark background)
+@mixin font-smoothing($value: on) {
+  @if $value == on {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  @else {
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+  }
+}
+
+// Mixin for elevation depth box-shadows
+@mixin elevation($z-value, $color: $elevation-base-color, $opacity-boost: 0) {
+  // $z-value must be unitless
+  @if type-of($z-value) != number or not unitless($z-value) {
+    @error "$z-value must be a unitless number, but received '#{$z-value}'";
+  }
+
+  // $z-value must be between 0 and 6
+  @if $z-value < 0 or $z-value > 6 {
+    @error "$z-value must be between 0 and 6, but received '#{$z-value}'";
+  }
+
+  // Get $z-values from umbra/penumbra/ambient maps
+  $umbra-z-value: map-get($elevation-umbra-map, $z-value);
+  $penumbra-z-value: map-get($elevation-penumbra-map, $z-value);
+  $ambient-z-value: map-get($elevation-ambient-map, $z-value);
+
+  // Get $color and $opacity-boost (if given)
+  $umbra-color: rgba($color, $elevation-umbra-opacity + $opacity-boost);
+  $penumbra-color: rgba($color, $elevation-penumbra-opacity + $opacity-boost);
+  $ambient-color: rgba($color, $elevation-ambient-opacity + $opacity-boost);
+
+  // Set box-shadow with values
+  box-shadow:
+    #{$umbra-z-value $umbra-color},
+    #{$penumbra-z-value $penumbra-color},
+    #{$ambient-z-value $ambient-color};
+}

data/app/assets/stylesheets/spark/core/_text.scss

@@ -0,0 +1,5 @@
+body {
+  font-family: $base-font;
+  font-size: $base-size;
+  line-height: $base-line-height;
+}