beercss 2.0.31 → 2.1.0

package/src/cdn/beer.js

@@ -1,4 +1,11 @@
 (() => {
+  let _timeout = null;
+  let _mutation = null;
+  let _lastTheme = {
+    light: '',
+    dark: ''
+  };
+
   const guid = () => {
     return "fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
       let r = (Math.random() * 16) | 0,
@@ -141,6 +148,11 @@
     updateFile(e.currentTarget, e);
   }
 
+  const onMutation = () => {
+    if (_timeout) clearTimeout(_timeout);
+    _timeout = setTimeout(ui, 180);
+  }
+
   const updateFile = (target, e) => {
     if (e) {
       if (e.key !== "Enter") return;
@@ -233,8 +245,8 @@
 
     let isActive = hasClass(to, "active");
     let container = parent(to);
-    if (hasClass(container, "menu")) {
-      let elements = queryAll(".menu > .modal, .menu > a, .menu > .overlay");
+    if (/nav/i.test(container.tagName)) {
+      let elements = queryAll(".modal, a, .overlay", container);
       elements.forEach((x) => {
         removeClass(x, "active");
       });
@@ -286,55 +298,78 @@
       return to.style.clipPath = `polygon(0% 100%, 100% 100%, 100% ${100 - config}%, 0% ${100 - config}%)`;
   };
 
-  const theme = (config) => {
-    let emptyTheme = {
-      light: "",
-      dark: "",
-      selected: "light"
+  const lastTheme = () => {
+    if (_lastTheme.light && _lastTheme.dark) return _lastTheme;
+
+    let light = document.createElement("body");
+    light.className = "light";
+    document.body.appendChild(light);
+
+    let dark = document.createElement("body");
+    dark.className = "dark";
+    document.body.appendChild(dark);
+
+    let fromLight = getComputedStyle(light);
+    let fromDark = getComputedStyle(dark);
+    let variables = ['--primary', '--on-primary', '--primary-container', '--on-primary-container', '--secondary', '--on-secondary', '--secondary-container', '--on-secondary-container', '--tertiary', '--on-tertiary', '--tertiary-container', '--on-tertiary-container', '--error', '--on-error', '--error-container', '--on-error-container', '--background', '--on-background', '--surface', '--on-surface', '--outline', '--surface-variant', '--on-surface-variant', '--inverse-surface', '--inverse-on-surface'];
+    for(let i=0; i<variables.length; i++) {
+      _lastTheme.light += variables[i] + ":" + fromLight.getPropertyValue(variables[i]) + ";";
+      _lastTheme.dark += variables[i] + ":" + fromDark.getPropertyValue(variables[i]) + ";";
     }
 
-    if (!window.materialDynamicColors) return emptyTheme;
+    document.body.removeChild(light);
+    document.body.removeChild(dark);
+    return _lastTheme;
+  }
 
-    if (!config) {
-      document.body.removeAttribute("style");
-      return emptyTheme;
-    };
+  const theme = (source) => {
+    if (!source || !window.materialDynamicColors) return lastTheme();
 
-    if (config.from && config.mode && config.from[config.mode]) {
-      let newTheme = {
-        light: config.from.light,
-        dark: config.from.dark,
-        selected: config.mode
-      };
-      
-      document.body.setAttribute("style", newTheme[config.mode]);
-      return newTheme;
+    let mode = /dark/i.test(document.body.className) ? "dark" : "light";
+    if (source && source.light && source.dark) {
+      _lastTheme.light = source.light;
+      _lastTheme.dark = source.dark;
+      document.body.setAttribute("style", source[mode]);
+      return source;
     }
 
-    return window.materialDynamicColors(config.from).then((theme) => {
+    return window.materialDynamicColors(source).then((theme) => {
       const toCss = (data) => {
         let style = "";
         for (var i in data) {
           let kebabCase = i.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
-          style += "--"+kebabCase+": "+data[i]+";";
+          style += "--"+kebabCase+":"+data[i]+";";
         }
         return style;
       };
 
-      let newTheme = {
-        light: toCss(theme.light) + "--active: rgba(0,0,0,.1);--mode: light;",
-        dark: toCss(theme.dark) + "--active: rgba(255,255,255,.2);--mode: dark;",
-        selected: config.mode
-      };
-
-      document.body.setAttribute("style", newTheme[config.mode]);
-      return newTheme;
+      _lastTheme.light = toCss(theme.light);
+      _lastTheme.dark = toCss(theme.dark);
+      document.body.setAttribute("style", _lastTheme[mode]);
+      return _lastTheme;
     });
   };
 
+  const mode = (value) => {
+    if (!value) return /dark/i.test(document.body.className) ? "dark" : "light";
+    document.body.classList.remove("light", "dark");
+    document.body.classList.add(value);
+    if (window.materialDynamicColors) document.body.style = _lastTheme[value];
+    return value;
+  }
+
+  const setup = () => {
+    if (_mutation) return;
+    _mutation = new MutationObserver(onMutation);
+    _mutation.observe(document.body, { childList: true, subtree: true });
+    ui();
+  }
+
   const ui = (selector, config) => {
     if (selector) {
+      if (selector == "setup") return setup();
       if (selector == "guid") return guid();
+      if (selector == "mode") return mode(config);
       if (selector == "theme") return theme(config);
 
       let to = query(selector);
@@ -367,4 +402,8 @@
   };
 
   window.ui = ui;
-})();
+})();
+
+window.addEventListener("load", () => {
+  ui("setup");
+});

package/src/cdn/elements/containers.css

@@ -1,79 +1,80 @@
-.container,
-.container.min {
+main.responsive,
+main.responsive.min {
   margin: 0 auto;
   max-width: 992rem;
   padding: 8rem;
   overflow-x: hidden;
   min-height: 100vh;
+  box-sizing: border-box;
 }
 
-.container.max {
+main.responsive.max {
   max-width: 100%;
 }
 
-.menu.top:not(.s, .m, .l) ~ .container {
-  padding-top: 88rem;
+nav.top:not(.s, .m, .l) ~ main.responsive {
+  padding-top: 96rem;
 }
 
-.menu.bottom:not(.s, .m, .l) ~ .container {
-  padding-bottom: 88rem;
+nav.bottom:not(.s, .m, .l) ~ main.responsive {
+  padding-bottom: 96rem;
 }
 
-.menu.left:not(.s, .m, .l) ~ .container {
-  padding-left: 88rem;
+nav.left:not(.s, .m, .l) ~ main.responsive {
+  padding-left: 96rem;
 }
 
-.menu.right:not(.s, .m, .l) ~ .container {
-  padding-right: 88rem;
+nav.right:not(.s, .m, .l) ~ main.responsive {
+  padding-right: 96rem;
 }
 
 @media only screen and (max-width: 600px) {
-  .menu.s.bottom ~ .container {
-    padding-bottom: 88rem;
+  nav.s.bottom ~ main.responsive {
+    padding-bottom: 96rem;
   }
-  .menu.s.top ~ .container {
-    padding-top: 88rem;
+  nav.s.top ~ main.responsive {
+    padding-top: 96rem;
   }
-  .menu.s.left ~ .container {
-    padding-left: 88rem;
+  nav.s.left ~ main.responsive {
+    padding-left: 96rem;
   }
-  .menu.s.right ~ .container {
-    padding-right: 88rem;
+  nav.s.right ~ main.responsive {
+    padding-right: 96rem;
   }
 }
 
 @media only screen and (min-width: 601px) and (max-width: 992px) {
-  .menu.m.bottom ~ .container {
-    padding-bottom: 88rem;
+  nav.m.bottom ~ main.responsive {
+    padding-bottom: 96rem;
   }
-  .menu.m.top ~ .container {
-    padding-top: 88rem;
+  nav.m.top ~ main.responsive {
+    padding-top: 96rem;
   }
-  .menu.m.left ~ .container {
-    padding-left: 88rem;
+  nav.m.left ~ main.responsive {
+    padding-left: 96rem;
   }
-  .menu.m.right ~ .container {
-    padding-right: 88rem;
+  nav.m.right ~ main.responsive {
+    padding-right: 96rem;
   }
 }
 
 @media only screen and (min-width: 993px) {
-  .menu.l.bottom ~ .container {
-    padding-bottom: 88rem;
+  nav.l.bottom ~ main.responsive {
+    padding-bottom: 96rem;
   }
-  .menu.l.top ~ .container {
-    padding-top: 88rem;
+  nav.l.top ~ main.responsive {
+    padding-top: 96rem;
   }
-  .menu.l.left ~ .container {
-    padding-left: 88rem;
+  nav.l.left ~ main.responsive {
+    padding-left: 96rem;
   }
-  .menu.l.right ~ .container {
-    padding-right: 88rem;
+  nav.l.right ~ main.responsive {
+    padding-right: 96rem;
   }
 }
 
 @media only screen and (max-width: 600px) {
-  .container {
+  main.responsive {
     padding-right: 8rem;
     padding-left: 8rem;
   }

package/src/cdn/elements/modals.css

@@ -164,8 +164,8 @@
   height: 512rem;
 }
 
-.menu > .modal,
-.menu.left > .modal {
+nav > .modal,
+nav.left > .modal {
   z-index: 0;
   text-align: left;
   padding: 16rem 16rem 16rem 80rem;
@@ -173,15 +173,15 @@
   background-color: inherit;
 }
 
-.menu.right > .modal {
+nav.right > .modal {
   padding: 16rem 80rem 16rem 16rem;
 }
 
-.menu.top > .modal {
+nav.top > .modal {
   padding: 80rem 48rem 16rem 48rem;
 }
 
-.menu.bottom > .modal {
+nav.bottom > .modal {
   padding: 16rem 48rem 80rem 48rem;
 }
 

package/src/cdn/elements/navigations.css

@@ -0,0 +1,247 @@
+nav:not(.left, .right, .top, .bottom) {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  margin: 0 -8rem;
+}
+
+*:not(.progress) + nav:not(.left, .right, .top, .bottom) {
+  margin-top: 8rem;
+}
+
+nav:not(.left, .right, .top, .bottom) > :not(.dropdown, .badge) {
+  margin: 0 8rem;
+}
+
+nav.wrap {
+  display: block;
+  white-space: normal;
+}
+
+*:not(.progress) + nav.wrap {
+  margin: 8rem -8rem;
+}
+
+nav.wrap > :not(.dropdown, .badge) {
+  margin: 8rem;
+}
+
+.field > nav {
+  padding: 0 8rem;
+}
+
+nav.left,
+nav.right,
+nav.top,
+nav.bottom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  border: 0;
+  position: fixed;
+  box-shadow: var(--shadow2);
+  color: var(--on-surface-variant);
+  background-color: var(--surface-variant);
+  transform: none;
+  box-sizing: border-box;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  height: auto;
+  width: auto;
+  text-align: center;
+  margin: 0;
+}
+
+nav.left,
+nav.right {
+  width: 80rem;
+}
+
+nav.top,
+nav.bottom {
+  height: 80rem;
+}
+
+nav.border {
+  box-shadow: none;
+  border: 1rem solid var(--outline);
+}
+
+nav.left.border {
+  border-top: none;
+  border-bottom: none;
+  border-left: none;
+}
+
+nav.right.border {
+  border-top: none;
+  border-bottom: none;
+  border-right: none;
+}
+
+nav.top.border {
+  border-top: none;
+  border-right: none;
+  border-left: none;
+}
+
+nav.bottom.border {
+  border-bottom: none;
+  border-right: none;
+  border-left: none;
+}
+
+nav.top {
+  bottom: auto;
+  justify-content: center;
+  flex-direction: row;
+}
+
+nav.left {
+  right: auto;
+  justify-content: flex-start;
+  flex-direction: column;
+}
+
+nav.right {
+  left: auto;
+  justify-content: flex-start;
+  flex-direction: column;
+}
+
+nav.bottom {
+  top: auto;
+  justify-content: center;
+  flex-direction: row;
+}
+
+nav.left > a:not(button, .button, .chip, img, video),
+nav.right > a:not(button, .button, .chip, img, video),
+nav.top > a:not(button, .button, .chip, img, video),
+nav.bottom > a:not(button, .button, .chip, img, video) {
+  min-width: 56rem;
+  min-height: 56rem;
+  text-align: center;
+  margin: 8rem;
+  display: grid;
+  z-index: 101;
+}
+
+nav.left > a:not(button, .button, .chip, img, video),
+nav.right > a:not(button, .button, .chip, img, video) {
+  width: auto;
+}
+
+nav.top > a:not(button, .button, .chip, img, video),
+nav.bottom > a:not(button, .button, .chip, img, video) {
+  height: auto;
+  width: 56rem;
+}
+
+nav.left:before,
+nav.right:before,
+nav.top:before,
+nav.bottom:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: inherit;
+  z-index: 101;
+}
+
+nav.left > :not(.modal, .overlay),
+nav.right > :not(.modal, .overlay),
+nav.top > :not(.modal, .overlay),
+nav.bottom > :not(.modal, .overlay) {
+  z-index: 101;  
+}
+
+nav.no-space > a:not(button, .button, .chip) {
+  margin: 0;
+}
+
+nav.medium-space > a:not(button, .button, .chip) {
+  margin: 16rem;
+}
+
+nav.large-space > a:not(button, .button, .chip) {
+  margin: 24rem;
+}
+
+nav.left > a:not(button, .button, .chip) > i,
+nav.right > a:not(button, .button, .chip) > i,
+nav.top > a:not(button, .button, .chip) > i,
+nav.bottom > a:not(button, .button, .chip) > i {
+  padding: 4rem;
+  border-radius: 32rem;
+  transition: var(--speed1) padding linear;
+}
+
+nav.left > a:not(button, .button, .chip):hover > i,
+nav.left > a:not(button, .button, .chip):focus > i,
+nav.left > a:not(button, .button, .chip).active > i,
+nav.right > a:not(button, .button, .chip):hover > i,
+nav.right > a:not(button, .button, .chip):focus > i,
+nav.right > a:not(button, .button, .chip).active > i,
+nav.top > a:not(button, .button, .chip):hover > i,
+nav.top > a:not(button, .button, .chip):focus > i,
+nav.top > a:not(button, .button, .chip).active > i,
+nav.bottom > a:not(button, .button, .chip):focus > i,
+nav.bottom > a:not(button, .button, .chip):hover > i,
+nav.bottom > a:not(button, .button, .chip).active > i {
+  background-color: var(--primary);
+  color: var(--on-primary);
+  padding: 4rem 16rem;
+}
+
+nav.left > .modal,
+nav.right > .modal,
+nav.top > .modal,
+nav.bottom > .modal {
+  margin: 0;
+}
+
+nav.left > .modal {
+  padding-left: 88rem;
+}
+
+nav.right > .modal {
+  padding-right: 88rem;
+}
+
+nav.top > .modal {
+  padding-top: 88rem;
+}
+
+nav.bottom > .modal {
+  padding-bottom: 88rem;
+}
+
+nav.left-align,
+nav.top-align {
+  justify-content: flex-start;
+}
+
+nav.right-align,
+nav.bottom-align {
+  justify-content: flex-end;
+}
+
+nav.center-align,
+nav.middle-align {
+  justify-content: center;
+}
+
+@media only screen and (max-width: 600px) {
+  nav.top,
+  nav.bottom {
+    justify-content: space-around;
+  }
+}

package/src/cdn/elements/overlays.css

@@ -13,7 +13,7 @@
   transition: var(--speed3) all, 0s background-color;
 }
 
-.menu > .overlay {
+nav > .overlay {
   z-index: 0;
 }
 

package/src/cdn/helpers/forms.css

@@ -1,5 +1,5 @@
 .flat {
-  box-shadow: none;
+  box-shadow: none !important;
 }
 
 .round {

package/src/cdn/helpers/scrolls.css

@@ -4,5 +4,5 @@
 }
 
 .no-scroll {
-  overflow: hidden;
+  overflow: hidden !important;
 }

package/src/cdn/helpers/spaces.css

@@ -1,15 +1,15 @@
-.space:not(.menu, nav, .row, table),
-.small-space:not(.menu, nav, .row, table) {
+.space:not(nav, .row, table),
+.small-space:not(nav, .row, table) {
   height: 16rem;
   display: block;
 }
 
-.medium-space:not(.menu, nav, .row, table) {
+.medium-space:not(nav, .row, table) {
   height: 32rem;
   display: block;
 }
 
-.large-space:not(.menu, nav, .row, table) {
+.large-space:not(nav, .row, table) {
   height: 48rem;
   display: block;
 }

package/src/cdn/settings/dark.css

@@ -1,4 +1,4 @@
-.is-dark {
+body.dark {
   --primary: #D0BCFF;
   --on-primary: #371E73;
   --primary-container: #4F378B;

package/src/cdn/settings/light.css

@@ -1,5 +1,5 @@
 :root,
-.is-light {
+body.light {
   --primary: #6750A4;
   --on-primary: #FFFFFF;
   --primary-container: #EADDFF;