cacao-css 3.21.0 → 4.1.0

package/src/grid/md/col-3.css

@@ -0,0 +1,17 @@
+/* =========================================================================== *\
+    Grid 3's
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .col-md-1-3 {
+        width: calc(100% / 3 - var(--gap));
+    }
+    
+    .col-md-2-3 {
+        width: calc(100% / 3 * 2 - var(--gap));
+    }
+    
+    .col-md-3-3 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/md/col-4.css

@@ -0,0 +1,21 @@
+/* =========================================================================== *\
+    Grid 4's
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .col-md-1-4 {
+        width: calc(25% - var(--gap));
+    }
+    
+    .col-md-2-4 {
+        width: calc(50% - var(--gap));
+    }
+    
+    .col-md-3-4 {
+        width: calc(75% - var(--gap));
+    }
+    
+    .col-md-4-4 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/md/col-5.css

@@ -0,0 +1,25 @@
+/* =========================================================================== *\
+    Grid 5's
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .col-md-1-5 {
+        width: calc(20% - var(--gap));
+    }
+    
+    .col-md-2-5 {
+        width: calc(40% - var(--gap));
+    }
+    
+    .col-md-3-5 {
+        width: calc(60% - var(--gap));
+    }
+    
+    .col-md-4-5 {
+        width: calc(80% - var(--gap));
+    }
+    
+    .col-md-5-5 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/md/col-6.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Grid 6's
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .col-md-1-6 {
+        width: calc(100% / 6 - var(--gap));
+    }
+    
+    .col-md-2-6 {
+        width: calc(100% / 6 * 2 - var(--gap));
+    }
+    
+    .col-md-3-6 {
+        width: calc(50% - var(--gap));
+    }
+    
+    .col-md-4-6 {
+        width: calc(100% / 6 * 4 - var(--gap));
+    }
+    
+    .col-md-5-6 {
+        width: calc(100% / 6 * 5 - var(--gap));
+    }
+    
+    .col-md-6-6 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/md/col-7.css

@@ -0,0 +1,33 @@
+/* =========================================================================== *\
+    Grid 7's
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .col-md-1-7 {
+        width: calc(100% / 7 - var(--gap));
+    }
+    
+    .col-md-2-7 {
+        width: calc(100% / 7 * 2 - var(--gap));
+    }
+    
+    .col-md-3-7 {
+        width: calc(100% / 7 * 3 - var(--gap));
+    }
+    
+    .col-md-4-7 {
+        width: calc(100% / 7 * 4 - var(--gap));
+    }
+    
+    .col-md-5-7 {
+        width: calc(100% / 7 * 5 - var(--gap));
+    }
+    
+    .col-md-6-7 {
+        width: calc(100% / 7 * 6 - var(--gap));
+    }
+    
+    .col-md-7-7 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/md/col-8.css

@@ -0,0 +1,37 @@
+/* =========================================================================== *\
+    Grid 8's
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .col-md-1-8 {
+        width: calc(100% / 8 - var(--gap));
+    }
+    
+    .col-md-2-8 {
+        width: calc(25% - var(--gap));
+    }
+    
+    .col-md-3-8 {
+        width: calc(100% / 8 * 3 - var(--gap));
+    }
+    
+    .col-md-4-8 {
+        width: calc(50% - var(--gap));
+    }
+    
+    .col-md-5-8 {
+        width: calc(100% / 8 * 5 - var(--gap));
+    }
+    
+    .col-md-6-8 {
+        width: calc(75% - var(--gap));
+    }
+    
+    .col-md-7-8 {
+        width: calc(100% / 8 * 7 - var(--gap));
+    }
+    
+    .col-md-8-8 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/md/col-9.css

@@ -0,0 +1,41 @@
+/* =========================================================================== *\
+    Grid 9's
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .col-md-1-9 {
+        width: calc(100% / 9 - var(--gap));
+    }
+    
+    .col-md-2-9 {
+        width: calc(100% / 9 * 2 - var(--gap));
+    }
+    
+    .col-md-3-9 {
+        width: calc(100% / 9 * 3 - var(--gap));
+    }
+    
+    .col-md-4-9 {
+        width: calc(100% / 9 * 4 - var(--gap));
+    }
+    
+    .col-md-5-9 {
+        width: calc(100% / 9 * 5 - var(--gap));
+    }
+    
+    .col-md-6-9 {
+        width: calc(100% / 9 * 6 - var(--gap));
+    }
+    
+    .col-md-7-9 {
+        width: calc(100% / 9 * 7 - var(--gap));
+    }
+    
+    .col-md-8-9 {
+        width: calc(100% / 9 * 8 - var(--gap));
+    }
+    
+    .col-md-9-9 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-1.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *\
+    Grid 1's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-1 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-10.css

@@ -0,0 +1,45 @@
+/* =========================================================================== *\
+    Grid 10's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-10 {
+        width: calc(10% - var(--gap));
+    }
+    
+    .col-sm-2-10 {
+        width: calc(20% - var(--gap));
+    }
+    
+    .col-sm-3-10 {
+        width: calc(30% - var(--gap));
+    }
+    
+    .col-sm-4-10 {
+        width: calc(40% - var(--gap));
+    }
+    
+    .col-sm-5-10 {
+        width: calc(50% - var(--gap));
+    }
+    
+    .col-sm-6-10 {
+        width: calc(60% - var(--gap));
+    }
+    
+    .col-sm-7-10 {
+        width: calc(70% - var(--gap));
+    }
+    
+    .col-sm-8-10 {
+        width: calc(80% - var(--gap));
+    }
+    
+    .col-sm-9-10 {
+        width: calc(90% - var(--gap));
+    }
+    
+    .col-sm-10-10 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-11.css

@@ -0,0 +1,49 @@
+/* =========================================================================== *\
+    Grid 11's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-11 {
+        width: calc(100% / 11 - var(--gap));
+    }
+    
+    .col-sm-2-11 {
+        width: calc(100% / 11 * 2 - var(--gap));
+    }
+    
+    .col-sm-3-11 {
+        width: calc(100% / 11 * 3 - var(--gap));
+    }
+    
+    .col-sm-4-11 {
+        width: calc(100% / 11 * 4 - var(--gap));
+    }
+    
+    .col-sm-5-11 {
+        width: calc(100% / 11 * 5 - var(--gap));
+    }
+    
+    .col-sm-6-11 {
+        width: calc(100% / 11 * 6 - var(--gap));
+    }
+    
+    .col-sm-7-11 {
+        width: calc(100% / 11 * 7 - var(--gap));
+    }
+    
+    .col-sm-8-11 {
+        width: calc(100% / 11 * 8 - var(--gap));
+    }
+    
+    .col-sm-9-11 {
+        width: calc(100% / 11 * 9 - var(--gap));
+    }
+    
+    .col-sm-10-11 {
+        width: calc(100% / 11 * 10 - var(--gap));
+    }
+    
+    .col-sm-11-11 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-12.css

@@ -0,0 +1,53 @@
+/* =========================================================================== *\
+    Grid 12's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-12 {
+        width: calc(100% / 12 - var(--gap));
+    }
+    
+    .col-sm-2-12 {
+        width: calc(100% / 12 * 2 - var(--gap));
+    }
+    
+    .col-sm-3-12 {
+        width: calc(25% - var(--gap));
+    }
+    
+    .col-sm-4-12 {
+        width: calc(100% / 12 * 4 - var(--gap));
+    }
+    
+    .col-sm-5-12 {
+        width: calc(100% / 12 * 5 - var(--gap));
+    }
+    
+    .col-sm-6-12 {
+        width: calc(50% - var(--gap));
+    }
+    
+    .col-sm-7-12 {
+        width: calc(100% / 12 * 7 - var(--gap));
+    }
+    
+    .col-sm-8-12 {
+        width: calc(100% / 12 * 8 - var(--gap));
+    }
+    
+    .col-sm-9-12 {
+        width: calc(75% - var(--gap));
+    }
+    
+    .col-sm-10-12 {
+        width: calc(100% / 12 * 10 - var(--gap));
+    }
+    
+    .col-sm-11-12 {
+        width: calc(100% / 12 * 11 - var(--gap));
+    }
+    
+    .col-sm-12-12 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-2.css

@@ -0,0 +1,13 @@
+/* =========================================================================== *\
+    Grid 2's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-2 {
+        width: calc(50% - var(--gap));
+    }
+    
+    .col-sm-2-2 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-3.css

@@ -0,0 +1,17 @@
+/* =========================================================================== *\
+    Grid 3's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-3 {
+        width: calc(100% / 3 - var(--gap));
+    }
+    
+    .col-sm-2-3 {
+        width: calc(100% / 3 * 2 - var(--gap));
+    }
+    
+    .col-sm-3-3 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-4.css

@@ -0,0 +1,21 @@
+/* =========================================================================== *\
+    Grid 4's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-4 {
+        width: calc(25% - var(--gap));
+    }
+    
+    .col-sm-2-4 {
+        width: calc(50% - var(--gap));
+    }
+    
+    .col-sm-3-4 {
+        width: calc(75% - var(--gap));
+    }
+    
+    .col-sm-4-4 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-5.css

@@ -0,0 +1,25 @@
+/* =========================================================================== *\
+    Grid 5's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-5 {
+        width: calc(20% - var(--gap));
+    }
+    
+    .col-sm-2-5 {
+        width: calc(40% - var(--gap));
+    }
+    
+    .col-sm-3-5 {
+        width: calc(60% - var(--gap));
+    }
+    
+    .col-sm-4-5 {
+        width: calc(80% - var(--gap));
+    }
+    
+    .col-sm-5-5 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-6.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Grid 6's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-6 {
+        width: calc(100% / 6 - var(--gap));
+    }
+    
+    .col-sm-2-6 {
+        width: calc(100% / 6 * 2 - var(--gap));
+    }
+    
+    .col-sm-3-6 {
+        width: calc(50% - var(--gap));
+    }
+    
+    .col-sm-4-6 {
+        width: calc(100% / 6 * 4 - var(--gap));
+    }
+    
+    .col-sm-5-6 {
+        width: calc(100% / 6 * 5 - var(--gap));
+    }
+    
+    .col-sm-6-6 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-7.css

@@ -0,0 +1,33 @@
+/* =========================================================================== *\
+    Grid 7's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-7 {
+        width: calc(100% / 7 - var(--gap));
+    }
+    
+    .col-sm-2-7 {
+        width: calc(100% / 7 * 2 - var(--gap));
+    }
+    
+    .col-sm-3-7 {
+        width: calc(100% / 7 * 3 - var(--gap));
+    }
+    
+    .col-sm-4-7 {
+        width: calc(100% / 7 * 4 - var(--gap));
+    }
+    
+    .col-sm-5-7 {
+        width: calc(100% / 7 * 5 - var(--gap));
+    }
+    
+    .col-sm-6-7 {
+        width: calc(100% / 7 * 6 - var(--gap));
+    }
+    
+    .col-sm-7-7 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-8.css

@@ -0,0 +1,37 @@
+/* =========================================================================== *\
+    Grid 8's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-8 {
+        width: calc(100% / 8 - var(--gap));
+    }
+    
+    .col-sm-2-8 {
+        width: calc(25% - var(--gap));
+    }
+    
+    .col-sm-3-8 {
+        width: calc(100% / 8 * 3 - var(--gap));
+    }
+    
+    .col-sm-4-8 {
+        width: calc(50% - var(--gap));
+    }
+    
+    .col-sm-5-8 {
+        width: calc(100% / 8 * 5 - var(--gap));
+    }
+    
+    .col-sm-6-8 {
+        width: calc(75% - var(--gap));
+    }
+    
+    .col-sm-7-8 {
+        width: calc(100% / 8 * 7 - var(--gap));
+    }
+    
+    .col-sm-8-8 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/sm/col-9.css

@@ -0,0 +1,41 @@
+/* =========================================================================== *\
+    Grid 9's
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-1-9 {
+        width: calc(100% / 9 - var(--gap));
+    }
+    
+    .col-sm-2-9 {
+        width: calc(100% / 9 * 2 - var(--gap));
+    }
+    
+    .col-sm-3-9 {
+        width: calc(100% / 9 * 3 - var(--gap));
+    }
+    
+    .col-sm-4-9 {
+        width: calc(100% / 9 * 4 - var(--gap));
+    }
+    
+    .col-sm-5-9 {
+        width: calc(100% / 9 * 5 - var(--gap));
+    }
+    
+    .col-sm-6-9 {
+        width: calc(100% / 9 * 6 - var(--gap));
+    }
+    
+    .col-sm-7-9 {
+        width: calc(100% / 9 * 7 - var(--gap));
+    }
+    
+    .col-sm-8-9 {
+        width: calc(100% / 9 * 8 - var(--gap));
+    }
+    
+    .col-sm-9-9 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/xl/col-1.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *\
+    Grid 1's
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .col-xl-1-1 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/xl/col-10.css

@@ -0,0 +1,45 @@
+/* =========================================================================== *\
+    Grid 10's
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .col-xl-1-10 {
+        width: calc(10% - var(--gap));
+    }
+    
+    .col-xl-2-10 {
+        width: calc(20% - var(--gap));
+    }
+    
+    .col-xl-3-10 {
+        width: calc(30% - var(--gap));
+    }
+    
+    .col-xl-4-10 {
+        width: calc(40% - var(--gap));
+    }
+    
+    .col-xl-5-10 {
+        width: calc(50% - var(--gap));
+    }
+    
+    .col-xl-6-10 {
+        width: calc(60% - var(--gap));
+    }
+    
+    .col-xl-7-10 {
+        width: calc(70% - var(--gap));
+    }
+    
+    .col-xl-8-10 {
+        width: calc(80% - var(--gap));
+    }
+    
+    .col-xl-9-10 {
+        width: calc(90% - var(--gap));
+    }
+    
+    .col-xl-10-10 {
+        width: calc(100% - var(--gap));
+    }
+}

package/src/grid/xl/col-11.css

@@ -0,0 +1,49 @@
+/* =========================================================================== *\
+    Grid 11's
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .col-xl-1-11 {
+        width: calc(100% / 11 - var(--gap));
+    }
+    
+    .col-xl-2-11 {
+        width: calc(100% / 11 * 2 - var(--gap));
+    }
+    
+    .col-xl-3-11 {
+        width: calc(100% / 11 * 3 - var(--gap));
+    }
+    
+    .col-xl-4-11 {
+        width: calc(100% / 11 * 4 - var(--gap));
+    }
+    
+    .col-xl-5-11 {
+        width: calc(100% / 11 * 5 - var(--gap));
+    }
+    
+    .col-xl-6-11 {
+        width: calc(100% / 11 * 6 - var(--gap));
+    }
+    
+    .col-xl-7-11 {
+        width: calc(100% / 11 * 7 - var(--gap));
+    }
+    
+    .col-xl-8-11 {
+        width: calc(100% / 11 * 8 - var(--gap));
+    }
+    
+    .col-xl-9-11 {
+        width: calc(100% / 11 * 9 - var(--gap));
+    }
+    
+    .col-xl-10-11 {
+        width: calc(100% / 11 * 10 - var(--gap));
+    }
+    
+    .col-xl-11-11 {
+        width: calc(100% - var(--gap));
+    }
+}