├── screenshot.png
├── templates
    ├── region--waterfall.html.twig
    ├── block--page-title-block.html.twig
    ├── menu-local-task.html.twig
    ├── page-title.html.twig
    ├── block--system-breadcrumb-block.html.twig
    ├── block--local-tasks-block.html.twig
    ├── region--footer.html.twig
    ├── textarea.html.twig
    ├── menu-local-tasks.html.twig
    ├── region--header.html.twig
    ├── waterfall-panels.html.twig
    ├── breadcrumb.html.twig
    ├── block--search.html.twig
    ├── form-element-label.html.twig
    ├── menu--main.html.twig
    ├── block--system-menu-block.html.twig
    ├── status-messages.html.twig
    └── page.html.twig
├── style.css
├── css
    ├── waterfall-panels.css
    ├── header.block--search.css
    └── breadcrumb.css
├── script.js
├── mdl.info.yml
├── config
    └── install
    │   └── mdl.settings.yml
├── manifest.json
├── mdl.breakpoints.yml
├── mdl.libraries.yml
├── logo.svg
├── README.txt
└── mdl.theme


/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andreapaiola/d8mdl/HEAD/screenshot.png


--------------------------------------------------------------------------------
/templates/region--waterfall.html.twig:
--------------------------------------------------------------------------------
1 | {% if content %}
2 |         {{ content }}
3 | {% endif %}
4 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | .mdl-layout--fixed-header{
 3 |     overflow: hidden;
 4 | }
 5 | */
 6 | /*
 7 | .kint{
 8 |     position:absolute;
 9 |     top:70px;
10 | }
11 | */


