Merge pull request #1194 from owncloud/01042021_themable-progressbar-…

…background

Fix progressbar background & release ODS 4.2.1

changelog/unreleased/dropzone-color → changelog/4.2.1_2021-04-01/bugfix-dropzone-color

@@ -1,5 +1,5 @@
-Change: Use primary text color for the dropzone
+Bugfix: Use primary text color for the dropzone
 
 We've changed the color of the dropzone hint message to the `oc-color` so that the text is visible even when brand and background colors are both dark.
 
-https://github.com/owncloud/owncloud-design-system/pull/1192
+https://github.com/owncloud/owncloud-design-system/pull/1192

changelog/4.2.1_2021-04-01/bugfix-progressbar-background

@@ -0,0 +1,6 @@
+Bugfix: Progressbar background color
+
+The progressbar background color wasn't theme-able and therefore inherited uikit-styles that provided undesired results on dark backgrounds. 
+It now uses the text-muted color for the background.
+
+https://github.com/owncloud/owncloud-design-system/pull/1192

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owncloud-design-system",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components",
   "author": "ownClouders",
   "main": "dist/system/system.js",

src/components/OcProgress.vue

@@ -68,6 +68,119 @@ export default {
 }
 </script>
 
+<style lang="scss">
+$progress-height: 15px !default;
+$progress-height-small: 5px !default;
+
+.oc-progress {
+  // Remove default style
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  // Set background color for progress container in Firefox, IE11 and Edge
+  background-color: var(--oc-input-border);
+  // Remove default style
+  border: 0;
+  display: block;
+  height: $progress-height;
+  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+
+  // Remove animated circles for indeterminate state in IE11 and Edge
+  &:indeterminate {
+    color: transparent;
+  }
+
+  &::-webkit-progress-bar {
+    background-color: var(--oc-input-border);
+  }
+
+  &::-moz-progress-bar {
+    background-color: var(--oc-input-border);
+  }
+
+  // Remove progress bar for indeterminate state in Firefox
+  &:indeterminate::-moz-progress-bar {
+    width: 0;
+  }
+
+  &::-webkit-progress-value {
+    background-color: var(--oc-variation-passive);
+    transition: width $transition-duration-short ease;
+  }
+
+  &::-ms-fill {
+    background-color: var(--oc-variation-passive);
+    // Remove right border in IE11 and Edge
+    border: 0;
+    transition: width $transition-duration-short ease;
+  }
+
+  &-small {
+    height: $progress-height-small;
+  }
+
+  &-primary {
+    &::-webkit-progress-value {
+      background-color: var(--oc-variation-primary);
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--oc-variation-primary);
+    }
+
+    &::-ms-fill {
+      background-color: var(--oc-variation-primary);
+    }
+  }
+
+  &-success {
+    &::-webkit-progress-value {
+      background-color: var(--oc-variation-success);
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--oc-variation-success);
+    }
+
+    &::-ms-fill {
+      background-color: var(--oc-variation-success);
+    }
+  }
+
+  &-warning {
+    &::-webkit-progress-value {
+      background-color: var(--oc-variation-warning);
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--oc-variation-warning);
+    }
+
+    &::-ms-fill {
+      background-color: var(--oc-variation-warning);
+    }
+  }
+
+  &-danger {
+    &::-webkit-progress-value {
+      background-color: var(--oc-variation-danger);
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--oc-variation-danger);
+    }
+
+    &::-ms-fill {
+      background-color: var(--oc-variation-danger);
+    }
+  }
+}
+</style>
+
 <docs>
 Show progress to the users.
 

src/styles/styles.scss

@@ -28,7 +28,6 @@
 @import 'theme/oc-icon';
 @import 'theme/oc-loader';
 @import 'theme/oc-modal';
-@import 'theme/oc-progress';
 @import 'theme/oc-progress-pie';
 @import 'theme/oc-public-share-icon';
 @import 'theme/oc-radio';