@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/src/core/type.pug

@@ -1,36 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("type")
-    #horizontalLine
-    #verticalLineLeft
-    #verticalLineRight
-    .comparison.type-comparison
-      .content(mdw-theme-fill="background-50 light")
-        .mdw-type(mdw-style="display-4") Display 4
-        .mdw-type(mdw-style="display-3") Display 3
-        .mdw-type(mdw-style="display-2") Display 2
-        .mdw-type(mdw-style="display-1") Display 1
-        .mdw-type(mdw-style="headline") Headline
-        .mdw-type(mdw-style="title") Title
-        .mdw-type(mdw-style="subheading") Subheading
-        .mdw-type(mdw-style="body-2") Body 2
-        .mdw-type(mdw-style="body-1") Body 1
-        .mdw-type(mdw-style="caption") Caption
-        .mdw-type(mdw-style="button") Button
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3alhXZ2pPWGk3Zjg/style-typography-styles-scale.png')
-
-    .comparison.type-comparison-2
-      .render
-        div(mdw-theme-fill="background-50 light")
-          div(style="width:300px;height:208px;margin-left:40px")
-            .mdw-type(mdw-style="subheading-2") The Hatter was the first to break the silence. 'What day of the month is it?' he said, turning to Alice: he had taken his watch out of his pocket, and was looking at it uneasily, shaking it every now and then, and holding it to his ear.
-          div(style="height:8px")
-          div(style="width:300px;height:208px;margin-left:40px")
-            .mdw-type(mdw-style="display-2") Others have failed, I will not
-            .mdw-type(mdw-style="subheading-1"  style="width:260px") Science, my boy, is made up of mistakes, but they are mistakes which it is useful to make, because they lead little by little to the truth.
-      div
-        div(style="margin-top:12px")
-          +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B6Okdz75tqQsSDJtU2ZnVDZhTGM/style-typography-styles-lineheight3.png')
-        +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3S0hlSFBQRVE0QlU/style-typography-styles-lineheight2.png')
-  script(src='type.min.js')

package/docs/src/docs.scss

@@ -1,200 +0,0 @@
-html {
-  font-family: Roboto, sans-serif;
-  height: 100%;
-
-  // Prefer iOS Dynamic Type for accessibility support
-  font: -apple-system-body;
-}
-
-// Material Icon incorrectly changes RTL direction
-.material-icons {
-  direction: inherit;
-}
-
-
-body {
-  display: flex;
-  flex-direction: row;
-  margin: 0;
-  height: 100%;
-}
-
-.nav {
-  min-width: 150px;
-  max-width: 150px;
-}
-
-.comparison {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-}
-
-.androidstatusbar {
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-  height: 24px;
-  padding: 0 8px;
-  color: rgba(255, 255, 255, .87);
-  font-size: 14px;
-  .material-icons {
-    font-size: 18px;
-  }
-}
-
-.content {
-  flex: 1;
-  overflow-y: auto;
-  flex-direction: column;
-}
-
-.render {
-  max-width: 360px;
-  max-height: 640px;
-}
-
-.render,
-.target {
-  position: relative;
-  margin: 8px;
-  min-width: 360px;
-  height: 640px;
-  background-size: cover;
-  background-repeat: no-repeat;
-
-  display: flex;
-  flex-direction: column;
-  .clipped & {
-    max-height: 190px;
-  }
-  .clipped-236 & {
-    max-height: 236px;
-  }
-  .clipped-300 & {
-    max-height: 300px;
-  }
-  .clipped-304 & {
-    max-height: 304px;
-  }
-}
-
-
-.horizontal-controls {
-  display:inline-flex;
-  width:100%;
-  & > :not(:last-child) {
-    margin-right: 16px;
-    margin-left: 0;
-  }
-  [dir=rtl] & > :not(:last-child) {
-    margin-left: 16px;
-    margin-right: 0;
-  }
-}
-
-.display-flex {
-  display: flex;
-}
-[flex-column] {
-  flex-direction: column;
-}
-[flex-justify-content="center"] {
-  justify-content: center;
-}
-[flex-align-items="center"] {
-  align-items: center;
-}
-.flex-wrap {
-  flex-wrap: wrap;
-}
-.flex-1 {
-  flex: 1;
-}
-
-.androidnavbar {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
-  min-height: 48px;
-  height: 48px;
-  padding: 0 30px;
-  background-color: black;
-  color: rgba(255, 255, 255, 1);
-  .material-icons {
-    font-size: 20px;
-  }
-  .material-icons.back-button {
-   transform: rotate(90deg);
-  }
-}
-
-
-#horizontalLine {
-  position: fixed;
-  width: 100%;
-  background-color: #0FF;
-  height: 1px;
-  left: 0px;
-  z-index: 25;
-  pointer-events: none;
-}
-
-.custom-no-results-indicator {
-  margin: 8px;
-  min-height: 48px;
-}
-
-#verticalLineLeft,
-#verticalLineRight {
-  height: 100%;
-  background-color: #0FF;
-  width: 1px;
-  top: 0px;
-  z-index: 25;
-  pointer-events: none;
-}
-
-#verticalLineLeft {
-  position: absolute;
-  margin-left: 8px;
-}
-
-#verticalLineRight {
-  position: fixed;
-}
-
-
-#Vintage50Input {
-  font-size: sp(34);
-}
-
-.type-comparison {
-  .content {
-    margin: 8px;
-    align-items: flex-start;
-    flex-direction: column;
-    display: flex;
-  }
-  .target {
-    margin-top: 42px;
-    background-position-x: -200px;
-    width: 760px;
-    height: 568px;
-  }
-  .mdw-type {
-    position: relative; // For tooltip position
-  }
-}
-.type-comparison-2 {
-  .target {
-    width: 760px;
-    height: 208px;
-  }
-}
-
-.mdw-navdrawer#docs-navdrawer > .mdw-navdrawer__drawer {
-  min-width: 200px;
-}

