c7c83d1d8b
* update prettier to v3.x * update prettify in @lion/nodejs-helpers to match updated prettier * remove redundant await for promise * remove `@types/prettier` as it's now included in `prettier` * format lit template snippets with `jsx`
50 lines
1.1 KiB
JavaScript
50 lines
1.1 KiB
JavaScript
import { css, html, LitElement } from 'lit';
|
|
|
|
export class LeaTab extends LitElement {
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
box-shadow: -4px 0 0 rgba(0, 0, 0, 0.2);
|
|
background: #ad1c1c;
|
|
background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
|
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
|
|
color: #fff;
|
|
float: left;
|
|
font:
|
|
bold 12px/35px 'Lucida sans',
|
|
Arial,
|
|
Helvetica;
|
|
height: 35px;
|
|
padding: 0 30px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
:host(:hover) {
|
|
background: #c93434;
|
|
background: linear-gradient(220deg, transparent 10px, #c93434 10px);
|
|
}
|
|
|
|
:host(:focus) {
|
|
border-radius: 4px;
|
|
box-shadow:
|
|
0 0 8px #9fcaea,
|
|
0 0 0 1px #559bd1;
|
|
|
|
/* outline: 0; */
|
|
}
|
|
|
|
:host([selected]) {
|
|
background: #fff;
|
|
background: linear-gradient(220deg, transparent 10px, #fff 10px);
|
|
text-shadow: none;
|
|
color: #333;
|
|
}
|
|
`;
|
|
}
|
|
|
|
render() {
|
|
return html`<slot></slot>`;
|
|
}
|
|
}
|
|
|
|
customElements.define('lea-tab', LeaTab);
|