@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/docs/_mixins.pug

@@ -1,155 +0,0 @@
-include ../templates/index.pug
-
-mixin androidstatusbar(surfaceColor, lightness)
-  .androidstatusbar.mdw-theme(
-  mdw-surface=(surfaceColor ? surfaceColor : false)
-  mdw-light=(lightness=='light' ? '' : false)
-  mdw-dark=(lightness=='dark' ? '' : false))
-    div 12:30
-    i.material-icons(style="letter-spacing:2px;padding:0 2px") 
-
-mixin appbar(surfaceColor, lightness, start, end)
-  .mdw-appbar.mdw-elevation.mdw-theme(
-  style="z-index:4"
-  mdw-elevation="4"
-  mdw-surface=(surfaceColor ? surfaceColor : false)
-  mdw-light=(lightness=='light' ? '' : false)
-  mdw-dark=(lightness=='dark' ? '' : false))
-    .mdw-appbar__action
-      .mdw-appbar__start
-        each icon in start
-          +mdwButton({ icon:true }).material-icons= icon
-      .mdw-appbar__title
-        block
-      .mdw-appbar__end
-        each icon in end
-          +mdwButton({ icon:true })(mdw-more-button=(icon === 'more_vert')).material-icons= icon
-mixin androidnavbar
-  .androidnavbar
-    i.material-icons.back-button 
-    i.material-icons 
-    i.material-icons 
-mixin target(url)
-  .target(style=`background-image: url(${url})`)
-
-mixin navListItem(key, icon, name, activatedKey, color="secondary contrast")
-  li.mdw-list__item
-    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(
-    aria-selected=(activatedKey==key ? 'true' : 'false')
-    aria-current=(activatedKey==key ? 'page' : false)
-    href=(key + ".html")
-    mdw-ink=color
-    )
-      if (icon)
-        .mdw-list__icon.mdw-theme.material-icons(mdw-ink="medium")=icon
-      .mdw-list__text
-        .mdw-list__text-block=name
-
-
-mixin header(activated)
-  doctype html
-  html.mdw-layout.mdw-theme(lang='en' mdw-surface="binary" mdw-light)
-    head
-      title Material Design Web
-      meta(charset='utf-8')
-      meta(content='IE=edge', http-equiv='X-UA-Compatible')
-      meta(content='Material Design Web - CSS/JS Framework', name='description')
-      meta(content="width=device-width, initial-scale=1, viewport-fit=cover", name='viewport')
-      meta(name="theme-color" content="#C2185B")
-      meta(name="apple-mobile-web-app-status-bar-style" content="black-translucent")
-      meta(name="apple-mobile-web-app-capable" content="yes")
-      link(rel='stylesheet' href="https://fonts.googleapis.com/icon?family=Material+Icons")
-      link(rel='stylesheet' href='//fonts.googleapis.com/css?family=Roboto:300,400,500')
-      link(rel='stylesheet' href='//fonts.googleapis.com/css?family=Merriweather:300,400,500')
-      link(rel='stylesheet' href='docs.min.css')
-      link(rel='stylesheet' href='spec.min.css')
-      link(rel='stylesheet' href='theme-default.min.css' title="Default Theme")
-      link(rel='stylesheet' href='theme-default-fallbacks.min.css' media="all\\0" title="Default Theme")
-      link(rel='stylesheet' disabled href='theme-colored.min.css' title="Colored Theme")
-      link(rel='stylesheet' disabled href='theme-colored-fallbacks.min.css' media="all\\0" title="Colored Theme")
-      script(src='prerender.min.js')
-    body.mdw-layout__body.mdw-theme(mdw-surface="background" mdw-sidesheet-toggle="dismissible" mdw-sidesheet-style="modal")
-      .mdw-layout__menus
-      .mdw-layout__dialogs
-      nav#docs-navdrawer.mdw-layout__navdrawer
-        .mdw-layout__sheet-content.mdw-theme(mdw-surface="background" mdw-border-ink)
-          ul.mdw-list(style="padding-bottom:64px")
-            li.mdw-list__item
-              a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(
-              aria-current=activated=='Home'
-              aria-selected=(activatedKey=='Home' ? 'true' : 'false')
-              href='index.html'
-              mdw-ink="default")
-                .mdw-list__text Home
-            li.mdw-list__item(aria-expanded="true")
-              .mdw-list__content.mdw-list__subheader
-                .mdw-list__text.mdw-theme(mdw-ink="medium") Core
-                .mdw-list__secondary.mdw-theme.material-icons(mdw-ink="medium") expand_more
-              ul.mdw-list
-                +navListItem('color', 'compare', 'Color', activated, 'primary contrast')
-                +navListItem('overlay', 'tonality', 'Overlay', activated, 'primary contrast')
-                +navListItem('ripple', 'center_focus_strong', 'Ripple', activated, 'primary contrast')
-                +navListItem('transition', 'open_in_new', 'Transition', activated, 'primary contrast')
-            li.mdw-list__item.mdw-theme(aria-expanded="true")
-              .mdw-list__content.mdw-list__subheader
-                .mdw-list__text.mdw-theme(mdw-ink="medium") Components
-                .mdw-list__secondary.mdw-theme.material-icons(mdw-ink="medium") expand_more
-              ul.mdw-list
-                +navListItem('appbar', 'web_asset', 'App Bar', activated)
-                +navListItem('bottomnav', 'call_to_action', 'Bottom Navigation', activated)
-                +navListItem('button', 'crop_landscape', 'Button', activated)
-                +navListItem('card', 'crop_square', 'Card', activated)
-                +navListItem('chip', 'check_circle', 'Chip', activated)
-                +navListItem('datatable', 'format_align_justify', 'Data Table', activated)
-                +navListItem('dialog', 'select_all', 'Dialog', activated)
-                +navListItem('elevation', 'layers', 'Elevation', activated)
-                +navListItem('fab', 'add_circle', 'Floating Action Button', activated)
-                +navListItem('grid', 'view_compact', 'Grid', activated)
-                +navListItem('layout', 'view_quilt', 'Layout', activated)
-                +navListItem('list', 'view_list', 'List', activated)
-                +navListItem('menu', 'picture_in_picture', 'Menu', activated)
-                +navListItem('progress', 'timelapse', 'Progress', activated)
-                +navListItem('selection', 'toggle_on', 'Selection', activated)
-                +navListItem('slider', 'tune', 'Slider', activated)
-                +navListItem('snackbar', 'video_label', 'Snackbar', activated)
-                +navListItem('tab', 'tab', 'Tab', activated)
-                +navListItem('textfield', 'text_fields', 'Text Field', activated)
-                +navListItem('tooltip', 'info', 'Tooltip', activated)
-                +navListItem('type', 'font_download', 'Typography', activated)
-            li.mdw-list__item(aria-expanded="true")
-              .mdw-list__content.mdw-list__subheader
-                .mdw-list__text.mdw-theme(mdw-ink="medium") Adapters
-                .mdw-list__secondary.mdw-theme.material-icons(mdw-ink="medium") expand_more
-              ul.mdw-list
-                +navListItem('dom', 'calendar_view_day', 'DOM', activated)
-                +navListItem('search', 'search', 'Search', activated)
-      a.mdw-layout__scrim(href='#' tabindex="-1")
-      .mdw-layout__appbar.mdw-appbar.mdw-theme(mdw-autohide="mobile tablet" mdw-surface="secondary 500" mdw-dark)
-        .mdw-layout__appbar-shape
-        .mdw-appbar__action
-          .mdw-appbar__start
-            .mdw-tooltip__wrapper
-              +mdwButton({ icon:true }).mdw-tooltip__target.material-icons.mdw-layout__navdrawer-toggle(href="#docs-navdrawer") menu
-              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="start") Menu
-          .mdw-appbar__title=activated
-          #docs-menu-buttons.mdw-appbar__end
-            .mdw-tooltip__wrapper
-              +mdwButton({ icon: true })#altThemeButton.mdw-tooltip__target.material-icons(mdw-overlay-default="medium" mdw-overlay-off="activated" aria-pressed="false") palette
-              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="end") Alt Theme
-            .mdw-tooltip__wrapper
-              +mdwButton({ icon: true })#darkModeButton.mdw-tooltip__target.material-icons(mdw-overlay-default="medium" mdw-overlay-off="activated" aria-pressed="false") brightness_3
-              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="end") Dark Mode
-            .mdw-tooltip__wrapper
-              +mdwButton({ icon: true })#rtlButton.mdw-tooltip__target.material-icons(mdw-overlay-default="medium" mdw-overlay-off="activated" aria-pressed="false") format_align_right
-              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="end") Right-to-Left
-            .mdw-tooltip__wrapper
-              +mdwButton({ icon: true })#largeFontButton.mdw-tooltip__target.material-icons(mdw-overlay-default="medium" mdw-overlay-off="activated" aria-pressed="false") format_size
-              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark mdw-align="end") 200% Text
-      .mdw-layout__fab
-      .mdw-layout__snackbar
-      .mdw-layout__content
-        .mdw-layout__content-page
-          block
-    script(src='postrender.min.js')
-    script(src='entire-framework.min.js')
-    script(src='docs.common.min.js')

