@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/src/components/fab.pug

@@ -1,84 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("fab")
-    #horizontalLine
-    #verticalLineLeft
-    #verticalLineRight
-    .comparison.js
-      .render
-        div.display-flex.flex-1(flex-column style="position:relative")
-          +androidstatusbar('primary-700 dark')
-          +toolbar('primary-500 dark', ['menu'], ['search']) JS
-          .content(style="padding:16px 8px;")
-            .mdw-type(mdw-style="subtitle") Hover
-            div
-              label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-                input.mdw-selection__input(type="checkbox" name="hover" value="hover")
-                .mdw-selection__icon
-                .mdw-selection__label Open on Hover
-            .mdw-type(mdw-style="subtitle") Type
-            div
-              label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-                input.mdw-selection__input(type="radio" name="type" value="regular" checked)
-                .mdw-selection__icon
-                .mdw-selection__label Regular (Default)
-              label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-                input.mdw-selection__input(type="radio" name="type" value="mini")
-                .mdw-selection__icon
-                .mdw-selection__label Mini
-              label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-                input.mdw-selection__input(type="radio" name="type" value="extended")
-                .mdw-selection__icon
-                .mdw-selection__label Extended
-              label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-                input.mdw-selection__input(type="radio" name="type" value="extended-hover")
-                .mdw-selection__icon
-                .mdw-selection__label Extended on Hover
-            .mdw-layout(mdw-margin-bottom).docs-render-overlay
-              .mdw-layout__item
-                .mdw-fab
-                  .mdw-fab__button.mdw-button(mdw-theme-fill="accent dark")
-                    .mdw-fab__icon
-                      .mdw-fab__hidden-icon.material-icons add
-                      .mdw-fab__shown-icon.material-icons clear
-                    .mdw-fab__text Add
-                  .mdw-fab__speed-dial
-                    .mdw-button.mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_1
-                    .mdw-button.mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_2
-                    .mdw-button.mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_3
-                    .mdw-button.mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_4
-                    .mdw-button.mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_5
-        +androidnavbar
-    .comparison
-      .render
-        div.display-flex.flex-1(flex-column style="position:relative")
-          +androidstatusbar('primary-700 dark')
-          +toolbar('primary-500 dark', ['menu'], ['search']) CSS Only
-          .content(style="padding:16px 8px;") 
-            .mdw-layout(mdw-margin-bottom).docs-render-overlay
-              .mdw-layout__item
-                .mdw-fab#my-fab
-                  a.mdw-fab__close(href="#")
-                  a.mdw-fab__button.mdw-button(mdw-icon mdw-theme-fill="accent dark" href="#my-fab")
-                    .mdw-fab__icon
-                      .mdw-fab__hidden-icon.material-icons add
-                      .mdw-fab__shown-icon.material-icons clear
-                  .mdw-fab__speed-dial
-                    .mdw-button.mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_1
-                    .mdw-button.mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_2
-                    .mdw-button.mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_3
-                    .mdw-button.mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_4
-                    .mdw-button.mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_5
-        +androidnavbar
-  script(src='fab.min.js')

package/docs/src/components/layout.js

