fleetio_spark 0.2.48 → 1.0.0.rc.1

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

@@ -2,26 +2,20 @@
 .spark-button-group {
   display: flex;
 
-  .spark-button-wrapper:not(:first-child):not(:last-child) {
-    .spark-button {
-      border-radius: 0;
-      margin-left: -1px;
-    }
+  .spark-button:not(:first-child):not(:last-child) {
+    border-radius: 0;
+    margin-left: -1px;
   }
 
-  .spark-button-wrapper:first-child {
-    .spark-button {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+  .spark-button:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  .spark-button-wrapper:last-child {
-    .spark-button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      margin-left: -1px;
-    }
+  .spark-button:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
   }
 
   .spark-button:hover,

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

@@ -1,18 +1,27 @@
 $button-sizes: (
   base: (
-    padding: $pad-md,
+    horizontal-padding: $pad-md,
+    vertical-padding: ($pad-md / 2),
     font-size: 13px
   ),
+  xs: (
+    horizontal-padding: $pad-sm,
+    vertical-padding: $pad-xs,
+    font-size: 12px
+  ),
   small: (
-    padding: $pad-sm,
+    horizontal-padding: $pad-base,
+    vertical-padding: $pad-xs,
     font-size: 12px
   ),
   medium: (
-    padding: 20px,
+    horizontal-padding: 20px,
+    vertical-padding: 10px,
     font-size: 16px
   ),
   large: (
-    padding: $pad-xl,
+    horizontal-padding: $pad-xl,
+    vertical-padding: $pad-md,
     font-size: 18px
   )
 );
@@ -37,11 +46,11 @@ $button-sizes: (
 //   )
 // );
 
-@mixin button-size($horizontal-padding, $font-size){
+@mixin button-size($horizontal-padding, $vertical-padding, $font-size){
   $svg-size: ($font-size - 3);
 
   font-size: $font-size;
-  padding: ($horizontal-padding / 2) $horizontal-padding;
+  padding: $vertical-padding $horizontal-padding;
   min-height: ($horizontal-padding + $font-size) + 5;
 
   .spark-icon {
@@ -50,11 +59,11 @@ $button-sizes: (
   }
 
   &.theme-text {
-    padding: ($horizontal-padding / 2);
+    padding: $horizontal-padding / 2;
 
     .spark-icon{
       height: ($svg-size * 2);
       padding: ($svg-size / 2) 0;
     }
   }
-}
+}

data/app/assets/stylesheets/spark/components/icon/_badge.scss

@@ -0,0 +1,41 @@
+.spark-badge {
+  display: inline-flex;
+  padding: 0 $pad-base - 1;
+  margin-left: $pad-base;
+  padding: 1px 6px;
+
+  font-size: 10px;
+  border-radius: 30px;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: 600;
+  border: 1px solid transparent;
+  line-height: 1.1em;
+
+  &.fill {
+    color: #fff;
+
+    &.color-gray   { background: $fl-gray-500; }
+    &.color-red    { background: $fl-red-500; }
+    &.color-yellow { background: $fl-yellow-600; }
+    &.color-green  { background: $fl-green-500; }
+    &.color-teal   { background: $fl-teal-500; }
+    &.color-blue   { background: $fl-blue-500; }
+    &.color-purple { background: $fl-purple-500; }
+    &.color-gray   { background: $fl-gray-500; }
+  }
+
+  &.outline {
+    border-color: currentColor;
+    background: transparent;
+
+    &.color-gray   { color: $fl-gray-500; }
+    &.color-red    { color: $fl-red-500; }
+    &.color-yellow { color: $fl-yellow-600; }
+    &.color-green  { color: $fl-green-500; }
+    &.color-teal   { color: $fl-teal-500; }
+    &.color-blue   { color: $fl-blue-500; }
+    &.color-purple { color: $fl-purple-500; }
+    &.color-gray   { color: $fl-gray-500; }
+  }
+}

data/app/assets/stylesheets/spark/components/{form → input}/_switch.scss

@@ -1,44 +1,44 @@
 @mixin spark-switch-size($width, $height) {
   $tick-width: ($width - 6)/2;
-  .spark-switch-panel {
+  .spark-input-switch-panel {
     width: $width;
     height: $height;
     border-radius: $height;
   }
 
-  .spark-switch-tick {
+  .spark-input-switch-tick {
     width: $tick-width;
     height: $height - 4;
     border-radius: $height;
   }
 
-  .spark-switch-input { 
+  .spark-input {
     @include input-active {
-      ~ .spark-switch-panel {
+      ~ .spark-input-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 {
+      ~ .spark-input-switch-panel {
         box-shadow: none;
       }
     }
   }
 
-  input:checked + .spark-switch-panel .spark-switch-tick {
+  input:checked + .spark-input-switch-panel .spark-input-switch-tick {
     transform: translate3d( $tick-width + 2 , 0, 0 );
   }
 }
 
-.spark-switch {
+.spark-input-switch {
 
   .label-text {
     margin-right: $pad-base;
     padding-bottom: 0;
     line-height: 1.5em;
   }
-  
+
   &-label {
     display: flex;
     position: relative;
@@ -54,7 +54,7 @@
     }
   }
 
-  &-panel { 
+  &-panel {
     background: $fl-gray-300;
     position: relative;
     transition-property: background, box-shadow, border-color;
@@ -72,7 +72,7 @@
     font-weight: 500;
   }
 
-  &-input {
+  .spark-input {
     position: absolute;
     border: none;
     cursor: pointer;
@@ -80,37 +80,37 @@
     z-index: -1;
 
     &[disabled] {
-      ~ .spark-switch-panel {
+      ~ .spark-input-switch-panel {
         background: rgba($fl-gray-300, 0.5);
       }
     }
   }
 
-  &-input:checked {
-    ~ .spark-switch-panel {
+  .spark-input:checked {
+    ~ .spark-input-switch-panel {
       background: $fl-green-600;
     }
 
     &[disabled] {
-      ~ .spark-switch-panel {
+      ~ .spark-input-switch-panel {
         background: rgba($fl-green-600, 0.5);
       }
     }
   }
-  
-  &.small {
+
+  &.size-small {
     @include spark-switch-size(30px, 16px);
   }
-  &.medium {
+  &.size-medium {
     @include spark-switch-size(46px, 24px);
   }
-  
+
   &.expanded {
     .label-text { margin-right: auto; }
   }
 
-  &-align-right {
-    .spark-switch-label {
+  .align-right {
+    .spark-input-switch-label {
       flex-direction: row-reverse;
     }
     .label-text {

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

@@ -0,0 +1,44 @@
+.spark-layout-block {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  @each $label, $size in $gutter-sizes {
+    &.gutter-#{$label} .spark-layout-block-item {
+      margin: 0 $size;
+    }
+    &.action-gutter-#{$label} .spark-layout-block-action {
+      margin: 0 $size;
+    }
+  }
+
+  &-items, &-actions {
+    display: flex;
+    align-items: center;
+  }
+
+  &-items {
+    flex-grow: 1;
+    .spark-layout-block-item:first-child {
+      margin-left: 0;
+    }
+  }
+
+  &-actions {
+    margin-left: auto;
+    .spark-layout-block-action:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &-item, &-action {
+    &.expand { flex-grow: 1; }
+  }
+
+  @include until($width-sm) {
+    .block-spacer { margin: 0; }
+  }
+
+  // TODO: Design size classes
+  .block-spacer.size-base  { width: $pad-base; }
+}

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

@@ -1,5 +1,4 @@
 $grid-columns: 12;
-$gutter-sizes : ['base', $pad-base], ['small', $pad-sm], ['medium', $pad-md], ['large', $pad-lg], ['xl', $pad-xl];
 
 @mixin horizontal-gutter($amount) {
   // Pulls left and right to line up flush with other elements
@@ -59,53 +58,51 @@ $gutter-sizes : ['base', $pad-base], ['small', $pad-sm], ['medium', $pad-md], ['
     // display: flex;
   }
 
-  &-no-wrap {
+  &.no-wrap {
     .spark-grid-columns{
       flex-wrap: nowrap;
     }
   }
 
-  &-reverse {
+  &.reverse {
     .spark-grid-columns{
       flex-direction: row-reverse;
     }
   }
-}
 
-@for $a from 1 through $grid-columns {
-  [data-span="#{$a}"] {
-    flex: none;
-    flex-basis: calc-flex-basis(($grid-columns / $a), 0);
-  }
-  [data-offset="#{$a}"] {
-    margin-left: calc-flex-basis(($grid-columns / $a), 0);
+  @for $a from 1 through $grid-columns {
+    [data-span="#{$a}"] {
+      flex: none;
+      flex-basis: calc-flex-basis(($grid-columns / $a), 0);
+    }
+    [data-offset="#{$a}"] {
+      margin-left: calc-flex-basis(($grid-columns / $a), 0);
+    }
   }
-}
+  
+  @each $label, $size in $gutter-sizes {
 
-@each $label, $size in $gutter-sizes {
+    &.gutter-#{$label} > .spark-grid-columns {
 
-  .spark-grid-gutter-#{$label} .spark-grid-columns {
+      @include horizontal-gutter($size);
 
-    .spark-grid-column {
-      min-width: calc-flex-basis(($grid-columns / 1), $size);
-    }
-
-    @include horizontal-gutter($size);
+      & > .spark-grid-column {
+        min-width: calc-flex-basis(($grid-columns / 1), $size);
 
-    @for $a from 1 through $grid-columns {
+        @for $a from 1 through $grid-columns {
 
-      [data-span="#{$a}"] {
-        flex: none;
-        flex-basis: calc-flex-basis(($grid-columns / $a), $size);
-      }
-      [data-offset="#{$a}"] {
-        margin-left: calc-offset(($grid-columns / $a), $size);
+          &[data-span="#{$a}"] {
+            flex: none;
+            flex-basis: calc-flex-basis(($grid-columns / $a), $size);
+          }
+          &[data-offset="#{$a}"] {
+            margin-left: calc-offset(($grid-columns / $a), $size);
+          }
+        }
       }
     }
-  }
 
-  .spark-grid-gutter-#{$label}-match {
-    .spark-grid-columns {
+    &.gutter-#{$label}-match > .spark-grid-columns {
       @include vertical-gutter($size);
     }
   }

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

@@ -0,0 +1,76 @@
+@mixin media-block-gutter($gutter: 0) {
+  .spark-media-block-image {
+    margin: 0 $gutter 0 0;
+  }
+
+  &.layout-reverse {
+    > .spark-media-block-image {
+      margin: 0 0 0 $gutter;
+    }
+  }
+}
+
+.spark-media-block {
+  @include media-block-gutter;
+  display: flex;
+  align-items: flex-start;
+  min-width: 0;
+
+  @each $label, $size in $gutter-sizes {
+    &.gutter-#{$label} {
+      @include media-block-gutter($size);
+    }
+  }
+
+  &.layout-reverse {
+    > .spark-media-block-image {
+      order: 1;
+    }
+  }
+
+  &.expand { flex: 1; }
+
+  &-content {
+    flex: 1;
+    min-width: 0;
+
+    &,
+    & :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &-title {
+    font-weight: 700;
+    margin-bottom: $pad-xs;
+
+    &.no-wrap { 
+      display: flex;
+
+      &, > * {
+        white-space: nowrap;
+        overflow: hidden;
+        min-width: 0;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  &.align-top {
+    .spark-media-block-image {
+      align-self: flex-start;
+    }
+  }
+
+  &.align-middle {
+    .spark-media-block-image {
+      align-self: center;
+    }
+  }
+
+  &.align-bottom {
+    .spark-media-block-image {
+      align-self: flex-end;
+    }
+  }
+}