Restructure Sass files and folders for proper application Sass development

UI/WebServerResources/scss/components/toast/demoBasicUsage/index.html

@@ -0,0 +1,34 @@
+<div ng-controller="AppCtrl" layout-fill layout="column" class="inset">
+    <p>Toast can be dismissed with a swipe, a timer, or a button.</p>
+
+    <div layout="row" layout-sm="column" layout-align="space-around">
+      <div style="width:50px"></div>
+      <md-button ng-click="showCustomToast()">
+        Show Custom
+      </md-button>
+      <md-button ng-click="showSimpleToast()">
+        Show Simple
+      </md-button>
+      <md-button class="md-raised" ng-click="showActionToast()">
+        Show With Action
+      </md-button>
+      <div style="width:50px"></div>
+    </div>
+
+    <div>
+      <br/>
+      <b>Toast Position: "{{getToastPosition()}}"</b>
+      <br/>
+      <md-checkbox ng-repeat="(name, isSelected) in toastPosition"
+        aria-label="{{name}}"
+        ng-model="toastPosition[name]"> 
+        {{name}}
+      </md-checkbox>
+      <md-button class="md-primary md-fab md-fab-bottom-right">
+        FAB
+      </md-button>
+      <md-button class="md-primary md-fab md-fab-top-right" md-theme="green">
+        FAB
+      </md-button>
+    </div>
+</div>

UI/WebServerResources/scss/components/toast/demoBasicUsage/script.js

@@ -0,0 +1,55 @@
+
+angular.module('toastDemo1', ['ngMaterial'])
+
+.controller('AppCtrl', function($scope, $mdToast, $animate) {
+
+  $scope.toastPosition = {
+    bottom: false,
+    top: true,
+    left: false,
+    right: true
+  };
+
+  $scope.getToastPosition = function() {
+    return Object.keys($scope.toastPosition)
+      .filter(function(pos) { return $scope.toastPosition[pos]; })
+      .join(' ');
+  };
+
+  $scope.showCustomToast = function() {
+    $mdToast.show({
+      controller: 'ToastCtrl',
+      templateUrl: 'toast-template.html',
+      hideDelay: 6000,
+      position: $scope.getToastPosition()
+    });
+  };
+
+  $scope.showSimpleToast = function() {
+    $mdToast.show(
+      $mdToast.simple()
+        .content('Simple Toast!')
+        .position($scope.getToastPosition())
+        .hideDelay(0)
+    );
+  };
+
+  $scope.showActionToast = function() {
+    var toast = $mdToast.simple()
+          .content('Action Toast!')
+          .action('OK')
+          .highlightAction(false)
+          .position($scope.getToastPosition());
+
+    $mdToast.show(toast).then(function() {
+      alert('You clicked \'OK\'.');
+    });
+  };
+
+})
+
+.controller('ToastCtrl', function($scope, $mdToast) {
+  $scope.closeToast = function() {
+    $mdToast.hide();
+  };
+});

UI/WebServerResources/scss/components/toast/demoBasicUsage/toast-template.html

@@ -0,0 +1,6 @@
+<md-toast>
+  <span flex>Custom toast!</span>
+  <md-button ng-click="closeToast()">
+    Close
+  </md-button>
+</md-toast>