fleetio_spark 0.2.48 → 1.0.0.rc.1

data/app/assets/stylesheets/spark/components/layout/_page.scss

@@ -0,0 +1,54 @@
+.spark-page {
+
+  &-wrapper {
+    padding: 0 $pad-base;
+    position: relative;
+
+    &.nav-active {
+      flex-flow: nowrap;
+    }
+  }
+
+  &-header {
+    width: 100%;
+    margin-bottom: $pad-lg;
+    background: $fl-white;
+    border-bottom: 1px solid $fl-gray-100;
+
+    &-block.layout-padded {
+      padding: $pad-base $pad-lg { bottom: $pad-lg };
+    }
+  }
+
+  &-sidebar {
+    padding: 0 $pad-base;
+  }
+
+  &-main {
+    padding: $pad-lg $pad-base;
+    z-index: 1;
+    width: 100%;
+
+    &-header {
+      border-bottom: 1px solid $fl-gray-100;
+      margin-bottom: $pad-lg;
+
+      &-block {
+        padding-bottom: $pad-lg;
+      }
+    }
+  }
+
+  @include at-least($width-base) {
+    &-wrapper {
+      display: flex;
+    }
+    &-sidebar {
+      padding: $pad-lg $pad-base;
+    }
+
+    &-sidebar + &-main {
+      padding-left: $pad-lg;
+    }
+  }
+}

data/app/assets/stylesheets/spark/components/{app → messaging}/_banner.scss

@@ -22,19 +22,19 @@
     text-decoration: underline;
   }
 
