lit-ct-components/src/ct-tab.ts at master · Conectate/lit-ct-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { html } from "lit";

import { CtLit, customElement, property } from "./ct-lit.js";
/**
 * # `ct-tab`
 *
 * @element ct-tab
 */
@customElement("ct-tab")
export class CtTab extends CtLit {
	@property({ type: Boolean, reflect: true }) selected = false;

	render() {
		return html`
			<style>
				:host {
					display: flex;
					position: relative;
					text-decoration: none;
					color: inherit;
					flex: 25;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					transition: all 250ms;
					cursor: pointer;
					padding: 8px;
					box-sizing: border-box;
					height: 52px;
				}

				:host([selected]):after {
					border-top-width: 3px;
					border-top-style: solid;
					-webkit-border-radius: 0.4rem 0.4rem 0 0;
					border-color: var(--ct-tabs-border-color, var(--color-primary, #0e92c1));
					border-radius: 0.4rem 0.4rem 0 0;
					bottom: 0;
					content: "";
					height: 0;
					left: 16px;
					position: absolute;
					right: 16px;
				}
				:host([selected]) {
					font-weight: bold;
					/* flex: 30; */
					color: var(--ct-tabs-border-color, var(--color-primary, #0e92c1));
				}
				@media (max-width: 1001px) {
					:host {
						height: 41px;
						font-size: 0.92em;
					}
				}
			</style>
			<slot></slot>
		`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		"ct-tab": CtTab;
	}
}