@pathscale/ui 0.0.19 → 0.0.21
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/dist/index.css +34 -0
- package/dist/index.js +7866 -0
- package/dist/showcase/ShowcaseBlock.css +30 -0
- package/dist/showcase/ShowcaseBlockShowcase.css +29 -0
- package/dist/sidenav/Sidenav.css +150 -0
- package/package.json +1 -1
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.showcase-block {
|
|
2
|
+
@apply flex flex-col;
|
|
3
|
+
gap: 1rem;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.showcase-block__container {
|
|
7
|
+
@apply bg-[oklch(var(--color-base-200))];
|
|
8
|
+
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
9
|
+
padding: 1.5rem;
|
|
10
|
+
border-radius: 0.5rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.showcase-block__title {
|
|
14
|
+
font-size: 1.25rem;
|
|
15
|
+
line-height: 1.75rem;
|
|
16
|
+
font-weight: 600;
|
|
17
|
+
margin-bottom: 0.5rem;
|
|
18
|
+
color: oklch(var(--color-base-content));
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.showcase-block__description {
|
|
22
|
+
color: oklch(var(--color-base-content) / 0.7);
|
|
23
|
+
margin-bottom: 1rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.showcase-block__content--preview {
|
|
27
|
+
@apply border bg-[oklch(var(--color-base-100))] border-[oklch(var(--color-base-content)/0.15)];
|
|
28
|
+
padding: 2rem;
|
|
29
|
+
border-radius: 0.5rem;
|
|
30
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
.showcase-demo {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 3rem;
|
|
5
|
+
padding: 2rem;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.showcase-demo__section-title {
|
|
9
|
+
font-size: 1.25rem;
|
|
10
|
+
line-height: 1.75rem;
|
|
11
|
+
font-weight: 600;
|
|
12
|
+
border-bottom: 1px solid;
|
|
13
|
+
border-color: oklch(var(--color-base-content) / 0.2);
|
|
14
|
+
padding-bottom: 0.5rem;
|
|
15
|
+
margin-bottom: 1rem;
|
|
16
|
+
color: oklch(var(--color-base-content));
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.showcase-demo__preview-content {
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
align-items: center;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
gap: 1rem;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.showcase-demo__custom-showcase {
|
|
28
|
+
padding: 0.5rem;
|
|
29
|
+
}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
.sidenav {
|
|
2
|
+
@apply h-screen bg-base-200 border-r border-base-300 flex flex-col transition-all duration-300 ease-in-out sticky top-0;
|
|
3
|
+
width: 16rem;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.sidenav-closed {
|
|
7
|
+
@apply -translate-x-full;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.sidenav-open {
|
|
11
|
+
@apply translate-x-0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.sidenav-desktop {
|
|
15
|
+
@apply relative transform-none shadow-none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.sidenav-collapsed {
|
|
19
|
+
width: 4rem;
|
|
20
|
+
@apply flex flex-col items-center py-8;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.sidenav-header {
|
|
24
|
+
@apply p-4 border-b border-base-300 flex items-center justify-between flex-shrink-0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.sidenav-collapsed .sidenav-header {
|
|
28
|
+
@apply p-0 border-none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.sidenav-title {
|
|
32
|
+
@apply text-lg font-semibold text-base-content truncate;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.sidenav-close {
|
|
36
|
+
@apply btn btn-ghost btn-sm p-1 hover:bg-base-300;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.sidenav-content {
|
|
40
|
+
@apply flex-1 overflow-y-auto;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.sidenav-menu {
|
|
44
|
+
@apply flex flex-col flex-1 p-4 space-y-4;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.sidenav-collapsed .sidenav-menu {
|
|
48
|
+
@apply p-0 items-center space-y-6;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.sidenav-item {
|
|
52
|
+
@apply w-full;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.sidenav-collapsed .sidenav-item {
|
|
56
|
+
@apply w-auto;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.sidenav-item-link,
|
|
60
|
+
.sidenav-item-button {
|
|
61
|
+
@apply flex items-center px-3 py-2 text-base-content transition-colors duration-300 transform rounded-lg hover:bg-base-300 gap-3;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.sidenav-collapsed .sidenav-item-link,
|
|
65
|
+
.sidenav-collapsed .sidenav-item-button {
|
|
66
|
+
@apply w-10 h-10 p-1.5 justify-center;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.sidenav-item-active .sidenav-item-link,
|
|
70
|
+
.sidenav-item-active .sidenav-item-button {
|
|
71
|
+
@apply bg-primary text-primary-content hover:bg-primary/90;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.sidenav-children {
|
|
75
|
+
@apply p-4 text-base-content;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.sidenav-footer {
|
|
79
|
+
@apply mt-auto p-4 border-t border-base-300 flex-shrink-0 text-base-content/70;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.sidenav-collapsed .sidenav-footer {
|
|
83
|
+
@apply p-0 border-none flex flex-col items-center space-y-6;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.sidenav-group {
|
|
87
|
+
@apply space-y-2 mb-4 w-full;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.sidenav-collapsed .sidenav-group {
|
|
91
|
+
@apply mb-0 space-y-2;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.sidenav-group-label {
|
|
95
|
+
@apply px-3 py-2 text-xs font-semibold text-base-content/70 uppercase tracking-wider;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.sidenav-group-items {
|
|
99
|
+
@apply space-y-1 w-full pl-3;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.sidenav-collapsed .sidenav-group-items {
|
|
103
|
+
@apply pl-0 space-y-2;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.sidenav-collapsed .sidenav-group-label {
|
|
107
|
+
@apply hidden;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.sidenav-collapsed .sidenav-item-label {
|
|
111
|
+
@apply hidden;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.sidenav-item-link svg,
|
|
115
|
+
.sidenav-item-button svg {
|
|
116
|
+
@apply w-5 h-5 flex-shrink-0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.sidenav-collapsed .sidenav-item-link,
|
|
120
|
+
.sidenav-collapsed .sidenav-item-button {
|
|
121
|
+
@apply relative;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.sidenav-collapsed .sidenav-item-link:hover::after,
|
|
125
|
+
.sidenav-collapsed .sidenav-item-button:hover::after {
|
|
126
|
+
content: attr(title);
|
|
127
|
+
@apply absolute left-full ml-2 px-2 py-1 bg-base-300 text-base-content rounded text-sm whitespace-nowrap z-50;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.sidenav-overlay {
|
|
131
|
+
@apply fixed inset-0 bg-base-content/50 z-40 transition-opacity duration-300;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.sidenav-overlay-hidden {
|
|
135
|
+
@apply opacity-0 pointer-events-none;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.sidenav-overlay-visible {
|
|
139
|
+
@apply opacity-100;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
@media (min-width: 768px) {
|
|
143
|
+
.sidenav-desktop {
|
|
144
|
+
@apply relative transform-none shadow-none;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.sidenav-overlay {
|
|
148
|
+
@apply hidden;
|
|
149
|
+
}
|
|
150
|
+
}
|