@@ -1,116 +0,0 @@
-import { setupMenuOptions } from '../menuoptions';
-import { attachEventListener } from '../sample-utils';
-
-
-const colspans = [
-  '1',
-  '25%', '50%', '75%', '100%',
-  '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
-];
-
-/**
- * @param {Element} target
- * @return {void}
- */
-function onLayoutItemClick(target) {
-  let colspan = target.getAttribute('mdw-colspan') || '1';
-  const index = colspans.indexOf(colspan);
-  colspan = colspans[index + 1] || '1';
-  target.setAttribute('mdw-colspan', colspan.toString());
-  target.firstElementChild.textContent = colspan.toString();
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const { name, value, checked } = event.target;
-  const layout = document.querySelector('.mdw-layout.docs-layout');
-
-  switch (name) {
-    case 'default-margins':
-      if (checked) {
-        layout.removeAttribute('mdw-margin');
-        layout.removeAttribute('mdw-gutter');
-        layout.removeAttribute('mdw-margin-tablet');
-        layout.removeAttribute('mdw-gutter-tablet');
-        layout.removeAttribute('mdw-margin-mobile');
-        layout.removeAttribute('mdw-gutter-mobile');
-      } else {
-        layout.setAttribute('mdw-margin', '24');
-        layout.setAttribute('mdw-gutter', '24');
-        layout.setAttribute('mdw-margin-tablet', '16');
-        layout.setAttribute('mdw-gutter-tablet', '16');
-        layout.setAttribute('mdw-margin-mobile', '8');
-        layout.setAttribute('mdw-gutter-mobile', '8');
-      }
-      break;
-    case 'top-margin':
-      if (checked) {
-        layout.setAttribute('mdw-margin-top', '');
-      } else {
-        layout.removeAttribute('mdw-margin-top');
-      }
-      break;
-    case 'bottom-margin':
-      if (checked) {
-        layout.setAttribute('mdw-margin-bottom', '');
-      } else {
-        layout.removeAttribute('mdw-margin-bottom');
-      }
-      break;
-    case 'stretch':
-      if (checked) {
-        layout.setAttribute('mdw-stretch', '');
-      } else {
-        layout.removeAttribute('mdw-stretch');
-      }
-      break;
-    case 'center':
-      if (checked) {
-        layout.setAttribute('mdw-center', '');
-      } else {
-        layout.removeAttribute('mdw-center');
-      }
-      break;
-    case 'style':
-      switch (value) {
-        case 'grid':
-          layout.setAttribute('mdw-grid', '');
-          break;
-        case 'flex':
-          layout.removeAttribute('mdw-grid');
-          break;
-        default:
-      }
-      break;
-    case 'dense':
-      if (checked) {
-        layout.setAttribute('mdw-dense', '');
-      } else {
-        layout.removeAttribute('mdw-dense');
-      }
-      break;
-    default:
-  }
-}
-
-/** @return {void} */
-function setupInteractions() {
-  const layoutItems = document.getElementsByClassName('mdw-layout__item');
-  for (let i = 0; i < layoutItems.length; i += 1) {
-    const item = layoutItems.item(i);
-    item.addEventListener('click', () => {
-      onLayoutItemClick(item);
-    });
-  }
-  attachEventListener(
-    document.querySelectorAll('input[name]'),
-    'change',
-    onOptionChange
-  );
-}
-
-setupInteractions();
-setupMenuOptions();

package/docs/src/components/layout.pug