package/docs/pages/appbar.pug

@@ -1,78 +0,0 @@
-include ../_mixins.pug
-
-+header("appbar")
-  .comparison.clipped
-    .render
-      +androidstatusbar('background 400', 'light')
-      +appbar('background 50', 'light', ['menu'], ['search', 'favorite', 'more_vert']) Title
-      .content.mdw-theme(mdw-surface="background alt")
-
-  .comparison.clipped
-    .render
-      +androidstatusbar('black', 'dark')
-      +appbar('background 900', 'dark', ['menu'], ['search', 'favorite', 'more_vert']) Title
-      .content.mdw-theme(mdw-surface="background alt")
-
-  .comparison.clipped
-    .render
-      +androidstatusbar('blue 800', 'dark')
-      +appbar('blue 700', 'dark', ['menu'], ['search', 'favorite', 'more_vert']) Title
-      .content.mdw-theme(mdw-surface="background alt")
-
-  .comparison.clipped-304
-    .render
-      +androidstatusbar('')
-      // Elevation and z-index only for demo
-      // Normally handled with .mdw-layout__appbar
-      .mdw-appbar.mdw-elevation(mdw-dense mdw-elevation="4" style="z-index:4")
-        .mdw-appbar__action
-          .mdw-appbar__start
-            +mdwButton({ icon: true }).material-icons menu
-          .mdw-appbar__title Dense (Desktop)
-          .mdw-appbar__end
-            +mdwButton({ icon: true }).material-icons more_vert
-      .content.mdw-theme(mdw-surface="background alt")
-
-  .comparison.clipped-304
-    .render
-      +androidstatusbar('')
-      .mdw-appbar.mdw-elevation(mdw-prominent mdw-dense mdw-elevation="4" style="z-index:4")
-        .mdw-appbar__action
-          .mdw-appbar__start
-            +mdwButton({ icon: true }).material-icons menu
-          .mdw-appbar__title Prominent Dense
-          .mdw-appbar__end
-            +mdwButton({ icon: true }).material-icons search
-            +mdwButton({ icon: true }).material-icons more_vert
-      .content.mdw-theme(mdw-surface="background alt")
-
-  .comparison.clipped-304
-    .render
-      +androidstatusbar('')
-      .mdw-appbar.mdw-elevation(mdw-elevation="4" style="z-index:4")
-        .mdw-appbar__action
-          .mdw-appbar__start
-            .mdw-tooltip__wrapper
-              +mdwButton({ icon: true }).mdw-tooltip__target.material-icons arrow_back
-              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark) Back
-          .mdw-appbar__end
-            .mdw-tooltip__wrapper
-              +mdwButton({ icon: true }).mdw-tooltip__target(mdw-more-button).material-icons more_vert
-              .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark) More
-        .mdw-appbar__content
-          label.mdw-textfield.mdw-theme(mdw-ink="primary contrast" style="font-size: 1.5rem")
-            input.mdw-textfield__input(value="Project Properties" placeholder=" ")
-            .mdw-textfield__border
-              .mdw-textfield__outline-gap
-                .mdw-textfield__label Title
-          div(style="height:8px")
-          label.mdw-textfield.mdw-theme(mdw-ink="primary contrast")
-            input.mdw-textfield__input(value="Sync with the team abo" placeholder=" ")
-            .mdw-textfield__border
-              .mdw-textfield__outline-gap
-                .mdw-textfield__label Description
-          div(style="height:24px")
-            // Spec says 16dp, but it's actually 24dp
-      .content.mdw-theme(mdw-surface="background alt")
-
-  script(src='appbar.min.js')

