frutjam 0.7.0-beta.0 → 0.7.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/button.css +62 -11
package/package.json
CHANGED
|
@@ -1,51 +1,101 @@
|
|
|
1
1
|
@import "../theme/skins/base.css";
|
|
2
2
|
@import "../theme/animation/wiggle.css";
|
|
3
3
|
|
|
4
|
+
@utility btn-size {
|
|
5
|
+
@layer components {
|
|
6
|
+
padding-inline: var(--btn-inline);
|
|
7
|
+
padding-block: var(--btn-block);
|
|
8
|
+
font-size: var(--btn-text-size);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
4
12
|
@utility btn-xs {
|
|
5
13
|
@layer components {
|
|
6
|
-
@apply
|
|
14
|
+
@apply btn-size;
|
|
15
|
+
}
|
|
16
|
+
@layer theme {
|
|
17
|
+
--btn-inline: 0.875rem;
|
|
18
|
+
--btn-block: 0.375rem;
|
|
19
|
+
--btn-text-size: 0.75rem;
|
|
20
|
+
/* @apply px-3.5 py-1.5 text-xs; */
|
|
7
21
|
}
|
|
8
22
|
}
|
|
9
23
|
|
|
10
24
|
@utility btn-sm {
|
|
11
25
|
@layer components {
|
|
12
|
-
@apply
|
|
26
|
+
@apply btn-size;
|
|
27
|
+
}
|
|
28
|
+
@layer theme {
|
|
29
|
+
--btn-inline: 1rem;
|
|
30
|
+
--btn-block: 0.5rem;
|
|
31
|
+
--btn-text-size: 0.875rem;
|
|
32
|
+
/* @apply px-4 py-2 text-sm; */
|
|
13
33
|
}
|
|
14
34
|
}
|
|
15
35
|
|
|
16
36
|
@utility btn-md {
|
|
17
37
|
@layer components {
|
|
18
|
-
@apply
|
|
38
|
+
@apply btn-size;
|
|
39
|
+
}
|
|
40
|
+
@layer theme {
|
|
41
|
+
--btn-inline: 1.125rem;
|
|
42
|
+
--btn-block: 0.625rem;
|
|
43
|
+
--btn-text-size: 1rem;
|
|
44
|
+
/* @apply px-4.5 py-2.5 text-base; */
|
|
19
45
|
}
|
|
20
46
|
}
|
|
21
47
|
|
|
22
48
|
@utility btn-lg {
|
|
23
49
|
@layer components {
|
|
24
|
-
@apply
|
|
50
|
+
@apply btn-size;
|
|
51
|
+
}
|
|
52
|
+
@layer theme {
|
|
53
|
+
--btn-inline: 1.25rem;
|
|
54
|
+
--btn-block: 0.75rem;
|
|
55
|
+
--btn-text-size: 1rem;
|
|
56
|
+
/* @apply px-5 py-3 text-base; */
|
|
25
57
|
}
|
|
26
58
|
}
|
|
27
59
|
|
|
28
60
|
@utility btn-xl {
|
|
29
61
|
@layer components {
|
|
30
|
-
@apply
|
|
62
|
+
@apply btn-size;
|
|
63
|
+
}
|
|
64
|
+
@layer theme {
|
|
65
|
+
--btn-inline: 1.375rem;
|
|
66
|
+
--btn-block: 0.875rem;
|
|
67
|
+
--btn-text-size: 1rem;
|
|
68
|
+
/* @apply px-5.5 py-3.5 text-base; */
|
|
31
69
|
}
|
|
32
70
|
}
|
|
33
71
|
|
|
34
72
|
@utility btn-2xl {
|
|
35
73
|
@layer components {
|
|
36
|
-
@apply
|
|
74
|
+
@apply btn-size;
|
|
75
|
+
}
|
|
76
|
+
@layer theme {
|
|
77
|
+
--btn-inline: 1.5rem;
|
|
78
|
+
--btn-block: 1rem;
|
|
79
|
+
--btn-text-size: 1.125rem;
|
|
80
|
+
/* @apply px-6 py-4 text-lg; */
|
|
37
81
|
}
|
|
38
82
|
}
|
|
39
83
|
|
|
40
|
-
@utility btn-
|
|
84
|
+
@utility btn-square {
|
|
41
85
|
@layer components {
|
|
42
|
-
@apply
|
|
86
|
+
@apply btn-md;
|
|
87
|
+
padding-inline: var(--btn-inline);
|
|
88
|
+
padding-block: var(--btn-inline);
|
|
89
|
+
/* @apply size-auto aspect-square; */
|
|
43
90
|
}
|
|
44
91
|
}
|
|
45
92
|
|
|
46
|
-
@utility btn-
|
|
93
|
+
@utility btn-circle {
|
|
47
94
|
@layer components {
|
|
48
|
-
@apply
|
|
95
|
+
@apply btn-md rounded-full;
|
|
96
|
+
padding-inline: var(--btn-inline);
|
|
97
|
+
padding-block: var(--btn-inline);
|
|
98
|
+
/* @apply rounded-full size-auto aspect-square; */
|
|
49
99
|
}
|
|
50
100
|
}
|
|
51
101
|
|
|
@@ -67,7 +117,6 @@
|
|
|
67
117
|
justify-center gap-1.5 text-center align-middle font-medium overflow-hidden
|
|
68
118
|
text-xs transition duration-350 ease-in-out leading-normal cursor-pointer box-border;
|
|
69
119
|
|
|
70
|
-
color: var(--btn-50);
|
|
71
120
|
border-radius: var(--radius-btn);
|
|
72
121
|
|
|
73
122
|
/* for default btn */
|
|
@@ -76,6 +125,7 @@
|
|
|
76
125
|
var(--btn-100),
|
|
77
126
|
var(--btn-800)
|
|
78
127
|
);
|
|
128
|
+
color: var(--btn-900);
|
|
79
129
|
}
|
|
80
130
|
|
|
81
131
|
/* for all btn exclude default btn */
|
|
@@ -84,6 +134,7 @@
|
|
|
84
134
|
var(--btn-600),
|
|
85
135
|
var(--btn-800)
|
|
86
136
|
);
|
|
137
|
+
color: var(--btn-50);
|
|
87
138
|
}
|
|
88
139
|
|
|
89
140
|
&:is(:disabled, [disabled], .btn-disabled) {
|