cacao-css 6.3.0 → 7.0.0

package/dist/grid/sm/grid.css

@@ -5,22 +5,19 @@
 @media (--m-sm) {
     .grid-sm {
         --gap: 0px;
+        --num-cols: 1;
+
+        /*  Adjust the width of the columns to account for the gap between them.
+        This is only needed when using the "col-" classes because they set a percentage width.
+        In order to do this properly you need to know the number of columns in the grid.
+        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
+        Based on https://stackoverflow.com/a/76429435.
+    */
+        --col-width-adjust: calc(
+            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
+        );
 
         display: flex;
         flex-wrap: wrap;
-        margin-right: calc(var(--gap) * -1);
-    }
-
-    /* Not sure that overflow is necessary here. Removing it does not seem to have any consequences.
-      Keeping it means that items in a grid can't overflow when overflow is wanted (like when adjusting
-      the y-offset of an element when hovering over it).     */
-
-    /* .grid [class*=col-] {
-        overflow: hidden;
-    }     */
-
-    /* Don't adjust margin if column justification is being used.     */
-    .grid-sm[class*="justify-"] {
-        margin-right: 0;
     }
 }

package/dist/grid/sm/num-columns.css

@@ -0,0 +1,56 @@
+/* =========================================================================== *\
+    Number of columns
+    This is intended to be used with the grid system to specify the number of
+    columns in a grid to help with calculating the correct column widths when
+    there is a gap value.
+\* =========================================================================== */
+
+@media (--m-sm) {
+    .nc-1-sm {
+        --num-cols: 1;
+    }
+
+    .nc-2-sm {
+        --num-cols: 2;
+    }
+
+    .nc-3-sm {
+        --num-cols: 3;
+    }
+
+    .nc-4-sm {
+        --num-cols: 4;
+    }
+
+    .nc-5-sm {
+        --num-cols: 5;
+    }
+
+    .nc-6-sm {
+        --num-cols: 6;
+    }
+
+    .nc-7-sm {
+        --num-cols: 7;
+    }
+
+    .nc-8-sm {
+        --num-cols: 8;
+    }
+
+    .nc-9-sm {
+        --num-cols: 9;
+    }
+
+    .nc-10-sm {
+        --num-cols: 10;
+    }
+
+    .nc-11-sm {
+        --num-cols: 11;
+    }
+
+    .nc-12-sm {
+        --num-cols: 12;
+    }
+}

package/dist/grid/xl/grid.css

@@ -5,22 +5,19 @@
 @media (--m-xl) {
     .grid-xl {
         --gap: 0px;
+        --num-cols: 1;
+
+        /*  Adjust the width of the columns to account for the gap between them.
+        This is only needed when using the "col-" classes because they set a percentage width.
+        In order to do this properly you need to know the number of columns in the grid.
+        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
+        Based on https://stackoverflow.com/a/76429435.
+    */
+        --col-width-adjust: calc(
+            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
+        );
 
         display: flex;
         flex-wrap: wrap;
-        margin-right: calc(var(--gap) * -1);
-    }
-
-    /* Not sure that overflow is necessary here. Removing it does not seem to have any consequences.
-      Keeping it means that items in a grid can't overflow when overflow is wanted (like when adjusting
-      the y-offset of an element when hovering over it).     */
-
-    /* .grid [class*=col-] {
-        overflow: hidden;
-    }     */
-
-    /* Don't adjust margin if column justification is being used.     */
-    .grid-xl[class*="justify-"] {
-        margin-right: 0;
     }
 }

package/dist/grid/xl/num-columns.css

@@ -0,0 +1,56 @@
+/* =========================================================================== *\
+    Number of columns
+    This is intended to be used with the grid system to specify the number of
+    columns in a grid to help with calculating the correct column widths when
+    there is a gap value.
+\* =========================================================================== */
+
+@media (--m-xl) {
+    .nc-1-xl {
+        --num-cols: 1;
+    }
+
+    .nc-2-xl {
+        --num-cols: 2;
+    }
+
+    .nc-3-xl {
+        --num-cols: 3;
+    }
+
+    .nc-4-xl {
+        --num-cols: 4;
+    }
+
+    .nc-5-xl {
+        --num-cols: 5;
+    }
+
+    .nc-6-xl {
+        --num-cols: 6;
+    }
+
+    .nc-7-xl {
+        --num-cols: 7;
+    }
+
+    .nc-8-xl {
+        --num-cols: 8;
+    }
+
+    .nc-9-xl {
+        --num-cols: 9;
+    }
+
+    .nc-10-xl {
+        --num-cols: 10;
+    }
+
+    .nc-11-xl {
+        --num-cols: 11;
+    }
+
+    .nc-12-xl {
+        --num-cols: 12;
+    }
+}