package/docs/pages/bottomnav.pug

@@ -1,137 +0,0 @@
-include ../_mixins.pug
-
-+header("bottomnav")
-  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
-    .mdw-grid__item(mdw-colspan="100%")
-      h5.mdw-type(mdw-baseline-next="36") Bottom navigation bars allow movement between primary destinations in an app.
-      p.mdw-typeBottom navigation bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content.component-sample
-        .render-fill
-          +androidstatusbar('background 900', 'dark')
-          +appbar('background 800', 'dark', [], []) Bottom Navigation
-          .content
-          nav.mdw-bottomnav
-            a.mdw-bottomnav__item.mdw-theme(mdw-ink="primary" aria-selected="true")
-              .mdw-bottomnav__icon
-                i.material-icons history
-              .mdw-bottomnav__label Recents
-            a.mdw-bottomnav__item.mdw-theme(mdw-ink="primary" aria-selected="false")
-              .mdw-bottomnav__icon
-                .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="")
-                i.material-icons favorite
-              .mdw-bottomnav__label Favorites
-            a.mdw-bottomnav__item.mdw-theme(mdw-ink="primary" aria-selected="false")
-              .mdw-bottomnav__icon
-                .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="99+")
-                i.material-icons near_me
-              .mdw-bottomnav__label Nearby
-          +androidnavbar
-    .mdw-grid__item(mdw-colspan="4")
-      .mdw-type(mdw-style="subtitle") Javascript
-      .docs-option-list
-        +mdwSelection({ink:'secondary', type:'radio', name:'javascript', value:'required', checked:true}) Required
-        +mdwSelection({ink:'secondary', type:'radio', name:'javascript', value:'optional', disabled:true}) Optional
-        +mdwSelection({ink:'secondary', type:'radio', name:'javascript', value:'none', disabled:true}) None
-      .mdw-type(mdw-style="subtitle") Ink
-      .docs-option-list
-        +mdwSelection({ink:'secondary', type:'radio', name:'ink', value:'default'}) Default
-        +mdwSelection({ink:'secondary', type:'radio', name:'ink', value:'primary', checked:true}) Primary
-        +mdwSelection({ink:'secondary', type:'radio', name:'ink', value:'secondary'}) Secondary
-        +mdwSelection({ink:'secondary', type:'radio', name:'ink', value:'warn'}) Warn
-        +mdwSelection({ink:'secondary', type:'radio', name:'ink', value:'purple'}) Purple
-      .mdw-type(mdw-style="subtitle") Surface
-      .docs-option-list
-        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'none', checked:true}) None
-        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'card'}) Card
-        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'primary 500 dark'}) Primary 500 (Dark)
-        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'secondary 100 light'}) Secondary 100 (Light)
-        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'warn 200 light'}) Warn 200 (Light)
-        +mdwSelection({ink:'secondary', type:'radio', name:'surface', value:'green 700 dark'}) Green 700 (Dark)
-    .mdw-grid__item(mdw-colspan="100%")
-    .mdw-grid__item(mdw-colspan="6")
-      h6.mdw-type HTML Code
-      .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card" mdw-border-ink)
-        +mdwButton({ icon: true, ink:'secondary' })#usePug(aria-pressed="false" mdw-overlay-off="activated") PUG
-    .mdw-grid__item(mdw-colspan="4")
-      h6.mdw-type Javascript Code
-      .mdw-card.mdw-theme.component-code.component-js(mdw-surface="card" mdw-border-ink)
-    .mdw-grid__item(mdw-colspan="100%")
-      h6.mdw-type Samples
-    .mdw-grid__item.display-flex(mdw-colspan="6")
-      .render-fill.mdw-theme(mdw-surface="white" mdw-light)
-        +androidstatusbar('')
-        +appbar('', '', [], []) Light Theme
-        .content(style="padding: 16px 0")
-          ul
-            li Radio buttons
-            li Badges
-        nav.mdw-bottomnav.mdw-theme(mdw-ink="primary medium")
-          a.mdw-bottomnav__item(aria-selected="true")
-            .mdw-bottomnav__icon.material-icons history
-            .mdw-bottomnav__label Recents
-          a.mdw-bottomnav__item(aria-selected="false")
-            .mdw-bottomnav__icon
-              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="")
-              .material-icons favorite
-            .mdw-bottomnav__label Favorites
-          a.mdw-bottomnav__item(aria-selected="false")
-            .mdw-bottomnav__icon.material-icons near_me
-            .mdw-bottomnav__label Nearby
-        +androidnavbar
-    .mdw-grid__item.display-flex(mdw-colspan="6")
-      .render-fill.js.mdw-theme(mdw-surface="black" mdw-dark)
-        +androidstatusbar('')
-        +appbar('', '', [], []) Dark Theme
-        .content(style="padding: 16px 0")
-          ul
-            li Disappearing Labels
-            li Badges
-            li Shifting labels
-        nav.mdw-bottomnav(mdw-shifting)
-          a.mdw-bottomnav__item
-            .mdw-bottomnav__icon.material-icons tv
-            .mdw-bottomnav__label Movies
-          a.mdw-bottomnav__item(aria-selected="true")
-            .mdw-bottomnav__icon
-              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge)
-              .material-icons music_note
-            .mdw-bottomnav__label Music
-          a.mdw-bottomnav__item(aria-selected="false")
-            .mdw-bottomnav__icon
-              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="88")
-              .material-icons book
-            .mdw-bottomnav__label Books
-          a.mdw-bottomnav__item(aria-selected="false")
-            .mdw-bottomnav__icon
-              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="888+")
-              .material-icons assignment
-            .mdw-bottomnav__label Newsstand
-        +androidnavbar
-    .mdw-grid__item.display-flex(mdw-colspan="6")
-      .render-fill.js.mdw-theme
-        +androidstatusbar('')
-        +appbar('', '', [], []) Tablet
-        .content(style="padding: 16px 0")
-          ul
-            li Disappearing Labels
-            li Badges
-        nav.mdw-bottomnav.mdw-theme(mdw-surface="teal 700" mdw-dark mdw-shifting)
-          a.mdw-bottomnav__item(aria-selected="true")
-            .mdw-bottomnav__icon
-              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge="4")
-              .material-icons tv
-            .mdw-bottomnav__label Movies
-          a.mdw-bottomnav__item(aria-selected="false")
-            .mdw-bottomnav__icon
-              .mdw-bottomnav__badge.mdw-theme(mdw-surface="warn 500" mdw-ink="white" mdw-badge)
-              .material-icons music_note
-            .mdw-bottomnav__label Music
-          a.mdw-bottomnav__item(aria-selected="false")
-            .mdw-bottomnav__icon.material-icons book
-            .mdw-bottomnav__label Books
-          a.mdw-bottomnav__item(aria-selected="false")
-            .mdw-bottomnav__icon.material-icons assignment
-            .mdw-bottomnav__label Newsstand
-        +androidnavbar
-  script(src='bottomnav.min.js')

