beet_design 0.0.8

Design system and components for beet rsx
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

.bt-c-button {
	/* see bt-form.css for base definition */
	opacity: var(--bt-opacity);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	--bt-prev-transition: opacity var(--bt-transition);
	transition:
		opacity var(--bt-transition),
		transform var(--bt-transition);
}

a.bt-c-button {
	text-decoration: none;
	/* undo the margin applied by default to anchor tags */
	margin-left: unset;
	margin-right: unset;
}
a.bt-c-button:visited {
	color: var(--bt-color-text);
}

.bt-c-button .bt-c-icon {
	font-size: 1.8em;
	/* margin: 0 0.5em; */
}

.bt-c-button:hover {
	--bt-opacity: var(--bt-opacity-hover);
}

.bt-c-button:active {
	--bt-opacity: var(--bt-opacity-active);
}

.bt-c-button:disabled {
	cursor: inherit;
	--bt-opacity: var(--bt-opacity-disabled);
}

.bt-c-button--primary {
	--bt-color-text: var(--bt-color-on-primary);
	--bt-color-background: var(--bt-color-primary);
}

.bt-c-button--secondary {
	--bt-color-text: var(--bt-color-on-secondary);
	--bt-color-background: var(--bt-color-secondary);
}
.bt-c-button--tertiary {
	--bt-color-text: var(--bt-color-on-tertiary);
	--bt-color-background: var(--bt-color-tertiary);
}
.bt-c-button--error {
	--bt-color-text: var(--bt-color-on-error);
	--bt-color-background: var(--bt-color-error);
}

.bt-c-button--outlined {
	border: var(--bt-border-width) solid var(--bt-color-text);
	--bt-color-background: transparent;
}

.bt-c-button--text {
	--bt-color-background: transparent;
}

.bt-c-button--icon {
	width: 3em;
	position: relative;
}

.bt-c-button--icon > * {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.5em;
}

.bt-c-button svg {
	margin-right: 0.2em;
}

/* undo typography defaults */
.bt-c-button * {
	margin-top: inherit;
	margin-bottom: inherit;
	color: inherit;
	font-style: inherit;
	font-weight: inherit;
}