@universal-material/web 3.0.8 → 3.0.9

package/docs/src/components/selection-controls/radio-button.html

@@ -0,0 +1,36 @@
+<label class="u-radio">
+  <input type="radio" name="radio" />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span class="u-selection-control-label">Radio A</span>
+</label>
+<label class="u-radio">
+  <input type="radio" name="radio" />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span class="u-selection-control-label">Radio B</span>
+</label>
+<label class="u-radio">
+  <input type="radio" name="radio" />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span class="u-selection-control-label">Radio C</span>
+</label>
+<label class="u-radio">
+  <input type="radio" name="radio" disabled />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span class="u-selection-control-label">Radio C</span>
+</label>
+
+<label class="u-radio">
+  <input type="radio" name="other" disabled checked />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span>
+  </span>
+  <span class="u-selection-control-label">Radio C</span>
+</label>

package/docs/src/components/selection-controls/switch.html

@@ -0,0 +1,12 @@
+<label class="u-switch">
+  <input type="checkbox" />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span></span>
+  <span class="u-selection-control-label">Switch</span>
+</label>
+<label class="u-switch">
+  <input type="checkbox" disabled />
+  <span class="u-selection-control">
+    <span class="u-check-indicator"></span></span>
+  <span class="u-selection-control-label">Switch</span>
+</label>

package/docs/src/components/selection-controls.pug

@@ -0,0 +1,13 @@
+extends ../_layout
+
+block content
+  +renderTitle('Selection controls')
+
+  +renderSection('Checkbox')
+    include:exampleCode selection-controls/checkbox.html
+
+  +renderSection('Radio')
+    include:exampleCode selection-controls/radio-button.html
+
+  +renderSection('Switch')
+    include:exampleCode selection-controls/switch.html

package/docs/src/components/sliders/example.html

@@ -0,0 +1,42 @@
+<div class="u-slider" aria-label="Select value">
+  <input type="range" min="100" max="300" step="0.25"/>
+  <div class="u-slider-track-container">
+    <div class="u-slider-track"></div>
+  </div>
+  <div class="u-slider-thumb-container">
+    <div class="u-slider-thumb"></div>
+  </div>
+</div>
+<div class="u-slider" aria-label="Select value">
+  <input type="range" min="10" max="20" step="2"/>
+  <div class="u-slider-track-container">
+    <div class="u-slider-track-marker-container">
+      <div class="u-slider-track-marker"></div>
+    </div>
+    <div class="u-slider-track"></div>
+  </div>
+  <div class="u-slider-thumb-container">
+    <div class="u-slider-thumb"></div>
+  </div>
+</div>
+<div class="u-slider" aria-label="Select value">
+  <input type="range" min="100" max="300" step="0.25" disabled />
+  <div class="u-slider-track-container">
+    <div class="u-slider-track"></div>
+  </div>
+  <div class="u-slider-thumb-container">
+    <div class="u-slider-thumb"></div>
+  </div>
+</div>
+<div class="u-slider" aria-label="Select value">
+  <input type="range" min="10" max="20" step="2" disabled />
+  <div class="u-slider-track-container">
+    <div class="u-slider-track-marker-container">
+      <div class="u-slider-track-marker"></div>
+    </div>
+    <div class="u-slider-track"></div>
+  </div>
+  <div class="u-slider-thumb-container">
+    <div class="u-slider-thumb"></div>
+  </div>
+</div>

package/docs/src/components/sliders.pug

@@ -0,0 +1,7 @@
+extends ../_layout
+
+block content
+  +renderTitle('Sliders')
+
+  +renderSection('Slider')
+    include:exampleCode sliders/example.html

package/docs/src/components/snackbar/example.html