package/docs/pages/button.pug

@@ -1,121 +0,0 @@
-include ../../templates/index.pug
-include ../_mixins.pug
-
-mixin button-test
-  .display-flex.flex-wrap
-    +mdwButton Text
-    +mdwButton({ raised:true }) Contained
-    +mdwButton({ raised:true, disabled:true }) Disabled
-    +mdwButton({ borderInk:'default'}) Outlined
-  div(style="height:24px")
-  .display-flex.flex-wrap
-    +mdwButton({ ink:'primary' }) Text
-    +mdwButton({ ink:'primary', raised:true }) Contained
-    +mdwButton({ ink:'primary', raised:true, disabled:true }) Disabled
-    +mdwButton({ ink:'secondary' }) Secondary
-    +mdwButton({ ink:'secondary', borderInk:true }) Outlined
-  div(style="height:24px")
-  .display-flex.flex-wrap
-    +mdwButton({ surface:'primary 500', dark:true }) Text
-    +mdwButton({ surface:'primary 500', dark:true, raised:true }) Contained
-    +mdwButton({ surface:'primary 500', dark:true, raised:true, disabled:true }) Disabled
-    +mdwButton({ surface:'secondary 100', light:true, raised:true }) Outlined
-  div(style="height:24px")
-  .display-flex.flex-wrap
-    +mdwButton({ icon:true }).material-icons favorite
-    +mdwButton({ ink:"warn", dark:true, icon:true }).material-icons favorite
-    +mdwButton({ surface:"warn 500", dark:true, icon:true }).material-icons favorite
-    +mdwButton({ surface:"warn 500", dark:true, icon:true, raised:true }).material-icons favorite
-    +mdwButton({ surface:"warn 500", dark:true, icon:true, raised:true, disabled:true }).material-icons favorite
-    +mdwButton({ icon:true, disabled:true }).material-icons favorite
-
-+header("button")
-  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
-    .mdw-grid__item(mdw-colspan="100%")
-      .mdw-grid__content
-        h5.mdw-type(mdw-baseline-next="36") Buttons communicate the action that will occur when the user touches them.
-        p.mdw-type Material buttons trigger an ink reaction on press. They may display text, imagery, or both.
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        .component-sample
-          .display-flex
-            a.mdw-button.mdw-theme(mdw-ink="secondary") Button
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        .mdw-type(mdw-style="subtitle") Javascript
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required', disabled:true}) Required
-          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'optional', checked:true}) Optional
-          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'none'}) None
-        .mdw-type(mdw-style="subtitle") Overlay
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'overlay-hover', checked:true}) Hover
-          +mdwSelection({ink:'secondary', name:'overlay-focus', checked:true}) Focus
-          +mdwSelection({ink:'secondary', name:'overlay-activated', checked:true}) Activated
-        .mdw-type(mdw-style="subtitle") Options
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'icon'}) Icon
-          +mdwSelection({ink:'secondary', name:'raised'}) Raised
-          +mdwSelection({ink:'secondary', name:'ripple', checked:true}) Ripple
-          +mdwSelection({ink:'secondary', name:'disabled'}) Disabled
-        .mdw-type(mdw-style="subtitle") Outline
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:'none', checked:true}) None
-          +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:'default'}) Default
-          +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:''}) Ink
-        .mdw-type(mdw-style="subtitle") Activated Toggle
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'', checked:true}) None
-          +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'false'}) Off
-          +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'true'}) On
-        .mdw-type(mdw-style="subtitle") Ink
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'default'}) Default
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'primary'}) Primary
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'secondary', checked:true}) Secondary
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'warn contrast'}) Warn Contrast
-          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'purple'}) Purple
-        .mdw-type(mdw-style="subtitle") Surface
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'none', checked:true}) Default
-          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'primary 500 dark'}) Primary (Dark)
-          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'secondary 100 light'}) Secondary (Light)
-          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'warn 200 light'}) Warn 200 (Light)
-          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'green 700 dark'}) Green 700 (Dark)
-        .mdw-type(mdw-style="subtitle") HTML Element Type
-        .docs-option-list
-          +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'a', checked:true}) HTMLAnchorElement
-          +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'button'}) HTMLButtonElement
-          +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'div'}) HTMLDivElement
-    .mdw-grid__item(mdw-colspan="100%" style="max-height:0")
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        h6.mdw-type HTML Code
-        .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card" mdw-border-ink)
-          +mdwButton({ icon:true, ink:'secondary' })#usePug(aria-pressed="false" mdw-overlay-off="activated") PUG
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        h6.mdw-type Javascript Code
-        .mdw-card.mdw-theme.component-code.component-js(mdw-surface="card" mdw-border-ink)
-    .mdw-grid__item(mdw-colspan="100%")
-      .mdw-grid__content
-        h6.mdw-type Samples
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        .render-fill.mdw-theme
-          +androidstatusbar('')
-          +appbar('', '', [], []) CSS Only
-          .content.mdw-theme(style="padding: 16px 0" mdw-surface="binary")
-            div
-              +button-test
-          +androidnavbar
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content
-        .render-fill.js.mdw-theme
-          +androidstatusbar('')
-          +appbar('', '', [], []) Javascript Version
-          .content.mdw-theme(style="padding: 16px 0" mdw-surface="binary")
-            div
-              +button-test
-          +androidnavbar
-  script(src='button.min.js')

