Restructure Sass files and folders for proper application Sass development

UI/WebServerResources/scss/components/progressCircular/progressCircular-theme.scss

@@ -0,0 +1,71 @@
+
+md-progress-circular.md-THEME_NAME-theme {
+  background-color: transparent;
+  .md-inner {
+    .md-gap {
+      border-top-color: '{{primary-color}}';
+      border-bottom-color: '{{primary-color}}';
+    }
+    .md-left, .md-right {
+      .md-half-circle {
+        border-top-color: '{{primary-color}}';
+      }
+    }
+    .md-right {
+      .md-half-circle {
+        border-right-color: '{{primary-color}}';
+      }
+    }
+    .md-left {
+      .md-half-circle {
+        border-left-color: '{{primary-color}}';
+      }
+    }
+  }
+  &.md-warn {
+    .md-inner {
+      .md-gap {
+        border-top-color: '{{warn-color}}';
+        border-bottom-color: '{{warn-color}}';
+      }
+      .md-left, .md-right {
+        .md-half-circle {
+          border-top-color: '{{warn-color}}';
+        }
+      }
+      .md-right {
+        .md-half-circle {
+          border-right-color: '{{warn-color}}';
+        }
+      }
+      .md-left {
+        .md-half-circle {
+          border-left-color: '{{warn-color}}';
+        }
+      }
+    }
+  }
+  &.md-accent {
+    .md-inner {
+      .md-gap {
+        border-top-color: '{{accent-color}}';
+        border-bottom-color: '{{accent-color}}';
+      }
+      .md-left, .md-right {
+        .md-half-circle {
+          border-top-color: '{{accent-color}}';
+        }
+      }
+      .md-right {
+        .md-half-circle {
+          border-right-color: '{{accent-color}}';
+        }
+      }
+      .md-left {
+        .md-half-circle {
+          border-left-color: '{{accent-color}}';
+        }
+      }
+    }
+  }
+}