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