├── README.md
├── app
    ├── init.js
    ├── main.js
    ├── menu.js
    └── route.js
├── bower.json
├── images
    ├── dog.png
    └── user.jpg
├── index.html
├── pages
    ├── 404.html
    ├── charts.html
    ├── dashboard.html
    ├── elements-buttons.html
    ├── elements-input.html
    └── todo.html
└── styles.css


/README.md:
--------------------------------------------------------------------------------
 1 | # mdlAdmin-lite
 2 | Free Starter Admin Template built on Google Material Design Lite
 3 | 
 4 | This theme was built on top of [http://www.getmdl.io/templates/dashboard/index.html](http://www.getmdl.io/templates/dashboard/index.html)
 5 | 
 6 | ### Features
 7 | - Built using latest Google's MDL library - [https://getmdl.io](https://getmdl.io). 
 8 | - Dynamic content loading
 9 | - Dynamic urls (using Grapnel)
10 | - Multi Level Menus
11 | - Google Material Charts
12 | - jQuery Ready
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/app/init.js:
--------------------------------------------------------------------------------
1 | //Heart of the app. 
2 | 
3 | $(document).ready(function() {
4 | 
5 | 
6 | 	//init the side menu
7 | 	initSideMenu();
8 | 	
9 | });


--------------------------------------------------------------------------------
/app/main.js:
--------------------------------------------------------------------------------
  1 | //functions related to the theme itself. 
  2 | 
  3 | var mdlAdmin = {
  4 | 	//set Page title and Breadcrumbs. 
  5 |     setTitle : function(title, subtitle) {
  6 |     	//todo ; page title. 
  7 | 
  8 |         $('#title').html(title);
  9 |         $('#title-sep').hide();
 10 |         $('#subtitle').hide();
 11 |         if(subtitle) {
 12 |             $('#title-sep').show();
 13 |             $('#subtitle').show();
 14 |             $('#subtitle').html(subtitle);
 15 |         }
 16 |         
 17 |     }, 
 18 |     //load dynamic content over XHR
 19 |     loadContent : function(filename, cb) {
 20 |         $('#content').html('<div class="loading"><div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div></div>');
 21 |         componentHandler.upgradeDom();
 22 | 
 23 |         setTimeout(
 24 |         function() 
 25 |         {
 26 |             $('#content').load(filename, function() {
 27 |                 //Quick fix for dynamic DOM issue (raised by me): https://github.com/google/material-design-lite/issues/957
 28 |                 componentHandler.upgradeDom();
 29 |                 if(cb)
 30 |                     cb();
 31 |             });
 32 |         }, 500);
 33 | 
 34 |     	
 35 | 
 36 | 
 37 |     }, 
 38 | 
 39 |     initActive : function(route_href) {
 40 | 
 41 |     	//if top level
 42 |     	var nav= $('nav > nav-item').find("[href='" + route_href + "']");
 43 |     	if(nav.length) {
 44 |     		//select the first child
 45 |     		var navitem = nav[0];
 46 |     		//and make it active. 
 47 |     		$(navitem).parent().addClass('active');
 48 |     		//if subnav then open up the main nav. 
 49 |     		if($(navitem).parent().prop('nodeName') == 'SUB-NAV-ITEM') {
 50 |     			$(navitem).parent().parent().addClass('show');
 51 |     		}
 52 | 
 53 |     	} 
 54 | 
 55 |     },	
 56 | 
 57 |     todoAdd : function() {
 58 |     	//TODO: Not able to identify a technique to add a selectable row dynamically.
 59 |     	var newTask = $('#todo-newtask').val();
 60 |     	var newDate = $('#todo-newdate').val();
 61 | 
 62 |  
 63 |     	$('#todo-table > tbody:last-child').append('<tr><td></td><td class="mdl-data-table__cell--non-numeric">' 
 64 |     		+ newTask  + '</td><td class="mdl-data-table__cell--non-numeric">' + newDate + '</td>/tr>');
 65 |     	componentHandler.upgradeDom();
 66 |     }, 
 67 | 
 68 |     loadCharts : function() {
 69 |         if(google) {
 70 |             google.load('visualization', '1.1', {
 71 |                 packages: ['line', 'bar'],
 72 |                 callback: function() {
 73 |                     drawChart();
 74 |                 }
 75 |             } )
 76 |         }
 77 |         // google.load('visualization', '1.1', {packages: ['line']});
 78 |         // google.setOnLoadCallback(drawChart);
 79 | 
 80 |         function drawChart() {
 81 | 
 82 |           var data = new google.visualization.DataTable();
 83 |           data.addColumn('number', 'Day');
 84 |           data.addColumn('number', 'Guardians of the Galaxy');
 85 |           data.addColumn('number', 'The Avengers');
 86 |           data.addColumn('number', 'Transformers: Age of Extinction');
 87 | 
 88 |           data.addRows([
 89 |             [1,  37.8, 80.8, 41.8],
 90 |             [2,  30.9, 69.5, 32.4],
 91 |             [3,  25.4,   57, 25.7],
 92 |             [4,  11.7, 18.8, 10.5],
 93 |             [5,  11.9, 17.6, 10.4],
 94 |             [6,   8.8, 13.6,  7.7],
 95 |             [7,   7.6, 12.3,  9.6],
 96 |             [8,  12.3, 29.2, 10.6],
 97 |             [9,  16.9, 42.9, 14.8],
 98 |             [10, 12.8, 30.9, 11.6],
 99 |             [11,  5.3,  7.9,  4.7],
100 |             [12,  6.6,  8.4,  5.2],
101 |             [13,  4.8,  6.3,  3.6],
102 |             [14,  4.2,  6.2,  3.4]
103 |           ]);
104 | 
105 |           var options = {
106 |             chart: {
107 |               title: 'Google Charts - Line',
108 |               subtitle: 'in Material Design'
109 |             },
110 |             width: 900,
111 |             height: 500
112 |           };
113 | 
114 |           var chart = new google.charts.Line(document.getElementById('linechart_material'));
115 | 
116 |           chart.draw(data, options);
117 | 
118 |           var data = google.visualization.arrayToDataTable([
119 |               ['Year', 'Sales', 'Expenses', 'Profit'],
120 |               ['2014', 1000, 400, 200],
121 |               ['2015', 1170, 460, 250],
122 |               ['2016', 660, 1120, 300],
123 |               ['2017', 1030, 540, 350]
124 |             ]);
125 | 
126 |             var options = {
127 |               chart: {
128 |                 title: 'Google Charts - Bar',
129 |                 subtitle: 'in Material Design'
130 |               },
131 |               bars: 'horizontal', // Required for Material Bar Charts.
132 |               width: 900,
133 |               height: 500
134 |             };
135 | 
136 |             var chart = new google.charts.Bar(document.getElementById('barchart_material'));
137 | 
138 |             chart.draw(data, options);
139 |         }
140 |     }
141 | }


--------------------------------------------------------------------------------
/app/menu.js:
--------------------------------------------------------------------------------
 1 | /* Functions related to side menu */
 2 | 
 3 | function initSideMenu () {
 4 | 
 5 | 	// $('nav-item > sub-nav').parent().children('a').addClass('float-left')
 6 | 	// $('nav-item > sub-nav').parent().children('a').after('<span class="right-arrow-menu"><i class="mdl-color-text--blue-grey-400 material-icons">keyboard_arrow_right</i></span>');
 7 | 
 8 | 	$('nav-item > a').click(function(e) {
 9 | 		//reset
10 | 		$('nav-item').removeClass('active');
11 | 		$('sub-nav').removeClass('show');
12 | 		$('sub-nav-item').removeClass('active');
13 | 
14 | 		// console.log($(e.target).attr('href'));
15 | 		if($(e.target).attr('href') != undefined)
16 | 			$(e.target).parent().addClass('active');
17 | 
18 | 		//handle submenu
19 | 		var siblings = $(e.target).siblings('sub-nav');
20 | 
21 | 		if(siblings.length) {
22 | 			var subnav = siblings[0];
23 | 			$('sub-nav').not(subnav).removeClass('show');
24 | 			$(subnav).toggleClass('show');
25 | 		}
26 | 	})
27 | 
28 | 
29 | 	$('sub-nav-item').click(function(e){
30 | 		//reset
31 | 		$('sub-nav-item').removeClass('active');
32 | 
33 | 
34 | 		$(e.target).addClass('active');
35 | 	})
36 | }


--------------------------------------------------------------------------------
/app/route.js:
--------------------------------------------------------------------------------
 1 | //setting up routes using Grapnel Library. 
 2 | 
 3 | var routes = {
 4 |     '/' : function(req, e){
 5 |         mdlAdmin.initActive('#/');
 6 |         mdlAdmin.loadContent('pages/dashboard.html');
 7 |         mdlAdmin.setTitle('Dashboard');
 8 |     },
 9 |     '/todo' : function(req, e){
10 |         mdlAdmin.initActive('#/todo');
11 |         mdlAdmin.loadContent('pages/todo.html');
12 |         mdlAdmin.setTitle('Todo');
13 |     },
14 |     '/charts' : function(req, e){
15 |         mdlAdmin.initActive('#/charts');
16 |        
17 |         mdlAdmin.loadContent('pages/charts.html', function() {
18 |             // alert(1);
19 |             mdlAdmin.loadCharts();
20 |         });
21 |         mdlAdmin.setTitle('Charts');
22 |     },
23 |     '/elements/:type' : function(req, e){
24 | 
25 |         var element_type = req.params.type;
26 |         mdlAdmin.initActive('#/elements/' + req.params.type);
27 |         mdlAdmin.loadContent('pages/elements-' + element_type + '.html');
28 |         mdlAdmin.setTitle('Elements', element_type);
29 | 
30 |     },
31 |     '/*' : function(req, e){
32 |         if(!e.parent()){
33 |             // Handle 404
34 |             mdlAdmin.setTitle('Not Found');
35 |             mdlAdmin.loadContent('pages/404.html');
36 |         }
37 |     }
38 | }
39 | 
40 | 
41 | 
42 | 
43 | var router = Grapnel.listen({ pushState : false }, routes);


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mdladmin-lite",
 3 |   "version": "1.0",
 4 |   "authors": [
 5 |     "Vikas Singhal <vikas.programmer@gmail.com>"
 6 |   ],
 7 |   "description": "Starter Admin Template build on Google Material Design Lite",
 8 |   "license": "MIT",
 9 |   "ignore": [
10 |     "**/.*",
11 |     "node_modules",
12 |     "bower_components",
13 |     "test",
14 |     "tests"
15 |   ],
16 |   "dependencies": {
17 |     "material-design-lite": "~1.0.0",
18 |     "jquery": "~2.1.4",
19 |     "grapnel": "~0.5.8"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/images/dog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vikasprogrammer/mdlAdmin-lite/87b18674313da0275dac71b792c88c254e2f2178/images/dog.png


--------------------------------------------------------------------------------
/images/user.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vikasprogrammer/mdlAdmin-lite/87b18674313da0275dac71b792c88c254e2f2178/images/user.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--
  3 |   Material Design Lite
  4 |   Copyright 2015 Google Inc. All rights reserved.
  5 | 
  6 |   Licensed under the Apache License, Version 2.0 (the "License");
  7 |   you may not use this file except in compliance with the License.
  8 |   You may obtain a copy of the License at
  9 | 
 10 |       https://www.apache.org/licenses/LICENSE-2.0
 11 | 
 12 |   Unless required by applicable law or agreed to in writing, software
 13 |   distributed under the License is distributed on an "AS IS" BASIS,
 14 |   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15 |   See the License for the specific language governing permissions and
 16 |   limitations under the License
 17 | -->
 18 | <html lang="en">
 19 |   <head>
 20 |     <meta charset="utf-8">
 21 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 22 |     <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
 23 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 24 |     <title>Material Design Lite</title>
 25 | 
 26 |     <!-- Add to homescreen for Chrome on Android -->
 27 |     <meta name="mobile-web-app-capable" content="yes">
 28 |     <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
 29 | 
 30 |     <!-- Add to homescreen for Safari on iOS -->
 31 |     <meta name="apple-mobile-web-app-capable" content="yes">
 32 |     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 33 |     <meta name="apple-mobile-web-app-title" content="Material Design Lite">
 34 |     <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
 35 | 
 36 |     <!-- Tile icon for Win8 (144x144 + tile color) -->
 37 |     <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
 38 |     <meta name="msapplication-TileColor" content="#3372DF">
 39 | 
 40 |     <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
 41 |     <!--
 42 |     <link rel="canonical" href="http://www.example.com/">
 43 |     -->
 44 | 
 45 |     <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
 46 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 47 |     <link rel="stylesheet" href="bower_components/material-design-lite/material.min.css">
 48 |     <link rel="stylesheet" href="styles.css">
 49 |     
 50 | 
 51 |   </head>
 52 |   <body>
 53 |     <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
 54 |       <header class="demo-header mdl-layout__header mdl-color--white mdl-color--grey-100 mdl-color-text--grey-600">
 55 |         <div class="mdl-layout__header-row">
 56 |           <span class="mdl-layout-title" id="title"></span>
 57 |             <span class="mdl-layout-title" id="title-sep">&nbsp;&gt;&nbsp;</span>
 58 |           <span class="mdl-layout-title" id="subtitle"></span>
 59 |           <div class="mdl-layout-spacer"></div>
 60 |           <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
 61 |             <label class="mdl-button mdl-js-button mdl-button--icon" for="search">
 62 |               <i class="material-icons">search</i>
 63 |             </label>
 64 |             <div class="mdl-textfield__expandable-holder">
 65 |               <input class="mdl-textfield__input" type="text" id="search" />
 66 |               <label class="mdl-textfield__label" for="search">Enter your query...</label>
 67 |             </div>
 68 |           </div>
 69 |           <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
 70 |             <i class="material-icons">more_vert</i>
 71 |           </button>
 72 |           <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
 73 |             <li class="mdl-menu__item">About</li>
 74 |             <li class="mdl-menu__item">Contact</li>
 75 |             <li class="mdl-menu__item">Legal information</li>
 76 |           </ul>
 77 |         </div>
 78 |       </header>
 79 |       <div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
 80 |         <header class="demo-drawer-header">
 81 |           <img src="images/user.jpg" class="demo-avatar">
 82 |           <div class="demo-avatar-dropdown">
 83 |             <span>hello@email.com</span>
 84 |             <div class="mdl-layout-spacer"></div>
 85 |             <button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
 86 |               <i class="material-icons">arrow_drop_down</i>
 87 |             </button>
 88 |             <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
 89 |               <li class="mdl-menu__item">hello@email.com</li>
 90 |               <li class="mdl-menu__item">info@domain.net</li>
 91 |               <li class="mdl-menu__item"><i class="material-icons">add</i>Add another account...</li>
 92 |             </ul>
 93 |           </div>
 94 |         </header>
 95 |         <nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
 96 |           <nav-item><a class="mdl-navigation__link" href="#/" data-title="Dashboard"><i class="mdl-color-text--blue-grey-400 material-icons">home</i>Dashboard</a>
 97 | 
 98 |           </nav-item>
 99 |           <nav-item>
100 |           <a class="mdl-navigation__link" href="#/todo"><i class="mdl-color-text--blue-grey-400 material-icons">done_all</i>Todo</a>
101 |           </nav-item>
102 |           <nav-item>
103 |           <a class="mdl-navigation__link"><i class="mdl-color-text--blue-grey-400 material-icons">settings_input_component</i>Elements</a>
104 | 
105 |             <sub-nav>
106 |               <sub-nav-item><a class="mdl-navigation__link" href="#/elements/buttons">Buttons</a></sub-nav-item>
107 |               <sub-nav-item><a class="mdl-navigation__link" href="#/elements/input">Input</a></sub-nav-item>
108 |             </sub-nav>
109 |           </nav-item>
110 |          
111 |           <nav-item>
112 |           <a class="mdl-navigation__link" href="#/charts"><i class="mdl-color-text--blue-grey-400 material-icons">insert_chart</i>Charts</a>
113 |           </nav-item>
114 |           <!-- Coming soon -->
115 |           <nav-item>
116 |           <a class="mdl-navigation__link"><i class="mdl-color-text--blue-grey-400 material-icons">layers</i>Levels</a>
117 |             <sub-nav>
118 |               <sub-nav-item><a class="mdl-navigation__link">Level 1a</a></sub-nav-item>
119 |               <sub-nav-item><a class="mdl-navigation__link" href="">Level 1b</a></sub-nav-item>
120 |             </sub-nav>
121 |           </nav-item>
122 |           <nav-item>
123 |           
124 |           
125 |           
126 |         </nav>
127 |       </div>
128 |       <main class="mdl-layout__content mdl-color--grey-100" id="content">
129 |             
130 | 
131 |           
132 |           
133 |           
134 |       </main>
135 |     </div>
136 |       
137 |     
138 |     <script src="bower_components/material-design-lite/material.min.js"></script>
139 |     <script src="bower_components/jquery/dist/jquery.js"></script>
140 |     <!-- routing support -->
141 |     <script src="bower_components/grapnel/dist/grapnel.min.js"></script>
142 |     <script src="bower_components/material-design-lite/material.min.js"></script>
143 |     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
144 |     <!-- app -->
145 |     <script src="app/main.js"></script>
146 |     <script src="app/menu.js"></script>
147 |     <script src="app/init.js"></script>
148 |     <script src="app/route.js"></script>
149 | 
150 |    
151 | 
152 |   </body>
153 | </html>
154 | 


--------------------------------------------------------------------------------
/pages/404.html:
--------------------------------------------------------------------------------
1 | <div class="mdl-grid demo-content">
2 | 404 <br>
3 | Not Found
4 | </div>


--------------------------------------------------------------------------------
/pages/charts.html:
--------------------------------------------------------------------------------
 1 | <div class="mdl-grid demo-content">
 2 | <div class="mdl-card mdl-shadow--2dp demo-card-wide">
 3 |   <div class="mdl-card__title">
 4 |     <h2 class="mdl-card__title-text">Google Material Design Charts, Sample #1</h2>
 5 |   </div>
 6 |   <div class="mdl-card__supporting-text">
 7 |     <div id="linechart_material"></div>
 8 |   </div>
 9 |   <div class="mdl-card__actions mdl-card--border">
10 |     <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="https://developers.google.com/chart/interactive/docs/gallery/linechart#creating-material-line-charts" target="_blank">
11 |       See More
12 |     </a>
13 |   </div>
14 |   
15 | </div>
16 | <div class="mdl-card mdl-shadow--2dp demo-card-wide">
17 |   <div class="mdl-card__title">
18 |     <h2 class="mdl-card__title-text">Google Material Design Charts, Sample #2</h2>
19 |   </div>
20 |   <div class="mdl-card__supporting-text">
21 |     <div id="barchart_material"></div>
22 |   </div>
23 |   <div class="mdl-card__actions mdl-card--border">
24 |     <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="https://developers.google.com/chart/interactive/docs/gallery/barchart#creating-material-bar-charts" target="_blank">
25 |       See More
26 |     </a>
27 |   </div>
28 |   
29 | </div>
30 |   
31 |   
32 | </div>


--------------------------------------------------------------------------------
/pages/dashboard.html:
--------------------------------------------------------------------------------
  1 |         <div class="mdl-grid demo-content">
  2 |           <div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
  3 |             <svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
  4 |               <use xlink:href="#piechart" mask="url(#piemask)" />
  5 |               <text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan font-size="0.2" dy="-0.07">%</tspan></text>
  6 |             </svg>
  7 |             <svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
  8 |               <use xlink:href="#piechart" mask="url(#piemask)" />
  9 |               <text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
 10 |             </svg>
 11 |             <svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
 12 |               <use xlink:href="#piechart" mask="url(#piemask)" />
 13 |               <text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
 14 |             </svg>
 15 |             <svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
 16 |               <use xlink:href="#piechart" mask="url(#piemask)" />
 17 |               <text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
 18 |             </svg>
 19 |           </div>
 20 |           <div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
 21 |             <svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
 22 |               <use xlink:href="#chart"/>
 23 |             </svg>
 24 |             <svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
 25 |               <use xlink:href="#chart"/>
 26 |             </svg>
 27 |           </div>
 28 | 
 29 |           <div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
 30 |             <div class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
 31 |               <div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
 32 |                 <h2 class="mdl-card__title-text">Updates</h2>
 33 |               </div>
 34 |               <div class="mdl-card__supporting-text mdl-color-text--grey-600">
 35 |                 Non dolore elit adipisicing ea reprehenderit consectetur culpa.
 36 |               </div>
 37 |               <div class="mdl-card__actions mdl-card--border">
 38 |                 <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">Read More</a>
 39 |               </div>
 40 |             </div>
 41 |             <div class="demo-separator mdl-cell--1-col"></div>
 42 |             <div class="demo-options mdl-card mdl-color--deep-purple-500 mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop">
 43 |               <div class="mdl-card__supporting-text mdl-color-text--blue-grey-50">
 44 |                 <h3>View options</h3>
 45 |                 <ul>
 46 |                   <li>
 47 |                     <label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
 48 |                       <input type="checkbox" id="chkbox1" class="mdl-checkbox__input" />
 49 |                       <span class="mdl-checkbox__label">Click per object</span>
 50 |                     </label>
 51 |                   </li>
 52 |                   <li>
 53 |                     <label for="chkbox2" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
 54 |                       <input type="checkbox" id="chkbox2" class="mdl-checkbox__input" />
 55 |                       <span class="mdl-checkbox__label">Views per object</span>
 56 |                     </label>
 57 |                   </li>
 58 |                   <li>
 59 |                     <label for="chkbox3" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
 60 |                       <input type="checkbox" id="chkbox3" class="mdl-checkbox__input" />
 61 |                       <span class="mdl-checkbox__label">Objects selected</span>
 62 |                     </label>
 63 |                   </li>
 64 |                   <li>
 65 |                     <label for="chkbox4" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
 66 |                       <input type="checkbox" id="chkbox4" class="mdl-checkbox__input" />
 67 |                       <span class="mdl-checkbox__label">Objects viewed</span>
 68 |                     </label>
 69 |                   </li>
 70 |                 </ul>
 71 |               </div>
 72 |               <div class="mdl-card__actions mdl-card--border">
 73 |                 <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--blue-grey-50">Change location</a>
 74 |                 <div class="mdl-layout-spacer"></div>
 75 |                 <i class="material-icons">location_on</i>
 76 |               </div>
 77 |             </div>
 78 |           </div>
 79 |         </div>
 80 | 
 81 | 
 82 | 
 83 | 
 84 | 
 85 | 
 86 |         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
 87 |         <defs>
 88 |           <mask id="piemask" maskContentUnits="objectBoundingBox">
 89 |             <circle cx=0.5 cy=0.5 r=0.49 fill="white" />
 90 |             <circle cx=0.5 cy=0.5 r=0.40 fill="black" />
 91 |           </mask>
 92 |           <g id="piechart">
 93 |             <circle cx=0.5 cy=0.5 r=0.5 />
 94 |             <path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)" />
 95 |           </g>
 96 |         </defs>
 97 |       </svg>
 98 |       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 250" style="position: fixed; left: -1000px; height: -1000px;">
 99 |         <defs>
100 |           <g id="chart">
101 |             <g id="Gridlines">
102 |               <line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3"/>
103 |               <line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7"/>
104 |               <line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3"/>
105 |               <line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7"/>
106 |               <line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3"/>
107 |             </g>
108 |             <g id="Numbers">
109 |               <text transform="matrix(1 0 0 1 485 29.3333)" fill="#888888" font-family="'Roboto'" font-size="9">500</text>
110 |               <text transform="matrix(1 0 0 1 485 69)" fill="#888888" font-family="'Roboto'" font-size="9">400</text>
111 |               <text transform="matrix(1 0 0 1 485 109.3333)" fill="#888888" font-family="'Roboto'" font-size="9">300</text>
112 |               <text transform="matrix(1 0 0 1 485 149)" fill="#888888" font-family="'Roboto'" font-size="9">200</text>
113 |               <text transform="matrix(1 0 0 1 485 188.3333)" fill="#888888" font-family="'Roboto'" font-size="9">100</text>
114 |               <text transform="matrix(1 0 0 1 0 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">1</text>
115 |               <text transform="matrix(1 0 0 1 78 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">2</text>
116 |               <text transform="matrix(1 0 0 1 154.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">3</text>
117 |               <text transform="matrix(1 0 0 1 232.1667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">4</text>
118 |               <text transform="matrix(1 0 0 1 309 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">5</text>
119 |               <text transform="matrix(1 0 0 1 386.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">6</text>
120 |               <text transform="matrix(1 0 0 1 464.3333 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">7</text>
121 |             </g>
122 |             <g id="Layer_5">
123 |               <polygon opacity="0.36" stroke-miterlimit="10" points="0,223.3 48,138.5 154.7,169 211,88.5
124 |               294.5,80.5 380,165.2 437,75.5 469.5,223.3   "/>
125 |             </g>
126 |             <g id="Layer_4">
127 |               <polygon stroke-miterlimit="10" points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7
128 |               296.7,128 380.7,184.3 436.7,125   "/>
129 |             </g>
130 |           </g>
131 |         </defs>
132 |       </svg>


--------------------------------------------------------------------------------
/pages/elements-buttons.html:
--------------------------------------------------------------------------------
 1 | <div class="mdl-grid demo-content demo-element-button">
 2 | 	
 3 | 	<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
 4 | 	  <div class="mdl-tabs__tab-bar">
 5 | 	      <a href="#fab-panel" class="mdl-tabs__tab is-active">Fab</a>
 6 | 	      <a href="#buttons-panel" class="mdl-tabs__tab">Buttons</a>
 7 | 	      <a href="#more-panel" class="mdl-tabs__tab">More</a>
 8 | 	  </div>
 9 | 
10 | 	  <div class="mdl-tabs__panel is-active" id="fab-panel">
11 | 			<!-- Colored FAB button -->
12 | 			<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
13 | 			  <i class="material-icons">add</i>
14 | 			</button>
15 | 			<!-- Colored FAB button with ripple -->
16 | 			<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
17 | 			  <i class="material-icons">add</i>
18 | 			</button>
19 | 			<br><br>
20 | 			<!-- Mini FAB button -->
21 | 			<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
22 | 			  <i class="material-icons">add</i>
23 | 			</button>
24 | 			<!-- Colored mini FAB button -->
25 | 			<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
26 | 			  <i class="material-icons">add</i>
27 | 			</button>
28 | 
29 | 	  </div>
30 | 	  <div class="mdl-tabs__panel" id="buttons-panel">
31 | 
32 | 	  	<!-- Raised button -->
33 | 		<button class="mdl-button mdl-js-button mdl-button--raised">
34 | 		  Button
35 | 		</button>
36 | 		<!-- Raised button with ripple -->
37 | 		<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
38 | 		  Button
39 | 		</button>
40 | 		<!-- Raised disabled button-->
41 | 		<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
42 | 		  Button
43 | 		</button>
44 | 		<br><br>
45 | 
46 | 		<!-- Colored raised button -->
47 | 		<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
48 | 		  Button
49 | 		</button>
50 | 		<!-- Accent-colored raised button with ripple -->
51 | 		<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
52 | 		  Button
53 | 		</button>
54 | 		<!-- Accent-colored raised button with ripple -->
55 | 		<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
56 | 		  Button
57 | 		</button>
58 | 	  </div>
59 | 	  <div class="mdl-tabs__panel" id="more-panel">
60 | 	    <!-- Flat button -->
61 | 		<button class="mdl-button mdl-js-button">
62 | 		  Button
63 | 		</button>
64 | 		<!-- Flat button with ripple -->
65 | 		<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
66 | 		  Button
67 | 		</button>
68 | 		<!-- Disabled flat button -->
69 | 		<button class="mdl-button mdl-js-button" disabled>
70 | 		  Button
71 | 		</button>
72 | 		<br><br>
73 | 		<!-- Icon button -->
74 | 		<button class="mdl-button mdl-js-button mdl-button--icon">
75 | 		  <i class="material-icons">mood</i>
76 | 		</button>
77 | 		<!-- Colored icon button -->
78 | 		<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
79 | 		  <i class="material-icons">mood</i>
80 | 		</button>
81 | 	  </div>
82 | 	</div>
83 | </div>


--------------------------------------------------------------------------------
/pages/elements-input.html:
--------------------------------------------------------------------------------
 1 | <div class="mdl-grid demo-content demo-element-button">
 2 | 	
 3 | 	<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
 4 | 	  <div class="mdl-tabs__tab-bar">
 5 | 	      <a href="#Simple-panel" class="mdl-tabs__tab is-active">Simple</a>
 6 | 	      <a href="#Floating-panel" class="mdl-tabs__tab">Floating</a>
 7 | 	      <a href="#Multiline-panel" class="mdl-tabs__tab">Multiline</a>
 8 | 	  </div>
 9 | 
10 | 	  <div class="mdl-tabs__panel is-active" id="Simple-panel">
11 | 			<!-- Simple Textfield -->
12 | 			<form action="#">
13 | 			  <div class="mdl-textfield mdl-js-textfield textfield-demo">
14 | 			    <input class="mdl-textfield__input" type="text" id="sample1" />
15 | 			    <label class="mdl-textfield__label" for="sample1">Text...</label>
16 | 			  </div>
17 | 			</form>
18 | 			<!-- Numeric Textfield -->
19 | 			<form action="#">
20 | 			  <div class="mdl-textfield mdl-js-textfield textfield-demo">
21 | 			    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2" />
22 | 			    <label class="mdl-textfield__label" for="sample2">Number...</label>
23 | 			    <span class="mdl-textfield__error">Input is not a number!</span>
24 | 			  </div>
25 | 			</form>
26 | 
27 | 	  </div>
28 | 	  <div class="mdl-tabs__panel" id="Floating-panel">
29 | 
30 | 	  	<!-- Textfield with Floating Label -->
31 | 
32 | 		<form action="#">
33 | 		  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo">
34 | 		    <input class="mdl-textfield__input" type="text" id="sample3" />
35 | 		    <label class="mdl-textfield__label" for="sample3">Text...</label>
36 | 		  </div>
37 | 		</form>
38 | 		<!-- Numeric Textfield with Floating Label -->
39 | 		<form action="#">
40 | 		  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo">
41 | 		    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4" />
42 | 		    <label class="mdl-textfield__label" for="sample4">Number...</label>
43 | 		    <span class="mdl-textfield__error">Input is not a number!</span>
44 | 		  </div>
45 | 		</form>
46 | 
47 | 
48 | 	  </div>
49 | 	  <div class="mdl-tabs__panel" id="Multiline-panel">
50 | 	    <!-- Floating Multiline Textfield -->
51 | 		<form action="#">
52 | 		  <div class="mdl-textfield mdl-js-textfield textfield-demo">
53 | 		    <textarea class="mdl-textfield__input" type="text" rows= "3" id="sample5" ></textarea>
54 | 		    <label class="mdl-textfield__label" for="sample5">Text lines...</label>
55 | 		  </div>
56 | 		</form>
57 | 		<!-- Expandable Textfield -->
58 | 		<form action="#">
59 | 		  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable textfield-demo">
60 | 		    <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
61 | 		      <i class="material-icons">search</i>
62 | 		    </label>
63 | 		    <div class="mdl-textfield__expandable-holder">
64 | 		      <input class="mdl-textfield__input" type="text" id="sample6" />
65 | 		      <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
66 | 		    </div>
67 | 		  </div>
68 | 		</form>
69 | 	  </div>
70 | 	</div>
71 | </div>


--------------------------------------------------------------------------------
/pages/todo.html:
--------------------------------------------------------------------------------
 1 | <div class="mdl-grid demo-content">
 2 | 	<div class="mdl-card mdl-shadow--2dp demo-todo">
 3 | 	  <div class="mdl-card__title">
 4 | 	    <h2 class="mdl-card__title-text">Todo App</h2>
 5 | 	  </div>
 6 | 	  <div class="mdl-card__supporting-text">
 7 | 	    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp full-width" id="todo-table">
 8 | 		  <thead>
 9 | 		    <tr>
10 | 		      <th class="mdl-data-table__cell--non-numeric">Task</th>
11 | 		      <th class="mdl-data-table__cell--non-numeric">Due Date</th>
12 | 		    </tr>
13 | 		  </thead>
14 | 		  <tbody>
15 | 		    <tr>
16 | 		      <td class="mdl-data-table__cell--non-numeric">Buy Milk</td>
17 | 		      <td class="mdl-data-table__cell--non-numeric">12 July 2015</td>
18 | 		    </tr>
19 | 		    <tr>
20 | 		      <td class="mdl-data-table__cell--non-numeric">Reboot Server</td>
21 | 		      <td class="mdl-data-table__cell--non-numeric">20 July 2015</td>
22 | 		    </tr>
23 | 		    <tr>
24 | 		      <td class="mdl-data-table__cell--non-numeric">Learn MDL</td>
25 | 		      <td class="mdl-data-table__cell--non-numeric">31 August 2015</td>
26 | 		    </tr>
27 | 		    
28 | 		  </tbody>
29 | 		</table>
30 | 		<div id="todo-temp"></div>
31 | 	  </div>
32 | 	  <div class="mdl-card__actions mdl-card--border">
33 | 		<div class="mdl-textfield mdl-js-textfield textfield-demo">
34 | 		    <input class="mdl-textfield__input" type="text" id="todo-newtask" />
35 | 		    <label class="mdl-textfield__label" for="sample1">Task</label>
36 | 	  	</div>
37 | 	  	<div class="mdl-textfield mdl-js-textfield textfield-demo">
38 | 		    <input class="mdl-textfield__input todo-input" type="text" id="todo-newdate" />
39 | 		    <label class="mdl-textfield__label" for="sample1">Date</label>
40 | 	  	</div>
41 | 	    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="mdlAdmin.todoAdd()">
42 | 	      Add
43 | 	    </a>
44 | 
45 | 	  </div>
46 | 	  <div class="mdl-card__menu">
47 | 	    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
48 | 	      <i class="material-icons">sync</i>
49 | 	    </button>
50 | 	  </div>
51 | 	</div>
52 | </div>


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2015 Google Inc. All Rights Reserved.
  3 |  *
  4 |  * Licensed under the Apache License, Version 2.0 (the "License");
  5 |  * you may not use this file except in compliance with the License.
  6 |  * You may obtain a copy of the License at
  7 |  *
  8 |  *      http://www.apache.org/licenses/LICENSE-2.0
  9 |  *
 10 |  * Unless required by applicable law or agreed to in writing, software
 11 |  * distributed under the License is distributed on an "AS IS" BASIS,
 12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 |  * See the License for the specific language governing permissions and
 14 |  * limitations under the License.
 15 |  */
 16 | 
 17 | html, body {
 18 |   font-family: 'Roboto', 'Helvetica', sans-serif;
 19 | }
 20 | .demo-avatar {
 21 |   width: 48px;
 22 |   height: 48px;
 23 |   border-radius: 24px;
 24 | }
 25 | .demo-layout .demo-header .mdl-textfield {
 26 |   padding-top: 27px;
 27 | }
 28 | .demo-layout .mdl-layout__header .mdl-layout__drawer-button {
 29 |   color: rgba(0, 0, 0, 0.54);
 30 | }
 31 | .mdl-layout__drawer .avatar {
 32 |   margin-bottom: 16px;
 33 | }
 34 | .demo-drawer {
 35 |   border: none;
 36 | 
 37 | }
 38 | .demo-drawer::-webkit-scrollbar {
 39 |  display: none;
 40 | }
 41 | 
 42 | .demo-drawer .mdl-menu .mdl-menu__item{
 43 |   display: flex;
 44 |   align-items: center;
 45 | }
 46 | .demo-drawer-header {
 47 |   box-sizing: border-box;
 48 |   display: flex;
 49 |   flex-direction: column;
 50 |   justify-content: flex-end;
 51 |   padding: 16px;
 52 |   height: 151px;
 53 | }
 54 | .demo-avatar-dropdown {
 55 |   display: flex;
 56 |   position: relative;
 57 |   flex-direction: row;
 58 |   align-items: center;
 59 |   width: 100%;
 60 | }
 61 | 
 62 | .demo-navigation {
 63 |   flex-grow: 1;
 64 | }
 65 | .demo-layout .demo-navigation .mdl-navigation__link {
 66 |   display: flex !important;
 67 |   flex-direction: row;
 68 |   align-items: center;
 69 |   color: rgba(255, 255, 255, 0.56);
 70 |   font-weight: 500;
 71 | }
 72 | .demo-layout .demo-navigation .active .mdl-navigation__link {
 73 |   color: #37474F;
 74 | }
 75 | .demo-layout .demo-navigation .mdl-navigation__link:hover { 
 76 |   background-color: #00BCD4;
 77 |   color: #37474F;
 78 | }
 79 | .demo-navigation .mdl-navigation__link .material-icons {
 80 |   font-size: 24px;
 81 |   color: rgba(255, 255, 255, 0.56);
 82 |   margin-right: 32px;
 83 | }
 84 | 
 85 | .demo-content {
 86 |   max-width: 1080px;
 87 | }
 88 | 
 89 | .demo-charts {
 90 |   align-items: center;
 91 | }
 92 | .demo-chart:nth-child(1) {
 93 |   color: #ACEC00;
 94 | }
 95 | .demo-chart:nth-child(2) {
 96 |   color: #00BBD6;
 97 | }
 98 | .demo-chart:nth-child(3) {
 99 |   color: #BA65C9;
100 | }
101 | .demo-chart:nth-child(4) {
102 |   color: #EF3C79;
103 | }
104 | .demo-graphs {
105 |   padding: 16px 32px;
106 |   display: flex;
107 |   flex-direction: column;
108 |   align-items: stretch;
109 | }
110 | /* TODO: Find a proper solution to have the graphs
111 |  * not float around outside their container in IE10/11.
112 |  * Using a browserhacks.com solution for now.
113 |  */
114 | _:-ms-input-placeholder, :root .demo-graphs {
115 |   min-height: 664px;
116 | }
117 | _:-ms-input-placeholder, :root .demo-graph {
118 |   max-height: 300px;
119 | }
120 | /* TODO end */
121 | .demo-graph:nth-child(1) {
122 |   color: #00b9d8;
123 | }
124 | .demo-graph:nth-child(2) {
125 |   color: #d9006e;
126 | }
127 | 
128 | .demo-cards {
129 |   align-items: flex-start;
130 |   align-content: flex-start;
131 | }
132 | .demo-cards .demo-separator {
133 |   height: 32px;
134 | }
135 | .demo-cards .mdl-card__title.mdl-card__title {
136 |   color: white;
137 |   font-size: 24px;
138 |   font-weight: 400;
139 | }
140 | .demo-cards ul {
141 |   padding: 0;
142 | }
143 | .demo-cards h3 {
144 |   font-size: 1em;
145 | }
146 | .demo-updates .mdl-card__title {
147 |   min-height: 200px;
148 |   background-image: url('images/dog.png');
149 |   background-position: 90% 100%;
150 |   background-repeat: no-repeat;
151 | }
152 | .demo-cards .mdl-card__actions a {
153 |   color: #00BCD4;
154 |   text-decoration: none;
155 | }
156 | 
157 | .demo-card-wide {
158 |   width: 100%;
159 |   margin-bottom: 10px
160 | }
161 | 
162 | .demo-options h3 {
163 |   margin: 0;
164 | }
165 | .demo-options .mdl-checkbox__box-outline {
166 |   border-color: rgba(255, 255, 255, 0.89);
167 | }
168 | .demo-options ul {
169 |   margin: 0;
170 |   list-style-type: none;
171 | }
172 | .demo-options li {
173 |   margin: 4px 0;
174 | }
175 | .demo-options .material-icons {
176 |   color: rgba(255, 255, 255, 0.89);
177 | }
178 | .demo-options .mdl-card__actions {
179 |   height: 64px;
180 |   display: flex;
181 |   box-sizing: border-box;
182 |   align-items: center;
183 | }
184 | 
185 | sub-nav {
186 |   /*padding: 4px;*/
187 |   transition: visibility 1s linear;
188 |   /*opacity: 0;*/
189 |   display: none;
190 | }
191 | 
192 | sub-nav.show {
193 |   /*opacity: 1;*/
194 |   display: block;
195 | }
196 | 
197 | 
198 | sub-nav-item {
199 |   display: flex !important;
200 |   flex-direction: row;
201 |   align-items: center;
202 |   color: rgba(255, 255, 255, 0.56);
203 |   font-weight: 500;
204 |   cursor: pointer;
205 |   /*padding: 3px;*/
206 | }
207 | 
208 | sub-nav-item a.mdl-navigation__link {
209 |   display: block !important;
210 |   padding: 10px 40px !important;
211 | }
212 | 
213 | sub-nav-item:hover {
214 |   background-color: #00BCD4;
215 |   color: #37474F;
216 | }
217 | 
218 | sub-nav-item.active, nav-item.active {
219 |   background-color: #00BCD4;
220 |   color: #37474F;
221 | 
222 | }
223 | 
224 | nav-item a {
225 |   cursor: pointer;
226 | }
227 | 
228 | #title-sep {
229 |   display: none;
230 | }
231 | 
232 | a.mdl-navigation__link .active {
233 |   
234 | }
235 | 
236 | 
237 | sub-nav-item a.mdl-navigation__link {
238 |   padding:100px;
239 | }
240 | 
241 | .demo-todo.mdl-card {
242 |   width: 60%;
243 |   margin: auto;
244 | }
245 | .demo-todo > .mdl-card__title {
246 |   /*color: #fff;*/
247 |   /*height: 176px;*/
248 | }
249 | .demo-todo > .mdl-card__menu {
250 |   /*color: #fff;*/
251 | }
252 | 
253 | .demo-todo .full-width {
254 |   width: 100%;
255 | }
256 | 
257 | /* Fix for selectable table bug, TODO : Remove this; */
258 | .demo-todo .mdl-data-table th {
259 |   text-align: left;
260 | }
261 | 
262 | .demo-todo .textfield-demo {
263 |   width: 150px;
264 | }
265 | 
266 | 
267 | .demo-element-button .mdl-tabs__panel {
268 |   text-align: center;
269 |   padding: 10px;
270 | }
271 | 
272 | .loading {
273 |     text-align: center;
274 |     margin-top: 100px;
275 | }
276 | 
277 | 
278 | sub-nav-item a {
279 |   width: 100%;
280 | }
281 | 
282 | .right-arrow-menu {
283 |   float: right;
284 |     text-align: right;
285 |     position: absolute;
286 |     right: 10px;
287 |     margin-top: 2px;
288 | }
289 | 
290 | 


--------------------------------------------------------------------------------