@@ -0,0 +1,35 @@
+<div class="u-form-field">
+  <div class="u-text-field-container">
+    <div class="u-text-field u-text-field-box">
+      <input class="u-text-input" id="snackbarText" />
+      <label>Snackbar text</label>
+    </div>
+  </div>
+</div>
+
+<div class="u-form-field">
+  <div class="u-text-field-container">
+    <div class="u-text-field u-text-field-box">
+      <input class="u-text-input" id="snackbarButtonText" />
+      <label>Snackbar button text</label>
+    </div>
+  </div>
+</div>
+
+<div class="u-text-end">
+  <button class="u-filled-btn" onclick="showSnackbar()">Show snackbar</button>
+</div>
+<script>
+  function showSnackbar() {
+
+    const text = document.getElementById('snackbarText').value;
+    const buttonText = document.getElementById('snackbarButtonText').value;
+
+    umd.Snackbar.show(text, 30000, buttonText ? {
+      text: buttonText,
+      action: function () {
+        alert('Snackbar action!')
+      }
+    } : null);
+  }
+</script>

package/docs/src/components/snackbars.pug

@@ -0,0 +1,21 @@
+extends ../_layout
+
+block content
+  +renderTitle('Snackbars')
+
+  +renderSection('Example')
+    include:exampleCode snackbar/example.html
+block scripts
+  script.
+    function showSnackbar() {
+
+      const text = document.getElementById('snackbarText').value;
+      const buttonText = document.getElementById('snackbarButtonText').value;
+
+      umd.Snackbar.show(text, umd.SnackbarDuration.long, buttonText ? {
+        text: buttonText,
+        action: function () {
+          alert('Snackbar action!')
+        }
+      } : null);
+    }

package/docs/src/components/steppers.pug

@@ -0,0 +1,57 @@
+extends ../_layout
+
+block content
+  +renderTitle('Steppers')
+
+  h5.u-headline5.article-title Horizontal stepper
+  .u-card-elevated
+    .u-stepper.u-horizontal-stepper
+      .u-step.completed
+        .u-step-indicator
+          .u-step-circle 1
+        .u-step-label Step 1
+      .u-step-line
+      .u-step.active
+        .u-step-indicator
+          .u-step-circle 1
+        .u-step-label Step 1
+      .u-step-line
+      .u-step
+        .u-step-indicator
+          .u-step-circle 2
+        .u-step-label Step 2
+      .u-step-line
+      .u-step
+        .u-step-indicator
+          .u-step-circle 3
+        .u-step-label Step 3
+      .u-step-line
+      .u-step
+        .u-step-indicator
+          .u-step-circle 4
+        .u-step-label Step 4
+
+  h5.u-headline5.article-title Vertical stepper
+  .u-card-elevated
+    .u-stepper.u-vertical-stepper
+      .u-step.completed
+        .u-step-indicator
+          .u-step-circle 1
+          .u-step-line
+        .u-step-content
+          .u-step-label Step 1
+      .u-step.active
+        .u-step-indicator
+          .u-step-circle 2
+          .u-step-line
+        .u-step-content
+          .u-step-label Step 2
+          .example-step-content
+          .u-step-actions
+            button.u-step-action.u-filled-btn Continue
+            button.u-step-action.u-text-btn Cancel
+      .u-step
+        .u-step-indicator
+          .u-step-circle 3
+        .u-step-content
+          .u-step-label Step 3

package/docs/src/components/tabs/example.html