package/dist/grid/xs/grid.css

@@ -5,22 +5,19 @@
 @media (--m-xs) {
     .grid-xs {
         --gap: 0px;
+        --num-cols: 1;
+
+        /*  Adjust the width of the columns to account for the gap between them.
+        This is only needed when using the "col-" classes because they set a percentage width.
+        In order to do this properly you need to know the number of columns in the grid.
+        This is set using the --num-cols variable. The "nc-" class is used to set this variable.
+        Based on https://stackoverflow.com/a/76429435.
+    */
+        --col-width-adjust: calc(
+            (((var(--num-cols) - 1) / var(--num-cols)) * var(--gap))
+        );
 
         display: flex;
         flex-wrap: wrap;
-        margin-right: calc(var(--gap) * -1);
-    }
-
-    /* Not sure that overflow is necessary here. Removing it does not seem to have any consequences.
-      Keeping it means that items in a grid can't overflow when overflow is wanted (like when adjusting
-      the y-offset of an element when hovering over it).     */
-
-    /* .grid [class*=col-] {
-        overflow: hidden;
-    }     */
-
-    /* Don't adjust margin if column justification is being used.     */
-    .grid-xs[class*="justify-"] {
-        margin-right: 0;
     }
 }

package/dist/grid/xs/num-columns.css

@@ -0,0 +1,56 @@
+/* =========================================================================== *\
+    Number of columns
+    This is intended to be used with the grid system to specify the number of
+    columns in a grid to help with calculating the correct column widths when
+    there is a gap value.
+\* =========================================================================== */
+
+@media (--m-xs) {
+    .nc-1-xs {
+        --num-cols: 1;
+    }
+
+    .nc-2-xs {
+        --num-cols: 2;
+    }
+
+    .nc-3-xs {
+        --num-cols: 3;
+    }
+
+    .nc-4-xs {
+        --num-cols: 4;
+    }
+
+    .nc-5-xs {
+        --num-cols: 5;
+    }
+
+    .nc-6-xs {
+        --num-cols: 6;
+    }
+
+    .nc-7-xs {
+        --num-cols: 7;
+    }
+
+    .nc-8-xs {
+        --num-cols: 8;
+    }
+
+    .nc-9-xs {
+        --num-cols: 9;
+    }
+
+    .nc-10-xs {
+        --num-cols: 10;
+    }
+
+    .nc-11-xs {
+        --num-cols: 11;
+    }
+
+    .nc-12-xs {
+        --num-cols: 12;
+    }
+}

package/dist/grid-column/2xl/col-1.css

