cacao-css 3.21.0 → 4.0.0

package/src/gutter/xl/all.css

@@ -0,0 +1,33 @@
+/* =========================================================================== *\
+    All Directions Gutter Utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .g-xl-0 {
+        --gap: 0px;
+    }
+    
+    .g-xl-1 {
+        --gap: 10px;
+    }
+    
+    .g-xl-2 {
+        --gap: 20px;
+    }
+    
+    .g-xl-3 {
+        --gap: 30px;
+    }
+    
+    .g-xl-4 {
+        --gap: 40px;
+    }
+    
+    .g-xl-5 {
+        --gap: 50px;
+    }
+    
+    .g-xl-0, .g-xl-1, .g-xl-2, .g-xl-3, .g-xl-4, .g-xl-5 {
+        gap: var(--gap);
+    }
+}

package/src/gutter/xl/horizontal.css

@@ -0,0 +1,33 @@
+/* =========================================================================== *\
+    Horizontal Gutter Utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .gx-xl-0 {
+        --gap: 0px;
+    }
+    
+    .gx-xl-1 {
+        --gap: 10px;
+    }
+    
+    .gx-xl-2 {
+        --gap: 20px;
+    }
+    
+    .gx-xl-3 {
+        --gap: 30px;
+    }
+    
+    .gx-xl-4 {
+        --gap: 40px;
+    }
+    
+    .gx-xl-5 {
+        --gap: 50px;
+    }
+    
+    .gx-xl-0, .gx-xl-1, .gx-xl-2, .gx-xl-3, .gx-xl-4, .gx-xl-5 {
+        column-gap: var(--gap);
+    }
+}

package/src/gutter/xl/vertical.css

@@ -0,0 +1,33 @@
+/* =========================================================================== *\
+    Vertical Gutter Utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .gy-xl-0 {
+        --gap: 0px;
+    }
+    
+    .gy-xl-1 {
+        --gap: 10px;
+    }
+    
+    .gy-xl-2 {
+        --gap: 20px;
+    }
+    
+    .gy-xl-3 {
+        --gap: 30px;
+    }
+    
+    .gy-xl-4 {
+        --gap: 40px;
+    }
+    
+    .gy-xl-5 {
+        --gap: 50px;
+    }
+    
+    .gy-xl-0, .gy-xl-1, .gy-xl-2, .gy-xl-3, .gy-xl-4, .gy-xl-5 {
+        row-gap: var(--gap);
+    }
+}

package/src/image/image.css

@@ -0,0 +1,30 @@
+/* =========================================================================== *\
+    Image Utilities
+\* =========================================================================== */
+
+.image-left,
+.image-right {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+@media (--c-bp-sm) {
+    .image-left,
+    .image-right {
+        margin-bottom: 10px;
+        width: unset;
+        max-width: 100%;
+        display: inline;
+    }
+    
+    .image-left {
+        float: left;
+        margin-right: 20px;
+    }
+    
+    .image-right {
+        float: right;
+        margin-left: 20px;
+    }
+}

package/src/links/links.css

@@ -0,0 +1,18 @@
+/* =========================================================================== *\
+    Link Utilities
+\* =========================================================================== */
+
+.link-subtle {
+    color: inherit !important;
+    text-decoration: none !important;
+}
+
+.link-subtle:focus-visible {
+    text-decoration: underline !important;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .link-subtle:hover {
+        text-decoration: underline !important;
+    }
+}

package/src/margin/core/all.css

@@ -0,0 +1,27 @@
+/* =========================================================================== *\
+    All Sides Margin Utilities
+\* =========================================================================== */
+
+.m-0 {
+    margin: 0;
+}
+
+.m-1 {
+    margin: 10px;
+}
+
+.m-2 {
+    margin: 20px;
+}
+
+.m-3 {
+    margin: 30px;
+}
+
+.m-4 {
+    margin: 40px;
+}
+
+.m-5 {
+    margin: 50px;
+}

package/src/margin/core/bottom.css

@@ -0,0 +1,27 @@
+/* =========================================================================== *\
+    Bottom Margin Utilities
+\* =========================================================================== */
+
+.mb-0 {
+    margin-bottom: 0;
+}
+
+.mb-1 {
+    margin-bottom: 10px;
+}
+
+.mb-2 {
+    margin-bottom: 20px;
+}
+
+.mb-3 {
+    margin-bottom: 30px;
+}
+
+.mb-4 {
+    margin-bottom: 40px;
+}
+
+.mb-5 {
+    margin-bottom: 50px;
+}

package/src/margin/core/end.css

@@ -0,0 +1,27 @@
+/* =========================================================================== *\
+    End Margin Utilities
+\* =========================================================================== */
+
+.me-0 {
+    margin-right: 0;
+}
+
+.me-1 {
+    margin-right: 10px;
+}
+
+.me-2 {
+    margin-right: 20px;
+}
+
+.me-3 {
+    margin-right: 30px;
+}
+
+.me-4 {
+    margin-right: 40px;
+}
+
+.me-5 {
+    margin-right: 50px;
+}

package/src/margin/core/horizontal.css

@@ -0,0 +1,33 @@
+/* =========================================================================== *\
+    Horizontal Margin Utilities
+\* =========================================================================== */
+
+.mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.mx-1 {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.mx-2 {
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+.mx-3 {
+    margin-left: 30px;
+    margin-right: 30px;
+}
+
+.mx-4 {
+    margin-left: 40px;
+    margin-right: 40px;
+}
+
+.mx-5 {
+    margin-left: 50px;
+    margin-right: 50px;
+}

package/src/margin/core/start.css

@@ -0,0 +1,27 @@
+/* =========================================================================== *\
+    Start Margin Utilities
+\* =========================================================================== */
+
+.ms-0 {
+    margin-left: 0;
+}
+
+.ms-1 {
+    margin-left: 10px;
+}
+
+.ms-2 {
+    margin-left: 20px;
+}
+
+.ms-3 {
+    margin-left: 30px;
+}
+
+.ms-4 {
+    margin-left: 40px;
+}
+
+.ms-5 {
+    margin-left: 50px;
+}

package/src/margin/core/top.css

@@ -0,0 +1,27 @@
+/* =========================================================================== *\
+    Top Margin Utilities
+\* =========================================================================== */
+
+.mt-0 {
+    margin-top: 0;
+}
+
+.mt-1 {
+    margin-top: 10px;
+}
+
+.mt-2 {
+    margin-top: 20px;
+}
+
+.mt-3 {
+    margin-top: 30px;
+}
+
+.mt-4 {
+    margin-top: 40px;
+}
+
+.mt-5 {
+    margin-top: 50px;
+}

package/src/margin/core/vertical.css

@@ -0,0 +1,33 @@
+/* =========================================================================== *\
+    Vertical Margin Utilities
+\* =========================================================================== */
+
+.my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.my-1 {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.my-2 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.my-3 {
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.my-4 {
+    margin-top: 40px;
+    margin-bottom: 40px;
+}
+
+.my-5 {
+    margin-top: 50px;
+    margin-bottom: 50px;
+}

package/src/margin/lg/all.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    All Sides Margin Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .m-lg-0 {
+        margin: 0;
+    }
+    
+    .m-lg-1 {
+        margin: 10px;
+    }
+    
+    .m-lg-2 {
+        margin: 20px;
+    }
+    
+    .m-lg-3 {
+        margin: 30px;
+    }
+    
+    .m-lg-4 {
+        margin: 40px;
+    }
+    
+    .m-lg-5 {
+        margin: 50px;
+    }
+}

package/src/margin/lg/bottom.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Bottom Margin Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .mb-lg-0 {
+        margin-bottom: 0;
+    }
+    
+    .mb-lg-1 {
+        margin-bottom: 10px;
+    }
+    
+    .mb-lg-2 {
+        margin-bottom: 20px;
+    }
+    
+    .mb-lg-3 {
+        margin-bottom: 30px;
+    }
+    
+    .mb-lg-4 {
+        margin-bottom: 40px;
+    }
+    
+    .mb-lg-5 {
+        margin-bottom: 50px;
+    }
+}

package/src/margin/lg/end.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    End Margin Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .me-lg-0 {
+        margin-right: 0;
+    }
+    
+    .me-lg-1 {
+        margin-right: 10px;
+    }
+    
+    .me-lg-2 {
+        margin-right: 20px;
+    }
+    
+    .me-lg-3 {
+        margin-right: 30px;
+    }
+    
+    .me-lg-4 {
+        margin-right: 40px;
+    }
+    
+    .me-lg-5 {
+        margin-right: 50px;
+    }
+}

package/src/margin/lg/horizontal.css

@@ -0,0 +1,35 @@
+/* =========================================================================== *\
+    Horizontal Margin Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .mx-lg-0 {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    
+    .mx-lg-1 {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    
+    .mx-lg-2 {
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+    
+    .mx-lg-3 {
+        margin-left: 30px;
+        margin-right: 30px;
+    }
+    
+    .mx-lg-4 {
+        margin-left: 40px;
+        margin-right: 40px;
+    }
+    
+    .mx-lg-5 {
+        margin-left: 50px;
+        margin-right: 50px;
+    }
+}

package/src/margin/lg/start.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Start Margin Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .ms-lg-0 {
+        margin-left: 0;
+    }
+    
+    .ms-lg-1 {
+        margin-left: 10px;
+    }
+    
+    .ms-lg-2 {
+        margin-left: 20px;
+    }
+    
+    .ms-lg-3 {
+        margin-left: 30px;
+    }
+    
+    .ms-lg-4 {
+        margin-left: 40px;
+    }
+    
+    .ms-lg-5 {
+        margin-left: 50px;
+    }
+}

package/src/margin/lg/top.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Top Margin Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .mt-lg-0 {
+        margin-top: 0;
+    }
+    
+    .mt-lg-1 {
+        margin-top: 10px;
+    }
+    
+    .mt-lg-2 {
+        margin-top: 20px;
+    }
+    
+    .mt-lg-3 {
+        margin-top: 30px;
+    }
+    
+    .mt-lg-4 {
+        margin-top: 40px;
+    }
+    
+    .mt-lg-5 {
+        margin-top: 50px;
+    }
+}

package/src/margin/lg/vertical.css

@@ -0,0 +1,35 @@
+/* =========================================================================== *\
+    Vertical Margin Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .my-lg-10 {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    
+    .my-lg-1 {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+    
+    .my-lg-2 {
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+    
+    .my-lg-3 {
+        margin-top: 30px;
+        margin-bottom: 30px;
+    }
+    
+    .my-lg-4 {
+        margin-top: 40px;
+        margin-bottom: 40px;
+    }
+    
+    .my-lg-5 {
+        margin-top: 50px;
+        margin-bottom: 50px;
+    }
+}

package/src/margin/md/all.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    All Sides Margin Utilities
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .m-md-0 {
+        margin: 0;
+    }
+    
+    .m-md-1 {
+        margin: 10px;
+    }
+    
+    .m-md-2 {
+        margin: 20px;
+    }
+    
+    .m-md-3 {
+        margin: 30px;
+    }
+    
+    .m-md-4 {
+        margin: 40px;
+    }
+    
+    .m-md-5 {
+        margin: 50px;
+    }
+}

package/src/margin/md/bottom.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Bottom Margin Utilities
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .mb-md-0 {
+        margin-bottom: 0;
+    }
+    
+    .mb-md-1 {
+        margin-bottom: 10px;
+    }
+    
+    .mb-md-2 {
+        margin-bottom: 20px;
+    }
+    
+    .mb-md-3 {
+        margin-bottom: 30px;
+    }
+    
+    .mb-md-4 {
+        margin-bottom: 40px;
+    }
+    
+    .mb-md-5 {
+        margin-bottom: 50px;
+    }
+}

package/src/margin/md/end.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    End Margin Utilities
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .me-md-0 {
+        margin-right: 0;
+    }
+    
+    .me-md-1 {
+        margin-right: 10px;
+    }
+    
+    .me-md-2 {
+        margin-right: 20px;
+    }
+    
+    .me-md-3 {
+        margin-right: 30px;
+    }
+    
+    .me-md-4 {
+        margin-right: 40px;
+    }
+    
+    .me-md-5 {
+        margin-right: 50px;
+    }
+}