@zanichelli/albe-web-components 2.33.3 → 2.33.5-rc2

package/dist/collection/components/navigation/z-user-dropdown/styles.css

@@ -1,315 +1,315 @@
-:host {
-  background-color: var(--gray900);
-}
-
-:host(.inverse) {
-  background-color: var(--color-white);
-}
-
-button {
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  margin: 0;
-  background-color: var(--gray900);
-  border: none;
-  padding: 0;
-  letter-spacing: 0.16px;
-  white-space: nowrap;
-}
-
-button.inverse {
-  background-color: var(--color-white);
-}
-
-button div.firstline {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  max-width: 200px;
-}
-
-button.open div.firstline {
-  max-width: none;
-}
-
-z-icon {
-  padding: 0 2px;
-  fill: var(--color-white);
-}
-
-z-icon.inverse {
-  fill: var(--gray900);
-}
-
-ul {
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);
-  width: 100%;
-  margin: calc(var(--space-unit) * 1.5) 0 0 0;
-  background-color: var(--gray900);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-sb);
-  font-size: 14px;
-  line-height: 20px;
-  letter-spacing: 0.3px;
-}
-
-ul.inverse {
-  background-color: var(--color-white);
-}
-
-ul > li {
-  display: flex;
-  justify-content: flex-end;
-  white-space: nowrap;
-  padding: calc(var(--space-unit) * 1.5 - 1px) 0;
-  margin: 0;
-  border-bottom: var(--border-base) solid var(--gray700);
-}
-
-ul > li.inverse {
-  border-bottom-color: var(--gray400);
-}
-
-ul > li:first-child {
-  border-top: none;
-  padding-top: 0;
-  padding-bottom: calc(var(--space-unit) + 6px);
-  flex-direction: column;
-  align-items: end;
-}
-
-ul > li:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-}
-
-#guestbutton {
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-sb);
-  font-size: 14px;
-  line-height: 1;
-  letter-spacing: 0.3px;
-  border-width: var(--border-size-medium);
-  border-style: solid;
-  border-radius: var(--border-radius);
-  vertical-align: middle;
-  text-transform: uppercase;
-  text-decoration: none;
-  cursor: pointer;
-  outline: none;
-  fill: currentColor;
-  height: 32px;
-  min-width: 32px;
-  padding: 0 calc(var(--space-unit) * 2);
-  background-color: var(--color-white);
-  border-color: var(--color-white);
-  color: var(--gray800);
-}
-
-#guestbutton.inverse {
-  background-color: var(--gray800);
-  border-color: var(--gray800);
-  color: var(--color-white);
-}
-
-.userfullname {
-  padding: 0;
-  overflow: hidden;
-  max-width: 250px;
-  text-overflow: ellipsis;
-  width: 100%;
-  color: var(--color-white);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-sb);
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: 0;
-  text-align: right;
-}
-
-.userfullname.inverse {
-  color: var(--gray800);
-}
-
-.useremail {
-  color: var(--color-white);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0.32px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  text-align: right;
-}
-
-.useremail.inverse {
-  color: var(--gray800);
-}
-
-/* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
-  :host {
-    height: calc(var(--space-unit) * 4);
-    background-color: var(--gray900);
-  }
-
-  :host(.inverse) {
-    background-color: var(--color-white);
-  }
-
-  :host > div {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  :host > div.open {
-    top: auto;
-    transform: none;
-  }
-
-  :host > div > div {
-    padding: 0;
-  }
-
-  :host > div > div.open {
-    position: absolute;
-    right: calc(var(--space-unit) * -1);
-    box-shadow: 0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);
-    background-color: var(--color-white);
-    margin-top: calc(var(--space-unit) / 2);
-    padding: calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);
-    transform: translate(0, -4px);
-  }
-
-  :host > div > div.inverse.open {
-    background-color: var(--gray800);
-  }
-
-  button {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    align-items: end;
-    align-content: center;
-  }
-
-  button.open {
-    background-color: var(--color-white);
-    border-top: var(--border-size-small) solid var(--color-white);
-    border-top-left-radius: calc(var(--space-unit) * .5);
-    border-top-right-radius: calc(var(--space-unit) * .5);
-    max-width: initial;
-    margin-left: var(--space-unit);
-    padding-right: var(--space-unit);
-  }
-
-  button.open.inverse {
-    border-top-color: var(--gray800);
-    background-color: var(--gray800);
-  }
-
-  button:not(.open) z-icon {
-    fill: var(--color-white);
-  }
-
-  button:not(.open) z-icon.inverse {
-    fill: var(--gray800);
-  }
-
-  button.open z-icon {
-    fill: var(--gray800);
-  }
-
-  button.open z-icon.inverse {
-    fill: var(--color-white);
-  }
-
-  .userfullname {
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-sb);
-    font-size: 14px;
-    line-height: 20px;
-    letter-spacing: 0.16px;
-    padding: 0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);
-    width: auto;
-  }
-
-  .userfullname.inverse {
-    color: var(--gray800);
-  }
-
-  button.open div.userfullname {
-    color: var(--gray800);
-    max-width: none;
-    text-overflow: clip;
-  }
-
-  button.open div.userfullname.inverse {
-    color: var(--color-white);
-  }
-
-  .useremail {
-    padding-right: calc(var(--space-unit) * 3 - 2px);
-    box-sizing: border-box;
-  }
-
-  button.open div.useremail {
-    color: var(--gray800);
-  }
-
-  button.open div.useremail.inverse {
-    color: var(--color-white);
-  }
-
-  ul {
-    position: initial;
-    left: initial;
-    padding: 0;
-    width: 100%;
-    background-color: var(--color-white);
-  }
-
-  ul.inverse {
-    border-bottom-color: var(--gray800);
-    background-color: var(--gray800);
-  }
-
-  ul > li {
-    color: var(--gray800);
-    border-bottom: var(--border-base) solid var(--gray400);
-    margin: 0 var(--space-unit);
-  }
-
-  ul > li.inverse {
-    color: var(--color-white);
-  }
-
-  ul > li:first-child {
-    border-top: var(--border-base) solid var(--gray400);
-    padding-top: calc(var(--space-unit) + 3px);
-    padding-bottom: calc(var(--space-unit) + 5px);
-  }
-}
-
-/* Desktop breakpoint */
-@media only screen and (min-width: 1152px) {
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-}
+:host {
+  background-color: var(--gray900);
+}
+
+:host(.inverse) {
+  background-color: var(--color-white);
+}
+
+button {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+  background-color: var(--gray900);
+  border: none;
+  padding: 0;
+  letter-spacing: 0.16px;
+  white-space: nowrap;
+}
+
+button.inverse {
+  background-color: var(--color-white);
+}
+
+button div.firstline {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  max-width: 200px;
+}
+
+button.open div.firstline {
+  max-width: none;
+}
+
+z-icon {
+  padding: 0 2px;
+  fill: var(--color-white);
+}
+
+z-icon.inverse {
+  fill: var(--gray900);
+}
+
+ul {
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);
+  width: 100%;
+  margin: calc(var(--space-unit) * 1.5) 0 0 0;
+  background-color: var(--gray900);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.3px;
+}
+
+ul.inverse {
+  background-color: var(--color-white);
+}
+
+ul > li {
+  display: flex;
+  justify-content: flex-end;
+  white-space: nowrap;
+  padding: calc(var(--space-unit) * 1.5 - 1px) 0;
+  margin: 0;
+  border-bottom: var(--border-base) solid var(--gray700);
+}
+
+ul > li.inverse {
+  border-bottom-color: var(--gray400);
+}
+
+ul > li:first-child {
+  border-top: none;
+  padding-top: 0;
+  padding-bottom: calc(var(--space-unit) + 6px);
+  flex-direction: column;
+  align-items: end;
+}
+
+ul > li:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+#guestbutton {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  font-size: 14px;
+  line-height: 1;
+  letter-spacing: 0.3px;
+  border-width: var(--border-size-medium);
+  border-style: solid;
+  border-radius: var(--border-radius);
+  vertical-align: middle;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  fill: currentColor;
+  height: 32px;
+  min-width: 32px;
+  padding: 0 calc(var(--space-unit) * 2);
+  background-color: var(--color-white);
+  border-color: var(--color-white);
+  color: var(--gray800);
+}
+
+#guestbutton.inverse {
+  background-color: var(--gray800);
+  border-color: var(--gray800);
+  color: var(--color-white);
+}
+
+.userfullname {
+  padding: 0;
+  overflow: hidden;
+  max-width: 250px;
+  text-overflow: ellipsis;
+  width: 100%;
+  color: var(--color-white);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0;
+  text-align: right;
+}
+
+.userfullname.inverse {
+  color: var(--gray800);
+}
+
+.useremail {
+  color: var(--color-white);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  text-align: right;
+}
+
+.useremail.inverse {
+  color: var(--gray800);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host {
+    height: calc(var(--space-unit) * 4);
+    background-color: var(--gray900);
+  }
+
+  :host(.inverse) {
+    background-color: var(--color-white);
+  }
+
+  :host > div {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :host > div.open {
+    top: auto;
+    transform: none;
+  }
+
+  :host > div > div {
+    padding: 0;
+  }
+
+  :host > div > div.open {
+    position: absolute;
+    right: calc(var(--space-unit) * -1);
+    box-shadow: 0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);
+    background-color: var(--color-white);
+    margin-top: calc(var(--space-unit) / 2);
+    padding: calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);
+    transform: translate(0, -4px);
+  }
+
+  :host > div > div.inverse.open {
+    background-color: var(--gray800);
+  }
+
+  button {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    align-items: end;
+    align-content: center;
+  }
+
+  button.open {
+    background-color: var(--color-white);
+    border-top: var(--border-size-small) solid var(--color-white);
+    border-top-left-radius: calc(var(--space-unit) * .5);
+    border-top-right-radius: calc(var(--space-unit) * .5);
+    max-width: initial;
+    margin-left: var(--space-unit);
+    padding-right: var(--space-unit);
+  }
+
+  button.open.inverse {
+    border-top-color: var(--gray800);
+    background-color: var(--gray800);
+  }
+
+  button:not(.open) z-icon {
+    fill: var(--color-white);
+  }
+
+  button:not(.open) z-icon.inverse {
+    fill: var(--gray800);
+  }
+
+  button.open z-icon {
+    fill: var(--gray800);
+  }
+
+  button.open z-icon.inverse {
+    fill: var(--color-white);
+  }
+
+  .userfullname {
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-sb);
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.16px;
+    padding: 0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);
+    width: auto;
+  }
+
+  .userfullname.inverse {
+    color: var(--gray800);
+  }
+
+  button.open div.userfullname {
+    color: var(--gray800);
+    max-width: none;
+    text-overflow: clip;
+  }
+
+  button.open div.userfullname.inverse {
+    color: var(--color-white);
+  }
+
+  .useremail {
+    padding-right: calc(var(--space-unit) * 3 - 2px);
+    box-sizing: border-box;
+  }
+
+  button.open div.useremail {
+    color: var(--gray800);
+  }
+
+  button.open div.useremail.inverse {
+    color: var(--color-white);
+  }
+
+  ul {
+    position: initial;
+    left: initial;
+    padding: 0;
+    width: 100%;
+    background-color: var(--color-white);
+  }
+
+  ul.inverse {
+    border-bottom-color: var(--gray800);
+    background-color: var(--gray800);
+  }
+
+  ul > li {
+    color: var(--gray800);
+    border-bottom: var(--border-base) solid var(--gray400);
+    margin: 0 var(--space-unit);
+  }
+
+  ul > li.inverse {
+    color: var(--color-white);
+  }
+
+  ul > li:first-child {
+    border-top: var(--border-base) solid var(--gray400);
+    padding-top: calc(var(--space-unit) + 3px);
+    padding-bottom: calc(var(--space-unit) + 5px);
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

package/dist/collection/components/notification/z-candybar/index.js

@@ -1,18 +1,18 @@
-import { Component, h } from "@stencil/core";
-/**
- * @slot content - fill the content of the candybar (full width, full height)
- */
-export class ZCandybar {
-  render() {
-    return (h("div", null,
-      h("slot", { name: "content" })));
-  }
-  static get is() { return "z-candybar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-}
+import { Component, h } from "@stencil/core";
+/**
+ * @slot content - fill the content of the candybar (full width, full height)
+ */
+export class ZCandybar {
+  render() {
+    return (h("div", null,
+      h("slot", { name: "content" })));
+  }
+  static get is() { return "z-candybar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+}