45 lines
1.1 KiB
JavaScript
45 lines
1.1 KiB
JavaScript
import { css, html, LitElement } from '@lion/core';
|
|
|
|
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);
|