@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/toolbar/style.scss

@@ -1,190 +0,0 @@
-// https://material.io/guidelines/layout/structure.html#structure-app-bar
-// https://material.io/guidelines/components/toolbars.html
-
-@import '../common/functions.scss';
-@import '../common/variables.scss';
-@import '../common/motion.scss';
-@import '../common/mixins.scss';
-@import '../common//type.scss';
-
-$toolbar__height: 64;
-$toolbar__height-dense: 48;
-$toolbar__height-mobile: 56;
-$toolbar__height-mobile-landscape: 48;
-$toolbar__height-prominent: 128;
-$toolbar__height-prominent-dense: 96;
-$toolbar__icon-height: 40;
-
-.mdw-toolbar {
-  position: relative;
-  display:flex;
-  flex-direction: column;
-  box-shadow: elevation(4);
-  z-index: 4;
-  &[mdw-app-bar] {
-    html[mdw-ios][mdw-standalone] & {
-      padding-top: 20px;
-      padding-top: constant(safe-area-inset-top);
-      padding-top: env(safe-area-inset-top);
-    }
-  }
-  transition-timing-function: $motion-easing-standard;
-  transition-duration: $motion-duration-desktop-default;
-  @include allHandsets {
-    transition-duration: $motion-duration-mobile-default;
-  }
-  @include allTablets {
-    transition-duration: $motion-duration-tablet-default;
-  }
-}
-
-.mdw-toolbar__action {
-  display: flex;
-  flex-direction: row;
-  min-height: dp($toolbar__height);
-  justify-content: space-between;
-  .mdw-toolbar[mdw-prominent] > & {
-    min-height: dp($toolbar__height-prominent);
-  }
-  .mdw-toolbar[mdw-dense] > & {
-    min-height: dp($toolbar__height-dense);
-  }
-  .mdw-toolbar[mdw-dense][mdw-prominent] > & {
-    min-height: dp($toolbar__height-prominent-dense);
-    @include allHandsetsAndTablets {
-      min-height: dp($toolbar__height-prominent);
-    }
-  }
-  .mdw-toolbar[mdw-dense] > &,
-  & {
-    @include allHandsetsAndTablets {
-      min-height: dp($toolbar__height-mobile);
-    }
-    @include landscapeHandsets {
-      min-height: dp($toolbar__height-mobile-landscape);
-    }
-  }
-  transition-property: min-height;
-  transition-timing-function: inherit;
-  transition-duration: inherit;
-}
-
-.mdw-toolbar__content {
-  margin-left: dp(80);
-  margin-right: dp(24);
-  @include gutter16dp {
-    margin-left: dp(72);
-    margin-right: dp(16);
-  }
-  flex-grow: 1;
-  flex-direction: column;
-  display: flex;
-}
-
-.mdw-toolbar__title {
-  flex-grow: 1;
-  overflow-x: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin: 0 dp(16);
-  height: auto;
-  align-self: flex-end;
-  justify-content: space-around;
-  &[mdw-centered] {
-    flex-grow: 0;
-  }
-  @include type-rules('h6');
-  @include baseline-bottom(24);
-
-  .mdw-toolbar[mdw-dense] & {
-    @include baseline-bottom(16);
-  }
-  .mdw-toolbar[mdw-dense] &,
-  & {
-    @include allHandsetsAndTablets {
-      @include baseline-bottom(20);
-    }
-    @include landscapeHandsets {
-      @include baseline-bottom(16);
-    }
-  }
-
-  .mdw-toolbar[mdw-prominent] & {
-    white-space: normal;
-    @include type-rules('h5');
-    @include baseline-bottom(28);
-  }
-  &[mdw-custom]::after {
-    display: none;
-  }
-
-  // Animation
-  transition-property: font, letter-spacing;
-  transition-timing-function: inherit;
-  transition-duration: inherit;
-}
-
-.mdw-toolbar__start {
-  order: -1;
-  margin-left: dp(8);
-  padding: 0 dp(8);
-  @include gutter16dp {
-    margin-left: 0;
-  }
-}
-
-.mdw-toolbar__end {
-  order: 1;
-  margin-left: 0;
-  margin-right: dp(12);
-  @include gutter16dp {
-    margin-left: 0;
-    margin-right: dp(4);
-  }
-  [dir=rtl] & {
-    margin-left: dp(12);
-    margin-right: 0;
-    @include gutter16dp {
-      margin-left: dp(4);
-      margin-right: 0;
-    }
-  }
-}
-
-
-.mdw-toolbar__start,
-.mdw-toolbar__end {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  transition-property: margin-top;
-  margin-top: dp(($toolbar__height - $toolbar__icon-height) / 2);
-  .mdw-toolbar[mdw-dense] & {
-    margin-top: dp(($toolbar__height-dense - $toolbar__icon-height) / 2);
-  }
-  &,
-  .mdw-toolbar[mdw-dense] & {
-    @include allHandsetsAndTablets {
-      margin-top: dp(($toolbar__height-mobile - $toolbar__icon-height) / 2);
-    }
-    @include landscapeHandsets {
-      margin-top: dp(($toolbar__height-mobile-landscape - $toolbar__icon-height) / 2);
-    }
-  }
-}
-
-.mdw-toolbar__start .mdw-button {
-  margin: 0;
-}
-
-.mdw-toolbar__end .mdw-button {
-  margin: 0 dp(4);
-  &[mdw-more-button] {
-    margin-left: 0;
-    margin-right: dp(-2);
-    [dir=rtl] & {
-      margin-left: dp(-2);
-      margin-right: 0;
-    }
-  }
-}

