fleetio_spark 1.0.3 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7bf8efe56b161ecc32a965d71f806fcaea0c60cf3b466daac9f941405bea8958
-  data.tar.gz: 2b3bf1fb0812edfdc763eeede10cd2e4adc82e1786701c90b000d6be5fc641c4
+  metadata.gz: 17882711585eab6ebbf07a02fd4a6292efcc06b8d15352c74f37168c110415e5
+  data.tar.gz: 317b7979edef37edd39dfcdb98738f8675c7370b54f2ee0bf05ec2df37d87e02
 SHA512:
-  metadata.gz: 77f139a999cd1fe3781e948bdf49a2018f82c93c0c189b6694a2a0387942772d574b8c843c4a8c7383a9c7d41b6b31f7d7a55960243ba490e8d6b902693e37d5
-  data.tar.gz: 6f306ad99f1fdef9ce8577f8d80c21b294480b72f0bcab83d309a83ae36ca3cf857095a4aca2bd62b00e3937b2fcb586e1fee44af358aa4bd8b6d56bbf78c854
+  metadata.gz: c05a09bf22140a1761fb2e70743f6df5bfcc955baba8cbdb02988978da6e6e9b3f41dbdbb8ea0b73421cf89365c31848272527aa4b62f53295ef9fac51b13359
+  data.tar.gz: 810e1ea536f2b7f767b5a2d2fdcfc1d9f84f78fc0c6b5339b2e8f791bb07339ae0a6160c7dbee59d48e19393e5c743bb72b54bc9c1d1336904d959874eb5a10d

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

@@ -4,18 +4,27 @@
 @import "app/modal";
 @import "app/sidebar/toggle";
 
-@import "button/button";
-@import "button/button_group";
+@import "actions/button/button";
+@import "actions/button/button_group";
+@import "actions/checklist/trigger";
+@import "actions/checklist/container";
+@import "actions/checklist/item";
 
-@import "icon/icon";
-@import "icon/badge";
+@import "images/icon";
+@import "images/badge";
+@import "images/placeholder";
 
+@import "input/base";
 @import "input/switch";
 
-@import "layout/grid";
-@import "layout/block";
-@import "layout/media_block";
-@import "layout/page";
+@import "structure/grid";
+@import "structure/block";
+@import "structure/header";
+@import "structure/media_block";
+@import "structure/page";
+@import "structure/sticky_panel";
+@import "structure/card";
+@import "structure/widget_card";
 
 @import "nav/item";
 @import "nav/tabs";
@@ -30,14 +39,6 @@
 
 @import "messaging/trial-notice";
 @import "messaging/banner";
+@import "messaging/toast";
 
-@import "ui/toast";
-@import "ui/toolbar";
-@import "ui/sticky_panel";
-@import "ui/placeholder";
-@import "ui/checklist_trigger";
-@import "ui/checklist/container";
-@import "ui/checklist/item";
-@import "ui/card";
-@import "ui/widget_card";
-@import "ui/wistia_media";
+@import "embed/wistia_media";

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

@@ -4,9 +4,13 @@
   border-bottom: 1px solid $fl-gray-100;
   background-color: $fl-white;
   line-height: $base-line-height;
-  padding: 0 $pad-lg;
   height: $app-header-height;
   position: absolute;
+  padding: 0 $pad-base;
+
+  @include at-least($width-base) {
+    padding: 0 $pad-lg;
+  }
 
   // When sidebar is present and visible
   // header should be the full width minus the sidebar width

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

