fix(cxl-ui): adjust styles, fix course card issues with new styles

conversionxl · Sep 27, 2023 · e31e460 · e31e460
1 parent 16a8c57
commit e31e460
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss
@@ -2,7 +2,7 @@
   --lumo-button-size: calc(var(--lumo-size-xl) * 1.25);
   cursor: pointer;
   padding: 1.25em 3.5em 1.25em 3em;
-  font-size: 20px !important;
+  font-size: calc(var(--lumo-font-size-xxxl) / 2) !important;
 }
 
 :host(.wide) {

diff --git a/packages/cxl-lumo-styles/scss/typography.scss b/packages/cxl-lumo-styles/scss/typography.scss
@@ -29,6 +29,7 @@ html {
   --cxl-lumo-line-height-m: 1.5;
   --cxl-lumo-line-height-s: var(--lumo-line-height-s); // 1.375
   --cxl-lumo-line-height-xs: var(--lumo-line-height-xs); // 1.25
+  --cxl-lumo-line-height-xxs: 1.15;
 
   @media #{mq.$small} {
     --cxl-lumo-font-size-hero: 3.5rem;
@@ -55,6 +56,7 @@ h1 {
   margin-top: 0;
   margin-bottom: 0.75em;
   font-size: var(--cxl-lumo-font-size-hero);
+  line-height: calc(var(--cxl-lumo-line-height-xl) / 2);
   font-weight: 900;
   b,
   strong {
@@ -64,6 +66,7 @@ h1 {
 
 h2 {
   font-size: var(--cxl-lumo-font-size-xxl);
+  line-height: var(--cxl-lumo-line-height-xxs);
 
   &.wp-block-heading {
     &.no-separator {
@@ -125,8 +128,7 @@ h2 {
 
 h3 {
   font-size: var(--lumo-font-size-xl);
-  line-height: var(--lumo-line-height-m);
-  font-weight: 500;
+  font-weight: 700;
 }
 
 h4 {

diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss
@@ -1,4 +1,6 @@
 /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix -- some of these are necessary for line-clamp implementation */
+/* stylelint-disable declaration-no-important */
+
 @use "~@conversionxl/cxl-ui/scss/mixins";
 
 :host {
@@ -14,9 +16,9 @@ header .name {
 }
 
 .content-wrapper {
+  height: 100%;
   min-height: calc(var(--lumo-line-height-s) * 6); // Six standard line-heights
   line-height: var(--lumo-line-height-s);
-  height: 100%;
 
   .content {
     @include mixins.ellipsis-for-lines(5);
@@ -40,8 +42,8 @@ header .name {
 }
 
 footer {
-  display: flex;
   position: relative;
+  display: flex;
   justify-content: end;
 
   vaadin-details[theme="reverse"] {