@@ -0,0 +1,45 @@
+<div class="u-toolbar">
+  <div class="u-toolbar-row">
+    <div class="u-toolbar-start">
+      <div class="u-toolbar-actions">
+        <div class="u-icon-btn u-btn-default">
+          <i class="u-btn-icon mdi mdi-menu"></i>
+        </div>
+      </div>
+    </div>
+    <div class="u-toolbar-center">
+      <div class="u-toolbar-title">Page title</div>
+    </div>
+    <div class="u-toolbar-end">
+      <div class="u-toolbar-actions">
+        <div class="u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-magnify"></i></div>
+        <div class="u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-phone"></i></div>
+        <div class="u-icon-btn u-btn-default"><i class="u-btn-icon mdi mdi-dots-vertical"></i></div>
+      </div>
+    </div>
+  </div>
+  <div class="u-tab-bar u-tab-bar-primary u-toolbar-icon-padding" role="tablist" aria-label="Example tab">
+    <button type="button" role="tab" class="u-tab active">
+      <div class="u-tab-content">
+        <div class="u-tab-text">Item one</div>
+      </div>
+    </button>
+    <button type="button" role="tab" class="u-tab">
+      <div class="u-tab-content">
+        <div class="u-tab-text">Item two</div>
+      </div>
+    </button>
+    <button type="button" role="tab" class="u-tab">
+      <div class="u-tab-content">
+        <div class="u-tab-text">Item three</div>
+      </div>
+    </button>
+    <button type="button" role="tab" class="u-tab">
+      <div class="u-tab-content">
+        <div class="u-tab-text">Item four Item four Item four</div>
+      </div>
+    </button>
+    <div class="u-tab-indicator"></div>
+  </div>
+</div>
+

package/docs/src/components/tabs.pug

@@ -0,0 +1,8 @@
+extends ../_layout
+
+block content
+  +renderTitle('Tabs')
+
+  h5.u-headline5.article-title
+  u-card.example-card(variant="outlined")
+    include:exampleCode tabs/example.html

package/docs/src/components/text-fields.pug

@@ -0,0 +1,88 @@
+extends ../_layout
+
+block content
+  +renderTitle('Text fields')
+  u-card.example-card(variant="outlined")
+    u-card-content
+      .u-form-field
+        .u-text-field.u-text-field-box
+          .u-text-field-leading-icon
+            i.mdi.mdi-magnify
+          .u-text-field-trailing-icon
+            i.mdi.mdi-close-circle-outline
+          label.u-text-field-label(for="text-field-box") Text field box
+          .u-text-input
+            input(type="text" placeholder="Placeholder" id="text-field-box" aria-describedby="textFieldBox")
+
+        .u-text-field-supporting-text
+          .u-text-field-supporting-text-item Supporting text
+          .u-text-field-supporting-text-item.ml-auto 0 / 10
+    u-card-content.example-card-code
+      pre
+        code.language-html
+
+  .u-form-field
+    .u-text-field.u-text-field-box.disabled
+      .u-text-field-leading-icon
+        i.mdi.mdi-magnify
+      .u-text-field-trailing-icon
+        i.mdi.mdi-close-circle-outline
+
+      label.u-text-field-label Text field box
+      input.u-text-input(type="text" placeholder="Placeholder" disabled aria-describedby="textFieldBox")
+
+  .u-form-field
+    .u-text-field.u-text-field-outlined
+      .u-text-field-leading-icon
+        i.mdi.mdi-magnify
+      .u-text-field-trailing-icon
+        i.mdi.mdi-close-circle-outline
+      label.u-text-field-label(for="text-field-outline") Text field outline
+      input.u-text-input(type="text" placeholder="Placeholder" id="text-field-outline" aria-describedby="textFieldOutline")
+    small#textFieldOutline.u-text-field-supporting-text Text field outline
+
+  .u-form-field
+    .u-text-field.u-text-field-outlined.disabled
+      .u-text-field-leading-icon
+        i.mdi.mdi-magnify
+      .u-text-field-trailing-icon
+        i.mdi.mdi-close-circle-outline
+      label.u-text-field-label(for="text-field-outline") Text field outline
+      input.u-text-input(type="text" placeholder="Placeholder" disabled)
+
+  .u-form-field
+    .u-text-field.u-search-field
+      .u-text-field-leading-icon
+        i.mdi.mdi-magnify
+      .u-text-field-trailing-icon
+        button.u-icon-btn
+          i.u-btn-icon.mdi.mdi-calendar
+
+      label.u-text-field-label(for="search-field") Label text
+      input.u-text-input(type="text" placeholder="Search" id="search-field" aria-describedby="searchField")
+    small#searchField.u-text-field-supporting-text Supporting text
+
+  .u-form-field
+    .u-text-field.u-text-field-box
+      label.u-text-field-label(for="text-area-box") Text area box
+      textarea.u-text-input(type="text" placeholder="Placeholder" id="text-area-box" aria-describedby="textAreaBox")
+    small#textAreaBox.u-text-field-supporting-text Text area box
+
+  .u-form-field
+    .u-text-field.u-text-field-outlined
+      label.u-text-field-label(for="text-area-outline") Text area outline
+      textarea.u-text-input(type="text" placeholder="Placeholder" id="text-area-outline" aria-describedby="textAreaOutline")
+    small#textAreaOutline.u-text-field-supporting-text Text area outline
+
+  .u-form-field
+    .u-text-field.u-text-field-box.u-dropdown
+      .u-text-field-trailing-icon
+        .u-dropdown-toggle-icon
+      label.u-text-field-label Dropdown
+      button.u-text-input.u-dropdown-toggle(type="button" disabled)
+        .u-text-input-placeholder No value
+      .u-dropdown-menu.up.w-100
+        .u-dropdown-content
+          button.u-dropdown-item(type="button") Option A
+          button.u-dropdown-item(type="button") Option B
+          button.u-dropdown-item(type="button") Option C

