cacao-css 6.2.0 → 6.4.0

package/dist/display/2xl/display.css

@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-2xl) {
     .flex-2xl {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-2xl {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-2xl {
-        display: block;
+        display: block !important;
     }
 
     .inline-2xl {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-2xl {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-2xl {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-2xl {

package/dist/display/2xs/display.css

@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-2xs) {
     .flex-2xs {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-2xs {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-2xs {
-        display: block;
+        display: block !important;
     }
 
     .inline-2xs {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-2xs {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-2xs {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-2xs {

package/dist/display/3xl/display.css

@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-3xl) {
     .flex-3xl {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-3xl {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-3xl {
-        display: block;
+        display: block !important;
     }
 
     .inline-3xl {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-3xl {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-3xl {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-3xl {

package/dist/display/3xs/display.css

@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-3xs) {
     .flex-3xs {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-3xs {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-3xs {
-        display: block;
+        display: block !important;
     }
 
     .inline-3xs {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-3xs {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-3xs {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-3xs {

package/dist/display/4xl/display.css

@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-4xl) {
     .flex-4xl {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-4xl {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-4xl {
-        display: block;
+        display: block !important;
     }
 
     .inline-4xl {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-4xl {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-4xl {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-4xl {

package/dist/display/5xl/display.css

@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-5xl) {
     .flex-5xl {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-5xl {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-5xl {
-        display: block;
+        display: block !important;
     }
 
     .inline-5xl {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-5xl {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-5xl {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-5xl {

package/dist/display/display.css

@@ -1,29 +1,35 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 .flex {
-    display: flex;
+    display: flex !important;
 }
 
 .inline-flex {
-    display: inline-flex;
+    display: inline-flex !important;
 }
 
 .block {
-    display: block;
+    display: block !important;
 }
 
 .inline {
-    display: inline;
+    display: inline !important;
 }
 
 .inline-block {
-    display: inline-block;
+    display: inline-block !important;
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 .visually-hidden {

package/dist/display/lg/display.css

@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-lg) {
     .flex-lg {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-lg {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-lg {
-        display: block;
+        display: block !important;
     }
 
     .inline-lg {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-lg {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-lg {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-lg {

package/dist/display/md/display.css

@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-md) {
     .flex-md {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-md {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-md {
-        display: block;
+        display: block !important;
     }
 
     .inline-md {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-md {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-md {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-md {

package/dist/display/sm/display.css

@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-sm) {
     .flex-sm {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-sm {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-sm {
-        display: block;
+        display: block !important;
     }
 
     .inline-sm {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-sm {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-sm {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-sm {

package/dist/display/xl/display.css

@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-xl) {
     .flex-xl {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-xl {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-xl {
-        display: block;
+        display: block !important;
     }
 
     .inline-xl {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-xl {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-xl {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-xl {

package/dist/display/xs/display.css

@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-xs) {
     .flex-xs {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-xs {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-xs {
-        display: block;
+        display: block !important;
     }
 
     .inline-xs {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-xs {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-xs {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-xs {

package/dist/grid/2xl/grid.css

@@ -0,0 +1,26 @@
+/* =========================================================================== *\
+    Grid utilities
+\* =========================================================================== */
+
+@media (--m-2xl) {
+    .grid-2xl {
+        --gap: 0px;
+
+        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-2xl[class*="justify-"] {
+        margin-right: 0;
+    }
+}

package/dist/grid/2xs/grid.css

@@ -0,0 +1,26 @@
+/* =========================================================================== *\
+    Grid utilities
+\* =========================================================================== */
+
+@media (--m-2xs) {
+    .grid-2xs {
+        --gap: 0px;
+
+        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-2xs[class*="justify-"] {
+        margin-right: 0;
+    }
+}

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

@@ -0,0 +1,26 @@
+/* =========================================================================== *\
+    Grid utilities
+\* =========================================================================== */
+
+@media (--m-3xl) {
+    .grid-3xl {
+        --gap: 0px;
+
+        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/3xs/grid.css

@@ -0,0 +1,26 @@
+/* =========================================================================== *\
+    Grid utilities
+\* =========================================================================== */
+
+@media (--m-3xs) {
+    .grid-3xs {
+        --gap: 0px;
+
+        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/4xl/grid.css

@@ -0,0 +1,26 @@
+/* =========================================================================== *\
+    Grid utilities
+\* =========================================================================== */
+
+@media (--m-4xl) {
+    .grid-4xl {
+        --gap: 0px;
+
+        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/5xl/grid.css

@@ -0,0 +1,26 @@
+/* =========================================================================== *\
+    Grid utilities
+\* =========================================================================== */
+
+@media (--m-5xl) {
+    .grid-5xl {
+        --gap: 0px;
+
+        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;
+    }
+}