Merge pull request #3613 from nextcloud/fix/progress

fix(ProgressBar): Fix progress rounded corners
nextcloud-libraries · Jan 5, 2023 · 438cf17 · 438cf17
2 parents 6eb23ff + a6d16ef
commit 438cf17
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/components/NcProgressBar/NcProgressBar.vue b/src/components/NcProgressBar/NcProgressBar.vue
@@ -102,21 +102,24 @@ 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);
  }
  &::-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 {