Restructure Sass files and folders for proper application Sass development

This commit is contained in:
iRouge
2015-01-21 11:18:53 -05:00
parent 6c6c8457b2
commit 039028db1d
207 changed files with 54 additions and 285 deletions
@@ -0,0 +1,25 @@
<div ng-controller="AppCtrl" layout="column" layout-margin style="padding:25px;">
<h4 style="margin-top:10px">Determinate</h4>
<p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
<div layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>
</div>
<h4>Indeterminate</h4>
<p>For operations where the user is asked to wait a moment while something finishes up, and its not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
<div layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>
<h4>Theming</h4>
<div layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular class="md-hue-2" md-mode="indeterminate"></md-progress-circular>
<md-progress-circular class="md-accent" md-mode="indeterminate"></md-progress-circular>
<md-progress-circular class="md-accent md-hue-1" md-mode="indeterminate"></md-progress-circular>
<md-progress-circular class="md-warn md-hue-3" md-mode="indeterminate"></md-progress-circular>
<md-progress-circular class="md-warn" md-mode="indeterminate"></md-progress-circular>
</div>
</div>
@@ -0,0 +1,14 @@
angular.module('progressCircularDemo1', ['ngMaterial'])
.controller('AppCtrl', ['$scope', '$interval',
function($scope, $interval) {
$scope.mode = 'query';
$scope.determinateValue = 30;
$interval(function() {
$scope.determinateValue += 1;
if ($scope.determinateValue > 100) {
$scope.determinateValue = 30;
}
}, 100, 0, true);
}
]);
@@ -0,0 +1,11 @@
body {
padding: 20px;
}
h4 {
margin: 10px 0;
}
md-progress-circular {
margin-bottom:20px;
}