cacao-css 4.5.0 → 5.0.0

package/src/push/xxl/push-6.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Push 6's
+\* =========================================================================== */
+
+@media (--c-bp-xxl) {
+    .push-xxl-1-6 {
+        left: calc(100% / 6);
+    }
+
+    .push-xxl-2-6 {
+        left: calc(100% / 6 * 2);
+    }
+
+    .push-xxl-3-6 {
+        left: 50%;
+    }
+
+    .push-xxl-4-6 {
+        left: calc(100% / 6 * 4);
+    }
+
+    .push-xxl-5-6 {
+        left: calc(100% / 6 * 5);
+    }
+
+    .push-xxl-6-6 {
+        left: 100%;
+    }
+}

package/src/push/xxl/push-7.css

@@ -0,0 +1,33 @@
+/* =========================================================================== *\
+    Push 7's
+\* =========================================================================== */
+
+@media (--c-bp-xxl) {
+    .push-xxl-1-7 {
+        left: calc(100% / 7);
+    }
+
+    .push-xxl-2-7 {
+        left: calc(100% / 7 * 2);
+    }
+
+    .push-xxl-3-7 {
+        left: calc(100% / 7 * 3);
+    }
+
+    .push-xxl-4-7 {
+        left: calc(100% / 7 * 4);
+    }
+
+    .push-xxl-5-7 {
+        left: calc(100% / 7 * 5);
+    }
+
+    .push-xxl-6-7 {
+        left: calc(100% / 7 * 6);
+    }
+
+    .push-xxl-7-7 {
+        left: 100%;
+    }
+}

package/src/push/xxl/push-8.css

@@ -0,0 +1,37 @@
+/* =========================================================================== *\
+    Push 8's
+\* =========================================================================== */
+
+@media (--c-bp-xxl) {
+    .push-xxl-1-8 {
+        left: calc(100% / 8);
+    }
+
+    .push-xxl-2-8 {
+        left: 25%;
+    }
+
+    .push-xxl-3-8 {
+        left: calc(100% / 8 * 3);
+    }
+
+    .push-xxl-4-8 {
+        left: 50%;
+    }
+
+    .push-xxl-5-8 {
+        left: calc(100% / 8 * 5);
+    }
+
+    .push-xxl-6-8 {
+        left: 75%;
+    }
+
+    .push-xxl-7-8 {
+        left: calc(100% / 8 * 7);
+    }
+
+    .push-xxl-8-8 {
+        left: 100%;
+    }
+}

package/src/push/xxl/push-9.css

@@ -0,0 +1,41 @@
+/* =========================================================================== *\
+    Push 9's
+\* =========================================================================== */
+
+@media (--c-bp-xxl) {
+    .push-xxl-1-9 {
+        left: calc(100% / 9);
+    }
+
+    .push-xxl-2-9 {
+        left: calc(100% / 9 * 2);
+    }
+
+    .push-xxl-3-9 {
+        left: calc(100% / 9 * 3);
+    }
+
+    .push-xxl-4-9 {
+        left: calc(100% / 9 * 4);
+    }
+
+    .push-xxl-5-9 {
+        left: calc(100% / 9 * 5);
+    }
+
+    .push-xxl-6-9 {
+        left: calc(100% / 9 * 6);
+    }
+
+    .push-xxl-7-9 {
+        left: calc(100% / 9 * 7);
+    }
+
+    .push-xxl-8-9 {
+        left: calc(100% / 9 * 8);
+    }
+
+    .push-xxl-9-9 {
+        left: 100%;
+    }
+}

package/src/{reset/reset.css → reset.css}

@@ -1,12 +1,14 @@
 /* =========================================================================== *\
-    CSS Reset
+    CSS reset
     Inspired by https://www.joshwcomeau.com/css/custom-css-reset/
 \* =========================================================================== */
 
 /*
 1. Use a more-intuitive box-sizing model.
 */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
     box-sizing: border-box;
 }
 