package/docs/src/components/toolbars/simple-toolbar.html

@@ -0,0 +1,33 @@
+<div class="u-toolbar">
+  <div class="u-toolbar-row">
+    <div class="u-toolbar-start">
+      <div class="u-toolbar-actions">
+        <button class="u-icon-btn u-btn-default" type="button">
+          <i class="u-btn-icon mdi mdi-menu"></i>
+        </button>
+      </div>
+    </div>
+    <div class="u-toolbar-center">
+      <div class="u-toolbar-title">Title here</div>
+    </div>
+    <div class="u-toolbar-end">
+      <div class="u-toolbar-actions">
+        <button class="u-toolbar-action u-icon-btn u-btn-default" type="button">
+          <i class="u-btn-icon mdi mdi-phone"></i>
+        </button>
+        <div class="u-toolbar-action u-dropdown">
+          <button class="u-icon-btn u-btn-default u-dropdown-toggle" type="button">
+            <i class="u-btn-icon mdi mdi-dots-vertical"></i>
+          </button>
+          <div class="u-dropdown-menu down-left">
+            <div class="u-dropdown-content">
+              <a class="u-dropdown-item text-nowrap" href="#">Item A</a>
+              <a class="u-dropdown-item text-nowrap" href="#">Item B</a>
+              <a class="u-dropdown-item text-nowrap" href="#">Item C</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/docs/src/components/toolbars.pug

@@ -0,0 +1,7 @@
+extends ../_layout
+
+block content
+  +renderTitle('Toolbars')
+
+  +renderSection('Simple toolbar')
+    include:exampleCode toolbars/simple-toolbar.html

package/docs/src/content/typography/example.html

@@ -0,0 +1,15 @@
+<h1 class="u-display-l">Display</h1>
+<h2 class="u-display-m">Display</h2>
+<h3 class="u-display-s">Display</h3>
+<h4 class="u-headline-l">Headline</h4>
+<h5 class="u-headline-m">Headline</h5>
+<h6 class="u-headline-s">Headline</h6>
+<h6 class="u-title-l">Title</h6>
+<h6 class="u-title-m">Title</h6>
+<h6 class="u-title-s">Title</h6>
+<div class="u-label-l">Label</div>
+<div class="u-label-m">Label</div>
+<div class="u-label-s">Label</div>
+<div class="u-body-l">Body</div>
+<div class="u-body-m">Body</div>
+<div class="u-body-s">Body</div>

package/docs/src/content/typography.pug

@@ -0,0 +1,8 @@
+extends ../_layout
+
+block content
+  h4.u-display-m.chapter-title Typography
+
+  u-card.example-card(variant="outlined")
+    include:exampleCode typography/example.html
+

