@fea-ui/styles 0.1.0-alpha.1 → 0.1.0-alpha.3
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 +2 -14
- package/package.json +1 -1
- package/src/components/accordion.css +27 -33
- package/src/components/alert-dialog.css +50 -0
- package/src/components/dialog.css +29 -17
- package/src/components/index.css +1 -0
package/README.md
CHANGED
|
@@ -1,15 +1,3 @@
|
|
|
1
|
-
#
|
|
1
|
+
# FeaUI Styles
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
```bash
|
|
6
|
-
bun install
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
To run:
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
bun run index.ts
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
This project was created using `bun init` in bun v1.3.4. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
|
|
3
|
+
This package contains the core styles and design tokens for the FeaUI component library. It provides a consistent look and feel across all components and can be easily integrated into your projects.
|
package/package.json
CHANGED
|
@@ -1,54 +1,48 @@
|
|
|
1
|
-
/** Base Styling */
|
|
2
1
|
.accordion {
|
|
3
|
-
|
|
4
|
-
@apply bg-accordion text-accordion-foreground;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.accordion__item {
|
|
8
|
-
@apply border-border border-b;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.accordion__header {
|
|
12
|
-
@apply m-0;
|
|
2
|
+
@apply bg-card text-card-foreground flex w-full max-w-md flex-col justify-center;
|
|
13
3
|
}
|
|
14
4
|
|
|
15
5
|
.accordion__trigger {
|
|
16
|
-
|
|
6
|
+
@apply flex w-full items-center justify-between border-b p-3;
|
|
17
7
|
|
|
18
|
-
|
|
8
|
+
@apply transition-colors motion-reduce:transition-none;
|
|
19
9
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
}
|
|
10
|
+
&:hover {
|
|
11
|
+
@apply bg-primary/10;
|
|
12
|
+
}
|
|
25
13
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
14
|
+
&:focus {
|
|
15
|
+
@apply outline-none;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.accordion__title {
|
|
20
|
+
@apply text-left font-medium;
|
|
29
21
|
}
|
|
30
22
|
|
|
31
23
|
.accordion__trigger-icon {
|
|
32
|
-
|
|
24
|
+
@apply text-muted-foreground size-5;
|
|
33
25
|
|
|
34
|
-
|
|
26
|
+
@apply transition-transform duration-300 motion-reduce:transition-none;
|
|
35
27
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
[data-panel-open] > & {
|
|
29
|
+
@apply rotate-180;
|
|
30
|
+
}
|
|
39
31
|
}
|
|
40
32
|
|
|
41
33
|
.accordion__panel {
|
|
42
|
-
|
|
34
|
+
height: var(--accordion-panel-height);
|
|
35
|
+
|
|
36
|
+
@apply overflow-hidden;
|
|
43
37
|
|
|
44
|
-
|
|
38
|
+
@apply transition-[height] motion-reduce:transition-none;
|
|
45
39
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
40
|
+
&[data-ending-style],
|
|
41
|
+
&[data-starting-style] {
|
|
42
|
+
@apply h-0;
|
|
43
|
+
}
|
|
50
44
|
}
|
|
51
45
|
|
|
52
46
|
.accordion__content {
|
|
53
|
-
|
|
47
|
+
@apply p-4;
|
|
54
48
|
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/** Base Styling */
|
|
2
|
+
.alert-dialog__backdrop {
|
|
3
|
+
@apply fixed inset-0 bg-black/50 opacity-20 backdrop-blur-sm;
|
|
4
|
+
|
|
5
|
+
@apply transition-opacity motion-reduce:transition-none;
|
|
6
|
+
|
|
7
|
+
&[data-starting-style],
|
|
8
|
+
&[data-ending-style] {
|
|
9
|
+
@apply opacity-0;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.alert-dialog__popup {
|
|
14
|
+
@apply bg-popover rounded border p-6 shadow;
|
|
15
|
+
|
|
16
|
+
@apply w-full max-w-lg;
|
|
17
|
+
|
|
18
|
+
@apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
|
|
19
|
+
|
|
20
|
+
@apply transition-all motion-reduce:transition-none;
|
|
21
|
+
|
|
22
|
+
&[data-starting-style],
|
|
23
|
+
&[data-ending-style] {
|
|
24
|
+
@apply scale-95 opacity-0;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.alert-dialog__title {
|
|
29
|
+
@apply text-lg font-semibold;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.alert-dialog__description {
|
|
33
|
+
@apply text-muted-foreground text-sm;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.alert-dialog__close {
|
|
37
|
+
@apply cursor-pointer;
|
|
38
|
+
|
|
39
|
+
@apply absolute top-0 right-0 m-2;
|
|
40
|
+
|
|
41
|
+
svg {
|
|
42
|
+
@apply text-muted-foreground size-5;
|
|
43
|
+
|
|
44
|
+
@apply transition-colors motion-reduce:transition-none;
|
|
45
|
+
|
|
46
|
+
&:hover {
|
|
47
|
+
@apply text-foreground;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -1,38 +1,50 @@
|
|
|
1
1
|
/** Base Styling */
|
|
2
2
|
.dialog__backdrop {
|
|
3
|
-
|
|
3
|
+
@apply fixed inset-0 bg-black/50 opacity-20 backdrop-blur-sm;
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
@apply transition-opacity motion-reduce:transition-none;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
&[data-starting-style],
|
|
8
|
+
&[data-ending-style] {
|
|
9
|
+
@apply opacity-0;
|
|
10
|
+
}
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.dialog__popup {
|
|
14
|
-
|
|
14
|
+
@apply bg-popover rounded border p-6 shadow;
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
@apply w-full max-w-lg;
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
@apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
@apply transition-all motion-reduce:transition-none;
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
&[data-starting-style],
|
|
23
|
+
&[data-ending-style] {
|
|
24
|
+
@apply scale-95 opacity-0;
|
|
25
|
+
}
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.dialog__title {
|
|
29
|
-
|
|
29
|
+
@apply text-lg font-semibold;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.dialog__description {
|
|
33
|
-
|
|
33
|
+
@apply text-muted-foreground text-sm;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.dialog__close {
|
|
37
|
-
|
|
37
|
+
@apply cursor-pointer;
|
|
38
|
+
|
|
39
|
+
@apply absolute top-0 right-0 m-2;
|
|
40
|
+
|
|
41
|
+
svg {
|
|
42
|
+
@apply text-muted-foreground size-5;
|
|
43
|
+
|
|
44
|
+
@apply transition-colors motion-reduce:transition-none;
|
|
45
|
+
|
|
46
|
+
&:hover {
|
|
47
|
+
@apply text-foreground;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
38
50
|
}
|
package/src/components/index.css
CHANGED