@duskmoon-dev/core 1.13.0 → 1.14.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/dist/components/divider.css +196 -121
- package/dist/components/index.css +197 -122
- package/dist/components/navigation.css +1 -1
- package/dist/esm/components/divider.js +196 -121
- package/dist/esm/components/navigation.js +1 -1
- package/dist/index.css +197 -122
- package/dist/index.min.css +1 -1
- package/package.json +1 -1
|
@@ -2,57 +2,90 @@
|
|
|
2
2
|
export const css = `/**
|
|
3
3
|
* Divider Component Styles
|
|
4
4
|
* DuskMoonUI - Material Design 3 inspired divider system
|
|
5
|
+
*
|
|
6
|
+
* Usage:
|
|
7
|
+
* <div class="divider"></div> — plain horizontal line
|
|
8
|
+
* <div class="divider">OR</div> — text centered between lines
|
|
9
|
+
* <div class="divider divider-start">Title</div> — text at start
|
|
5
10
|
*/
|
|
6
11
|
|
|
7
12
|
@layer components {
|
|
8
|
-
/* Base Divider (Horizontal) */
|
|
13
|
+
/* ── Base Divider (Horizontal) ──────────────────────────────────── */
|
|
9
14
|
.divider {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: row;
|
|
17
|
+
align-items: center;
|
|
18
|
+
gap: 0;
|
|
10
19
|
width: 100%;
|
|
11
|
-
height: 1px;
|
|
12
20
|
margin: 1rem 0;
|
|
21
|
+
white-space: nowrap;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Only add gap when content is present so an empty divider renders as one continuous line */
|
|
25
|
+
.divider:not(:empty) {
|
|
26
|
+
gap: 1rem;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* The two line segments flanking any content */
|
|
30
|
+
.divider::before,
|
|
31
|
+
.divider::after {
|
|
32
|
+
content: '';
|
|
33
|
+
flex: 1;
|
|
34
|
+
height: 1px;
|
|
13
35
|
background-color: var(--color-outline-variant);
|
|
14
|
-
border: none;
|
|
15
36
|
}
|
|
16
37
|
|
|
17
|
-
/* Vertical Divider */
|
|
38
|
+
/* ── Vertical Divider ───────────────────────────────────────────── */
|
|
18
39
|
.divider-vertical {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
min-height: 1rem;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
width: auto;
|
|
22
42
|
margin: 0 1rem;
|
|
23
43
|
align-self: stretch;
|
|
24
44
|
}
|
|
25
45
|
|
|
26
|
-
|
|
27
|
-
.divider-
|
|
46
|
+
.divider-vertical::before,
|
|
47
|
+
.divider-vertical::after {
|
|
48
|
+
width: 1px;
|
|
49
|
+
height: unset; /* let flex: 1 control the length */
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* ── Thickness ──────────────────────────────────────────────────── */
|
|
53
|
+
.divider-thin::before,
|
|
54
|
+
.divider-thin::after {
|
|
28
55
|
height: 1px;
|
|
29
56
|
}
|
|
30
57
|
|
|
31
|
-
.divider-thin.divider-vertical
|
|
58
|
+
.divider-thin.divider-vertical::before,
|
|
59
|
+
.divider-thin.divider-vertical::after {
|
|
32
60
|
width: 1px;
|
|
33
|
-
height:
|
|
61
|
+
height: unset;
|
|
34
62
|
}
|
|
35
63
|
|
|
36
|
-
.divider-medium
|
|
64
|
+
.divider-medium::before,
|
|
65
|
+
.divider-medium::after {
|
|
37
66
|
height: 2px;
|
|
38
67
|
}
|
|
39
68
|
|
|
40
|
-
.divider-medium.divider-vertical
|
|
69
|
+
.divider-medium.divider-vertical::before,
|
|
70
|
+
.divider-medium.divider-vertical::after {
|
|
41
71
|
width: 2px;
|
|
42
|
-
height:
|
|
72
|
+
height: unset;
|
|
43
73
|
}
|
|
44
74
|
|
|
45
|
-
.divider-thick
|
|
75
|
+
.divider-thick::before,
|
|
76
|
+
.divider-thick::after {
|
|
46
77
|
height: 4px;
|
|
47
78
|
}
|
|
48
79
|
|
|
49
|
-
.divider-thick.divider-vertical
|
|
80
|
+
.divider-thick.divider-vertical::before,
|
|
81
|
+
.divider-thick.divider-vertical::after {
|
|
50
82
|
width: 4px;
|
|
51
|
-
height:
|
|
83
|
+
height: unset;
|
|
52
84
|
}
|
|
53
85
|
|
|
54
|
-
/*
|
|
55
|
-
.divider-dashed
|
|
86
|
+
/* ── Line Styles ────────────────────────────────────────────────── */
|
|
87
|
+
.divider-dashed::before,
|
|
88
|
+
.divider-dashed::after {
|
|
56
89
|
background-color: transparent;
|
|
57
90
|
background-image: linear-gradient(
|
|
58
91
|
to right,
|
|
@@ -63,7 +96,8 @@ export const css = `/**
|
|
|
63
96
|
background-repeat: repeat-x;
|
|
64
97
|
}
|
|
65
98
|
|
|
66
|
-
.divider-dashed.divider-vertical
|
|
99
|
+
.divider-dashed.divider-vertical::before,
|
|
100
|
+
.divider-dashed.divider-vertical::after {
|
|
67
101
|
background-image: linear-gradient(
|
|
68
102
|
to bottom,
|
|
69
103
|
var(--color-outline-variant) 50%,
|
|
@@ -73,7 +107,8 @@ export const css = `/**
|
|
|
73
107
|
background-repeat: repeat-y;
|
|
74
108
|
}
|
|
75
109
|
|
|
76
|
-
.divider-dotted
|
|
110
|
+
.divider-dotted::before,
|
|
111
|
+
.divider-dotted::after {
|
|
77
112
|
background-color: transparent;
|
|
78
113
|
background-image: linear-gradient(
|
|
79
114
|
to right,
|
|
@@ -84,7 +119,8 @@ export const css = `/**
|
|
|
84
119
|
background-repeat: repeat-x;
|
|
85
120
|
}
|
|
86
121
|
|
|
87
|
-
.divider-dotted.divider-vertical
|
|
122
|
+
.divider-dotted.divider-vertical::before,
|
|
123
|
+
.divider-dotted.divider-vertical::after {
|
|
88
124
|
background-image: linear-gradient(
|
|
89
125
|
to bottom,
|
|
90
126
|
var(--color-outline-variant) 25%,
|
|
@@ -94,12 +130,14 @@ export const css = `/**
|
|
|
94
130
|
background-repeat: repeat-y;
|
|
95
131
|
}
|
|
96
132
|
|
|
97
|
-
/* Color Variants */
|
|
98
|
-
.divider-primary
|
|
133
|
+
/* ── Color Variants ─────────────────────────────────────────────── */
|
|
134
|
+
.divider-primary::before,
|
|
135
|
+
.divider-primary::after {
|
|
99
136
|
background-color: var(--color-primary);
|
|
100
137
|
}
|
|
101
138
|
|
|
102
|
-
.divider-primary.divider-dashed
|
|
139
|
+
.divider-primary.divider-dashed::before,
|
|
140
|
+
.divider-primary.divider-dashed::after {
|
|
103
141
|
background-image: linear-gradient(
|
|
104
142
|
to right,
|
|
105
143
|
var(--color-primary) 50%,
|
|
@@ -107,7 +145,8 @@ export const css = `/**
|
|
|
107
145
|
);
|
|
108
146
|
}
|
|
109
147
|
|
|
110
|
-
.divider-primary.divider-dashed.divider-vertical
|
|
148
|
+
.divider-primary.divider-dashed.divider-vertical::before,
|
|
149
|
+
.divider-primary.divider-dashed.divider-vertical::after {
|
|
111
150
|
background-image: linear-gradient(
|
|
112
151
|
to bottom,
|
|
113
152
|
var(--color-primary) 50%,
|
|
@@ -115,20 +154,114 @@ export const css = `/**
|
|
|
115
154
|
);
|
|
116
155
|
}
|
|
117
156
|
|
|
118
|
-
.divider-secondary
|
|
157
|
+
.divider-secondary::before,
|
|
158
|
+
.divider-secondary::after {
|
|
119
159
|
background-color: var(--color-secondary);
|
|
120
160
|
}
|
|
121
161
|
|
|
122
|
-
.divider-
|
|
123
|
-
|
|
124
|
-
|
|
162
|
+
.divider-tertiary::before,
|
|
163
|
+
.divider-tertiary::after {
|
|
164
|
+
background-color: var(--color-tertiary);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.divider-info::before,
|
|
168
|
+
.divider-info::after {
|
|
169
|
+
background-color: var(--color-info);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.divider-success::before,
|
|
173
|
+
.divider-success::after {
|
|
174
|
+
background-color: var(--color-success);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.divider-warning::before,
|
|
178
|
+
.divider-warning::after {
|
|
179
|
+
background-color: var(--color-warning);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.divider-error::before,
|
|
183
|
+
.divider-error::after {
|
|
184
|
+
background-color: var(--color-error);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
/* ── Gradient Lines ─────────────────────────────────────────────── */
|
|
188
|
+
.divider-gradient::before,
|
|
189
|
+
.divider-gradient::after {
|
|
190
|
+
background: linear-gradient(
|
|
191
|
+
to right,
|
|
192
|
+
transparent,
|
|
193
|
+
var(--color-outline-variant) 20%,
|
|
194
|
+
var(--color-outline-variant) 80%,
|
|
195
|
+
transparent
|
|
196
|
+
);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.divider-gradient.divider-vertical::before,
|
|
200
|
+
.divider-gradient.divider-vertical::after {
|
|
201
|
+
background: linear-gradient(
|
|
202
|
+
to bottom,
|
|
203
|
+
transparent,
|
|
204
|
+
var(--color-outline-variant) 20%,
|
|
205
|
+
var(--color-outline-variant) 80%,
|
|
206
|
+
transparent
|
|
207
|
+
);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
/* ── Content Positioning ────────────────────────────────────────── */
|
|
211
|
+
|
|
212
|
+
/* Push content to start: shrink the leading line segment */
|
|
213
|
+
.divider-start::before {
|
|
214
|
+
flex: 0 0 2rem;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* Push content to end: shrink the trailing line segment */
|
|
218
|
+
.divider-end::after {
|
|
219
|
+
flex: 0 0 2rem;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
/* Vertical equivalents */
|
|
223
|
+
.divider-vertical.divider-start::before {
|
|
224
|
+
flex: 0 0 2rem;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.divider-vertical.divider-end::after {
|
|
228
|
+
flex: 0 0 2rem;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
/* ── Spacing Variants ───────────────────────────────────────────── */
|
|
232
|
+
.divider-compact {
|
|
233
|
+
margin: 0.25rem 0;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.divider-compact:not(:empty) {
|
|
237
|
+
gap: 0.5rem;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.divider-compact.divider-vertical {
|
|
241
|
+
margin: 0 0.25rem;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.divider-comfortable {
|
|
245
|
+
margin: 1.5rem 0;
|
|
125
246
|
}
|
|
126
247
|
|
|
127
|
-
.divider-
|
|
128
|
-
|
|
248
|
+
.divider-comfortable.divider-vertical {
|
|
249
|
+
margin: 0 1.5rem;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.divider-spacious {
|
|
253
|
+
margin: 2rem 0;
|
|
129
254
|
}
|
|
130
255
|
|
|
131
|
-
|
|
256
|
+
.divider-spacious:not(:empty) {
|
|
257
|
+
gap: 1.5rem;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.divider-spacious.divider-vertical {
|
|
261
|
+
margin: 0 2rem;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/* Legacy spacing aliases */
|
|
132
265
|
.divider-none {
|
|
133
266
|
margin: 0;
|
|
134
267
|
}
|
|
@@ -165,122 +298,64 @@ export const css = `/**
|
|
|
165
298
|
margin: 0 2rem;
|
|
166
299
|
}
|
|
167
300
|
|
|
168
|
-
/*
|
|
169
|
-
.divider-text {
|
|
170
|
-
display: flex;
|
|
171
|
-
align-items: center;
|
|
172
|
-
gap: 1rem;
|
|
173
|
-
height: auto;
|
|
174
|
-
background-color: transparent;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
.divider-text::before,
|
|
178
|
-
.divider-text::after {
|
|
179
|
-
content: '';
|
|
180
|
-
flex: 1;
|
|
181
|
-
height: 1px;
|
|
182
|
-
background-color: var(--color-outline-variant);
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
.divider-text-content {
|
|
186
|
-
font-size: 0.75rem;
|
|
187
|
-
font-weight: 500;
|
|
188
|
-
color: var(--color-on-surface-variant);
|
|
189
|
-
text-transform: uppercase;
|
|
190
|
-
letter-spacing: 0.025em;
|
|
191
|
-
white-space: nowrap;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
/* Text Position */
|
|
195
|
-
.divider-text-left::before {
|
|
196
|
-
flex: 0 0 2rem;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.divider-text-right::after {
|
|
200
|
-
flex: 0 0 2rem;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
/* Inset Divider */
|
|
301
|
+
/* ── Inset Divider ──────────────────────────────────────────────── */
|
|
204
302
|
.divider-inset {
|
|
205
|
-
|
|
206
|
-
width: calc(100% - 4rem);
|
|
303
|
+
padding-left: 4rem;
|
|
207
304
|
}
|
|
208
305
|
|
|
209
306
|
.divider-inset-right {
|
|
210
|
-
|
|
211
|
-
width: calc(100% - 4rem);
|
|
307
|
+
padding-right: 4rem;
|
|
212
308
|
}
|
|
213
309
|
|
|
214
310
|
.divider-inset-both {
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
width: calc(100% - 8rem);
|
|
311
|
+
padding-left: 4rem;
|
|
312
|
+
padding-right: 4rem;
|
|
218
313
|
}
|
|
219
314
|
|
|
220
|
-
/* List
|
|
315
|
+
/* ── List / Card Helpers ────────────────────────────────────────── */
|
|
221
316
|
.divider-list {
|
|
222
317
|
margin: 0;
|
|
223
|
-
|
|
224
|
-
width: calc(100% - 1rem);
|
|
318
|
+
padding-left: 1rem;
|
|
225
319
|
}
|
|
226
320
|
|
|
227
|
-
/* Card Divider */
|
|
228
321
|
.divider-card {
|
|
229
322
|
margin: 0;
|
|
230
323
|
margin-left: -1rem;
|
|
231
324
|
margin-right: -1rem;
|
|
232
|
-
width: calc(100% + 2rem);
|
|
233
325
|
}
|
|
234
326
|
|
|
235
|
-
/*
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
.divider-gradient.divider-vertical {
|
|
247
|
-
background: linear-gradient(
|
|
248
|
-
to bottom,
|
|
249
|
-
transparent,
|
|
250
|
-
var(--color-outline-variant) 20%,
|
|
251
|
-
var(--color-outline-variant) 80%,
|
|
252
|
-
transparent
|
|
253
|
-
);
|
|
327
|
+
/* ── Legacy: divider-text aliases ──────────────────────────────── */
|
|
328
|
+
/* divider-text is now just .divider — kept for backwards compat */
|
|
329
|
+
.divider-text {
|
|
330
|
+
display: flex;
|
|
331
|
+
flex-direction: row;
|
|
332
|
+
align-items: center;
|
|
333
|
+
gap: 0;
|
|
334
|
+
width: 100%;
|
|
335
|
+
margin: 1rem 0;
|
|
336
|
+
white-space: nowrap;
|
|
254
337
|
}
|
|
255
338
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
position: relative;
|
|
259
|
-
height: auto;
|
|
260
|
-
padding: 1rem 0;
|
|
261
|
-
background-color: transparent;
|
|
262
|
-
text-align: center;
|
|
339
|
+
.divider-text:not(:empty) {
|
|
340
|
+
gap: 1rem;
|
|
263
341
|
}
|
|
264
342
|
|
|
265
|
-
.divider-
|
|
343
|
+
.divider-text::before,
|
|
344
|
+
.divider-text::after {
|
|
266
345
|
content: '';
|
|
267
|
-
|
|
268
|
-
top: 50%;
|
|
269
|
-
left: 0;
|
|
270
|
-
right: 0;
|
|
346
|
+
flex: 1;
|
|
271
347
|
height: 1px;
|
|
272
348
|
background-color: var(--color-outline-variant);
|
|
273
349
|
}
|
|
274
350
|
|
|
275
|
-
.divider-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
color: var(--color-on-surface-variant);
|
|
351
|
+
.divider-text-left::before,
|
|
352
|
+
.divider-text-left.divider-text::before {
|
|
353
|
+
flex: 0 0 2rem;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.divider-text-right::after,
|
|
357
|
+
.divider-text-right.divider-text::after {
|
|
358
|
+
flex: 0 0 2rem;
|
|
284
359
|
}
|
|
285
360
|
}
|
|
286
361
|
`;
|