Skip to content

Commit 533be6e

Browse files
micrummicrum
committed
implement theme styles
1 parent a068cee commit 533be6e

File tree

6 files changed

+61
-19
lines changed

6 files changed

+61
-19
lines changed

‎src/app/index.js‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,10 @@ angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies', 'ngTouch',
4343

4444
$mdThemingProvider
4545
.theme('default')
46-
.primaryPalette('teal')
47-
.accentPalette('orange');
46+
.primaryPalette('grey', {
47+
'default': '600'
48+
})
49+
.accentPalette('defaultPrimary');
4850

4951
$mdThemingProvider.theme('dark', 'default')
5052
.primaryPalette('orange')
@@ -56,6 +58,28 @@ angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies', 'ngTouch',
5658
$mdThemingProvider.theme('red', 'default')
5759
.primaryPalette('red');
5860

61+
$mdThemingProvider.definePalette('defaultPrimary', {
62+
'50': '#E75753',
63+
'100': '#E75753',
64+
'200': '#E75753',
65+
'300': '#E75753',
66+
'400': '#E75753',
67+
'500': '#E75753',
68+
'600': '#E75753',
69+
'700': '#E75753',
70+
'800': '#E75753',
71+
'900': '#E75753',
72+
'A100': '#E75753',
73+
'A200': '#E75753',
74+
'A400': '#E75753',
75+
'A700': '#E75753',
76+
'contrastDefaultColor': 'light', // whether, by default, text (contrast)
77+
// on this palette should be dark or light
78+
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
79+
'200', '300', '400', 'A100'],
80+
'contrastLightColors': undefined // could also specify this if default was 'dark'
81+
});
82+
5983
$mdIconProvider
6084
.defaultIconSet('assets/images/icons.svg', 128)
6185
.icon('menu', 'assets/images/menu.svg', 24)
@@ -71,7 +95,7 @@ angular.module('angularMaterialAdmin', ['ngAnimate', 'ngCookies', 'ngTouch',
7195
scope: { title: '@', template: '@', options: '@' },
7296
template: '' +
7397
'<section layout-margin class="md-whiteframe-z1">' +
74-
' <md-toolbar md-theme="grey" class="md-hue-1">' +
98+
' <md-toolbar md-theme="white" class="panel-widget">' +
7599
' <div class="md-toolbar-tools">' +
76100
' <h3>{{title}}</h3>' +
77101
' <span flex></span>' +

‎src/app/stylesheets/_custom.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
$blue: #2af5ff;
33
$orange: #ffdb2b;
44
$green: #269f19;
5+
$main-bg: #ECECEC;
6+
$text-color: #7A7A7A;
57

68
.blue {
79
background-color: $blue;
@@ -25,10 +27,14 @@ $green: #269f19;
2527

2628

2729
// VARIABLES
28-
$left-sidenav-width: 150px;
30+
$left-sidenav-width: 120px;
2931

3032

31-
// panel-widget options animation
33+
// PANEL-WIDGET
34+
.panel-widget {
35+
box-shadow: none;
36+
}
37+
3238
.options {
3339
-webkit-transition:all linear 0.5s;
3440
transition:all linear 0.5s;
@@ -63,3 +69,13 @@ md-sidenav.md-locked-open.md-sidenav-left {
6369
min-width: $left-sidenav-width;
6470
max-width: $left-sidenav-width;
6571
}
72+
73+
74+
// LAYOUT
75+
body {
76+
color: $text-color;
77+
}
78+
79+
.sidenav-button {
80+
text-transform: none;
81+
}

‎src/app/views/dashboard.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@ <h2 layout-padding>Memory load</h2>
3939
</md-grid-list>
4040

4141
<div layout-gt-md="row">
42-
<panel-widget flex-gt-md="50" title="Information Panel" template="app/views/partials/infoPanel.html"></panel-widget>
43-
<panel-widget flex title="Autocomplete Input" template="app/views/partials/autocomplete.html" options="true"></panel-widget>
42+
<panel-widget flex-gt-md="50" title="Information Panel" template="app/views/partials/infoPanel.html" theme="white"></panel-widget>
43+
<panel-widget flex title="Autocomplete Input" template="app/views/partials/autocomplete.html" options="true" theme="white"></panel-widget>
4444
</div>
4545

4646
<div layout-gt-md="row">
47-
<panel-widget flex-gt-md="50" title="Performance" template="app/views/partials/progress.html" options="true"></panel-widget>
48-
<panel-widget flex title="TODO list" template="app/views/partials/checkboxes.html"></panel-widget>
47+
<panel-widget flex-gt-md="50" title="Performance" template="app/views/partials/progress.html" options="true" theme="white"></panel-widget>
48+
<panel-widget flex title="TODO list" template="app/views/partials/checkboxes.html" theme="white"></panel-widget>
4949
</div>

‎src/app/views/main.html‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id="left"
22
class="md-whiteframe-z2 md-sidenav-left">
3-
<md-toolbar class="md-accent">
4-
<h1 class="md-toolbar-tools">AMD</h1>
3+
<md-toolbar md-theme="white">
4+
<h1 class="md-toolbar-tools" layout="row" layout-align="center center">AMD</h1>
55
</md-toolbar>
66
<md-list>
77
<md-item ng-repeat="item in vm.menuItems">
88
<md-item-content layout="row">
99
<md-button layout="column" layout-align="center center" flex ng-click="vm.selectItem(item)"
10-
ui-sref-active="md-accent" ui-sref="{{item.sref}}">
10+
ui-sref-active="md-accent" ui-sref="{{item.sref}}" class="sidenav-button">
1111
<div hide-sm hide-md class="md-tile-content">
1212
<md-icon md-svg-icon="{{item.icon}}"></md-icon>
1313
</div>
@@ -16,6 +16,7 @@ <h1 class="md-toolbar-tools">AMD</h1>
1616
</div>
1717
</md-button>
1818
</md-item-content>
19+
<md-divider></md-divider>
1920
</md-item>
2021

2122
<md-divider hide-gt-md></md-divider>
@@ -36,8 +37,6 @@ <h1 class="md-toolbar-tools">AMD</h1>
3637
<md-button hide-gt-sm ng-click="vm.toggleItemsList()" aria-label="Show Menu">
3738
<md-icon md-svg-icon="menu"></md-icon>
3839
</md-button>
39-
40-
<h2 class="md-toolbar-tools">{{vm.title}}</h2>
4140
</md-toolbar>
4241

4342
<md-content flex class="md-padding">
@@ -57,5 +56,12 @@ <h2 class="md-toolbar-tools">{{vm.title}}</h2>
5756
</md-select>
5857
</md-toolbar>
5958

60-
<panel-widget flex-gt-md="60" title="Messages" template="app/views/partials/messages.html"></panel-widget>
59+
<section>
60+
<md-toolbar md-theme="grey" class="md-hue-1">
61+
<div class="md-toolbar-tools">
62+
<h3>Messages</h3>
63+
</div>
64+
</md-toolbar>
65+
<div ng-include src="'app/views/partials/messages.html'"/>
66+
</section>
6167
</md-sidenav>

‎src/app/views/partials/autocomplete.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
</md-radio-group>
77
</md-content>
88

9-
<md-divider></md-divider>
10-
119
<md-content class="md-padding">
1210
<md-autocomplete placeholder="Search country"
1311
md-selected-item="vm.selectedCountry"

‎src/app/views/partials/progress.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
</md-radio-group>
77
</md-content>
88

9-
<md-divider></md-divider>
10-
119
<md-content class="md-padding">
1210
<div layout-margin ng-repeat="data in vm.progressData">
1311
<div layout="row">

0 commit comments

Comments
 (0)