cacao-css 4.4.0 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 4.6.0 (Jul 15, 2024)
+
+- Added `col-fill` styles for a grid column that will fill the remaining space.
+  
+## 4.5.0 (Jul 10, 2024)
+
+- Set embeds not to shrink if they are in a flex container.
+- Removed the overflow hidden on grid columns.
+  
 ## 4.4.0 (Feb 23, 2024)
 
 - Added `text-start`, `text-end`, and `text-justify` classes.

package/imports.css

@@ -112,6 +112,7 @@
 /* @import '../../node_modules/cacao-css/src/grid/core/col-10.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/core/col-11.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/core/col-12.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/core/col-fill.css'; */
 
 /* Grid (sm) */
 /* @import '../../node_modules/cacao-css/src/grid/sm/col-1.css'; */
@@ -126,6 +127,7 @@
 /* @import '../../node_modules/cacao-css/src/grid/sm/col-10.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/sm/col-11.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/sm/col-12.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-fill.css'; */
 
 /* Grid (md) */
 /* @import '../../node_modules/cacao-css/src/grid/md/col-1.css'; */
@@ -140,6 +142,7 @@
 /* @import '../../node_modules/cacao-css/src/grid/md/col-10.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/md/col-11.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/md/col-12.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-fill.css'; */
 
 /* Grid (lg) */
 /* @import '../../node_modules/cacao-css/src/grid/lg/col-1.css'; */
@@ -154,6 +157,7 @@
 /* @import '../../node_modules/cacao-css/src/grid/lg/col-10.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/lg/col-11.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/lg/col-12.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-fill.css'; */
 
 /* Grid (xl) */
 /* @import '../../node_modules/cacao-css/src/grid/xl/col-1.css'; */
@@ -168,6 +172,7 @@
 /* @import '../../node_modules/cacao-css/src/grid/xl/col-10.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/xl/col-11.css'; */
 /* @import '../../node_modules/cacao-css/src/grid/xl/col-12.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-fill.css'; */
 
 /* Gutter */
 @import '../../node_modules/cacao-css/src/gutter/core/all.css';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "cacao-css",
-    "description": "A set of composable CSS utilities that provide a solid foundation for starting a new project.",
-    "version": "4.4.0",
+    "description": "A set of composable CSS utilities that provide a solid foundation for website projects.",
+    "version": "4.6.0",
     "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
     "license": "MIT",
     "repository": {

package/src/embed/embed.css

@@ -6,6 +6,7 @@
     position: relative;
     aspect-ratio: 16 / 9;
     height: 100%;
+    flex-shrink: 0;
     overflow: hidden;
     max-width: 100%;
 }

package/src/grid/core/col-fill.css

@@ -0,0 +1,7 @@
+/* =========================================================================== *\
+    Grid cell fill remaining space
+\* =========================================================================== */
+
+.col-fill {
+    flex: 1 1 0%;
+}

package/src/grid/grid.css

@@ -9,11 +9,14 @@
     margin-right: calc(var(--gap) * -1);
 }
 
-.grid [class*=col-] {
+/* 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[class*=justify-] {
+.grid[class*='justify-'] {
     margin-right: 0;
 }

package/src/grid/lg/col-fill.css

@@ -0,0 +1,9 @@
+/* =========================================================================== *\
+    Grid cell fill remaining space
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .col-lg-fill {
+        flex: 1 1 0%;
+    }
+}

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

@@ -0,0 +1,9 @@
+/* =========================================================================== *\
+    Grid cell fill remaining space
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .col-md-fill {
+        flex: 1 1 0%;
+    }
+}

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

@@ -0,0 +1,9 @@
+/* =========================================================================== *\
+    Grid cell fill remaining space
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .col-sm-fill {
+        flex: 1 1 0%;
+    }
+}

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

@@ -0,0 +1,9 @@
+/* =========================================================================== *\
+    Grid cell fill remaining space
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .col-xl-fill {
+        flex: 1 1 0%;
+    }
+}