fix(progressbar): use repeating gradient for indeterminate state

telerik · Aug 20, 2018 · d16368c · d16368c
1 parent 0612e5c
commit d16368c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 77 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -496,18 +496,6 @@ $window-titlebar-bg: $modal-header-bg !default;
 $window-titlebar-border: $modal-header-border-color !default;
 
 
-// Progress
-$progress-bg: $progress-bg !default;
-$progress-text: $progress-color !default;
-$progress-border: transparent !default;
-$progress-gradient: false !default;
-
-$progress-fill-bg:  $progress-bar-bg !default;
-$progress-fill-text: $progress-bar-color !default;
-$progress-fill-border: transparent !default;
-$progress-fill-gradient: false !default;
-
-
 // Chart
 /// The color of the first series.
 /// @group charts
@@ -665,8 +653,9 @@ $tooltip-color: contrast-wcag($tooltip-bg) !default;
 
 // Progressbar
 $progressbar-height: $progress-height !default;
+$progressbar-animation-timing: $progress-bar-animation-timing !default;
 
-$progressbar-bg: $progressbar-bg !default;
+$progressbar-bg: $progress-bg !default;
 $progressbar-text: $progress-color !default;
 $progressbar-border: transparent !default;
 $progressbar-gradient: false !default;

diff --git a/packages/bootstrap/scss/progressbar/_theme.scss b/packages/bootstrap/scss/progressbar/_theme.scss
@@ -1,45 +1 @@
-@mixin gradient-striped($color: rgba(255, 255, 255, .15), $angle: 45deg) {
-    background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
-}
-@include exports("progressbar/theme") {
-
-    @keyframes progress-bar-stripes {
-        from { background-position: $progress-height 0; }
-        to { background-position: 0 0; }
-    }
-
-    // Theme
-    .k-progressbar {
-        color: $progress-text;
-        background-color: $progress-bg;
-
-        // Status
-        .k-progress-status-wrap {}
-
-        // Progress
-        > .k-state-selected {}
-        .k-state-selected {
-            color: $progress-fill-text;
-            background-color: $progress-fill-bg;
-        }
-
-        // Chunks
-        > ul {}
-
-        .k-item {
-            border-color: $body-bg;
-        }
-    }
-
-    .k-progressbar-indeterminate {
-        @include gradient-striped();
-        background-color: $progress-fill-bg;
-        background-size: $progress-height $progress-height;
-        animation: progress-bar-stripes $progress-bar-animation-timing;
-
-        .k-progress-status-wrap,
-        .k-state-selected {
-            display: none;
-        }
-    }
-}
+@import "~@progress/kendo-theme-default/scss/progressbar/theme";
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -578,6 +578,7 @@ $tooltip-color: contrast-wcag($tooltip-bg) !default;
 
 // Progressbar
 $progressbar-height: 22px !default;
+$progressbar-animation-timing: 1s linear infinite !default;
 
 $progressbar-bg: $base-bg !default;
 $progressbar-text: $base-text !default;

diff --git a/packages/default/scss/progressbar/_theme.scss b/packages/default/scss/progressbar/_theme.scss
@@ -1,27 +1,15 @@
 @include exports('progressbar/theme') {
 
-    $progressbar-bg: $base-bg !default;
-    $progressbar-border: $base-border !default;
-    $progressbar-chunk-border: $bg-color !default;
-    $progressbar-selected-bg: $accent !default;
-    $progressbar-selected-border: darken( $progressbar-selected-bg, 4%) !default;
-    $progressbar-selected-gradient: rgba( adjust-hue( $progressbar-selected-bg, 14), 0 ), rgba( adjust-hue( $progressbar-selected-bg, 14), .2 ) !default;
+    @keyframes progressbar-indeterminate-animation {
+        from { background-position: 0 0; }
+        to { background-position: $progressbar-height 0; }
+    }
 
     .k-progressbar {
-        background-color: $progressbar-bg;
-        border-color: $progressbar-border;
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
 
         .k-state-selected {
-            border-color: $progressbar-selected-border;
-            background-color: $progressbar-selected-bg;
-            @include linear-gradient( $progressbar-selected-gradient );
+            @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
         }
 
         .k-item {
@@ -30,11 +18,15 @@
     }
 
     .k-progressbar-indeterminate {
-        background: url(map-get($data-uris, 'indeterminate.gif'));
+        @include fill( $progressbar-indeterminate-text, $progressbar-indeterminate-bg, $progressbar-indeterminate-border );
+        @include striped-gradient( shade($progressbar-indeterminate-bg) );
+        background-size: $progressbar-height $progressbar-height;
+        animation: progressbar-indeterminate-animation $progressbar-animation-timing;
 
         .k-progress-status-wrap,
         .k-state-selected {
             display: none;
         }
     }
+
 }