package/docs/pages/card.pug

@@ -1,74 +0,0 @@
-include ../_mixins.pug
-
-+header("card")
-  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
-    .mdw-grid__item(mdw-colspan="100%")
-      h5.mdw-type(mdw-baseline-next="36") Cards contain content and actions about a single subject.
-      p.mdw-type(mdw-baseline-next="36") Cards are surfaces that display content and actions on a single topic.
-      p.mdw-type They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content.component-sample
-        .display-flex
-          .mdw-card.mdw-theme(mdw-raised="focus-within" mdw-surface="card" mdw-border-ink)
-            +mdwButton().mdw-card__button
-            .mdw-card__start
-              .mdw-card__thumbnail.material-icons(style="font-size:40px") account_circle
-            .mdw-card__end(style="margin:8px 0")
-              +mdwButton({ icon: true }).material-icons clear
-            h6.mdw-card__header(mdw-two-line) Title goes here
-            .mdw-card__subheader Secondary text
-            .mdw-card__media(mdw-ratio="16:9")
-              img.mdw-card__image(src="https://free-images.com/md/f673/sunset_sky_red_gold_0.jpg")
-            .mdw-card__supporting-text Grayhound divisively hello coldly wonderfully marginally far upon excluding.
-            .mdw-card__actions
-                +mdwButton({ ink:'secondary' }) Action 1
-                +mdwButton({ ink:'secondary' }) Action 2
-                span
-                +mdwButton({ icon: true }).material-icons more_vert
-    .mdw-grid__item(mdw-colspan="4")
-      .mdw-type(mdw-style="subtitle") Javascript
-      .docs-option-list
-        +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required', disabled:true}) Required
-        +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'optional', disabled:true}) Optional
-        +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'none', checked:true}) None
-      .mdw-type(mdw-style="subtitle") Elevation
-      .docs-option-list
-        +mdwSelection({ink:'secondary', name:'elevation', type:'radio', value:'auto', checked:true}) Auto
-        +mdwSelection({ink:'secondary', name:'elevation', type:'radio', value:'0'}) 0dp
-        +mdwSelection({ink:'secondary', name:'elevation', type:'radio', value:'1'}) 1dp
-        +mdwSelection({ink:'secondary', name:'elevation', type:'radio', value:'8'}) 8dp
-      .mdw-type(mdw-style="subtitle") Raise
-      .docs-option-list
-        +mdwSelection({ink:'secondary', name:'raise-focus-within', value:'focus-within', checked:true}) On Focus Within
-        +mdwSelection({ink:'secondary', name:'raise-hover', value:'hover'}) On Hover
-      .mdw-type(mdw-style="subtitle") Media Placement
-      .docs-option-list
-        +mdwSelection({ink:'secondary', name:'media-placement', type:'radio', value:'none'}) None
-        +mdwSelection({ink:'secondary', name:'media-placement', type:'radio', value:'top'}) Top
-        +mdwSelection({ink:'secondary', name:'media-placement', type:'radio', value:'middle', checked:true}) Middle
-        +mdwSelection({ink:'secondary', name:'media-placement', type:'radio', value:'bottom'}) Bottom
-      .mdw-type(mdw-style="subtitle") Media Ratio
-      .docs-option-list
-        +mdwSelection({ink:'secondary', name:'media-ratio', type:'radio', value:'none'}) None
-        +mdwSelection({ink:'secondary', name:'media-ratio', type:'radio', value:'16:9', checked:true}) 16:9
-        +mdwSelection({ink:'secondary', name:'media-ratio', type:'radio', value:'3:2'}) 3:2
-        +mdwSelection({ink:'secondary', name:'media-ratio', type:'radio', value:'4:3'}) 4:3
-        +mdwSelection({ink:'secondary', name:'media-ratio', type:'radio', value:'1:1'}) 1:1
-      .mdw-type(mdw-style="subtitle") Actions
-      .docs-option-list
-        +mdwSelection({ink:'secondary', name:'primary-action', checked:true}) Primary
-        +mdwSelection({ink:'secondary', name:'secondary-actions', checked:true}) Secondary
-        +mdwSelection({ink:'secondary', name:'close-action', checked:true}) Close
-      .mdw-type(mdw-style="subtitle") Surface
-      .docs-option-list
-        +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'card'}) Card
-        +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'primary dark', checked:true}) Primary (Dark)
-        +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'secondary 100 light'}) Secondary 100 (Light)
-        +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'warn 200 light'}) Warn 200 (Light)
-        +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'green 700 dark'}) Green 700 (Dark)
-    .mdw-grid__item(mdw-colspan="100%" style="max-height:0")
-    .mdw-grid__item(mdw-colspan="6")
-      h6.mdw-type HTML Code
-      .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card")
-        +mdwButton({ icon:true, ink:'secondary' })#usePug(aria-pressed="false" mdw-overlay-off="activated") PUG
-  script(src='card.min.js')