beercss 1.2.9 → 2.0.2

package/src/cdn/beer.js

@@ -1,7 +1,7 @@
 (() => {
   const guid = () => {
     return "fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-      var r = (Math.random() * 16) | 0,
+      let r = (Math.random() * 16) | 0,
         v = c == "x" ? r : (r & 0x3) | 0x8;
       return v.toString(16);
     });
@@ -12,9 +12,7 @@
       return selector instanceof HTMLElement
         ? selector
         : (element || document).querySelector(selector);
-    } catch {
-      return null;
-    }
+    } catch {}
   };
 
   const queryAll = (selector, element) => {
@@ -22,9 +20,7 @@
       return Array.isArray(selector)
         ? selector
         : (element || document).querySelectorAll(selector);
-    } catch {
-      return null;
-    }
+    } catch {}
   };
 
   const hasClass = (element, name) => {
@@ -80,43 +76,62 @@
   };
 
   const create = (json) => {
-    var element = document.createElement("div");
+    let element = document.createElement("div");
 
-    for (var i in json)
+    for (let i in json)
       element[i] = json[i];
 
     return element;
   };
 
+  const updateInput = (input, label, parentTarget) => {
+    if (!input.value && document.activeElement != input) return input.style.clipPath = "";
+
+    if (label && hasClass(parentTarget, "border") && !hasClass(parentTarget, "fill")) {
+      let width = Math.round(label.offsetWidth / (label.offsetHeight / 14));
+      let start = hasClass(parentTarget, "round") ? 20 : 12;
+      let end = width + start + 8;
+      input.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 8rem, ${end}rem 8rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
+    } else {
+      input.style.clipPath = "";
+    }  
+  }
+
   const onClickElement = (e) => {
     if (/input/i.test(e.tagName)) return;
     return open(e.currentTarget);
   };
 
   const onClickLabel = (e) => {
-    var input = query('input:not([type=checkbox]):not([type=radio]), select, textarea', parent(e.currentTarget));
+    let input = query('input:not([type=checkbox]):not([type=radio]), select, textarea', parent(e.currentTarget));
     input.focus();
   };
 
   const onFocusInput = (e) => {
-    var label = query("label", parent(e.currentTarget));
+    let parentTarget = parent(e.currentTarget);
+    let label = query("label", parentTarget);
+
     addClass(label, "active");
+    updateInput(e.currentTarget, label, parentTarget);
 
     if (e.currentTarget.getAttribute("data-ui"))
       open(e.currentTarget);
   };
 
   const onBlurInput = (e) => {
-    var label = query("label", parent(e.currentTarget));
+    let label = query("label", parent(e.currentTarget));
 
-    if (!e.currentTarget.value) removeClass(label, "active");
+    if (!e.currentTarget.value) {
+      removeClass(label, "active");
+      e.currentTarget.style.clipPath = "";
+    }
 
     if (e.currentTarget.getAttribute("data-ui"))
       open(e.currentTarget);
   };
 
   const onClickDocument = (e) => {
-    var dropdowns = queryAll(".dropdown.active");
+    let dropdowns = queryAll(".dropdown.active");
     dropdowns.forEach((x) => {
       removeClass(x, "active");
     });
@@ -131,7 +146,7 @@
       clearTimeout(timeoutToast);
   };
 
