@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/docs/docs.scss

@@ -1,331 +0,0 @@
-@use './_flex.scss';
-
-// Material Icon incorrectly changes RTL direction
-.material-icons {
-  direction: inherit;
-}
-
-.comparison {
-  display: flex;
-  position: relative;
-  flex-direction: row;
-}
-
-.androidstatusbar {
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-
-  block-size: 24px;
-  padding: 0 8px;
-
-  z-index: 16;
-
-  color: white;
-
-  font-size: 14px;
-
-  .mdw-theme[mdw-light] &,
-  .mdw-theme[mdw-dark] .mdw-theme[mdw-light] & {
-    &:not([mdw-surface]) {
-      background-color: #E0E0E0;
-      color: rgba(0, 0, 0, 0.87);
-    }
-  }
-
-  .mdw-theme[mdw-dark] &,
-  .mdw-theme[mdw-light] .mdw-theme[mdw-dark] & {
-    &:not([mdw-surface]) {
-      background-color: black;
-      color: rgba(255, 255, 255, 1);
-    }
-  }
-
-  .material-icons {
-    font-size: 18px;
-  }
-}
-
-.content {
-  flex-direction: column;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  overflow-y: auto;
-
-  flex: 1;
-  -webkit-overflow-scrolling: touch;
-}
-
-.render,
-.target {
-  max-inline-size: 360px;
-  inline-size: 360px;
-}
-
-.render-fill {
-  flex: 1;
-}
-
-.render,
-.render-fill {
-  overflow-x: hidden;
-
-  box-sizing: border-box;
-  max-block-size: 640px;
-  border-style: solid;
-  border-width: 1px;
-
-  z-index: 1;
-
-  border-color: #eee;
-
-  .mdw-theme[mdw-light] & {
-    border-color: rgba(0, 0, 0, 0.12);
-  }
-
-  .mdw-theme[mdw-dark] & {
-    border-color: rgba(255, 255, 255, 0.12);
-  }
-}
-
-.docs-option-list {
-  & > .mdw-selection {
-    margin: 16px 8px;
-  }
-}
-
-.render,
-.render-fill,
-.target {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-
-  block-size: 640px;
-  margin: 8px;
-
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  .clipped & {
-    max-block-size: 190px;
-  }
-
-  .clipped-236 & {
-    max-block-size: 236px;
-  }
-
-  .clipped-300 & {
-    max-block-size: 300px;
-  }
-
-  .clipped-304 & {
-    max-block-size: 304px;
-  }
-}
-
-.horizontal-controls {
-  display: inline-flex;
-
-  inline-size: 100%;
-
-  & > :not(:last-child) {
-    margin-inline: 0 16px;
-  }
-
-  [dir="rtl"] & > :not(:last-child) {
-    margin-inline: 16px 0;
-  }
-}
-
-.docs-render-overlay {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0;
-  flex-direction: row-reverse;
-}
-
-.component-sample {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-
-  min-block-size: 360px;
-  flex: 1;
-  border-style: solid;
-  border-width: 1px;
-  padding: 24px;
-
-  border-radius: 2px;
-
-  .mdw-theme[mdw-light] & {
-    border-color: rgba(0, 0, 0, 0.12);
-  }
-
-  .mdw-theme[mdw-dark] & {
-    border-color: rgba(255, 255, 255, 0.12);
-  }
-}
-
-.component-sample__container {
-  display: inline-flex;
-}
-
-.component-code {
-  display: flex;
-  position: relative;
-  align-items: flex-start;
-  justify-content: center;
-
-  flex-grow: 1;
-  padding: 24px;
-
-  font-family: monospace;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-#usePug {
-  position: absolute;
-  inset-block-start: 4px;
-  inset-inline: auto 4px;
-
-  margin: 0;
-
-  font-size: 12px;
-
-  :root[dir="rtl"] {
-    inset-inline: 4px auto;
-  }
-}
-
-.androidnavbar {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-around;
-
-  min-block-size: 48px;
-  block-size: 48px;
-  padding: 0 30px;
-
-  background-color: black;
-  color: white;
-
-  .material-icons {
-    font-size: 20px;
-  }
-
-  .material-icons.back-button {
-    transform: rotate(90deg);
-  }
-}
-
-.custom-no-results-indicator {
-  min-block-size: 48px;
-  margin: 8px;
-}
-
-#Vintage50Input {
-  font-size: sp(34);
-}
-
-.type-comparison {
-  .content {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-
-    margin: 8px;
-  }
-
-  .target {
-    block-size: 568px;
-    inline-size: 760px;
-    margin-block-start: 42px;
-    background-position-x: -200px;
-  }
-
-  .mdw-type {
-    position: relative; // For tooltip position
-  }
-}
-
-.type-comparison-2 {
-  .target {
-    block-size: 208px;
-    inline-size: 760px;
-  }
-}
-
-.type-comparison-3 {
-  .target {
-    block-size: 300px;
-    inline-size: 360px;
-  }
-}
-
-.docs-grid {
-  .mdw-card {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: 16px 8px;
-
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-  }
-}
-
-.docs-elevation__item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  padding: 24px 0;
-
-  border-radius: 4px;
-}
-
-.docs-tab {
-  .component-sample__container {
-    inline-size: 100%;
-
-    > .mdw-tab {
-      inline-size: 100%;
-    }
-  }
-}
-
-.demo-core-item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  block-size: 5em;
-  min-inline-size: 5em;
-  margin: 4px;
-
-  cursor: pointer;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-
-  border-radius: 8px;
-
-  &[demo-round] {
-    max-block-size: 5em;
-    max-inline-size: 5em;
-
-    border-radius: 50%;
-  }
-
-  &[demo-square] {
-    max-block-size: 5em;
-    max-inline-size: 5em;
-
-    border-radius: 0;
-  }
-}

