diff --git a/samples/index.html b/samples/index.html index ed4f775..56de53e 100644 --- a/samples/index.html +++ b/samples/index.html @@ -2,14 +2,14 @@ - - + + Call To Action Component -

Get started today

-

Enroll in a class after you are admitted as a non-degree student.

- - +
+ + +

Get started today

+

Enroll in a class after you are admitted as a non-degree student. Enroll in a class after you are admitted as + a + non-degree student. Enroll in a class after you are admitted as a non-degree student.

+ + + +

Get started today

+

Enroll in a a class after you are admitted as a non-degree student. Enroll in a class after + you + are admitted as a non-degree student. Enroll in a class after you are admitted as a non-degree student.

+ + + + + + + + + + + +

Get started today

+

Enroll in a class after you are admitted as a non-degree student.

+ + +
diff --git a/src/ilw-call-to-action.css b/src/ilw-call-to-action.css index e6522f3..dfe45a4 100644 --- a/src/ilw-call-to-action.css +++ b/src/ilw-call-to-action.css @@ -69,12 +69,7 @@ } ilw-call-to-action { - container-type: inline-size; - background: var(--ilw-call-to-action--background); - padding-top: var(--ilw-call-to-action--padding-top); - padding-right: var(--ilw-call-to-action--padding-right); - padding-bottom: var(--ilw-call-to-action--padding-bottom); - padding-left: var(--ilw-call-to-action--padding-left); + contain: layout; color: var(--ilw-call-to-action--text-color); .ilw-buttons { diff --git a/src/ilw-call-to-action.js b/src/ilw-call-to-action.js index 42cfc95..473f217 100644 --- a/src/ilw-call-to-action.js +++ b/src/ilw-call-to-action.js @@ -1,14 +1,14 @@ -import { LitElement, html } from 'lit'; -import styles from './ilw-call-to-action.styles'; -import './ilw-call-to-action.css'; +import { LitElement, html } from "lit"; +import styles from "./ilw-call-to-action.styles"; +import "./ilw-call-to-action.css"; import { classMap } from "lit/directives/class-map.js"; class CallToAction extends LitElement { - static get properties() { return { theme: {}, align: {}, + width: {}, _hasGraphic: { state: true, type: Boolean }, }; } @@ -19,8 +19,9 @@ class CallToAction extends LitElement { constructor() { super(); - this.theme = 'gray'; - this.align = 'left'; + this.theme = "gray"; + this.align = "left"; + this.width = "auto"; this._hasGraphic = false; } @@ -43,6 +44,8 @@ class CallToAction extends LitElement { const classes = { "call-to-action": true, graphic: this._hasGraphic, + fixed: this.width === "full", + page: this.width === "page", }; return html`
@@ -57,4 +60,4 @@ class CallToAction extends LitElement { } } -customElements.define('ilw-call-to-action', CallToAction); \ No newline at end of file +customElements.define("ilw-call-to-action", CallToAction); diff --git a/src/ilw-call-to-action.styles.js b/src/ilw-call-to-action.styles.js index 523e07e..b64e6ea 100644 --- a/src/ilw-call-to-action.styles.js +++ b/src/ilw-call-to-action.styles.js @@ -8,11 +8,26 @@ export default css` display: flex; flex-direction: row; justify-content: center; + background: var(--ilw-call-to-action--background); + padding-top: var(--ilw-call-to-action--padding-top); + padding-right: var(--ilw-call-to-action--padding-right); + padding-bottom: var(--ilw-call-to-action--padding-bottom); + padding-left: var(--ilw-call-to-action--padding-left); column-gap: var(--ilw-call-to-action--icon-margin); row-gap: var(--ilw-call-to-action--icon-margin); } - + +.call-to-action.fixed { + left:50%; + margin-left:-50vw; + margin-right:-50vw; + padding-left:0; + padding-right:0; + position:relative; + right:50%; + width: 100vw; +} @container (width <= 650px) { .call-to-action {