-  var timeoutToast = null;
+  let timeoutToast = null;
 
   const open = (from, to, config) => {
     if (!to)
@@ -141,23 +156,21 @@
     if (hasClass(to, "dropdown")) return dropdown(from, to, config);
     if (hasClass(to, "toast")) return toast(from, to, config);
     if (hasClass(to, "page")) return page(from, to, config);
+    if (hasClass(to, "progress")) return progress(from, to, config);
 
     tab(from, to, config);
 
-    if (hasClass(to, "active")) {
-      removeClass(to, "active");
-      return;
-    }
+    if (hasClass(to, "active")) return removeClass(to, "active");
 
     addClass(to, "active");
   };
 
   const tab = (from, to, config) => {
-    var container = parent(from);
+    let container = parent(from);
     if (!hasClass(container, "tabs"))
       return;
 
-    var tabs = queryAll("a", container);
+    let tabs = queryAll("a", container);
     tabs.forEach((x) => {
       removeClass(x, "active");
     });
@@ -168,8 +181,8 @@
   const page = (from, to, config) => {
     tab(from, to, config);
 
-    var container = parent(to);
-    for (var i = 0; i < container.children.length; i++) {
+    let container = parent(to);
+    for (let i = 0; i < container.children.length; i++) {
       if (hasClass(container.children[i], "page"))
         removeClass(container.children[i], "active");
     }
@@ -180,12 +193,9 @@
   const dropdown = (from, to, config) => {
     tab(from, to, config);
 
-    if (hasClass(to, "active")) {
-      removeClass(to, "active");
-      return;
-    }
+    if (hasClass(to, "active")) return removeClass(to, "active");
 
-    var dropdowns = queryAll(".dropdown.active");
+    let dropdowns = queryAll(".dropdown.active");
     dropdowns.forEach((x) => {
       removeClass(x, "active");
     });
@@ -197,7 +207,7 @@
   const modal = (from, to, config) => {
     tab(from, to, config);
 
-    var overlay = prev(to);
+    let overlay = prev(to);
     if (!hasClass(overlay, "overlay")) {
       overlay = create({ className: "overlay active" });
       insertBefore(overlay, to);
@@ -209,10 +219,10 @@
       removeClass(overlay, "active");
     }
 
-    var isActive = hasClass(to, "active");
-    var container = parent(to);
+    let isActive = hasClass(to, "active");
+    let container = parent(to);
     if (hasClass(container, "menu")) {
-      var elements = queryAll(".menu > .modal, .menu > a, .menu > .overlay");
+      let elements = queryAll(".menu > .modal, .menu > a, .menu > .overlay");
       elements.forEach((x) => {
         removeClass(x, "active");
       });
@@ -232,7 +242,7 @@
   const toast = (from, to, config) => {
     tab(from, to, config);
 
-    var elements = queryAll(".toast.active");
+    let elements = queryAll(".toast.active");
     elements.forEach((x) => {
       removeClass(x, "active");
     });
@@ -242,43 +252,58 @@
     if (timeoutToast)
       clearTimeout(timeoutToast);
 
-    if (config && config.timeout == -1)
+    if (config && config == -1)
       return;
 
     timeoutToast = setTimeout(() => {
       removeClass(to, "active");
-    }, config && config.timeout ? config.timeout : 6000);
+    }, config && config ? config : 6000);
+  };
+
+  const progress = (from, to, config) => {
+    if (hasClass(to, "left"))
+      return  to.style.clipPath = `polygon(0% 0%, 0% 100%, ${config}% 100%, ${config}% 0%)`;
+
+    if (hasClass(to, "top"))
+      return to.style.clipPath = `polygon(0% 0%, 100% 0%, 100% ${config}%, 0% ${config}%)`;
+
+    if (hasClass(to, "right"))
+      return  to.style.clipPath = `polygon(100% 0%, 100% 100%, ${100 - config}% 100%, ${100 - config}% 0%)`;
+
+    if (hasClass(to, "bottom"))
+      return to.style.clipPath = `polygon(0% 100%, 100% 100%, 100% ${100 - config}%, 0% ${100 - config}%)`;
   };
 
   const ui = (selector, config) => {
     if (selector) {
       if (selector == "guid") return guid();
 
-      var to = query(selector);
-      var from = query("[data-ui='#" + to.id + "']");
-      open(from, to, config);
-      return;
+      let to = query(selector);
+      let from = query("[data-ui='#" + to.id + "']");
+      return open(from, to, config);
     }
 
-    var elements = queryAll("[data-ui]");
+    let elements = queryAll("[data-ui]");
     elements.forEach((x) => {
       on(x, "click", onClickElement);
     });
 
-    var labels = queryAll(".field > label");
+    let labels = queryAll(".field > label");
     labels.forEach((x) => {
       on(x, "click", onClickLabel);
     });
 
-    var inputs = queryAll(".field > input:not([type=checkbox]):not([type=radio]), select, textarea");
+    let inputs = queryAll(".field > input:not([type=checkbox]):not([type=radio]), select, textarea");
     inputs.forEach((x) => {
-      var label = query("label", parent(x));
+      let parentTarget = parent(x);
+      let label = query("label", parentTarget);
 
       on(x, "focus", onFocusInput);
       on(x, "blur", onBlurInput);
 
       if (x.value) addClass(label, "active");
       else removeClass(label, "active");
+      updateInput(x, label, parentTarget);
     });
   };
 

package/src/cdn/elements/badges.css

@@ -7,8 +7,8 @@
   text-transform: none;
   z-index: 1;
   padding: 0 6rem;
-  background-color:var(--color-3);
-  color: #ffffff;
+  background-color: var(--error);
+  color: var(--on-error);
   top: 0;
   left: auto;
   bottom: auto;
@@ -93,9 +93,9 @@
 }
 
 .badge.border {
-  border: 1rem solid var(--color-3);
+  border: 1rem solid var(--error);
   background-color: transparent;
-  color:var(--color-3);
+  color:var(--error);
 }
 
 .badge.round {

package/src/cdn/elements/buttons.css

@@ -4,33 +4,22 @@ button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-shadow: var(--shadow-1);
+  box-shadow: var(--shadow1);
   min-height: 40rem;
   height: 40rem;
   font-size: 14rem;
   font-weight: 500;
-  color: #ffffff;
-  padding: 0 12rem;
-  background-color: var(--color-1);
+  color: var(--on-primary);
+  padding: 0 16rem;
+  background-color: var(--primary);
   margin: 0 8rem;
-  text-transform: uppercase;
   border-radius: 4rem;
-  transition: var(--speed-3) transform, var(--speed-3) border-radius, var(--speed-3) padding;
+  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
 }
 
-button > :not(.dropdown, .badge) + :not(.dropdown, .badge),
-.button > :not(.dropdown, .badge) + :not(.dropdown, .badge) {
-  margin-left: 6rem;
-}
-
-button > .responsive:first-child,
-.button > .responsive:first-child {
-  margin-left: -12rem;
-}
-
-button > .responsive:last-child,
-.button > .responsive:last-child {
-  margin-right: -12rem;
+.button > :not(.dropdown, .progress, .badge, .tooltip) + :not(.dropdown, .progress, .badge, .tooltip),
+button > :not(.dropdown, .progress, .badge, .tooltip) + :not(.dropdown, .progress, .badge, .tooltip) {
+  margin-left: 4rem;
 }
 
 .button.none,
@@ -40,7 +29,7 @@ button.none {
   min-width: auto;
   height: auto;
   min-height: auto;
-  color: var(--color-1);
+  color: var(--primary);
   padding: 0;
   background-color: transparent;
   margin: 0 8rem;
@@ -50,6 +39,7 @@ button.none {
 button.small {
   min-height: 32rem !important;
   height: 32rem;
+  font-size: 14rem;
 }
 
 .button.medium,
@@ -68,13 +58,14 @@ button.large {
 button.extra {
   min-height: 56rem !important;
   height: 56rem;
+  font-size: 16rem;
 }
 
 .button.border,
 button.border {
-  border: 1rem solid var(--color-1);
+  border: 1rem solid var(--primary);
   background-color: transparent;
-  color: var(--color-1);
+  color: var(--primary);
   box-shadow: none;
 }
 
@@ -137,4 +128,68 @@ button.square {
   transform: none;
   border-radius: 4rem;
   padding: 0;
+}
+
+.button.extend,
+button.extend {
+  min-height: 56rem !important;
+  min-width: 56rem !important;
+  padding: 0;
+}
+
+.button.extend > span,
+button.extend > span {
+  display: none;
+}
+
+.button.extend:hover,
+button.extend:hover,
+.button.extend.active,
+button.extend.active {
+  width: auto;
+  max-width: none;  
+  min-width: auto;
+  padding: 0 16rem;
+}
+
+.button.extend:hover > i + span,
+button.extend:hover > i + span,
+.button.extend.active > i + span,
+button.extend.active > i + span {
+  display: inherit;
+  margin-left: 32rem;
+}
+
+.button.extend:hover > img + span,
+button.extend:hover > img + span,
+.button.extend.active > img + span,
+button.extend.active > img + span {
+  display: inherit;
+  margin-left: 48rem;
+}
+
+.button.square:not(.flat, .border),
+.button.circle:not(.flat, .border),
+.button.diamond:not(.flat, .border),
+button.square:not(.flat, .border),
+button.circle:not(.flat, .border),
+button.diamond:not(.flat, .border) {
+  box-shadow: var(--shadow2);
+}
+
+.button[disabled],
+button:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.button[disabled] {
+  pointer-events: none;
+}
+
+.button[disabled]::before,
+button:disabled::before,
+.button[disabled]::after,
+button:disabled::after {
+  display: none;
 }

package/src/cdn/elements/cards.css

@@ -1,11 +1,12 @@
 .card,
 article {
-  box-shadow: var(--shadow-1);
-  background-color: var(--color-4);
+  box-shadow: var(--shadow1);
+  background-color: var(--surface-variant);
+  color: var(--on-surface-variant);
   padding: 16rem;
   border-radius: 4rem;
   display: block;
-  transition: var(--speed-3) transform, var(--speed-3) border-radius, var(--speed-3) padding;
+  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
 }
 
 .card + .card,
@@ -40,8 +41,9 @@ article.large {
 
 .card.border,
 article.border {
-  border: 1rem solid var(--color-2b);
+  border: 1rem solid var(--outline);
   box-shadow: none;
+  background-color: transparent;
 }
 
 .card.round,

package/src/cdn/elements/chips.css

@@ -8,27 +8,19 @@
   height: 40rem;
   font-size: 14rem;
   font-weight: 500;
-  color: var(--color-2);
-  padding: 0 12rem;
-  background-color: var(--color-2a);
+  color: var(--on-secondary);
+  padding: 0 16rem;
+  background-color: var(--secondary);
   margin: 0 8rem;
   text-transform: none;
-  border-radius: 24rem;
-  transition: var(--speed-3) transform, var(--speed-3) border-radius, var(--speed-3) padding;
+  border-radius: 8rem;
+  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
 }
 
-.chip > :not(.dropdown, .badge) + :not(.dropdown, .badge) {
+.chip > :not(.dropdown, .progress, .badge, .tooltip) + :not(.dropdown, .progress, .badge, .tooltip) {
   margin-left: 4rem;
 }
 
-.chip > .responsive:first-child {
-  margin-left: -12rem;
-}
-
-.chip > .responsive:last-child {
-  margin-right: -12rem;
-}
-
 .chip.small {
   min-height: 32rem !important;
   height: 32rem;
@@ -45,9 +37,9 @@
 }
 
 .chip.border {
-  border: 1rem solid var(--color-2b);
+  border: 1rem solid var(--secondary);
   background-color: transparent;
-  color: inherit;
+  color: var(--secondary);
 }
 
 .chip.active::before {
@@ -58,7 +50,7 @@
   width: 100%;
   height: 100%;
   border-radius: inherit;
-  background-color: var(--color-2b);
+  background-color: var(--active);
 }
 
 .chip.circle {
@@ -72,4 +64,8 @@
   transform: none;
   border-radius: 4rem;
   padding: 0;
+}
+
+.chip.round {
+  border-radius: 24rem;
 }

package/src/cdn/elements/dropdowns.css

@@ -2,8 +2,8 @@
   opacity: 0;
   visibility: hidden;
   position: absolute;
-  box-shadow: var(--shadow-2);
-  background-color: var(--color-4);
+  box-shadow: var(--shadow2);
+  background-color: var(--surface);
   box-sizing: border-box;
   z-index: 2;
   top: auto;
@@ -18,7 +18,7 @@
   font-size: 14rem;
   font-weight: normal;
   text-transform: none;
-  color: var(--color-2);
+  color: var(--on-surface);
   line-height: normal;
   text-align: left;
 }
@@ -29,17 +29,17 @@
 
 .dropdown.active,
 .dropdown:not([data-ui]):active,
-button:not([data-ui]):focus > .dropdown,
-.button:not([data-ui]):focus > .dropdown,
-.field > :not([data-ui]):focus ~ .dropdown {
+button:not([data-ui]):focus-within > .dropdown,
+.button:not([data-ui]):focus-within > .dropdown,
+.field > :not([data-ui]):focus-within ~ .dropdown {
   opacity: 1;
   visibility: visible;
   max-width: none;
-  animation: var(--speed-1) dropdown-to-bottom;
+  animation: var(--speed1) dropdown-to-bottom;
 }
 
 .dropdown.border {
-  border: 1rem solid var(--color-2b);
+  border: 1rem solid var(--outline);
   box-shadow: none;
 }
 
@@ -63,8 +63,9 @@ button:not([data-ui]):focus > .dropdown,
 }
 
 .dropdown > a:hover,
+.dropdown > a:focus,
 .dropdown > a.active {
-  background-color: var(--color-2a);
+  background-color: var(--active);
 }
 
 .dropdown.no-wrap > a {

package/src/cdn/elements/expansions.css

@@ -1,5 +1,5 @@
 details[open] > :not(summary) {
-  animation: details-to-open var(--speed-3) ease;
+  animation: details-to-open var(--speed3) ease;
 }
 
 summary.none {