cacao-css 3.21.0 → 4.1.0

package/src/margin/md/horizontal.css

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

package/src/margin/md/start.css

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

package/src/margin/md/top.css

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

package/src/margin/md/vertical.css

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

package/src/margin/sm/all.css

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

package/src/margin/sm/bottom.css

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

package/src/margin/sm/end.css

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

package/src/margin/sm/horizontal.css

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

package/src/margin/sm/start.css

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

package/src/margin/sm/top.css

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

package/src/margin/sm/vertical.css

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

package/src/margin/xl/all.css

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

package/src/margin/xl/bottom.css

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

package/src/margin/xl/end.css

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

package/src/margin/xl/horizontal.css

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

package/src/margin/xl/start.css

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

package/src/margin/xl/top.css

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

package/src/margin/xl/vertical.css

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

package/src/{css/components/form/success.css → padding/core/all.css}

@@ -1,14 +1,27 @@
 /* =========================================================================== *\
-    FORM SUCCESS
+    All Sides Padding Utilities
 \* =========================================================================== */
 
-/** @define FormSuccess */
+.p-0 {
+    padding: 0;
+}
 
-.FormSuccess {
-    background: #fbec88;
-    border: 1px solid #fad42e;
-    border-radius: 8px;
-    color: #363636;
-    margin-bottom: 40px;
+.p-1 {
     padding: 10px;
 }
+
+.p-2 {
+    padding: 20px;
+}
+
+.p-3 {
+    padding: 30px;
+}
+
+.p-4 {
+    padding: 40px;
+}
+
+.p-5 {
+    padding: 50px;
+}

package/src/padding/core/bottom.css

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

package/src/padding/core/end.css

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

package/src/padding/core/horizontal.css

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