feat(progressbar): add circular progressbar styles

telerik · Jul 25, 2022 · 2b30b41 · 2b30b41
1 parent 8f608b8
commit 2b30b41
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 25 deletions.
diff --git a/packages/bootstrap/scss/progressbar/_variables.scss b/packages/bootstrap/scss/progressbar/_variables.scss
@@ -23,3 +23,7 @@ $progressbar-indeterminate-border: $progressbar-border !default;
 $progressbar-indeterminate-gradient: null !default;
 
 $progressbar-chunk-border: $body-bg !default;
+
+// Circular Progressbar
+$kendo-circular-progressbar-arc-stroke: $primary !default;
+$kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
diff --git a/packages/classic/scss/progressbar/_variables.scss b/packages/classic/scss/progressbar/_variables.scss
@@ -23,3 +23,7 @@ $progressbar-indeterminate-border: $progressbar-border !default;
 $progressbar-indeterminate-gradient: null !default;
 
 $progressbar-chunk-border: $body-bg !default;
+
+// Circular Progressbar
+$kendo-circular-progressbar-arc-stroke: $primary !default;
+$kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
diff --git a/packages/default/scss/dataviz/_theme.scss b/packages/default/scss/dataviz/_theme.scss
@@ -115,8 +115,6 @@
 }
 
 
-
-
 @include exports("dataviz/treemap/theme") {
 
     // Treemap

diff --git a/packages/default/scss/progressbar/_layout.scss b/packages/default/scss/progressbar/_layout.scss
@@ -264,3 +264,46 @@
     }
 
 }
+
+@include exports("circular-progressbar/layout") {
+
+    .k-circular-progressbar {
+        display: inline-block;
+        text-align: left;
+        position: relative;
+    }
+
+    .k-circular-progressbar-surface {
+        height: 100%;
+
+        & > div {
+            width: 100%;
+            height: 100%;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .k-circular-progressbar-scale {
+        fill: none;
+    }
+
+    .k-circular-progressbar-arc {
+        transform-box: fill-box;
+        transform-origin: center center;
+        transform: rotate(-90deg);
+        stroke-linecap: round;
+        fill: none;
+    }
+
+    .k-circular-progressbar-label {
+        position: absolute;
+        text-align: center;
+        padding: 0;
+        margin: 0;
+    }
+
+}
diff --git a/packages/default/scss/progressbar/_theme.scss b/packages/default/scss/progressbar/_theme.scss
@@ -26,3 +26,16 @@
     }
 
 }
+
+@include exports("circular-progressbar/theme") {
+
+    .k-circular-progressbar-scale {
+        stroke: $kendo-circular-progressbar-scale-stroke;
+    }
+
+    .k-circular-progressbar-arc {
+        stroke: $kendo-circular-progressbar-arc-stroke;
+        transition: stroke .5s ease;
+    }
+
+}
diff --git a/packages/default/scss/progressbar/_variables.scss b/packages/default/scss/progressbar/_variables.scss
@@ -23,3 +23,7 @@ $progressbar-indeterminate-border: $progressbar-border !default;
 $progressbar-indeterminate-gradient: null !default;
 
 $progressbar-chunk-border: $body-bg !default;
+
+// Circular Progressbar
+$kendo-circular-progressbar-arc-stroke: $primary !default;
+$kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
diff --git a/packages/material/scss/progressbar/_theme.scss b/packages/material/scss/progressbar/_theme.scss
@@ -1,3 +1,5 @@
+@import "~@progress/kendo-theme-default/scss/progressbar/_theme.scss";
+
 @function _translate($direction, $value) {
     @return if($direction == horizontal, translateX($value), translateY($value));
 }
@@ -45,31 +47,11 @@
     }
 }
 
-@include exports("progressbar/theme") {
+@include exports("progressbar/theme/material") {
     @include progressbar-indeterminate-animation(horizontal);
     @include progressbar-indeterminate-animation(vertical);
 
-    // Theme
-    .k-progressbar {
-        @include fill(
-            $progressbar-text,
-            $progressbar-bg,
-            $progressbar-border,
-            $progressbar-gradient
-        );
-
-        .k-state-selected,
-        .k-selected {
-            @include fill(
-                $progressbar-fill-text,
-                $progressbar-fill-bg,
-                $progressbar-fill-border,
-                $progressbar-fill-gradient
-            );
-        }
-
-        .k-item {
-            border-color: $progressbar-chunk-border;
-        }
+    .k-progressbar-indeterminate {
+        background-image: none;
     }
 }
diff --git a/packages/material/scss/progressbar/_variables.scss b/packages/material/scss/progressbar/_variables.scss
@@ -23,3 +23,7 @@ $progressbar-indeterminate-border: $progressbar-border !default;
 $progressbar-indeterminate-gradient: null !default;
 
 $progressbar-chunk-border: $component-bg !default;
+
+// Circular Progressbar
+$kendo-circular-progressbar-arc-stroke: $primary !default;
+$kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;