package/docs/framework.scss

@@ -1,26 +0,0 @@
-@use "../core/theme/index.scss" as theme;
-@use "../core/overlay/index.scss" as overlay;
-@use "../core/ripple/index.scss" as ripple;
-@use "../components/appbar/index.scss" as appbar;
-@use "../components/banner/index.scss" as banner;
-@use "../components/bottomnav/index.scss" as bottomnav;
-@use "../components/button/index.scss" as button;
-@use "../components/card/index.scss" as card;
-@use "../components/chip/index.scss" as chip;
-@use "../components/datatable/index.scss" as datatable;
-@use "../components/dialog/index.scss" as dialog;
-@use "../components/divider/index.scss" as divider;
-@use "../components/elevation/index.scss" as elevation;
-@use "../components/fab/index.scss" as fab;
-@use "../components/grid/index.scss" as grid;
-@use "../components/layout/index.scss" as layout;
-@use "../components/list/index.scss" as list;
-@use "../components/menu/index.scss" as menu;
-@use "../components/progress/index.scss" as progress;
-@use "../components/selection/index.scss" as selection;
-@use "../components/slider/index.scss" as slider;
-@use "../components/snackbar/index.scss" as snackbar;
-@use "../components/tab/index.scss" as tab;
-@use "../components/textfield/index.scss" as textfield;
-@use "../components/tooltip/index.scss" as tooltip;
-@use "../components/type/index.scss" as type;

package/docs/index.eta

@@ -1,12 +0,0 @@
-<% layout('./_partials/_header.eta', {page: 'Home'}) %>
-<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <div class="mdw-grid__content">
-      <h1 class="mdw-type">Material Design Web</h1>
-      <a class="mdw-button mdw-theme" mdw-ink="primary" href="https://github.com/clshortfuse/materialdesignweb">GitHub</a>
-      <a class="mdw-button mdw-theme" mdw-ink="primary" href="./report.html">Bundle Analyzer Report</a>
-    </div>
-  </div>
-</div>
-
-<script src="index.min.js"></script>

package/docs/index.js

@@ -1,7 +0,0 @@
-import * as Button from '../components/button/index.js';
-
-document.addEventListener('DOMContentLoaded', () => {
-  for (const el of document.getElementsByClassName('mdw-button')) {
-    Button.attach(el);
-  }
-});

package/docs/pages/appbar.eta

