diff options
Diffstat (limited to 'templates/@theme-base/pm-styles/_pm-circlebar.scss')
| -rw-r--r-- | templates/@theme-base/pm-styles/_pm-circlebar.scss | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/templates/@theme-base/pm-styles/_pm-circlebar.scss b/templates/@theme-base/pm-styles/_pm-circlebar.scss new file mode 100644 index 0000000..8cb6629 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-circlebar.scss @@ -0,0 +1,41 @@ +$stroke-width: 3px !default; // be careful to udpate SVG if you want to update this value + +// this component is used for VPN +// and for the moment on Angular/React sidebar +.circle-chart__background { + stroke: var(--color-main-area, $pm-global-grey); + opacity: .2; + stroke-width: $stroke-width; + fill: transparent; +} +.circle-chart__background--bigger .circle-chart__background { + stroke: var(--bgcolor-input, rgba($pm-global-grey, .2)); + opacity: .4; +} + +.circle-chart__circle { + stroke: $pm-global-success; + stroke-width: $stroke-width; + fill: transparent; + animation: circle-chart-fill 2s reverse; + transform: rotate(-90deg); + transform-origin: center; +} +.circle-bar--medium .circle-chart__circle { + stroke: $pm-global-attention; +} +.circle-bar--full .circle-chart__circle { + stroke: $pm-global-warning; +} +.circle-chart__percent { + fill: var(--color-main-area, rgba($pm-global-grey, .5) ); +} + +.circle-chart-info { + color: var(--color-standard-text, $pm-global-light); +} + + +@keyframes circle-chart-fill { + to { stroke-dasharray: 0 100; } +} |