@zanichelli/albe-web-components 2.24.10 → 2.26.0

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

@@ -1,183 +1,182 @@
-: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;
-  padding: 0;
-  font-size: calc(var(--space-unit) * 2);
-  padding: 6px;
-}
-
-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: 0;
-    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) 0;
-    transform: translate(0, -4px);
-  }
-
-  button {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    align-items: end;
-    align-content: center;
-    padding: 6px var(--space-unit);
-    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) var(--space-unit);
-  }
-
-  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 {
+  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) {
+}

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) {
+}