package/components/toolbar/theming.scss

@@ -1,32 +0,0 @@
-@import '../common/functions.scss';
-@import '../common/mixins.scss';
-
-$toolbarColors: (
-  text-color: ((#000,              0.87), (#fff,              1.00)),
-  background: (('background', '100', 1.00), ('background', '900', 1.00))
-);
-
-
-@function toolbarThemeValue($key, $type, $theme) {
-  @return themeValue('toolbar', $toolbarColors, $key, $type, $theme);
-}
-
-@mixin toolbarThemeVariables($color, $lightness) {
-  @include themeVariables('toolbar', $toolbarColors, $color, $lightness);
-}
-
-@mixin toolbarContrastRules($type: 'var', $theme: null) {
-  @at-root {
-    #{&}.mdw-toolbar {
-      .mdw-toolbar__content,
-      .mdw-toolbar__title,
-      .mdw-toolbar__start,
-      .mdw-toolbar__end {
-        color: toolbarThemeValue("text-color", $type, $theme);
-      }
-      &:not([mdw-theme-fill]) {
-        background-color: toolbarThemeValue("background", $type, $theme);
-      }
-    }
-  }
-}

package/components/tooltip/style.scss

@@ -1,135 +0,0 @@
-// https://material.io/design/components/tooltips.html#spec
-
-$tooltip__margin__desktop: dp(14);
-$tooltip__margin__mobile: dp(24);
-$tooltip__background-color: #616161; // material-grey-700
-
-@import '../common/type.scss';
-
-.mdw-tooltip__wrapper {
-  position: relative;
-  overflow: visible;
-}
-
-.mdw-tooltip {
-  
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  width: auto;
-  padding-left: dp(8);
-  padding-right: dp(8);
-  min-height: dp(24);
-  transform: translateX(-50%) translateY($tooltip__margin__desktop);
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  @include type-rules('caption');
-
-  background-color: $tooltip__background-color;
-  border-radius: dp(4);
-  color: white;
-  cursor: none;
-  white-space: nowrap;
-  pointer-events: none;
-  z-index: 8;
-
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: 150ms;
-  transition-timing-function: $motion-easing-deceleration;
-
-  .mdw-tooltip__target:hover > &,
-  .mdw-tooltip__target:focus > &,
-  .mdw-tooltip__wrapper > .mdw-tooltip__target:hover ~ &,
-  .mdw-tooltip__wrapper > .mdw-tooltip__target:not([tabindex="-1"]):focus ~ & {
-    opacity: 0.9;
-    transition-timing-function: $motion-easing-acceleration;
-  }
-
-  &[mdw-position="start"],
-  &[mdw-position="end"],
-  &[mdw-position="left"],
-  &[mdw-position="right"] {
-    left: 0;
-    top: 50%;
-  }
-
-  &[mdw-position="start"],
-  &[mdw-position="left"],
-  [dir=rtl] &[mdw-position="end"] {
-    transform: translateY(-50%) translateX(-100%) translateX(-$tooltip__margin__desktop);
-  }
-
-  &[mdw-position="end"],
-  &[mdw-position="right"],
-  [dir=rtl] &[mdw-position="start"] {
-    transform: translateY(-50%) translateX(100%) translateX($tooltip__margin__desktop);
-  }
-
-  &[mdw-position="top"] {
-    top: 0;
-    transform: translateX(-50%) translateY(-100%) translateY(-$tooltip__margin__desktop);
-  }
-  
-}
-
-// Button position fix
-.mdw-tooltip__wrapper > .mdw-button[mdw-icon] ~ .mdw-tooltip {
-  margin-top: -8px;
-  &[mdw-position="top"] {
-    margin-top: 8px;
-  }
-}
-
-// Menu flicker fix
-.mdw-menu__wrapper > .mdw-menu:target ~ .mdw-tooltip,
-.mdw-menu__wrapper > .mdw-menu[mdw-show]:not([mdw-hide]) ~ .mdw-tooltip {
-  opacity: 0;
-  transition-delay: 0;
-}
-
-@media (any-pointer: coarse) {
-  .mdw-tooltip {
-    transition-delay: 1.5s;
-    font-size: sp(14);
-    min-height: dp(32);
-    padding-left: dp(16);
-    padding-right: dp(16);
-    transform: translateX(-50%) translateY($tooltip__margin__mobile);
-
-    &[mdw-position="start"],
-    &[mdw-position="left"],
-    [dir=rtl] &[mdw-position="end"] {
-      transform: translateY(-50%) translateX(-100%) translateX(-$tooltip__margin__mobile);
-    }
-
-    &[mdw-position="end"],
-    &[mdw-position="right"],
-    [dir=rtl] &[mdw-position="start"] {
-      transform: translateY(-50%) translateX(100%) translateX($tooltip__margin__mobile);
-    }
-
-    &[mdw-position="top"] {
-      transform: translateX(-50%) translateY(-100%) translateY(-$tooltip__margin__mobile);
-    }
-
-    // Don't change opacity unless active
-    .mdw-tooltip__target:hover:not(:active) > &,
-    .mdw-tooltip__target:focus:not(:active) > &,
-    .mdw-tooltip__wrapper > .mdw-tooltip__target:hover:not(:active) ~ &,
-    .mdw-tooltip__wrapper > .mdw-tooltip__target:not([tabindex="-1"]):focus:not(:active) ~ & {
-      opacity: 0;
-    }
-
-    .mdw-tooltip__target:active > &,
-    .mdw-tooltip__wrapper > .mdw-tooltip__target:active ~ .mdw-tooltip {
-      opacity: 0.9;
-      transition-timing-function: $motion-easing-acceleration;
-    }
-  }
-
-}

package/components/type/style.scss

@@ -1,167 +0,0 @@
-// https://material.io/guidelines/style/typography.html
-
-@import '../common//type.scss';
-@import '../common/functions.scss';
-
-// Line-heights calculated from Roboto
-
-h1.mdw-type,
-h2.mdw-type,
-h3.mdw-type,
-h4.mdw-type,
-h5.mdw-type,
-h6.mdw-type,
-p.mdw-type {
-  margin: 0;
-}
-
-p.mdw-type {
-  hyphens: auto;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-}
-
-h1.mdw-type {
-  @include type-rules('h1');
-}
-
-h2.mdw-type {
-  @include type-rules('h2');
-}
-
-h3.mdw-type {
-  @include type-rules('h3');
-}
-
-h4.mdw-type {
-  @include type-rules('h4');
-}
-
-h5.mdw-type {
-  @include type-rules('h5');
-}
-
-h6.mdw-type {
-  @include type-rules('h6');
-}
-
-.mdw-type[mdw-style="subtitle"] {
-  @include type-rules('subtitle');
-}
-
-.mdw-type[mdw-style="subtitle-2"] {
-  @include type-rules('subtitle-2');
-}
-
-body.mdw-type,
-p.mdw-type,
-.mdw-type[mdw-style="body"] {
-  @include type-rules('body');
-}
-
-.mdw-type[mdw-style="body-2"] {
-  @include type-rules('body-2');
-}
-
-.mdw-type[mdw-style="button"] {
-  @include type-rules('button');
-}
-
-.mdw-type[mdw-style="caption"] {
-  @include type-rules('caption');
-}
-
-.mdw-type[mdw-style="overline"] {
-  @include type-rules('overline');
-}
-
-// MD-2014 Typography
-
-
-.mdw-type[mdw-style|="display"] {
-  font-weight: $font-weight-regular;
-  font-size: sp(34);
-  line-height: dp(40);
-}
-.mdw-type[mdw-style="display-4"] {
-  font-size: sp(112);
-  line-height: normal;
-  font-weight: $font-weight-light;
-  white-space: nowrap;
-}
-.mdw-type[mdw-style="display-3"] {
-  font-size: sp(56);
-  line-height: normal;
-  white-space: nowrap;
-}
-.mdw-type[mdw-style="display-2"] {
-  font-size: sp(45);
-  line-height: dp(48);
-}
-.mdw-type[mdw-style="headline"] {
-  font-size: sp(24);
-  line-height: dp(32);
-  font-weight: $font-weight-regular;
-}
-.mdw-type[mdw-style="title"] {
-  font-size: sp(20);
-  font-weight: $font-weight-medium;
-  white-space: nowrap;
-}
-.mdw-type[mdw-style|="subheading"] {
-  font-size: sp(15);
-  @include allHandsetsAndTablets() {
-      font-size: sp(16);
-  }
-  font-weight: $font-weight-regular;
-  line-height: dp(24);
-}
-.mdw-type[mdw-style="subheading-2"] {
-  line-height: dp(28);
-  @include allHandsetsAndTablets() {
-      line-height: dp(28);
-  }
-}
-
-.mdw-type[mdw-baseline-top]::before {
-  content: '';
-  display: inline-block;
-}
-
-.mdw-type[mdw-baseline-next],
-.mdw-type[mdw-baseline-bottom] {
-  &::after {
-    content: '';
-    display: inline-block;
-  }
-}
-
-.mdw-type[mdw-baseline-next] {
-  & + .mdw-type::before {
-    content: '';
-    display: inline-block;
-  }
-}
-
-// 4dp baselines
-@each $bl in (4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76, 80, 84, 88, 92) {
-  .mdw-type[mdw-baseline-top="#{$bl}"] {
-    &::before {
-      height: dp($bl);
-    }
-  }
-  .mdw-type[mdw-baseline-bottom="#{$bl}"] {
-    &::after {
-      vertical-align: dp(-$bl);
-    }
-  }
-  .mdw-type[mdw-baseline-next="#{$bl}"] {
-    margin-bottom: dp(-$bl);
-    &::after {
-      vertical-align: dp(-$bl);
-    }
-    & + .mdw-type::before {
-      height: dp($bl);
-    }
-  }
-}

package/components/type/theming.scss

@@ -1,25 +0,0 @@
-@import '../common/functions.scss';
-@import '../common/mixins.scss';
-
-$typeColors: (
-  primary-text-color:   ((#000, 0.87), (#fff, 1.00)),
-  secondary-text-color: ((#000, 0.54), (#fff, 0.70)),
-);
-
-@function typeThemeValue($key, $type, $theme) {
-  @return themeValue('type', $typeColors, $key, $type, $theme);
-}
-
-@mixin typeThemeVariables($color, $lightness) {
-  @include themeVariables('type', $typeColors, $color, $lightness);
-}
-
-@mixin typeContrastRules($type: 'var', $theme: null) {
-  .mdw-type:not([mdw-theme-color]) {
-    color: typeThemeValue("primary-text-color", $type, $theme);
-    &[mdw-style|="display"],
-    &[mdw-style="caption"] {
-      color: typeThemeValue("secondary-text-color", $type, $theme);
-    }
-  }
-}

package/docs/bottomnav.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html lang="en"><head><title>Material Design Web</title><meta charset="utf-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="" name="description"><meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport"><meta name="theme-color" content="#E91E63"><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,700"><link rel="stylesheet" href="docs.min.css"><link rel="stylesheet" href="components.min.css"><link rel="stylesheet" href="theming.min.css"><link rel="stylesheet" href="theming.ie11.min.css" media="screen and (-ms-high-contrast: active), (-ms-high-contrast: none)"><script src="prerender.min.js"></script></head><body class="mdw-type"><div class="mdw-navdrawer" id="docs-navdrawer"><a class="mdw-navdrawer__scrim" href="#"></a><div class="mdw-navdrawer__toolbar"><div class="mdw-toolbar" mdw-theme-fill="accent-500 dark" mdw-app-bar><div class="mdw-toolbar__action"><div class="mdw-toolbar__start"><div class="mdw-tooltip__wrapper"><a class="mdw-tooltip__target mdw-button material-icons" mdw-icon href="#docs-navdrawer">menu</a><div class="mdw-tooltip">Menu</div></div></div><div class="mdw-toolbar__title">bottomnav</div><div class="mdw-toolbar__end" id="docs-menu-buttons"><div class="mdw-tooltip__wrapper"><div class="mdw-tooltip__target mdw-button docs-rtl" mdw-inactive>RTL</div><div class="mdw-tooltip">Right-to-Left</div></div><div class="mdw-tooltip__wrapper"><div class="mdw-tooltip__target mdw-button material-icons" mdw-icon mdw-inactive>brightness_3</div><div class="mdw-tooltip">Dark Mode</div></div><div class="mdw-tooltip__wrapper"><div class="mdw-tooltip__target mdw-button material-icons" mdw-icon mdw-inactive>format_size</div><div class="mdw-tooltip">Large Font</div></div></div></div></div></div><div class="mdw-navdrawer__drawer"><div class="mdw-list"><a class="mdw-list__item" href="index.html" mdw-theme-color="primary"><div class="mdw-list__text">Home</div></a><div class="mdw-list__subheader">Components</div><a class="mdw-list__item" mdw-selected href="bottomnav.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">call_to_action</div><div class="mdw-list__text">Bottom Navigation</div></a><a class="mdw-list__item" href="button.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">crop_landscape</div><div class="mdw-list__text">Button</div></a><a class="mdw-list__item" href="card.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">crop_square</div><div class="mdw-list__text">Card</div></a><a class="mdw-list__item" href="dialog.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">select_all</div><div class="mdw-list__text">Dialog</div></a><a class="mdw-list__item" href="datatable.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">format_align_justify</div><div class="mdw-list__text">Data Table</div></a><a class="mdw-list__item" href="elevation.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">layers</div><div class="mdw-list__text">Elevation</div></a><a class="mdw-list__item" href="fab.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">add_circle</div><div class="mdw-list__text">Floating Action Button</div></a><a class="mdw-list__item" href="layout.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">view_compact</div><div class="mdw-list__text">Layout</div></a><a class="mdw-list__item" href="list.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">view_list</div><div class="mdw-list__text">List</div></a><a class="mdw-list__item" href="menu.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">picture_in_picture</div><div class="mdw-list__text">Menu</div></a><a class="mdw-list__item" href="navdrawer.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">menu</div><div class="mdw-list__text">Navigation Drawer</div></a><a class="mdw-list__item" href="progress.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">timelapse</div><div class="mdw-list__text">Progress</div></a><a class="mdw-list__item" href="search.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">search</div><div class="mdw-list__text">Search</div></a><a class="mdw-list__item" href="selection.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">toggle_on</div><div class="mdw-list__text">Selection</div></a><a class="mdw-list__item" href="slider.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">tune</div><div class="mdw-list__text">Slider</div></a><a class="mdw-list__item" href="snackbar.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">video_label</div><div class="mdw-list__text">Snackbar</div></a><a class="mdw-list__item" href="tab.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">tab</div><div class="mdw-list__text">Tab</div></a><a class="mdw-list__item" href="textfield.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">text_fields</div><div class="mdw-list__text">Text Field</div></a><a class="mdw-list__item" href="toolbar.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">web_asset</div><div class="mdw-list__text">Toolbar</div></a><a class="mdw-list__item" href="tooltip.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">info</div><div class="mdw-list__text">Tooltip</div></a><a class="mdw-list__item" href="type.html" mdw-theme-color="accent"><div class="mdw-list__icon material-icons">font_download</div><div class="mdw-list__text">Typography</div></a></div></div><div class="mdw-navdrawer__content" style="padding-bottom:24px"><div id="horizontalLine"></div><div id="verticalLineLeft"></div><div id="verticalLineRight"></div><div class="comparison clipped-300"><div class="render mdw-theme-bottomnav"><div class="content display-flex"><div class="flex-1"><ul><li>CSS-Only</li><li>Keyboard support</li><li>Radio buttons</li><li>Badges</li></ul></div><form class="mdw-bottomnav" mdw-theme-color="primary"><label class="mdw-bottomnav__item"><input class="mdw-bottomnav__input" type="radio" name="bottomnav" value="recents"><div class="mdw-bottomnav__icon material-icons">history</div><div class="mdw-bottomnav__label">Recents</div></label><label class="mdw-bottomnav__item" mdw-badge=""><input class="mdw-bottomnav__input" type="radio" name="bottomnav" value="favorites" checked><div class="mdw-bottomnav__icon material-icons">favorite</div><div class="mdw-bottomnav__label">Favorites</div></label><label class="mdw-bottomnav__item"><input class="mdw-bottomnav__input" type="radio" name="bottomnav" value="nearby"><div class="mdw-bottomnav__icon material-icons">near_me</div><div class="mdw-bottomnav__label">Nearby</div></label></form></div><div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div></div><div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B3321sZLoP_HZjN1eld5MjRXb2s/components-bottomnavigation-usage1.png)"></div></div><div class="comparison clipped-300"><div class="render mdw-theme-bottomnav"><div class="content display-flex"><div class="flex-1"><ul><li>CSS-Only</li><li>Keyboard support</li><li>Disappearing Labels</li><li>Radio buttons</li><li>Badges</li></ul></div><form class="mdw-bottomnav" mdw-theme-fill="primary-700 dark" mdw-shifting><input class="mdw-bottomnav__input" type="radio" name="shiftingbottomnav" value="movies" id="value1"><label class="mdw-bottomnav__item" for="value1"><div class="mdw-bottomnav__icon material-icons">tv</div><div class="mdw-bottomnav__label">Movies</div></label><input class="mdw-bottomnav__input" type="radio" name="shiftingbottomnav" value="music" id="value2" checked><label class="mdw-bottomnav__item" for="value2" mdw-badge><div class="mdw-bottomnav__icon material-icons">music_note</div><div class="mdw-bottomnav__label">Music</div></label><input class="mdw-bottomnav__input" type="radio" name="shiftingbottomnav" value="books" id="value3"><label class="mdw-bottomnav__item" for="value3" mdw-badge="88"><div class="mdw-bottomnav__icon material-icons">book</div><div class="mdw-bottomnav__label">Books</div></label><input class="mdw-bottomnav__input" type="radio" name="shiftingbottomnav" value="newsstand" id="value4"><label class="mdw-bottomnav__item" for="value4" mdw-badge="888+"><div class="mdw-bottomnav__icon material-icons">assignment</div><div class="mdw-bottomnav__label">Newsstand</div></label></form></div><div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div></div><div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B3321sZLoP_HZHA1UVAyRFpMVDQ/components-bottomnavigation-usage5.png)"></div></div><div class="comparison clipped-300"><div class="render mdw-theme-bottomnav"><div class="content display-flex"><div class="flex-1"><ul><li>CSS-Only</li><li>Keyboard support</li><li>Disappearing Labels</li><li>ID-less Radio buttons</li></ul></div><form class="mdw-bottomnav" mdw-theme-fill="primary-700 dark" mdw-shifting><label class="mdw-bottomnav__item"><input class="mdw-bottomnav__input" type="radio" name="shiftingbottomnav" value="movies"><div class="mdw-bottomnav__icon material-icons">tv</div><div class="mdw-bottomnav__label">Movies</div></label><label class="mdw-bottomnav__item"><input class="mdw-bottomnav__input" type="radio" name="shiftingbottomnav" value="music" checked><div class="mdw-bottomnav__icon material-icons">music_note</div><div class="mdw-bottomnav__label">Music</div></label><label class="mdw-bottomnav__item"><input class="mdw-bottomnav__input" type="radio" name="shiftingbottomnav" value="books"><div class="mdw-bottomnav__icon material-icons">book</div><div class="mdw-bottomnav__label">Books</div></label><label class="mdw-bottomnav__item"><input class="mdw-bottomnav__input" type="radio" name="shiftingbottomnav" value="newsstand"><div class="mdw-bottomnav__icon material-icons">assignment</div><div class="mdw-bottomnav__label">Newsstand</div></label></form></div><div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div></div><div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B3321sZLoP_HZHA1UVAyRFpMVDQ/components-bottomnavigation-usage5.png)"></div></div><div class="comparison clipped-300 js"><div class="render mdw-theme-bottomnav"><div class="content display-flex"><div class="flex-1"><ul><li>Javascript-based</li><li>No radio buttons</li><li>Badges</li></ul></div><div class="mdw-bottomnav" mdw-theme-color="primary"><div class="mdw-bottomnav__item" mdw-badge><div class="mdw-bottomnav__icon material-icons">history</div><div class="mdw-bottomnav__label">Recents</div></div><div class="mdw-bottomnav__item" mdw-selected><div class="mdw-bottomnav__icon material-icons">favorite</div><div class="mdw-bottomnav__label">Favorites</div></div><div class="mdw-bottomnav__item" mdw-badge="12"><div class="mdw-bottomnav__icon material-icons">near_me</div><div class="mdw-bottomnav__label">Nearby</div></div></div></div><div class="androidnavbar"><i class="material-icons back-button">&#xE3C8;</i><i class="material-icons">&#xE836;</i><i class="material-icons">&#xE835;</i></div></div><div class="target" style="background-image: url(https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B3321sZLoP_HZHA1UVAyRFpMVDQ/components-bottomnavigation-usage5.png)"></div></div></div></div><script src="bottomnav.min.js"></script></body></html>

package/docs/bottomnav.min.js

@@ -1,2 +0,0 @@
-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=23)}({0:function(e,t,n){"use strict";function r(e){return window.localStorage?localStorage.getItem(e):null}function o(e,t){window.localStorage&&localStorage.setItem(e,t)}function i(e){window.localStorage&&localStorage.removeItem(e)}n.d(t,"a",function(){return r}),n.d(t,"c",function(){return o}),n.d(t,"b",function(){return i})},1:function(e,t,n){"use strict";function r(e,t){var n=e.getElementsByClassName(t)[0];return n&&n.parentElement!==e?null:n}function o(e,t,n){var r;for(r=!1===n?e.parentElement:e;null!=r&&!r.classList.contains(t);)r=r.parentElement;return r}function i(){return document.documentElement.hasAttribute("dir")&&"rtl"===document.documentElement.getAttribute("dir").toLowerCase()}function c(e,t){var n=document.createEvent("Event");return n.initEvent(t,!0,!0),e.dispatchEvent(n)}n.d(t,"c",function(){return r}),n.d(t,"b",function(){return o}),n.d(t,"d",function(){return i}),n.d(t,"a",function(){return c}),n.d(t,"e",function(){return u});var u=window.requestAnimationFrame||function(e){return setTimeout(e,17)}},2:function(e,t,n){"use strict";n.d(t,"c",function(){return c}),n.d(t,"a",function(){return u}),n.d(t,"b",function(){return a}),n.d(t,"d",function(){return l});var r=n(0),o="black dark",i="white light";function c(e,t){e?(document.documentElement.setAttribute("dir","rtl"),t&&t.removeAttribute("mdw-inactive"),Object(r.c)("rtlmode","true")):(document.documentElement.removeAttribute("dir"),t&&t.setAttribute("mdw-inactive",""),Object(r.b)("rtlmode"))}function u(e,t){e?(document.documentElement.setAttribute("mdw-theme-fill",o),t&&t.removeAttribute("mdw-inactive")):(document.documentElement.setAttribute("mdw-theme-fill",i),t&&t.setAttribute("mdw-inactive","")),Object(r.c)("darkmode",e?"true":"false")}function a(e,t){e?(document.documentElement.style.setProperty("font-size",e),t&&t.removeAttribute("mdw-inactive"),Object(r.c)("fontsize",e)):(document.documentElement.style.removeProperty("font-size"),t&&t.setAttribute("mdw-inactive",""),Object(r.b)("fontsize"))}function l(){var e=document.getElementById("docs-menu-buttons").getElementsByClassName("mdw-button"),t=e[0],n=e[1],i=e[2];!function(e){"true"===Object(r.a)("rtlmode")&&c(!0,e),e.addEventListener("click",function(){"rtl"===document.documentElement.getAttribute("dir")?c(!1,e):c(!0,e)})}(t),function(e){"true"===Object(r.a)("darkmode")&&u(!0,e),e.addEventListener("click",function(){document.documentElement.getAttribute("mdw-theme-fill")===o?u(!1,e):u(!0,e)})}(n),function(e){a(Object(r.a)("fontsize"),e),e.addEventListener("click",function(){document.documentElement.style.getPropertyValue("font-size")?a(null,e):a("125%",e)})}(i)}},23:function(e,t,n){n(79),e.exports=n(24)},24:function(e,t,n){e.exports=n.p+"bottomnav.html"},3:function(e,t,n){"use strict";n.d(t,"a",function(){return i});var r=n(1);function o(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var i=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}return function(e,t,n){n&&o(e,n)}(e,0,[{key:"attach",value:function(t){var n=Object(r.c)(t,"mdw-ripple");n||((n=document.createElement("div")).classList.add("mdw-ripple"),t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n));var o=Object(r.c)(n,"mdw-ripple__inner");o||((o=document.createElement("div")).classList.add("mdw-ripple__inner"),n.appendChild(o)),t.setAttribute("mdw-ripple",""),n.addEventListener("click",e.onClick)}},{key:"onClick",value:function(e){var t=e.currentTarget,n=Object(r.c)(t,"mdw-ripple__inner");if(n){if(!e.pointerType&&!e.detail)return n.style.removeProperty("left"),void n.style.removeProperty("top");n.style.setProperty("left","".concat(e.offsetX,"px")),n.style.setProperty("top","".concat(e.offsetY,"px"))}}},{key:"detach",value:function(t){var n=Object(r.c)(t,"mdw-ripple");n&&t.removeChild(n),t.removeAttribute("mdw-ripple"),t.removeEventListener("click",e.onClick)}}]),e}()},6:function(e,t,n){"use strict";var r={},o=0,i=0;function c(e){document.getElementById("horizontalLine").style.top="".concat(e.clientY,"px"),document.getElementById("verticalLineLeft").style.left="".concat(e.layerX,"px"),document.getElementById("verticalLineRight").style.left="".concat(e.clientX,"px")}Object.defineProperty(r,"vOffset",{enumerable:!0,configurable:!1,get:function(){return o},set:function(e){o=e,document.getElementById("verticalLineLeft").style.left="".concat(e,"px"),document.getElementById("verticalLineRight").style.left="".concat(e,"px")}}),Object.defineProperty(r,"hOffset",{enumerable:!0,configurable:!1,get:function(){return i},set:function(e){i=e,document.getElementById("horizontalLine").style.top="".concat(e,"px")}}),t.a=function(){for(var e=document.getElementsByClassName("target"),t=0;t<e.length;t+=1)e[t].addEventListener("click",c)}},79:function(e,t,n){"use strict";n.r(t);var r=n(6),o=n(3),i=n(1);function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function a(e,t,n){return t&&u(e.prototype,t),n&&u(e,n),e}var l=function(){function e(){c(this,e)}return a(e,null,[{key:"attach",value:function(e){o.a.attach(e)}},{key:"detach",value:function(e){o.a.detach(e)}}]),e}(),m=function(){function e(){c(this,e)}return a(e,null,[{key:"attach",value:function(t){for(var n=t.getElementsByClassName("mdw-bottomnav__item"),r=t.getElementsByClassName("mdw-bottomnav__input"),o=0;o<n.length;o+=1){var i=n.item(o);l.attach(i),i.addEventListener("click",e.onItemClicked)}for(var c=0;c<r.length;c+=1)r.item(c).addEventListener("change",e.onInputChanged)}},{key:"detach",value:function(t){for(var n=t.getElementsByClassName("mdw-bottomnav__item"),r=t.getElementsByClassName("mdw-bottomnav__input"),o=0;o<n.length;o+=1){var i=n.item(o);l.detach(i),i.removeEventListener("click",e.onItemClicked)}for(var c=0;c<r.length;c+=1)r.item(c).removeEventListener("change",e.onInputChanged)}},{key:"onInputChanged",value:function(t){var n,r=t.target;if(r.parentElement.classList.contains("mdw-bottomnav__item")&&(n=r.parentElement),r.id&&(n=document.querySelector('label.mdw-bottomnav__item[for="'.concat(r.id,'"]'))),(!n.hasAttribute("mdw-selected")||!r.checked)&&(n.hasAttribute("mdw-selected")||r.checked)){var o=Object(i.b)(r,"mdw-bottomnav");o&&e.removeSelection(o),n.setAttribute("mdw-selected","")}}},{key:"removeSelection",value:function(e){for(var t=e.getElementsByClassName("mdw-bottomnav__item"),n=0;n<t.length;n+=1){var r=t.item(n);if(r.hasAttribute("mdw-selected"))return r.removeAttribute("mdw-selected"),!0}return!1}},{key:"onItemClicked",value:function(t){var n=Object(i.b)(t.target,"mdw-bottomnav__item");if(!n.hasAttribute("mdw-selected")&&!n.hasAttribute("disabled")){var r,o=Object(i.b)(n,"mdw-bottomnav");if(o&&e.removeSelection(o),n.setAttribute("mdw-selected",""),n instanceof HTMLLabelElement&&n.hasAttribute("for")){var c=n.getAttribute("for");c&&(r=document.getElementById(c))}else r=n.getElementsByClassName("mdw-bottomnav__input")[0];if(r instanceof HTMLInputElement)r.checked=!0;else if(r)throw new Error("Unexpected inputElement type")}}}]),e}(),d=n(2);!function(){for(var e=document.querySelectorAll(".js .mdw-bottomnav"),t=0;t<e.length;t+=1)m.attach(e.item(t))}(),Object(d.d)(),Object(r.a)()}});
-//# sourceMappingURL=bottomnav.min.js.map