From 20f45a0c2158746f63c47fa732e606021bb4d331 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6?= Date: Wed, 4 Jan 2023 18:51:38 +0100 Subject: [PATCH 1/2] fix(ProgressBar): Fix progress rounded corners MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- src/components/NcProgressBar/NcProgressBar.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/NcProgressBar/NcProgressBar.vue b/src/components/NcProgressBar/NcProgressBar.vue index 32dac9248f..46be5957fe 100644 --- a/src/components/NcProgressBar/NcProgressBar.vue +++ b/src/components/NcProgressBar/NcProgressBar.vue @@ -102,12 +102,15 @@ export default { .progress-bar { display: block; + height: var(--progress-bar-height); width: 100%; - background: var(--color-background-dark); + overflow: hidden; border: 0; padding: 0; - height: var(--progress-bar-height); + background: var(--color-background-dark); border-radius: calc(var(--progress-bar-height) / 2); + + // Browser specific rules &::-webkit-progress-bar { height: var(--progress-bar-height); } From a6d16ef1d0883579a3db37cef5ba5bdfc843f09f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6?= Date: Wed, 4 Jan 2023 19:04:29 +0100 Subject: [PATCH 2/2] fix(ProgressBar): Fix progress background MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- src/components/NcProgressBar/NcProgressBar.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/NcProgressBar/NcProgressBar.vue b/src/components/NcProgressBar/NcProgressBar.vue index 46be5957fe..6e616cf447 100644 --- a/src/components/NcProgressBar/NcProgressBar.vue +++ b/src/components/NcProgressBar/NcProgressBar.vue @@ -115,11 +115,11 @@ export default { height: var(--progress-bar-height); } &::-webkit-progress-value { - background: linear-gradient(40deg, var(--color-primary-element) 0%, var(--color-primary-element-light) 100%); + background: var(--gradient-primary-background); border-radius: calc(var(--progress-bar-height) / 2); } &::-moz-progress-bar { - background: linear-gradient(40deg, var(--color-primary-element) 0%, var(--color-primary-element-light) 100%); + background: var(--gradient-primary-background); border-radius: calc(var(--progress-bar-height) / 2); } &--error {