Restructure Sass files and folders for proper application Sass development

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

@@ -0,0 +1,33 @@
+
+<form ng-submit="submit()" ng-controller="AppCtrl" >
+    <p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
+
+    <md-radio-group ng-model="data.group1">
+
+      <md-radio-button value="Apple" aria-label="Label 1">Apple</md-radio-button>
+      <md-radio-button value="Banana"> Banana </md-radio-button>
+      <md-radio-button value="Mango" aria-label="Label 3">Mango</md-radio-button>
+
+    </md-radio-group>
+
+    <hr />
+
+    <p>Selected Value: <span class="radioValue">{{ data.group2 }}</span></p>
+
+    <md-radio-group ng-model="data.group2">
+
+        <md-radio-button ng-repeat="d in radioData"
+                         ng-value="d.value"
+                         ng-disabled=" d.isDisabled "
+                         aria-label="{{ d.label }}">
+            {{ d.label }}
+        </md-radio-button>
+
+    </md-radio-group>
+
+    <p>
+      <md-button ng-click="addItem()">Add</md-button>
+      <md-button ng-click="removeItem()">Remove</md-button>
+    </p>
+
+</form>

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

@@ -0,0 +1,31 @@
+
+angular.module('radioDemo1', ['ngMaterial'])
+
+.controller('AppCtrl', function($scope) {
+
+  $scope.data = {
+    group1 : 'Banana',
+    group2 : '2'
+  };
+
+  $scope.radioData = [
+    { label: '1', value: 1 },
+    { label: '2', value: 2 },
+    { label: '3', value: '3', isDisabled: true },
+    { label: '4', value: '4' }
+  ];
+
+  $scope.submit = function() {
+    alert('submit');
+  };
+
+  $scope.addItem = function() {
+    var r = Math.ceil(Math.random() * 1000);
+    $scope.radioData.push({ label: r, value: r });
+  };
+
+  $scope.removeItem = function() {
+    $scope.radioData.pop();
+  };
+
+});

UI/WebServerResources/scss/components/radioButton/demoBasicUsage/style.css

@@ -0,0 +1,29 @@
+
+body {
+  padding: 20px;
+}
+
+hr {
+  margin-left:-20px; opacity:0.3;
+}
+
+md-radio-group {
+  width:150px;
+}
+
+p:last-child {
+  padding-bottom: 50px;
+}
+
+
+[ng-controller] {
+  padding-left: 20px;
+}
+
+.radioValue {
+  margin-left: 5px;
+  color: #0f9d58;
+  font-weight: bold;
+  padding:5px;
+
+}