diff --git a/.gitignore b/.gitignore index 516701214..3dbdb4875 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,3 @@ packages/**/pkg coverage tmp test/visual/screenshots -.idea diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss index 31f796aad..fd42273a4 100644 --- a/packages/cxl-lumo-styles/scss/global.scss +++ b/packages/cxl-lumo-styles/scss/global.scss @@ -127,6 +127,7 @@ img { ol, ul { padding-left: var(--lumo-space-l); + font-family: var(--cxl-lumo-font-secondary); } /** @@ -268,18 +269,18 @@ ol.ordered-list-heavy { /* stylelint-enable order/properties-order */ ul.courses-list { + padding-left: 0; font-family: inherit; list-style: none; - padding-left: 0; cxl-card { + display: flex; align-items: center; + padding: var(--lumo-space-m) var(--lumo-space-s); + margin: 0; border: none; border-radius: 0; box-shadow: none; - display: flex; - margin: 0; - padding: var(--lumo-space-m) var(--lumo-space-s); .entry-byline { margin-bottom: 0; diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss new file mode 100644 index 000000000..073ee583c --- /dev/null +++ b/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss @@ -0,0 +1,10 @@ +:host([theme="x-large"]), :host(.cxl-homepage-button) { + --lumo-button-size: calc(var(--lumo-size-xl) * 1.25); + cursor: pointer; + padding: 1.25em 3.5em 1.25em 3em; + font-size: calc(var(--lumo-font-size-xxxl) / 2) !important; +} + +:host(.wide) { + width: 100%; +} diff --git a/packages/cxl-lumo-styles/scss/typography.scss b/packages/cxl-lumo-styles/scss/typography.scss index ab8e11d90..f53abf6ac 100644 --- a/packages/cxl-lumo-styles/scss/typography.scss +++ b/packages/cxl-lumo-styles/scss/typography.scss @@ -1,5 +1,7 @@ +/* stylelint-disable selector-no-qualifying-type */ @use "./icons"; @use "./mq"; +@use "./mixins"; html { /** @@ -16,9 +18,22 @@ html { * @ see https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/typography.html#font-size */ --cxl-lumo-font-size-hero: var(--lumo-font-size-xxxl); + --cxl-lumo-font-size-xxl: calc(var(--lumo-font-size-xl) + var(--lumo-font-size-m)); + + /** + * Line height. + * + * @see https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/typography.html#line-height + */ + --cxl-lumo-line-height-xl: 2; + --cxl-lumo-line-height-l: var(--lumo-line-height-m); // 1.625 + --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: 4rem; + --cxl-lumo-font-size-hero: 3.5rem; } } @@ -34,11 +49,13 @@ h4, h5, h6 { font-weight: 700; + line-height: var(--cxl-lumo-line-height-xs); word-break: break-word; } h1 { margin-top: 0; + margin-bottom: 0.75em; font-size: var(--cxl-lumo-font-size-hero); font-weight: 900; @@ -49,15 +66,66 @@ h1 { } h2 { - @media #{mq.$small} { - font-size: var(--lumo-font-size-xxxl); + font-size: var(--cxl-lumo-font-size-xxl); + line-height: var(--cxl-lumo-line-height-xxs); + + &.wp-block-heading { + &.separator { + &::after { + display: block; + width: 33%; + height: 3px; + margin: 1.5em auto 1.5em 0; + font-size: 16px; + content: ""; + background: var(--lumo-primary-color); + } + } + + + &.separator-wide { + &::after { + width: 100%; + } + } + + &.center { + text-align: center; + &::after { + margin: 1.5em auto; + } + } + + &.right { + text-align: right; + &::after { + margin: 1.5em 0 1.5em auto; + } + } + + &.separator-white { + &::after { + background: #fff; + } + } + + &.separator-black { + &::after { + background: #000; + } + } + + &.separator-gray { + &::after { + background: var(--lumo-contrast-20pct); + } + } } } h3 { - @media #{mq.$small} { - font-size: var(--lumo-font-size-xxl); - } + font-size: var(--lumo-font-size-xl); + font-weight: 700; } h4 { @@ -75,6 +143,7 @@ h6 { } p { + font-family: var(--cxl-lumo-font-secondary); .entry-content & { font-family: var(--cxl-lumo-font-secondary); } diff --git a/packages/cxl-lumo-styles/src/themes.js b/packages/cxl-lumo-styles/src/themes.js index 461c3fb22..4750e1351 100644 --- a/packages/cxl-lumo-styles/src/themes.js +++ b/packages/cxl-lumo-styles/src/themes.js @@ -14,6 +14,7 @@ import cxlVaadinNotificationContainerStyles from './styles/themes/vaadin-notific import cxlVaadinOverlayStyles from './styles/themes/vaadin-overlay-css.js'; import cxlVaadinTabStyles from './styles/themes/vaadin-tab-css.js'; import cxlVaadinTabsStyles from './styles/themes/vaadin-tabs-css.js'; +import cxlVaadinButtonStyles from './styles/themes/vaadin-button-css.js'; /* Mixins, alphabetic order. */ registerStyles('cxl-accordion-card', cxlAccordionCardStyles, { @@ -61,3 +62,6 @@ registerStyles('vaadin-tab', cxlVaadinTabStyles, { registerStyles('vaadin-tabs', cxlVaadinTabsStyles, { moduleId: 'cxl-vaadin-tabs-styles', }); +registerStyles('vaadin-button', cxlVaadinButtonStyles, { + moduleId: 'cxl-vaadin-button-styles', +}) diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss index be1d35f68..faf12a096 100644 --- a/packages/cxl-ui/scss/cxl-base-card.scss +++ b/packages/cxl-ui/scss/cxl-base-card.scss @@ -156,12 +156,12 @@ header { } .name { - @include mixins.ellipsis-for-lines(3); + @include mixins.ellipsis-for-lines(2); font-family: var(--lumo-font-family); font-size: var(--lumo-font-size-xl); font-style: normal; font-weight: 700; - line-height: var(--lumo-line-height-xs); + line-height: var(--cxl-lumo-line-height-xs); a { color: var(--lumo-body-text-color); diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss index 07d07436b..bc56fda9d 100644 --- a/packages/cxl-ui/scss/cxl-course-card.scss +++ b/packages/cxl-ui/scss/cxl-course-card.scss @@ -85,7 +85,7 @@ footer { &::part(content) { padding-bottom: 0; font-size: var(--lumo-font-size-s); - line-height: var(--lumo-line-height-s); + line-height: var(--cxl-lumo-line-height-s); } } diff --git a/packages/cxl-ui/scss/cxl-dashboard-notification.scss b/packages/cxl-ui/scss/cxl-dashboard-notification.scss index f737d0a00..87608c896 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-notification.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-notification.scss @@ -38,7 +38,6 @@ height: 12px; font-size: 8px; font-weight: 700; - line-height: normal; color: var(--lumo-tint); content: attr(count); background-color: var(--lumo-primary-color); diff --git a/packages/cxl-ui/scss/cxl-light-card.scss b/packages/cxl-ui/scss/cxl-light-card.scss index c4de55a2e..ef4d1a233 100644 --- a/packages/cxl-ui/scss/cxl-light-card.scss +++ b/packages/cxl-ui/scss/cxl-light-card.scss @@ -1,3 +1,5 @@ +@use './mixins'; + :host { min-width: 267px; // 3col widths on 1400px max-width: 300px; @@ -21,6 +23,7 @@ max-width: none; .name { + @include mixins.ellipsis-for-lines(3); font-size: var(--lumo-font-size-m); font-weight: 600; } @@ -33,6 +36,7 @@ padding-top: var(--lumo-space-xs); padding-bottom: 0; gap: var(--lumo-space-xs); + align-items: start; } cxl-time { diff --git a/packages/cxl-ui/scss/cxl-like-or-dislike.scss b/packages/cxl-ui/scss/cxl-like-or-dislike.scss index 01bc406d0..f18528aa1 100644 --- a/packages/cxl-ui/scss/cxl-like-or-dislike.scss +++ b/packages/cxl-ui/scss/cxl-like-or-dislike.scss @@ -24,7 +24,7 @@ span { margin-left: var(--lumo-space-s); - line-height: var(--lumo-line-height-xs); + line-height: var(--cxl-lumo-line-height-xs); } } diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss index ddad0ae23..e3e13997e 100644 --- a/packages/cxl-ui/scss/cxl-section.scss +++ b/packages/cxl-ui/scss/cxl-section.scss @@ -18,24 +18,6 @@ display: flow-root; } -/** - * Wave design bottom. - */ -:host(.has-wave) { - position: relative; - - .wrap { - z-index: 1; - } -} - -#wave { - position: absolute; - bottom: 0; - display: block; - width: 100%; -} - /** * Content readability. */ @@ -61,3 +43,16 @@ max-width: var(--cxl-content-max-width-wide); } } + +:host(.has-gray-background-color) { + background-color: var(--cxl-color-light-gray); +} + +:host(.has-black-background-color) { + color: var(--lumo-tint); + background-color: #000; + + > * { + --lumo-header-text-color: var(--lumo-tint); + } +} diff --git a/packages/cxl-ui/scss/global/cxl-app-layout.scss b/packages/cxl-ui/scss/global/cxl-app-layout.scss index fb8015a58..089ed511d 100644 --- a/packages/cxl-ui/scss/global/cxl-app-layout.scss +++ b/packages/cxl-ui/scss/global/cxl-app-layout.scss @@ -72,12 +72,6 @@ cxl-app-layout { } } - &[layout^="2c"] { - > .entry > .entry-header > .entry-title { - font-size: var(--lumo-font-size-xxxl); - } - } - &[layout^="2c"][wide] { iframe { height: $iframe-height * 2; diff --git a/packages/cxl-ui/scss/global/cxl-card.scss b/packages/cxl-ui/scss/global/cxl-card.scss index 1ae5ad441..3b3a152cf 100644 --- a/packages/cxl-ui/scss/global/cxl-card.scss +++ b/packages/cxl-ui/scss/global/cxl-card.scss @@ -1,8 +1,4 @@ cxl-card { - p { - font-family: inherit; - } - .entry-header { .thumbnail { margin: 0 auto; diff --git a/packages/cxl-ui/scss/global/cxl-course-dialog.scss b/packages/cxl-ui/scss/global/cxl-course-dialog.scss index 5a561bacc..9273b8e09 100644 --- a/packages/cxl-ui/scss/global/cxl-course-dialog.scss +++ b/packages/cxl-ui/scss/global/cxl-course-dialog.scss @@ -102,10 +102,6 @@ vaadin-dialog-overlay[theme="cxl-course-dialog"] { max-width: 75%; padding-bottom: var(--lumo-space-l); margin: 0 auto; - - p { - font-family: var(--cxl-lumo-font-secondary); - } } .content-tags { diff --git a/packages/cxl-ui/scss/global/cxl-playbook-accordion.scss b/packages/cxl-ui/scss/global/cxl-playbook-accordion.scss index c6e9bb2f5..402ac3fac 100644 --- a/packages/cxl-ui/scss/global/cxl-playbook-accordion.scss +++ b/packages/cxl-ui/scss/global/cxl-playbook-accordion.scss @@ -15,7 +15,6 @@ cxl-playbook-accordion { .entry-title { margin-top: 0.5em; /* match h3 */ margin-right: var(--lumo-space-m); - font-size: var(--lumo-font-size-m); } > vaadin-checkbox { diff --git a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss index 215d73655..781fd864e 100644 --- a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss +++ b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss @@ -15,10 +15,6 @@ cxl-vaadin-accordion { --vaadin-icon-width: var(--vaadin-icon-height); } - p { - font-family: inherit; - } - .entry { //mixin affects: .entry-header > label @include mixins.label-contrast("> .entry-header") { @@ -47,7 +43,7 @@ cxl-vaadin-accordion { .entry-title { flex: 1; - height: calc(var(--lumo-line-height-xs) * 4em); + height: calc(var(--cxl-lumo-line-height-xs) * 4em); font-size: var(--lumo-font-size-xl); word-break: break-word; } @@ -100,10 +96,6 @@ cxl-vaadin-accordion { * Theme "cxl-minidegree-course". */ &[theme~="cxl-minidegree-course"] { - p { - font-family: inherit; - } - .entry-header { display: grid; grid-column-gap: var(--lumo-space-m); @@ -160,10 +152,6 @@ cxl-vaadin-accordion { --vaadin-icon-width: var(--vaadin-icon-height); } - p { - font-family: inherit; - } - .entry { @include mixins.label-contrast("> .entry-header") { flex-basis: 100%; @@ -220,7 +208,7 @@ cxl-vaadin-accordion { flex: 1; flex-basis: auto; /* stylelint-disable-next-line declaration-no-important */ - height: calc(var(--lumo-line-height-xs) * 3em) !important; + height: calc(var(--cxl-lumo-line-height-xs) * 3em) !important; margin-top: 0; margin-bottom: 0; overflow: hidden; diff --git a/packages/cxl-ui/scss/jw-player/chapter.scss b/packages/cxl-ui/scss/jw-player/chapter.scss index 471389014..83f43539d 100644 --- a/packages/cxl-ui/scss/jw-player/chapter.scss +++ b/packages/cxl-ui/scss/jw-player/chapter.scss @@ -61,7 +61,7 @@ padding: var(--lumo-space-s) 0; margin-bottom: var(--lumo-space-s); font-size: var(--lumo-font-size-s); - line-height: var(--lumo-line-height-xs); + line-height: var(--cxl-lumo-line-height-xs); cursor: pointer; } diff --git a/packages/cxl-ui/src/components/cxl-section.js b/packages/cxl-ui/src/components/cxl-section.js index e82c5d89f..b4cfa6349 100644 --- a/packages/cxl-ui/src/components/cxl-section.js +++ b/packages/cxl-ui/src/components/cxl-section.js @@ -1,4 +1,5 @@ -import { LitElement, html, svg } from 'lit'; +/* eslint-disable import/no-extraneous-dependencies */ +import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; import '@conversionxl/cxl-lumo-styles'; import cxlSectionStyles from '../styles/cxl-section-css'; @@ -14,13 +15,6 @@ export class CXLSectionElement extends LitElement {
- ${this.classList.contains('has-wave') - ? svg` - - - - ` - : ''} `; } } diff --git a/packages/storybook/cxl-lumo-styles/typography.stories.js b/packages/storybook/cxl-lumo-styles/typography.stories.js index e342b0ed4..7f3a641e9 100644 --- a/packages/storybook/cxl-lumo-styles/typography.stories.js +++ b/packages/storybook/cxl-lumo-styles/typography.stories.js @@ -1,5 +1,7 @@ import '@conversionxl/cxl-lumo-styles'; +import '@conversionxl/cxl-ui'; import '@vaadin/button'; +import cxlColorStyles from '@conversionxl/cxl-lumo-styles/src/styles/color-css'; import { withKnobs } from '@storybook/addon-knobs'; import { html } from 'lit'; @@ -64,3 +66,119 @@ export const Examples = () => {

${loremIpsum}

`; }; + +export const CXLComExamples = () => html` + + + +
+

Top 1% marketers teach you what they know.

+

Master the most in-demand marketing skills with our online courses created by marketers with a proven record of driving real growth.

+ + Sign up now + +
+ + + +

On-demand courses taught by elite marketers from companies like Drift, ClickUp and Hubspot.

+ + + +
+
+

Learn from the legitimate experts with a proven track record

+

+ Betting your career and your company's growth on some guru's playbook is dangerous. +

+

+ We identify the top 1% masters of the marketing craft through a rock-solid vetting process that we've been perfecting for over a decade. Then we get them to teach you what they're best at. +

+

+ Browse all courses and instructors here. +

+
+
+
+ + + +
+
+

How we identify and vet top 1% marketers

+

+ This is how we find and vet the top 1% marketers: +

+
    +
  1. We regularly survey the marketing community for experts they want to learn from
    2. +
  2. We narrow down the list through a reference check, talking to their peers and executives
    3. +
  3. We make sure they have a proven track record, meaning they’ve significantly contributed to growth of more than 2 companies
    4. +
+
+
+ + + +
+
+

Help your company grow with frameworks that bring results

+

+ In 2016, Drift’s CEO, David Cancel, famously said that the era of product-based differentiation is going away. By now, we can conclude that it has already gone away. +

+
+
+
+ + + +
+

All access Subscription

+
+ + Sign up now + + + +
+

Become certified in 10 minidegrees

+

+ Each course is a puzzle piece teaching discrete skills. Each Minidegree is a completed puzzle teaching a marketing discipline from A to Z and takes you on a path towards becoming the top 1% marketer. After going through the entire curriculum, you’ll be given an exam that earns you a CXL certificate. Add your certificates to your LinkedIn profile, share your accomplishments with the world, and join our alumni network. +

+
+ +`;