fleetio_spark 0.1.30 → 0.2.0

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

@@ -0,0 +1,54 @@
+.app-sidebar {
+  @include font-smoothing;
+  width: $app-sidebar-width;
+  flex-direction: column;
+  overflow-y: scroll;
+  flex-shrink: 0;
+  background-color: $app-sidebar-bg;
+  font-size: $base-size;
+  line-height: $base-line-height;
+
+  .nav-item {
+    color: rgba($fl-white, 0.8);
+    &:hover,
+    &:focus {
+      color: $fl-white;
+      outline: none;
+      background-color: $app-sidebar-item-hover;
+    }
+
+    &.active {
+      color: $fl-white;
+      background-color: $app-sidebar-item-active;
+    }
+  }
+
+  .nav-group {
+    .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;
+
+      &,
+      .nav-group {
+        background-color: $app-sidebar-item-active;
+      }
+    }
+  }
+}
+

data/app/assets/stylesheets/spark/components/app/sidebar/_header.scss

@@ -0,0 +1,101 @@
+// Account & User Menu
+.app-sidebar-header {
+  position: absolute;
+  width: $app-sidebar-width;
+  z-index: 100;
+
+  + * {
+    margin-top: $app-header-height;
+  }
+
+  > a {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    color: $fl-white;
+    height: $app-header-height;
+    padding: 0 20px;
+    text-decoration: none;
+    transition: background-color $duration $timing;
+    background-color: $app-sidebar-item-hover;
+    line-height: 1.4;
+    border-bottom: 1px solid rgba(#000, .2);
+
+    &:hover,
+    &:focus {
+      color: $fl-white;
+      background-color: lighten($app-sidebar-item-hover, 1%);
+
+      .dropdown-icon {
+        color: inherit
+      }
+    }
+  }
+
+  .dropdown-icon {
+    margin-left: 4px;
+    color: rgba($fl-white, 0.4);
+    transition: color $duration $timing;
+    position: relative;
+    top: .5em;
+  }
+
+  .details {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: auto;
+    line-height: 1.5;
+    padding-right: $pad-base;
+
+    &, * {
+      white-space: nowrap;
+      overflow: hidden;
+      min-width: 0;
+      text-overflow: ellipsis;
+    }
+
+    .account-name {
+      font-weight: 700;
+      max-width: calc(100% - 1em);
+    }
+
+    .user-name {
+      font-size: 12px;
+      opacity: .75;
+      font-weight: 500;
+      flex-basis: 100%;
+    }
+  }
+
+  .user-avatar img {
+    max-width: none;
+    vertical-align: middle;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+  }
+
+  // Styling for bootstrap dropdown until we replace with spark component
+  .dropdown-menu {
+    margin-top: -$pad-base;
+    margin-left: $pad-lg;
+
+    .user-name {
+      padding: 0 $pad-lg;
+      margin: $pad-md 0;
+    }
+
+    .user-avatar {
+      width: 40px;
+      height: 40px;
+    }
+
+    .nav-group {
+      margin: $pad-base 0;
+
+      .nav-header {
+        padding: $pad-sm $pad-base;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/spark/components/app/sidebar/_toggle.scss

@@ -0,0 +1,109 @@
+.app-sidebar-toggle {
+  display: none;
+  flex-shrink: 0;
+  cursor: default;
+  position: relative;
+  left: -11px;
+  margin-right: 4px;
+  z-index: 11;
+
+  .with-sidebar & { display: block; }
+
+  .icon-wrapper {
+    cursor: pointer;
+    position: relative;
+    z-index: 101;
+    @include circular-button(32px);
+    transition: all $duration $timing;
+    &:hover {
+      background-color: $fl-gray-50;
+    }
+  }
+
+  // Shade that covers the body
+  &:after {
+    content: "";
+    transition: opacity $duration * 2 $timing;
+    box-shadow: 5px -30px 20px rgba(#000, .4) inset;
+    background: rgba(#000, .2);
+    width: 100vw;
+    height: 120vh;
+    right: 0;
+    left: $app-sidebar-width;
+    top: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  .show-sidebar & {
+    &:after { 
+      position: fixed; 
+      opacity: 1;
+      z-index: 100;
+      @include at-least( $width-md ) {
+        position: static;
+      }
+    }
+
+    .icon-wrapper {
+      &:focus, &:hover {
+        background: none;
+      }
+    }
+  }
+
+  @include at-least( $width-md ) {
+    overflow: hidden;
+    width: 0;
+    margin: 0;
+    &:after {
+      position: static;
+      z-index: -1;
+    }
+  }
+}
+
+.close-sidebar-icon {
+  width: 18px;
+  color: $fl-gray-500;
+
+  &:hover {
+    color: $fl-gray-700;
+  }
+
+  &, &:before, &:after {
+    position: relative;
+    display: block;
+    height: 2px;
+    background: currentColor;
+    transform: translate3d(0,0,0);
+    transform-origin: center middle;
+    transition: $duration * 1.5 $timing;
+    transition-property: transform, background-color;
+  }
+
+  &:before, &:after {
+    width: 100%;
+    content: "";
+  }
+
+  &:before { top: -5px; }
+  &:after { top: 3px; }
+
+  .show-sidebar & {
+    &, &:before, &:after {
+      transition-delay: $duration / 2;
+    }
+    color: $fl-gray-1000;
+    background: transparent;
+
+    &:before {
+      transform: rotate(-45deg) translate3d(0,0,0);
+      top: 0px;
+    }
+    &:after {
+      transform: rotate(45deg) translate3d(0,0,0);
+      top: -2px;
+    }
+  }
+}  

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

@@ -0,0 +1,57 @@
+.nav-item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: ($pad-base + 1) 20px;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: color $duration-short $timing;
+  color: inherit;
+
+  &-icon {
+    flex-shrink: 0;
+
+    &:first-child {
+      margin-right: $pad-lg;
+    }
+  }
+
+  .expand-icon {
+    display: flex;
+    flex-shrink: 0;
+    transition: $duration $timing;
+    transition-property: opacity;
+  }
+
+  &-content {
+    width: 100%;
+    min-width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &-label {
+    font-size: 9px;
+    padding: .15em .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);
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+[role=tree] {
+  list-style: none;
+  -webkit-overflow-scrolling: touch;
+}

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

@@ -0,0 +1,42 @@
+[role=tree] {
+  [role=group] { 
+    overflow: hidden; 
+  }
+
+  [role=treeitem][aria-expanded=false] > [role=group] {
+    max-height: 0;
+    padding: 0;
+    opacity: 0;
+  }
+
+  [role=treeitem][aria-expanded=true] .expand-icon {
+    transform: rotate(180deg);
+  }
+}
+
+[aria-expanded=true] > [role=group] {
+  max-height: 800px;
+  opacity: 1;
+  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
+}
+
+[role=treeitem] {
+  [role=group] {
+    padding: { top: $pad-xs; bottom: $pad-base }
+    list-style: none;
+
+    .nav-item {
+      padding: $pad-sm;
+      padding-left: 54px;
+      font-size: 13px;
+    }
+  }
+
+  // Triggered class indicates it was manually clicked, rather than restored via cookies
+  &.triggered [role=group] {
+    transition-property: max-height, opacity, padding;
+    transition-duration: $duration;
+    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+  }
+}
+

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

@@ -0,0 +1,9 @@
+.ui-sticky-panel-spacer { display: none }
+
+@include at-least($width-md) {
+  .ui-sticky-panel {
+    position: fixed;
+    &.is-sticky { z-index: $z-ui-sticky-panel; }
+    + .ui-sticky-panel-spacer { display: block }
+  }
+}

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

@@ -0,0 +1,14 @@
+.ui-toolbar {
+  padding: $pad-md 0;
+  margin: 0 0 $pad-lg;
+  display: flex;
+  justify-content: space-between;
+
+  &.is-sticky {
+    padding: $pad-md $pad-lg;
+    background-color: $fl-white;
+    border-bottom: 1px solid $fl-gray-100;
+    box-shadow: 0 2px 6px 0 rgba($fl-gray-900, .08);
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,5 @@
+@import "modal";
+@import "nav-menu";
+@import "tooltip";
+@import "dropdown";
+@import "header/index";

data/app/assets/stylesheets/spark/{components → components_old}/header/_index.scss

@@ -1,4 +1,3 @@
-@import "app-nav-header";
 @import "trial-status";
 @import "search";
 @import "search-results";

data/app/assets/stylesheets/spark/{components → components_old}/header/_search.scss

@@ -23,6 +23,7 @@
     left: 16px;
     width: calc( 100% - 32px );
     margin-right: 0;
+    z-index: 100;
 
     &[data-active-stack] .text-input-label {
       border: {

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

@@ -2,6 +2,5 @@
 @import 'vars';
 @import 'mixins';
 @import 'base';
-@import 'layout';
 @import 'animations';
 @import 'text';