openprotest.github.io/tabs.css at main · openprotest/openprotest.github.io · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
.tabs-box {
	position: absolute;
	width: 175px;
	left: 25px;
	top: 16px;
	bottom: 16px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 1;
	transition: .2s;

	scrollbar-width: none;
}

.tabs-box::-webkit-scrollbar {
	display: none !important;
}

.tabs-box > button {
	all: unset;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	min-height: 32px;
	margin: 2px 0 2px 0;
	padding: 4px;
	color: var(--clr-dark);
	background: linear-gradient(90deg, rgba(16,16,16,.15) 90%, rgba(16,16,16,.25) 100%);
	background-color: rgb(160,160,160);
	border-radius: 8px 0 0 8px;
	transform-origin: 100%;
	transform: scaleX(.98);
	transition: .2s;
}

.tabs-box > .v-tab-selected {
	background: linear-gradient(90deg, transparent 80%, var(--clr-pane) 100%);
	background-color: var(--clr-pane);
	transform: scaleX(1);
}

.tabs-box > button:not(:disabled):hover {
	background-color: rgb(172,172,172) !important;
}

.tabs-box > button:not(:disabled):active {
	background-color: rgb(208,208,208) !important;
}

.tabs-box > button:focus {
	animation: tabs-outline .3s ease-in;
	box-shadow: var(--clr-accent) 0px -2px 0px 0px inset, var(--clr-accent) 2px 0px 0px 0px inset, var(--clr-accent) 0px 2px 0px 0px inset;
}

.tabs-box > button > div:nth-child(1) { /*icon*/
	position: absolute;
	left: 4px;
	top: calc(50% - 16px);
	width: 32px;
	height: 32px;
	background-size: contain;
}

.tabs-box > button > div:nth-child(2) { /*text*/
	position: absolute;
	left: 44px;
	right: 4px;
	top: 10px;
	font-weight: 600;
	white-space: nowrap;
}

.tabs-box > button > div:nth-child(n+2) {
	transition: .2s;
}

.tabs-panel {
	position: absolute;
	left: 200px;
	right: 8px;
	top: 8px;
	bottom: 8px;
	z-index: 2;
	background-color: var(--clr-pane);
	color: var(--clr-dark);
	border-radius: 4px;
	padding: 4px;
	overflow: hidden;
	transition: .2s;
}

.tabs-content {
	container-name: tabs-container;
	container-type: inline-size;
}

@container tabs-container (max-width: 720px) {
	.tabs-box {
		width: 45px;
	}
	.tabs-box > button > div:nth-child(n+2) {
		visibility: hidden;
		opacity: 0;
	}
	.tabs-panel {
		left: 70px;
	}
}

@keyframes tabs-outline {
	0%   { box-shadow: var(--clr-accent) 0px -4px 0px 0px inset; }
	30%  { box-shadow: var(--clr-accent) 0px -5px 0px 0px inset, var(--clr-accent) 0px 0px 0px 0px inset, var(--clr-accent) 0px 0px 0px 0px inset; }
	65%  { box-shadow: var(--clr-accent) 0px -3px 0px 0px inset, var(--clr-accent) 2px 0px 0px 0px inset, var(--clr-accent) 0px 0px 0px 0px inset; }
	100% { box-shadow: var(--clr-accent) 0px -2px 0px 0px inset, var(--clr-accent) 2px 0px 0px 0px inset, var(--clr-accent) 0px 2px 0px 0px inset; }
}