@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/docs/docs.scss

@@ -1,295 +0,0 @@
-@use './_flex.scss';
-
-// Material Icon incorrectly changes RTL direction
-.material-icons {
-  direction: inherit;
-}
-
-
-.comparison {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-}
-
-.androidstatusbar {
-  z-index: 16;
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-  height: 24px;
-  padding: 0 8px;
-  font-size: 14px;
-  color: white;
-
-  .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: 1;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  flex-direction: column;
-}
-
-.render,
-.target {
-  width: 360px;
-  max-width: 360px;
-}
-
-.render-fill {
-  flex: 1;
-}
-
-.render,
-.render-fill {
-  z-index: 1;
-  overflow-x: hidden;
-  max-height: 640px;
-  border-color: #eee;
-  border-width: 1px;
-  border-style: solid;
-  box-sizing: border-box;
-  .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 {
-  position: relative;
-  margin: 8px;
-  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;
-  }
-}
-
-
-
-.docs-render-overlay {
-  position:absolute;
-  left:0;
-  right:0;
-  bottom:0;
-  flex-direction:row-reverse
-}
-
-.component-sample {
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  border-style: solid;
-  border-radius: 2px;
-  border-width: 1px;
-  min-height: 360px;
-  .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;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 24px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: monospace;
-  flex-grow: 1;
-  position: relative;
-}
-
-#usePug {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  left: auto;
-  font-size: 12px;
-  margin: 0;
-  :root[dir="rtl"] {
-    right: auto;
-    left: 4px;
-  }
-}
-
-
-.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: white;
-  .material-icons {
-    font-size: 20px;
-  }
-  .material-icons.back-button {
-   transform: rotate(90deg);
-  }
-}
-
-.custom-no-results-indicator {
-  margin: 8px;
-  min-height: 48px;
-}
-
-
-#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;
-  }
-}
-.type-comparison-3 {
-  .target {
-    width: 360px;
-    height: 300px;
-  }
-}
-
-.docs-grid {
-  .mdw-card {
-    padding: 16px 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-  }
-}
-
-.docs-elevation__item {
-  padding: 24px 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-}
-
-.docs-tab {
-  .component-sample__container {
-    width: 100%;
-    > .mdw-tab {
-      width: 100%;
-    }
-  }
-}
-
-.demo-core-item {
-  border-radius: 8px;
-  min-width: 5em;
-  height: 5em;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin: 4px;
-  cursor: pointer;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  &[demo-round] {
-    border-radius: 50%;
-    max-width: 5em;
-    max-height: 5em;
-  }
-  &[demo-square] {
-    border-radius: 0;
-    max-width: 5em;
-    max-height: 5em;
-  }
-}

package/docs/index.eta

@@ -1,16 +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>
-      <%~ includeFile('../components/button/index.eta', {
-        ink: 'primary', attributes: {href:"https://github.com/clshortfuse/materialdesignweb"}, text: 'GitHub',
-      }) %>
-      <%~ includeFile('../components/button/index.eta', {
-        ink: 'primary', attributes: {href:"./report.html"}, text: 'Bundle Analyzer Report',
-      }) %>
-    </div>
-  </div>
-</div>
-
-<script src="index.min.js"></script>

package/docs/pages/appbar.eta

@@ -1,114 +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__action">
-        <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>
-    <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__action">
-        <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>
-    <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__action">
-        <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>
-      <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/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')