css ttl
This commit is contained in:
“chrisshank”
parent
29a7bef95b
commit
3607ce237a
|
|
@ -1,16 +1,16 @@
|
|||
// Ported from https://github.com/bitu467/record-player
|
||||
import { css } from '../../src/common/tags';
|
||||
|
||||
const styles = new CSSStyleSheet();
|
||||
styles.replaceSync(`
|
||||
::slotted(*) {
|
||||
const styles = css`
|
||||
::slotted(*) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:host {
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.player {
|
||||
.player {
|
||||
background-color: #d52831;
|
||||
width: 330px;
|
||||
height: 190px;
|
||||
|
|
@ -21,9 +21,9 @@ styles.replaceSync(`
|
|||
border-radius: 10px;
|
||||
box-shadow: 0 8px 0 0 #be2728;
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.record {
|
||||
.record {
|
||||
width: 175px;
|
||||
height: 175px;
|
||||
background-color: #181312;
|
||||
|
|
@ -36,37 +36,37 @@ styles.replaceSync(`
|
|||
align-items: center;
|
||||
animation: spin 3s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.record::before,
|
||||
.record::after {
|
||||
.record::before,
|
||||
.record::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #2c2424;
|
||||
border-bottom-color: #2c2424;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.record::before {
|
||||
.record::before {
|
||||
width: 135px;
|
||||
height: 135px;
|
||||
}
|
||||
}
|
||||
|
||||
.record:after {
|
||||
.record:after {
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background-color: #181312;
|
||||
border: 20px solid #ff8e00;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.tone-arm {
|
||||
.tone-arm {
|
||||
height: 90px;
|
||||
width: 6px;
|
||||
background-color: #ffffff;
|
||||
|
|
@ -78,9 +78,9 @@ styles.replaceSync(`
|
|||
--move-time: 3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
.control {
|
||||
background-color: #181312;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
|
|
@ -89,9 +89,9 @@ styles.replaceSync(`
|
|||
position: absolute;
|
||||
top: -16px;
|
||||
left: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
.tone-arm::before {
|
||||
.tone-arm::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
|
|
@ -100,9 +100,9 @@ styles.replaceSync(`
|
|||
transform: rotate(30deg);
|
||||
bottom: -36px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tone-arm::after {
|
||||
.tone-arm::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 0px;
|
||||
|
|
@ -113,9 +113,9 @@ styles.replaceSync(`
|
|||
top: 108px;
|
||||
right: 12.5px;
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
.btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-color: #ed5650;
|
||||
|
|
@ -127,9 +127,9 @@ styles.replaceSync(`
|
|||
border: 3.5px solid rgb(190, 39, 42);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
transform: rotate(-90deg);
|
||||
|
|
@ -142,29 +142,27 @@ styles.replaceSync(`
|
|||
outline: none;
|
||||
border-radius: 3px;
|
||||
border: 6px solid #ed5650;
|
||||
}
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:host(:state(playing)) .tone-arm {
|
||||
animation:
|
||||
ready-arm var(--move-time),
|
||||
move-arm var(--duration) var(--move-time),
|
||||
:host(:state(playing)) .tone-arm {
|
||||
animation: ready-arm var(--move-time), move-arm var(--duration) var(--move-time),
|
||||
reset-arm var(--move-time) calc(var(--duration) + var(--move-time));
|
||||
}
|
||||
}
|
||||
|
||||
:host(:state(playing)) .record {
|
||||
:host(:state(playing)) .record {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ready-arm {
|
||||
@keyframes ready-arm {
|
||||
20% {
|
||||
transform: rotateX(20deg);
|
||||
}
|
||||
|
|
@ -177,9 +175,9 @@ styles.replaceSync(`
|
|||
100% {
|
||||
rotate: 14deg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move-arm {
|
||||
@keyframes move-arm {
|
||||
from {
|
||||
rotate: 14deg;
|
||||
}
|
||||
|
|
@ -187,9 +185,9 @@ styles.replaceSync(`
|
|||
to {
|
||||
rotate: 42deg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes reset-arm {
|
||||
@keyframes reset-arm {
|
||||
0% {
|
||||
rotate: 42deg;
|
||||
}
|
||||
|
|
@ -202,9 +200,9 @@ styles.replaceSync(`
|
|||
80% {
|
||||
transform: rotateX(20deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
@keyframes spin {
|
||||
from {
|
||||
rotate: 0deg;
|
||||
}
|
||||
|
|
@ -212,8 +210,8 @@ styles.replaceSync(`
|
|||
to {
|
||||
rotate: 360deg;
|
||||
}
|
||||
}
|
||||
`);
|
||||
}
|
||||
`;
|
||||
|
||||
export class RecordPlayer extends HTMLElement {
|
||||
static tagName = 'record-player';
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@ export const vert = String.raw;
|
|||
|
||||
export const frag = String.raw;
|
||||
|
||||
export const css = String.raw;
|
||||
|
||||
export const html = String.raw;
|
||||
|
||||
export function css(strings: TemplateStringsArray, ...values: any[]) {
|
||||
const styles = new CSSStyleSheet();
|
||||
styles.replaceSync(String.raw(strings, ...values));
|
||||
return styles;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@ import { FolkRope } from './folk-rope.ts';
|
|||
import * as parser from '@babel/parser';
|
||||
import type { Node } from '@babel/types';
|
||||
|
||||
const styles = new CSSStyleSheet();
|
||||
styles.replaceSync(css`
|
||||
const styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -27,7 +26,7 @@ styles.replaceSync(css`
|
|||
translate: -50% -50%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export class FolkEventPropagator extends FolkRope {
|
||||
static override tagName = 'folk-event-propagator';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { getStroke, StrokeOptions } from 'perfect-freehand';
|
||||
import { css } from './common/tags';
|
||||
|
||||
export type Point = [x: number, y: number, pressure: number];
|
||||
|
||||
|
|
@ -6,9 +7,9 @@ export type Stroke = number[][];
|
|||
|
||||
// TODO: look into any-pointer media queries to tell if the user has a mouse or touch screen
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer
|
||||
const styles = new CSSStyleSheet();
|
||||
styles.replaceSync(`
|
||||
:host, svg {
|
||||
const styles = css`
|
||||
:host,
|
||||
svg {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -21,7 +22,7 @@ styles.replaceSync(`
|
|||
inset: 0 0 0 0;
|
||||
cursor: var(--tracing-cursor, crosshair);
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@ import { LatLng, LatLngExpression, LeafletEvent, map, Map, tileLayer } from 'lea
|
|||
|
||||
// @ts-ignore
|
||||
// Vite specific import :(
|
||||
import css from 'leaflet/dist/leaflet.css?inline';
|
||||
const styles = new CSSStyleSheet();
|
||||
styles.replaceSync(`${css}
|
||||
import leafletCSS from 'leaflet/dist/leaflet.css?inline';
|
||||
import { css } from './common/tags';
|
||||
const styles = css`
|
||||
${leafletCSS}
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -13,7 +14,7 @@ styles.replaceSync(`${css}
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export class RecenterEvent extends Event {
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -73,8 +73,7 @@ export class TransformEvent extends Event {
|
|||
|
||||
export type Dimension = number | 'auto';
|
||||
|
||||
const styles = new CSSStyleSheet();
|
||||
styles.replaceSync(css`
|
||||
const styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -209,7 +208,7 @@ styles.replaceSync(css`
|
|||
opacity: 0;
|
||||
cursor: default;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
|
@ -229,7 +228,7 @@ export class FolkShape extends HTMLElement {
|
|||
#shadow = this.attachShadow({ mode: 'open' });
|
||||
#internals = this.attachInternals();
|
||||
|
||||
#dynamicStyles = new CSSStyleSheet();
|
||||
#dynamicStyles = css``;
|
||||
|
||||
#type = (this.getAttribute('type') || 'rectangle') as Shape;
|
||||
get type(): Shape {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
const styles = new CSSStyleSheet();
|
||||
import { css } from './common/tags';
|
||||
|
||||
// hardcoded column and row numbers
|
||||
styles.replaceSync(`
|
||||
:host {
|
||||
const styles = css`
|
||||
:host {
|
||||
--column-number: 10;
|
||||
--row-number: 10;
|
||||
--cell-height: 1.75rem;
|
||||
|
|
@ -18,16 +19,16 @@ styles.replaceSync(`
|
|||
scroll-snap-type: both mandatory;
|
||||
scroll-padding-top: var(--cell-height);
|
||||
scroll-padding-left: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
textarea {
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
grid-column: var(--text-column, 0);
|
||||
grid-row: var(--text-row, 0);
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
|
||||
s-columns {
|
||||
s-columns {
|
||||
box-shadow: 0px 3px 5px 0px rgba(173, 168, 168, 0.6);
|
||||
display: grid;
|
||||
grid-column: 2 / -1;
|
||||
|
|
@ -37,9 +38,9 @@ s-columns {
|
|||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
s-rows {
|
||||
s-rows {
|
||||
box-shadow: 3px 0px 5px 0px rgba(173, 168, 168, 0.4);
|
||||
display: grid;
|
||||
grid-column: 1;
|
||||
|
|
@ -53,9 +54,9 @@ s-rows {
|
|||
s-header {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
s-header {
|
||||
s-header {
|
||||
background-color: #f8f9fa;
|
||||
display: flex;
|
||||
padding: 0.125rem 0.5rem;
|
||||
|
|
@ -75,9 +76,9 @@ s-header {
|
|||
background-color: #d3e2fd;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
s-body {
|
||||
s-body {
|
||||
display: grid;
|
||||
grid-column: 2 / -1;
|
||||
grid-row: 2 / -1;
|
||||
|
|
@ -85,12 +86,14 @@ s-body {
|
|||
grid-template-rows: subgrid;
|
||||
}
|
||||
|
||||
s-columns, s-rows, s-body {
|
||||
s-columns,
|
||||
s-rows,
|
||||
s-body {
|
||||
background-color: var(--border-color);
|
||||
gap: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(folk-cell) {
|
||||
::slotted(folk-cell) {
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
background-color: rgb(255, 255, 255);
|
||||
|
|
@ -99,17 +102,17 @@ s-columns, s-rows, s-body {
|
|||
justify-content: start;
|
||||
scroll-snap-align: start;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(folk-cell[type='number']) {
|
||||
::slotted(folk-cell[type='number']) {
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(folk-cell:focus) {
|
||||
::slotted(folk-cell:focus) {
|
||||
outline: 2px solid #1b73e8;
|
||||
z-index: 4;
|
||||
}
|
||||
`);
|
||||
}
|
||||
`;
|
||||
|
||||
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { FolkEventPropagator } from './folk-event-propagator.ts';
|
||||
import { css } from './common/tags.ts';
|
||||
|
||||
const styles = new CSSStyleSheet();
|
||||
styles.replaceSync(css`
|
||||
const styles = css`
|
||||
:host {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
|
|
@ -27,7 +26,7 @@ styles.replaceSync(css`
|
|||
button.active {
|
||||
background: #eee;
|
||||
}
|
||||
`);
|
||||
`;
|
||||
|
||||
export class FolkToolbar extends HTMLElement {
|
||||
static tagName = 'folk-toolbar';
|
||||
|
|
|
|||
Loading…
Reference in New Issue