package/docs/src/index.pug

@@ -1,5 +0,0 @@
-include mixins.pug
-
-+header()
-  +navdrawer("Home")
-    .mdw-type(mdw-style="display-2") Material Design Web

package/docs/src/mixins.pug

@@ -1,72 +0,0 @@
-mixin androidstatusbar(fillColor)
-  .androidstatusbar(mdw-theme-fill=fillColor)
-    div 12:30
-    i.material-icons(style="letter-spacing:2px") 
-mixin toolbar(fillColor, start, end)
-  .mdw-toolbar(mdw-theme-fill=fillColor)
-    .mdw-toolbar__action
-      .mdw-toolbar__start
-        each icon in start
-          .mdw-button(mdw-icon).material-icons= icon
-      .mdw-toolbar__title
-        block
-      .mdw-toolbar__end
-        each icon in end
-          .mdw-button(mdw-icon 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 header()
-  doctype html
-  html(lang='en')
-    head
-      title Material Design Web
-      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", name='viewport')
-      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)")
-    body(mdw-theme-fill="white light")
-      block
-    
-
-
-- var corecomponents = ["bottomnav", "button", "list", "menu", "progress", "selection", "tab", "textfield", "toolbar", "type"]
-- var complexcomponents = ["dialog", "navdrawer", "search"]
-
-mixin navdrawer(selected)
-  .mdw-navdrawer#docs-navdrawer(mdw-theme-fill="background-100 light" mdw-floating="card")
-    a.mdw-navdrawer__scrim(href="#")
-    .mdw-navdrawer__toolbar
-      .mdw-toolbar(mdw-theme-fill="accent-500 dark")
-        .mdw-toolbar__action
-          .mdw-toolbar__start
-            .mdw-tooltip__wrapper
-              a.mdw-button(mdw-icon href="#docs-navdrawer").material-icons menu
-              .mdw-tooltip Menu
-          .mdw-toolbar__title=selected
-    .mdw-navdrawer__drawer
-      .mdw-list
-        a.mdw-list__item(selected=selected=='Home' href='index.html' mdw-theme-color="primary")
-          .mdw-list__text Home
-        .mdw-list__subheader Core
-        each item in corecomponents
-          a.mdw-list__item(selected=selected==item href=`${item}.html` mdw-theme-color="primary")
-            .mdw-list__text=item
-        .mdw-list__subheader Complex
-        each item in complexcomponents
-          a.mdw-list__item(selected=(selected==item) href=`${item}.html` mdw-theme-color="accent")
-            .mdw-list__text=item
-    .mdw-navdrawer__content
-      block
-