--------------------------------------------------------------------------------
/templates/block--page-title-block.html.twig:
--------------------------------------------------------------------------------
1 | {# core/themes/stable/templates/block/block.html.twig #}
2 | {% block content %}
3 |     {{ content }}
4 | {% endblock %}
5 | 


--------------------------------------------------------------------------------
/templates/menu-local-task.html.twig:
--------------------------------------------------------------------------------
1 | {# core/themes/stable/templates/navigation/menu-local-task.html.twig #}
2 | 
3 | <li{{ attributes.addClass('mdl-menu__item') }}>{{ link }}</li>
4 | 


--------------------------------------------------------------------------------
/css/waterfall-panels.css:
--------------------------------------------------------------------------------
1 | .mdl-layout__tab--disabled {
2 |     opacity: 0.5;
3 |     text-decoration: line-through !important;
4 | }
5 | 
6 | .mdl-layout__tab.mdl-layout__tab--icon {
7 |     font-size: 30px;
8 | }
9 | 


--------------------------------------------------------------------------------
/templates/page-title.html.twig:
--------------------------------------------------------------------------------
 1 | {# core/themes/stable/templates/content/page-title.html.twig #}
 2 | 
 3 | {{ title_prefix }}
 4 | {% if title %}
 5 |     <h1 class="mdl-layout-title">{{ title }}</h1>
 6 | {% endif %}
 7 | {{ title_suffix }}
 8 | 
 9 | <div class="mdl-layout-spacer"></div>
10 | 


--------------------------------------------------------------------------------
/templates/block--system-breadcrumb-block.html.twig:
--------------------------------------------------------------------------------
 1 | {# core/themes/stable/templates/block/block.html.twig #}
 2 | 
 3 | 
 4 | {{ title_prefix }}
 5 | {% if label %}
 6 |     <h2{{ title_attributes }}>{{ label }}</h2>
 7 | {% endif %}
 8 | {{ title_suffix }}
 9 | {% block content %}
10 |     {{ content }}
11 | {% endblock %}
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | document.addEventListener('DOMContentLoaded', function (event) {
 3 |     console.log('DOM fully loaded and parsed');
 4 |     //console.log(drupalSettings);
 5 | });
 6 | window.addEventListener('load', function() {
 7 |     console.log('window and all contents loaded');
 8 |     //console.log(drupalSettings);
 9 | });
10 | 


--------------------------------------------------------------------------------
/css/header.block--search.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | .mdl-textfield__expandable-holder .form-actions {
 4 |     position: absolute !important;
 5 |     clip: rect(1px, 1px, 1px, 1px);
 6 |     overflow: hidden;
 7 |     height: 1px;
 8 |     width: 1px;
 9 |     word-wrap: normal;
10 | }
11 | 
12 | .mdl-textfield__expandable-holder .mdl-textfield__input {
13 |     background: white;
14 |     color: black;
15 | }
16 | 


--------------------------------------------------------------------------------
/mdl.info.yml:
--------------------------------------------------------------------------------
 1 | name: Material Design Lite
 2 | type: theme
 3 | description: 'Material theme (Google Material Design). As smooth and fast as possible.'
 4 | package: Custom
 5 | core: 8.x
 6 | libraries:
 7 |   - mdl/mdltheme
 8 | stylesheets-remove:
 9 |   - core/assets/vendor/normalize-css/normalize.css
10 |   - core/modules/system/css/system.theme.css
11 | regions:
12 |   header: 'Header'
13 |   waterfall: 'Waterfall'
14 |   drawer: 'Drawer'
15 |   content: 'Content'
16 |   footer: 'Footer'
17 | 


--------------------------------------------------------------------------------
/config/install/mdl.settings.yml:
--------------------------------------------------------------------------------
 1 | version: '1.3.0'
 2 | primary: 'indigo'
 3 | accent: 'pink'
 4 | roboto: TRUE
 5 | remote: TRUE
 6 | headerFixed: FALSE
 7 | headerWaterfall: FALSE
 8 | headerScroll: TRUE
 9 | headerTransparent: FALSE
10 | headerSeamed: FALSE
11 | drawerFixed: FALSE
12 | footer: 'mega'
13 | webAppManifest: TRUE
14 | 
15 | # if remote==FALSE, these local files will be served
16 | material_css_filename: '/themes/mdl/mdl/material.min.css'
17 | material_js_filename: '/themes/mdl/mdl/material.min.js'
18 | 


--------------------------------------------------------------------------------
/css/breadcrumb.css:
--------------------------------------------------------------------------------
 1 | .mdl-navigation > .mdl-list__item,
 2 | .mdl-layout__header-row .mdl-list__item .mdl-navigation__link {
 3 |     padding: 0;
 4 | }
 5 | 
 6 | .mdl-navigation > .mdl-list__item + .mdl-list__item:before {
 7 |     content: ">";
 8 |     color: rgba(255,255,255,0.7);
 9 |     vertical-align: top;
10 |     display: inline-block;
11 |     font-weight: normal;
12 |     font-style: normal;
13 |     font-size: 25px;
14 |     margin: 0 10px 0 8px;
15 |     -webkit-font-smoothing: antialiased;
16 | }
17 | 


--------------------------------------------------------------------------------
/templates/block--local-tasks-block.html.twig:
--------------------------------------------------------------------------------
 1 | {# core/themes/stable/templates/block/block.html.twig #}
 2 | 
 3 | {{ title_prefix }}
 4 | {% if label %}
 5 |     <h2{{ title_attributes }}>{{ label }}</h2>
 6 | {% endif %}
 7 | {{ title_suffix }}
 8 | {% block content %}
 9 |     {# Right aligned menu below button #}
10 |     <button id="local-tasks" class="mdl-button mdl-js-button mdl-button--icon">
11 |         <i class="material-icons">more_vert</i>
12 |     </button>
13 | 
14 |     {{ content }}
15 | 
16 | {% endblock %}
17 | 


--------------------------------------------------------------------------------
/templates/region--footer.html.twig:
--------------------------------------------------------------------------------
 1 | {# core/themes/stable/templates/layout/region.html.twig #}
 2 | 
 3 | {#
 4 | /**
 5 |  * @file
 6 |  * Theme override to display a region.
 7 |  *
 8 |  * Available variables:
 9 |  * - content: The content for this region, typically blocks.
10 |  * - attributes: HTML attributes for the region div.
11 |  * - region: The name of the region variable as defined in the theme's
12 |  *   .info.yml file.
13 |  *
14 |  * @see template_preprocess_region()
15 |  */
16 | #}
17 | {% if content %}
18 |     {{ content }}
19 | {% endif %}
20 | 


--------------------------------------------------------------------------------
/templates/textarea.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override for a 'textarea' #type form element.
 5 |  *
 6 |  * Available variables
 7 |  * - wrapper_attributes: A list of HTML attributes for the wrapper element.
 8 |  * - attributes: A list of HTML attributes for the textarea element.
 9 |  * - resizable: An indicator for whether the textarea is resizable.
10 |  * - required: An indicator for whether the textarea is required.
11 |  * - value: The textarea content.
12 |  *
13 |  * @see template_preprocess_textarea()
14 |  */
15 | #}
16 | <textarea{{ attributes }}>{{ value }}</textarea>
17 | 
18 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Material Design Lite",
 3 |   "short_name": "MDL",
 4 |   "icons": [{
 5 |     "src": "logo.svg",
 6 |     "sizes": "128x128",
 7 |     "type": "image/svg+xml"
 8 |   }, {
 9 |     "src": "logo.svg",
10 |     "sizes": "152x152",
11 |     "type": "image/svg+xml"
12 |   }, {
13 |     "src": "logo.svg",
14 |     "sizes": "144x144",
15 |     "type": "image/svg+xml"
16 |   }, {
17 |     "src": "logo.svg",
18 |     "sizes": "192x192",
19 |     "type": "image/svg+xml"
20 |   }],
21 |   "start_url": "/?homescreen=1",
22 |   "display": "standalone",
23 |   "background_color": "#3F51B5",
24 |   "theme_color": "#3F51B5"
25 | }


--------------------------------------------------------------------------------
/templates/menu-local-tasks.html.twig:
--------------------------------------------------------------------------------
 1 | {# core/themes/stable/templates/navigation/menu-local-tasks.html.twig #}
 2 | 
 3 | {% if primary %}
 4 |     <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
 5 |     <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
 6 |         for="local-tasks">
 7 |         {{ primary }}
 8 |     </ul>
 9 | {% endif %}
10 | {% if secondary %}
11 |     <h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
12 |     <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
13 |         for="local-tasks">
14 |         {{ secondary }}
15 |     </ul>
16 | {% endif %}
17 | 


--------------------------------------------------------------------------------
/templates/region--header.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Default theme implementation to display a region.
 5 |  *
 6 |  * Available variables:
 7 |  * - content: The content for this region, typically blocks.
 8 |  * - attributes: HTML attributes for the region div.
 9 |  * - region: The name of the region variable as defined in the theme's
10 |  *   .info.yml file.
11 |  *
12 |  * @see template_preprocess_region()
13 |  *
14 |  * @ingroup themeable
15 |  */
16 | #}
17 | {% if content %}
18 |     {% set attributes = attributes.addClass('mdl-layout__header-row') %}
19 |   <div{{ attributes }}>
20 |     {{ content }}
21 |   </div>
22 | {% endif %}
23 | 


--------------------------------------------------------------------------------
/templates/waterfall-panels.html.twig:
--------------------------------------------------------------------------------
 1 | {% if items|length > 0 %}
 2 | <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
 3 |     {% set is_active = 'is-active' %}
 4 |     {% for key, item in items %}
 5 |         {% if item.text %}
 6 |             <span href="#{{ key }}-panel" {% if is_active %}class="{{ is_active }}"{% endif %}>{{ item.text }}</span>
 7 |         {% else %}
 8 |             <a href="#{{ key }}" class="mdl-layout__tab {% if is_active %} {{ is_active }}{% endif %}">{{ item }}</a>
 9 |         {% endif %}
10 |         {% set is_active = '' %}
11 |     {% endfor %}
12 | </div>
13 | 
14 | {{ attach_library('mdl/waterfall-panels') }}
15 | {% endif %}
16 | 


--------------------------------------------------------------------------------
/templates/breadcrumb.html.twig:
--------------------------------------------------------------------------------
 1 | {# @override core/themes/stable/templates/navigation/breadcrumb.html.twig #}
 2 | {% if breadcrumb %}
 3 |     <nav role="navigation" aria-labelledby="system-breadcrumb" class="mdl-layout__header-row">
 4 |         <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
 5 |         <ul class="mdl-navigation">
 6 |             {% for item in breadcrumb %}
 7 |                 <li class="mdl-list__item">
 8 |                     {% if item.url %}
 9 |                         <a class="mdl-navigation__link" href="{{ item.url }}">{{ item.text }}</a>
10 |                     {% else %}
11 |                         <span class="mdl-navigation__link">{{ item.text }}</span>
12 |                     {% endif %}
13 |                 </li>
14 |             {% endfor %}
15 |         </ul>
16 |     </nav>
17 | {% endif %}
18 | 


--------------------------------------------------------------------------------
/templates/block--search.html.twig:
--------------------------------------------------------------------------------
 1 | {# core/themes/stable/templates/block/block.html.twig #}
 2 | 
 3 | {% set classes = [
 4 | 'mdl-textfield', 'mdl-js-textfield', 'mdl-textfield--expandable', 'mdl-textfield--floating-label', 'mdl-textfield--align-right'
 5 | ] %}
 6 | <div class="mdl-layout-spacer"></div>
 7 | 
 8 | <div {{ attributes.addClass(classes) }}>
 9 |     {{ title_prefix }}
10 |     {% if label %}
11 |         <h2{{ title_attributes.addClass('visually-hidden') }}>{{ label }}</h2>
12 |     {% endif %}
13 |     {{ title_suffix }}
14 | 
15 |     <label class="mdl-button mdl-js-button mdl-button--icon" for="edit-keys">
16 |         <i class="material-icons">search</i>
17 |     </label>
18 |     <div class="mdl-textfield__expandable-holder">
19 |         {% block content %}
20 |             {{ content }}
21 |         {% endblock %}
22 |     </div>
23 | </div>
24 | 
25 | {{ attach_library('mdl/mdl.searchblock') }}
26 | 


--------------------------------------------------------------------------------
/mdl.breakpoints.yml:
--------------------------------------------------------------------------------
 1 | mdl.xsmall:
 2 |   label: xsmall
 3 |   mediaQuery: 'screen and (max-width: 479px)'
 4 |   weight: 0
 5 |   multipliers:
 6 |     - 1x
 7 | mdl.small:
 8 |   label: small
 9 |   mediaQuery: 'screen and (min-width: 480px)'
10 |   weight: 1
11 |   multipliers:
12 |     - 1x
13 | mdl.medium:
14 |   label: medium
15 |   mediaQuery: 'screen and (min-width: 840px)'
16 |   weight: 2
17 |   multipliers:
18 |     - 1x
19 | mdl.large:
20 |   label: large
21 |   mediaQuery: 'screen and (min-width: 1024px)'
22 |   weight: 3
23 |   multipliers:
24 |     - 1x
25 | mdl.xlarge:
26 |   label: xlarge
27 |   mediaQuery: 'screen and (min-width: 1920px)'
28 |   weight: 4
29 |   multipliers:
30 |     - 1x
31 | mdl.xxlarge:
32 |   label: xxlarge
33 |   mediaQuery: 'screen and (min-width: 3840px)'
34 |   weight: 5
35 |   multipliers:
36 |     - 1x
37 | mdl.print:
38 |   label: print
39 |   mediaQuery: 'print'
40 |   weight: 6
41 |   multipliers:
42 |    - 1x


--------------------------------------------------------------------------------
/templates/form-element-label.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Theme override for a form element label.
 5 |  *
 6 |  * Available variables:
 7 |  * - title: The label's text.
 8 |  * - title_display: Elements title_display setting.
 9 |  * - required: An indicator for whether the associated form element is required.
10 |  * - attributes: A list of HTML attributes for the label.
11 |  *
12 |  * @see template_preprocess_form_element_label()
13 |  */
14 | #}
15 | {%
16 |   set classes = [
17 |     title_display == 'after' ? 'option',
18 |     title_display == 'invisible' ? 'visually-hidden',
19 |     required ? 'js-form-required',
20 |     required ? 'form-required',
21 |   ]
22 | %}
23 | {% if title is not empty or required -%}
24 |     {%- if icon -%}
25 |       <div{{ icon_attributes }}><i class="material-icons">{{ icon }}</i></div>
26 |     {%- endif -%}
27 |   <!--div class="mdl-selectfield__icon"><i class="material-icons">arrow_drop_down</i></div-->
28 |   <label{{ attributes.addClass(classes) }}>{{ title }}</label>
29 | {%- endif %}
30 | 


--------------------------------------------------------------------------------
/mdl.libraries.yml:
--------------------------------------------------------------------------------
 1 | mdl:
 2 |   css:
 3 |     theme:
 4 |       //storage.googleapis.com/code.getmdl.io/VERSION/material.PRIMARY-ACCENT.min.css: { type: external }
 5 |   js:
 6 |       //storage.googleapis.com/code.getmdl.io/VERSION/material.min.js: { type: external }
 7 |   dependencies:
 8 |     - mdl/materialIcons
 9 |     - mdl/roboto
10 | 
11 | mdl.selectfield:
12 |   css:
13 |     component:
14 |       /libraries/mdl-selectfield/mdl-selectfield.min.css: {}
15 |   js:
16 |     /libraries/mdl-selectfield/mdl-selectfield.min.js: {}
17 | 
18 | mdl.searchblock:
19 |   css:
20 |     component:
21 |       css/header.block--search.css: {}
22 | 
23 | mdl.breadcrumb:
24 |   css:
25 |     component:
26 |       css/breadcrumb.css: {}
27 | 
28 | materialIcons:
29 |   css:
30 |     theme:
31 |       //fonts.googleapis.com/icon?family=Material+Icons: { type: external }
32 | roboto:
33 |   css:
34 |     theme:
35 |       //fonts.googleapis.com/css?family=Roboto:300,400,500,700: { type: external }
36 | mdltheme:
37 |   css:
38 |     theme:
39 |       style.css: {}
40 |   js:
41 |     script.js: {}
42 |   dependencies:
43 |     - mdl/mdl
44 | 
45 | waterfall-panels:
46 |   css:
47 |     theme:
48 |       css/waterfall-panels.css: {}
49 | 


--------------------------------------------------------------------------------
/templates/menu--main.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Default theme implementation to display a menu.
 5 |  *
 6 |  * Available variables:
 7 |  * - menu_name: The machine name of the menu.
 8 |  * - items: A nested list of menu items. Each menu item contains:
 9 |  *   - attributes: HTML attributes for the menu item.
10 |  *   - below: The menu item child items.
11 |  *   - title: The menu link title.
12 |  *   - url: The menu link url, instance of \Drupal\Core\Url
13 |  *   - localized_options: Menu link localized options.
14 |  *   - is_expanded: TRUE if the link has visible children within the current
15 |  *     menu tree.
16 |  *   - is_collapsed: TRUE if the link has children within the current menu tree
17 |  *     that are not currently visible.
18 |  *   - in_active_trail: TRUE if the link is in the active trail.
19 |  *
20 |  * @ingroup themeable
21 |  */
22 | #}
23 | {% import _self as menus %}
24 | 
25 | {#
26 |   We call a macro which calls itself to render the full tree.
27 |   @see http://twig.sensiolabs.org/doc/tags/macro.html
28 | #}
29 | {{ menus.menu_links(items, attributes, 0) }}
30 | 
31 | {% macro menu_links(items, attributes, menu_level) %}
32 |   {% import _self as menus %}
33 |   {% if items %}
34 |     {% if menu_level == 0 %}
35 |     {% else %}
36 |         {% endif %}
37 |         {% for item in items %}
38 |                 {{ link(item.title, item.url, item.attributes) }}
39 |         {% endfor %}
40 |     {% endif %}
41 |     {% endmacro %}
42 | 


--------------------------------------------------------------------------------
/templates/block--system-menu-block.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Default theme implementation for a menu block.
 5 |  *
 6 |  * Available variables:
 7 |  * - plugin_id: The ID of the block implementation.
 8 |  * - label: The configured label of the block if visible.
 9 |  * - configuration: A list of the block's configuration values.
10 |  *   - label: The configured label for the block.
11 |  *   - label_display: The display settings for the label.
12 |  *   - provider: The module or other provider that provided this block plugin.
13 |  *   - Block plugin specific settings will also be stored here.
14 |  * - content: The content of this block.
15 |  * - attributes: HTML attributes for the containing element.
16 |  *   - id: A valid HTML ID and guaranteed unique.
17 |  * - title_attributes: HTML attributes for the title element.
18 |  * - content_attributes: HTML attributes for the content element.
19 |  * - title_prefix: Additional output populated by modules, intended to be
20 |  *   displayed in front of the main title tag that appears in the template.
21 |  * - title_suffix: Additional output populated by modules, intended to be
22 |  *   displayed after the main title tag that appears in the template.
23 |  *
24 |  * Headings should be used on navigation menus that consistently appear on
25 |  * multiple pages. When this menu block's label is configured to not be
26 |  * displayed, it is automatically made invisible using the 'visually-hidden' CSS
27 |  * class, which still keeps it visible for screen-readers and assistive
28 |  * technology. Headings allow screen-reader and keyboard only users to navigate
29 |  * to or skip the links.
30 |  * See http://juicystudio.com/article/screen-readers-display-none.php and
31 |  * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
32 |  *
33 |  * @ingroup themeable
34 |  */
35 | #}
36 | {% set heading_id = attributes.id ~ '-menu'|clean_id %}
37 | {% set attributes = attributes.addClass('mdl-navigation') %}
38 | <nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
39 |   {# Label. If not displayed, we still provide it for screen readers. #}
40 |   {% if not configuration.label_display %}
41 |     {% set title_attributes = title_attributes.addClass('visually-hidden') %}
42 |   {% endif %}
43 |   {% block content %}
44 |     {{ content }}
45 |   {% endblock %}
46 | </nav>
47 | 


--------------------------------------------------------------------------------
/templates/status-messages.html.twig:
--------------------------------------------------------------------------------
 1 | {# core/themes/stable/templates/misc/status-messages.html.twig#}
 2 | {% if message_list|length > 0 %}<div id="status-messages">{% endif %}
 3 | 
 4 | {% for type, messages in message_list %}
 5 |     <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes|without('role', 'aria-label') }}>
 6 |         {% if type == 'error' %}
 7 |         <div role="alert">
 8 |             {% endif %}
 9 |             {% if status_headings[type] %}
10 |                 <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
11 |             {% endif %}
12 |             {% if messages|length > 1 %}
13 |                 <ul>
14 |                     {% for message in messages %}
15 |                         <li>{{ message }}</li>
16 |                     {% endfor %}
17 |                 </ul>
18 |             {% else %}
19 |                 {{ messages|first }}
20 |             {% endif %}
21 |             {% if type == 'error' %}
22 |         </div>
23 |         {% endif %}
24 |     </div>
25 | {% endfor %}
26 | {% if message_list|length > 0 %}</div>{% endif %}
27 | 
28 | <div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar">
29 |     <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
30 |         <i class="material-icons">delete</i>
31 |         <label> text</label>
32 |     </button>
33 |     <div class="mdl-snackbar__text">
34 |     </div>
35 |     <button type="button" class="mdl-snackbar__action"></button>
36 | </div>
37 | {% if message_list|length > 0 %}
38 | <script type="text/javascript">
39 | document.addEventListener("DOMContentLoaded", function() {
40 |     var notification = document.querySelector('.mdl-js-snackbar');
41 |     var status_messages = document.getElementById('status-messages');
42 | 
43 |     var dismissHandler = function(event) {
44 |         notification.MaterialSnackbar.cleanup_();
45 |     };
46 | 
47 |     status_messages.classList.add('visually-hidden');
48 | 
49 |     var fired=false;
50 |     notification.addEventListener('mdl-componentupgraded', function(e) {
51 |         if (typeof notification.MaterialSnackbar != 'object' || fired) return;
52 |         fired = true;
53 | 
54 |         {% for type, messages in message_list %}
55 |             var {{ type }} = {
56 |                 timeout: 10000,
57 |                 actionHandler: dismissHandler,
58 |                 actionText: 'Dismiss'
59 |             };
60 | 
61 |             var elem = document.createElement('textarea');
62 |             elem.innerHTML = "{{ messages|join("\n")|json_encode() }}\n";
63 |             {{ type }}.message = elem.value;
64 | 
65 |             notification.MaterialSnackbar.showSnackbar({{ type }});
66 |         {% endfor %}
67 |     });
68 | 
69 | });
70 | </script>
71 | {% endif %}
72 | 


--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="57" height="66" viewBox="471.5 467 57 66" enable-background="new 471.5 467 57 66"><path opacity=".2" fill="#303030" d="M528.5 504.965c0 16.634-13.123 27.615-28.24 27.615-10.29 0-19.894-5.523-24.978-14.167l.605-.027c1.313 1.192 3.39 2.58 7.404 2.515 4.77-.064 5.645-.875 9.855-2.756 22.716-10.17 26.925-19.457 27.736-21.59s2.013-5.587.756-9.415c-.242-.737-.42-1.333-.54-1.808-3.018-3.372-6.017-5.225-6.92-5.784-.14-.093-.29-.177-.43-.26l.44.26c2.01 1.247 14.314 8.782 14.314 25.417z"/><path fill="#fff" d="M509.09 518.507c1.006 0 2.077.065 2.83.568.756.503 1.193 1.63 1.445 2.263.25.634 0 1.006-.503 1.258-.438.25-.503.12-.94-.69-.44-.81-.82-1.63-3.01-1.63s-2.887.755-3.948 1.63c-1.062.876-1.443 1.193-1.825.69s-.253-1.006.437-1.63 1.825-1.63 2.888-2.077c1.06-.45 1.62-.383 2.625-.383zm-10.413 7.152c1.257 1.005 3.14 1.825 7.153 1.825 4.015 0 6.836-1.137 8.094-2.077.568-.438.82-.065.875.187.056.25.186.624-.252 1.07-.316.317-3.194 2.33-6.594 2.636-3.4.31-7.964.504-10.73-2.01-.438-.44-.316-1.07 0-1.323.317-.25.568-.438.94-.438.374.008.317.008.513.13z"/><path opacity=".2" fill="#aaa" d="M520.89 496.545c-.81 2.133-5.02 11.42-27.735 21.59-4.21 1.88-5.085 2.69-9.854 2.756-4.013.066-6.09-1.32-7.403-2.514l-.605.028h-.01c-2.393-4.042-3.78-8.783-3.78-13.952 0-7.852 2.97-13.654 6.287-17.687.11-.13.213-.26.325-.382 2.683-3.148 5.55-5.17 7.218-6.203.038-.028.075-.047.112-.065.42-.25.754-.447.987-.568 2.757-1.51 4.77-2.263 7.963-4.77.12-.092.242-.186.354-.288l.008-.01c.875-.754 1.64-1.76 2.18-3.4v-.008c.325-.97.567-2.16.716-3.65l.02.018c2.253 2.69 4.954 5.886 6.89 7.144.69.447 1.38.848 2.068 1.202l.3.15c2.243 1.126 4.507 1.945 6.807 3.333l.428.26c.903.56 3.902 2.412 6.92 5.784.12.475.298 1.07.54 1.807 1.274 3.837.073 7.292-.737 9.425z"/><path opacity=".5" fill="#333" d="M514.176 479.538c-3.26-2.077-6.464-2.887-9.603-4.955-1.938-1.267-4.64-4.47-6.893-7.162-.438 4.332-1.686 6.148-3.26 7.35-3.195 2.515-5.207 3.26-7.963 4.77-2.338 1.256-14.958 8.726-14.958 24.913 0 5.17 1.387 9.91 3.77 13.96 5.077 8.635 14.68 14.158 24.97 14.158 15.126 0 28.24-10.98 28.24-27.614 0-9.127-3.707-15.526-7.386-19.633-3.016-3.382-6.015-5.217-6.918-5.785zm7.627 7.34c4.117 5.15 6.213 11.23 6.213 18.077 0 3.968-.755 7.712-2.245 11.148-1.414 3.25-3.444 6.13-6.053 8.56-5.15 4.806-12.062 7.45-19.475 7.45-3.67 0-7.265-.698-10.692-2.086-3.372-1.36-6.398-3.297-9.016-5.774-5.532-5.225-8.57-12.257-8.57-19.8 0-6.716 2.18-12.695 6.483-17.753 3.288-3.865 6.836-6.007 8.196-6.743.67-.363 1.285-.69 1.89-.997 1.892-.97 3.68-1.89 6.14-3.818 1.312-.997 2.71-2.58 3.305-6.585 2.077 2.468 4.48 5.234 6.314 6.426 1.63 1.08 3.307 1.835 4.918 2.562 1.527.69 3.11 1.406 4.676 2.403l.056.037c4.62 2.84 7.06 5.896 7.86 6.892z"/><path opacity=".5" fill="#fff" d="M497.98 468.678c.874 2.58.753 3.893.753 4.452 0 .56-.307 2.077-1.313 2.832-.438.317-.568.568-.568.624 0 .25.568.438.568 1.006 0 .69-.317 2.077-3.642 5.393-3.325 3.316-8.103 6.278-11.8 8.103-3.698 1.826-5.468 1.686-5.97.81s.185-2.83 2.514-5.392l9.667-6.278 9.164-6.398.503-2.44"/><path fill="#fff" d="M497.98 468.613c-.57 4.145-1.826 5.393-3.512 6.715-2.83 2.133-5.588 3.446-6.212 3.763-1.63.82-7.535 4.08-10.608 8.784-.94 1.444 0 2.012.186 2.133.187.12 2.33.372 6.9-2.385 4.574-2.757 6.595-4.387 9.175-7.078 1.377-1.444 1.573-2.263 1.573-2.636 0-.438-.316-.624-.82-.754-.25-.065-.316-.187 0-.373.317-.186 1.622-.82 1.938-1.07.318-.25 1.827-1.257 1.882-2.887.065-1.63-.056-2.766-.503-4.21zm-14.112 45.628c.065-4.898 4.648-9.472 10.422-9.536 7.348-.065 12.424 7.283 16.13 7.208 3.14-.064 9.166-6.212 12.118-6.212 3.14 0 4.014 3.26 4.014 5.206 0 1.938-.623 5.458-2.133 7.656-1.51 2.198-2.44 3.008-4.2 2.888-2.264-.187-6.78-7.21-9.67-7.35-3.64-.12-11.547 7.6-17.75 7.6-3.763 0-4.9-.567-6.147-1.378-1.92-1.312-2.85-3.315-2.785-6.08z"/></svg>
2 | 


--------------------------------------------------------------------------------
/templates/page.html.twig:
--------------------------------------------------------------------------------
 1 | {#
 2 | /**
 3 |  * @file
 4 |  * Default theme implementation to display a single page.
 5 |  *
 6 |  * The doctype, html, head and body tags are not in this template. Instead they
 7 |  * can be found in the html.html.twig template in this directory.
 8 |  *
 9 |  * Available variables:
10 |  *
11 |  * General utility variables:
12 |  * - base_path: The base URL path of the Drupal installation. Will usually be
13 |  *   "/" unless you have installed Drupal in a sub-directory.
14 |  * - is_front: A flag indicating if the current page is the front page.
15 |  * - logged_in: A flag indicating if the user is registered and signed in.
16 |  * - is_admin: A flag indicating if the user has permission to access
17 |  *   administration pages.
18 |  *
19 |  * Site identity:
20 |  * - front_page: The URL of the front page. Use this instead of base_path when
21 |  *   linking to the front page. This includes the language domain or prefix.
22 |  * - logo: The url of the logo image, as defined in theme settings.
23 |  * - site_name: The name of the site. This is empty when displaying the site
24 |  *   name has been disabled in the theme settings.
25 |  * - site_slogan: The slogan of the site. This is empty when displaying the site
26 |  *   slogan has been disabled in theme settings.
27 |  *
28 |  * Page content (in order of occurrence in the default page.html.twig):
29 |  * - messages: Status and error messages. Should be displayed prominently.
30 |  * - node: Fully loaded node, if there is an automatically-loaded node
31 |  *   associated with the page and the node ID is the second argument in the
32 |  *   page's path (e.g. node/12345 and node/12345/revisions, but not
33 |  *   comment/reply/12345).
34 |  *
35 |  * Regions:
36 |  * - page.header: Items for the header region.
37 |  * - page.primary_menu: Items for the primary menu region.
38 |  * - page.secondary_menu: Items for the secondary menu region.
39 |  * - page.highlighted: Items for the highlighted content region.
40 |  * - page.help: Dynamic help text, mostly for admin pages.
41 |  * - page.content: The main content of the current page.
42 |  * - page.sidebar_first: Items for the first sidebar.
43 |  * - page.sidebar_second: Items for the second sidebar.
44 |  * - page.footer: Items for the footer region.
45 |  * - page.breadcrumb: Items for the breadcrumb region.
46 |  *
47 |  * @see template_preprocess_page()
48 |  * @see html.html.twig
49 |  *
50 |  * @ingroup themeable
51 |  */
52 | #}
53 | <div class="image-preloader"></div>
54 | <div class="mdl-layout mdl-js-layout
55 | {% if headerFixed %} mdl-layout--fixed-header{% endif %}
56 | {% if drawerFixed %} mdl-layout--fixed-drawer{% endif %}
57 | ">
58 |     <header role="banner" class="mdl-layout__header mdl-color--primary
59 |     {% if headerWaterfall %} mdl-layout__header--waterfall{% endif %}
60 |     {% if headerScroll %} mdl-layout__header--scroll{% endif %}
61 |     {% if headerTransparent %} mdl-layout__header--transparent{% endif %}
62 |     {% if headerSeamed %} mdl-layout__header--seamed{% endif %}
63 |     ">
64 |         {{ page.header }}
65 |         {% if headerWaterfall and page.waterfall %}
66 |             {{ page.waterfall }}
67 |         {% endif %}
68 |     </header>
69 |     {% if page.drawer %}
70 |     <div class="mdl-layout__drawer">
71 |         {{ page.drawer }}
72 |     </div>
73 |     {% endif %}
74 |     <main role="main" class="mdl-layout__content">
75 |         <div class="layout-content">
76 |             <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
77 |             <div class="mdl-grid">
78 |                 <div class="mdl-cell mdl-cell--12-col">
79 |                     {{ page.content }}
80 |                 </div>
81 |             </div>
82 |         </div>
83 |         {% if page.footer %}
84 |         <footer role="contentinfo" class="
85 |         {% if footer == 'mega' %}
86 |         mdl-mega-footer
87 |         {% endif %}
88 |         {% if footer == 'mini' %}
89 |         mdl-mini-footer
90 |         {% endif %}
91 |         mdl-color--grey-900">
92 | 
93 |         {{ page.footer }}
94 |         </footer>
95 |     {% endif %}
96 |     </main>
97 | </div>
98 | 


--------------------------------------------------------------------------------
/README.txt:
--------------------------------------------------------------------------------
  1 | DESCRIPTION
  2 | -----------
  3 | 
  4 | A Drupal 8 Google Material Design theme
  5 | https://www.google.com/design/spec/material-design
  6 | This theme is not for front-end beginners.
  7 | Targeting extreme performance in modern browsers and new web technologies and
  8 | low-powered devices, this theme is for lightweight sites.
  9 | Use it when you are ready to move away from jQuery.
 10 | http://andreapaiola.name/2015-07-materialize-css-vs-material-design-lite/
 11 | 
 12 | Optional module: MDL Layout components
 13 | https://github.com/monosmou/mdl_layout
 14 | 
 15 | 
 16 | FEATURES
 17 | --------
 18 | 
 19 | Easy theme administration:
 20 | - You can change the MDL version, default is "1.3.0". Easy upgrade.
 21 | - You change the MDL primary color, default is "indigo".
 22 | - You change the MDL accent color, default is "pink".
 23 | - You can load the Roboto font from Google CDN. This is bad for performance, avoid if possible.
 24 | - You can load the MDL CSS/JS from Google CDN or from a local directory.
 25 | - MDL Layout Components http://www.getmdl.io/components/index.html
 26 | -- Fixed Header
 27 | -- Waterfall Header
 28 | -- Scroll Header
 29 | -- Transparent Header
 30 | -- Seamed Header
 31 | -- Fixed Drawer
 32 | -- Footer mini or mega
 33 | 
 34 | Web App Manifest
 35 | http://w3c.github.io/manifest/
 36 | The file manifest.json is in the theme directory, compile with your website app data
 37 | 
 38 | NEW FEATURES (TODOs, in development)
 39 | ------------------------------------
 40 | 
 41 | Progressive webapp with Offline-first (e.g. IndexedDB and ServiceWorkers) and Web workers (HTTPS only)
 42 | http://addyosmani.com/blog/getting-started-with-progressive-web-apps/
 43 | https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
 44 | http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
 45 | 
 46 | Performance optimization with Modern Progressive Enhancement
 47 | https://www.youtube.com/watch?v=r038QioMtxI
 48 | 
 49 | HTTP/2 optimizations
 50 | 
 51 | LAYOUT STRUCTURE: Standard Drupal 8 Regions and MDL Layout components
 52 | ---------------------------------------------------------------------
 53 | 
 54 | https://api.drupal.org/api/drupal/core%21modules%21system%21templates%21page.html.twig/8
 55 | https://www.google.com/design/spec/layout/structure.html
 56 | http://www.getmdl.io/components/index.html#layout-section
 57 | 
 58 | page.header (Header)
 59 | Standard place for Site branding with logo, site name and site slogan.
 60 | In Material Design becomes the App bar / primary toolbar.
 61 | 
 62 | page.primary_menu (Primary menu)
 63 | Standard place for site Main navigation block, in Material Design becomes a navigation block in the header.
 64 | 
 65 | page.secondary_menu (Secondary menu)
 66 | Tipically the place for User account menu and users tasks, it becomes a layout block of menu type,
 67 | a hamburger menu in the header? I prefer in the drawer.
 68 | https://www.google.com/design/spec/components/menus.html
 69 | http://www.getmdl.io/components/index.html#menus-section
 70 | 
 71 | page.waterfall (Waterfall)
 72 | Navigation elements that disappear when scrolling down.
 73 | 
 74 | page.breadcrumb (Breadcrumb)
 75 | Breadcrumb navigation in content area
 76 | 
 77 | page.highlighted (Highlighted)
 78 | Status messages: alerts and errors messages in content area
 79 | 
 80 | page.help (Help)
 81 | Help messages in content area
 82 | 
 83 | page.content (Content)
 84 | Main page contents: contains entities fields output and main user interactions/contents
 85 | 
 86 | page.sidebar_first (Left sidebar) and page.sidebar_second (Right sidebar)
 87 | You can use for faceted navigations, become MDL navigation drawers.
 88 | https://www.google.com/design/spec/patterns/navigation-drawer.html
 89 | http://www.getmdl.io/components/index.html#menus-section
 90 | 
 91 | page.footer (Footer)
 92 | Copyright and Term of service area. Easy.
 93 | 
 94 | 
 95 | INSTALLATION
 96 | ------------
 97 | 
 98 | Standard theme installation: copy the unzipped dir into "themes" directory.
 99 | MDL's CSS and JS are in Google CDN, but you can load from local theme subdirectory mdl/, look at the theme configuration.
100 | Download from http://www.getmdl.io/started/index.html#download
101 | Current MDL version: 1.3.0, but if you want you can update MDL version in theme configuration.
102 | Default colors are indigo-pink, but MDL colors is customizable here http://www.getmdl.io/customize/index.html
103 | and you can set in theme configuration.
104 | 


--------------------------------------------------------------------------------
/mdl.theme:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | use Drupal\Core\Template\Attribute;
  4 | 
  5 | function mdl_library_info_alter(&$libraries, $extension)
  6 | {
  7 |     if ($extension === 'mdl' && isset($libraries['mdl'])) {
  8 | 
  9 |         $mdlCSSKeys = array_keys($libraries['mdl']['css']['theme']);
 10 |         $oldCSSKey = array_shift($mdlCSSKeys);
 11 |         $mdlJSKeys = array_keys($libraries['mdl']['js']);
 12 |         $oldJSKey = array_shift($mdlJSKeys);
 13 | 
 14 |         /* Load MDL CSS and JS from Google CDN or local subdirectory */
 15 |         $should_remote = theme_get_setting('remote');
 16 |         $localCssKey = theme_get_setting('material_css_filename');
 17 |         $localJsKey = theme_get_setting('material_js_filename');
 18 |         $has_local_css = !empty($localCssKey) && file_exists(DRUPAL_ROOT . $localCssKey);
 19 |         $has_local_js  = !empty($localJsKey) && file_exists(DRUPAL_ROOT . $localJsKey);
 20 | 
 21 |         if (!$has_local_css || !$has_local_js || $should_remote) {
 22 |             $newCSSKey = str_replace(array('VERSION', 'PRIMARY', 'ACCENT'), array(theme_get_setting('version')
 23 |             , theme_get_setting('primary'), theme_get_setting('accent')), $oldCSSKey);
 24 |             $libraries['mdl']['css']['theme'][$newCSSKey] = $libraries['mdl']['css']['theme'][$oldCSSKey];
 25 |             $newJSKey = str_replace('VERSION', theme_get_setting('version'), $oldJSKey);
 26 |             $libraries['mdl']['js'][$newJSKey] = $libraries['mdl']['js'][$oldJSKey];
 27 |         }
 28 |         else
 29 |         {
 30 |             $libraries['mdl']['css']['theme'][$localCssKey] = array();
 31 |             $libraries['mdl']['js'][$localJsKey] = array();
 32 |         }
 33 | 
 34 |         unset($libraries['mdl']['css']['theme'][$oldCSSKey]);
 35 |         unset($libraries['mdl']['js'][$oldJSKey]);
 36 | 
 37 |         if (!theme_get_setting('roboto')) {
 38 |             $libraries['mdl']['dependencies'] = array_diff($libraries['mdl']['dependencies'], array('mdl/roboto'));
 39 |         }
 40 |     }
 41 | }
 42 | 
 43 | function mdl_preprocess_breadcrumb(&$variables) {
 44 |   $variables['#attached']['library'][] = 'mdl/mdl.breadcrumb';
 45 | }
 46 | 
 47 | function mdl_preprocess_page(&$variables){
 48 |     // header
 49 |     $variables['headerFixed']=theme_get_setting('headerFixed');
 50 |     $variables['headerWaterfall']=theme_get_setting('headerWaterfall');
 51 |     $variables['headerScroll']=theme_get_setting('headerScroll');
 52 |     $variables['headerTransparent']=theme_get_setting('headerTransparent');
 53 |     $variables['headerSeamed']=theme_get_setting('headerSeamed');
 54 | 
 55 |     // drawer
 56 |     $variables['drawerFixed']=theme_get_setting('drawerFixed');
 57 | 
 58 |     // footer
 59 |     $variables['footer']=theme_get_setting('footer');
 60 | }
 61 | 
 62 | function mdl_page_attachments_alter(array &$attachments) {
 63 |     if(theme_get_setting('webAppManifest'))
 64 |     {
 65 |         $manifest = [
 66 |             '#tag' => 'link',
 67 |             '#attributes' => [
 68 |                 'rel' => 'manifest',
 69 |                 'href' => base_path().drupal_get_path('theme','mdl').'/manifest.json',
 70 |             ],
 71 |         ];
 72 |         $attachments['#attached']['html_head'][] = [$manifest, 'manifest'];
 73 |     }
 74 | }
 75 | 
 76 | function mdl_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state)
 77 | {
 78 | 
 79 |     $form['mdl'] = array(
 80 |         '#type' => 'details',
 81 |         '#title' => t('Material Design Lite settings'),
 82 |         '#open' => TRUE,
 83 |     );
 84 | 
 85 |     // Add a textfield to define the MDL version.
 86 |     $form['mdl']['version'] = array(
 87 |         '#type' => 'textfield',
 88 |         '#title' => t('Version'),
 89 |         '#default_value' => theme_get_setting('version'),
 90 |         '#description' => t('You can change the MDL version, default is "1.1.3".'),
 91 |     );
 92 | 
 93 |     // Add a textfield to define the MDL primary color.
 94 |     $form['mdl']['primary'] = array(
 95 |         '#type' => 'textfield',
 96 |         '#title' => t('Primary color'),
 97 |         '#default_value' => theme_get_setting('primary'),
 98 |         '#description' => t('You change the MDL primary color, default is "indigo".'),
 99 |     );
100 | 
101 |     // Add a textfield to define the MDL accent color.
102 |     $form['mdl']['accent'] = array(
103 |         '#type' => 'textfield',
104 |         '#title' => t('Accent color'),
105 |         '#default_value' => theme_get_setting('accent'),
106 |         '#description' => t('You change the MDL accent color, default is "pink".'),
107 |     );
108 | 
109 |     // Add a checkbox to toggle the Roboto font include.
110 |     $form['mdl']['roboto'] = array(
111 |         '#type' => 'checkbox',
112 |         '#title' => t('Load Roboto font'),
113 |         '#default_value' => theme_get_setting('roboto'),
114 |         '#description' => t('You can load the Roboto font from Google CDN. This is bad for performance, avoid if possible. If Roboto is a system font (e.g. Android)
115 |         will be displayed even if it\'s not checked.'),
116 |     );
117 | 
118 |     // Add a checkbox to toggle remote/local loading.
119 |     $form['mdl']['remote'] = array(
120 |         '#type' => 'checkbox',
121 |         '#title' => t('Load remote CSS and JS'),
122 |         '#default_value' => theme_get_setting('remote'),
123 |         '#description' => t('You can load the MDL CSS/JS from Google CDN.
124 |         If it isn\'t checked the theme tries to load from mdl subdirectory like mdl/material.css
125 |         and mdl/material.js in the theme folder.'),
126 |     );
127 |     // Add a checkbox to toggle fixed header.
128 |     $form['mdl']['headerFixed'] = array(
129 |         '#type' => 'checkbox',
130 |         '#title' => t('Fixed Header'),
131 |         '#default_value' => theme_get_setting('headerFixed'),
132 |         '#description' => t('mdl-layout--fixed-header Makes the header always visible, even in small screens'),
133 |     );
134 |     // Add a checkbox to toggle waterfall header.
135 |     $form['mdl']['headerWaterfall'] = array(
136 |         '#type' => 'checkbox',
137 |         '#title' => t('Waterfall Header'),
138 |         '#default_value' => theme_get_setting('headerWaterfall'),
139 |         '#description' => t('mdl-layout__header--waterfall Allows a "waterfall" effect with multiple header lines'),
140 |     );
141 |     // Add a checkbox to toggle scroll header.
142 |     $form['mdl']['headerScroll'] = array(
143 |         '#type' => 'checkbox',
144 |         '#title' => t('Scroll Header'),
145 |         '#default_value' => theme_get_setting('headerScroll'),
146 |         '#description' => t('mdl-layout__header--scroll Makes the header scroll with the content'),
147 |     );
148 |     // Add a checkbox to toggle transparent header.
149 |     $form['mdl']['headerTransparent'] = array(
150 |         '#type' => 'checkbox',
151 |         '#title' => t('Transparent Header'),
152 |         '#default_value' => theme_get_setting('headerTransparent'),
153 |         '#description' => t('mdl-layout__header--transparent Makes header transparent (draws on top of layout background)'),
154 |     );
155 |     // Add a checkbox to toggle seamed header.
156 |     $form['mdl']['headerSeamed'] = array(
157 |         '#type' => 'checkbox',
158 |         '#title' => t('Seamed Header'),
159 |         '#default_value' => theme_get_setting('headerSeamed'),
160 |         '#description' => t('mdl-layout__header--seamed Uses a header without a shadow'),
161 |     );
162 |     // Add a checkbox to toggle fixed drawer.
163 |     $form['mdl']['drawerFixed'] = array(
164 |         '#type' => 'checkbox',
165 |         '#title' => t('Fixed Drawer'),
166 |         '#default_value' => theme_get_setting('drawerFixed'),
167 |         '#description' => t('mdl-layout--fixed-drawer Makes the drawer always visible and open in larger screens'),
168 |     );
169 |     // Add radios for the footer
170 |     $form['mdl']['footer'] = array(
171 |         '#type' => 'radios',
172 |         '#title' => t('Footer mini or mega'),
173 |         '#default_value' => theme_get_setting('footer'),
174 |         '#options' => array('mega' => t('Mega-footer'), 'mini' => t('Mini-footer')),
175 |         '#description' => t('The footer can be mega or mini.'),
176 |     );
177 |     // Add the Manifest for Web applications
178 |     $form['mdl']['webAppManifest'] = array(
179 |         '#type' => 'checkbox',
180 |         '#title' => t('Web App Manifest'),
181 |         '#default_value' => theme_get_setting('webAppManifest'),
182 |         '#description' => t('The Manifest for Web applications is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the device home screen), direct what the user can launch and more importantly how they can launch it'),
183 |     );
184 | }
185 | 
186 | function mdl_preprocess_menu(&$variables, $hook) {
187 |     if(isset($hook) && $hook=='menu__main')
188 |     {
189 |         foreach($variables['items'] as $id=>$item)
190 |         {
191 |             $item['attributes']->addClass('mdl-navigation__link');
192 |         }
193 |     }
194 | }
195 | 
196 | /**
197 |  * Transform form elements to MDL input fields
198 |  **/
199 | function mdl_preprocess_textarea(&$variables) {
200 |   $variables['attributes']['class'][] = 'mdl-textfield__input';
201 | }
202 | 
203 | function mdl_preprocess_input(&$variables) {
204 |   if (in_array($variables['element']['#type'],[ 'textfield', 'search', 'password', 'email'])) {
205 |     $variables['attributes']['class'][] = 'mdl-textfield__input';
206 |     if (empty($variables['attributes']['placeholder'])) {
207 |       unset($variables['attributes']['placeholder']);
208 |     }
209 |   }
210 |   else if ($variables['element']['#type'] == 'submit') {
211 |     $variables['attributes']['class'][] = 'mdl-button';
212 |     $variables['attributes']['class'][] = 'mdl-js-button';
213 |     $variables['attributes']['class'][] = 'mdl-button--raised';
214 |     $variables['attributes']['class'][] = 'mdl-js-ripple-effect';
215 |     if ($variables['element']['#button_type'] == 'primary') {
216 |       $variables['attributes']['class'][] = 'mdl-button--accent';
217 |     }
218 | 
219 |     //$variables['value'] = $variables['attributes']['value'];
220 |     //unset($variables['attributes']['value']);
221 |   }
222 | }
223 | 
224 | function mdl_preprocess_select(&$variables) {
225 |   $variables['attributes']['class'][] = 'mdl-selectfield__select';
226 |   $variables['#attached']['library'][] = 'mdl/mdl.selectfield';
227 | }
228 | 
229 | function mdl_preprocess_form_element(&$variables) {
230 |   if (in_array($variables['type'], ['textfield', 'search', 'password', 'email'])) {
231 |     $variables['label_display'] = 'after';
232 |     $variables['label']['#attributes']['class'][] = 'mdl-textfield__label';
233 |     $variables['attributes'] = new Attribute();
234 | 
235 |     // special handling for input#keys[type=search] in SearchBlockForm
236 |     if ($variables['title_display'] != 'invisible') {
237 |       $variables['attributes']->addClass('mdl-textfield');
238 |       $variables['attributes']->addClass('mdl-js-textfield');
239 |       $variables['attributes']->addClass('mdl-textfield--floating-label');
240 |     }
241 |   }
242 |   if ($variables['type'] == 'textarea') {
243 |     $variables['label_display'] = 'after';
244 |     $variables['label']['#attributes']['class'][] = 'mdl-textfield__label';
245 |     $variables['attributes'] = new Attribute();
246 |     $variables['attributes']->addClass('mdl-textfield');
247 |     $variables['attributes']->addClass('mdl-js-textfield');
248 |     $variables['attributes']->addClass('mdl-textfield--floating-label');
249 |   } else if ($variables['type'] == 'select') {
250 |     $variables['label_display'] = 'after';
251 |     $variables['label']['#attributes']['class'][] = 'mdl-selectfield__label';
252 |     $variables['label']['#icon'] = 'arrow_drop_down';
253 |     $variables['label']['#icon_attributes']['class'][] = 'mdl-selectfield__icon';
254 |     $variables['attributes'] = new Attribute();
255 |     $variables['attributes']->addClass('mdl-selectfield');
256 |     $variables['attributes']->addClass('mdl-js-selectfield');
257 |     $variables['attributes']->addClass('mdl-selectfield--floating-label');
258 |   }
259 | }
260 | 
261 | function mdl_preprocess_form_element_label(&$variables) {
262 |   if ($variables['element']['#icon']) {
263 |     $variables['icon'] = $variables['element']['#icon'];
264 |     $variables['icon_attributes'] = new Attribute($variables['element']['#icon_attributes']);
265 |   }
266 | }
267 | 


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