138 lines
3.5 KiB
TypeScript
138 lines
3.5 KiB
TypeScript
import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
|
|
import { idpElementStyles } from './tokens.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'idp-mobile-frame': IdpMobileFrame;
|
|
}
|
|
}
|
|
|
|
@customElement('idp-mobile-frame')
|
|
export class IdpMobileFrame extends DeesElement {
|
|
public static demo = () => html`
|
|
<idp-mobile-frame>
|
|
<div style="height: 100%; background: #fff; padding: 72px 20px 20px; box-sizing: border-box;">Screen content</div>
|
|
</idp-mobile-frame>
|
|
`;
|
|
public static demoGroups = ['idp.global v3 device frames'];
|
|
|
|
@property({ type: String })
|
|
public accessor time = '9:41';
|
|
|
|
@property({ type: Boolean, reflect: true })
|
|
public accessor dark = false;
|
|
|
|
public static styles = [
|
|
...idpElementStyles,
|
|
css`
|
|
:host {
|
|
display: inline-block;
|
|
}
|
|
.device {
|
|
position: relative;
|
|
width: 402px;
|
|
height: 874px;
|
|
max-width: 100%;
|
|
border-radius: 48px;
|
|
overflow: hidden;
|
|
background: var(--idp-bg);
|
|
box-shadow: 0 40px 80px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.12);
|
|
}
|
|
.island {
|
|
position: absolute;
|
|
top: 11px;
|
|
left: 50%;
|
|
z-index: 50;
|
|
width: 126px;
|
|
height: 37px;
|
|
transform: translateX(-50%);
|
|
border-radius: 24px;
|
|
background: #000;
|
|
}
|
|
.status {
|
|
position: absolute;
|
|
inset: 0 0 auto;
|
|
z-index: 40;
|
|
height: 58px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 18px 28px 0;
|
|
box-sizing: border-box;
|
|
color: var(--idp-fg);
|
|
font-size: 15px;
|
|
font-weight: 650;
|
|
pointer-events: none;
|
|
}
|
|
.status-icons {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
.bar {
|
|
width: 4px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
}
|
|
.screen {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.home {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 60;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
padding-bottom: 8px;
|
|
pointer-events: none;
|
|
}
|
|
.home::before {
|
|
content: '';
|
|
width: 139px;
|
|
height: 5px;
|
|
border-radius: 100px;
|
|
background: color-mix(in srgb, var(--idp-fg), transparent 72%);
|
|
}
|
|
@media (max-width: 520px) {
|
|
:host {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.device {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 402 / 874;
|
|
border-radius: 0;
|
|
}
|
|
.island {
|
|
display: none;
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="device">
|
|
<div class="island"></div>
|
|
<div class="status">
|
|
<span>${this.time}</span>
|
|
<span class="status-icons" aria-hidden="true">
|
|
<span class="bar" style="height: 5px"></span>
|
|
<span class="bar" style="height: 8px"></span>
|
|
<span class="bar" style="height: 11px"></span>
|
|
<span style="width: 24px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px;"></span>
|
|
</span>
|
|
</div>
|
|
<div class="screen"><slot></slot></div>
|
|
<div class="home"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|