-
Notifications
You must be signed in to change notification settings - Fork 3
/
interactive.css
53 lines (44 loc) 路 1.5 KB
/
interactive.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
.ui-btn {
transition-property: var(--transition);
transition-timing-function: var(--ease-in-out);
transition-duration: var(--duration);
&:where(.accent-main) {
--ui-btn-hover-bg-mix: var(--color-main-foreground);
}
&:where(.accent-body) {
--ui-btn-hover-bg-mix: var(--color-body-foreground);
}
&:where(.accent-light) {
--ui-btn-hover-bg-mix: var(--color-light-foreground);
}
&:where(.accent-dark) {
--ui-btn-hover-bg-mix: var(--color-dark-foreground);
}
&:is(:any-link, button, [role="button"], input) {
cursor: var(--cursor, pointer);
&:disabled {
opacity: var(--ui-btn-disabled-opacity);
cursor: not-allowed;
}
&:not(:disabled) {
&:hover {
@media (hover: hover) and (pointer: fine) {
--ui-btn-bg: var(--ui-btn-hover-bg, var(--color-accent));
--ui-btn-border-color: var(--ui-btn-hover-border-color, var(--color-accent));
--tw-bg-mix: var(--ui-btn-hover-bg-mix);
--tw-bg-opacity: var(--ui-btn-hover-bg-opacity);
}
}
&:focus {
--ui-btn-outline-offset: var(--ui-btn-focus-outline-offset);
--tw-outline-opacity: var(--ui-btn-focus-outline-opacity);
}
&:active, &:checked, &.active {
--ui-btn-bg: var(--ui-btn-active-bg, var(--color-accent));
--ui-btn-border-color: var(--ui-btn-active-border-color, var(--color-accent));
--tw-bg-mix: var(--ui-btn-active-bg-mix);
--tw-bg-opacity: var(--ui-btn-active-bg-opacity);
}
}
}
}