cacao-css 6.3.0 → 7.0.0

package/dist/grid/2xs/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-2xs) {
+    .nc-1-2xs {
+        --num-cols: 1;
+    }
+
+    .nc-2-2xs {
+        --num-cols: 2;
+    }
+
+    .nc-3-2xs {
+        --num-cols: 3;
+    }
+
+    .nc-4-2xs {
+        --num-cols: 4;
+    }
+
+    .nc-5-2xs {
+        --num-cols: 5;
+    }
+
+    .nc-6-2xs {
+        --num-cols: 6;
+    }
+
+    .nc-7-2xs {
+        --num-cols: 7;
+    }
+
+    .nc-8-2xs {
+        --num-cols: 8;
+    }
+
+    .nc-9-2xs {
+        --num-cols: 9;
+    }
+
+    .nc-10-2xs {
+        --num-cols: 10;
+    }
+
+    .nc-11-2xs {
+        --num-cols: 11;
+    }
+
+    .nc-12-2xs {
+        --num-cols: 12;
+    }
+}

package/dist/grid/3xl/grid.css

@@ -5,22 +5,19 @@
 @media (--m-3xl) {
     .grid-3xl {
         --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-3xl[class*="justify-"] {
-        margin-right: 0;
     }
 }

package/dist/grid/3xl/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-3xl) {
+    .nc-1-3xl {
+        --num-cols: 1;
+    }
+
+    .nc-2-3xl {
+        --num-cols: 2;
+    }
+
+    .nc-3-3xl {
+        --num-cols: 3;
+    }
+
+    .nc-4-3xl {
+        --num-cols: 4;
+    }
+
+    .nc-5-3xl {
+        --num-cols: 5;
+    }
+
+    .nc-6-3xl {
+        --num-cols: 6;
+    }
+
+    .nc-7-3xl {
+        --num-cols: 7;
+    }
+
+    .nc-8-3xl {
+        --num-cols: 8;
+    }
+
+    .nc-9-3xl {
+        --num-cols: 9;
+    }
+
+    .nc-10-3xl {
+        --num-cols: 10;
+    }
+
+    .nc-11-3xl {
+        --num-cols: 11;
+    }
+
+    .nc-12-3xl {
+        --num-cols: 12;
+    }
+}

package/dist/grid/3xs/grid.css

@@ -5,22 +5,19 @@
 @media (--m-3xs) {
     .grid-3xs {
         --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-3xs[class*="justify-"] {
-        margin-right: 0;
     }
 }

package/dist/grid/3xs/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-3xs) {
+    .nc-1-3xs {
+        --num-cols: 1;
+    }
+
+    .nc-2-3xs {
+        --num-cols: 2;
+    }
+
+    .nc-3-3xs {
+        --num-cols: 3;
+    }
+
+    .nc-4-3xs {
+        --num-cols: 4;
+    }
+
+    .nc-5-3xs {
+        --num-cols: 5;
+    }
+
+    .nc-6-3xs {
+        --num-cols: 6;
+    }
+
+    .nc-7-3xs {
+        --num-cols: 7;
+    }
+
+    .nc-8-3xs {
+        --num-cols: 8;
+    }
+
+    .nc-9-3xs {
+        --num-cols: 9;
+    }
+
+    .nc-10-3xs {
+        --num-cols: 10;
+    }
+
+    .nc-11-3xs {
+        --num-cols: 11;
+    }
+
+    .nc-12-3xs {
+        --num-cols: 12;
+    }
+}

package/dist/grid/4xl/grid.css

@@ -5,22 +5,19 @@
 @media (--m-4xl) {
     .grid-4xl {
         --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-4xl[class*="justify-"] {
-        margin-right: 0;
     }
 }

package/dist/grid/4xl/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-4xl) {
+    .nc-1-4xl {
+        --num-cols: 1;
+    }
+
+    .nc-2-4xl {
+        --num-cols: 2;
+    }
+
+    .nc-3-4xl {
+        --num-cols: 3;
+    }
+
+    .nc-4-4xl {
+        --num-cols: 4;
+    }
+
+    .nc-5-4xl {
+        --num-cols: 5;
+    }
+
+    .nc-6-4xl {
+        --num-cols: 6;
+    }
+
+    .nc-7-4xl {
+        --num-cols: 7;
+    }
+
+    .nc-8-4xl {
+        --num-cols: 8;
+    }
+
+    .nc-9-4xl {
+        --num-cols: 9;
+    }
+
+    .nc-10-4xl {
+        --num-cols: 10;
+    }
+
+    .nc-11-4xl {
+        --num-cols: 11;
+    }
+
+    .nc-12-4xl {
+        --num-cols: 12;
+    }
+}