@@ -4,6 +4,6 @@
 
 @media (--m-2xl) {
     .col-1-1-2xl {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/2xl/col-10.css

@@ -4,42 +4,42 @@
 
 @media (--m-2xl) {
     .col-1-10-2xl {
-        width: calc(10% - var(--gap));
+        width: calc(10% - var(--col-width-adjust));
     }
 
     .col-2-10-2xl {
-        width: calc(20% - var(--gap));
+        width: calc(20% - var(--col-width-adjust));
     }
 
     .col-3-10-2xl {
-        width: calc(30% - var(--gap));
+        width: calc(30% - var(--col-width-adjust));
     }
 
     .col-4-10-2xl {
-        width: calc(40% - var(--gap));
+        width: calc(40% - var(--col-width-adjust));
     }
 
     .col-5-10-2xl {
-        width: calc(50% - var(--gap));
+        width: calc(50% - var(--col-width-adjust));
     }
 
     .col-6-10-2xl {
-        width: calc(60% - var(--gap));
+        width: calc(60% - var(--col-width-adjust));
     }
 
     .col-7-10-2xl {
-        width: calc(70% - var(--gap));
+        width: calc(70% - var(--col-width-adjust));
     }
 
     .col-8-10-2xl {
-        width: calc(80% - var(--gap));
+        width: calc(80% - var(--col-width-adjust));
     }
 
     .col-9-10-2xl {
-        width: calc(90% - var(--gap));
+        width: calc(90% - var(--col-width-adjust));
     }
 
     .col-10-10-2xl {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/2xl/col-11.css

@@ -4,46 +4,46 @@
 
 @media (--m-2xl) {
     .col-1-11-2xl {
-        width: calc(100% / 11 - var(--gap));
+        width: calc(100% / 11 - var(--col-width-adjust));
     }
 
     .col-2-11-2xl {
-        width: calc(100% / 11 * 2 - var(--gap));
+        width: calc(100% / 11 * 2 - var(--col-width-adjust));
     }
 
     .col-3-11-2xl {
-        width: calc(100% / 11 * 3 - var(--gap));
+        width: calc(100% / 11 * 3 - var(--col-width-adjust));
     }
 
     .col-4-11-2xl {
-        width: calc(100% / 11 * 4 - var(--gap));
+        width: calc(100% / 11 * 4 - var(--col-width-adjust));
     }
 
     .col-5-11-2xl {
-        width: calc(100% / 11 * 5 - var(--gap));
+        width: calc(100% / 11 * 5 - var(--col-width-adjust));
     }
 
     .col-6-11-2xl {
-        width: calc(100% / 11 * 6 - var(--gap));
+        width: calc(100% / 11 * 6 - var(--col-width-adjust));
     }
 
     .col-7-11-2xl {
-        width: calc(100% / 11 * 7 - var(--gap));
+        width: calc(100% / 11 * 7 - var(--col-width-adjust));
     }
 
     .col-8-11-2xl {
-        width: calc(100% / 11 * 8 - var(--gap));
+        width: calc(100% / 11 * 8 - var(--col-width-adjust));
     }
 
     .col-9-11-2xl {
-        width: calc(100% / 11 * 9 - var(--gap));
+        width: calc(100% / 11 * 9 - var(--col-width-adjust));
     }
 
     .col-10-11-2xl {
-        width: calc(100% / 11 * 10 - var(--gap));
+        width: calc(100% / 11 * 10 - var(--col-width-adjust));
     }
 
     .col-11-11-2xl {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/2xl/col-12.css

@@ -4,50 +4,52 @@
 
 @media (--m-2xl) {
     .col-1-12-2xl {
-        width: calc(100% / 12 - var(--gap) - var(--gap));
+        width: calc(
+            100% / 12 - var(--col-width-adjust) - var(--col-width-adjust)
+        );
     }
 
     .col-2-12-2xl {
-        width: calc(100% / 12 * 2 - var(--gap));
+        width: calc(100% / 12 * 2 - var(--col-width-adjust));
     }
 
     .col-3-12-2xl {
-        width: calc(25% - var(--gap));
+        width: calc(25% - var(--col-width-adjust));
     }
 
     .col-4-12-2xl {
-        width: calc(100% / 12 * 4 - var(--gap));
+        width: calc(100% / 12 * 4 - var(--col-width-adjust));
     }
 
     .col-5-12-2xl {
-        width: calc(100% / 12 * 5 - var(--gap));
+        width: calc(100% / 12 * 5 - var(--col-width-adjust));
     }
 
     .col-6-12-2xl {
-        width: calc(50% - var(--gap));
+        width: calc(50% - var(--col-width-adjust));
     }
 
     .col-7-12-2xl {
-        width: calc(100% / 12 * 7 - var(--gap));
+        width: calc(100% / 12 * 7 - var(--col-width-adjust));
     }
 
     .col-8-12-2xl {
-        width: calc(100% / 12 * 8 - var(--gap));
+        width: calc(100% / 12 * 8 - var(--col-width-adjust));
     }
 
     .col-9-12-2xl {
-        width: calc(75% - var(--gap));
+        width: calc(75% - var(--col-width-adjust));
     }
 
     .col-10-12-2xl {
-        width: calc(100% / 12 * 10 - var(--gap));
+        width: calc(100% / 12 * 10 - var(--col-width-adjust));
     }
 
     .col-11-12-2xl {
-        width: calc(100% / 12 * 11 - var(--gap));
+        width: calc(100% / 12 * 11 - var(--col-width-adjust));
     }
 
     .col-12-12-2xl {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/2xl/col-2.css

@@ -4,10 +4,10 @@
 
 @media (--m-2xl) {
     .col-1-2-2xl {
-        width: calc(50% - var(--gap));
+        width: calc(50% - var(--col-width-adjust));
     }
 
     .col-2-2-2xl {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/2xl/col-3.css

@@ -4,14 +4,14 @@
 
 @media (--m-2xl) {
     .col-1-3-2xl {
-        width: calc(100% / 3 - var(--gap));
+        width: calc(100% / 3 - var(--col-width-adjust));
     }
 
     .col-2-3-2xl {
-        width: calc(100% / 3 * 2 - var(--gap));
+        width: calc(100% / 3 * 2 - var(--col-width-adjust));
     }
 
     .col-3-3-2xl {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/2xl/col-4.css

@@ -4,18 +4,18 @@
 
 @media (--m-2xl) {
     .col-1-4-2xl {
-        width: calc(25% - var(--gap));
+        width: calc(25% - var(--col-width-adjust));
     }
 
     .col-2-4-2xl {
-        width: calc(50% - var(--gap));
+        width: calc(50% - var(--col-width-adjust));
     }
 
     .col-3-4-2xl {
-        width: calc(75% - var(--gap));
+        width: calc(75% - var(--col-width-adjust));
     }
 
     .col-4-4-2xl {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/2xl/col-5.css

@@ -4,22 +4,22 @@
 
 @media (--m-2xl) {
     .col-1-5-2xl {
-        width: calc(20% - var(--gap));
+        width: calc(20% - var(--col-width-adjust));
     }
 
     .col-2-5-2xl {
-        width: calc(40% - var(--gap));
+        width: calc(40% - var(--col-width-adjust));
     }
 
     .col-3-5-2xl {
-        width: calc(60% - var(--gap));
+        width: calc(60% - var(--col-width-adjust));
     }
 
     .col-4-5-2xl {
-        width: calc(80% - var(--gap));
+        width: calc(80% - var(--col-width-adjust));
     }
 
     .col-5-5-2xl {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/2xl/col-6.css

@@ -4,26 +4,26 @@
 
 @media (--m-2xl) {
     .col-1-6-2xl {
-        width: calc(100% / 6 - var(--gap));
+        width: calc(100% / 6 - var(--col-width-adjust));
     }
 
     .col-2-6-2xl {
-        width: calc(100% / 6 * 2 - var(--gap));
+        width: calc(100% / 6 * 2 - var(--col-width-adjust));
     }
 
     .col-3-6-2xl {
-        width: calc(50% - var(--gap));
+        width: calc(50% - var(--col-width-adjust));
     }
 
     .col-4-6-2xl {
-        width: calc(100% / 6 * 4 - var(--gap));
+        width: calc(100% / 6 * 4 - var(--col-width-adjust));
     }
 
     .col-5-6-2xl {
-        width: calc(100% / 6 * 5 - var(--gap));
+        width: calc(100% / 6 * 5 - var(--col-width-adjust));
     }
 
     .col-6-6-2xl {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/2xl/col-7.css

@@ -4,30 +4,30 @@
 
 @media (--m-2xl) {
     .col-1-7-2xl {
-        width: calc(100% / 7 - var(--gap));
+        width: calc(100% / 7 - var(--col-width-adjust));
     }
 
     .col-2-7-2xl {
-        width: calc(100% / 7 * 2 - var(--gap));
+        width: calc(100% / 7 * 2 - var(--col-width-adjust));
     }
 
     .col-3-7-2xl {
-        width: calc(100% / 7 * 3 - var(--gap));
+        width: calc(100% / 7 * 3 - var(--col-width-adjust));
     }
 
     .col-4-7-2xl {
-        width: calc(100% / 7 * 4 - var(--gap));
+        width: calc(100% / 7 * 4 - var(--col-width-adjust));
     }
 
     .col-5-7-2xl {
-        width: calc(100% / 7 * 5 - var(--gap));
+        width: calc(100% / 7 * 5 - var(--col-width-adjust));
     }
 
     .col-6-7-2xl {
-        width: calc(100% / 7 * 6 - var(--gap));
+        width: calc(100% / 7 * 6 - var(--col-width-adjust));
     }
 
     .col-7-7-2xl {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }

package/dist/grid-column/2xl/col-8.css

@@ -4,34 +4,34 @@
 
 @media (--m-2xl) {
     .col-1-8-2xl {
-        width: calc(100% / 8 - var(--gap));
+        width: calc(100% / 8 - var(--col-width-adjust));
     }
 
     .col-2-8-2xl {
-        width: calc(25% - var(--gap));
+        width: calc(25% - var(--col-width-adjust));
     }
 
     .col-3-8-2xl {
-        width: calc(100% / 8 * 3 - var(--gap));
+        width: calc(100% / 8 * 3 - var(--col-width-adjust));
     }
 
     .col-4-8-2xl {
-        width: calc(50% - var(--gap));
+        width: calc(50% - var(--col-width-adjust));
     }
 
     .col-5-8-2xl {
-        width: calc(100% / 8 * 5 - var(--gap));
+        width: calc(100% / 8 * 5 - var(--col-width-adjust));
     }
 
     .col-6-8-2xl {
-        width: calc(75% - var(--gap));
+        width: calc(75% - var(--col-width-adjust));
     }
 
     .col-7-8-2xl {
-        width: calc(100% / 8 * 7 - var(--gap));
+        width: calc(100% / 8 * 7 - var(--col-width-adjust));
     }
 
     .col-8-8-2xl {
-        width: calc(100% - var(--gap));
+        width: calc(100% - var(--col-width-adjust));
     }
 }