package/docs/src/targetHandler.js

@@ -1,50 +0,0 @@
-const crosshairs = {
-};
-let vOffset = 0;
-let hOffset = 0;
-
-Object.defineProperty(crosshairs, 'vOffset', {
-  enumerable: true,
-  configurable: false,
-  get() {
-    return vOffset;
-  },
-  set(val) {
-    vOffset = val;
-    document.getElementById('verticalLineLeft').style.left = `${val}px`;
-    document.getElementById('verticalLineRight').style.left = `${val}px`;
-  },
-});
-
-
-Object.defineProperty(crosshairs, 'hOffset', {
-  enumerable: true,
-  configurable: false,
-  get() {
-    return hOffset;
-  },
-  set(val) {
-    hOffset = val;
-    document.getElementById('horizontalLine').style.top = `${val}px`;
-  },
-});
-
-/**
- * @param {MouseEvent} event
- * @return {void}
- */
-function onTemplateImageClick(event) {
-  document.getElementById('horizontalLine').style.top = `${event.clientY}px`;
-  document.getElementById('verticalLineLeft').style.left = `${event.layerX}px`;
-  document.getElementById('verticalLineRight').style.left = `${event.clientX}px`;
-}
-
-/** @return {void} */
-function setupImageTargets() {
-  const targets = document.getElementsByClassName('target');
-  for (let i = 0; i < targets.length; i += 1) {
-    targets[i].addEventListener('click', onTemplateImageClick);
-  }
-}
-
-export default setupImageTargets;

package/docs/src/theming.ie11.scss

@@ -1,35 +0,0 @@
-@import "../../components/theming/theming.scss";
-$themes: (
-  "default": ('indigo', 'pink', 'red'),
-  "textfield": ('deeppurple', 'amber', 'red'),
-  "toolbar": ('blue', 'pink', 'red'),
-  "bottomnav": ('teal', 'brown', 'red'),
-  "list": ('teal', 'cyan', 'pink'),
-  "selection": ('blue', 'teal', 'red'),
-  "tab": ('cyan', 'yellow', 'red')
-);
-$colors: ('cyan', 'red', 'green','lightblue', 'purple');
-$components: (
-  'bottomnav',
-  'button',
-  'list',
-  'menu',
-  'progress',
-  'selection',
-  'tab',
-  'textfield',
-  'toolbar',
-  'tooltip',
-  'type',
-  'dialog',
-  'navdrawer',
-  'search'
-);
-$config: (
-  theme-components: $components,
-  themes: $themes,
-  explicit-colors: $colors,
-  ie11-support: 'only',
-  ie11-media-wrap: 'no'
-);
-@include buildMDWThemes($config);

package/docs/src/theming.scss

@@ -1,36 +0,0 @@
-@import "../../components/theming/theming.scss";
-$themes: (
-  "default": ('indigo', 'pink', 'red'),
-  "textfield": ('deeppurple', 'amber', 'red'),
-  "toolbar": ('blue', 'pink', 'red'),
-  "bottomnav": ('teal', 'brown', 'red'),
-  "list": ('teal', 'cyan', 'pink'),
-  "selection": ('blue', 'teal', 'red'),
-  "tab": ('cyan', 'yellow', 'red')
-);
-$colors: ('cyan', 'red', 'green','lightblue', 'purple');
-
-$components: (
-  'bottomnav',
-  'button',
-  'list',
-  'menu',
-  'progress',
-  'selection',
-  'tab',
-  'textfield',
-  'toolbar',
-  'tooltip',
-  'type',
-  'dialog',
-  'navdrawer',
-  'search'
-);
-$mdw-config: (
-  theme-components: $components,
-  themes: $themes,
-  automatic-contrast: 'no',
-  explicit-colors: $colors,
-  ie11-support: 'no'
-);
-@include buildMDWThemes($mdw-config);