fleetio_spark 0.2.31 → 0.2.32

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

@@ -18,9 +18,9 @@
     position: absolute;
     left: -$app-sidebar-width;
     max-height: 100vh;
-    
+
     // Revealed sidebar styles
-    .show-sidebar & {
+    .nav-active & {
       height: auto;
       position: static;
     }

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

@@ -1,8 +1,8 @@
 .app-sidebar-toggle {
   display: none;
   position: relative;
-  left: -11px;
-  margin-right: 4px;
+  margin-right: $pad-lg;
+  margin-left: -6px;
   z-index: 11;
 
   .with-sidebar & { display: block; }
@@ -31,7 +31,7 @@
       }
     }
 
-    .icon-wrapper {
+    .nav-toggle-icon-wrapper {
       &:focus, &:hover {
         background: none;
       }

data/app/assets/stylesheets/spark/components/form/_switch.scss

@@ -0,0 +1,119 @@
+@mixin spark-switch-size($width: 46px, $height: 24px) {
+  $tick-width: ($width - 6)/2;
+  .spark-switch-panel {
+    width: $width;
+    height: $height;
+    border-radius: $height;
+  }
+
+  .spark-switch-tick {
+    width: $tick-width;
+    height: $height - 4;
+    border-radius: $height;
+  }
+
+  .spark-switch-input { 
+    @include input-active {
+      ~ .spark-switch-panel {
+        box-shadow: 0 0 0 3px rgba(101, 133, 255, 0.5);
+        // transform: scale(1.1) translate3d( $tick-width , 0, 0 );
+      }
+    }
+    &[disabled] {
+      ~ .spark-switch-panel {
+        box-shadow: none;
+      }
+    }
+  }
+
+  input:checked + .spark-switch-panel .spark-switch-tick {
+    transform: translate3d( $tick-width + 2 , 0, 0 );
+  }
+}
+
+.spark-switch {
+  @include spark-switch-size();
+
+  .label-text {
+    margin-right: $pad-base;
+    padding-bottom: 0;
+    line-height: 1.5em;
+  }
+  
+  &-label {
+    display: flex;
+    position: relative;
+    align-items: center;
+    flex: 1 0 auto;
+    transition: box-shadow, background-color;
+    cursor: pointer;
+    // justify-content: space-between;
+
+    *, *:before, *:after {
+      transition-duration: $duration;
+      transition-timing-function: $timing;
+    }
+  }
+
+  &-panel { 
+    background: $fl-gray-300;
+    position: relative;
+    transition-property: background, box-shadow, border-color;
+    box-shadow: input-shadow( rgba( $fl-gray-300, .1 ) );
+  }
+
+  &-tick {
+    background: $fl-white;
+    position: absolute;
+    bottom: 2px;
+    left: 2px;
+    transition-property: transform;
+    transform: translate3d( 0, 0, 0 );
+    box-shadow: 0 1px 4px rgba($fl-gray-300, .4);
+    font-weight: 500;
+  }
+
+  &-input {
+    position: absolute;
+    border: none;
+    cursor: pointer;
+    opacity: 0;
+    z-index: -1;
+
+    &[disabled] {
+      ~ .spark-switch-panel {
+        background: rgba($fl-gray-300, 0.5);
+      }
+    }
+  }
+
+  &-input:checked {
+    ~ .spark-switch-panel {
+      background: $fl-green-600;
+    }
+
+    &[disabled] {
+      ~ .spark-switch-panel {
+        background: rgba($fl-green-600, 0.5);
+      }
+    }
+  }
+  
+  &.small {
+    @include spark-switch-size(30px, 16px);
+  }
+  
+  &.expanded {
+    .label-text { margin-right: auto; }
+  }
+
+  &-align-right {
+    .spark-switch-label {
+      flex-direction: row-reverse;
+    }
+    .label-text {
+      margin-right: 0;
+      margin-left: $pad-base;
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+.spark-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; }
+  }
+}

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

@@ -7,10 +7,15 @@
   font-size: 14px;
   font-weight: 500;
   transition: color $duration-short $timing;
-  color: inherit;
+  color: $fl-blue-700;
+
+  &.active {
+    color: $fl-blue-900;
+  }
 
   &-icon {
     flex-shrink: 0;
+    margin-right: $pad-base;
   }
 
   .expand-icon {
@@ -25,7 +30,6 @@
     min-width: 0;
     white-space: nowrap;
     text-overflow: ellipsis;
-    overflow: hidden;
   }
 
   &-label {

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

@@ -1,5 +1,4 @@
 .spark-nav-pills {
-  padding: 0 $pad-lg;
   font-size: $base-size - 1;
   font-weight: 500;
 
@@ -50,4 +49,9 @@
       }
     }
   }
+
+  &.layout-padded {
+    padding-left: $pad-lg;
+    padding-right: $pad-lg;
+  }
 }

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

