@universal-material/web 3.0.10 → 3.0.12

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

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

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

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

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

package/docs/src/js/docs.js

@@ -1,161 +0,0 @@
-import { ThemeBuilder } from './index.js';
-
-window.ThemeMode = {
-  Auto: 0,
-  Light: 1,
-  Dark: 2
-};
-
-(function () {
-
-  const sidebar = document.querySelector(".u-drawer");
-  const sidebarBackdrop = document.querySelector(".u-drawer-backdrop");
-  const appbar = document.getElementById("app-bar");
-
-  function toggleSidebar() {
-    if (sidebar.classList.contains("open")) {
-      sidebar.classList.remove("open");
-    } else {
-      sidebar.classList.add("open");
-    }
-
-    if (sidebar.classList.contains("dismiss")) {
-      sidebar.classList.remove("dismiss");
-    } else {
-      sidebar.classList.add("dismiss");
-    }
-  }
-
-  function toggleRtl() {
-    document.body.classList.toggle("rtl");
-  }
-
-  function mainContentScroll(e) {
-    if (window.scrollY) {
-      appbar.classList.add('u-toolbar-elevated');
-    } else {
-      appbar.classList.remove('u-toolbar-elevated');
-    }
-  }
-
-  document
-    .getElementById("menu-toggle")
-    .addEventListener("click", toggleSidebar);
-
-  document
-    .querySelector(".u-dropdown-toggle")
-    .addEventListener("click", e => e.currentTarget.nextElementSibling.classList.toggle('show'));
-
-  document
-    .querySelector(".u-dropdown-menu")
-    .addEventListener("click", e => e.currentTarget.classList.remove('show'));
-
-  document
-    .getElementById("rtl-toggle")
-    .addEventListener("click", toggleRtl);
-
-
-  sidebarBackdrop.addEventListener("click", toggleSidebar);
-
-  window.addEventListener("scroll", mainContentScroll);
-
-  let textField = document.querySelector('.u-text-field-box');
-  const textInput = document.querySelector('#text-field-box');
-  if (textInput) {
-    textInput.addEventListener('input', function () {
-      if (textInput.value) {
-        textField.classList.remove('invalid');
-      } else {
-        textField.classList.add('invalid');
-      }
-    });
-  }
-
-  function setActiveNavigationItem() {
-    const navItems = document.querySelectorAll('nav .u-list-item');
-
-    for (let i = 0; i < navItems.length; i++) {
-      const navItem = navItems[i];
-      if (navItem.pathname !== location.pathname) {
-        continue;
-      }
-
-      navItem.classList.add('active');
-      if (navItem.parentElement.classList.contains('nested-menu-items')) {
-        navItem.parentElement.classList.add('expanded');
-      }
-
-      break;
-    }
-  }
-  function setExpandableMenus() {
-    const nestedMenus = document.querySelectorAll('.nested-menu-items');
-
-    for (const nestedMenu of nestedMenus) {
-      const nestedMenuToggle = nestedMenu.previousElementSibling;
-      nestedMenuToggle.addEventListener('click', () => nestedMenu.classList.toggle('expanded'));
-    }
-  }
-
-  function setToggleButtons() {
-    const toggleButtons = document.querySelectorAll('.u-icon-toggle-btn');
-
-    for (const button of toggleButtons) {
-      const icon = button.firstElementChild;
-      button.addEventListener('click', () => {
-        if (button.classList.contains('selected')) {
-          button.classList.remove('selected');
-          icon.classList.remove('mdi-cards-heart');
-          icon.classList.add('mdi-cards-heart-outline');
-          return;
-        }
-
-        button.classList.add('selected');
-        icon.classList.add('mdi-cards-heart');
-        icon.classList.remove('mdi-cards-heart-outline');
-      });
-    }
-  }
-
-  setActiveNavigationItem();
-  setExpandableMenus();
-  setToggleButtons();
-})();
-
-hljs.highlightAll();
-
-let currentThemeMode = parseInt(localStorage.currentThemeMode, 10) || 0;
-
-window.setThemeMode = mode => {
-  currentThemeMode = mode;
-  localStorage.currentThemeMode = mode;
-  applyThemeMode();
-}
-
-function applyThemeMode() {
-  const darkMode = currentThemeMode === ThemeMode.Dark ||
-    currentThemeMode  === ThemeMode.Auto && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-  if (!darkMode) {
-    document.body.classList.remove('u-dark-mode');
-    return;
-  }
-
-  document.body.classList.add('u-dark-mode');
-}
-
-applyThemeMode();
-
-window.createTheme = color => {
-  const styles = ThemeBuilder.create(color).build();
-
-  let themeStylesElement = document.getElementById('theme-styles');
-
-  if (!themeStylesElement) {
-    themeStylesElement = document.createElement('style');
-    themeStylesElement.id = 'theme-styles';
-    document.head.appendChild(themeStylesElement);
-  }
-
-  themeStylesElement.innerText = styles;
-}