Restructure Sass files and folders for proper application Sass development

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

@@ -0,0 +1,4 @@
+md-backdrop.md-opaque.md-THEME_NAME-theme {
+  background-color: '{{foreground-4-0.5}}';
+  position: absolute
+}

UI/WebServerResources/scss/components/backdrop/backdrop.js

@@ -0,0 +1,31 @@
+(function() {
+'use strict';
+
+/*
+ * @ngdoc module
+ * @name material.components.backdrop
+ * @description Backdrop
+ */
+
+/**
+ * @ngdoc directive
+ * @name mdBackdrop
+ * @module material.components.backdrop
+ *
+ * @restrict E
+ *
+ * @description
+ * `<md-backdrop>` is a backdrop element used by other coponents, such as dialog and bottom sheet.
+ * Apply class `opaque` to make the backdrop use the theme backdrop color.
+ *
+ */
+
+angular.module('material.components.backdrop', [
+  'material.core'
+])
+  .directive('mdBackdrop', BackdropDirective);
+
+function BackdropDirective($mdTheming) {
+  return $mdTheming;
+}
+})();

UI/WebServerResources/scss/components/backdrop/backdrop.scss

@@ -0,0 +1,36 @@
+md-backdrop {
+  z-index: $z-index-backdrop;
+  &.md-dialog-backdrop {
+    z-index: $z-index-dialog - 1;
+  }
+  &.md-bottom-sheet-backdrop {
+    z-index: $z-index-bottom-sheet - 1;
+  }
+  &.md-sidenav-backdrop {
+    z-index: $z-index-sidenav - 1;
+  }
+
+  background-color: rgba(0,0,0,0);
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  &.ng-enter {
+    animation: $swift-ease-out-timing-function mdBackdropFadeIn 0.5s both;
+  }
+  &.ng-leave {
+    animation: $swift-ease-in-timing-function mdBackdropFadeOut 0.2s both;
+  }
+}
+
+@keyframes mdBackdropFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes mdBackdropFadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}