adjust layout styles

Author: micrum

src/app/stylesheets/_custom.scss

@@ -27,10 +27,6 @@ $left-sidenav-width: 110px;
 
 
 // DASHBOARD
-.todolist-content {
- height: 350px;
-}
-
 .messages {
   position: relative;
 
@@ -73,10 +69,22 @@ body {
   margin-left: 10px;
 }
 
+.page-content {
+  background-color: rgb(237, 237, 237);
+}
+
+.widget-content {
+  height: 300px;
+}
+
 
 // PANEL-WIDGET
 .panel-widget {
-  box-shadow: none;
+  background-color: white;
+
+  &-toolbar {
+    box-shadow: none;
+  }
 }
 
 .options {

src/app/views/main.html

@@ -41,7 +41,7 @@ <h1>AMD</h1>
         </md-button>
     </md-toolbar>
 
-    <md-content flex class="md-padding">
+    <md-content flex class="md-padding page-content">
         <div ui-view></div>
     </md-content>
 </div>

src/app/views/partials/checkboxes.html

@@ -1,4 +1,4 @@
-<md-content class="todolist-content md-padding" ng-controller="TodoController as vm">
+<md-content class="widget-content md-padding" ng-controller="TodoController as vm">
   <h3>{{vm.remaining()}} of {{vm.todos.length}} remaining</h3>
 
   <md-checkbox ng-repeat="todo in vm.todos" ng-model="todo.done">

src/app/views/partials/progress.html

@@ -6,7 +6,7 @@
     </md-radio-group>
   </md-content>
 
-  <md-content class="md-padding">
+  <md-content class="widget-content md-padding">
     <div layout-margin ng-repeat="data in vm.progressData">
       <div layout="row">
         <span>{{data.title}}</span>

src/components/directives/panelWidget.js

@@ -8,8 +8,8 @@ angular.module('app')
       transclude: true,
       scope: { title: '@', template: '@', options: '@' },
       template: '' +
-      '<section layout-margin class="md-whiteframe-z1">' +
-      '  <md-toolbar md-theme="custom" class="md-hue-1 panel-widget">' +
+      '<section layout-margin class="md-whiteframe-z1 panel-widget">' +
+      '  <md-toolbar md-theme="custom" class="md-hue-1 panel-widget-toolbar">' +
       '    <div class="md-toolbar-tools">' +
       '      <h3>{{title}}</h3>' +
       '      <span flex></span>' +