fix: move main CSS out of layer

web-illinois · Aug 2, 2024 · 783fafa · 783fafa
1 parent 377423c
commit 783fafa
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 56 deletions.
diff --git a/builder/versions/ilw-card.1.0.0-alpha.json b/builder/versions/ilw-card.1.0.0-alpha.json
@@ -11,7 +11,7 @@
     "js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha/ilw-card.js",
     "production": false,
     "notes": "",
-    "parent-style": "",
+    "parent-style": "margin: 0 auto; max-width: 400px; padding: 15px;",
     "samples": [
         {
             "name": "default",

diff --git a/src/ilw-card.css b/src/ilw-card.css
@@ -164,36 +164,74 @@
             --ilw-button--background-color: var(--il-orange);
         }
     }
+}
+
+ilw-card {
+    border: 1px solid var(--ilw-card--border-color);
+    background: var(--ilw-card--background);
+    margin-top: var(--ilw-card--margin-top);
+    margin-bottom: var(--ilw-card--margin-bottom);
+    color: var(--ilw-card--text-color);
 
-    ilw-card {
-        border: 1px solid var(--ilw-card--border-color);
-        background: var(--ilw-card--background);
-        margin-top: var(--ilw-card--margin-top);
-        margin-bottom: var(--ilw-card--margin-bottom);
-        color: var(--ilw-card--text-color);
+    &[align="center"] {
+        text-align: center;
+    }
 
-        &[align="center"] {
-            text-align: center;
+    & > h2,
+    & > h3,
+    & > h4,
+    & > h5,
+    & > h6 {
+        color: var(--ilw-card--heading-color);
+
+        &:first-of-type {
+            margin-top: 0;
+        }
+    }
+
+    &[clickable] {
+        border-bottom: 4px solid var(--ilw-card--clickable--border);
+        cursor: pointer;
+
+        a {
+            color: var(--ilw-card--clickable--link);
         }
 
         & > h2,
         & > h3,
         & > h4,
         & > h5,
         & > h6 {
-            color: var(--ilw-card--heading-color);
-
-            &:first-of-type {
-                margin-top: 0;
+            a {
+                color: var(--ilw-card--clickable--heading-color);
+                text-decoration: none;
+                display: inline-block;
+                padding-right: 1.5em;
+                position: relative;
+                vertical-align: middle;
+
+                &::after {
+                    content: "\00BB";
+                    display: block;
+                    position: absolute;
+                    right: 0;
+                    font-size: 2em;
+                    height: 0.5em;
+                    overflow: hidden;
+                    line-height: 0.5;
+                    top: calc(50% - 0.25em - 2px);
+                    font-weight: normal;
+                }
             }
         }
 
-        &[clickable] {
-            border-bottom: 4px solid var(--ilw-card--clickable--border);
-            cursor: pointer;
+        &:hover {
+            border-bottom-color: var(--ilw-card--hover--clickable-border);
+            background: var(--ilw-card--hover--background);
+            color: var(--ilw-card--hover--text-color);
 
             a {
-                color: var(--ilw-card--clickable--link);
+                color: var(--ilw-card--hover--link);
             }
 
             & > h2,
@@ -202,45 +240,7 @@
             & > h5,
             & > h6 {
                 a {
-                    color: var(--ilw-card--clickable--heading-color);
-                    text-decoration: none;
-                    display: inline-block;
-                    padding-right: 1.5em;
-                    position: relative;
-                    vertical-align: middle;
-
-                    &::after {
-                        content: "\00BB";
-                        display: block;
-                        position: absolute;
-                        right: 0;
-                        font-size: 2em;
-                        height: 0.5em;
-                        overflow: hidden;
-                        line-height: 0.5;
-                        top: calc(50% - 0.25em - 2px);
-                        font-weight: normal;
-                    }
-                }
-            }
-
-            &:hover {
-                border-bottom-color: var(--ilw-card--hover--clickable-border);
-                background: var(--ilw-card--hover--background);
-                color: var(--ilw-card--hover--text-color);
-
-                a {
-                    color: var(--ilw-card--hover--link);
-                }
-
-                & > h2,
-                & > h3,
-                & > h4,
-                & > h5,
-                & > h6 {
-                    a {
-                        color: var(--ilw-card--hover--heading-color);
-                    }
+                    color: var(--ilw-card--hover--heading-color);
                 }
             }
         }