-  &.message {
+  &.theme-message {
     background: linear-gradient(90deg, $fl-purple-500 0%, $fl-blue-400 100%);
     color: #fff;
   }
 
-  &.alert {
+  &.theme-alert {
     background: $fl-red-25;
     border-top-color: $fl-red-400;
     border-bottom-color: $fl-red-50;
     color: $fl-red-700;
   }
 
-  &.admin {
+  &.theme-admin {
     background-color: $fl-yellow-100;
     border-top-color: $fl-yellow-900;
     border-bottom-color: $fl-yellow-300;

data/app/assets/stylesheets/spark/components/messaging/_trial-notice.scss

@@ -0,0 +1,20 @@
+.spark-trial-notice {
+  display: flex;
+  flex-shrink: 0;
+  white-space: nowrap;
+  align-items: center;
+  font-size: 12px;
+  color: $fl-purple-600;
+
+  &-text {
+    margin-right: 8px;
+  }
+ 
+  &.trial-ending-soon {
+    color: $fl-yellow-600;
+  }
+
+  &.trial-ended {
+    color: $fl-red-600;
+  }
+}

data/app/assets/stylesheets/spark/components/nav/_item.scss

@@ -7,7 +7,7 @@
   font-size: 14px;
   font-weight: 500;
   transition: color $duration-short $timing;
-  color: $fl-blue-700;
+  //color: $fl-blue-700;
 
   &.active {
     color: $fl-blue-900;
@@ -34,36 +34,12 @@
     align-items: center;
   }
 
-  &-label {
-    font-size: 9px;
-    padding: .14em .6em;
-    border-radius: 30px;
-    margin-left: 6px;
-    margin-right: auto;
-    color: inherit;
-    text-transform: uppercase;
-    font-weight: 600;
-    border: 1px solid;
-
-    &.new {
-      color: $fl-yellow-600;
-      border-color: rgba($fl-yellow-700, .75);
-    }
-
-    &.beta {
-      color: $fl-teal-400;
-      border-color: rgba($fl-teal-500, .75);
-    }
+  .spark-badge {
+    margin-left: $pad-base;
   }
 
-  &-badge {
-    display: inline-flex;
-    padding: 0 $pad-base - 1;
-    font-size: .9em;
-    line-height: 1.3em;
-    border-radius: 15px;
-    background: $fl-gray-500;
-    color: #fff;
-    margin-left: $pad-base;
+  &-status {
+    margin-right: auto;
+    margin-left: 6px;
   }
 }

data/app/assets/stylesheets/spark/components/nav/_sidebar.scss

@@ -20,81 +20,44 @@
     @include until($width-base) {
       margin: 0 #{-$pad-lg};
       padding: 0 $pad-lg;
-      background: $fl-white;
-      border-bottom: 1px solid $fl-gray-100;
       max-height: 0;
       transition: max-height ($duration * 1.5) $timing;
       overflow: hidden;
 
-      > *:first-child {
-        margin-top: $pad-lg;
-      }
+      //> *:first-child {
+        //margin-top: $pad-lg;
+      //}
     }
   }
 
   &.nav-active &-wrapper {
     @include until($width-base) {
-      max-height: 900px;
+      max-height: 100vh;
     }
   }
 
-  &-header {
-    margin-bottom: $pad-lg;
+  &-header + * {
+    margin-top: $pad-lg;
   }
 
   &-title {
     font-size: 16px;
     line-height: 2em;
-    border-bottom: 1px solid $fl-gray-100;
     margin-bottom: $pad-base;
   }
-  
+
   .spark-nav-group {
-    padding-bottom: $pad-md;
     list-style: none;
     &:not(:last-child) {
       margin-bottom: $pad-md;
-      border-bottom: 1px solid $fl-gray-50;
     }
   }
 
-  .nav-item {
-    padding: 5px $pad-base;
-    border-radius: $radius-base;
-
-    &:hover, &:focus, &.active {
-      background: $fl-white;
-
-      .nav-item-icon {
-        color: $fl-gray-900;
-      }
-    }
-
-    &-icon {
-      color: $fl-gray-300;
-    }
-
-    &-content {
-      color: $fl-blue-600;
-      font-size: 13px;
-    }
-
-    &-detail {
-      color: $fl-gray-600;
-      font-size: .8em;
-    }
-
-    &.active {
-      .nav-item-content {
-        color: $fl-gray-900;
-      }
-      .nav-item-detail {
-        color: $fl-gray-700;
-      }
-    }
+  .spark-nav-sidebar-wrapper > .spark-nav-group {
+    padding-bottom: $pad-md;
   }
 
-  &-title + .spark-nav-group, .spark-nav-group:last-child {
-    border-bottom: none;
+  .nav-item {
+    padding: 5px $pad-base;
   }
 }

data/app/assets/stylesheets/spark/components/nav/_tabs.scss

@@ -22,7 +22,7 @@
     }
   }
 
-  .nav-tab-wrapper {
+  .nav-item-wrapper {
     padding: 0 $pad-md;
 
     &:first-child { padding-left: 0; }
@@ -97,7 +97,7 @@
     }
 
     // Hide all nav elements but the active one.
-    .nav-tab-wrapper {
+    .nav-item-wrapper {
       padding: 0;
       opacity: 0;
       max-height: 0px;
@@ -120,7 +120,7 @@
       }
 
       // Show all tabs and expand their height
-      .nav-tab-wrapper {
+      .nav-item-wrapper {
         opacity: 1;
         max-height: 80px;
         overflow: visible;
@@ -146,10 +146,10 @@
   }
 
   &.layout-padded:not(.collapse-tabs) {
-    .nav-tab-wrapper:first-child {
+    .nav-item-wrapper:first-child {
       padding-left: $pad-lg;
     }
-    .nav-tab-wrapper:last-child {
+    .nav-item-wrapper:last-child {
       padding-right: $pad-lg;
     }
   }

data/app/assets/stylesheets/spark/components/nav/sidebar/_theme-default.scss

@@ -0,0 +1,59 @@
+.spark-nav-sidebar.theme-default {
+  //.spark-nav-sidebar-wrapper {
+    //border-bottom: 1px solid $fl-gray-100;
+  //}
+
+  .spark-nav-sidebar-title {
+    border-bottom: 1px solid $fl-gray-100;
+  }
+
+  .spark-nav-group {
+    &:not(:last-child) {
+      border-bottom: 1px solid $fl-gray-50;
+    }
+  }
+
+  .nav-item {
+    border-radius: $radius-base;
+
+    &:hover, &:focus, &.active {
+      background: $fl-white;
+
+      .nav-item-icon {
+        color: $fl-gray-900;
+      }
+    }
+
+    &-icon {
+      color: $fl-gray-300;
+    }
+
+    &-content {
+      color: $fl-blue-600;
+      font-size: 13px;
+    }
+
+    &-detail {
+      color: $fl-gray-600;
+      font-size: .8em;
+    }
+
+    &.active {
+      .nav-item-content {
+        color: $fl-gray-900;
+      }
+      .nav-item-detail {
+        color: $fl-gray-700;
+      }
+    }
+  }
+
+  [role=treeitem] [role=group] .nav-item {
+    padding-left: 32px;
+    margin-left: -32px;
+  }
+
+  .spark-nav-sidebar-title + .spark-nav-group, .spark-nav-group:last-child {
+    border-bottom: none;
+  }
+}

data/app/assets/stylesheets/spark/components/nav/sidebar/_theme-primary.scss

@@ -0,0 +1,69 @@
+.spark-nav-sidebar.theme-primary {
+  background-color: $app-sidebar-bg;
+  font-size: $base-size;
+  line-height: $base-line-height;
+  color: rgba($fl-white, 0.8);
+
+  .spark-nav-sidebar-header {
+    padding: 10px 20px;
+    border-bottom: 1px solid rgba(0,0,0,0.2);
+  }
+
+  .nav-item {
+    padding: ($pad-base + 1) 20px;
+    color: rgba($fl-white, 0.8);
+
+    &:hover,
+    &:focus {
+      color: $fl-white;
+      background-color: $app-sidebar-item-hover;
+    }
+
+    &.active {
+      color: $fl-white;
+      &:not(:hover) {
+        background-color: $app-sidebar-item-active;
+      }
+    }
+    &-icon {
+      &:first-child {
+        margin-right: $pad-lg;
+      }
+    }
+  }
+
+  .spark-nav-group .tree-node {
+    .nav-item.active {
+      &:before {
+        content: "";
+        position: absolute;
+        display: block;
+        z-index: 1;
+        left: 26px;
+        top: 10px;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background-color: $fl-blue-500;
+      }
+    }
+  }
+
+  .nav-item-wrapper {
+    &.active {
+      color: $fl-white;
+
+      &,
+      .spark-nav-group {
+        background-color: $app-sidebar-item-active;
+      }
+    }
+  }
+
+  [role=treeitem] [role=group] .nav-item {
+    font-size: 13px;
+    padding: 4px;
+    padding-left: 54px;
+    margin-left: -32px;
+  }
+}

data/app/assets/stylesheets/spark/components/nav/tree/_group.scss

@@ -24,12 +24,7 @@
   [role=group] {
     padding: { top: $pad-xs; bottom: $pad-base }
     list-style: none;
-
-    .nav-item {
-      padding: $pad-sm;
-      padding-left: 54px;
-      font-size: 13px;
-    }
+    margin-left: 32px;
   }
 
   // Triggered class indicates it was manually clicked, rather than restored via cookies

data/app/assets/stylesheets/spark/components/ui/_card.scss

@@ -14,3 +14,60 @@
     padding: $pad-md $pad-lg;
   }
 }
+
+.spark-card-header {
+  padding: $pad-md $pad-lg;
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+
+  &-title {
+    display: flex;
+    align-items: center;
+
+    > * {
+      margin: 0 $pad-sm;
+
+      &:first-child { margin-left: 0; }
+      &:last-child { margin-right: 0; }
+    }
+
+    .tooltip {
+      margin-left: 0;
+    }
+  }
+
+  &-badge {
+    display: inline-flex;
+    padding: 0 $pad-base - 1;
+    font-size: .9em;
+    line-height: 1.4em;
+    border-radius: 15px;
+    background: $fl-gray-500;
+    color: #fff;
+    margin-left: $pad-base;
+    text-align: center;
+  }
+
+  .tooltip {
+    color: $fl-gray-200;
+
+    &-text {
+      background: $fl-gray-900;
+      display: none;
+    }
+  }
+
+  &-actions {
+    display: flex;
+  }
+
+  &-action {
+    margin: 0 $pad-sm;
+
+    &:first-child { margin-left: 0; }
+    &:last-child { margin-right: 0; }
+  }
+}
+