From 5a683300b2f466f73bb557336dc9515de11a1e03 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Wed, 11 Dec 2024 16:56:49 -0500 Subject: [PATCH] Convert viewport-demo and callout styles --- .../callout/{callout.style.ts => callout.css} | 0 src/components/callout/callout.ts | 2 +- .../viewport-demo/viewport-demo.css | 154 +++++++++++++++++ .../viewport-demo/viewport-demo.styles.ts | 158 ------------------ src/components/viewport-demo/viewport-demo.ts | 2 +- 5 files changed, 156 insertions(+), 160 deletions(-) rename src/components/callout/{callout.style.ts => callout.css} (100%) create mode 100644 src/components/viewport-demo/viewport-demo.css delete mode 100644 src/components/viewport-demo/viewport-demo.styles.ts diff --git a/src/components/callout/callout.style.ts b/src/components/callout/callout.css similarity index 100% rename from src/components/callout/callout.style.ts rename to src/components/callout/callout.css diff --git a/src/components/callout/callout.ts b/src/components/callout/callout.ts index 44b625780..2b9e35a82 100644 --- a/src/components/callout/callout.ts +++ b/src/components/callout/callout.ts @@ -1,7 +1,7 @@ import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; import componentStyles from '../../styles/component.styles.js'; -import styles from './callout.style.js'; +import styles from './callout.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { CSSResultGroup } from 'lit'; diff --git a/src/components/viewport-demo/viewport-demo.css b/src/components/viewport-demo/viewport-demo.css new file mode 100644 index 000000000..3958a540d --- /dev/null +++ b/src/components/viewport-demo/viewport-demo.css @@ -0,0 +1,154 @@ +:host { + --viewport-background-color: var(--wa-color-surface-default, canvas); + --viewport-resize: both; + --viewport-min-width: 10em; + --viewport-min-height: 5em; + --viewport-max-width: 100%; + --viewport-padding: var(--wa-space-2xl, 2rem); + --viewport-initial-aspect-ratio: 16 / 9; + --viewport-bezel-width: 0.25em; + + display: block; + /* Needed for measuring the available space */ + contain: inline-size; + container-type: inline-size; + container-name: host; +} + +[part~='frame'] { + --zoom: 1; /* overridden by JS */ + --available-width: calc((100cqw - var(--offset-inline, 0px))); + --iframe-manual-aspect-ratio: calc(var(--iframe-manual-width-px) / var(--iframe-manual-height-px)); + --iframe-manual-width: calc(var(--iframe-manual-width-px) * 1px * var(--zoom)); + --iframe-manual-height: calc(var(--iframe-manual-height-px) * 1px * var(--zoom)); + --width: var(--iframe-manual-width, var(--available-width)); + --height-auto: calc(var(--width) / (var(--aspect-ratio))); + + --_aspect-ratio: calc(var(--viewport-width-px) / var(--viewport-height-px)); + --aspect-ratio: var(--_aspect-ratio, var(--viewport-initial-aspect-ratio)); + + display: flex; + flex-flow: column; + align-items: start; + + width: fit-content; + height: fit-content; + + /* Style frame like a window */ + border: var(--viewport-bezel-width) solid transparent; + border-radius: calc(var(--wa-border-radius-s)); + + /* Window-like frame styling */ + --button-params: 0.4em / 0.5em 0.5em border-box; + background: + radial-gradient(circle closest-side, var(--wa-color-red-60) 80%, var(--wa-color-red-50) 98%, transparent) 0.4em + var(--button-params), + radial-gradient(circle closest-side, var(--wa-color-yellow-80) 80%, var(--wa-color-yellow-70) 98%, transparent) + 1.1em var(--button-params), + radial-gradient(circle closest-side, var(--wa-color-green-70) 80%, var(--wa-color-green-60) 98%, transparent) 1.8em + var(--button-params), + var(--wa-color-gray-95); + background-repeat: no-repeat; + box-shadow: + 0 0 0 1px var(--wa-color-gray-90), + var(--wa-shadow-m); + + &.resized { + aspect-ratio: var(--iframe-manual-aspect-ratio); + } + + /* User has not yet resized the viewport */ + &:not(.resized) ::slotted(iframe), + &:not(.resized) slot { + /* Will only be set if we have BOTH width and height */ + aspect-ratio: var(--aspect-ratio); + } +} + +slot { + display: block; + overflow: clip; + width: var(--width); + max-width: var(--available-width); + height: var(--iframe-manual-height, var(--height-auto)); +} + +::slotted(iframe) { + display: block; + flex: auto; + scale: var(--zoom); + transform-origin: top left; + resize: var(--viewport-resize); + overflow: auto; + + /* The width and height specified here are only applied if the iframe is not manually resized */ + width: calc(var(--available-width) / var(--zoom)); + height: calc(var(--height-auto) / var(--zoom)); + + min-width: calc(var(--viewport-min-width, 10em) / var(--zoom)); + max-width: calc(var(--available-width) / var(--zoom)) !important; + min-height: calc(var(--viewport-min-height) / var(--zoom)); + + /* Divide with var(--zoom) to get lengths that stay constant regardless of zoom level */ + border: calc(1px / var(--zoom)) solid var(--wa-color-gray-90); + background: var(--viewport-background-color); +} + +[part~='controls'] { + display: flex; + align-items: center; + align-self: end; + gap: 0.3em; + margin-top: -0.2em; + font-size: var(--wa-font-size-xs); + padding-block-end: 0.25em; + padding-inline: 1em 0.2em; + white-space: nowrap; + + /* Until we can implement info that is not lying, we don’t show it when it's lying */ + .needs-internal-zoom & > * { + opacity: 0 !important; + pointer-events: none; + } + + .dimensions { + word-spacing: -0.15em; + margin-inline-end: 1em; + } + + wa-icon { + display: none; + vertical-align: -0.1em; + font-size: 85%; + color: var(--wa-color-gray-70); + } + + wa-icon-button { + &:not(:hover, :focus) { + opacity: 0.5; + } + + &::part(base) { + padding: 0; + } + } + + .zoom { + display: flex; + align-items: center; + gap: 0.3em; + font-weight: 600; + color: var(--wa-color-text-quiet); + opacity: 80%; + } + + [part~='zoom-in'], + [part~='zoom-in']::part(base) { + cursor: zoom-in; + } + + [part~='zoom-out'], + [part~='zoom-out']::part(base) { + cursor: zoom-out; + } +} diff --git a/src/components/viewport-demo/viewport-demo.styles.ts b/src/components/viewport-demo/viewport-demo.styles.ts deleted file mode 100644 index eb73de3d8..000000000 --- a/src/components/viewport-demo/viewport-demo.styles.ts +++ /dev/null @@ -1,158 +0,0 @@ -import { css } from 'lit'; - -export default css` - :host { - --viewport-background-color: var(--wa-color-surface-default, canvas); - --viewport-resize: both; - --viewport-min-width: 10em; - --viewport-min-height: 5em; - --viewport-max-width: 100%; - --viewport-padding: var(--wa-space-2xl, 2rem); - --viewport-initial-aspect-ratio: 16 / 9; - --viewport-bezel-width: 0.25em; - - display: block; - /* Needed for measuring the available space */ - contain: inline-size; - container-type: inline-size; - container-name: host; - } - - [part~='frame'] { - --zoom: 1; /* overridden by JS */ - --available-width: calc((100cqw - var(--offset-inline, 0px))); - --iframe-manual-aspect-ratio: calc(var(--iframe-manual-width-px) / var(--iframe-manual-height-px)); - --iframe-manual-width: calc(var(--iframe-manual-width-px) * 1px * var(--zoom)); - --iframe-manual-height: calc(var(--iframe-manual-height-px) * 1px * var(--zoom)); - --width: var(--iframe-manual-width, var(--available-width)); - --height-auto: calc(var(--width) / (var(--aspect-ratio))); - - --_aspect-ratio: calc(var(--viewport-width-px) / var(--viewport-height-px)); - --aspect-ratio: var(--_aspect-ratio, var(--viewport-initial-aspect-ratio)); - - display: flex; - flex-flow: column; - align-items: start; - - width: fit-content; - height: fit-content; - - /* Style frame like a window */ - border: var(--viewport-bezel-width) solid transparent; - border-radius: calc(var(--wa-border-radius-s)); - - /* Window-like frame styling */ - --button-params: 0.4em / 0.5em 0.5em border-box; - background: - radial-gradient(circle closest-side, var(--wa-color-red-60) 80%, var(--wa-color-red-50) 98%, transparent) 0.4em - var(--button-params), - radial-gradient(circle closest-side, var(--wa-color-yellow-80) 80%, var(--wa-color-yellow-70) 98%, transparent) - 1.1em var(--button-params), - radial-gradient(circle closest-side, var(--wa-color-green-70) 80%, var(--wa-color-green-60) 98%, transparent) - 1.8em var(--button-params), - var(--wa-color-gray-95); - background-repeat: no-repeat; - box-shadow: - 0 0 0 1px var(--wa-color-gray-90), - var(--wa-shadow-m); - - &.resized { - aspect-ratio: var(--iframe-manual-aspect-ratio); - } - - /* User has not yet resized the viewport */ - &:not(.resized) ::slotted(iframe), - &:not(.resized) slot { - /* Will only be set if we have BOTH width and height */ - aspect-ratio: var(--aspect-ratio); - } - } - - slot { - display: block; - overflow: clip; - width: var(--width); - max-width: var(--available-width); - height: var(--iframe-manual-height, var(--height-auto)); - } - - ::slotted(iframe) { - display: block; - flex: auto; - scale: var(--zoom); - transform-origin: top left; - resize: var(--viewport-resize); - overflow: auto; - - /* The width and height specified here are only applied if the iframe is not manually resized */ - width: calc(var(--available-width) / var(--zoom)); - height: calc(var(--height-auto) / var(--zoom)); - - min-width: calc(var(--viewport-min-width, 10em) / var(--zoom)); - max-width: calc(var(--available-width) / var(--zoom)) !important; - min-height: calc(var(--viewport-min-height) / var(--zoom)); - - /* Divide with var(--zoom) to get lengths that stay constant regardless of zoom level */ - border: calc(1px / var(--zoom)) solid var(--wa-color-gray-90); - background: var(--viewport-background-color); - } - - [part~='controls'] { - display: flex; - align-items: center; - align-self: end; - gap: 0.3em; - margin-top: -0.2em; - font-size: var(--wa-font-size-xs); - padding-block-end: 0.25em; - padding-inline: 1em 0.2em; - white-space: nowrap; - - /* Until we can implement info that is not lying, we don’t show it when it's lying */ - .needs-internal-zoom & > * { - opacity: 0 !important; - pointer-events: none; - } - - .dimensions { - word-spacing: -0.15em; - margin-inline-end: 1em; - } - - wa-icon { - display: none; - vertical-align: -0.1em; - font-size: 85%; - color: var(--wa-color-gray-70); - } - - wa-icon-button { - &:not(:hover, :focus) { - opacity: 0.5; - } - - &::part(base) { - padding: 0; - } - } - - .zoom { - display: flex; - align-items: center; - gap: 0.3em; - font-weight: 600; - color: var(--wa-color-text-quiet); - opacity: 80%; - } - - [part~='zoom-in'], - [part~='zoom-in']::part(base) { - cursor: zoom-in; - } - - [part~='zoom-out'], - [part~='zoom-out']::part(base) { - cursor: zoom-out; - } - } -`; diff --git a/src/components/viewport-demo/viewport-demo.ts b/src/components/viewport-demo/viewport-demo.ts index eae940100..61da9b37f 100644 --- a/src/components/viewport-demo/viewport-demo.ts +++ b/src/components/viewport-demo/viewport-demo.ts @@ -6,7 +6,7 @@ import { html } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; -import styles from './viewport-demo.styles.js'; +import styles from './viewport-demo.css'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { CSSResultGroup } from 'lit';