Fix issue with ::slotted always having less specificity than global s…

…tyles.
web-illinois · Sep 13, 2024 · 9d8e799 · 9d8e799
1 parent f70dba7
commit 9d8e799
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 45 deletions.
diff --git a/.github/workflows/sample.yml b/.github/workflows/sample.yml
diff --git a/builder/ilw-card.json b/builder/ilw-card.json
@@ -7,5 +7,5 @@
     "description": "A card component that can be used as a container for grouping information.",
     "toolkit-version": "",
     "production-version": "",
-    "development-version": "1.0.0-alpha2"
+    "development-version": "1.0.0-alpha3"
 }
diff --git a/builder/versions/ilw-card.1.0.0-alpha2.json → builder/versions/ilw-card.1.0.0-alpha3.json b/builder/versions/ilw-card.1.0.0-alpha2.json → builder/versions/ilw-card.1.0.0-alpha3.json
@@ -5,10 +5,10 @@
     "type": "web component",
     "element-name": "ilw-card",
     "description": "A card component that can be used as a container for grouping information.",
-    "version": "1.0.0-alpha2",
+    "version": "1.0.0-alpha3",
     "date": "08/02/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha2/ilw-card.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha2/ilw-card.js",
+    "css": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha3/ilw-card.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha3/ilw-card.js",
     "production": false,
     "notes": "",
     "parent-style": "margin: 0 auto; max-width: 400px; padding: 15px;",

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
     "description": "Illinois Toolkit: A card component that can be used as a container for grouping information, reminiscent of a physical note or playing card.",
     "repository": "github:web-illinois/ilw-card",
     "private": false,
-    "version": "1.0.0-alpha2",
+    "version": "1.0.0-alpha3",
     "type": "module",
     "files": [
       "src/**",

diff --git a/src/ilw-card.styles.css b/src/ilw-card.styles.css
@@ -286,13 +286,13 @@ article {
 
     ::slotted([slot="image"]) {
         aspect-ratio: var(--ilw-card--aspect-ratio);
-        width: 100%;
+        width: 100% !important; /* use important here because this should never be anything else */
         object-fit: cover;
     }
 }
 
 .card-image ::slotted(*) {
-    width: 100%;
+    width: 100% !important; /* use important here because this should never be anything else */
 }
 
 .card-content {