@oiz/stzh-components 1.5.0-alpha → 2.0.0-beta

package/dist/collection/components/stzh-card/stzh-card.css

@@ -0,0 +1,408 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --box-shadow: var(--stzh-box-shadow-popover);
+  --border: 0.0625rem solid var(--stzh-base-border-color);
+  --border-radius: 0.1875rem;
+  --dnd-visibility: hidden;
+  --dnd-opacity: 0;
+  position: relative;
+  border-radius: var(--border-radius);
+}
+:host[checked]:not([checked=false]) {
+  outline: 0.1875rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+:host.is-ghost::after, .is-ghost :host::after {
+  border-radius: var(--border-radius);
+}
+:host.is-selected, :host.is-chosen, .is-selected :host, .is-chosen :host {
+  --box-shadow: var(--stzh-box-shadow-overlay);
+}
+:host.is-ghost, .is-ghost :host {
+  --box-shadow: none;
+  --border: 0.0625rem solid transparent;
+  overflow: hidden;
+}
+:host.is-drag, :host.is-chosen, :host.is-ghost, :host.is-selected, .is-drag :host, .is-chosen :host, .is-ghost :host, .is-selected :host {
+  --dnd-visibility: visible;
+  --dnd-opacity: 1;
+}
+:host ::slotted(*) {
+  font-size: var(--stzh-font-milli-font-size);
+  line-height: var(--stzh-font-milli-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+}
+:host ::slotted([slot=image]) {
+  max-width: 100%;
+}
+:host ::slotted(img[slot=image]) {
+  display: block;
+}
+:host ::slotted([slot=meta]:not(:last-child)) {
+  margin-right: var(--stzh-space-xsmall);
+}
+:host ::slotted(table) {
+  border: 0;
+  border-spacing: 0;
+}
+:host ::slotted(table) th {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+}
+:host ::slotted(table) td, :host ::slotted(table) th {
+  padding: 0;
+}
+:host ::slotted(table) td {
+  color: var(--stzh-color-black);
+  padding-left: var(--stzh-space-xsmall);
+}
+
+.stzh-card {
+  background-color: var(--stzh-color-white);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  border: var(--border);
+  transition: box-shadow var(--stzh-base-transition-animation-speed);
+  /* Interactive Subtitle */
+  /* Type Alert */
+  /* Collapsed (Header) */
+  /* Starred */
+  /** Hidden header / footer border */
+}
+@media screen and (max-width: 1023px) {
+  .stzh-card .show-medium {
+    display: none;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card .hide-medium {
+    display: none;
+  }
+}
+.stzh-card__content-wrapper {
+  position: relative;
+}
+.stzh-card__dnd {
+  --size: var(--stzh-icon-size-xsmall);
+  position: absolute;
+  left: 0.1875rem;
+  top: 1.4375rem;
+  display: flex;
+  visibility: var(--dnd-visibility);
+  opacity: var(--dnd-opacity);
+  transition: all var(--stzh-base-transition-animation-speed);
+  display: none;
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__dnd {
+    display: block;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card__dnd {
+    left: 0.25rem;
+    top: 1.6875rem;
+  }
+}
+.stzh-card__header {
+  padding: var(--stzh-space-medium);
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__header {
+    padding: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card__header {
+    padding: var(--stzh-space-xlarge);
+  }
+}
+.stzh-card__header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.stzh-card__header-meta {
+  display: flex;
+}
+.stzh-card__header-meta:not(:empty) {
+  margin-top: var(--stzh-space-xsmall);
+}
+.stzh-card__header-left, .stzh-card__header-right {
+  display: flex;
+}
+.stzh-card__header-right {
+  padding-left: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 600px) {
+  .stzh-card__header-right {
+    padding-left: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__header-right {
+    padding-left: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card__header-right {
+    padding-left: var(--stzh-space-large);
+  }
+}
+.stzh-card__left {
+  align-self: center;
+}
+.stzh-card__title-area {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  -webkit-hyphens: auto;
+          hyphens: auto;
+  overflow: hidden;
+}
+.stzh-card__title, .stzh-card__subtitle {
+  margin: 0;
+}
+.stzh-card__title {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  font-size: var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));
+  line-height: var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));
+  letter-spacing: var(--stzh-font-curve-h3-default-heading-letter-spacing);
+  color: var(--stzh-base-lead-color);
+}
+@media screen and (min-width: 600px) {
+  .stzh-card__title {
+    font-size: var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));
+    line-height: var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-small-heading-letter-spacing);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__title {
+    font-size: var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));
+    line-height: var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-medium-heading-letter-spacing);
+  }
+}
+.stzh-card__subtitle {
+  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
+  letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  text-decoration: none;
+  margin-left: -0.5625em;
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__subtitle {
+    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
+  }
+}
+.stzh-card__subtitle-text {
+  position: relative;
+  display: inline-flex;
+  padding-left: 0.5625em;
+}
+.stzh-card__subtitle-text::after {
+  content: ",";
+  position: absolute;
+  left: 0;
+}
+.stzh-card__content:not(:empty) {
+  padding: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__content:not(:empty) {
+    padding: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card__content:not(:empty) {
+    padding: var(--stzh-space-xlarge);
+  }
+}
+.stzh-card__footer:not(:empty) {
+  padding: var(--stzh-space-medium);
+  border-top: 0.0625rem solid var(--stzh-base-border-color);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__footer:not(:empty) {
+    padding: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card__footer:not(:empty) {
+    padding: var(--stzh-space-xlarge);
+  }
+}
+.stzh-card__card-actions {
+  display: inline-flex;
+  white-space: nowrap;
+}
+@media screen and (max-width: 1023px) {
+  .stzh-card__card-action {
+    --icon-text-margin: 0;
+    --badge-icon-text-margin: 0;
+  }
+}
+.stzh-card__card-action[variant=tertiary] {
+  --color: var(--stzh-color-grey70);
+}
+.stzh-card__card-action.is-button {
+  --icon-size: var(--stzh-icon-size-small);
+}
+.stzh-card__card-action.is-placeholder {
+  width: var(--stzh-space-xxlarge);
+  height: var(--stzh-space-xxlarge);
+}
+.stzh-card__card-action-popover {
+  --width: auto;
+}
+.stzh-card--has-subtitle-interactive .stzh-card__subtitle {
+  cursor: pointer;
+  padding: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  transition: color var(--stzh-base-transition-animation-speed);
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-card--has-subtitle-interactive .stzh-card__subtitle:hover, .stzh-card--has-subtitle-interactive .stzh-card__subtitle:focus {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-card--type-alert .stzh-card__subtitle {
+  color: var(--stzh-color-error);
+}
+.stzh-card--type-alert .stzh-card__subtitle:hover, .stzh-card--type-alert .stzh-card__subtitle:focus {
+  color: var(--stzh-color-error);
+}
+.stzh-card--is-collapsed .hide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .hide-when-collapsed {
+  display: none;
+}
+.stzh-card--is-collapsed .show-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .show-when-collapsed {
+  display: block;
+}
+.stzh-card--is-collapsed .stzh-card__header {
+  border-bottom: none;
+}
+.stzh-card--is-collapsed .stzh-card__card-action, .stzh-card--has-collapsed-header .stzh-card__card-action {
+  --icon-text-margin: 0;
+  --badge-icon-text-margin: 0;
+}
+.stzh-card--is-starred .stzh-card__card-action.is-star {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-card--is-starred .stzh-card__card-action.is-star:hover, .stzh-card--is-starred .stzh-card__card-action.is-star:focus {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-card--has-hidden-header-border .stzh-card__header {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+.stzh-card--has-hidden-footer-border .stzh-card__footer:not(:empty) {
+  padding-top: 0;
+  border-top: none;
+}