@oiz/stzh-components 3.3.0-beta1 → 3.3.0-beta4

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

@@ -167,342 +167,310 @@
   --row-gap: var(--stzh-row-row-gap, 0px);
 }
 
-:host([span="1"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 8.3333333333%;
+:host([span="1"]) ::slotted(stzh-cell) {
+  flex: 0 0 8.3333333333%;
+  max-width: 8.3333333333%;
 }
 
-:host([span="2"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 16.6666666667%;
+:host([span="2"]) ::slotted(stzh-cell) {
+  flex: 0 0 16.6666666667%;
+  max-width: 16.6666666667%;
 }
 
-:host([span="3"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 25%;
+:host([span="3"]) ::slotted(stzh-cell) {
+  flex: 0 0 25%;
+  max-width: 25%;
 }
 
-:host([span="4"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 33.3333333333%;
+:host([span="4"]) ::slotted(stzh-cell) {
+  flex: 0 0 33.3333333333%;
+  max-width: 33.3333333333%;
 }
 
-:host([span="5"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 41.6666666667%;
+:host([span="5"]) ::slotted(stzh-cell) {
+  flex: 0 0 41.6666666667%;
+  max-width: 41.6666666667%;
 }
 
-:host([span="6"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 50%;
+:host([span="6"]) ::slotted(stzh-cell) {
+  flex: 0 0 50%;
+  max-width: 50%;
 }
 
-:host([span="7"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 58.3333333333%;
+:host([span="7"]) ::slotted(stzh-cell) {
+  flex: 0 0 58.3333333333%;
+  max-width: 58.3333333333%;
 }
 
-:host([span="8"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 66.6666666667%;
+:host([span="8"]) ::slotted(stzh-cell) {
+  flex: 0 0 66.6666666667%;
+  max-width: 66.6666666667%;
 }
 
-:host([span="9"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 75%;
+:host([span="9"]) ::slotted(stzh-cell) {
+  flex: 0 0 75%;
+  max-width: 75%;
 }
 
-:host([span="10"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 83.3333333333%;
+:host([span="10"]) ::slotted(stzh-cell) {
+  flex: 0 0 83.3333333333%;
+  max-width: 83.3333333333%;
 }
 
-:host([span="11"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 91.6666666667%;
+:host([span="11"]) ::slotted(stzh-cell) {
+  flex: 0 0 91.6666666667%;
+  max-width: 91.6666666667%;
 }
 
-:host([span="12"]) ::slotted(stzh-cell:not([span])) {
-  --cell-width: 100%;
+:host([span="12"]) ::slotted(stzh-cell) {
+  flex: 0 0 100%;
+  max-width: 100%;
 }
 
-@media screen and (min-width: 600px) {
-  :host([span-small="1"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 8.3333333333%;
+@media (min-width: 600px) {
+  :host([span-small="1"]) ::slotted(stzh-cell) {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
   }
-}
 
-@media screen and (min-width: 600px) {
-  :host([span-small="2"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 16.6666666667%;
+  :host([span-small="2"]) ::slotted(stzh-cell) {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
   }
-}
 
-@media screen and (min-width: 600px) {
-  :host([span-small="3"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 25%;
+  :host([span-small="3"]) ::slotted(stzh-cell) {
+    flex: 0 0 25%;
+    max-width: 25%;
   }
-}
 
-@media screen and (min-width: 600px) {
-  :host([span-small="4"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 33.3333333333%;
+  :host([span-small="4"]) ::slotted(stzh-cell) {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
   }
-}
 
-@media screen and (min-width: 600px) {
-  :host([span-small="5"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 41.6666666667%;
+  :host([span-small="5"]) ::slotted(stzh-cell) {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
   }
-}
 
-@media screen and (min-width: 600px) {
-  :host([span-small="6"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 50%;
+  :host([span-small="6"]) ::slotted(stzh-cell) {
+    flex: 0 0 50%;
+    max-width: 50%;
   }
-}
 
-@media screen and (min-width: 600px) {
-  :host([span-small="7"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 58.3333333333%;
+  :host([span-small="7"]) ::slotted(stzh-cell) {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
   }
-}
 
-@media screen and (min-width: 600px) {
-  :host([span-small="8"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 66.6666666667%;
+  :host([span-small="8"]) ::slotted(stzh-cell) {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
   }
-}
 
-@media screen and (min-width: 600px) {
-  :host([span-small="9"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 75%;
+  :host([span-small="9"]) ::slotted(stzh-cell) {
+    flex: 0 0 75%;
+    max-width: 75%;
   }
-}
 
-@media screen and (min-width: 600px) {
-  :host([span-small="10"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 83.3333333333%;
+  :host([span-small="10"]) ::slotted(stzh-cell) {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
   }
-}
 
-@media screen and (min-width: 600px) {
-  :host([span-small="11"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 91.6666666667%;
+  :host([span-small="11"]) ::slotted(stzh-cell) {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
   }
-}
 
-@media screen and (min-width: 600px) {
-  :host([span-small="12"]) ::slotted(stzh-cell:not([span-small])) {
-    --cell-width: 100%;
+  :host([span-small="12"]) ::slotted(stzh-cell) {
+    flex: 0 0 100%;
+    max-width: 100%;
   }
 }
-
-@media screen and (min-width: 900px) {
-  :host([span-medium="1"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 8.3333333333%;
+@media (min-width: 900px) {
+  :host([span-medium="1"]) ::slotted(stzh-cell) {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
   }
-}
 
-@media screen and (min-width: 900px) {
-  :host([span-medium="2"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 16.6666666667%;
+  :host([span-medium="2"]) ::slotted(stzh-cell) {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
   }
-}
 
-@media screen and (min-width: 900px) {
-  :host([span-medium="3"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 25%;
+  :host([span-medium="3"]) ::slotted(stzh-cell) {
+    flex: 0 0 25%;
+    max-width: 25%;
   }
-}
 
-@media screen and (min-width: 900px) {
-  :host([span-medium="4"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 33.3333333333%;
+  :host([span-medium="4"]) ::slotted(stzh-cell) {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
   }
-}
 
-@media screen and (min-width: 900px) {
-  :host([span-medium="5"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 41.6666666667%;
+  :host([span-medium="5"]) ::slotted(stzh-cell) {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
   }
-}
 
-@media screen and (min-width: 900px) {
-  :host([span-medium="6"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 50%;
+  :host([span-medium="6"]) ::slotted(stzh-cell) {
+    flex: 0 0 50%;
+    max-width: 50%;
   }
-}
 
-@media screen and (min-width: 900px) {
-  :host([span-medium="7"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 58.3333333333%;
+  :host([span-medium="7"]) ::slotted(stzh-cell) {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
   }
-}
 
-@media screen and (min-width: 900px) {
-  :host([span-medium="8"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 66.6666666667%;
+  :host([span-medium="8"]) ::slotted(stzh-cell) {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
   }
-}
 
-@media screen and (min-width: 900px) {
-  :host([span-medium="9"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 75%;
+  :host([span-medium="9"]) ::slotted(stzh-cell) {
+    flex: 0 0 75%;
+    max-width: 75%;
   }
-}
 
-@media screen and (min-width: 900px) {
-  :host([span-medium="10"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 83.3333333333%;
+  :host([span-medium="10"]) ::slotted(stzh-cell) {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
   }
-}
 
-@media screen and (min-width: 900px) {
-  :host([span-medium="11"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 91.6666666667%;
+  :host([span-medium="11"]) ::slotted(stzh-cell) {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
   }
-}
 
-@media screen and (min-width: 900px) {
-  :host([span-medium="12"]) ::slotted(stzh-cell:not([span-medium])) {
-    --cell-width: 100%;
+  :host([span-medium="12"]) ::slotted(stzh-cell) {
+    flex: 0 0 100%;
+    max-width: 100%;
   }
 }
-
-@media screen and (min-width: 1260px) {
-  :host([span-large="1"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 8.3333333333%;
+@media (min-width: 1260px) {
+  :host([span-large="1"]) ::slotted(stzh-cell) {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
   }
-}
 
-@media screen and (min-width: 1260px) {
-  :host([span-large="2"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 16.6666666667%;
+  :host([span-large="2"]) ::slotted(stzh-cell) {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
   }
-}
 
-@media screen and (min-width: 1260px) {
-  :host([span-large="3"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 25%;
+  :host([span-large="3"]) ::slotted(stzh-cell) {
+    flex: 0 0 25%;
+    max-width: 25%;
   }
-}
 
-@media screen and (min-width: 1260px) {
-  :host([span-large="4"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 33.3333333333%;
+  :host([span-large="4"]) ::slotted(stzh-cell) {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
   }
-}
 
-@media screen and (min-width: 1260px) {
-  :host([span-large="5"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 41.6666666667%;
+  :host([span-large="5"]) ::slotted(stzh-cell) {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
   }
-}
 
-@media screen and (min-width: 1260px) {
-  :host([span-large="6"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 50%;
+  :host([span-large="6"]) ::slotted(stzh-cell) {
+    flex: 0 0 50%;
+    max-width: 50%;
   }
-}
 
-@media screen and (min-width: 1260px) {
-  :host([span-large="7"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 58.3333333333%;
+  :host([span-large="7"]) ::slotted(stzh-cell) {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
   }
-}
 
-@media screen and (min-width: 1260px) {
-  :host([span-large="8"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 66.6666666667%;
+  :host([span-large="8"]) ::slotted(stzh-cell) {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
   }
-}
 
-@media screen and (min-width: 1260px) {
-  :host([span-large="9"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 75%;
+  :host([span-large="9"]) ::slotted(stzh-cell) {
+    flex: 0 0 75%;
+    max-width: 75%;
   }
-}
 
-@media screen and (min-width: 1260px) {
-  :host([span-large="10"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 83.3333333333%;
+  :host([span-large="10"]) ::slotted(stzh-cell) {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
   }
-}
 
-@media screen and (min-width: 1260px) {
-  :host([span-large="11"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 91.6666666667%;
+  :host([span-large="11"]) ::slotted(stzh-cell) {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
   }
-}
 
-@media screen and (min-width: 1260px) {
-  :host([span-large="12"]) ::slotted(stzh-cell:not([span-large])) {
-    --cell-width: 100%;
+  :host([span-large="12"]) ::slotted(stzh-cell) {
+    flex: 0 0 100%;
+    max-width: 100%;
   }
 }
-
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="1"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 8.3333333333%;
+@media (min-width: 1600px) {
+  :host([span-ultra="1"]) ::slotted(stzh-cell) {
+    flex: 0 0 8.3333333333%;
+    max-width: 8.3333333333%;
   }
-}
 
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="2"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 16.6666666667%;
+  :host([span-ultra="2"]) ::slotted(stzh-cell) {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%;
   }
-}
 
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="3"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 25%;
+  :host([span-ultra="3"]) ::slotted(stzh-cell) {
+    flex: 0 0 25%;
+    max-width: 25%;
   }
-}
 
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="4"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 33.3333333333%;
+  :host([span-ultra="4"]) ::slotted(stzh-cell) {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
   }
-}
 
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="5"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 41.6666666667%;
+  :host([span-ultra="5"]) ::slotted(stzh-cell) {
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
   }
-}
 
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="6"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 50%;
+  :host([span-ultra="6"]) ::slotted(stzh-cell) {
+    flex: 0 0 50%;
+    max-width: 50%;
   }
-}
 
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="7"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 58.3333333333%;
+  :host([span-ultra="7"]) ::slotted(stzh-cell) {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
   }
-}
 
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="8"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 66.6666666667%;
+  :host([span-ultra="8"]) ::slotted(stzh-cell) {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%;
   }
-}
 
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="9"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 75%;
+  :host([span-ultra="9"]) ::slotted(stzh-cell) {
+    flex: 0 0 75%;
+    max-width: 75%;
   }
-}
 
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="10"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 83.3333333333%;
+  :host([span-ultra="10"]) ::slotted(stzh-cell) {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%;
   }
-}
 
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="11"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 91.6666666667%;
+  :host([span-ultra="11"]) ::slotted(stzh-cell) {
+    flex: 0 0 91.6666666667%;
+    max-width: 91.6666666667%;
   }
-}
 
-@media screen and (min-width: 1600px) {
-  :host([span-ultra="12"]) ::slotted(stzh-cell:not([span-ultra])) {
-    --cell-width: 100%;
+  :host([span-ultra="12"]) ::slotted(stzh-cell) {
+    flex: 0 0 100%;
+    max-width: 100%;
   }
 }
-
 .stzh-row {
   display: flex;
   flex-wrap: wrap;
@@ -514,30 +482,6 @@
   /* Align items variants */
   /* Align content variants */
 }
-@media screen and (min-width: 600px) {
-  .stzh-row {
-    margin-left: calc(var(--stzh-grid-gutter-small) / -2);
-    margin-right: calc(var(--stzh-grid-gutter-small) / -2);
-  }
-}
-@media screen and (min-width: 900px) {
-  .stzh-row {
-    margin-left: calc(var(--stzh-grid-gutter-medium) / -2);
-    margin-right: calc(var(--stzh-grid-gutter-medium) / -2);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-row {
-    margin-left: calc(var(--stzh-grid-gutter-large) / -2);
-    margin-right: calc(var(--stzh-grid-gutter-large) / -2);
-  }
-}
-@media screen and (min-width: 1600px) {
-  .stzh-row {
-    margin-left: calc(var(--stzh-grid-gutter-ultra) / -2);
-    margin-right: calc(var(--stzh-grid-gutter-ultra) / -2);
-  }
-}
 .stzh-row--justify-end {
   justify-content: flex-end;
 }