@zanichelli/albe-web-components 2.29.1 → 2.30.0-rc2

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

@@ -1,182 +1,310 @@
-:host {
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-rg);
-}
-
-button {
-  cursor: pointer;
-  display: flex;
-  margin: 0;
-  background: var(--bg-grey-900);
-  border: none;
-  font-size: calc(var(--space-unit) * 2);
-  padding: calc(var(--space-unit) - 2px) 0;
-}
-
-button > z-icon {
-  padding: 0 2px;
-  fill: var(--bg-white);
-}
-
-button > span {
-  padding: 0 6px;
-  color: var(--text-white);
-  font-weight: var(--font-sb);
-  line-height: 19px;
-}
-
-button.light {
-  background: var(--bg-white);
-}
-
-button.light > z-icon {
-  fill: var(--bg-grey-900);
-}
-
-button.light > span {
-  color: var(--bg-grey-900);
-}
-
-button > .userfullname {
-  display: none;
-}
-
-ul {
-  position: absolute;
-  left: 0;
-  padding: var(--space-unit)  0 0 0;
-  width: 100%;
-  margin: 0;
-  background: var(--bg-grey-900);
-}
-
-ul.light {
-  background: var(--bg-white);
-}
-
-ul > li {
-  display: flex;
-  justify-content: flex-end;
-  padding: var(--space-unit);
-  margin: 0 var(--space-unit);
-  border-bottom: var(--border-base) solid var(--bg-grey-700);
-}
-
-ul > li:first-child {
-  border-top: var(--border-base) solid var(--bg-grey-700);
-}
-
-ul > li:last-child {
-  border-bottom: none;
-}
-
-/* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
-  :host {
-    height: calc(var(--space-unit) * 4);
-  }
-
-  :host > div {
-    position: relative;
-  }
-
-  :host > div > div {
-    padding: 0;
-  }
-
-  :host > div > div.open {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: flex-end;
-    align-content: stretch;
-    width: min-content;
-    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: var(--bg-white);
-    border-radius: calc(var(--space-unit) * .5);
-    padding: calc(var(--space-unit) * .5) var(--space-unit);
-    transform: translate(0, -4px);
-  }
-
-  button {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    align-items: end;
-    align-content: center;
-    max-width: 200px;
-  }
-
-  button > span {
-    padding: 0 var(--space-unit);
-  }
-  button.open {
-    background-color: var(--bg-white);
-    border-top: var(--border-size-small) solid var(--bg-white);
-    border-top-left-radius: calc(var(--space-unit) * .5);
-    border-top-right-radius: calc(var(--space-unit) * .5);
-    max-width: initial;
-  }
-
-  button > .userfullname {
-    display: initial;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 250px;
-    text-overflow: ellipsis;
-  }
-
-  button.open > z-icon {
-    fill: var(--gray900);
-  }
-
-  button.open > span {
-    color: var(--gray900);
-  }
-
-  ul {
-    position: initial;
-    left: initial;
-    padding: 0;
-    margin-top: 0;
-    width: 100%;
-    background-color: var(--bg-white);
-    border-bottom: var(--border-size-small) solid var(--bg-white);
-    border-bottom-left-radius: var(--border-radius-base);
-    border-bottom-right-radius: var(--border-radius-base);
-  }
-
-  ul > li {
-    color: var(--gray900);
-    border-bottom: var(--border-base) solid rgb(202, 204, 206);
-    padding: calc(var(--space-unit) * .5);
-    margin: unset;
-  }
-
-  ul > li > * {
-    width: max-content;
-  }
-
-  ul > li:first-child {
-    border-top: none;
-  }
-
-  ul > li:last-child {
-    border-bottom: none;
-  }
-}
-
-/* Desktop breakpoint */
-@media only screen and (min-width: 1152px) {
-  button {
-    max-width: initial;
-  }
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-}
+:host {
+  background-color: var(--bg-grey-900);
+}
+
+:host(.inverse) {
+  background-color: var(--bg-white);
+}
+
+button {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+  background-color: var(--bg-grey-900);
+  border: none;
+  padding: 0;
+  letter-spacing: 0.16px;
+  white-space: nowrap;
+}
+
+button.inverse {
+  background-color: var(--bg-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(--text-white);
+}
+
+z-icon.inverse {
+  fill: var(--bg-grey-900);
+}
+
+ul {
+  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(--bg-grey-900);
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-sb);
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.3px;
+}
+
+ul.inverse {
+  background-color: var(--bg-white);
+}
+
+ul > li {
+  display: flex;
+  justify-content: flex-end;
+  padding: calc(var(--space-unit) * 1.5 - 1px) 0;
+  margin: 0 calc(var(--space-unit) * 4) 0 0;
+  border-bottom: var(--border-base) solid var(--bg-grey-700);
+}
+
+ul > li.inverse {
+  border-bottom-color: var(--gray400);
+}
+
+ul > li:first-child {
+  border-top: none;
+  padding-top: 0;
+  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(--dashboard-font);
+  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(--bg-white);
+  border-color: var(--bg-white);
+  color: var(--text-grey-800);
+}
+
+#guestbutton.inverse {
+  background-color: var(--bg-grey-800);
+  border-color: var(--bg-grey-800);
+  color: var(--text-white);
+}
+
+.userfullname {
+  padding: 0;
+  overflow: hidden;
+  max-width: 250px;
+  text-overflow: ellipsis;
+  color: var(--text-white);
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-sb);
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0;
+}
+
+.userfullname.inverse {
+  color: var(--text-grey-800);
+}
+
+.useremail {
+  color: var(--text-white);
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+}
+
+.useremail.inverse {
+  color: var(--text-grey-800);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host {
+    height: calc(var(--space-unit) * 4);
+    background-color: var(--bg-grey-900);
+  }
+
+  :host(.inverse) {
+    background-color: var(--bg-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(--bg-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(--bg-grey-800);
+  }
+
+  button {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    align-items: end;
+    align-content: center;
+  }
+
+  button.open {
+    background-color: var(--bg-white);
+    border-top: var(--border-size-small) solid var(--bg-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);
+    padding-bottom: calc(var(--space-unit) * 2);
+  }
+
+  button.open.inverse {
+    border-top-color: var(--bg-grey-800);
+    background-color: var(--bg-grey-800);
+  }
+
+  button:not(.open) z-icon {
+    fill: var(--text-white);
+  }
+
+  button:not(.open) z-icon.inverse {
+    fill: var(--text-grey-800);
+  }
+
+  button.open z-icon {
+    fill: var(--text-grey-800);
+  }
+  
+  button.open z-icon.inverse {
+    fill: var(--text-white);
+  }
+
+  .userfullname {
+    font-family: var(--dashboard-font);
+    font-weight: var(--font-sb);
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.16px;
+    padding: 0 calc(var(--space-unit) - 2px);
+  }
+
+  .userfullname.inverse {
+    color: var(--text-grey-800);
+  }
+
+  button.open div.userfullname {
+    color: var(--text-grey-800);
+    max-width: none;
+    text-overflow: clip;
+  }
+
+  button.open div.userfullname.inverse {
+    color: var(--text-white);
+  }
+
+  .useremail {
+    margin-right: calc(var(--space-unit) * 3 + 2px);
+    text-align: end;
+  }
+
+  button.open div.useremail {
+    color: var(--text-grey-800);
+  }
+
+  button.open div.useremail.inverse {
+    color: var(--text-white);
+  }
+
+  ul {
+    position: initial;
+    left: initial;
+    padding: 0;
+    margin-top: 0;
+    width: 100%;
+    background-color: var(--bg-white);
+    border-bottom: var(--border-size-small) solid var(--bg-white);
+    border-bottom-left-radius: var(--border-radius-base);
+    border-bottom-right-radius: var(--border-radius-base);
+  }
+
+  ul.inverse {
+    border-bottom-color: var(--bg-grey-800);
+    background-color: var(--bg-grey-800);
+  }
+
+  ul > li {
+    color: var(--text-grey-800);
+    border-bottom: var(--border-base) solid var(--gray400);
+    margin: 0 var(--space-unit);
+  }
+
+   ul > li.inverse {
+    color: var(--text-white);
+   }
+
+  ul > li:first-child {
+    border-top: var(--border-base) solid var(--gray400);
+    padding-top: calc(var(--space-unit) + 3px);
+  }
+
+}
+
+/* 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"]
+  }; }
+}

package/dist/collection/components/notification/z-candybar/styles.css

@@ -1,61 +1,61 @@
-:host {
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-rg);
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	justify-content: center;
-  align-content: center;
-}
-
-:host > div {
-  position: fixed;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  top: 30vh;
-  max-width: 297px;
-  height: fit-content;
-  min-height: 232px;
-  z-index: 1000;
-  margin: auto;
-  overflow: auto;
-  overflow: -moz-scrollbars-none;
-  -ms-overflow-style: none;
-  background: var(--myz-blue-lighter);
-  border-radius: calc(var(--space-unit) * .5);
-  box-shadow: 0px -2px 4px 0px rgba(66, 69, 72, 0.4);
-}
-
-/* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
-  :host > div {
-    position: initial;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: center;
-    align-content: stretch;
-    position: fixed;
-    top: auto;
-    bottom: 0;
-    margin: 0 auto;
-    left: 0;
-    right: 0;
-    height: auto;
-    min-height: 138px;
-    max-width: 100%;
-    border-radius: 0px;
-  }
-}
-
-/* Desktop breakpoint */
-@media only screen and (min-width: 1152px) {
-  :host > div {
-    min-height: 122px;
-  }
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-}
+:host {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: center;
+  align-content: center;
+}
+
+:host > div {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  top: 30vh;
+  max-width: 297px;
+  height: fit-content;
+  min-height: 232px;
+  z-index: 1000;
+  margin: auto;
+  overflow: auto;
+  overflow: -moz-scrollbars-none;
+  -ms-overflow-style: none;
+  background: var(--myz-blue-lighter);
+  border-radius: calc(var(--space-unit) * .5);
+  box-shadow: 0px -2px 4px 0px rgba(66, 69, 72, 0.4);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host > div {
+    position: initial;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    align-content: stretch;
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    height: auto;
+    min-height: 138px;
+    max-width: 100%;
+    border-radius: 0px;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+  :host > div {
+    min-height: 122px;
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}