@@ -27,7 +29,11 @@ body {
 /*
 4. Improve media defaults
 */
-img, picture, video, canvas, svg {
+img,
+picture,
+video,
+canvas,
+svg {
     display: block;
     max-width: 100%;
 }
@@ -35,13 +41,22 @@ img, picture, video, canvas, svg {
 /*
 5. Remove built-in form typography styles
 */
-input, button, textarea, select {
+input,
+button,
+textarea,
+select {
     font: inherit;
 }
 
 /*
 6. Avoid text overflows
 */
-p, h1, h2, h3, h4, h5, h6 {
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     overflow-wrap: break-word;
 }

package/src/size/core/size.css

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Size Utilities
+    Size utilities
 \* =========================================================================== */
 
 .h-100 {

package/src/size/lg/size.css

@@ -1,12 +1,12 @@
 /* =========================================================================== *\
-    Size Utilities
+    Size utilities
 \* =========================================================================== */
 
 @media (--c-bp-lg) {
     .h-lg-100 {
         height: 100%;
     }
-    
+
     .w-lg-100 {
         width: 100%;
     }

package/src/size/md/size.css

@@ -1,12 +1,12 @@
 /* =========================================================================== *\
-    Size Utilities
+    Size utilities
 \* =========================================================================== */
 
 @media (--c-bp-md) {
     .h-md-100 {
         height: 100%;
     }
-    
+
     .w-md-100 {
         width: 100%;
     }

package/src/size/sm/size.css

@@ -1,12 +1,12 @@
 /* =========================================================================== *\
-    Size Utilities
+    Size utilities
 \* =========================================================================== */
 
 @media (--c-bp-sm) {
     .h-sm-100 {
         height: 100%;
     }
-    
+
     .w-sm-100 {
         width: 100%;
     }

package/src/size/xl/size.css

@@ -1,12 +1,12 @@
 /* =========================================================================== *\
-    Size Utilities
+    Size utilities
 \* =========================================================================== */
 
 @media (--c-bp-xl) {
     .h-xl-100 {
         height: 100%;
     }
-    
+
     .w-xl-100 {
         width: 100%;
     }

package/src/size/xs/size.css

@@ -0,0 +1,13 @@
+/* =========================================================================== *\
+    Size utilities
+\* =========================================================================== */
+
+@media (--c-bp-xs) {
+    .h-xs-100 {
+        height: 100%;
+    }
+
+    .w-xs-100 {
+        width: 100%;
+    }
+}

package/src/size/xxl/size.css

@@ -0,0 +1,13 @@
+/* =========================================================================== *\
+    Size utilities
+\* =========================================================================== */
+
+@media (--c-bp-xxl) {
+    .h-xxl-100 {
+        height: 100%;
+    }
+
+    .w-xxl-100 {
+        width: 100%;
+    }
+}

package/src/spacing/{spacing.css → core/spacing.css}

@@ -1,14 +1,14 @@
 /* =========================================================================== *\
-    Spacing Utilities
+    Spacing utilities
 \* =========================================================================== */
 
-/* Used to remove space from the first element within an element */
+/* Used to remove space from the first element within an element. "st" stands for "space-top" */
 .first-child-st-0 > *:first-child {
     margin-top: 0 !important;
     padding-top: 0 !important;
 }
 
-/* Used to remove space from the last element within an element */
+/* Used to remove space from the last element within an element "sb" stands for "space-bottom" */
 .last-child-sb-0 > *:last-child {
     margin-bottom: 0 !important;
     padding-bottom: 0 !important;

package/src/typography/{align.css → core/align.css}

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Text Align Utilities
+    Text align utilities
 \* =========================================================================== */
 
 .text-center {

package/src/typography/{transform.css → core/transform.css}

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Text Transform Utilities
+    Text transform utilities
 \* =========================================================================== */
 
 .text-lower {

package/src/typography/{weight.css → core/weight.css}

@@ -1,5 +1,5 @@
 /* =========================================================================== *\
-    Font Weight Utilities
+    Font weight utilities
 \* =========================================================================== */
 
 .font-normal {

package/src/typography/lg/align.css

@@ -0,0 +1,21 @@
+/* =========================================================================== *\
+    Text align utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .text-center-lg {
+        text-align: center;
+    }
+
+    .text-start-lg {
+        text-align: start;
+    }
+
+    .text-end-lg {
+        text-align: end;
+    }
+
+    .text-justify-lg {
+        text-align: justify;
+    }
+}

package/src/typography/lg/break.css

@@ -0,0 +1,29 @@
+/* ===========================================================================
+    Word wrapping and word break styles - large screens
+=========================================================================== */
+
+@media (--c-bp-lg) {
+    /**
+ * Break strings when their length exceeds the width of their container.
+ */
+
+    .break-word-lg {
+        overflow-wrap: break-word !important;
+    }
+
+    /**
+ * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
+ * that could be all "one word".
+ */
+    .break-all-lg {
+        word-break: break-all;
+    }
+
+    /**
+ * Prevent whitespace wrapping
+ */
+
+    .no-wrap-lg {
+        white-space: nowrap !important;
+    }
+}

package/src/typography/lg/transform.css

@@ -0,0 +1,17 @@
+/* =========================================================================== *\
+    Text transform utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .text-lower-lg {
+        text-transform: lowercase;
+    }
+
+    .text-upper-lg {
+        text-transform: uppercase;
+    }
+
+    .text-capital-lg {
+        text-transform: capitalize;
+    }
+}

package/src/typography/lg/weight.css

@@ -0,0 +1,13 @@
+/* =========================================================================== *\
+    Font weight utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .font-normal-lg {
+        font-weight: 400;
+    }
+
+    .font-bold-lg {
+        font-weight: 700;
+    }
+}

package/src/typography/md/align.css

@@ -0,0 +1,21 @@
+/* =========================================================================== *\
+    Text align utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .text-center-md {
+        text-align: center;
+    }
+
+    .text-start-md {
+        text-align: start;
+    }
+
+    .text-end-md {
+        text-align: end;
+    }
+
+    .text-justify-md {
+        text-align: justify;
+    }
+}

package/src/typography/md/break.css

@@ -0,0 +1,29 @@
+/* ===========================================================================
+    Word wrapping and word break styles - large screens
+=========================================================================== */
+
+@media (--c-bp-md) {
+    /**
+ * Break strings when their length exceeds the width of their container.
+ */
+
+    .break-word-md {
+        overflow-wrap: break-word !important;
+    }
+
+    /**
+ * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
+ * that could be all "one word".
+ */
+    .break-all-md {
+        word-break: break-all;
+    }
+
+    /**
+ * Prevent whitespace wrapping
+ */
+
+    .no-wrap-md {
+        white-space: nowrap !important;
+    }
+}

package/src/typography/md/transform.css

@@ -0,0 +1,17 @@
+/* =========================================================================== *\
+    Text transform utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .text-lower-md {
+        text-transform: lowercase;
+    }
+
+    .text-upper-md {
+        text-transform: uppercase;
+    }
+
+    .text-capital-md {
+        text-transform: capitalize;
+    }
+}

package/src/typography/md/weight.css

@@ -0,0 +1,13 @@
+/* =========================================================================== *\
+    Font weight utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .font-normal-md {
+        font-weight: 400;
+    }
+
+    .font-bold-md {
+        font-weight: 700;
+    }
+}

package/src/typography/sm/align.css

@@ -0,0 +1,21 @@
+/* =========================================================================== *\
+    Text align utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .text-center-sm {
+        text-align: center;
+    }
+
+    .text-start-sm {
+        text-align: start;
+    }
+
+    .text-end-sm {
+        text-align: end;
+    }
+
+    .text-justify-sm {
+        text-align: justify;
+    }
+}

package/src/typography/sm/break.css

@@ -0,0 +1,29 @@
+/* ===========================================================================
+    Word wrapping and word break styles - large screens
+=========================================================================== */
+
+@media (--c-bp-sm) {
+    /**
+ * Break strings when their length exceeds the width of their container.
+ */
+
+    .break-word-sm {
+        overflow-wrap: break-word !important;
+    }
+
+    /**
+ * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
+ * that could be all "one word".
+ */
+    .break-all-sm {
+        word-break: break-all;
+    }
+
+    /**
+ * Prevent whitespace wrapping
+ */
+
+    .no-wrap-sm {
+        white-space: nowrap !important;
+    }
+}

package/src/typography/sm/transform.css

@@ -0,0 +1,17 @@
+/* =========================================================================== *\
+    Text transform utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .text-lower-sm {
+        text-transform: lowercase;
+    }
+
+    .text-upper-sm {
+        text-transform: uppercase;
+    }
+
+    .text-capital-sm {
+        text-transform: capitalize;
+    }
+}

package/src/typography/sm/weight.css

@@ -0,0 +1,13 @@
+/* =========================================================================== *\
+    Font weight utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .font-normal-sm {
+        font-weight: 400;
+    }
+
+    .font-bold-sm {
+        font-weight: 700;
+    }
+}

package/src/typography/xl/align.css

@@ -0,0 +1,21 @@
+/* =========================================================================== *\
+    Text align utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .text-center-xl {
+        text-align: center;
+    }
+
+    .text-start-xl {
+        text-align: start;
+    }
+
+    .text-end-xl {
+        text-align: end;
+    }
+
+    .text-justify-xl {
+        text-align: justify;
+    }
+}

package/src/typography/xl/break.css

@@ -0,0 +1,29 @@
+/* ===========================================================================
+    Word wrapping and word break styles - large screens
+=========================================================================== */
+
+@media (--c-bp-xl) {
+    /**
+ * Break strings when their length exceeds the width of their container.
+ */
+
+    .break-word-xl {
+        overflow-wrap: break-word !important;
+    }
+
+    /**
+ * word-break breaks more aggressively than overflow-wrap and it best for URLS or long strings
+ * that could be all "one word".
+ */
+    .break-all-xl {
+        word-break: break-all;
+    }
+
+    /**
+ * Prevent whitespace wrapping
+ */
+
+    .no-wrap-xl {
+        white-space: nowrap !important;
+    }
+}

package/src/typography/xl/transform.css

@@ -0,0 +1,17 @@
+/* =========================================================================== *\
+    Text transform utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .text-lower-xl {
+        text-transform: lowercase;
+    }
+
+    .text-upper-xl {
+        text-transform: uppercase;
+    }
+
+    .text-capital-xl {
+        text-transform: capitalize;
+    }
+}

package/src/typography/xl/weight.css

@@ -0,0 +1,13 @@
+/* =========================================================================== *\
+    Font weight utilities - large screens
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .font-normal-xl {
+        font-weight: 400;
+    }
+
+    .font-bold-xl {
+        font-weight: 700;
+    }
+}