@kws3/ui 1.6.7 → 1.7.1

package/styles/Loader.scss

@@ -1,3 +1,4 @@
+$kws-theme-colors: $colors !default;
 $kws-loader-width: 2rem !default;
 $kws-loader-height: 2rem !default;
 $kws-loader-width-medium: ($kws-loader-width * 1.5) !default;
@@ -5,45 +6,45 @@ $kws-loader-height-medium: ($kws-loader-height * 1.5) !default;
 $kws-loader-width-large: ($kws-loader-width * 3) !default;
 $kws-loader-height-large: ($kws-loader-height * 3) !default;
 $kws-loader-color: #ccc !default;
-$kws-loader-overlay-background: rgba(0,0,0,0.15) !default;
+$kws-loader-overlay-background: rgba(0, 0, 0, 0.15) !default;
 
-.kws-loader{
-  .hero-body{
-    position:relative;
-    &:after{
+.kws-loader {
+  .hero-body {
+    position: relative;
+    &:after {
       @include loader();
-      border-left-color:$kws-loader-color;
-      border-bottom-color:$kws-loader-color;
+      border-left-color: $kws-loader-color;
+      border-bottom-color: $kws-loader-color;
       position: absolute !important;
-      width:$kws-loader-width;
-      height:$kws-loader-height;
+      width: $kws-loader-width;
+      height: $kws-loader-height;
       left: calc(50% - (#{$kws-loader-width} / 2));
       top: calc(50% - (#{$kws-loader-height} / 2));
     }
 
-    @each $name, $pair in $colors{
+    @each $name, $pair in $kws-theme-colors {
       $color: nth($pair, 1);
-      &.is-#{$name}{
-        &:after{
-          border-left-color:$color !important;
-          border-bottom-color:$color !important;
+      &.is-#{$name} {
+        &:after {
+          border-left-color: $color !important;
+          border-bottom-color: $color !important;
         }
       }
     }
 
-    &.is-medium{
-      &:after{
-        width:$kws-loader-width-medium;
-        height:$kws-loader-height-medium;
+    &.is-medium {
+      &:after {
+        width: $kws-loader-width-medium;
+        height: $kws-loader-height-medium;
         left: calc(50% - (#{$kws-loader-width-medium} / 2));
         top: calc(50% - (#{$kws-loader-height-medium} / 2));
       }
     }
 
-    &.is-large{
-      &:after{
-        width:$kws-loader-width-large;
-        height:$kws-loader-height-large;
+    &.is-large {
+      &:after {
+        width: $kws-loader-width-large;
+        height: $kws-loader-height-large;
         left: calc(50% - (#{$kws-loader-width-large} / 2));
         top: calc(50% - (#{$kws-loader-height-large} / 2));
       }
@@ -51,17 +52,17 @@ $kws-loader-overlay-background: rgba(0,0,0,0.15) !default;
   }
 }
 
-.is-overlay{
-  z-index:4;
-  .kws-loader{
-    padding:0;
-    height:100%;
-    width:100%;
-    position:relative;
-    background:$kws-loader-overlay-background;
-    z-index:3;
-    .hero-body{
-      padding:0;
+.is-overlay {
+  z-index: 4;
+  .kws-loader {
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background: $kws-loader-overlay-background;
+    z-index: 3;
+    .hero-body {
+      padding: 0;
     }
   }
-}
+}

package/styles/Pagination.scss

@@ -14,7 +14,7 @@ $kws-pagination-item-active-color: findColorInvert(
 
 $kws-pagination-frame-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
   0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
-$kws-pagination-frame-background: linear-gradient(#fff, #fafafa);
+$kws-pagination-frame-background: linear-gradient(#fff, #fafafa) !default;
 
 .pagination {
   &.is-small {

package/styles/RangeSlider.scss

@@ -1,3 +1,4 @@
+$kws-theme-colors: $colors !default;
 $kws-slider-radius: $radius !default;
 $kws-slider-track-background: $grey-lighter !default;
 $kws-slider-track-radius: $radius !default;
@@ -222,7 +223,7 @@ $kws-slider-output-radius: $radius !default;
       &.is-large {
         @include slider-size($size-large);
       }
-      @each $name, $pair in $colors {
+      @each $name, $pair in $kws-theme-colors {
         $color: nth($pair, 1);
         $color-invert: nth($pair, 2);
         $color-light: findLightColor($color);

package/styles/Skeleton.scss

@@ -0,0 +1,52 @@
+$kws-theme-colors: $colors !default;
+$kws-skeleton-color: lighten($text, 60%) !default;
+$kws-skeleton-hilight-color: lighten($text, 65%) !default;
+
+.kws-skeleton {
+  width: 100%;
+  line-height: 1;
+  display: inline-block;
+  background-color: $kws-skeleton-color;
+  background-image: linear-gradient(
+    90deg,
+    $kws-skeleton-color,
+    $kws-skeleton-hilight-color,
+    $kws-skeleton-color
+  );
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+  animation: kws-skeleton-shine 1.2s infinite;
+
+  @each $name, $pair in $kws-theme-colors {
+    $color: nth($pair, 1);
+    $color-light: findLightColor($color);
+    &.is-#{$name} {
+      background-color: $color-light;
+      background-image: linear-gradient(
+        90deg,
+        $color-light,
+        darken($color-light, 10%),
+        $color-light
+      );
+    }
+  }
+
+  &.is-transparent {
+    background-color: transparent;
+    background-image: linear-gradient(
+      90deg,
+      transparent,
+      transparentize($kws-skeleton-hilight-color, 0.6),
+      transparent
+    );
+  }
+}
+
+@keyframes kws-skeleton-shine {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}

package/styles/Timeline.scss

@@ -0,0 +1,165 @@
+$kws-theme-colors: $colors !default;
+$kws-timeline-default-color: $grey !default;
+$kws-timeline-default-color-invert: $light !default;
+
+@mixin right-aligned-timeline-item {
+  flex-direction: row-reverse;
+  .kws-timeline-marker {
+    right: 0;
+    left: auto;
+    transform: translateX(50%);
+  }
+  .kws-timeline-content {
+    text-align: right;
+    padding-left: 0;
+    padding-right: 1.75rem;
+  }
+  &:before {
+    right: -0.5px;
+    left: auto;
+  }
+}
+
+.kws-timeline-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 0.5rem 0;
+  &:first-child {
+    padding-top: 0;
+  }
+  &:last-child {
+    padding-bottom: 0;
+  }
+  .kws-timeline-marker {
+    position: absolute;
+    left: 0;
+    background: $kws-timeline-default-color;
+    border: 1px solid $kws-timeline-default-color;
+    border-radius: 100%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    overflow: hidden;
+    &:empty {
+      min-height: 1rem;
+      min-width: 1rem;
+      padding: 0;
+      border-width: 4px;
+      background: $kws-timeline-default-color-invert;
+    }
+    .icon {
+      color: $kws-timeline-default-color-invert;
+      width: 16px;
+      height: 16px;
+      font-size: 0.75rem !important;
+    }
+    .image {
+      margin: -0.25rem;
+      img {
+        border-radius: 100%;
+      }
+    }
+  }
+  .kws-timeline-content {
+    padding-left: 1.75rem;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .kws-timeline-image {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 32px;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      border-radius: $radius;
+      box-shadow: 0 0.125rem 0.1875rem rgba(10, 10, 10, 0.1),
+        0 0 0 0.0625rem rgba(10, 10, 10, 0.1);
+    }
+  }
+
+  &:before {
+    content: "";
+    background-color: $kws-timeline-default-color;
+    display: block;
+    width: 1px;
+    height: 100%;
+    position: absolute;
+    left: -0.5px;
+    top: 0;
+  }
+
+  @each $name, $pair in $kws-theme-colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+    &.is-#{$name} {
+      .kws-timeline-marker {
+        border-color: $color;
+        background-color: $color;
+        &:empty {
+          background-color: $color-invert;
+        }
+        .icon {
+          color: $color-invert;
+        }
+      }
+      &:before {
+        background-color: $color;
+      }
+    }
+  }
+}
+
+.kws-timeline-header {
+  width: 4em;
+  min-width: 4em;
+  word-wrap: normal;
+  text-align: center;
+  transform: translateX(-25px);
+  + .kws-timeline-header {
+    padding-top: 0.5rem;
+  }
+}
+
+.kws-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+
+  &.is-center {
+    .kws-timeline-item {
+      width: 50%;
+      align-self: flex-end;
+      flex-direction: row;
+      &:nth-of-type(2n) {
+        align-self: flex-start;
+        @include right-aligned-timeline-item;
+      }
+    }
+    .kws-timeline-header {
+      width: 100%;
+      transform: none;
+    }
+  }
+
+  &.is-right {
+    justify-content: flex-end;
+    align-items: flex-end;
+    .kws-timeline-item {
+      width: 100%;
+      align-self: flex-end;
+      @include right-aligned-timeline-item;
+    }
+    .kws-timeline-header {
+      transform: translateX(25px);
+      width: 100%;
+      text-align: right;
+    }
+  }
+}

package/utils/index.js

@@ -19,7 +19,7 @@ export var rAF =
   window.mozRequestAnimationFrame ||
   window.oRequestAnimationFrame ||
   window.msRequestAnimationFrame ||
-  function (callback, element) {
+  function (callback) {
     window.setTimeout(callback, 1000 / 60);
   };
 

package/utils/keyboard-events.js

@@ -9,7 +9,7 @@ let events = [
   {name: 'uparrow', code: 38},
   {name: 'backspace', code: 8},
   {name: 'del', code: 46},
-]
+];
 
 export function keyboardEvents(node) {
   function keydownHandler(event) {
@@ -20,7 +20,7 @@ export function keyboardEvents(node) {
           new CustomEvent(name)
         );
       }
-    })
+    });
   }
   node.addEventListener('keydown', keydownHandler, false);
 
@@ -29,4 +29,4 @@ export function keyboardEvents(node) {
       node.removeEventListener('keydown', keydownHandler, false);
     }
   };
-};
+}