@oiz/stzh-components 1.5.0-alpha → 2.0.0

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

@@ -111,25 +111,26 @@
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-  margin-bottom: var(--stzh-space-medium);
+  margin-top: var(--stzh-space-xxlarge);
+  margin-bottom: var(--stzh-space-xlarge);
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 1024px) {
   :host ::slotted(h1),
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-    margin-bottom: var(--stzh-space-large);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1260px) {
   :host ::slotted(h1),
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 1260px) {
+@media screen and (min-width: 1024px) {
   :host ::slotted(h1),
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
@@ -137,86 +138,34 @@
     margin-bottom: var(--stzh-space-xxlarge);
   }
 }
-:host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-  margin-top: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-    margin-top: var(--stzh-space-xxlarge);
-  }
-}
 @media screen and (min-width: 1260px) {
   :host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
-}
+:host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-  margin-top: var(--stzh-space-xxlarge);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h2),
-:host ::slotted(stzh-heading[level="2"]) {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(h2),
-:host ::slotted(stzh-heading[level="2"]) {
-    margin-top: var(--stzh-space-xbig);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-    margin-top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-    margin-top: var(--stzh-space-xxlarge);
-  }
-}
+:host ::slotted(stzh-heading[level="3"]),
 :host ::slotted(h4),
 :host ::slotted(stzh-heading[level="4"]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h4),
-:host ::slotted(stzh-heading[level="4"]) {
-    margin-top: var(--stzh-space-large);
-  }
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(h4),
+  :host ::slotted(h3),
+:host ::slotted(stzh-heading[level="3"]),
+:host ::slotted(h4),
 :host ::slotted(stzh-heading[level="4"]) {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(h4),
+  :host ::slotted(h3),
+:host ::slotted(stzh-heading[level="3"]),
+:host ::slotted(h4),
 :host ::slotted(stzh-heading[level="4"]) {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(p),
@@ -238,6 +187,16 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(p),
+:host ::slotted(stzh-text),
+:host ::slotted(ul),
+:host ::slotted(ol),
+:host ::slotted(dl),
+:host ::slotted(stzh-list) {
+    margin-top: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   :host ::slotted(p),
 :host ::slotted(stzh-text),
@@ -248,48 +207,44 @@
     margin-bottom: var(--stzh-space-medium);
   }
 }
-:host ::slotted(stzh-text[curve=hero]),
-:host ::slotted(stzh-heading[curve=hero]) {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=hero]),
-:host ::slotted(stzh-heading[curve=hero]) {
+@media screen and (min-width: 1260px) {
+  :host ::slotted(p),
+:host ::slotted(stzh-text),
+:host ::slotted(ul),
+:host ::slotted(ol),
+:host ::slotted(dl),
+:host ::slotted(stzh-list) {
     margin-bottom: var(--stzh-space-large);
   }
 }
+:host ::slotted(stzh-text[curve=hero]),
+:host ::slotted(stzh-heading[curve=hero]) {
+  margin-bottom: var(--stzh-space-xlarge);
+}
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=hero]),
 :host ::slotted(stzh-heading[curve=hero]) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-text[curve=hero]),
 :host ::slotted(stzh-heading[curve=hero]) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-text[curve=h1]),
 :host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]),
-:host ::slotted(stzh-text[curve=h2]),
-:host ::slotted(stzh-heading[curve=h2]) {
-    margin-bottom: var(--stzh-space-large);
-  }
+  margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=h1]),
 :host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -297,89 +252,51 @@
 :host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-  margin-top: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
+:host ::slotted(stzh-heading[curve=h1]),
+:host ::slotted(stzh-text[curve=h2]),
+:host ::slotted(stzh-heading[curve=h2]) {
+  margin-top: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-    margin-top: var(--stzh-space-xxlarge);
+:host ::slotted(stzh-heading[curve=h1]),
+:host ::slotted(stzh-text[curve=h2]),
+:host ::slotted(stzh-heading[curve=h2]) {
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
-}
+:host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
-:host ::slotted(stzh-heading[curve=h2]) {
-  margin-top: var(--stzh-space-xxlarge);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
     margin-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-text[curve=h2]),
-:host ::slotted(stzh-heading[curve=h2]) {
-    margin-top: var(--stzh-space-xbig);
-  }
-}
 :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-    margin-top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-    margin-top: var(--stzh-space-xxlarge);
-  }
-}
+:host ::slotted(stzh-heading[curve=h3]),
 :host ::slotted(stzh-text[curve=h4]),
 :host ::slotted(stzh-heading[curve=h4]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h4]),
-:host ::slotted(stzh-heading[curve=h4]) {
-    margin-top: var(--stzh-space-large);
-  }
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-text[curve=h4]),
+  :host ::slotted(stzh-text[curve=h3]),
+:host ::slotted(stzh-heading[curve=h3]),
+:host ::slotted(stzh-text[curve=h4]),
 :host ::slotted(stzh-heading[curve=h4]) {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-text[curve=h4]),
+  :host ::slotted(stzh-text[curve=h3]),
+:host ::slotted(stzh-heading[curve=h3]),
+:host ::slotted(stzh-text[curve=h4]),
 :host ::slotted(stzh-heading[curve=h4]) {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-text[curve=p1]),
@@ -397,6 +314,14 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-text[curve=p1]),
+:host ::slotted(stzh-text[curve=p2]),
+:host ::slotted(stzh-heading[curve=p1]),
+:host ::slotted(stzh-heading[curve=p2]) {
+    margin-top: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=p1]),
 :host ::slotted(stzh-text[curve=p2]),
@@ -405,53 +330,52 @@
     margin-bottom: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-text[curve=p1]),
+:host ::slotted(stzh-text[curve=p2]),
+:host ::slotted(stzh-heading[curve=p1]),
+:host ::slotted(stzh-heading[curve=p2]) {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
 :host ::slotted(stzh-figure) {
   margin-top: var(--stzh-space-xxlarge);
   margin-bottom: var(--stzh-space-xxlarge);
 }
+:host ::slotted(stzh-datalist),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
-  margin-top: var(--stzh-space-large);
-  margin-bottom: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-progressbar),
-:host ::slotted(stzh-section),
-:host ::slotted(stzh-hr) {
-    margin-top: var(--stzh-space-xlarge);
-  }
+  margin-top: var(--stzh-space-xxlarge);
+  margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-progressbar),
+  :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-progressbar),
+  :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-progressbar),
-:host ::slotted(stzh-section),
-:host ::slotted(stzh-hr) {
-    margin-bottom: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-progressbar),
+  :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-progressbar),
+  :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-bottom: var(--stzh-space-xxxxlarge);
@@ -460,7 +384,7 @@
 :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
   margin-top: var(--stzh-space-medium);
-  margin-bottom: var(--stzh-space-medium);
+  margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-table),
@@ -474,22 +398,16 @@
     margin-top: var(--stzh-space-xlarge);
   }
 }
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-table),
-:host ::slotted(stzh-datatable) {
-    margin-bottom: var(--stzh-space-large);
-  }
-}
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-actions) {