mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Convert viewport-demo and callout styles
This commit is contained in:
Lea Verou
@@ -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';
|
||||
|
||||
|
||||
154
src/components/viewport-demo/viewport-demo.css
Normal file
154
src/components/viewport-demo/viewport-demo.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -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';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user