diff --git a/.gitignore b/.gitignore index 3dbdb4875..516701214 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ packages/**/pkg coverage tmp test/visual/screenshots +.idea diff --git a/packages/cxl-lumo-styles/scss/color.scss b/packages/cxl-lumo-styles/scss/color.scss index ed401426b..38a224291 100644 --- a/packages/cxl-lumo-styles/scss/color.scss +++ b/packages/cxl-lumo-styles/scss/color.scss @@ -8,6 +8,7 @@ html, --lumo-primary-color: hsl(355.8, 74.7%, 48%); --lumo-primary-color-2pct: hsla(355.8, 74.7%, 48%, 0.02); --lumo-primary-color-10pct: hsla(355.8, 74.7%, 48%, 0.1); + --lumo-primary-color-20pct: hsla(355.8, 74.7%, 48%, 0.2); --lumo-primary-color-50pct: hsla(355.8, 74.7%, 48%, 0.5); /** diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss index 3cfd19a80..ae9549991 100644 --- a/packages/cxl-lumo-styles/scss/global.scss +++ b/packages/cxl-lumo-styles/scss/global.scss @@ -9,6 +9,7 @@ html { --cxl-space-sm: 12px; --cxl-color-light-gray: hsla(0, 0%, 96%, 1); --cxl-color-dark-gray: hsla(240, 1%, 24%, 1); + --cxl-color-black: hsl(0, 0%, 0%); --cxl-color-black-50pct: hsla(0, 0%, 0%, 0.5); --cxl-color-brand-blue: hsla(214, 61%, 25%, 1); --cxl-color-light-pink: hsl(353, 73%, 96%, 1); diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss index e41cd4285..59ad79d60 100644 --- a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss +++ b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss @@ -67,17 +67,40 @@ } } -// Featured course slider +/** + * Theme "featured-course-slider" +*/ + :host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) { - background-color: var(--cxl-color-light-gray); + position: relative; + background-color: var(--cxl-color-black); + + &::before { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + z-index: 0; + width: 100vw; + content: ""; + background-color: var(--cxl-color-black); + transform: translateX(-50%); + } [part="back-button"], [part="forward-button"] { + display: none; top: calc(50% - 2 * var(--lumo-space-xl)); width: var(--lumo-size-s); height: var(--lumo-size-s); color: var(--lumo-primary-color); border-radius: 100%; + border: 1px solid transparent; + background-color: var(--lumo-primary-color-20pct); + + &:hover { + border-color: var(--lumo-primary-color); + } &::after { font-size: var(--lumo-font-size-xl); @@ -85,6 +108,7 @@ @media #{mq.$medium} { top: unset; + display: flex; width: var(--lumo-space-xl); height: var(--lumo-space-xl); diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss index a70a30dea..7b936305c 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-header.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-header.scss @@ -4,11 +4,10 @@ :host { .container { padding: 0 var(--lumo-space-m); - color: var(--lumo-primary-contrast-color); - background-color: var(--lumo-shade); + background-color: var(--cxl-color-light-gray); @media #{mq.$medium} { - padding: 0; + padding: 0 var(--lumo-space-l); } } @@ -33,7 +32,6 @@ .subtitle { font-size: var(--lumo-font-size-xs); line-height: 1; - color: var(--lumo-tint-30pct); text-transform: uppercase; } diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss index 5c55ced5a..310afd00c 100644 --- a/packages/cxl-ui/scss/cxl-featured-course-card.scss +++ b/packages/cxl-ui/scss/cxl-featured-course-card.scss @@ -3,25 +3,34 @@ :host { position: relative; - max-width: unset; + display: flex; + align-items: center; + width: auto; height: auto; - padding: 0; + min-height: 400px; + max-width: unset; + margin: 0 calc(var(--lumo-space-m) * -1); + padding: 0 0 var(--lumo-space-m) 0; + line-height: var(--lumo-line-height-m); border: 0; box-shadow: none; + border-radius: 0; + background-color: var(--cxl-color-black); + + @media #{mq.$large} { + width: 100%; + margin: 0; + padding: 0 var(--lumo-space-s); + } .container { - position: relative; display: block; - height: 100%; - padding: 0 var(--lumo-space-m); - background-color: var(--cxl-color-light-gray); - - @media #{mq.$medium} { - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-template-rows: min-content auto; - gap: 0; - padding: var(--lumo-space-l) 0 0 var(--lumo-space-l); + margin: 0 auto; + padding: 0; + color: var(--lumo-tint); + + @media #{mq.$large} { + padding-right: 400px; } > .attributes { @@ -29,6 +38,10 @@ padding: 0; } + .name { + font-size: 40px; + } + .name strong { color: var(--lumo-primary-color); } @@ -53,6 +66,7 @@ align-items: center; grid-row-gap: var(--lumo-space-xs); padding: 0; + color: var(--lumo-tint); } } } @@ -62,10 +76,12 @@ z-index: 0; .instructor-image { + display: block; + margin: 0 auto; max-height: calc(var(--lumo-space-xl) * 6); object-fit: contain; - @media #{mq.$medium} { + @media #{mq.$large} { display: none; } } @@ -81,7 +97,7 @@ margin-top: calc(var(--lumo-space-m) * -2); } - @media #{mq.$medium} { + @media #{mq.$large} { display: none; } } @@ -90,28 +106,35 @@ position: relative; z-index: 0; display: block; + max-width: 650px; + padding: 0 var(--lumo-space-m); - @media #{mq.$medium} { + @media #{mq.$large} { position: initial; + padding: 0; grid-column: span 7 / span 7; } .instructor-image { display: none; + border-radius: 0; img { - height: 100%; + width: 100%; + height: auto; + margin-top: auto; border-radius: 0; + object-fit: contain; } - @media #{mq.$medium} { + @media #{mq.$large} { position: absolute; top: 0; right: var(--lumo-space-l); display: flex; justify-content: flex-end; width: auto; - max-width: 100%; + max-width: 400px; height: 100%; max-height: none; } @@ -121,8 +144,15 @@ .content-after { position: relative; z-index: 0; - padding-top: var(--lumo-space-s); - padding-bottom: var(--lumo-space-m); + max-width: 500px; + margin-top: var(--lumo-space-s); + padding: 0 var(--lumo-space-m); + + @media #{mq.$large} { + grid-column: span 7 / span 7; + padding-right: 0; + padding-left: 0; + } .content { @include mixins.ellipsis-for-lines(5); @@ -130,6 +160,7 @@ } .cta { + margin: var(--lumo-space-s) 0 0; font-weight: 600; vaadin-icon { @@ -145,10 +176,5 @@ text-decoration: underline; } } - - @media #{mq.$medium} { - grid-column: span 7 / span 7; - padding-top: var(--lumo-space-s); - } } } diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-header.scss b/packages/cxl-ui/scss/global/cxl-dashboard-header.scss index a8695cd51..b9df43dca 100644 --- a/packages/cxl-ui/scss/global/cxl-dashboard-header.scss +++ b/packages/cxl-ui/scss/global/cxl-dashboard-header.scss @@ -3,18 +3,6 @@ cxl-dashboard-header { z-index: 1; display: block; - &::before { - position: absolute; - top: 0; - bottom: 0; - left: 50%; - z-index: -1; - width: 100vw; - content: ""; - background-color: var(--lumo-shade); - transform: translateX(-50%); - } - .edit-roadmap { display: flex; align-items: center; diff --git a/packages/cxl-ui/src/components/cxl-featured-course-card.js b/packages/cxl-ui/src/components/cxl-featured-course-card.js index 758cbe113..1fb1dc0e7 100644 --- a/packages/cxl-ui/src/components/cxl-featured-course-card.js +++ b/packages/cxl-ui/src/components/cxl-featured-course-card.js @@ -17,35 +17,47 @@ export class CXLFeaturedCourseCardElement extends CXLBaseCardElement { @property({ type: String, attribute: 'cta-url' }) ctaUrl = ''; + _renderContentBefore() { + return html` +
+ ${this.instructor} + + + +
+ `; + } + + _renderContentAfter() { + return html` +
+
+ +
+ { + e.stopImmediatePropagation(); + this._goToLink(this.ctaUrl); + }} + > + ${this.ctaLabel} + + +
+ `; + } + render() { return html`
-
- ${this.instructor} - - - -
+ ${this._renderContentBefore()} ${this._renderHeader()} -
-
- -
- { - e.stopImmediatePropagation(); - this._goToLink(this.ctaUrl); - }} - > - ${this.ctaLabel} - - -
+ ${this._renderContentAfter()}
`; } diff --git a/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js b/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js index 76b42bf4e..c624fdb05 100644 --- a/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js +++ b/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js @@ -29,15 +29,15 @@ const args3 = { const Template = () => html` - ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)} - ${CXLFeatureadCourseCard(args2)} - ${CXLFeatureadCourseCard(args3)} + + ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)} + + + ${CXLFeatureadCourseCard(args2)} + + + ${CXLFeatureadCourseCard(args3)} + `; diff --git a/packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js b/packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js index 2c577d4f5..9b790eb47 100644 --- a/packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js +++ b/packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js @@ -32,7 +32,7 @@ export const CXLFeatureadCourseCard = FeaturedCourseCardTemplate.bind({}); CXLFeatureadCourseCard.args = { id: 'cxl-featured-course-1', - theme: 'Featured course', + theme: 'featured-course', name: 'Get ahead with Google Analytics 4', time: '5h 04min', instructor: 'Fred Pike',