78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
import {css, html, LitElement} from 'lit';
|
|
import {customElement, property} from 'lit/decorators.js';
|
|
|
|
@customElement('ns-pyramid-sprite')
|
|
export class PyramidSprite extends LitElement {
|
|
@property({type: css, attribute: 'color'}) color;
|
|
|
|
@property({type: css, attribute: 'size'}) size;
|
|
|
|
constructor() {
|
|
super();
|
|
this.color ??= css`red`;
|
|
this.size ??= css`30px`;
|
|
}
|
|
|
|
static styles = css`
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:host {
|
|
display: block;
|
|
min-height: 1.5em;
|
|
min-width: 1.5em;
|
|
width: 1em;
|
|
perspective: 1250px;
|
|
}
|
|
.pyramid {
|
|
transform-style: preserve-3d;
|
|
transform: rotateX(-15deg) rotateY(-15deg);
|
|
position: absolute;
|
|
left: 0.25em;
|
|
bottom: 0.25em;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
.pyramid > div {
|
|
background-color: var(--color);
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
clip-path: polygon(50% 0, 100% 100%, 0 100%);
|
|
box-shadow: 0 0 0.25em #000 inset;
|
|
opacity: 0.7;
|
|
}
|
|
.pyramid > div:nth-child(1) {
|
|
transform: rotateX(30deg);
|
|
}
|
|
.pyramid > div:nth-child(2) {
|
|
transform: translate3d(0.25em, 0, -0.25em) rotateY(90deg) rotateX(30deg);
|
|
}
|
|
.pyramid > div:nth-child(3) {
|
|
transform: translate3d(0, 0, -0.5em) rotateY(180deg) rotateX(30deg);
|
|
}
|
|
.pyramid > div:nth-child(4) {
|
|
transform: translate3d(-0.25em, 0, -0.25em) rotateY(270deg) rotateX(30deg);
|
|
}
|
|
`;
|
|
|
|
render() {
|
|
return html`
|
|
<style>
|
|
:host {
|
|
font-size: ${this.size};
|
|
--color: ${this.color};
|
|
}
|
|
</style>
|
|
<div class="pyramid">
|
|
<div class="face"></div>
|
|
<div class="face"></div>
|
|
<div class="face"></div>
|
|
<div class="face"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|