@@ -32,7 +32,7 @@
   .spark-nav-sidebar-header {
     position: absolute;
     width: $app-sidebar-width;
-    z-index: $z-app-sidebar-header;
+    z-index: 1;
   }
 
   .spark-nav-sidebar-header {

data/app/assets/stylesheets/spark/components/messaging/_banner.scss

@@ -15,11 +15,11 @@
 
   &-message {
     margin: 0 .8em;
-  }
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
 
-  a {
-    color: inherit;
-    text-decoration: underline;
   }
 
   &.theme-message {
@@ -27,11 +27,60 @@
     color: #fff;
   }
 
+  .app-banner-action-item {
+    text-decoration: none;
+    padding: $pad-sm $pad-base;
+    color: inherit;
+    white-space: nowrap;
+    position: relative;
+    z-index: 0;
+
+    &:before, &:after {
+      content: "";
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 3px;
+      position: absolute;
+      z-index: -1;
+    }
+
+    &:before {
+      background-color: rgba(#fff, .05);
+      top: 1px;
+      left: 1px;
+      transition: background-color $duration $timing;
+    }
+
+    &:after {
+      border: currentColor 1px solid;
+      opacity: 0.3;
+      transition: opacity $duration $timing;
+    }
+
+    &:hover, &:focus {
+      &:after {
+        opacity: 0.8;
+      }
+    }
+  }
+
   &.theme-alert {
     background: $fl-red-25;
     border-top-color: $fl-red-400;
     border-bottom-color: $fl-red-50;
     color: $fl-red-700;
+    //justify-content: space-between;
+
+    .app-banner-action-item {
+      &:before {
+        background-color: rgba(#fff, .3); 
+      }
+      &:hover:before, &:focus:before {
+        background-color: rgba(#fff, .8); 
+      }
+    }
   }
 
   &.theme-admin {
@@ -42,15 +91,8 @@
     justify-content: space-between;
 
     .app-banner-action-item {
-      text-decoration: none;
-      padding: $pad-sm $pad-base;
-      background-color: $fl-yellow-300;
-      border-radius: 3px;
-      transition: background-color $duration $timing;
-      white-space: nowrap;
-
-      &:hover {
-        background-color: $fl-yellow-400;
+      &:before {
+        background-color: $fl-yellow-300;
       }
     }
   }

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

@@ -7,7 +7,6 @@
   font-size: 14px;
   font-weight: 500;
   transition: color $duration-short $timing;
-  //color: $fl-blue-700;
 
   &.active {
     color: $fl-blue-900;

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

@@ -33,11 +33,11 @@
 
     &.active {
       color: $fl-white;
-      background-color: $fl-blue-600;
+      background-color: $fl-blue-700;
 
       .nav-item-badge {
         background: $fl-white;
-        color: $fl-blue-600;
+        color: $fl-blue-700;
       }
     }
 

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

@@ -3,10 +3,9 @@
   overflow-x: hidden;
 
   .nav-toggle {
-    width: calc(100% + #{2 * $pad-lg});
     background: $fl-white;
-    margin: 0 #{-$pad-lg};
-    padding: $pad-xs $pad-lg;
+    width: 100%;
+    padding: $pad-xs $pad-base;
 
     &-icon {
       margin-right: -$pad-base;
@@ -19,18 +18,21 @@
 
   &-wrapper {
     @include until($width-base) {
-      margin: 0 #{-$pad-lg};
-      padding: 0 $pad-lg;
       max-height: 0;
-      transition: max-height ($duration * 1.5) $timing;
+      transition-duration: $duration * 1.5;
+      transition-timing: $timing;
+      transition-properties: max-height padding;
+    }
 
-      //> *:first-child {
-        //margin-top: $pad-lg;
-      //}
+    @include at-least($width-base) {
+      padding: 0;
     }
   }
 
   &.nav-active &-wrapper {
+    padding-top: $pad-base;
+    padding-bottom: $pad-base;
+
     @include until($width-base) {
       max-height: 100vh;
     }

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

@@ -32,10 +32,14 @@
   .nav-toggle {
     width: 100%;
     background: $fl-white;
-    padding: $pad-xs $pad-lg;
+    padding: $pad-xs $pad-base;
     display: none;
     margin: -1px 0 0;
 
+    @include at-least($width-base) {
+      padding: $pad-xs $pad-lg;
+    }
+
     &-icon {
       margin-right: -$pad-base;
     }
@@ -91,9 +95,12 @@
     }
 
     .nav-item {
-      padding: 0 $pad-lg;
+      padding: 0 $pad-base;
       transition: padding $duration cubic-bezier(0.47, 0, 0.745, 0.715);
       border-bottom: 1px solid $fl-gray-100;
+      @include at-least($width-base) {
+        padding: 0 $pad-lg;
+      }
     }
 
     // Hide all nav elements but the active one.
@@ -127,7 +134,12 @@
       }
 
       .nav-item {
-        padding: ($pad-base + 1) $pad-lg;
+        padding: ($pad-base + 1) $pad-base;
+
+        @include at-least($width-base) {
+          padding: ($pad-base + 1) $pad-lg;
+        }
+
         &:hover, &:focus {
           background-color: $fl-gray-50;
         }
@@ -147,10 +159,17 @@
 
   &.layout-padded:not(.collapse-tabs) {
     .nav-item-wrapper:first-child {
-      padding-left: $pad-lg;
+      padding-left: $pad-base;
+      @include at-least($width-base) {
+        padding-left: $pad-lg;
+      }
     }
     .nav-item-wrapper:last-child {
-      padding-right: $pad-lg;
+      padding-right: $pad-base;
+
+      @include at-least($width-base) {
+        padding-right: $pad-lg;
+      }
     }
   }
 }

data/app/assets/stylesheets/spark/components/{layout → structure}/_block.scss

@@ -1,4 +1,4 @@
-.spark-layout-block {
+.spark-block {
   display: flex;
   align-items: center;
   width: 100%;
@@ -7,11 +7,19 @@
     flex-wrap: wrap;
   }
 
+  &.layout-padded {
+    padding: 8px 8px;
+
+    @include at-least($width-base) {
+      padding: 8px 16px;
+    }
+  }
+
   @each $label, $size in $gutter-sizes {
-    &.gutter-#{$label} .spark-layout-block-item {
+    &.gutter-#{$label} .spark-block-item {
       margin: 0 $size;
     }
-    &.action-gutter-#{$label} .spark-layout-block-action {
+    &.action-gutter-#{$label} .spark-block-action {
       margin: 0 $size;
     }
   }
@@ -23,14 +31,14 @@
 
   &-items {
     flex-grow: 1;
-    .spark-layout-block-item:first-child {
+    .spark-block-item:first-child {
       margin-left: 0;
     }
   }
 
   &-actions {
     margin-left: auto;
-    .spark-layout-block-action:last-child {
+    .spark-block-action:last-child {
       margin-right: 0;
     }
   }

data/app/assets/stylesheets/spark/components/{ui/_toolbar.scss → structure/_header.scss}

@@ -1,10 +1,14 @@
-.spark-toolbar {
+.spark-header {
   &.is-sticky {
     padding: $pad-md $pad-lg 1px;
     background-color: $fl-white;
     border-bottom: 1px solid $fl-gray-100;
     box-shadow: 0 2px 6px 0 rgba($fl-gray-900, .08);
     margin: 0;
+
+    > * {
+      margin-bottom: $pad-md - 1;
+    }
   }
 
   > * {

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

@@ -0,0 +1,36 @@
+.spark-page {
+
+  &-header {
+    width: 100%;
+    background: $fl-white;
+    border-bottom: 1px solid $fl-gray-100;
+  }
+
+  &-wrapper {
+    position: relative;
+
+    > * {
+      padding: $pad-base;
+    }
+
+    @include at-least($width-base) {
+      display: flex;
+      padding: $pad-base ($pad-base * 2);
+      > * {
+        padding: $pad-base ($pad-base + $pad-base / 2);
+        &:first-child { padding-left: 0; }
+        &:last-child { padding-right: 0; }
+      }
+    }
+  }
+
+  &-main {
+    z-index: 1;
+    width: 100%;
+
+    &-header ~ &-content {
+      padding-top: $pad-lg;
+      border-top: 1px solid $fl-gray-100;
+    }
+  }
+}