feat(cxl-ui): cxl-dashboard-header changes for a light background

https://app.clickup.com/t/86aya2ta8
conversionxl · Oct 9, 2023 · d7365b6 · d7365b6
1 parent 639ab2d
commit d7365b6
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 19 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
@@ -73,8 +73,13 @@
 
 :host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) {
   position: relative;
+  display: none;
   background-color: var(--cxl-color-black);
 
+  @media #{mq.$large} {
+    display: flex;
+  }
+
   &::before {
     position: absolute;
     top: 0;

diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-details.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-details.scss
@@ -35,6 +35,17 @@
       }
     }
   }
+
+  :host([theme~="cxl-dashboard-header"]) {
+    [part="summary"]:hover {
+      color: var(--lumo-shade);
+
+      [part="toggle"] {
+        background-color: var(--lumo-shade);
+        color: var(--lumo-primary-contrast-color);
+      }
+    }
+  }
 }
 
 // Dashboard notification component
@@ -57,29 +68,26 @@
 
 // Dashboard header
 :host([theme~="cxl-dashboard-header"]) {
+  position: relative;
   margin: var(--lumo-space-s) 0 0;
-  border: 1px solid var(--cxl-color-dark-gray);
   border-radius: var(--lumo-border-radius-s);
+  background-color: var(--lumo-primary-contrast-color);
 
   [part="summary"] {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: var(--lumo-space-m);
     line-height: 1.3;
-    color: var(--lumo-primary-contrast-color);
-
-    &:hover {
-      color: var(--lumo-primary-contrast-color);
-    }
+    color: var(--lumo-primary-text-color);
   }
 
   [part="toggle"] {
     flex-shrink: 0;
     margin-left: var(--lumo-space-s);
     font-size: var(--lumo-font-size-m);
     color: var(--lumo-primary-contrast-color);
-    background-color: var(--lumo-tint-5pct);
+    background-color: var(--lumo-primary-color);
     border-radius: 100%;
   }
 

diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss
@@ -82,7 +82,6 @@
 
   .last-course {
     margin-bottom: var(--lumo-space-l);
-    border: 1px solid var(--lumo-primary-color);
 
     @media #{mq.$large} {
       display: flex;
@@ -154,8 +153,8 @@
       padding: var(--lumo-space-m);
       line-height: 1.3;
       cursor: pointer;
-      border: 1px solid var(--cxl-color-dark-gray);
       border-radius: var(--lumo-border-radius-s);
+      background-color: var(--lumo-primary-contrast-color);
 
       &::part(label) {
         width: 100%;
@@ -180,6 +179,10 @@
       color: var(--lumo-primary-contrast-color);
       background-color: var(--lumo-primary-color);
 
+      @media #{mq.$large} {
+        color: var(--lumo-primary-contrast-color);
+      }
+
       vaadin-icon {
         color: var(--lumo-primary-contrast-color);
       }

diff --git a/packages/cxl-ui/scss/cxl-dashboard-notification.scss b/packages/cxl-ui/scss/cxl-dashboard-notification.scss
@@ -7,9 +7,9 @@
     justify-content: center;
     height: var(--lumo-space-xl);
     padding: var(--lumo-space-s);
-    margin: 0 calc(-1 * var(--lumo-space-xl));
-    color: var(--lumo-primary-contrast-color);
-    background-color: var(--cxl-color-dark-gray);
+    margin: 0 calc(-1 * var(--lumo-space-m));
+    color: var(--cxl-color-dark-gray);
+    background-color: var(--lumo-primary-contrast-color);
     border-radius: 0;
 
     &::part(label) {

diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss
@@ -16,6 +16,7 @@
   box-shadow: none;
   border-radius: 0;
   background-color: var(--cxl-color-black);
+  overflow: hidden;
 
   @media #{mq.$large} {
     width: 100%;
@@ -81,7 +82,7 @@
 
     .instructor-image {
       display: block;
-      margin: 0 auto;
+      margin: var(--lumo-space-m) auto 0;
       max-height: calc(var(--lumo-space-xl) * 4);
       object-fit: contain;
 

diff --git a/packages/cxl-ui/scss/cxl-stats.scss b/packages/cxl-ui/scss/cxl-stats.scss
@@ -18,6 +18,7 @@
 :host([theme~="cxl-stats-dashboard-header"]) {
   padding: var(--lumo-space-m);
   border: 0;
+  background-color: var(--lumo-primary-contrast-color);
 
   @media #{mq.$medium} {
     grid-template-columns: repeat(2, 1fr);

diff --git a/packages/cxl-ui/scss/global/cxl-stats.scss b/packages/cxl-ui/scss/global/cxl-stats.scss
@@ -27,9 +27,3 @@ cxl-stats {
     }
   }
 }
-
-cxl-stats[theme~="cxl-stats-dashboard-header"] {
-  .stat-title {
-    color: var(--lumo-tint-30pct);
-  }
-}