fleetio_spark 0.2.48 → 1.0.0.rc.1

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

@@ -1,56 +1,56 @@
-.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; }
-  }
-}
+// .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/ui/_placeholder.scss

@@ -1,34 +1,20 @@
-.ui-image-wrapper {
+.spark-icon-placeholder-wrapper {
   display: inline-block;
   vertical-align: middle;
 
-  $sizes: ('sm': 24, 'md': 32, 'lg': 44, 'xl': 84, 'scale':100%);
-
-  @each $name, $size in $sizes {
-    &.size-#{$name} {
-      width: #{$size}px;
-      height: #{$size}px;
-    }
-  }
-
   > * {
     display: block;
   }
+}
 
-  .ui-roundrect-crop {
-    border-radius: 4px;
-  }
+.spark-roundrect-crop {
+  border-radius: 4px;
+}
 
-  .ui-circle-crop {
-    border-radius: 100%;
-  }
+.spark-circle-crop {
+  border-radius: 100%;
 }
 
-.ui-placeholder {
-  color: $fl-white;
+.spark-icon-placeholder {
   user-select: none;
-
-  rect, circle {
-    fill: $fl-gray-500;
-  }
 }

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

@@ -1,31 +1,5 @@
-.ui-toolbar {
+.spark-toolbar {
   margin-bottom: $pad-lg;
-  display: flex;
-
-  &-actions {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-  }
-
-  &-content {
-    display: flex;
-    align-items: center;
-
-    > * {
-      margin: 0 $pad-sm;
-
-      &:first-child { margin-left: 0; }
-      &:last-child { margin-right: 0; }
-    }
-  }
-
-  &-action {
-    margin: 0 $pad-sm;
-
-    &:first-child { margin-left: 0; }
-    &:last-child { margin-right: 0; }
-  }
 
   &.is-sticky {
     padding: $pad-md $pad-lg;

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

@@ -1,114 +1,117 @@
-// Styles for Top Navbar Dropdown Menus
-.app-header,
-.app-sidebar {
-  .dropdown-menu {
-    border: 1px solid rgba(#000, .15);
-    max-height: 85vh;
-    overflow-y: auto;
-    min-width: 260px;
-    @include elevation(4);
-    border-radius: 6px;
-    padding: $pad-md 0;
-    font-size: $base-size;
-    z-index: 1060;
-  
-    .divider {
-      margin: $pad-base $pad-lg;
-
-      &.full-width {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  
-    > li {
-      > a {
-        padding: 5px $pad-lg 6px;
-      }
-  
-      // Existing Material icons styling (will replace with svg in future)
-      i {
-        font-size: 16px;
-        margin-right: $pad-md;
-      }
-      .pull-right {
-        i {
-          font-size: 14px;
-          margin-right: 0;
-        }
-      }
-    }
-
-    .explore-fleetio a {
-      margin: 0 $pad-base $pad-base;
-      padding: $pad-base $pad-md;
-      border-radius: 4px;
-      background-color: $fl-purple-25;
-      color: $fl-purple-500;
-
-      i {
-        color: inherit;
-        margin-right: 8px;
-      }
-
-      &:hover,
-      &:focus {
-        color: $fl-purple-600;
-        background-color: darken($fl-purple-25, 2%);
-      }
-    }
-  }
-
-  .alerts-dropdown {
-    .dropdown-menu { padding: 0; }
-  
-    .dropdown-header {
-      padding: $pad-md $pad-lg;
-      border-bottom: 1px solid rgba(#000, .15);
-  
-      &-title {
-        font-size: $base-size;
-        font-weight: 600;
-        color: $fl-gray-900;
-        margin: 0;
-      }
-    }
-    
-    .dropdown-list-item {
-      > a {
-        font-size: 13px;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        padding: $pad-md $pad-lg;
-      }
-
-      &:not(:last-of-type) { border-bottom: 1px solid $fl-gray-50; }
-
-      .svg-symbol {
-        display: flex;
-        flex-shrink: 0;
-        position: relative;
-        top: $pad-sm;
-        margin-right: $pad-md;
-        fill: $fl-yellow-600;
-      }
-
-      .list-item-text {
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        
-        h5 {
-          font-size: $base-size;
-          margin: 0;
-        }
-    
-        p {
-          margin: $pad-sm 0;
-          color: $fl-gray-500;
-        }
-      }
-    }
-  }
-}
+// // Styles for Top Navbar Dropdown Menus
+// #header,
+// #sidebar {
+//   .dropdown-menu {
+//     border: 1px solid rgba(#000, .15);
+//     max-height: 85vh;
+//     overflow-y: auto;
+//     min-width: 260px;
+//     color: $base-text-color;
+//     @include elevation(4);
+//     border-radius: 6px;
+//     padding: $pad-md 0;
+//     font-size: $base-size;
+//     z-index: 1060;
+//     margin-left: $pad-lg;
+//     margin-top: -$pad-base;
+
+//     .divider {
+//       margin: $pad-base $pad-lg;
+
+//       &.full-width {
+//         margin-left: 0;
+//         margin-right: 0;
+//       }
+//     }
+
+//     > li {
+//       > a {
+//         padding: 5px $pad-lg 6px;
+//       }
+
+//       // Existing Material icons styling (will replace with svg in future)
+//       i {
+//         font-size: 16px;
+//         margin-right: $pad-md;
+//       }
+//       .pull-right {
+//         i {
+//           font-size: 14px;
+//           margin-right: 0;
+//         }
+//       }
+//     }
+
+//     .explore-fleetio a {
+//       margin: 0 $pad-base $pad-base;
+//       padding: $pad-base $pad-md;
+//       border-radius: 4px;
+//       background-color: $fl-purple-25;
+//       color: $fl-purple-500;
+
+//       i {
+//         color: inherit;
+//         margin-right: 8px;
+//       }
+
+//       &:hover,
+//       &:focus {
+//         color: $fl-purple-600;
+//         background-color: darken($fl-purple-25, 2%);
+//       }
+//     }
+//   }
+
+//   .alerts-dropdown {
+//     .dropdown-menu { padding: 0; }
+
+//     .dropdown-header {
+//       padding: $pad-md $pad-lg;
+//       border-bottom: 1px solid rgba(#000, .15);
+
+//       &-title {
+//         font-size: $base-size;
+//         font-weight: 600;
+//         color: $fl-gray-900;
+//         margin: 0;
+//       }
+//     }
+
+//     .dropdown-list-item {
+//       > a {
+//         font-size: 13px;
+//         display: flex;
+//         flex-direction: row;
+//         flex-wrap: nowrap;
+//         padding: $pad-md $pad-lg;
+//       }
+
+//       &:not(:last-of-type) { border-bottom: 1px solid $fl-gray-50; }
+
+//       .svg-symbol {
+//         display: flex;
+//         flex-shrink: 0;
+//         position: relative;
+//         top: $pad-sm;
+//         margin-right: $pad-md;
+//         fill: $fl-yellow-600;
+//       }
+
+//       .list-item-text {
+//         display: flex;
+//         flex-direction: column;
+//         flex-wrap: wrap;
+
+//         h5 {
+//           font-size: $base-size;
+//           margin: 0;
+//         }
+
+//         p {
+//           margin: $pad-sm 0;
+//           color: $fl-gray-500;
+//         }
+//       }
+//     }
+//   }
+// }

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

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

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

@@ -1,3 +1,2 @@
-@import "trial-status";
 @import "search";
 @import "search-results";

data/app/assets/stylesheets/spark/components_old/header/_search.scss

@@ -24,6 +24,7 @@
     width: calc( 100% - 32px );
     margin-right: 0;
     z-index: 100;
+    top: 12px;
 
     &[data-active-stack] .text-input-label {
       border: {
@@ -58,6 +59,7 @@
       position: relative;
       max-width: $search-width-active;
       left: 0; right: 0;
+      top: initial;
     }
     .modal-is-closing {
       animation: fade-out $duration / 2 $timing;