@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/docs.scss

@@ -0,0 +1,295 @@
+@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

@@ -0,0 +1,16 @@
+<% 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

@@ -0,0 +1,114 @@
+<% 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

@@ -0,0 +1,78 @@
+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')