feat(progressbar): add Progressbar for Material theme

telerik · Aug 20, 2018 · 1de6d19 · 1de6d19
1 parent 08a15b3
commit 1de6d19
Show file tree

Hide file tree

Showing 7 changed files with 274 additions and 4 deletions.
diff --git a/packages/default/scss/progressbar/_layout.scss b/packages/default/scss/progressbar/_layout.scss
@@ -126,8 +126,7 @@
             transform-origin: 0 0;
         }
         > .k-state-selected {
-            left: -1px;
-            bottom: -1px;
+            bottom: 0;
             width: 100%;
         }
 

diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -171,7 +171,7 @@ $window-inner-padding-y: 24px !default;
 $window-titlebar-padding-x: 24px !default;
 $window-titlebar-padding-y: 24px !default;
 
-$progressbar-height: 22px;
+$progressbar-height: 5px !default;
 
 $zindex-popup: 1;
 $zindex-window: 2;

diff --git a/packages/material/scss/all.scss b/packages/material/scss/all.scss
@@ -73,7 +73,7 @@
 
 
 // Interactivity & UX
-//@import "progressbar";
+@import "progressbar";
 //@import "scroller";
 
 

diff --git a/packages/material/scss/progressbar.scss b/packages/material/scss/progressbar.scss
@@ -0,0 +1,11 @@
+@import "variables";
+@import "mixins";
+
+
+// Dependencies
+@import "common/all";
+
+
+// Component
+@import "progressbar/layout";
+@import "progressbar/theme";
diff --git a/packages/material/scss/progressbar/_layout.scss b/packages/material/scss/progressbar/_layout.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/progressbar/layout";
diff --git a/packages/material/scss/progressbar/_theme.scss b/packages/material/scss/progressbar/_theme.scss
@@ -0,0 +1,147 @@
+$progress-text: #3b3b3b !default;
+$progress-bg: #bdc2de !default;
+
+$progress-fill-bg: $primary !default;
+
+$progress-status-gap: -17px !default;
+$progress-status-font-size: 11px !default;
+$progress-status-line-height: 20px !default;
+
+$progress-animation-timing: 2s infinite !default;
+
+@mixin progress-indeterminate-common() {
+    content: "";
+    display: block;
+    position: absolute;
+    background: $progress-fill-bg;
+    width: 100%;
+    height: 100%;
+    transform-origin: 0 0;
+}
+
+@mixin progress-indeterminate-animation($primary-animation-name, $secondary-animation-name, $translate-axis, $scale-axis) {
+    @keyframes #{$primary-animation-name} {
+        0% {
+            transform: unquote("#{$translate-axis}(0)") unquote("#{$scale-axis}(0)");
+        }
+        20% {
+            transform: unquote("#{$translate-axis}(0)") unquote("#{$scale-axis}(.08)");
+            animation-timing-function: cubic-bezier(.4, .08, .75, .8);
+        }
+        60% {
+            transform: unquote("#{$translate-axis}(83%)") unquote("#{$scale-axis}(.75)");
+            animation-timing-function: cubic-bezier(.21, .25, .58, .98);
+        }
+        100% {
+            transform: unquote("#{$translate-axis}(250%)") unquote("#{$scale-axis}(.08)");
+        }
+    }
+
+    @keyframes #{$secondary-animation-name} {
+        0% {
+            transform: unquote("#{$translate-axis}(0)") unquote("#{$scale-axis}(.08)");
+            animation-timing-function: cubic-bezier(.18, 0, .54, .42);
+        }
+        22% {
+            transform: unquote("#{$translate-axis}(34%)") unquote("#{$scale-axis}(.45)");
+            animation-timing-function: cubic-bezier(.22, .25, .7, .9);
+        }
+        46% {
+            transform: unquote("#{$translate-axis}(82%)") unquote("#{$scale-axis}(.75)");
+            animation-timing-function: cubic-bezier(.33, .3, .4, 1.2);
+        }
+        100% {
+            transform: unquote("#{$translate-axis}(160%)") unquote("#{$scale-axis}(.08)");
+        }
+    }
+}
+
+@include exports("progressbar/theme") {
+
+    // Theme
+    .k-progressbar {
+        color: $progress-text;
+        background-color: $progress-bg;
+        overflow: visible;
+        border-radius: 0;
+
+        // Status
+        .k-progress-status-wrap {
+            top: $progress-status-gap;
+            font-size: $progress-status-font-size;
+            line-height: $progress-status-line-height;
+        }
+
+        // Progress
+        > .k-state-selected {}
+        .k-state-selected {
+            background-color: $progress-fill-bg;
+        }
+
+        // Chunks
+        > ul {}
+
+        .k-item {
+            border-color: $bg-color;
+        }
+    }
+
+    .k-progressbar.k-progressbar-vertical {
+
+        .k-progress-status-wrap {
+            top: 0;
+            left: $progress-status-gap;
+        }
+    }
+
+    .k-progressbar.k-progressbar-vertical.k-progressbar-reverse {
+
+        .k-progress-status-wrap {
+            left: 1px;
+        }
+    }
+
+    .k-progressbar.k-progressbar-indeterminate {
+
+        @include progress-indeterminate-animation(progress-primary-indeterminate-horizontal, progress-secondary-indeterminate-horizontal, translateX, scaleX);
+        @include progress-indeterminate-animation(progress-primary-indeterminate-vertical, progress-secondary-indeterminate-vertical, translateY, scaleY);
+        overflow: hidden;
+
+        .k-state-selected,
+        .k-progress-status-wrap {
+            display: none;
+        }
+    }
+
+    .k-progressbar.k-progressbar-horizontal.k-progressbar-indeterminate::before {
+
+        @include progress-indeterminate-common();
+        top: 0;
+        left: -150%;
+        animation: progress-primary-indeterminate-horizontal $progress-animation-timing;
+    }
+
+    .k-progressbar.k-progressbar-horizontal.k-progressbar-indeterminate::after {
+
+        @include progress-indeterminate-common();
+        top: 0;
+        left: -50%;
+        animation: progress-secondary-indeterminate-horizontal $progress-animation-timing;
+    }
+
+    .k-progressbar.k-progressbar-vertical.k-progressbar-indeterminate::before {
+
+        @include progress-indeterminate-common();
+        top: -150%;
+        left: 0;
+        animation: progress-primary-indeterminate-vertical $progress-animation-timing;
+    }
+
+    .k-progressbar.k-progressbar-vertical.k-progressbar-indeterminate::after {
+
+        @include progress-indeterminate-common();
+        top: -50%;
+        left: 0;
+        animation: progress-secondary-indeterminate-vertical $progress-animation-timing;
+    }
+}
diff --git a/tests/visual/progressbar.html b/tests/visual/progressbar.html
@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Progressbar</title>
+
+    <link rel="stylesheet" href="../../packages/default/dist/all.css" />
+    <link rel="stylesheet" href="assets/styles.css" />
+    <script src="assets/scripts.js"></script>
+
+    <style>
+        div[data-role='progressbar'] {
+            margin: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="test-area">
+        <div id="pb" data-role="progressbar" class="k-widget k-progressbar k-progressbar-horizontal">
+            <span class="k-progress-status-wrap">
+                <span class="k-progress-status">10</span>
+            </span>
+            <div class="k-state-selected" style="width: 10%;">
+                <span class="k-progress-status-wrap" style="width: 1000%;">
+                    <span class="k-progress-status">10</span>
+                </span>
+            </div>
+        </div>
+        <div id="pb-chunk" data-role="progressbar" class="k-widget k-progressbar k-progressbar-horizontal">
+            <ul class="k-reset">
+                <li class="k-item k-first k-state-selected" style="width: 20%;"></li>
+                <li class="k-item k-state-selected" style="width: 20%;"></li>
+                <li class="k-item k-state-default" style="width: 20%;"></li>
+                <li class="k-item k-state-default" style="width: 20%;"></li>
+                <li class="k-item k-state-default k-last" style="width: 20%;"></li>
+            </ul>
+        </div>
+        <br>
+        <div id="pbr" data-role="progressbar" class="k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse">
+            <span class="k-progress-status-wrap">
+                <span class="k-progress-status">10</span>
+            </span>
+            <div class="k-state-selected" style="width: 10%;">
+                <span class="k-progress-status-wrap" style="width: 1000%;">
+                    <span class="k-progress-status">10</span>
+                </span>
+            </div>
+        </div>
+        <div id="pbr-chunk" data-role="progressbar" class="k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse">
+            <ul class="k-reset">
+                <li class="k-item k-state-default k-first" style="width: 20%;"></li>
+                <li class="k-item k-state-default" style="width: 20%;"></li>
+                <li class="k-item k-state-default" style="width: 20%;"></li>
+                <li class="k-item k-state-selected" style="width: 20%;"></li>
+                <li class="k-item k-last k-state-selected" style="width: 20%;"></li>
+            </ul>
+        </div>
+        <hr>
+        <div id="pbv" data-role="progressbar" class="k-widget k-progressbar k-progressbar-vertical">
+            <span class="k-progress-status-wrap">
+                <span class="k-progress-status">20</span>
+            </span>
+            <div class="k-state-selected" style="height: 20%;">
+                <span class="k-progress-status-wrap" style="height: 500%;">
+                    <span class="k-progress-status">20</span>
+                </span>
+            </div>
+        </div>
+        <div id="pbv-chunk" data-role="progressbar" class="k-widget k-progressbar k-progressbar-vertical">
+            <ul class="k-reset">
+                <li class="k-item k-state-default k-first" style="height: 20%;"></li>
+                <li class="k-item k-state-default" style="height: 20%;"></li>
+                <li class="k-item k-state-selected" style="height: 20%;"></li>
+                <li class="k-item k-state-selected" style="height: 20%;"></li>
+                <li class="k-item k-last k-state-selected" style="height: 20%;"></li>
+            </ul>
+        </div>
+        <div id="progressbar" data-role="progressbar" class="k-widget k-progressbar k-progressbar-vertical k-progressbar-indeterminate">
+            <span class="k-progress-status-wrap">
+                <span class="k-progress-status">0</span>
+            </span>
+        </div>
+        <div id="pbvr" data-role="progressbar" class="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse">
+            <span class="k-progress-status-wrap">
+                <span class="k-progress-status">98</span>
+            </span>
+            <div class="k-state-selected" style="height: 98%;">
+                <span class="k-progress-status-wrap" style="height: 102.041%;">
+                    <span class="k-progress-status">98</span>
+                </span>
+            </div>
+        </div>
+        <div id="pbvr-chunk" data-role="progressbar" class="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse">
+            <ul class="k-reset">
+                <li class="k-item k-first k-state-selected" style="height: 20%;"></li>
+                <li class="k-item k-state-selected" style="height: 20%;"></li>
+                <li class="k-item k-state-selected" style="height: 20%;"></li>
+                <li class="k-item k-state-default" style="height: 20%;"></li>
+                <li class="k-item k-state-default k-last" style="height: 20%;"></li>
+            </ul>
+        </div>
+        <hr />
+        <div id="progressBar" data-role="progressbar" class="k-widget k-progressbar k-progressbar-horizontal k-progressbar-indeterminate">
+            <span class="k-progress-status-wrap">
+                <span class="k-progress-status">0</span>
+            </span>
+        </div>
+    </div>
+</body>
+
+</html>