refactor(cxl-ui): cxl-certificate-header[completed] credential adjust…

…ments Adjust width of the content and credential depending on the screen size.
conversionxl · Jan 11, 2024 · 786298d · 786298d
1 parent dfb2882
commit 786298d
Showing 1 changed file with 26 additions and 2 deletions.
diff --git a/packages/cxl-ui/scss/cxl-certificate-header.scss b/packages/cxl-ui/scss/cxl-certificate-header.scss
@@ -101,15 +101,39 @@
 }
 
 :host([theme~="completed"]) {
+  &::before {
+    display: none;
+  }
+
   color: var(--lumo-shade);
   background-color: var(--lumo-tint);
 
-  @media #{mq.$medium} {
-    @include mixins.pesudo-element-full-width(var(--lumo-tint));
+  .container {
+    @media #{mq.$small} {
+      display: block;
+    }
+
+    @media #{mq.$medium} {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--lumo-space-m);
+    }
   }
 
   .credential {
     padding-top: 0;
     border-top: none;
+
+    @media #{mq.$small} {
+      max-width: var(--cxl-hero-certificate-max-width);
+    }
+
+    @media #{mq.$medium} {
+      max-width: calc( var(--cxl-hero-certificate-max-width) / 2 );
+    }
+
+    @media #{mq.$large} {
+      max-width: var(--cxl-hero-certificate-max-width);
+    }
   }
 }