@@ -1,108 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'appbar'}) %>
-<div class="comparison clipped">
-  <div class="render">
-    <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'background 400', light:true }) %>
-    <%~ includeFile('../_partials/_appbar.eta', {
-      surface:'background 50', light:true, start: ['menu'], end: ['search', 'favorite', 'more_vert'], body: 'Title',
-    }) %>
-    <div class="content mdw-theme" mdw-surface="background alt"></div>
-  </div>
-</div>
-
-<div class="comparison clipped">
-  <div class="render">
-    <%~ includeFile('../_partials/_androidstatusbar.eta', { surface: 'black', dark: true }) %>
-    <%~ includeFile('../_partials/_appbar.eta', {
-      surface: 'background 900', dark: true, start: ['menu'], end: ['search', 'favorite', 'more_vert'], body: 'Title'
-    }) %>
-    <div class="content mdw-theme" mdw-surface="background alt"></div>
-  </div>
-</div>
-
-<div class="comparison clipped">
-  <div class="render">
-    <%~ includeFile('../_partials/_androidstatusbar.eta', { surface: 'blue 800', dark: true }) %>
-    <%~ includeFile('../_partials/_appbar.eta', {
-      surface: 'blue 700', dark: true, start: ['menu'], end: ['search', 'favorite', 'more_vert'], body: 'Title'
-    }) %>
-    <div class="content mdw-theme" mdw-surface="background alt"></div>
-  </div>
-</div>
-
-<div class="comparison clipped-304">
-  <div class="render">
-    <%~ includeFile('../_partials/_androidstatusbar.eta') %>
-    <!-- Elevation and z-index only for demo-->
-    <!-- Normally handled with .mdw-layout__appbar-->
-    <div class="mdw-appbar mdw-elevation" mdw-dense mdw-elevation="4" style="z-index:4">
-      <div class="mdw-appbar__start">
-        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'menu' }}) %>
-      </div>
-      <div class="mdw-appbar__title">Dense (Desktop)</div>
-      <div class="mdw-appbar__end">
-        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'more_vert' }}) %>
-      </div>
-    </div>
-    <div class="content mdw-theme" mdw-surface="background alt"></div>
-  </div>
-</div>
-<div class="comparison clipped-304">
-  <div class="render">
-    <%~ includeFile('../_partials/_androidstatusbar.eta') %>
-    <div class="mdw-appbar mdw-elevation" mdw-prominent mdw-dense mdw-elevation="4" style="z-index:4">
-      <div class="mdw-appbar__start">
-        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'menu' }}) %>
-      </div>
-      <div class="mdw-appbar__title">Prominent Dense</div>
-      <div class="mdw-appbar__end">
-        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'search' }}) %>
-        <%~ includeFile(T, { button: {icon:true, class: 'material-icons', body: 'more_vert' }}) %>
-      </div>
-    </div>
-    <div class="content mdw-theme" mdw-surface="background alt"></div>
-  </div>
-</div>
-<div class="comparison clipped-304">
-  <div class="render">
-    <%~ includeFile('../_partials/_androidstatusbar.eta') %>
-    <div class="mdw-appbar mdw-elevation" mdw-elevation="4" style="z-index:4">
-      <div class="mdw-appbar__start">
-        <div class="mdw-tooltip__wrapper">
-          <%~ includeFile(T, { button: {icon:true, class: 'mdw-tooltip__target material-icons', body: 'arrow_back' }}) %>
-          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Back</div>
-        </div>
-      </div>
-      <div class="mdw-appbar__end">
-        <div class="mdw-tooltip__wrapper">
-          <%~ includeFile(T, { button: {icon:true, class: 'mdw-tooltip__target material-icons', body: 'more_vert', attributes: {'mdw-more-button': true} }}) %>
-          <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>More</div>
-        </div>
-      </div>
-      <div class="mdw-appbar__content">
-        <label class="mdw-textfield mdw-theme" mdw-ink="primary contrast" style="font-size: 1.5rem">
-          <input class="mdw-textfield__input" value="Project Properties" placeholder=" " />
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Title</div>
-            </div>
-          </div>
-        </label>
-        <div style="height:8px"></div>
-        <label class="mdw-textfield mdw-theme" mdw-ink="primary contrast">
-          <input class="mdw-textfield__input" value="Sync with the team abo" placeholder=" " />
-          <div class="mdw-textfield__border">
-            <div class="mdw-textfield__outline-gap">
-              <div class="mdw-textfield__label">Description</div>
-            </div>
-          </div>
-        </label>
-        <div style="height:24px">
-          <!-- Spec says 16dp, but it's actually 24dp-->
-        </div>
-      </div>
-    </div>
-    <div class="content mdw-theme" mdw-surface="background alt"></div>
-  </div>
-</div>
-<script src="appbar.min.js"></script>

