/
team.css
151 lines (135 loc) · 3.96 KB
/
team.css
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
/* Team page reset */
[data-team-page] {
[data-invite-team] {
/* reset styles because it is rendered within a card */
@apply block rounded-none border-0 bg-transparent p-0 shadow-none;
}
}
/* Purchase detail page reset */
#purchase-detail {
[data-invite-team] {
/* reset styles because it is rendered within a card */
@apply flex w-full flex-col rounded-none border-none bg-transparent p-0 py-3 shadow-none;
}
}
/* Shared form component */
[data-invite-team] {
@apply flex flex-col rounded-lg border border-gray-100 bg-transparent p-5 shadow-xl shadow-gray-400/5;
[data-title] {
@apply py-3;
/* 3 seats left */
strong {
@apply font-semibold;
}
}
[data-copy-invite-link-container] {
@apply w-full;
[data-copy-invite-link] {
/* optional */
}
}
[data-redeem] {
@apply mt-5 flex flex-col items-center gap-3 border-t border-gray-100 pt-5 sm:mt-8 sm:flex-row sm:justify-between;
[data-title] {
/* Or get access yourself */
@apply flex items-center gap-1 font-semibold;
}
[data-self-redeem-button] {
/* optional */
}
}
}
/* Card */
[data-team-card] {
@apply w-full rounded-lg border border-gray-200 p-5 text-body shadow-xl shadow-black/10;
}
[data-team-card] > [data-content] {
@apply pt-3;
}
[data-team-card] > [data-title] {
@apply flex items-center gap-3 text-xl font-semibold;
}
/* Self redeem button */
[data-self-redeem-button] {
@apply flex shrink-0 items-center gap-1 rounded-md px-5 py-2 text-lg font-semibold text-white transition hover:bg-indigo-700 ml-3 bg-indigo-600;
}
[data-self-redeem-button][disabled] {
@apply cursor-not-allowed opacity-30;
}
/* Buy more seats form */
[data-buy-more-seats-form] {
@apply pt-3;
#team-upgrade-pricing-inline {
@apply flex w-full items-center justify-between flex-col;
[data-seats-form] {
@apply inline-flex items-center gap-3 justify-center;
label {
@apply opacity-70;
}
input {
@apply rounded-md border border-gray-800 py-2 pl-3 font-mono font-bold text-body;
}
button {
@apply flex h-full items-center justify-center rounded bg-gray-800/60 px-3 py-2 font-mono sm:hidden;
}
}
[data-pricing-product] {
@apply flex items-center justify-center gap-5 mt-4;
[data-pricing-product-header] {
@apply flex items-center gap-5 flex-col w-full;
[data-price-container] {
@apply w-full flex justify-center items-center h-auto;
}
}
sup {
@apply mr-1 font-tt-demibold;
}
[data-price] {
@apply flex items-center space-x-2 font-tt-demibold;
}
[data-price-discounted] {
@apply flex flex-col items-center leading-none font-tt-regular;
}
[data-full-price] {
@apply line-through;
}
[data-percent-off] {
@apply text-base leading-none uppercase font-tt-demibold text-green-500;
}
button[type='submit'] {
@apply flex shrink-0 items-center gap-1 rounded-md px-5 py-2 text-lg font-semibold text-white transition hover:bg-indigo-700 ml-3 bg-indigo-600 min-w-[80px] justify-center;
}
}
}
}
/* Copy invite link form */
[data-copy-invite-link] {
label {
/* Invite share link */
@apply sr-only;
}
div {
@apply flex gap-3 pt-2;
}
input {
@apply w-full grow rounded-md border border-gray-200 bg-transparent text-body px-3 py-2 text-sm font-semibold shadow-inner;
}
input[disabled] {
@apply opacity-50;
}
[data-sr-button] {
@apply flex shrink-0 items-center gap-1 rounded-md px-5 py-2 text-lg font-semibold text-white transition hover:bg-indigo-700 ml-3 bg-indigo-600;
}
[data-sr-button][disabled] {
@apply cursor-not-allowed opacity-30;
}
}
/* Claimed seats */
[data-claimed-seats-team] {
[data-claimed-seat] {
@apply text-gray-300;
}
[data-claimed-seat=''] {
@apply inline-flex items-center gap-1.5 before:translate-y-[2px] before:content-[url("/assets/check.svg")];
}
}