@zanichelli/albe-web-components 9.2.0 → 9.2.2-beta

package/dist/collection/components/z-book-card/styles.css

@@ -1,469 +1,469 @@
-/* COMMON STYLES */
-
-:host {
-  --z-book-card-ribbon-background-color: var(--avatar-C08);
-  --z-book-card-ribbon-shadow-color: var(--green950);
-  --z-book-card-compact-width: 262px;
-  --z-book-card-compact-height: 568px;
-}
-
-:host > article {
-  display: block;
-  width: 100%;
-  max-width: 360px;
-  box-sizing: border-box;
-  border: var(--border-size-medium) solid var(--color-surface03);
-  background-color: var(--color-surface01);
-  border-radius: var(--border-radius);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-:host > article div.cover {
-  position: relative;
-}
-
-:host > article div.cover div.img-wrapper {
-  display: flex;
-  overflow: hidden;
-  border: var(--border-size-small) solid var(--color-surface03);
-  line-height: 0;
-}
-
-:host > article div.cover div.img-wrapper img {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  max-height: 100%;
-  align-self: flex-end;
-}
-
-:host > article div.cover div.ribbon {
-  position: absolute;
-  z-index: 10;
-  top: calc(var(--space-unit) * 2);
-  left: calc(var(--space-unit) * -2);
-  display: flex;
-  max-width: 100%;
-  height: calc(var(--space-unit) * 4);
-  box-sizing: border-box;
-  align-items: center;
-  padding: 0 calc(var(--space-unit) * 2);
-  border: var(--border-size-medium) solid var(--color-surface01);
-  background: var(--z-book-card-ribbon-background-color);
-  border-radius: 0 var(--border-radius) var(--border-radius) 0;
-  box-shadow: var(--shadow-2);
-  color: var(--color-text04);
-  font-size: var(--font-size-2);
-  font-weight: var(--font-sb);
-  line-height: initial;
-}
-
-:host > article div.cover div.ribbon span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: nowrap;
-}
-
-:host > article div.cover div.ribbon::before {
-  position: absolute;
-  bottom: -12px;
-  left: -2px;
-  width: 0;
-  height: 0;
-  border-top: 10px solid var(--z-book-card-ribbon-shadow-color);
-  border-left: 16px solid transparent;
-  content: "";
-}
-
-:host > article div.content {
-  margin: var(--space-unit) 0;
-  border-radius: var(--border-radius);
-}
-
-:host > article .title {
-  display: flex;
-  height: 100%;
-  align-self: center;
-  color: var(--color-text02);
-  font-size: var(--font-size-4);
-  font-weight: var(--font-sb);
-  line-height: 1.5;
-}
-
-:host > article .title * {
-  all: unset;
-}
-
-:host > article div.subtitle {
-  color: var(--color-text02);
-  font-size: var(--font-size-2);
-  font-weight: var(--font-rg);
-  line-height: 1.4;
-}
-
-:host > article div.authors {
-  color: var(--color-text02);
-  font-size: var(--font-size-1);
-  font-weight: var(--font-rg);
-  line-height: 1.33;
-}
-
-:host > article div.isbn {
-  overflow: hidden;
-  color: var(--color-text02);
-  font-size: var(--font-size-2);
-  line-height: 1.33;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: nowrap;
-}
-
-:host > article div.isbn > .code {
-  font-weight: var(--font-sb);
-}
-
-:host > article div.tags {
-  display: flex;
-  overflow: hidden;
-  max-height: 32px;
-  flex-flow: row wrap;
-  align-content: stretch;
-  align-items: stretch;
-  justify-content: flex-start;
-  gap: calc(var(--space-unit) / 2);
-}
-
-:host > article ::slotted([slot="tags"]) {
-  margin-bottom: var(--space-unit);
-}
-
-:host > article ::slotted([slot="header-cta"]) {
-  --z-icon-width: 20px;
-  --z-icon-height: 20px;
-
-  padding: var(--space-unit);
-  cursor: pointer;
-  fill: var(--color-icon01);
-}
-
-/* EXPANDED STYLES */
-
-:host > article.expanded {
-  width: 100%;
-  min-width: 328px;
-  padding: calc(var(--space-unit) * 2);
-  padding-bottom: 0;
-}
-
-:host > article.expanded div.header {
-  display: flex;
-  flex-flow: row nowrap;
-  align-content: stretch;
-  align-items: top;
-  justify-content: space-between;
-  margin-bottom: var(--space-unit);
-  white-space: nowrap;
-}
-
-:host > article.expanded div.cover div.img-wrapper {
-  border-radius: var(--border-radius);
-}
-
-:host > article.expanded div.cover div.img-wrapper img {
-  width: 100%;
-}
-
-:host > article.expanded .title,
-:host > article.expanded .subtitle,
-:host > article.expanded .authors {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  white-space: initial;
-}
-
-:host > article.expanded div.footer {
-  border-top: var(--border-size-small) solid var(--color-surface03);
-  margin-bottom: calc(var(--space-unit) * 1.5);
-}
-
-:host > article.expanded div.footer.open {
-  padding-top: calc(var(--space-unit) * 1.5);
-}
-
-:host > article.expanded div.footer.open div.resources {
-  display: initial;
-}
-
-:host > article.expanded div.footer.close div.resources {
-  display: none;
-}
-
-:host > article.expanded button.show-resources {
-  --z-icon-height: 16px;
-  --z-icon-width: 16px;
-
-  all: unset;
-  display: flex;
-  width: 100%;
-  flex-flow: row nowrap;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  padding: calc(var(--space-unit) * 1) 0;
-  color: var(--color-link-primary);
-  cursor: pointer;
-  fill: var(--color-link-primary);
-  font-size: var(--font-size-2);
-  font-weight: var(--font-sb);
-  gap: var(--space-unit);
-}
-
-:host > article.expanded button.show-resources:focus {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-/* SEARCH STYLES */
-
-:host > article.search {
-  width: 262px;
-  height: 536px;
-  padding: calc(var(--space-unit) * 2);
-  padding-bottom: 0;
-}
-
-:host > article.search .wrapper-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-:host > article.search .wrapper-container .wrapper {
-  height: 451px;
-}
-
-:host > article.search .wrapper-container .action-container {
-  padding-bottom: calc(var(--space-unit) * 2);
-  margin: auto;
-  margin-bottom: 0;
-}
-
-:host > article.search div.header {
-  display: flex;
-  height: 24px;
-  flex-flow: row nowrap;
-  align-content: stretch;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: calc(var(--space-unit) * 1.5);
-  white-space: nowrap;
-}
-
-:host > article.search div.cover div.img-wrapper {
-  height: 314px;
-  border-radius: var(--border-radius);
-}
-
-:host > article.search .title {
-  display: block;
-  height: initial;
-  align-self: unset;
-  font-size: var(--font-size-3);
-}
-
-:host > article.search .title,
-:host > article.search .subtitle,
-:host > article.search .authors {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* COMPACT STYLES */
-
-:host > article.compact {
-  width: var(--z-book-card-compact-width);
-  height: var(--z-book-card-compact-height);
-}
-
-:host > article.compact.borderless {
-  border: none;
-}
-
-:host > article.compact div.cover div.img-wrapper {
-  width: 100%;
-  height: calc(var(--z-book-card-compact-width) * 1.36);
-  box-sizing: border-box;
-  border: none;
-  background: var(--color-white);
-  border-radius: var(--border-radius) var(--border-radius) 0 0;
-  box-shadow: var(--shadow-2);
-}
-
-:host > article.compact div.wrapper {
-  display: flex;
-  height: 100%;
-  flex-flow: column nowrap;
-  align-content: stretch;
-  align-items: stretch;
-  justify-content: flex-start;
-}
-
-:host > article.compact div.content {
-  display: flex;
-  box-sizing: border-box;
-  flex-flow: column nowrap;
-  align-content: stretch;
-  align-items: stretch;
-  justify-content: space-between;
-  padding: calc(var(--space-unit) * 2);
-  padding-top: var(--space-unit);
-  margin: 0;
-}
-
-:host > article.compact div.action-container {
-  padding: calc(var(--space-unit) * 2);
-  padding-top: 0;
-  margin-top: auto;
-}
-
-:host > article.compact.borderless div.cover div.img-wrapper {
-  width: var(--z-book-card-compact-width);
-}
-
-:host > article.compact.borderless div.content {
-  padding: 0;
-  padding-top: var(--space-unit);
-}
-
-:host > article.compact.borderless div.action-container {
-  padding: 0;
-  padding-bottom: calc(var(--space-unit) * 2);
-}
-
-:host > article.compact .title {
-  display: block;
-  height: initial;
-  align-self: unset;
-}
-
-:host > article.compact .title,
-:host > article.compact .subtitle,
-:host > article.compact .authors {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  white-space: initial;
-}
-
-/* Tablet breakpoint */
-@media (min-width: 768px) {
-  :host > article {
-    width: 100%;
-    max-width: initial;
-  }
-
-  :host > article .title {
-    display: block;
-    height: initial;
-    align-self: unset;
-  }
-
-  /* EXPANDED STYLES */
-
-  :host > article.expanded {
-    width: 100%;
-    min-width: initial;
-    max-width: initial;
-    height: 360px;
-    padding: 0;
-    border: 0;
-  }
-
-  :host > article.expanded div.wrapper {
-    display: flex;
-    flex-flow: row nowrap;
-    align-content: stretch;
-    align-items: stretch;
-    justify-content: flex-start;
-  }
-
-  :host > article.expanded div.cover div.img-wrapper {
-    width: 262px;
-    height: 356px;
-    border: 0;
-    border: var(--border-size-medium) solid var(--color-surface03);
-    border-right: none;
-    background: var(--color-surface01);
-    border-radius: var(--border-radius) 0 0 var(--border-radius);
-  }
-
-  :host > article.expanded div.cover div.img-wrapper img {
-    width: auto;
-    border-radius: 0;
-  }
-
-  :host > article.expanded div.content {
-    display: flex;
-    overflow: hidden;
-    width: 100%;
-    height: 356px;
-    flex-flow: column nowrap;
-    align-content: stretch;
-    align-items: stretch;
-    justify-content: space-between;
-    border: var(--border-size-medium) solid var(--color-surface03);
-    border-left: none;
-    margin: 0;
-    background: var(--color-surface01);
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-  }
-
-  :host > article.expanded div.content div.top {
-    padding: calc(var(--space-unit) * 2);
-    padding-bottom: 0;
-  }
-
-  :host > article.expanded div.content div.top div.info {
-    display: flex;
-    flex-flow: row nowrap;
-    align-content: stretch;
-    align-items: stretch;
-    justify-content: space-between;
-    margin-bottom: calc(var(--space-unit) / 2);
-  }
-
-  :host > article.expanded div.content div.top div.info > div.left {
-    width: 100%;
-  }
-
-  :host > article.expanded div.content div.bottom {
-    padding: calc(var(--space-unit) * 2);
-    padding-bottom: 0;
-  }
-}
-
-/* Desktop breakpoint */
-
-@media (min-width: 1152px) {
-  :host > article {
-    width: fit-content;
-    max-width: initial;
-  }
-}
-
-/* Wide breakpoint */
-@media (min-width: 1366px) {
-  :host > article.expanded {
-    width: 635px;
-  }
-
-  :host > article.expanded div.content {
-    width: 369px;
-  }
-}
+/* COMMON STYLES */
+
+:host {
+  --z-book-card-ribbon-background-color: var(--avatar-C08);
+  --z-book-card-ribbon-shadow-color: var(--green950);
+  --z-book-card-compact-width: 262px;
+  --z-book-card-compact-height: 568px;
+}
+
+:host > article {
+  display: block;
+  width: 100%;
+  max-width: 360px;
+  box-sizing: border-box;
+  border: var(--border-size-medium) solid var(--color-surface03);
+  background-color: var(--color-surface01);
+  border-radius: var(--border-radius);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > article div.cover {
+  position: relative;
+}
+
+:host > article div.cover div.img-wrapper {
+  display: flex;
+  overflow: hidden;
+  border: var(--border-size-small) solid var(--color-surface03);
+  line-height: 0;
+}
+
+:host > article div.cover div.img-wrapper img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+  align-self: flex-end;
+}
+
+:host > article div.cover div.ribbon {
+  position: absolute;
+  z-index: 10;
+  top: calc(var(--space-unit) * 2);
+  left: calc(var(--space-unit) * -2);
+  display: flex;
+  max-width: 100%;
+  height: calc(var(--space-unit) * 4);
+  box-sizing: border-box;
+  align-items: center;
+  padding: 0 calc(var(--space-unit) * 2);
+  border: var(--border-size-medium) solid var(--color-surface01);
+  background: var(--z-book-card-ribbon-background-color);
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  box-shadow: var(--shadow-2);
+  color: var(--color-text04);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-sb);
+  line-height: initial;
+}
+
+:host > article div.cover div.ribbon span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: nowrap;
+}
+
+:host > article div.cover div.ribbon::before {
+  position: absolute;
+  bottom: -12px;
+  left: -2px;
+  width: 0;
+  height: 0;
+  border-top: 10px solid var(--z-book-card-ribbon-shadow-color);
+  border-left: 16px solid transparent;
+  content: "";
+}
+
+:host > article div.content {
+  margin: var(--space-unit) 0;
+  border-radius: var(--border-radius);
+}
+
+:host > article .title {
+  display: flex;
+  height: 100%;
+  align-self: center;
+  color: var(--color-text02);
+  font-size: var(--font-size-4);
+  font-weight: var(--font-sb);
+  line-height: 1.5;
+}
+
+:host > article .title * {
+  all: unset;
+}
+
+:host > article div.subtitle {
+  color: var(--color-text02);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-rg);
+  line-height: 1.4;
+}
+
+:host > article div.authors {
+  color: var(--color-text02);
+  font-size: var(--font-size-1);
+  font-weight: var(--font-rg);
+  line-height: 1.33;
+}
+
+:host > article div.isbn {
+  overflow: hidden;
+  color: var(--color-text02);
+  font-size: var(--font-size-2);
+  line-height: 1.33;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: nowrap;
+}
+
+:host > article div.isbn > .code {
+  font-weight: var(--font-sb);
+}
+
+:host > article div.tags {
+  display: flex;
+  overflow: hidden;
+  max-height: 32px;
+  flex-flow: row wrap;
+  align-content: stretch;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: calc(var(--space-unit) / 2);
+}
+
+:host > article ::slotted([slot="tags"]) {
+  margin-bottom: var(--space-unit);
+}
+
+:host > article ::slotted([slot="header-cta"]) {
+  --z-icon-width: 20px;
+  --z-icon-height: 20px;
+
+  padding: var(--space-unit);
+  cursor: pointer;
+  fill: var(--color-icon01);
+}
+
+/* EXPANDED STYLES */
+
+:host > article.expanded {
+  width: 100%;
+  min-width: 328px;
+  padding: calc(var(--space-unit) * 2);
+  padding-bottom: 0;
+}
+
+:host > article.expanded div.header {
+  display: flex;
+  flex-flow: row nowrap;
+  align-content: stretch;
+  align-items: top;
+  justify-content: space-between;
+  margin-bottom: var(--space-unit);
+  white-space: nowrap;
+}
+
+:host > article.expanded div.cover div.img-wrapper {
+  border-radius: var(--border-radius);
+}
+
+:host > article.expanded div.cover div.img-wrapper img {
+  width: 100%;
+}
+
+:host > article.expanded .title,
+:host > article.expanded .subtitle,
+:host > article.expanded .authors {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  white-space: initial;
+}
+
+:host > article.expanded div.footer {
+  border-top: var(--border-size-small) solid var(--color-surface03);
+  margin-bottom: calc(var(--space-unit) * 1.5);
+}
+
+:host > article.expanded div.footer.open {
+  padding-top: calc(var(--space-unit) * 1.5);
+}
+
+:host > article.expanded div.footer.open div.resources {
+  display: initial;
+}
+
+:host > article.expanded div.footer.close div.resources {
+  display: none;
+}
+
+:host > article.expanded button.show-resources {
+  --z-icon-height: 16px;
+  --z-icon-width: 16px;
+
+  all: unset;
+  display: flex;
+  width: 100%;
+  flex-flow: row nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--space-unit) * 1) 0;
+  color: var(--color-link-primary);
+  cursor: pointer;
+  fill: var(--color-link-primary);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-sb);
+  gap: var(--space-unit);
+}
+
+:host > article.expanded button.show-resources:focus {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+/* SEARCH STYLES */
+
+:host > article.search {
+  width: 262px;
+  height: 536px;
+  padding: calc(var(--space-unit) * 2);
+  padding-bottom: 0;
+}
+
+:host > article.search .wrapper-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+:host > article.search .wrapper-container .wrapper {
+  height: 451px;
+}
+
+:host > article.search .wrapper-container .action-container {
+  padding-bottom: calc(var(--space-unit) * 2);
+  margin: auto;
+  margin-bottom: 0;
+}
+
+:host > article.search div.header {
+  display: flex;
+  height: 24px;
+  flex-flow: row nowrap;
+  align-content: stretch;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: calc(var(--space-unit) * 1.5);
+  white-space: nowrap;
+}
+
+:host > article.search div.cover div.img-wrapper {
+  height: 314px;
+  border-radius: var(--border-radius);
+}
+
+:host > article.search .title {
+  display: block;
+  height: initial;
+  align-self: unset;
+  font-size: var(--font-size-3);
+}
+
+:host > article.search .title,
+:host > article.search .subtitle,
+:host > article.search .authors {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* COMPACT STYLES */
+
+:host > article.compact {
+  width: var(--z-book-card-compact-width);
+  height: var(--z-book-card-compact-height);
+}
+
+:host > article.compact.borderless {
+  border: none;
+}
+
+:host > article.compact div.cover div.img-wrapper {
+  width: 100%;
+  height: calc(var(--z-book-card-compact-width) * 1.36);
+  box-sizing: border-box;
+  border: none;
+  background: var(--color-white);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  box-shadow: var(--shadow-2);
+}
+
+:host > article.compact div.wrapper {
+  display: flex;
+  height: 100%;
+  flex-flow: column nowrap;
+  align-content: stretch;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+:host > article.compact div.content {
+  display: flex;
+  box-sizing: border-box;
+  flex-flow: column nowrap;
+  align-content: stretch;
+  align-items: stretch;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 2);
+  padding-top: var(--space-unit);
+  margin: 0;
+}
+
+:host > article.compact div.action-container {
+  padding: calc(var(--space-unit) * 2);
+  padding-top: 0;
+  margin-top: auto;
+}
+
+:host > article.compact.borderless div.cover div.img-wrapper {
+  width: var(--z-book-card-compact-width);
+}
+
+:host > article.compact.borderless div.content {
+  padding: 0;
+  padding-top: var(--space-unit);
+}
+
+:host > article.compact.borderless div.action-container {
+  padding: 0;
+  padding-bottom: calc(var(--space-unit) * 2);
+}
+
+:host > article.compact .title {
+  display: block;
+  height: initial;
+  align-self: unset;
+}
+
+:host > article.compact .title,
+:host > article.compact .subtitle,
+:host > article.compact .authors {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  white-space: initial;
+}
+
+/* Tablet breakpoint */
+@media (min-width: 768px) {
+  :host > article {
+    width: 100%;
+    max-width: initial;
+  }
+
+  :host > article .title {
+    display: block;
+    height: initial;
+    align-self: unset;
+  }
+
+  /* EXPANDED STYLES */
+
+  :host > article.expanded {
+    width: 100%;
+    min-width: initial;
+    max-width: initial;
+    height: 360px;
+    padding: 0;
+    border: 0;
+  }
+
+  :host > article.expanded div.wrapper {
+    display: flex;
+    flex-flow: row nowrap;
+    align-content: stretch;
+    align-items: stretch;
+    justify-content: flex-start;
+  }
+
+  :host > article.expanded div.cover div.img-wrapper {
+    width: 262px;
+    height: 356px;
+    border: 0;
+    border: var(--border-size-medium) solid var(--color-surface03);
+    border-right: none;
+    background: var(--color-surface01);
+    border-radius: var(--border-radius) 0 0 var(--border-radius);
+  }
+
+  :host > article.expanded div.cover div.img-wrapper img {
+    width: auto;
+    border-radius: 0;
+  }
+
+  :host > article.expanded div.content {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 356px;
+    flex-flow: column nowrap;
+    align-content: stretch;
+    align-items: stretch;
+    justify-content: space-between;
+    border: var(--border-size-medium) solid var(--color-surface03);
+    border-left: none;
+    margin: 0;
+    background: var(--color-surface01);
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  }
+
+  :host > article.expanded div.content div.top {
+    padding: calc(var(--space-unit) * 2);
+    padding-bottom: 0;
+  }
+
+  :host > article.expanded div.content div.top div.info {
+    display: flex;
+    flex-flow: row nowrap;
+    align-content: stretch;
+    align-items: stretch;
+    justify-content: space-between;
+    margin-bottom: calc(var(--space-unit) / 2);
+  }
+
+  :host > article.expanded div.content div.top div.info > div.left {
+    width: 100%;
+  }
+
+  :host > article.expanded div.content div.bottom {
+    padding: calc(var(--space-unit) * 2);
+    padding-bottom: 0;
+  }
+}
+
+/* Desktop breakpoint */
+
+@media (min-width: 1152px) {
+  :host > article {
+    width: fit-content;
+    max-width: initial;
+  }
+}
+
+/* Wide breakpoint */
+@media (min-width: 1366px) {
+  :host > article.expanded {
+    width: 635px;
+  }
+
+  :host > article.expanded div.content {
+    width: 369px;
+  }
+}