package/docs/pages/bottomnav.eta

@@ -1,188 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'bottomnav'}) %>
-<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <h5 class="mdw-type" mdw-baseline-next="36">Bottom navigation bars allow movement between primary destinations in an app.</h5>
-    <p class="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.</p>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <div class="mdw-grid__content component-sample">
-      <div class="render-fill">
-        <%~ includeFile('../_partials/_androidstatusbar.eta', { surface: 'background 900', dark:true }) %>
-        <%~ includeFile('../_partials/_appbar.eta', { surface: 'background 800', dark:true, body:'Bottom Navigation' }) %>
-        <div class="content"></div>
-        <nav class="mdw-bottomnav">
-          <a class="mdw-bottomnav__item mdw-theme" mdw-ink="primary" aria-selected="true">
-            <div class="mdw-bottomnav__icon">
-              <i class="material-icons">history</i>
-            </div>
-            <div class="mdw-bottomnav__label">Recents</div>
-          </a>
-          <a class="mdw-bottomnav__item mdw-theme" mdw-ink="primary" aria-selected="false">
-            <div class="mdw-bottomnav__icon">
-              <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge></div>
-              <i class="material-icons">favorite</i>
-            </div>
-            <div class="mdw-bottomnav__label">Favorites</div>
-          </a>
-          <a class="mdw-bottomnav__item mdw-theme" mdw-ink="primary" aria-selected="false">
-            <div class="mdw-bottomnav__icon">
-              <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge="99+"></div>
-              <i class="material-icons">near_me</i>
-            </div>
-            <div class="mdw-bottomnav__label">Nearby</div>
-          </a>
-        </nav>
-        <%~ includeFile('../_partials/_androidnavbar.eta') %>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="4">
-    <div class="mdw-type" mdw-style="subtitle">Javascript</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', type:'radio', name:'javascript', value:'required', checked:true, text: 'Required' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', type:'radio', name:'javascript', value:'optional', disabled:true, text: 'Optional' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', type:'radio', name:'javascript', value:'none', disabled:true, text: 'None' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Ink</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'ink', value:'default', text:'Default' }}) %>
-      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'ink', value:'primary', checked:true, text:'Primary' }}) %>
-      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'ink', value:'secondary', text:'Secondary' }}) %>
-      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'ink', value:'warn', text:'Warn' }}) %>
-      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'ink', value:'purple', text:'Purple' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Surface</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'none', checked:true, text:'None' }}) %>
-      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'card', text:'Card' }}) %>
-      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'primary 500 dark', text:'Primary 500 (Dark)' }}) %>
-      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'secondary 100 light', text:'Secondary 100 (Light)' }}) %>
-      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'warn 200 light', text:'Warn 200 (Light)' }}) %>
-      <%~ includeFile(T, {selection: { ink:'secondary', type:'radio', name:'surface', value:'green 700 dark', text:'Green 700 (Dark)' }}) %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%"></div>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <h6 class="mdw-type">HTML Code</h6>
-    <div class="mdw-card mdw-theme component-code component-html" mdw-surface="card" mdw-border-ink>
-      <%~ includeFile(T, {button: { icon: true, ink:'secondary', attributes: { 'aria-pressed': 'false', 'mdw-overlay-off':'activated' }, text: 'PUG', id: 'usePug' }}) %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="4">
-    <h6 class="mdw-type">Javascript Code</h6>
-    <div class="mdw-card mdw-theme component-code component-js" mdw-surface="card" mdw-border-ink></div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <h6 class="mdw-type">Samples</h6>
-  </div>
-  <div class="mdw-grid__item display-flex" mdw-colspan="6">
-    <div class="render-fill mdw-theme" mdw-surface="white" mdw-light>
-      <%~ includeFile('../_partials/_androidstatusbar.eta') %>
-      <%~ includeFile('../_partials/_appbar.eta', { text: 'Light Theme' }) %>
-      <div class="content" style="padding: 16px 0;">
-        <ul>
-          <li>Radio buttons</li>
-          <li>Badges</li>
-        </ul>
-      </div>
-      <nav class="mdw-bottomnav mdw-theme" mdw-ink="primary medium">
-        <a class="mdw-bottomnav__item" aria-selected="true">
-          <div class="mdw-bottomnav__icon material-icons">history</div>
-          <div class="mdw-bottomnav__label">Recents</div>
-        </a>
-        <a class="mdw-bottomnav__item" aria-selected="false">
-          <div class="mdw-bottomnav__icon">
-            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge></div>
-            <div class="material-icons">favorite</div>
-          </div>
-          <div class="mdw-bottomnav__label">Favorites</div>
-        </a>
-        <a class="mdw-bottomnav__item" aria-selected="false">
-          <div class="mdw-bottomnav__icon material-icons">near_me</div>
-          <div class="mdw-bottomnav__label">Nearby</div>
-        </a>
-      </nav>
-      <%~ includeFile('../_partials/_androidnavbar.eta') %>
-    </div>
-  </div>
-  <div class="mdw-grid__item display-flex" mdw-colspan="6">
-    <div class="render-fill js mdw-theme" mdw-surface="black" mdw-dark>
-      <%~ includeFile('../_partials/_androidstatusbar.eta') %>
-      <%~ includeFile('../_partials/_appbar.eta', {text: 'Dark Theme'}) %>
-      <div class="content" style="padding: 16px 0;">
-        <ul>
-          <li>Disappearing Labels</li>
-          <li>Badges</li>
-          <li>Shifting labels</li>
-        </ul>
-      </div>
-      <nav class="mdw-bottomnav" mdw-shifting>
-        <a class="mdw-bottomnav__item">
-          <div class="mdw-bottomnav__icon material-icons">tv</div>
-          <div class="mdw-bottomnav__label">Movies</div>
-        </a>
-        <a class="mdw-bottomnav__item" aria-selected="true">
-          <div class="mdw-bottomnav__icon">
-            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge></div>
-            <div class="material-icons">music_note</div>
-          </div>
-          <div class="mdw-bottomnav__label">Music</div>
-        </a>
-        <a class="mdw-bottomnav__item" aria-selected="false">
-          <div class="mdw-bottomnav__icon">
-            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge="88"></div>
-            <div class="material-icons">book</div>
-          </div>
-          <div class="mdw-bottomnav__label">Books</div>
-        </a>
-        <a class="mdw-bottomnav__item" aria-selected="false">
-          <div class="mdw-bottomnav__icon">
-            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge="888+"></div>
-            <div class="material-icons">assignment</div>
-          </div>
-          <div class="mdw-bottomnav__label">Newsstand</div>
-        </a>
-      </nav>
-      <%~ includeFile('../_partials/_androidnavbar.eta') %>
-    </div>
-  </div>
-  <div class="mdw-grid__item display-flex" mdw-colspan="6">
-    <div class="render-fill js mdw-theme">
-      <%~ includeFile('../_partials/_androidstatusbar.eta') %>
-      <%~ includeFile('../_partials/_appbar.eta', {text: 'Tablet'}) %>
-      <div class="content" style="padding: 16px 0;">
-        <ul>
-          <li>Disappearing Labels</li>
-          <li>Badges</li>
-        </ul>
-      </div>
-      <nav class="mdw-bottomnav mdw-theme" mdw-surface="teal 700" mdw-dark mdw-shifting>
-        <a class="mdw-bottomnav__item" aria-selected="true">
-          <div class="mdw-bottomnav__icon">
-            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge="4"></div>
-            <div class="material-icons">tv</div>
-          </div>
-          <div class="mdw-bottomnav__label">Movies</div>
-        </a>
-        <a class="mdw-bottomnav__item" aria-selected="false">
-          <div class="mdw-bottomnav__icon">
-            <div class="mdw-bottomnav__badge mdw-theme" mdw-surface="warn 500" mdw-ink="white" mdw-badge></div>
-            <div class="material-icons">music_note</div>
-          </div>
-          <div class="mdw-bottomnav__label">Music</div>
-        </a>
-        <a class="mdw-bottomnav__item" aria-selected="false">
-          <div class="mdw-bottomnav__icon material-icons">book</div>
-          <div class="mdw-bottomnav__label">Books</div>
-        </a>
-        <a class="mdw-bottomnav__item" aria-selected="false">
-          <div class="mdw-bottomnav__icon material-icons">assignment</div>
-          <div class="mdw-bottomnav__label">Newsstand</div>
-        </a>
-      </nav>
-      <%~ includeFile('../_partials/_androidnavbar.eta') %>
-    </div>
-  </div>
-</div>
-<script src="bottomnav.min.js"></script>