@@ -1,104 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("layout")
-    p.mdw-type(style="text-align:center" mdw-baseline-top="36") Click on an element to change colspan
-    div.display-flex(style="padding:0 16px")
-      label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-        input.mdw-selection__input(type="checkbox" name="default-margins" checked)
-        .mdw-selection__icon
-        .mdw-selection__label Default Margins and Gutters
-      label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-        input.mdw-selection__input(type="checkbox" name="top-margin")
-        .mdw-selection__icon
-        .mdw-selection__label Top Margin
-      label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-        input.mdw-selection__input(type="checkbox" name="bottom-margin")
-        .mdw-selection__icon
-        .mdw-selection__label Bottom Margin
-    div.display-flex(style="padding:0 16px")
-      label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-        input.mdw-selection__input(type="radio" name="style" value="flex" checked)
-        .mdw-selection__icon
-        .mdw-selection__label Flex
-      label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-        input.mdw-selection__input(type="checkbox" name="stretch")
-        .mdw-selection__icon
-        .mdw-selection__label Stretch
-      label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-        input.mdw-selection__input(type="checkbox" name="center")
-        .mdw-selection__icon
-        .mdw-selection__label Center
-    div.display-flex(style="padding:0 16px")
-      label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-        input.mdw-selection__input(type="radio" name="style" value="grid")
-        .mdw-selection__icon
-        .mdw-selection__label Grid
-      label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-        input.mdw-selection__input(type="checkbox" name="dense")
-        .mdw-selection__icon
-        .mdw-selection__label Dense
-    .mdw-layout.docs-layout
-      .mdw-layout__item(mdw-rowspan="2")
-        .mdw-card(mdw-theme-fill="cyan-A100 light") 1
-      .mdw-layout__item(mdw-colspan="50%")
-        .mdw-card 50%
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="cyan-A200 light") 1
-      .mdw-layout__item
-        .mdw-card 1
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="cyan-A400 dark") 1
-      .mdw-layout__item(mdw-colspan="2")
-        .mdw-card 2
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="cyan-A700 dark") 1
-      .mdw-layout__item(mdw-rowspan="3")
-        .mdw-card 1
-      .mdw-layout__item(mdw-colspan="5")
-        .mdw-card(mdw-theme-fill="red-A100 light") 5
-      .mdw-layout__item
-        .mdw-card 1
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="red-A200 light") 1
-      .mdw-layout__item
-        .mdw-card 1
-      .mdw-layout__item(mdw-colspan="75%")
-        .mdw-card(mdw-theme-fill="red-A400 dark") 75%
-      .mdw-layout__item
-        .mdw-card 1
-      .mdw-layout__item(mdw-rowspan="5")
-        .mdw-card(mdw-theme-fill="red-A700 dark") 1
-      .mdw-layout__item(mdw-colspan="3")
-        .mdw-card 3
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="green-A100 light") 1
-      .mdw-layout__item
-        .mdw-card 1
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="green-A200 light") 1
-      .mdw-layout__item(mdw-colspan="75%")
-        .mdw-card 75%
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="green-A400 dark") 1
-      .mdw-layout__item
-        .mdw-card 1
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="green-A700 dark") 1
-      .mdw-layout__item
-        .mdw-card 1
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="purple-A100 light") 1
-      .mdw-layout__item(mdw-colspan="8")
-        .mdw-card 8
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="purple-A200 light") 1
-      .mdw-layout__item
-        .mdw-card 1
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="purple-A400 dark") 1
-      .mdw-layout__item(mdw-colspan="2")
-        .mdw-card 2
-      .mdw-layout__item
-        .mdw-card(mdw-theme-fill="purple-A700 dark") 1
-  script(src='layout.min.js')

package/docs/src/components/list.js

@@ -1,15 +0,0 @@
-import setupImageTargets from '../targetHandler';
-import { List } from '../../../components/list/index';
-import { setupMenuOptions } from '../menuoptions';
-
-/** @return {void} */
-function initializeMdwComponents() {
-  const lists = document.querySelectorAll('.js .mdw-list');
-  for (let i = 0; i < lists.length; i += 1) {
-    List.attach(lists.item(i));
-  }
-}
-
-initializeMdwComponents();
-setupMenuOptions();
-setupImageTargets();

package/docs/src/components/list.pug

