@nordcode/ui 1.2.0 → 1.3.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/CHANGELOG.md +61 -49
- package/out/bundle.css +26 -29
- package/out/bundle_configless.css +20 -24
- package/out/complete.css +60 -62
- package/out/complete_configless.css +54 -57
- package/package.json +1 -1
- package/src/styles/components/alerts.css +2 -2
- package/src/styles/components/badges.css +1 -1
- package/src/styles/components/breadcrumbs.css +1 -1
- package/src/styles/components/buttons.css +59 -46
- package/src/styles/components/card.css +2 -1
- package/src/styles/components/dialogs.css +11 -8
- package/src/styles/components/forms.css +12 -6
- package/src/styles/components/inputs/base.css +75 -65
- package/src/styles/components/inputs/fields.css +11 -11
- package/src/styles/components/inputs/segmented.css +23 -13
- package/src/styles/components/inputs/tag-select.css +10 -6
- package/src/styles/components/lists.css +3 -3
- package/src/styles/components/notifications.css +8 -6
- package/src/styles/config/config.css +6 -5
- package/src/styles/utils/base.css +18 -18
- package/src/styles/utils/layouts.css +31 -20
- package/src/styles/utils/reset.css +1 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
@layer utils {
|
|
2
|
-
|
|
3
2
|
/* Layout classes that handle 80% of the layout*/
|
|
4
3
|
:where(.nc-box) {
|
|
5
4
|
padding: var(--spacing-base);
|
|
@@ -43,35 +42,35 @@
|
|
|
43
42
|
&.-stretched {
|
|
44
43
|
inline-size: 100%;
|
|
45
44
|
|
|
46
|
-
|
|
45
|
+
& > * {
|
|
47
46
|
inline-size: 100%;
|
|
48
47
|
}
|
|
49
48
|
}
|
|
50
49
|
|
|
51
|
-
&.-contained
|
|
50
|
+
&.-contained > * {
|
|
52
51
|
max-inline-size: 100%;
|
|
53
52
|
}
|
|
54
53
|
}
|
|
55
54
|
|
|
56
55
|
:where(.nc-flow) {
|
|
57
|
-
|
|
56
|
+
> * + * {
|
|
58
57
|
margin-block-start: var(--flow-gap, 1lh);
|
|
59
58
|
}
|
|
60
59
|
|
|
61
|
-
|
|
62
|
-
max-inline-size: var(--flow-base-meassure,
|
|
60
|
+
> * {
|
|
61
|
+
max-inline-size: var(--flow-base-meassure, 36em);
|
|
63
62
|
}
|
|
64
63
|
|
|
65
|
-
|
|
66
|
-
max-inline-size: var(--flow-headline-meassure,
|
|
64
|
+
> *:is(h1, h2, h3, h4, h5, h6) {
|
|
65
|
+
max-inline-size: var(--flow-headline-meassure, 16em);
|
|
67
66
|
--flow-gap: 1.5lh;
|
|
68
67
|
}
|
|
69
68
|
|
|
70
|
-
|
|
69
|
+
> *:is(h1, h2, h3, h4, h5, h6) + :not([class]) {
|
|
71
70
|
--flow-gap: 0.5lh;
|
|
72
71
|
}
|
|
73
72
|
|
|
74
|
-
>figure {
|
|
73
|
+
> figure {
|
|
75
74
|
margin-inline: 0;
|
|
76
75
|
}
|
|
77
76
|
|
|
@@ -126,13 +125,13 @@
|
|
|
126
125
|
align-items: flex-start;
|
|
127
126
|
gap: var(--with-sidebar-gap, var(--spacing-far));
|
|
128
127
|
|
|
129
|
-
|
|
128
|
+
& > [data-aside] {
|
|
130
129
|
flex-grow: 1;
|
|
131
130
|
min-width: min-content;
|
|
132
131
|
flex-basis: var(--with-sidebar-target-width, 20rem);
|
|
133
132
|
}
|
|
134
133
|
|
|
135
|
-
|
|
134
|
+
& > [data-grow] {
|
|
136
135
|
flex-basis: 0;
|
|
137
136
|
flex-grow: 999;
|
|
138
137
|
min-width: var(--with-sidebar-min-size, 50%);
|
|
@@ -165,8 +164,10 @@
|
|
|
165
164
|
*/
|
|
166
165
|
:where(.nc-grid) {
|
|
167
166
|
display: grid;
|
|
168
|
-
grid-template-columns: repeat(
|
|
169
|
-
|
|
167
|
+
grid-template-columns: repeat(
|
|
168
|
+
var(--grid-placement, auto-fill),
|
|
169
|
+
minmax(var(--grid-min-item-size, 16rem), 1fr)
|
|
170
|
+
);
|
|
170
171
|
gap: var(--grid-gap, var(--spacing-base));
|
|
171
172
|
|
|
172
173
|
/* A split 50/50 layout */
|
|
@@ -206,7 +207,7 @@
|
|
|
206
207
|
gap: var(--switcher-gap, var(--spacing-base));
|
|
207
208
|
align-items: var(--switcher-vertical-alignment, flex-start);
|
|
208
209
|
|
|
209
|
-
|
|
210
|
+
& > * {
|
|
210
211
|
flex-grow: 1;
|
|
211
212
|
flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
|
|
212
213
|
}
|
|
@@ -214,7 +215,7 @@
|
|
|
214
215
|
/* Max 2 items,
|
|
215
216
|
so anything greater than 2 is ful width */
|
|
216
217
|
|
|
217
|
-
|
|
218
|
+
& > :nth-child(n + 4) {
|
|
218
219
|
flex-basis: 100%;
|
|
219
220
|
}
|
|
220
221
|
}
|
|
@@ -227,7 +228,7 @@
|
|
|
227
228
|
place-items: center;
|
|
228
229
|
grid: [pile] 1fr / [pile] 1fr;
|
|
229
230
|
|
|
230
|
-
|
|
231
|
+
& > * {
|
|
231
232
|
grid-area: pile;
|
|
232
233
|
}
|
|
233
234
|
}
|
|
@@ -241,11 +242,21 @@
|
|
|
241
242
|
|
|
242
243
|
display: grid;
|
|
243
244
|
gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
|
|
244
|
-
grid-template-columns: repeat(
|
|
245
|
-
|
|
245
|
+
grid-template-columns: repeat(
|
|
246
|
+
var(--_nc-ram-grid-repeat-count),
|
|
247
|
+
minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr)
|
|
248
|
+
);
|
|
246
249
|
}
|
|
247
250
|
|
|
248
|
-
:where(
|
|
251
|
+
:where(
|
|
252
|
+
.nc-stack,
|
|
253
|
+
.nc-cluster,
|
|
254
|
+
.nc-with-sidebar,
|
|
255
|
+
.nc-grid,
|
|
256
|
+
.nc-gallery,
|
|
257
|
+
.nc-switcher,
|
|
258
|
+
.nc-ram-grid
|
|
259
|
+
) {
|
|
249
260
|
&.-inherit {
|
|
250
261
|
gap: inherit;
|
|
251
262
|
}
|