package/dist/grid/5xl/grid.css

@@ -5,22 +5,19 @@
 @media (--m-5xl) {
     .grid-5xl {
         --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-5xl[class*="justify-"] {
-        margin-right: 0;
     }
 }

package/dist/grid/5xl/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-5xl) {
+    .nc-1-5xl {
+        --num-cols: 1;
+    }
+
+    .nc-2-5xl {
+        --num-cols: 2;
+    }
+
+    .nc-3-5xl {
+        --num-cols: 3;
+    }
+
+    .nc-4-5xl {
+        --num-cols: 4;
+    }
+
+    .nc-5-5xl {
+        --num-cols: 5;
+    }
+
+    .nc-6-5xl {
+        --num-cols: 6;
+    }
+
+    .nc-7-5xl {
+        --num-cols: 7;
+    }
+
+    .nc-8-5xl {
+        --num-cols: 8;
+    }
+
+    .nc-9-5xl {
+        --num-cols: 9;
+    }
+
+    .nc-10-5xl {
+        --num-cols: 10;
+    }
+
+    .nc-11-5xl {
+        --num-cols: 11;
+    }
+
+    .nc-12-5xl {
+        --num-cols: 12;
+    }
+}

package/dist/grid/grid.css

@@ -4,21 +4,16 @@
 
 .grid {
     --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[class*='justify-'] {
-    margin-right: 0;
 }

package/dist/grid/lg/grid.css

@@ -5,22 +5,19 @@
 @media (--m-lg) {
     .grid-lg {
         --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-lg[class*="justify-"] {
-        margin-right: 0;
     }
 }

package/dist/grid/lg/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-lg) {
+    .nc-1-lg {
+        --num-cols: 1;
+    }
+
+    .nc-2-lg {
+        --num-cols: 2;
+    }
+
+    .nc-3-lg {
+        --num-cols: 3;
+    }
+
+    .nc-4-lg {
+        --num-cols: 4;
+    }
+
+    .nc-5-lg {
+        --num-cols: 5;
+    }
+
+    .nc-6-lg {
+        --num-cols: 6;
+    }
+
+    .nc-7-lg {
+        --num-cols: 7;
+    }
+
+    .nc-8-lg {
+        --num-cols: 8;
+    }
+
+    .nc-9-lg {
+        --num-cols: 9;
+    }
+
+    .nc-10-lg {
+        --num-cols: 10;
+    }
+
+    .nc-11-lg {
+        --num-cols: 11;
+    }
+
+    .nc-12-lg {
+        --num-cols: 12;
+    }
+}

package/dist/grid/md/grid.css

@@ -5,22 +5,19 @@
 @media (--m-md) {
     .grid-md {
         --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-md[class*="justify-"] {
-        margin-right: 0;
     }
 }

package/dist/grid/md/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-md) {
+    .nc-1-md {
+        --num-cols: 1;
+    }
+
+    .nc-2-md {
+        --num-cols: 2;
+    }
+
+    .nc-3-md {
+        --num-cols: 3;
+    }
+
+    .nc-4-md {
+        --num-cols: 4;
+    }
+
+    .nc-5-md {
+        --num-cols: 5;
+    }
+
+    .nc-6-md {
+        --num-cols: 6;
+    }
+
+    .nc-7-md {
+        --num-cols: 7;
+    }
+
+    .nc-8-md {
+        --num-cols: 8;
+    }
+
+    .nc-9-md {
+        --num-cols: 9;
+    }
+
+    .nc-10-md {
+        --num-cols: 10;
+    }
+
+    .nc-11-md {
+        --num-cols: 11;
+    }
+
+    .nc-12-md {
+        --num-cols: 12;
+    }
+}

package/dist/grid/num-columns.css

@@ -0,0 +1,54 @@
+/* =========================================================================== *\
+    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.
+\* =========================================================================== */
+
+.nc-1 {
+    --num-cols: 1;
+}
+
+.nc-2 {
+    --num-cols: 2;
+}
+
+.nc-3 {
+    --num-cols: 3;
+}
+
+.nc-4 {
+    --num-cols: 4;
+}
+
+.nc-5 {
+    --num-cols: 5;
+}
+
+.nc-6 {
+    --num-cols: 6;
+}
+
+.nc-7 {
+    --num-cols: 7;
+}
+
+.nc-8 {
+    --num-cols: 8;
+}
+
+.nc-9 {
+    --num-cols: 9;
+}
+
+.nc-10 {
+    --num-cols: 10;
+}
+
+.nc-11 {
+    --num-cols: 11;
+}
+
+.nc-12 {
+    --num-cols: 12;
+}