Use container-type instead of contain.

web-illinois · Aug 30, 2024 · fab452a · fab452a
1 parent dd490d8
commit fab452a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/samples/index.html b/samples/index.html
@@ -19,7 +19,7 @@
 </head>
 
 <body style="margin: 0; padding: 0;">
-<div style="width: 800px; margin: auto">
+<div style="max-width: 800px; margin: auto">
     <ilw-call-to-action theme="white">
         <img src="https://cdn.brand.illinois.edu/icons/line/blue/faq.svg" alt="" slot="icon">
         <h2>Get started today</h2>
@@ -41,7 +41,7 @@ <h2>Get started today</h2>
             <li><a href="#">Contact us</a></li>
         </ul>
     </ilw-call-to-action>
-    <ilw-call-to-action theme="blue-gradient">
+    <ilw-call-to-action theme="blue-gradient" width="full">
         <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 7 51.26 51.26">
             <defs>
                 <style>.cls-1 {

diff --git a/src/ilw-call-to-action.css b/src/ilw-call-to-action.css
@@ -19,6 +19,8 @@
         --ilw-call-to-action--link: var(--ilw-link--color); /*var: Color for links inside the component */
         --ilw-call-to-action--link-focus: var(--ilw-link--focused-color);  /*var: Focus and hover color for links inside the component*/
         --ilw-call-to-action--link-visited: var(--ilw-link--visited-color);  /*var: Visited link color for inside the component*/
+
+        --root-page-width: calc(100vw - (100vw - 100%));
     }
 
     ilw-call-to-action[theme="white"] {
@@ -69,7 +71,7 @@
 }
 
 ilw-call-to-action {
-    contain: layout;
+    container-type: inline-size;
     color: var(--ilw-call-to-action--text-color);
 
     .ilw-buttons {