@oiz/stzh-components 2.2.0 → 2.3.0-alpha

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

@@ -0,0 +1,842 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * 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 {
+  --space: var(--stzh-space-default);
+  --around: 0;
+}
+:host ::slotted(*) {
+  max-width: 100%;
+  padding: calc((var(--space) / 2) * var(--around));
+  margin: calc((var(--space) / 2) * (1 - var(--around)));
+}
+:host ::slotted(stzh-vspace),
+:host ::slotted(stzh-hspace),
+:host ::slotted(stzh-row),
+:host ::slotted(stzh-container),
+:host ::slotted(stzh-section) {
+  align-self: stretch;
+  flex-grow: 1;
+}
+
+:host(:empty) {
+  --around: 1;
+  width: var(--space);
+  height: var(--space);
+}
+
+:host([around]:not([around=false])) {
+  --around: 1;
+}
+
+/* Border variants */
+:host([border=top]),
+:host([border=top-bottom]) {
+  border-top: 0.0625rem solid var(--stzh-base-border-color);
+}
+
+:host([border=bottom]),
+:host([border=top-bottom]) {
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+}
+
+:host([border=left]),
+:host([border=left-right]) {
+  border-left: 0.0625rem solid var(--stzh-base-border-color);
+}
+
+:host([border=right]),
+:host([border=left-right]) {
+  border-right: 0.0625rem solid var(--stzh-base-border-color);
+}
+
+/* Space curve variant */
+:host([curve=tiny]) {
+  --space: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 1024px) {
+  :host([curve=tiny]) {
+    --space: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host([curve=tiny]) {
+    --space: var(--stzh-space-medium);
+  }
+}
+
+:host([curve=small]) {
+  --space: var(--stzh-space-small);
+}
+@media screen and (min-width: 1024px) {
+  :host([curve=small]) {
+    --space: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host([curve=small]) {
+    --space: var(--stzh-space-large);
+  }
+}
+
+:host([curve=regular]) {
+  --space: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1024px) {
+  :host([curve=regular]) {
+    --space: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host([curve=regular]) {
+    --space: var(--stzh-space-xlarge);
+  }
+}
+
+:host([curve=medium]) {
+  --space: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  :host([curve=medium]) {
+    --space: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host([curve=medium]) {
+    --space: var(--stzh-space-xxxlarge);
+  }
+}
+
+:host([curve=large]) {
+  --space: var(--stzh-space-xxlarge);
+}
+@media screen and (min-width: 1024px) {
+  :host([curve=large]) {
+    --space: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host([curve=large]) {
+    --space: var(--stzh-space-xxxxlarge);
+  }
+}
+
+:host([curve=big]) {
+  --space: var(--stzh-space-xxxlarge);
+}
+@media screen and (min-width: 600px) {
+  :host([curve=big]) {
+    --space: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host([curve=big]) {
+    --space: var(--stzh-space-big);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host([curve=big]) {
+    --space: var(--stzh-space-xbig);
+  }
+}
+
+:host([curve=huge]) {
+  --space: var(--stzh-space-xxxxlarge);
+}
+@media screen and (min-width: 600px) {
+  :host([curve=huge]) {
+    --space: var(--stzh-space-big);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host([curve=huge]) {
+    --space: var(--stzh-space-xbig);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host([curve=huge]) {
+    --space: var(--stzh-space-huge);
+  }
+}
+
+:host([size=xxxsmall]) {
+  --space: var(--stzh-space-xxxsmall);
+}
+
+:host([size=xxsmall]) {
+  --space: var(--stzh-space-xxsmall);
+}
+
+:host([size=xsmall]) {
+  --space: var(--stzh-space-xsmall);
+}
+
+:host([size=small]) {
+  --space: var(--stzh-space-small);
+}
+
+:host([size=medium]) {
+  --space: var(--stzh-space-medium);
+}
+
+:host([size=large]) {
+  --space: var(--stzh-space-large);
+}
+
+:host([size=xlarge]) {
+  --space: var(--stzh-space-xlarge);
+}
+
+:host([size=xxlarge]) {
+  --space: var(--stzh-space-xxlarge);
+}
+
+:host([size=xxxlarge]) {
+  --space: var(--stzh-space-xxxlarge);
+}
+
+:host([size=xxxxlarge]) {
+  --space: var(--stzh-space-xxxxlarge);
+}
+
+:host([size=big]) {
+  --space: var(--stzh-space-big);
+}
+
+:host([size=xbig]) {
+  --space: var(--stzh-space-xbig);
+}
+
+:host([size=huge]) {
+  --space: var(--stzh-space-huge);
+}
+
+:host([size=xhuge]) {
+  --space: var(--stzh-space-xhuge);
+}
+
+:host([size=none]) {
+  --space: var(--stzh-space-none);
+}
+
+:host([size=default]) {
+  --space: var(--stzh-space-default);
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=xxxsmall]) {
+    --space: var(--stzh-space-xxxsmall);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=xxsmall]) {
+    --space: var(--stzh-space-xxsmall);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=xsmall]) {
+    --space: var(--stzh-space-xsmall);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=small]) {
+    --space: var(--stzh-space-small);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=medium]) {
+    --space: var(--stzh-space-medium);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=large]) {
+    --space: var(--stzh-space-large);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=xlarge]) {
+    --space: var(--stzh-space-xlarge);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=xxlarge]) {
+    --space: var(--stzh-space-xxlarge);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=xxxlarge]) {
+    --space: var(--stzh-space-xxxlarge);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=xxxxlarge]) {
+    --space: var(--stzh-space-xxxxlarge);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=big]) {
+    --space: var(--stzh-space-big);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=xbig]) {
+    --space: var(--stzh-space-xbig);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=huge]) {
+    --space: var(--stzh-space-huge);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=xhuge]) {
+    --space: var(--stzh-space-xhuge);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=none]) {
+    --space: var(--stzh-space-none);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size-small=default]) {
+    --space: var(--stzh-space-default);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=xxxsmall]) {
+    --space: var(--stzh-space-xxxsmall);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=xxsmall]) {
+    --space: var(--stzh-space-xxsmall);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=xsmall]) {
+    --space: var(--stzh-space-xsmall);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=small]) {
+    --space: var(--stzh-space-small);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=medium]) {
+    --space: var(--stzh-space-medium);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=large]) {
+    --space: var(--stzh-space-large);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=xlarge]) {
+    --space: var(--stzh-space-xlarge);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=xxlarge]) {
+    --space: var(--stzh-space-xxlarge);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=xxxlarge]) {
+    --space: var(--stzh-space-xxxlarge);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=xxxxlarge]) {
+    --space: var(--stzh-space-xxxxlarge);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=big]) {
+    --space: var(--stzh-space-big);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=xbig]) {
+    --space: var(--stzh-space-xbig);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=huge]) {
+    --space: var(--stzh-space-huge);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=xhuge]) {
+    --space: var(--stzh-space-xhuge);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=none]) {
+    --space: var(--stzh-space-none);
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([size-smallheader=default]) {
+    --space: var(--stzh-space-default);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=xxxsmall]) {
+    --space: var(--stzh-space-xxxsmall);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=xxsmall]) {
+    --space: var(--stzh-space-xxsmall);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=xsmall]) {
+    --space: var(--stzh-space-xsmall);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=small]) {
+    --space: var(--stzh-space-small);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=medium]) {
+    --space: var(--stzh-space-medium);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=large]) {
+    --space: var(--stzh-space-large);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=xlarge]) {
+    --space: var(--stzh-space-xlarge);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=xxlarge]) {
+    --space: var(--stzh-space-xxlarge);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=xxxlarge]) {
+    --space: var(--stzh-space-xxxlarge);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=xxxxlarge]) {
+    --space: var(--stzh-space-xxxxlarge);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=big]) {
+    --space: var(--stzh-space-big);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=xbig]) {
+    --space: var(--stzh-space-xbig);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=huge]) {
+    --space: var(--stzh-space-huge);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=xhuge]) {
+    --space: var(--stzh-space-xhuge);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=none]) {
+    --space: var(--stzh-space-none);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([size-medium=default]) {
+    --space: var(--stzh-space-default);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=xxxsmall]) {
+    --space: var(--stzh-space-xxxsmall);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=xxsmall]) {
+    --space: var(--stzh-space-xxsmall);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=xsmall]) {
+    --space: var(--stzh-space-xsmall);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=small]) {
+    --space: var(--stzh-space-small);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=medium]) {
+    --space: var(--stzh-space-medium);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=large]) {
+    --space: var(--stzh-space-large);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=xlarge]) {
+    --space: var(--stzh-space-xlarge);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=xxlarge]) {
+    --space: var(--stzh-space-xxlarge);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=xxxlarge]) {
+    --space: var(--stzh-space-xxxlarge);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=xxxxlarge]) {
+    --space: var(--stzh-space-xxxxlarge);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=big]) {
+    --space: var(--stzh-space-big);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=xbig]) {
+    --space: var(--stzh-space-xbig);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=huge]) {
+    --space: var(--stzh-space-huge);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=xhuge]) {
+    --space: var(--stzh-space-xhuge);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=none]) {
+    --space: var(--stzh-space-none);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size-large=default]) {
+    --space: var(--stzh-space-default);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=xxxsmall]) {
+    --space: var(--stzh-space-xxxsmall);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=xxsmall]) {
+    --space: var(--stzh-space-xxsmall);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=xsmall]) {
+    --space: var(--stzh-space-xsmall);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=small]) {
+    --space: var(--stzh-space-small);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=medium]) {
+    --space: var(--stzh-space-medium);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=large]) {
+    --space: var(--stzh-space-large);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=xlarge]) {
+    --space: var(--stzh-space-xlarge);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=xxlarge]) {
+    --space: var(--stzh-space-xxlarge);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=xxxlarge]) {
+    --space: var(--stzh-space-xxxlarge);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=xxxxlarge]) {
+    --space: var(--stzh-space-xxxxlarge);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=big]) {
+    --space: var(--stzh-space-big);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=xbig]) {
+    --space: var(--stzh-space-xbig);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=huge]) {
+    --space: var(--stzh-space-huge);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=xhuge]) {
+    --space: var(--stzh-space-xhuge);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=none]) {
+    --space: var(--stzh-space-none);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([size-ultra=default]) {
+    --space: var(--stzh-space-default);
+  }
+}
+
+.stzh-space {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  padding: calc((var(--space) / -2) * var(--around));
+  margin: calc((var(--space) / -2) * (1 - var(--around)));
+  /* Justify content variants */
+  /* Align items variants */
+}
+.stzh-space--is-around {
+  padding: calc((var(--space) / 2) * var(--around));
+  margin: calc((var(--space) / 2) * (1 - var(--around)));
+}
+.stzh-space--justify-center {
+  justify-content: center;
+}
+.stzh-space--justify-end {
+  justify-content: flex-end;
+}
+.stzh-space--justify-between {
+  justify-content: space-between;
+}
+.stzh-space--justify-around {
+  justify-content: space-around;
+}
+.stzh-space--justify-evenly {
+  justify-content: space-evenly;
+}
+.stzh-space--items-end {
+  align-items: flex-end;
+}
+.stzh-space--items-center {
+  align-items: center;
+}
+.stzh-space--items-baseline {
+  align-items: baseline;
+}
+.stzh-space--items-stretch {
+  align-items: stretch;
+}