dioxus-tw-components 0.2.11

Components made for Dioxus
Documentation 
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

.placeholder {
	background-color: color-mix(in oklab, var(--foreground) 20%, transparent);
	border-radius: var(--radius);
	height: 6rem;
	width: 6rem;
}

.placeholder[data-style="primary"] {
	background-color: color-mix(in oklab, var(--primary) 20%, transparent);
}

.placeholder[data-style="secondary"] {
	background-color: color-mix(in oklab, var(--secondary) 20%, transparent);
}

.placeholder[data-style="destructive"] {
	background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
}

.placeholder[data-style="success"] {
	background-color: color-mix(in oklab, var(--success) 20%, transparent);
}

.placeholder[data-style="accent"] {
	background-color: color-mix(in oklab, var(--accent) 20%, transparent);
}

.placeholder[data-style="muted"] {
	background-color: color-mix(in oklab, var(--muted) 20%, transparent);
}

.placeholder[data-animation="light"] {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.placeholder[data-animation="full"] {
	position: relative;
	overflow: hidden;
}

.placeholder[data-animation="full"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	animation: shimmer 2s infinite;
}

@keyframes pulse {
	50% {
		opacity: 0.5;
	}
}

@keyframes shimmer {
	100% {
		transform: translateX(100%);
	}
}