@@ -1,293 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("list")
-    #horizontalLine
-    #verticalLineLeft
-    #verticalLineRight
-    .comparison.mdw-theme-list
-      .render
-        +androidstatusbar('primary-700 dark')
-        +toolbar('primary-500 dark', ['menu'], ['search', 'more_vert']) Topics
-        .content(style="padding-top:2px")
-          ul.mdw-list
-            li.mdw-list__item Attractions
-            li.mdw-list__item Dining
-            li.mdw-list__item Education
-            li.mdw-list__item Family
-            li.mdw-list__item Health
-            li.mdw-list__item Office
-            li.mdw-list__item Promotions
-            li.mdw-list__item Radio
-            li.mdw-list__item Recipes
-            li.mdw-list__item Sports
-            li.mdw-list__item Travel
-      +target('https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B54x0KDcs5U-UHcxOFd6NnQxeFE%2Fsingle-line-example-1.png')
-
-    .comparison.mdw-theme-list
-      .render
-        +androidstatusbar('primary-700 dark')
-        +toolbar('primary-500 dark', ['menu'], ['more_vert']) Topics
-        .content(style="padding-top:2px")
-          ul.mdw-list(mdw-divider)
-            li.mdw-list__item
-              .mdw-list__text Attractions
-            li.mdw-list__item
-              .mdw-list__text Dining
-            li.mdw-list__item
-              .mdw-list__text Education
-            li.mdw-list__item 
-              .mdw-list__text Family
-            li.mdw-list__item 
-              .mdw-list__text Health
-            li.mdw-list__item 
-              .mdw-list__text Office
-            li.mdw-list__item 
-              .mdw-list__text Promotions
-            li.mdw-list__item 
-              .mdw-list__text Radio
-            li.mdw-list__item 
-              .mdw-list__text Recipes
-            li.mdw-list__item 
-              .mdw-list__text Sports
-            li.mdw-list__item 
-              .mdw-list__text Travel
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3V2tZaHMwSXZuS2s/components-lists-keylines-single3.png')
-
-
-    .comparison.mdw-theme-list
-      .render
-        +androidstatusbar('primary-700 dark')
-        +toolbar('primary-500 dark', ['menu'], ['search', 'more_vert']) Topics
-        .content(style="padding-top:2px")
-          ul.mdw-list
-            li.mdw-list__item Attractions
-              .mdw-list__icon.material-icons local_activity
-            li.mdw-list__item Dining
-              .mdw-list__icon.material-icons local_dining
-            li.mdw-list__item Education
-              .mdw-list__icon.material-icons edit
-            li.mdw-list__item Family
-              .mdw-list__icon.material-icons people
-            li.mdw-list__item Health
-              .mdw-list__icon.material-icons healing
-            li.mdw-list__item Office
-              .mdw-list__icon.material-icons business
-            li.mdw-list__item Promotions
-              .mdw-list__icon.material-icons local_offer
-            li.mdw-list__item Radio
-              .mdw-list__icon.material-icons radio
-            li.mdw-list__item Recipes
-              .mdw-list__icon.material-icons book
-            li.mdw-list__item Sports
-              .mdw-list__icon.material-icons stars
-            li.mdw-list__item Travel
-              .mdw-list__icon.material-icons local_airport
-      +target('https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B54x0KDcs5U-a1hzNEpSb1N0RTA%2Fsingle-line-example-2.png')
-
-    .comparison.mdw-theme-list
-      .render
-        +androidstatusbar('accent-700 dark')
-        +toolbar('accent-500 dark', ['menu'], ['search']) Inbox
-        .content
-          ul.mdw-list(mdw-divider)
-            li.mdw-list__subheader Today
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Brunch this weekend?
-                .mdw-list__text-line
-                  span.mdw__primary-text Ali Connors
-                  |  — I'll be in your neighborhood doing errands this weekend. Do you want to meet?
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Summer BBQ
-                  span.mdw__secondary-text  4
-                .mdw-list__text-line
-                  span.mdw__primary-text to Alex, Scott, Jennifer
-                  |  — Wish I could come. but I'm out of town this weekend.
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Oui oui
-                .mdw-list__text-line
-                  span.mdw__primary-text Sandra Adams
-                  |  — Do you have Paris recommendations? Have you ever been?
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Birthday gift
-                .mdw-list__text-line
-                  span.mdw__primary-text Trevor Hansen
-                  |  — Have any ideas about what we should get Heidi for her birthday?
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Recipe to try
-                .mdw-list__text-line
-                  span.mdw__primary-text Britta Holt
-                  |  — We should eat this: Grated Squash, Corn, and tomatillo Tacos.
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Giants game
-                .mdw-list__text-line
-                  span.mdw__primary-text David Park
-                  |  — Any interest in seeing
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Montauk weekend
-                .mdw-list__text-line
-                  span.mdw__primary-text -----
-                  |  — -----
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsWGQ4OWVWREpLNkU/components-lists-keylines-two8.png')
-
-    .comparison.mdw-theme-list
-      .render
-        +androidstatusbar('accent-700 dark')
-        +toolbar('accent-500 dark', ['menu'], ['search']) Inbox
-        .content
-          ul.mdw-list(mdw-divider)
-            li.mdw-list__subheader Today
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Brunch this weekend?
-                .mdw-list__text-block
-                  span.mdw__primary-text Ali Connors 
-                  |  — I'll be in your neighborhood doing errands this weekend. Do you want to meet?
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Summer BBQ
-                  span.mdw__secondary-text  4
-                .mdw-list__text-block
-                  span.mdw__primary-text to Alex, Scott, Jennifer
-                  |  — Wish I could come. but I'm out of town this weekend.
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Oui oui
-                .mdw-list__text-block
-                  span.mdw__primary-text Sandra Adams
-                  |  — Do you have Paris recommendations? Have you ever been?
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Birthday gift
-                .mdw-list__text-block
-                  span.mdw__primary-text Trevor Hansen
-                  |  — Have any ideas about what we should get Heidi for her birthday?
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Recipe to try
-                .mdw-list__text-block 
-                  span.mdw__primary-text Britta Holt
-                  |  — We should eat this: Grated Squash, Corn, and tomatillo Tacos.
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Giants game
-                .mdw-list__text-block
-                  span.mdw__primary-text David Park
-                  |  — Any interest in seeing
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Montauk weekend
-                .mdw-list__text-block
-                  span.mdw__primary-text -----
-                  |  — -----
-      +target('https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B54x0KDcs5U-YkJoa3JqZmZvR3c%2Fthreeline-sample-1.png')
-
-
-    .comparison.mdw-theme-list.js
-      .render
-        +androidstatusbar('primary-700 dark')
-        +toolbar('primary-500 dark', ['menu'], ['more_vert']) Topics
-        .content(style="padding-top:2px")
-          ul.mdw-list
-            li.mdw-list__item
-              .mdw-list__text Attractions
-            .mdw-list__expander(mdw-theme-color="primary")
-              .mdw-list__item 
-                .mdw-list__text Dining
-                .mdw-list__secondary.material-icons expand_more
-              li.mdw-list__item Breakfast & brunch
-              li.mdw-list__item New American
-              li.mdw-list__item Sushi bars
-            li.mdw-list__item Education
-            li.mdw-list__item Family
-            li.mdw-list__item Health
-            li.mdw-list__item Office
-            li.mdw-list__item Promotions
-            li.mdw-list__item Radio
-            li.mdw-list__item Recipes
-            li.mdw-list__item Sports
-            li.mdw-list__item Travel
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3bl8zNGVqM19TNWM/components-listcontrols-expand2.png')
-
-    .comparison.mdw-theme-list.js
-      .render
-        +androidstatusbar('warn-700 dark')
-        +toolbar('warn-500 dark', ['menu'], ['search', 'check_circle']) Inbox (with JS)
-        .content
-          ul.mdw-list(mdw-divider)
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Ali Connors
-                .mdw-list__text-line
-                  span.mdw__primary-text Brunch this weekend?
-                .mdw-list__text-line I'll be in your neighborhood doing errands this weekend. Do you want to meet?
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line me, Scott, Jennifer
-                .mdw-list__text-line
-                  span.mdw__primary-text Summer BBQ
-                .mdw-list__text-line Wish I could come. but I'm out of town this weekend.
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Sandra Adams
-                .mdw-list__text-line
-                  span.mdw__primary-text Oui oui
-                .mdw-list__text-line Do you have Paris recommendations? Have you ever been?
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Trevor Hansen
-                .mdw-list__text-line
-                  span.mdw__primary-text Order Confirmation
-                .mdw-list__text-line Thank you for your recent order from Google.
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Britta Holt
-                .mdw-list__text-line
-                  span.mdw__primary-text Recipe to try
-                .mdw-list__text-line We should eat this: Grated Squash, Corn, and tomatillo Tacos.
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line David Park
-                .mdw-list__text-line
-                  span.mdw__primary-text Giants game
-                .mdw-list__text-line Any interest in seeing
-            li.mdw-list__item
-              .mdw-list__avatar.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Montauk weekend
-                .mdw-list__text-line
-                  span.mdw__primary-text -----
-                .mdw-list__text-line -----
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsdFNSZ1kzeXBfR1U/components-lists-keylines-three11.png')
-  script(src='list.min.js')