@@ -0,0 +1,100 @@
+.spark-nav-sidebar {
+  min-width: 230px;
+
+  .nav-toggle {
+    width: calc(100% + #{2 * $pad-lg});
+    background: $fl-white;
+    margin: 0 #{-$pad-lg};
+    padding: $pad-xs $pad-lg;
+
+    &-icon {
+      margin-right: -$pad-base;
+    }
+
+    @include at-least($width-base) {
+      display: none;
+    }
+  }
+
+  &-wrapper {
+    @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;
+      }
+    }
+  }
+
+  &.nav-active &-wrapper {
+    @include until($width-base) {
+      max-height: 900px;
+    }
+  }
+
+  &-header {
+    margin-bottom: $pad-lg;
+  }
+
+  &-title {
+    font-size: 16px;
+    line-height: 2em;
+    border-bottom: 1px solid $fl-gray-100;
+    margin-bottom: $pad-base;
+  }
+  
+  .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;
+      }
+    }
+  }
+
+  &-title + .nav-group, .nav-group:last-child {
+    border-bottom: none;
+  }
+}

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

@@ -7,27 +7,38 @@
 }
 
 .spark-nav-tabs {
-  max-width: 100%;
+  width: 100%;
   overflow-x: auto;
   position: relative;
 
   .nav-tabs-wrapper {
-    padding: 0 4px;
     border-bottom: 1px solid $fl-gray-100;
     max-height: 80px;
-    transition: max-height $duration cubic-bezier(0.47, 0, 0.745, 0.715);
+    transition: max-height $duration $timing;
     position: relative;
 
-    .app-content-header & {
+    .spark-page-header & {
       border-bottom-color: $fl-gray-50;
     }
   }
 
+  .nav-tab-wrapper {
+    padding: 0 $pad-md;
+
+    &:first-child { padding-left: 0; }
+    &:last-child  { padding-right: 0; }
+  }
+
   .nav-toggle {
+    width: 100%;
+    background: $fl-white;
+    padding: $pad-xs $pad-lg;
     display: none;
-    padding: { top: $pad-xs; right: $pad-sm; }
-    position: absolute;
-    top: 0; right: 0;
+    margin: -1px 0 0;
+
+    &-icon {
+      margin-right: -$pad-base;
+    }
   }
 
   .nav-group {
@@ -43,11 +54,7 @@
     color: $fl-gray-500;
     border-bottom: 2px solid transparent;
     padding: ($pad-base + 1) 0;
-    margin: {
-      left: $pad-md;
-      right: $pad-md;
-      bottom: -1px;
-    }
+    margin-bottom: -1px;
 
     &:hover, &:focus {
       border-color: $fl-gray-100;
@@ -76,9 +83,7 @@
 
     // Show nav-toggle control
     .nav-toggle {
-      display: block;
-      animation: fade-in $duration $timing;
-      cursor: pointer;
+      display: flex;
     }
 
     .nav-group {
@@ -86,42 +91,27 @@
     }
 
     .nav-item {
-      &.active {
-        border-color: transparent;
-      }
-    }
-
-    .nav-item:not(.active) {
+      padding: 0 $pad-lg;
       transition: padding $duration cubic-bezier(0.47, 0, 0.745, 0.715);
-      padding: 0;
+      border-bottom: 1px solid $fl-gray-100;
     }
 
     // Hide all nav elements but the active one.
     .nav-tab-wrapper {
-      margin-right: 28px;
-
-      &:not(.active) {
-        opacity: 0;
-        max-height: 0px;
-        overflow-y: hidden;
-        transition: $duration * 1.5 cubic-bezier(0.39, 0.575, 0.565, 1);
-        transition-property: opacity, max-height;
-
-        .nav-item {
-          border-bottom: 1px solid $fl-gray-100;
-        }
-      }
-    
-
-      // Don't permit click on active tab
-      // It is probably unintentional, expecting to open the menu
-      &.active {
-        pointer-events: none;
-      }
+      padding: 0;
+      opacity: 0;
+      max-height: 0px;
+      overflow-y: hidden;
+      transition: $duration * 1.5 cubic-bezier(0.39, 0.575, 0.565, 1);
+      transition-property: opacity, max-height;
     }
 
     // Triggered by clicking nav-toggle
-    &.nav-expanded {
+    &.nav-active {
+
+      .nav-toggle {
+        border-bottom: 1px solid $fl-gray-100;
+      }
 
       // Expand panel containing tabs
       .nav-tabs-wrapper {
@@ -137,7 +127,7 @@
       }
 
       .nav-item {
-        padding: ($pad-base + 1) 0;
+        padding: ($pad-base + 1) $pad-lg;
         &:hover, &:focus {
           background-color: $fl-gray-50;
         }
@@ -148,25 +138,20 @@
       }
     }
   }
-  .main-body & {
-    .nav-tabs-wrapper {
-      padding: 0;
-    }
-    .nav-tab-wrapper:first-child .nav-item {
-      margin-left: 0;
+
+  .spark-page-header-nav & {
+    .nav-toggle {
+      right: $pad-base;
     }
-    .nav-tab-wrapper:last-child .nav-item {
-      margin-right: 0;
+  }
+
+  &.layout-padded:not(.collapse-tabs) {
+    .nav-tab-wrapper:first-child {
+      padding-left: $pad-lg;
     }
-    &.collapse-tabs {
-      .nav-item {
-        margin-right: 0;
-        margin-left: 0;
-        margin-bottom: 0;
-      }
-      .nav-tab-wrapper {
-        margin-right: 44px;
-      }
+    .nav-tab-wrapper:last-child {
+      padding-right: $pad-lg;
     }
   }
 }
+