fleetio_spark 0.2.48 → 1.0.0.rc.1

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

@@ -1,5 +1,4 @@
 // Design System Stylesheets index
-@import 'icons';
 @import 'core/index';
 @import 'form/index';
 @import 'components_old/index';

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

@@ -1,5 +1,4 @@
 @import "app/layout";
-@import "app/banner";
 @import "app/header";
 @import "app/sidebar";
 @import "app/modal";
@@ -10,10 +9,15 @@
 @import "button/button";
 @import "button/button_group";
 
-@import "form/switch";
+@import "icon/icon";
+@import "icon/badge";
+
+@import "input/switch";
 
 @import "layout/grid";
-@import "layout/header";
+@import "layout/block";
+@import "layout/media_block";
+@import "layout/page";
 
 @import "nav/item";
 @import "nav/tabs";
@@ -21,11 +25,13 @@
 @import "nav/tree";
 @import "nav/tree/group";
 @import "nav/sidebar";
+@import "nav/sidebar/theme-primary";
+@import "nav/sidebar/theme-default";
 @import "nav/breadcrumbs";
 @import "nav/toggle";
 
-@import "page/header";
-@import "page/main";
+@import "messaging/trial-notice";
+@import "messaging/banner";
 
 @import "ui/toast";
 @import "ui/toolbar";

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

@@ -1,4 +1,4 @@
-.app-header {
+#header {
   display: flex;
   align-items: center;
   border-bottom: 1px solid $fl-gray-100;
@@ -6,13 +6,13 @@
   line-height: $base-line-height;
   padding: 0 $pad-lg;
   height: $app-header-height;
-  //z-index: $z-app-header;
   position: absolute;
+  //z-index: $z-app-header;
 
   // When sidebar is present and visible
   // header should be the full width minus the sidebar width
   @include at-least($width-md) {
-    .with-sidebar & {
+    #sidebar + .app-main & {
       width: calc(100% - #{$app-sidebar-width});
     }
   }
@@ -28,6 +28,7 @@
   + * {
     margin-top: $app-header-height;
   }
+
   // When search modal is active increase the
   // z-index so sidebar toggle is behind
   // the search input
@@ -36,37 +37,24 @@
       z-index: $z-app-search;
     }
   }
-
-  .app-header-logo {
-    display: flex;
-    margin-right: $pad-lg;
-
-    @include at-least($width-sm) {
-      margin-right: $pad-xl;
-    }
-  }
 }
 
-.app-header-actions {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-
-  .modal-active + & {
-    position: absolute;
-    right: $pad-xl;
-    z-index: -1;
-  }
+//.modal-active + #header {
+  //position: absolute;
+  //right: $pad-xl;
+  //z-index: -1;
+//}
 
-  > .dropdown {
-    margin: 0 $pad-base;
+#header {
+  .spark-header-action {
     @include until(500px) {
       position: static;
     }
+  }
 
-    &:last-of-type {
-      margin-right: 0;
-    }
+  @include until($width-sm) {
+    // Hide on very small screens
+    .spark-trial-notice { display: none; }
   }
 
   .dropdown-menu {
@@ -166,4 +154,3 @@
     }
   }
 }
-

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

