@kadoui/tailwindcss 1.0.0 → 1.2.0
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/README.md +1347 -80
- package/package.json +1 -1
- package/src/styles/alert.css +0 -2
- package/src/styles/badge.css +0 -2
- package/src/styles/base.css +50 -39
- package/src/styles/button.css +0 -2
- package/src/styles/card.css +0 -2
- package/src/styles/components/modal.css +16 -4
- package/src/styles/components/select-box.css +1 -1
- package/src/styles/input.css +0 -2
- package/src/styles/kbd.css +0 -2
package/package.json
CHANGED
package/src/styles/alert.css
CHANGED
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
@apply flex items-center bg-palette/10 text-palette border border-palette;
|
|
3
3
|
|
|
4
4
|
min-height: var(--element-h);
|
|
5
|
-
font-size: var(--element-text);
|
|
6
|
-
line-height: var(--element-line);
|
|
7
5
|
padding: var(--element-spacing);
|
|
8
6
|
gap: calc(var(--element-spacing));
|
|
9
7
|
border-radius: var(--element-rounded);
|
package/src/styles/badge.css
CHANGED
package/src/styles/base.css
CHANGED
|
@@ -1,41 +1,3 @@
|
|
|
1
|
-
/* Base styles */
|
|
2
|
-
|
|
3
|
-
@layer base {
|
|
4
|
-
html {
|
|
5
|
-
@apply scroll-smooth;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
body {
|
|
9
|
-
@apply bg-background text-foreground;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
* {
|
|
13
|
-
@apply select-none;
|
|
14
|
-
|
|
15
|
-
scrollbar-width: thin;
|
|
16
|
-
scrollbar-color: var(--color-foreground) transparent;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
a,
|
|
20
|
-
span,
|
|
21
|
-
label {
|
|
22
|
-
@apply inline-block;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
button {
|
|
26
|
-
@apply cursor-pointer;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
input:focus,
|
|
30
|
-
textarea:focus {
|
|
31
|
-
@apply outline-none;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
textarea {
|
|
35
|
-
@apply resize-none;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
1
|
/* Dark mode */
|
|
40
2
|
|
|
41
3
|
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
|
@@ -124,6 +86,47 @@
|
|
|
124
86
|
--element-rounded: var(--element-xl-rounded);
|
|
125
87
|
}
|
|
126
88
|
|
|
89
|
+
/* Base styles */
|
|
90
|
+
|
|
91
|
+
@layer base {
|
|
92
|
+
html {
|
|
93
|
+
@apply scroll-smooth;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
body {
|
|
97
|
+
@apply bg-background text-foreground;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
* {
|
|
101
|
+
@apply select-none;
|
|
102
|
+
|
|
103
|
+
scrollbar-width: thin;
|
|
104
|
+
scrollbar-color: var(--color-foreground) transparent;
|
|
105
|
+
|
|
106
|
+
font-size: var(--element-text);
|
|
107
|
+
line-height: var(--element-line);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
a,
|
|
111
|
+
span,
|
|
112
|
+
label {
|
|
113
|
+
@apply inline-block;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
button {
|
|
117
|
+
@apply cursor-pointer;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
input:focus,
|
|
121
|
+
textarea:focus {
|
|
122
|
+
@apply outline-none;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
textarea {
|
|
126
|
+
@apply resize-y;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
127
130
|
/* Use element sizes */
|
|
128
131
|
|
|
129
132
|
@utility element-square-size {
|
|
@@ -134,7 +137,7 @@
|
|
|
134
137
|
min-width: var(--element-w);
|
|
135
138
|
}
|
|
136
139
|
|
|
137
|
-
@utility element-full
|
|
140
|
+
@utility element-w-full {
|
|
138
141
|
--element-w: 100%;
|
|
139
142
|
}
|
|
140
143
|
|
|
@@ -145,6 +148,10 @@
|
|
|
145
148
|
min-height: calc(var(--element-h) / 2);
|
|
146
149
|
}
|
|
147
150
|
|
|
151
|
+
@utility element-rounded-full {
|
|
152
|
+
--element-rounded: calc(infinity * 1px);
|
|
153
|
+
}
|
|
154
|
+
|
|
148
155
|
/* Utilities */
|
|
149
156
|
|
|
150
157
|
@utility no-scrollbar {
|
|
@@ -155,6 +162,10 @@
|
|
|
155
162
|
@apply w-max max-w-full;
|
|
156
163
|
}
|
|
157
164
|
|
|
165
|
+
@utility h-fix {
|
|
166
|
+
@apply h-max max-h-full;
|
|
167
|
+
}
|
|
168
|
+
|
|
158
169
|
@utility link {
|
|
159
170
|
@apply underline decoration-transparent decoration-0 hover:decoration-palette focus-visible:decoration-palette;
|
|
160
171
|
}
|
package/src/styles/button.css
CHANGED
package/src/styles/card.css
CHANGED
|
@@ -1,15 +1,27 @@
|
|
|
1
1
|
@utility modal-portal {
|
|
2
|
-
@apply fixed inset-0 z-50
|
|
2
|
+
@apply fixed inset-0 z-50 p-(--element-spacing) flex bg-foreground/50;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
@utility modal-body {
|
|
6
|
-
@apply w-
|
|
6
|
+
@apply w-fix h-fix flex flex-col;
|
|
7
|
+
|
|
8
|
+
&:has(.modal-header) .modal-content {
|
|
9
|
+
@apply rounded-t-none;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&:has(.modal-footer) .modal-content {
|
|
13
|
+
@apply rounded-b-none;
|
|
14
|
+
}
|
|
7
15
|
}
|
|
8
16
|
|
|
9
17
|
@utility modal-header {
|
|
10
|
-
@apply
|
|
18
|
+
@apply min-h-(--element-h) flex items-center p-(--element-spacing) gap-(--element-spacing) bg-background rounded-t-(--element-rounded) border-b border-background-thin sticky top-0 shrink-0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@utility modal-footer {
|
|
22
|
+
@apply min-h-(--element-h) flex items-center p-(--element-spacing) gap-(--element-spacing) bg-background rounded-b-(--element-rounded) border-t border-background-thin sticky bottom-0 shrink-0;
|
|
11
23
|
}
|
|
12
24
|
|
|
13
25
|
@utility modal-content {
|
|
14
|
-
@apply w-full
|
|
26
|
+
@apply w-full p-(--element-spacing) bg-background rounded-(--element-rounded) overflow-y-auto;
|
|
15
27
|
}
|
package/src/styles/input.css
CHANGED