lutra 0.1.13 → 0.1.15
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/MenuItem.svelte +9 -0
- package/dist/components/MenuItemContent.svelte +0 -6
- package/dist/css/2-base.css +7 -4
- package/dist/css/4-layout.css +28 -28
- package/dist/form/Datepicker.svelte +7 -7
- package/dist/form/FieldContent.svelte +4 -4
- package/dist/form/FormActions.svelte +2 -2
- package/dist/form/FormSection.svelte +6 -6
- package/package.json +1 -1
|
@@ -109,6 +109,7 @@
|
|
|
109
109
|
--inset-block: 0.5rem;
|
|
110
110
|
--inset-inline: 1rem;
|
|
111
111
|
border-radius: none;
|
|
112
|
+
white-space: nowrap;
|
|
112
113
|
}
|
|
113
114
|
|
|
114
115
|
li.rounded .Item,
|
|
@@ -128,10 +129,18 @@
|
|
|
128
129
|
outline: none;
|
|
129
130
|
}
|
|
130
131
|
|
|
132
|
+
li .Item span.Content {
|
|
133
|
+
display: inline-flex;
|
|
134
|
+
align-items: center;
|
|
135
|
+
white-space: nowrap;
|
|
136
|
+
gap: var(--menu-item-gap, var(--space-sm));
|
|
137
|
+
}
|
|
138
|
+
|
|
131
139
|
li .Item span.Shortcut {
|
|
132
140
|
font-size: max(0.75em, 9px);
|
|
133
141
|
text-align: right;
|
|
134
142
|
color: var(--menu-text-color-subtle);
|
|
143
|
+
white-space: nowrap;
|
|
135
144
|
}
|
|
136
145
|
|
|
137
146
|
li .Item:not(.Custom):active {
|
package/dist/css/2-base.css
CHANGED
|
@@ -30,11 +30,14 @@
|
|
|
30
30
|
--space-900: calc(var(--space-base) * 9);
|
|
31
31
|
--space-1000: calc(var(--space-base) * 10);
|
|
32
32
|
|
|
33
|
-
--space-
|
|
34
|
-
--space-
|
|
33
|
+
--space-xxs: var(--space-025);
|
|
34
|
+
--space-xs: var(--space-050);
|
|
35
|
+
--space-sm: var(--space-075);
|
|
35
36
|
--space-md: var(--space-100);
|
|
36
|
-
--space-lg: var(--space-
|
|
37
|
-
--space-xl: var(--space-
|
|
37
|
+
--space-lg: var(--space-150);
|
|
38
|
+
--space-xl: var(--space-200);
|
|
39
|
+
--space-xxl: var(--space-300);
|
|
40
|
+
--space-xxxl: var(--space-400);
|
|
38
41
|
|
|
39
42
|
--font-scale: 1.175;
|
|
40
43
|
--font-size-base: 1em;
|
package/dist/css/4-layout.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@scope (.PageContent) to (.UIContent) {
|
|
2
2
|
/* Heading spacing for proper markdown hierarchy */
|
|
3
3
|
h1, h2, h3, h4, h5, h6 {
|
|
4
|
-
margin-block: var(--space-
|
|
4
|
+
margin-block: var(--space-xl) var(--space-md);
|
|
5
5
|
|
|
6
6
|
/* No top margin for first heading or when following another heading */
|
|
7
7
|
&:first-child,
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
/* Larger spacing before headings that follow non-heading content */
|
|
13
13
|
&:not(:first-child):not(:is(h1, h2, h3, h4, h5, h6) + *) {
|
|
14
|
-
margin-block-start: var(--space-
|
|
14
|
+
margin-block-start: var(--space-xxl);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
& + * {
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
|
|
22
22
|
/* h1 and h2 get extra spacing */
|
|
23
23
|
h1, h2 {
|
|
24
|
-
margin-block-start: var(--space-
|
|
25
|
-
margin-block-end: var(--space-
|
|
24
|
+
margin-block-start: var(--space-xxl);
|
|
25
|
+
margin-block-end: var(--space-xl);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
/* Paragraph spacing with smart adjustments */
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
/* Paragraphs with images get extra spacing */
|
|
33
33
|
&:has(img) {
|
|
34
|
-
margin-block: var(--space-
|
|
34
|
+
margin-block: var(--space-xl);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
/* Paragraphs with only a small element get reduced spacing */
|
|
@@ -47,28 +47,28 @@
|
|
|
47
47
|
|
|
48
48
|
/* Paragraphs immediately after lists get reduced spacing */
|
|
49
49
|
:is(ul, ol) + & {
|
|
50
|
-
margin-block-start: var(--space-
|
|
50
|
+
margin-block-start: var(--space-xs);
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
/* List spacing with contextual adjustments */
|
|
55
55
|
:is(ul, ol) {
|
|
56
56
|
margin-block: 0 var(--space-md);
|
|
57
|
-
padding-inline-start: var(--space-
|
|
57
|
+
padding-inline-start: var(--space-xxl);
|
|
58
58
|
|
|
59
59
|
/* Lists following paragraphs get closer spacing */
|
|
60
60
|
p + & {
|
|
61
|
-
margin-block-start: var(--space-
|
|
61
|
+
margin-block-start: var(--space-xs);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
/* Nested lists */
|
|
65
65
|
& :is(ul, ol) {
|
|
66
|
-
margin-block: var(--space-
|
|
66
|
+
margin-block: var(--space-xs) 0;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
/* Lists inside blockquotes */
|
|
70
70
|
blockquote & {
|
|
71
|
-
margin-block: var(--space-
|
|
71
|
+
margin-block: var(--space-xs) 0;
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
|
|
@@ -90,8 +90,8 @@
|
|
|
90
90
|
blockquote {
|
|
91
91
|
border-inline-start: var(--space-xs) solid var(--border-color);
|
|
92
92
|
padding-inline-start: var(--space-md);
|
|
93
|
-
padding-block: var(--space-
|
|
94
|
-
margin-block: var(--space-
|
|
93
|
+
padding-block: var(--space-xs);
|
|
94
|
+
margin-block: var(--space-xl);
|
|
95
95
|
margin-inline: 0;
|
|
96
96
|
color: var(--text-color-p-subtle);
|
|
97
97
|
|
|
@@ -121,11 +121,11 @@
|
|
|
121
121
|
border-radius: var(--code-border-radius);
|
|
122
122
|
overflow-x: auto;
|
|
123
123
|
line-height: var(--font-line-height);
|
|
124
|
-
margin-block: var(--space-
|
|
124
|
+
margin-block: var(--space-xl);
|
|
125
125
|
|
|
126
126
|
/* Code blocks following lists get extra spacing */
|
|
127
127
|
:is(ul, ol) + & {
|
|
128
|
-
margin-block-start: var(--space-
|
|
128
|
+
margin-block-start: var(--space-xxl);
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
/* Code blocks inside blockquotes */
|
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
hr {
|
|
165
165
|
border: none;
|
|
166
166
|
border-block-start: var(--border-size-thick) var(--border-style) var(--border-color);
|
|
167
|
-
margin-block: var(--space-
|
|
167
|
+
margin-block: var(--space-xxl);
|
|
168
168
|
|
|
169
169
|
/* HRs following headings get reduced spacing */
|
|
170
170
|
:is(h1, h2, h3, h4, h5, h6) + & {
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
|
|
180
180
|
/* Table with responsive and contextual styling */
|
|
181
181
|
table {
|
|
182
|
-
margin-block: var(--space-
|
|
182
|
+
margin-block: var(--space-xl);
|
|
183
183
|
border-collapse: collapse;
|
|
184
184
|
width: 100%;
|
|
185
185
|
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
}
|
|
196
196
|
|
|
197
197
|
:is(th, td) {
|
|
198
|
-
padding: var(--space-
|
|
198
|
+
padding: var(--space-xs);
|
|
199
199
|
border: var(--border-size-thin) var(--border-style) var(--border-color);
|
|
200
200
|
text-align: start;
|
|
201
201
|
|
|
@@ -222,24 +222,24 @@
|
|
|
222
222
|
|
|
223
223
|
/* Block images get more spacing */
|
|
224
224
|
&:not(p *) {
|
|
225
|
-
margin-block: var(--space-
|
|
225
|
+
margin-block: var(--space-xl);
|
|
226
226
|
display: block;
|
|
227
227
|
}
|
|
228
228
|
|
|
229
229
|
/* Images in lists */
|
|
230
230
|
li & {
|
|
231
|
-
margin-block: var(--space-
|
|
231
|
+
margin-block: var(--space-xs);
|
|
232
232
|
}
|
|
233
233
|
}
|
|
234
234
|
|
|
235
235
|
/* Figure with enhanced spacing logic */
|
|
236
236
|
figure {
|
|
237
|
-
margin-block: var(--space-
|
|
237
|
+
margin-block: var(--space-xl);
|
|
238
238
|
margin-inline: 0;
|
|
239
239
|
|
|
240
240
|
/* Figures containing only images */
|
|
241
241
|
&:has(> img:only-child) {
|
|
242
|
-
margin-block: var(--space-
|
|
242
|
+
margin-block: var(--space-xxl);
|
|
243
243
|
}
|
|
244
244
|
|
|
245
245
|
/* Figures in lists or blockquotes */
|
|
@@ -249,7 +249,7 @@
|
|
|
249
249
|
}
|
|
250
250
|
|
|
251
251
|
figcaption {
|
|
252
|
-
margin-block-start: var(--space-
|
|
252
|
+
margin-block-start: var(--space-xs);
|
|
253
253
|
font-size: var(--font-size-sm);
|
|
254
254
|
color: var(--text-color-p-subtle);
|
|
255
255
|
text-align: center;
|
|
@@ -261,7 +261,7 @@
|
|
|
261
261
|
|
|
262
262
|
/* DLs with many terms get more spacing */
|
|
263
263
|
&:has(dt:nth-of-type(n+4)) {
|
|
264
|
-
margin-block: var(--space-
|
|
264
|
+
margin-block: var(--space-xl);
|
|
265
265
|
|
|
266
266
|
dt {
|
|
267
267
|
margin-block-start: var(--space-md);
|
|
@@ -272,14 +272,14 @@
|
|
|
272
272
|
|
|
273
273
|
dt {
|
|
274
274
|
font-weight: var(--font-weight-semibold);
|
|
275
|
-
margin-block: var(--space-
|
|
275
|
+
margin-block: var(--space-xs) var(--space-xs);
|
|
276
276
|
|
|
277
277
|
&:first-child { margin-block-start: 0; }
|
|
278
278
|
}
|
|
279
279
|
|
|
280
280
|
dd {
|
|
281
|
-
margin-inline-start: var(--space-
|
|
282
|
-
margin-block-end: var(--space-
|
|
281
|
+
margin-inline-start: var(--space-xxl);
|
|
282
|
+
margin-block-end: var(--space-xs);
|
|
283
283
|
|
|
284
284
|
&:last-child { margin-block-end: 0; }
|
|
285
285
|
|
|
@@ -345,12 +345,12 @@
|
|
|
345
345
|
|
|
346
346
|
/* Content flow improvements */
|
|
347
347
|
:is(p, li):has(+ :is(h2, h3, h4, h5, h6)) {
|
|
348
|
-
margin-block-end: var(--space-
|
|
348
|
+
margin-block-end: var(--space-xs); /* Reduce space before section headings */
|
|
349
349
|
}
|
|
350
350
|
|
|
351
351
|
/* Adjacent similar elements get reduced spacing */
|
|
352
352
|
:is(ul, ol) + :is(ul, ol) {
|
|
353
|
-
margin-block-start: var(--space-
|
|
353
|
+
margin-block-start: var(--space-xs);
|
|
354
354
|
}
|
|
355
355
|
|
|
356
356
|
blockquote + blockquote {
|
|
@@ -188,20 +188,20 @@ import UiContent from "../components/UIContent.svelte";
|
|
|
188
188
|
.Year {
|
|
189
189
|
display: block;
|
|
190
190
|
font-size: 2em;
|
|
191
|
-
padding: var(--space-
|
|
191
|
+
padding: var(--space-xs);
|
|
192
192
|
text-box: trim-both cap alphabetic;
|
|
193
193
|
}
|
|
194
194
|
.Months {
|
|
195
195
|
display: grid;
|
|
196
196
|
grid-template-columns: auto 1fr;
|
|
197
|
-
gap: var(--space-
|
|
197
|
+
gap: var(--space-xs);
|
|
198
198
|
}
|
|
199
199
|
.Month {
|
|
200
200
|
display: grid;
|
|
201
201
|
grid-template-columns: subgrid;
|
|
202
202
|
grid-column: span 2;
|
|
203
203
|
line-height: 1;
|
|
204
|
-
padding: var(--space-
|
|
204
|
+
padding: var(--space-xs);
|
|
205
205
|
text-align: right;
|
|
206
206
|
white-space: nowrap;
|
|
207
207
|
}
|
|
@@ -225,7 +225,7 @@ import UiContent from "../components/UIContent.svelte";
|
|
|
225
225
|
flex-wrap: wrap;
|
|
226
226
|
justify-content: start;
|
|
227
227
|
align-items: start;
|
|
228
|
-
gap: var(--space-
|
|
228
|
+
gap: var(--space-xs);
|
|
229
229
|
}
|
|
230
230
|
.DayName {
|
|
231
231
|
display: flex;
|
|
@@ -242,7 +242,7 @@ import UiContent from "../components/UIContent.svelte";
|
|
|
242
242
|
align-items: center;
|
|
243
243
|
border: var(--border-size-thin) solid var(--border-color);
|
|
244
244
|
border-radius: calc(var(--border-radius-sm) / 2);
|
|
245
|
-
padding: var(--space-
|
|
245
|
+
padding: var(--space-xs);
|
|
246
246
|
line-height: 1;
|
|
247
247
|
text-box: trim-both cap alphabetic;
|
|
248
248
|
}
|
|
@@ -272,7 +272,7 @@ import UiContent from "../components/UIContent.svelte";
|
|
|
272
272
|
font-size: 0.85em;
|
|
273
273
|
font-weight: 400;
|
|
274
274
|
opacity: 0.5;
|
|
275
|
-
padding: var(--space-
|
|
275
|
+
padding: var(--space-xs);
|
|
276
276
|
margin: 0;
|
|
277
277
|
height: 100%;
|
|
278
278
|
line-height: 1.5;
|
|
@@ -283,7 +283,7 @@ import UiContent from "../components/UIContent.svelte";
|
|
|
283
283
|
font-weight: 500;
|
|
284
284
|
font-size: 1.5em;
|
|
285
285
|
border: none;
|
|
286
|
-
padding: var(--space-md) var(--space-
|
|
286
|
+
padding: var(--space-md) var(--space-xs);
|
|
287
287
|
line-height: 1.5;
|
|
288
288
|
width: 100%;
|
|
289
289
|
text-box: trim-both cap alphabetic;
|
|
@@ -105,11 +105,11 @@
|
|
|
105
105
|
.FieldContentContainer {
|
|
106
106
|
display: flex;
|
|
107
107
|
flex-direction: column;
|
|
108
|
-
gap: var(--form-field-gap, var(--space-
|
|
108
|
+
gap: var(--form-field-gap, var(--space-xs));
|
|
109
109
|
}
|
|
110
110
|
.FieldContent {
|
|
111
111
|
display: flex;
|
|
112
|
-
gap: var(--form-label-gap, var(--space-
|
|
112
|
+
gap: var(--form-label-gap, var(--space-xs));
|
|
113
113
|
flex-direction: column;
|
|
114
114
|
font-size: 1em;
|
|
115
115
|
}
|
|
@@ -159,10 +159,10 @@
|
|
|
159
159
|
border-color: var(--focus-ring-color-invalid);
|
|
160
160
|
}
|
|
161
161
|
.Field.hasPrefix :global(input) {
|
|
162
|
-
padding-inline-start: var(--space-
|
|
162
|
+
padding-inline-start: var(--space-xxs);
|
|
163
163
|
}
|
|
164
164
|
.Field :global(button) {
|
|
165
|
-
margin-right: var(--space-
|
|
165
|
+
margin-right: var(--space-xxs);
|
|
166
166
|
}
|
|
167
167
|
.Field :global(button:focus-visible) {
|
|
168
168
|
outline: var(--focus-outline);
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
.FormActions {
|
|
31
31
|
display: grid;
|
|
32
32
|
background: color-mix(in srgb, var(--form-background-actions) calc(var(--fcc) * 100%), transparent);
|
|
33
|
-
padding: calc(var(--space-md) * var(--fcc)) calc(var(--space-
|
|
33
|
+
padding: calc(var(--space-md) * var(--fcc)) calc(var(--space-xl) * var(--fcc));
|
|
34
34
|
grid-column: 1 / -1;
|
|
35
35
|
grid-template-columns: subgrid;
|
|
36
36
|
border-bottom-left-radius: inherit;
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
@container (max-width: 480px) {
|
|
67
67
|
.FormActions {
|
|
68
68
|
justify-content: center;
|
|
69
|
-
gap: var(--space-
|
|
69
|
+
gap: var(--space-xs);
|
|
70
70
|
}
|
|
71
71
|
.Info {
|
|
72
72
|
order: 1;
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
grid-column: 1 / -1;
|
|
49
49
|
padding-block: calc(var(--fcc) * var(--form-padding-block));
|
|
50
50
|
padding-inline: calc(var(--fcc) * var(--form-padding-inline));
|
|
51
|
-
gap: var(--form-section-gap, var(--space-
|
|
51
|
+
gap: var(--form-section-gap, var(--space-xl));
|
|
52
52
|
}
|
|
53
53
|
.FormSectionTitle {
|
|
54
54
|
display: flex;
|
|
@@ -62,28 +62,28 @@
|
|
|
62
62
|
}
|
|
63
63
|
.FormSectionContent {
|
|
64
64
|
display: grid;
|
|
65
|
-
gap: var(--form-field-gap, var(--space-
|
|
65
|
+
gap: var(--form-field-gap, var(--space-xl));
|
|
66
66
|
}
|
|
67
67
|
.FormSection.noTitle .FormSectionContent {
|
|
68
68
|
grid-column: 1 / -1;
|
|
69
69
|
}
|
|
70
70
|
@media(max-width: 1280px) {
|
|
71
71
|
.FormSection {
|
|
72
|
-
padding: var(--space-
|
|
72
|
+
padding: var(--space-xl);
|
|
73
73
|
gap: var(--space-md);
|
|
74
74
|
}
|
|
75
75
|
.FormSectionTitle {
|
|
76
|
-
gap: var(--space-
|
|
76
|
+
gap: var(--space-xs);
|
|
77
77
|
padding-block-end: var(--space-md);
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
@media(max-width: 640px) {
|
|
81
81
|
.FormSection {
|
|
82
|
-
padding: var(--space-
|
|
82
|
+
padding: var(--space-xl);
|
|
83
83
|
gap: var(--space-md);
|
|
84
84
|
}
|
|
85
85
|
.FormSectionTitle {
|
|
86
|
-
gap: var(--space-
|
|
86
|
+
gap: var(--space-xs);
|
|
87
87
|
padding-block-end: var(--space-md);
|
|
88
88
|
}
|
|
89
89
|
}
|