@@ -17,7 +17,7 @@ body {
 
 .app-wrapper,
 .app-main,
-.app-header,
+#header,
 .app-content {
   width: 100%;
 }
@@ -88,7 +88,7 @@ body.test {
 
 @include at-least($width-md) {
   // On pages with a sidebar set app-main width to control overflow
-  .with-sidebar .app-main {
+  #sidebar + .app-main {
     width: calc(100% - #{$app-sidebar-width});
   }
 }

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

@@ -1,10 +1,7 @@
-.app-sidebar {
+#sidebar {
   @include font-smoothing;
   flex-direction: column;
   flex-shrink: 0;
-  background-color: $app-sidebar-bg;
-  font-size: $base-size;
-  line-height: $base-line-height;
   width: $app-sidebar-width;
 
   // Expand width when wider viewport
@@ -23,56 +20,31 @@
     .nav-active & {
       height: auto;
       position: static;
-    }
-  }
 
-  .nav-item {
-    padding: ($pad-base + 1) 20px;
-    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;
-    }
-    &-icon {
-      &:first-child {
-        margin-right: $pad-lg;
+      .spark-nav-sidebar-wrapper {
+        transition: none;
+        max-height: auto;
       }
     }
   }
 
-  .spark-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;
-      }
-    }
+  .spark-nav-sidebar-footer ,
+  .spark-nav-sidebar-header {
+    position: absolute;
+    width: $app-sidebar-width;
+    z-index: $z-app-sidebar-header;
   }
 
-  .nav-item-wrapper {
-    &.active {
-      color: $fl-white;
-
-      &,
-      .spark-nav-group {
-        background-color: $app-sidebar-item-active;
-      }
+  .spark-nav-sidebar-header {
+    top: 0;
+    + * {
+      margin-top: $app-header-height;
     }
   }
+
+  .spark-nav-sidebar-footer {
+    bottom: 0;
+    overflow: hidden;
+    background: adjust-color(rgba($app-sidebar-bg, .85), $lightness: -4%);
+  }
 }

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

@@ -1,25 +1,17 @@
-// Account & User Menu
-.app-sidebar-header {
-  position: absolute;
-  width: $app-sidebar-width;
-  z-index: $z-app-sidebar-header;
-
-  + * {
-    margin-top: $app-header-height;
-  }
+// MediaBlock fleetio specific styles
+.spark-nav-sidebar .sidebar-header {
+  &-link {
+    display: block;
+    margin: -10px -20px;
+    padding: 10px 20px 0;
+    height: $app-header-height - 1;
+    min-width: 0;
+    line-height: 1.4;
 
-  > a {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    color: $fl-white;
-    height: $app-header-height;
-    padding: 0 20px;
+    color: inherit;
     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 {
@@ -32,7 +24,7 @@
     }
   }
 
-  .dropdown-icon {
+  &-icon {
     margin-left: 4px;
     color: rgba($fl-white, 0.4);
     transition: color $duration $timing;
@@ -40,45 +32,49 @@
     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 {
+    font-weight: 700;
+    color: $fl-white;
+    max-width: calc(100% - 1em);
+  }
 
-    .account-name {
-      font-weight: 700;
-      max-width: calc(100% - 1em);
-    }
+  &-contact {
+    font-size: 12px;
+    font-weight: 500;
+  }
+}
 
-    .user-name {
-      font-size: 12px;
-      opacity: .75;
-      font-weight: 500;
-      flex-basis: 100%;
-    }
+// Account & User Menu
+.spark-nav-sidebar .spark-nav-sidebar-header {
+  position: absolute;
+  width: $app-sidebar-width;
+  z-index: $z-app-sidebar-header;
+
+  + * {
+    margin-top: $app-header-height;
   }
 
-  .user-avatar img {
-    max-width: none;
-    vertical-align: middle;
-    border-radius: 50%;
-    width: 32px;
-    height: 32px;
+  > a {
+    &:hover,
+    &:focus {
+      background-color: lighten($app-sidebar-item-hover, 1%);
+    }
   }
 
   // Styling for bootstrap dropdown until we replace with spark component
   .dropdown-menu {
     margin-top: -$pad-base;
     margin-left: $pad-lg;
+    color: $base-text-color;
+
+    .divider {
+      margin: $pad-base $pad-lg;
+
+      &.full-width {
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
 
     .user-name {
       padding: 0 $pad-lg;

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

@@ -1,11 +1,14 @@
 .app-sidebar-toggle {
   display: none;
   position: relative;
-  margin-right: $pad-lg;
+  margin-right: $pad-base;
   margin-left: -6px;
   z-index: 11;
 
-  .with-sidebar & { display: block; }
+  // Show sidebar toggle only when sidebar is present
+  #sidebar + .app-main & {
+    display: block;
+  }
 
   // Shade that covers the body
   &:after {

data/app/assets/stylesheets/spark/components/button/_button.scss

@@ -8,77 +8,72 @@ $button-colors: (
   blue: $fl-blue-700,
   green: $fl-green-600,
   yellow: $fl-yellow-600,
-  red:  $fl-red-600
+  red:  $fl-red-600,
+  purple: $fl-purple-600
 );
 
-.spark-button-wrapper {
-  // display: flex;
-  // align-items: center;
-  // justify-content: center;
+.spark-button {
+  @include button-size($pad-md, $pad-md/2, 13px);
+  @include base-button-theme($fl-gray-200, $base-text-color);
+  border-radius: $radius-base;
+  cursor: pointer;
+  display: flex;
+  text-decoration: none;
+  transition: background-color 0.12s ease-in-out;
+  align-items: center;
+  box-shadow: none;
+  font-weight: 500;
 
-  .spark-button {
-    @include button-size($pad-md, 13px);
-    @include base-button-theme($fl-gray-200, $base-text-color);
-    border-radius: $radius-base;
-    cursor: pointer;
-    display: flex;
-    text-decoration: none;
-    transition: background-color 0.12s ease-in-out;
-    align-items: center;
-    box-shadow: none;
-    font-weight: 500;
+  .spark-icon {
+    margin-right: $pad-base;
+  }
 
-    .spark-icon {
-      margin-right: $pad-base;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:focus {
-      outline: none;
+  // Button sizes
+  @each $label, $map in $button-sizes {
+    &.size-#{$label} {
+      @include button-size(map-get($map, horizontal-padding), map-get($map, vertical-padding), map-get($map, font-size));
     }
+  }
 
-    // Button sizes
-    @each $label, $map in $button-sizes {
-      &.size-#{$label} {
-        @include button-size(map-get($map, padding), map-get($map, font-size));
-      }
+  // Base button colors
+  @each $color-name, $color in $button-colors {
+    &.color-#{$color-name} {
+      @include base-button-theme($color, $color);
     }
+  }
 
-    // Base button colors
+  // Primary button
+  &.theme-primary {
+    @include primary-button-theme(map-get($button-colors, blue));
+
+    // Primary button colors
     @each $color-name, $color in $button-colors {
       &.color-#{$color-name} {
-        @include base-button-theme($color, $color);
-      }
-    }
-
-    // Primary button
-    &.theme-primary {
-      @include primary-button-theme(map-get($button-colors, blue));
-
-      // Primary button colors
-      @each $color-name, $color in $button-colors {
-        &.color-#{$color-name} {
-          @include primary-button-theme($color);
-        }
+        @include primary-button-theme($color);
       }
     }
+  }
 
-    // Text button
-    &.theme-text {
-      @include text-button-theme;
+  // Text button
+  &.theme-text {
+    @include text-button-theme;
 
-      // Text button colors
-      @each $color-name, $color in $button-colors {
-        &.color-#{$color-name} {
-          @include text-button-theme($color);
-        }
+    // Text button colors
+    @each $color-name, $color in $button-colors {
+      &.color-#{$color-name} {
+        @include text-button-theme($color);
       }
     }
+  }
 
-    // Remove margin if no text
-    &.theme-icon-only {
-      & .spark-icon {
-        margin-right: 0;
-      }
+  // Remove margin if no text
+  &.theme-icon-only {
+    & .spark-icon {
+      margin-right: 0;
     }
   }
 }