frutjam 0.5.0-alpha.0 → 0.5.0-alpha.1
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 +5 -4
- package/src/components/divider.css +40 -0
- package/src/components/dropdown.css +108 -0
- package/src/main.css +2 -0
- package/src/themes/styles/light.css +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "frutjam",
|
|
3
|
-
"version": "0.5.0-alpha.
|
|
3
|
+
"version": "0.5.0-alpha.1",
|
|
4
4
|
"description": "A utility-first CSS framework UI Library",
|
|
5
5
|
"main": "./dist/frutjam.css",
|
|
6
6
|
"browser": "dist/frutjam.css",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"url": "https://github.com/nezanuha/frutjam/issues"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@tailwindcss/postcss": "^4.0.
|
|
41
|
-
"tailwindcss": "^4.0.
|
|
40
|
+
"@tailwindcss/postcss": "^4.0.17",
|
|
41
|
+
"tailwindcss": "^4.0.17"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"css-loader": "^7.1.2",
|
|
@@ -49,8 +49,9 @@
|
|
|
49
49
|
"postcss-loader": "^8.1.1",
|
|
50
50
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
51
51
|
"string-replace-loader": "^3.1.0",
|
|
52
|
+
"style-loader": "^4.0.0",
|
|
52
53
|
"webpack": "^5.98.0",
|
|
53
54
|
"webpack-cli": "^6.0.1",
|
|
54
|
-
"webpack-dev-server": "^5.2.
|
|
55
|
+
"webpack-dev-server": "^5.2.1"
|
|
55
56
|
}
|
|
56
57
|
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
@utility divider-* {
|
|
2
|
+
@layer components {
|
|
3
|
+
@apply flex flex-row items-center self-stretch whitespace-nowrap h-4;
|
|
4
|
+
|
|
5
|
+
&::before,
|
|
6
|
+
&::after {
|
|
7
|
+
@apply content-[''] bg-[--value(--color-*)] h-0.5 w-full grow;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@media print {
|
|
11
|
+
&::before,
|
|
12
|
+
&::after {
|
|
13
|
+
border: 0.5px solid;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&:not(:empty) {
|
|
18
|
+
@apply gap-2;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.divider-start::before, .divider-end::after {
|
|
22
|
+
@apply hidden;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&:is(.divider-x, .divider-y) {
|
|
26
|
+
&:is(.divider-x) {
|
|
27
|
+
@apply h-4 w-auto flex-row my-2;
|
|
28
|
+
&::before, &::after {
|
|
29
|
+
@apply h-0.5 w-full;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
&:is(.divider-y) {
|
|
33
|
+
@apply h-auto w-4 flex-col mx-2;
|
|
34
|
+
&::before, &::after {
|
|
35
|
+
@apply h-full w-0.5;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
@import "../themes/styles/base.css";
|
|
2
|
+
@import "../themes/placement.css";
|
|
3
|
+
|
|
4
|
+
@utility dropdown {
|
|
5
|
+
@layer components {
|
|
6
|
+
@apply relative inline-block;
|
|
7
|
+
position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
|
|
8
|
+
|
|
9
|
+
& > *:not(summary):focus {
|
|
10
|
+
@apply outline-hidden;
|
|
11
|
+
}
|
|
12
|
+
.dropdown-body {
|
|
13
|
+
@apply absolute;
|
|
14
|
+
}
|
|
15
|
+
&:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) {
|
|
16
|
+
.dropdown-body {
|
|
17
|
+
@apply hidden origin-top opacity-0 scale-9;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&[popover],
|
|
22
|
+
.dropdown-body {
|
|
23
|
+
@apply starting:[scale:95%] starting:[opacity:0] z-999 w-max transition-discrete duration-200 transition-[opacity,_scale,_display] ease-in-out;
|
|
24
|
+
/* animation: dropdown 0.2s; */
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&.dropdown-open,
|
|
28
|
+
&:not(.dropdown-hover):focus,
|
|
29
|
+
&:focus-within {
|
|
30
|
+
> [tabindex]:first-child {
|
|
31
|
+
@apply pointer-events-none;
|
|
32
|
+
}
|
|
33
|
+
.dropdown-body {
|
|
34
|
+
@apply opacity-100;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&.dropdown-hover:hover {
|
|
39
|
+
.dropdown-body {
|
|
40
|
+
@apply opacity-100 scale-100;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:is(details) {
|
|
45
|
+
summary {
|
|
46
|
+
&::-webkit-details-marker {
|
|
47
|
+
@apply hidden;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&.dropdown-open,
|
|
53
|
+
&:focus,
|
|
54
|
+
&:focus-within {
|
|
55
|
+
.dropdown-body {
|
|
56
|
+
@apply scale-100;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* experimental */
|
|
61
|
+
&:where([popover]) {
|
|
62
|
+
background: #0000;
|
|
63
|
+
}
|
|
64
|
+
&[popover] {
|
|
65
|
+
@apply fixed text-inherit;
|
|
66
|
+
|
|
67
|
+
@supports not (position-area: bottom) {
|
|
68
|
+
@apply m-auto;
|
|
69
|
+
|
|
70
|
+
&.dropdown-open:not(:popover-open) {
|
|
71
|
+
@apply hidden origin-top opacity-0 scale-95;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&::backdrop {
|
|
75
|
+
background-color: color-mix(in oklab, #000 30%, #0000);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&:not(.dropdown-open, :popover-open) {
|
|
80
|
+
@apply hidden origin-top opacity-0 scale-95;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@utility dropdown-body {
|
|
87
|
+
@layer components {
|
|
88
|
+
@apply bg-surface text-surface-fore rounded-[var(--radius-size)] border border-black/30 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen p-3 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* placements */
|
|
93
|
+
/* Positioning Classes */
|
|
94
|
+
.dropdown-x-start {
|
|
95
|
+
left: 0; /* Aligns dropdown to start horizontally */
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.dropdown-x-end {
|
|
99
|
+
right: 0; /* Aligns dropdown to end horizontally */
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.dropdown-y-top {
|
|
103
|
+
bottom: calc(100% + 10px); /* Positions above the button */
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.dropdown-y-bottom {
|
|
107
|
+
top: calc(100% + 10px); /* Positions below the button */
|
|
108
|
+
}
|
package/src/main.css
CHANGED