package/docs/src/css/docs.scss

@@ -0,0 +1,189 @@
+@use "../../../scss/universal-material";
+//
+.deep-purple-amber {
+  @include universal-material.theme((
+    primary: #673ab7,
+    secondary: #ffd740
+  ));
+}
+
+.pink-blue-grey {
+
+  @include universal-material.theme((
+    primary: #e91e63,
+    secondary: #607d8b
+  ));
+}
+//
+//.purple-green {
+//  $u-theme-colors: (
+//    primary: #9c27b0,
+//    secondary: #69f0ae
+//  ) !global;
+//
+//  @include u-create-theme;
+//}
+//
+
+#main-content {
+  padding-top: 56px;
+}
+
+.example-box {
+  display: flex;
+  flex-direction: column;
+  padding: .5rem;
+  overflow: auto;
+  background: #e0e0e0;
+
+
+}
+
+.example-box-header {
+  padding: 1rem;
+  margin-bottom: .5rem;
+  background: var(--u-surface-color);
+
+  .u-toolbar {
+    width: 100%;
+  }
+
+  .u-dropdown {
+    display: inline-block;
+  }
+}
+
+.limited-height {
+  max-height: 300px;
+  overflow: auto;
+}
+
+.example-step-content {
+  width: 100%;
+  height: 300px;
+  background: #ccc;
+}
+
+.list-example-box-header {
+  @include universal-material.u-elevation-tint(1);
+
+  .u-list {
+    width: 300px;
+  }
+}
+
+.menu-example {
+  .example-box-header {
+    height: 14rem;
+  }
+}
+
+.u-card-filled,
+.u-card-outlined,
+.u-card-elevated {
+  margin-bottom: 8px;
+}
+
+.u-card-media,
+.u-card-media-wide {
+  background: url("/img/venice.jpg") center;
+  background-size: cover;
+}
+
+.u-list-item-avatar {
+  background: var(--u-low-emphasis-color);
+  background-size: cover;
+}
+
+.chapter,
+.article-title {
+  margin-top: 80px;
+}
+
+.chapter-title,
+.article-title {
+  margin-bottom: 48px;
+  font-size: 2rem;
+  font-weight: 400;
+  color: var(--u-primary-color);
+}
+
+.article-title {
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+}
+
+pre {
+  margin: 0;
+}
+
+code {
+  padding: 1rem !important;
+  unicode-bidi: plaintext;
+  background: transparent !important;
+}
+
+.nested-menu-items {
+  max-height: 0;
+  padding-inline-start: 12px;
+  overflow: hidden;
+
+  &.expanded {
+    max-height: 500px;
+  }
+}
+
+.example-card {
+
+  > .u-card-content:first-child {
+    padding: 36px;
+
+    div ~ div {
+      margin-top: 8px;
+    }
+  }
+
+  .u-floating-action-area {
+    position: static;
+  }
+
+  .u-floating-menu {
+    position: relative;
+    margin-top: 200px;
+  }
+
+  .u-chip-avatar {
+    background: rgba(0, 0, 0, .54);
+  }
+}
+
+.example-card-code {
+  background-color: var(--u-surface-variant-color);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+
+}
+
+::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  background-color: rgba(0,0,0,.47);
+  background-clip: content-box;
+  border-radius: 3px;
+}
+
+.u-dark-mode {
+  &::-webkit-scrollbar-thumb,
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(255,255,255,.47);
+  }
+}
+
+body {
+  overflow-y: auto;
+  overflow-y: overlay;
+}

package/docs/src/index.pug

@@ -0,0 +1,10 @@
+extends _layout
+
+block content
+  +renderTitle('Universal Material')
+
+  h5.u-headline5.article-title Installation
+  p Include Universal Material source sass and TypeScript files via npm.
+
+  pre
+    code.terminal $ npm install @universal-material/web -S