diff --git a/src/components/statistics/progress-bars/ProgressBars.vue b/src/components/statistics/progress-bars/ProgressBars.vue index aeb3407e7..45d99c97f 100644 --- a/src/components/statistics/progress-bars/ProgressBars.vue +++ b/src/components/statistics/progress-bars/ProgressBars.vue @@ -2,131 +2,24 @@
- -
-
- {{'progressBars.basic' | translate}} -
- - -
-
-
- {{'progressBars.thin' | translate}} -
- - -
-
-
- {{'progressBars.thick' | translate}} -
- - -
-
-
- {{'progressBars.basicVertical' | translate}} -
-
- -
-
-
-
- {{'progressBars.thinVertical' | translate}} -
- - -
-
-
- {{'progressBars.circle' | translate}} -
- -
-
-
-
+
- -
-
- {{'progressBars.basic' | translate}} -
- - -
-
-
- {{'progressBars.thin' | translate}} -
- - -
-
-
- {{'progressBars.thick' | translate}} -
- - -
-
-
- {{'progressBars.basicVertical' | translate}} -
-
- -
-
-
-
- {{'progressBars.thinVertical' | translate}} -
- - -
-
-
- {{'progressBars.circle' | translate}} -
- -
-
-
-
+
@@ -136,6 +29,8 @@ @import "~bootstrap/scss/variables"; @import "../../../sass/mixins"; + // HACK Shouldn't be here. + .progress-bars { .vuestic-progress-bar { .progress.thick { diff --git a/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue b/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue new file mode 100644 index 000000000..69df3fc74 --- /dev/null +++ b/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue @@ -0,0 +1,57 @@ + + + diff --git a/src/components/statistics/progress-bars/Widgets/StandardBars.vue b/src/components/statistics/progress-bars/Widgets/StandardBars.vue new file mode 100644 index 000000000..b3ef13a5b --- /dev/null +++ b/src/components/statistics/progress-bars/Widgets/StandardBars.vue @@ -0,0 +1,75 @@ + + + diff --git a/src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/HorizontalProgressBar.vue b/src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/HorizontalProgressBar.vue index 79e42b723..ea8224e1f 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/HorizontalProgressBar.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/HorizontalProgressBar.vue @@ -29,6 +29,11 @@ let progressColor = color(this.color) let current = progressColor setInterval(() => { + if (this.animatedValue === 100) { + current = progressColor + progressBar.style.backgroundColor = current() + return + } if (progressColor(lightness(30))() !== current()) { current = progressColor(lightness(30)) } else { diff --git a/src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/VerticalProgressBar.vue b/src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/VerticalProgressBar.vue index f08552009..712ab2be6 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/VerticalProgressBar.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-progress-bar/progress-types/VerticalProgressBar.vue @@ -22,10 +22,16 @@ 'isActive' ], mounted () { + // Starts blinking let progressBar = this.$refs.progressBar let progressColor = color(this.color) let current = progressColor setInterval(() => { + if (this.animatedValue === 100) { + current = progressColor + progressBar.style.backgroundColor = current() + return + } if (progressColor(lightness(30))() !== current()) { current = progressColor(lightness(30)) } else { @@ -56,8 +62,8 @@ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ - align-items: flex-start; - -webkit-align-items: flex-start; /* Safari 7.0+ */ + align-items: flex-end; + -webkit-align-items: flex-end; /* Safari 7.0+ */ } .value{