From 2b30b415e3cff46cd0e577e374fc610784f5d3e1 Mon Sep 17 00:00:00 2001 From: Stoyan Paskalev Date: Mon, 25 Jul 2022 11:35:32 +0300 Subject: [PATCH] feat(progressbar): add circular progressbar styles --- .../scss/progressbar/_variables.scss | 4 ++ .../classic/scss/progressbar/_variables.scss | 4 ++ packages/default/scss/dataviz/_theme.scss | 2 - .../default/scss/progressbar/_layout.scss | 43 +++++++++++++++++++ packages/default/scss/progressbar/_theme.scss | 13 ++++++ .../default/scss/progressbar/_variables.scss | 4 ++ .../material/scss/progressbar/_theme.scss | 28 +++--------- .../material/scss/progressbar/_variables.scss | 4 ++ 8 files changed, 77 insertions(+), 25 deletions(-) diff --git a/packages/bootstrap/scss/progressbar/_variables.scss b/packages/bootstrap/scss/progressbar/_variables.scss index ecd1c6bd8ba..375918c1952 100644 --- 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 index ffc7249539a..2e91d1b1cf4 100644 --- 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 index 0ec56c4b962..f077a62656a 100644 --- 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 index 10de1d176fc..139aae37a51 100644 --- 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 index 99cb36b5714..d52aaa93b9f 100644 --- 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 index ffc7249539a..2e91d1b1cf4 100644 --- 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 index 1c89ca97121..9d8b0be4a72 100644 --- 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 index 45e73eb43fd..7cad26e8667 100644 --- 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;