@natachah/vanilla-frontend 0.1.19 → 0.1.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/docs/pages/components/form.html +67 -34
- package/docs/pages/{layouts → components}/grid.html +23 -5
- package/docs/pages/quick-start/customization.html +77 -130
- package/docs/pages/quick-start/installation.html +3 -5
- package/docs/src/js/doc-code.js +1 -1
- package/docs/src/js/doc-layout.js +2 -5
- package/docs/src/scss/layout.scss +0 -4
- package/natachah-vanilla-frontend-0.1.21.tgz +0 -0
- package/package.json +1 -1
- package/scss/abstracts/_mixins.scss +1 -1
- package/scss/components/_form.scss +17 -1
- package/scss/{layouts → components}/_grid.scss +3 -6
- package/scss/components/index.scss +1 -0
- package/scss/vanilla-frontend.scss +0 -3
- package/natachah-vanilla-frontend-0.1.19.tgz +0 -0
|
@@ -288,22 +288,38 @@
|
|
|
288
288
|
<h3>Validation</h3>
|
|
289
289
|
<p>Use the <code>aria-invalid</code> attribute to display the element as in/valid and use <code>aria-describedby</code> attribute with a <code><small></code> tag to display the information.</p>
|
|
290
290
|
<blockquote class="warning">
|
|
291
|
-
<p>As every design is different, there is
|
|
291
|
+
<p>As every design is different, there is not too much default style for in/valid elements. But for accessibility don't forget to add icons to show the errors.</p>
|
|
292
292
|
</blockquote>
|
|
293
293
|
|
|
294
294
|
<doc-demo>
|
|
295
|
-
<
|
|
296
|
-
<
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
<
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
295
|
+
<form action="#">
|
|
296
|
+
<div>
|
|
297
|
+
<label for="invalidInput">Invalid input</label>
|
|
298
|
+
<input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
|
|
299
|
+
<small id="invalidMsg">
|
|
300
|
+
<span aria-live="assertive">
|
|
301
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
302
|
+
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
303
|
+
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
|
|
304
|
+
</svg>
|
|
305
|
+
Incorrect value !
|
|
306
|
+
</span>
|
|
307
|
+
</small>
|
|
308
|
+
</div>
|
|
309
|
+
<div>
|
|
310
|
+
<label for="validInput">Valid input</label>
|
|
311
|
+
<input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
|
|
312
|
+
<small id="validMsg">
|
|
313
|
+
<span aria-live="assertive">
|
|
314
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
315
|
+
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
316
|
+
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
|
|
317
|
+
</svg>
|
|
318
|
+
All good !
|
|
319
|
+
</span>
|
|
320
|
+
</small>
|
|
321
|
+
</div>
|
|
322
|
+
</form>
|
|
307
323
|
</doc-demo>
|
|
308
324
|
|
|
309
325
|
<div class="code-group">
|
|
@@ -312,29 +328,46 @@
|
|
|
312
328
|
<button role="tab" aria-controls="scss">SCSS</button>
|
|
313
329
|
</div>
|
|
314
330
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
315
|
-
<
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
<
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
331
|
+
<div>
|
|
332
|
+
<label for="invalidInput">Invalid input</label>
|
|
333
|
+
<input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
|
|
334
|
+
<small id="invalidMsg">
|
|
335
|
+
<span aria-live="assertive">
|
|
336
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
337
|
+
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
338
|
+
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
|
|
339
|
+
</svg>
|
|
340
|
+
Incorrect value !
|
|
341
|
+
</span>
|
|
342
|
+
</small>
|
|
343
|
+
</div>
|
|
344
|
+
<div>
|
|
345
|
+
<label for="validInput">Valid input</label>
|
|
346
|
+
<input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
|
|
347
|
+
<small id="validMsg">
|
|
348
|
+
<span aria-live="assertive">
|
|
349
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
350
|
+
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
351
|
+
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
|
|
352
|
+
</svg>
|
|
353
|
+
All good !
|
|
354
|
+
</span>
|
|
355
|
+
</small>
|
|
356
|
+
</div>
|
|
325
357
|
</doc-code>
|
|
326
|
-
<doc-code id="scss" data-type="
|
|
327
|
-
form {
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
> small {
|
|
334
|
-
color: var(--color-error);
|
|
335
|
-
}
|
|
358
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
359
|
+
form div {
|
|
360
|
+
&:has([aria-invalid=true]) {
|
|
361
|
+
[aria-live] {
|
|
362
|
+
color: var(--color-error);
|
|
363
|
+
}
|
|
364
|
+
}
|
|
336
365
|
|
|
337
|
-
|
|
366
|
+
&:has([aria-invalid=false]) {
|
|
367
|
+
[aria-live] {
|
|
368
|
+
color: var(--color-success);
|
|
369
|
+
}
|
|
370
|
+
}
|
|
338
371
|
}
|
|
339
372
|
</doc-code>
|
|
340
373
|
</div>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Documentations:
|
|
7
|
+
<title>Documentations: Components > Grid</title>
|
|
8
8
|
</head>
|
|
9
9
|
|
|
10
10
|
<body data-preload>
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
<p>To use it, import this file:</p>
|
|
18
18
|
|
|
19
19
|
<doc-code data-type="scss">
|
|
20
|
-
@use '@natachah/vanilla-frontend/scss/
|
|
20
|
+
@use '@natachah/vanilla-frontend/scss/components/grid';
|
|
21
21
|
</doc-code>
|
|
22
22
|
|
|
23
23
|
<p>There is two types of grid, the basic and the flexible.</p>
|
|
@@ -65,7 +65,6 @@
|
|
|
65
65
|
<h2 id="flex-grid">Flex grid</h2>
|
|
66
66
|
|
|
67
67
|
<p>You can create a flexible grid via the <code>.flex-grid</code> class.</p>
|
|
68
|
-
|
|
69
68
|
<p>This method is more for <b>flexible</b> layout with a random number of items to display.</p>
|
|
70
69
|
|
|
71
70
|
<doc-demo>
|
|
@@ -106,7 +105,26 @@
|
|
|
106
105
|
|
|
107
106
|
<p>Both of them can be responsive by changing the CSS custom property <code>--grid-columns</code> inside a <code>@media</code> or a <code>@container</code>.</p>
|
|
108
107
|
|
|
109
|
-
<
|
|
108
|
+
<h3>Auto-fill</h3>
|
|
109
|
+
|
|
110
|
+
<p>With <code>.grid</code> you can add an auto layout with a maximum column size by changing the CSS custom properties <code>--grid-columns:auto-fill</code> and <code>--grid-column-size</code> and .</p>
|
|
111
|
+
|
|
112
|
+
<doc-demo>
|
|
113
|
+
<div class="grid" style="--grid-columns: auto-fill; --grid-column-size: 270px">
|
|
114
|
+
<div>1</div>
|
|
115
|
+
<div>2</div>
|
|
116
|
+
<div>3</div>
|
|
117
|
+
<div>4</div>
|
|
118
|
+
<div>5</div>
|
|
119
|
+
<div>6</div>
|
|
120
|
+
<div>7</div>
|
|
121
|
+
<div>8</div>
|
|
122
|
+
<div>9</div>
|
|
123
|
+
<div>10</div>
|
|
124
|
+
<div>11</div>
|
|
125
|
+
<div>12</div>
|
|
126
|
+
</div>
|
|
127
|
+
</doc-demo>
|
|
110
128
|
|
|
111
129
|
<h2>Columns</h2>
|
|
112
130
|
|
|
@@ -191,7 +209,7 @@
|
|
|
191
209
|
--grid-align
|
|
192
210
|
--grid-columns
|
|
193
211
|
--grid-grow /* only for .flex-grid */
|
|
194
|
-
|
|
212
|
+
--grid-column-size /* only for .grid */
|
|
195
213
|
</doc-code>
|
|
196
214
|
|
|
197
215
|
</doc-layout>
|
|
@@ -25,86 +25,72 @@
|
|
|
25
25
|
|
|
26
26
|
<p>You can use the default file <code>@natachah/vanilla-frontend/scss/themes/_root.scss</code>, or copy this code in your own file:</p>
|
|
27
27
|
|
|
28
|
-
<doc-code data-type="
|
|
28
|
+
<doc-code data-type="css">
|
|
29
29
|
:root {
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
--icon-file: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
95
|
-
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
|
|
96
|
-
<path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z" />
|
|
97
|
-
</svg>');
|
|
98
|
-
--icon-select: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
99
|
-
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
|
|
100
|
-
</svg>');
|
|
101
|
-
--icon-radio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16">
|
|
102
|
-
<circle cx="8" cy="8" r="8" />
|
|
103
|
-
</svg>');
|
|
104
|
-
--icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16">
|
|
105
|
-
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
|
|
106
|
-
</svg>');
|
|
107
|
-
--icon-switch: var(--icon-radio);
|
|
31
|
+
// Typography
|
|
32
|
+
--font-size: 16px;
|
|
33
|
+
--line-height: 1.5;
|
|
34
|
+
--font-family: Arial;
|
|
35
|
+
--font-weight: normal;
|
|
36
|
+
|
|
37
|
+
--font-size-h1: 2.25em; // 36px
|
|
38
|
+
--font-size-h2: 2.00em; // 32px
|
|
39
|
+
--font-size-h3: 1.75em; // 28px
|
|
40
|
+
--font-size-h4: 1.50em; // 24px
|
|
41
|
+
--font-size-h5: 1.25em; // 20px
|
|
42
|
+
--font-size-h6: 1.125em; // 18px
|
|
43
|
+
--font-size-large: 1.125em; // 18px
|
|
44
|
+
--font-size-small: .875em; // 14px
|
|
45
|
+
|
|
46
|
+
// Anchor
|
|
47
|
+
--decoration: none;
|
|
48
|
+
|
|
49
|
+
// Layouts
|
|
50
|
+
--padding-inline: .75em;
|
|
51
|
+
--padding-block: .5em;
|
|
52
|
+
|
|
53
|
+
// Border
|
|
54
|
+
--border-size: 1px;
|
|
55
|
+
--border-style: solid;
|
|
56
|
+
--border-radius: .25rem;
|
|
57
|
+
|
|
58
|
+
// Outline (:focus)
|
|
59
|
+
--outline-size: 3px;
|
|
60
|
+
--outline-style: solid;
|
|
61
|
+
--outline-offset: 0;
|
|
62
|
+
--outline-opacity: 50%;
|
|
63
|
+
|
|
64
|
+
// Hover (color-mix)
|
|
65
|
+
--hover-color: black;
|
|
66
|
+
--hover-percent: 5%;
|
|
67
|
+
|
|
68
|
+
// Active (color-mix)
|
|
69
|
+
--active-color: black;
|
|
70
|
+
--active-percent: 10%;
|
|
71
|
+
|
|
72
|
+
// Disabled
|
|
73
|
+
--disabled-opacity: 50%;
|
|
74
|
+
|
|
75
|
+
// Colors
|
|
76
|
+
--color-body: white;
|
|
77
|
+
--color-font: black;
|
|
78
|
+
--color-primary: #B790E5;
|
|
79
|
+
--color-error: #DC3030;
|
|
80
|
+
--color-success: #008A00;
|
|
81
|
+
--color-warning: #FFA500;
|
|
82
|
+
|
|
83
|
+
// Contrasts
|
|
84
|
+
--color-warning-contrast: black;
|
|
85
|
+
|
|
86
|
+
// Icons
|
|
87
|
+
--icon-date: url('data:image/svg+xml,...');
|
|
88
|
+
--icon-time: url('data:image/svg+xml,...');
|
|
89
|
+
--icon-file: url('data:image/svg+xml,...');
|
|
90
|
+
--icon-select: url('data:image/svg+xml,...');
|
|
91
|
+
--icon-radio: url('data:image/svg+xml,...');
|
|
92
|
+
--icon-check: url('data:image/svg+xml,...');
|
|
93
|
+
--icon-switch: var(--icon-radio);
|
|
108
94
|
|
|
109
95
|
}
|
|
110
96
|
</doc-code>
|
|
@@ -116,20 +102,20 @@
|
|
|
116
102
|
// This is the light theme (or if there is none)
|
|
117
103
|
html[data-theme=light],
|
|
118
104
|
html:not([data-theme]) {
|
|
119
|
-
|
|
120
|
-
|
|
105
|
+
--color-body: white;
|
|
106
|
+
--color-font: black;
|
|
121
107
|
}
|
|
122
108
|
|
|
123
109
|
// This is for the dark theme
|
|
124
110
|
html[data-theme=dark] {
|
|
125
|
-
|
|
126
|
-
|
|
111
|
+
--color-body: black;
|
|
112
|
+
--color-font: white;
|
|
127
113
|
}
|
|
128
114
|
|
|
129
115
|
// This is for the dark theme
|
|
130
116
|
html[data-theme=my-custom-theme] {
|
|
131
|
-
|
|
132
|
-
|
|
117
|
+
--color-body: white;
|
|
118
|
+
--color-font: orange;
|
|
133
119
|
}
|
|
134
120
|
</doc-code>
|
|
135
121
|
|
|
@@ -150,55 +136,16 @@
|
|
|
150
136
|
<p>You can use the default file <code>@natachah/vanilla-frontend/scss/abstracts/_options.scss</code>, or copy this code in your own file:</p>
|
|
151
137
|
|
|
152
138
|
<doc-code data-type="scss">
|
|
153
|
-
@
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
error,
|
|
159
|
-
warning
|
|
160
|
-
);
|
|
161
|
-
|
|
162
|
-
$color-variations: (
|
|
163
|
-
badge: $colors,
|
|
164
|
-
button: $colors,
|
|
165
|
-
card: $colors,
|
|
166
|
-
disclosure: $colors,
|
|
167
|
-
list: $colors
|
|
139
|
+
@use '@natachah/vanilla-frontend/scss/abstracts/_options' with (
|
|
140
|
+
$colors: (
|
|
141
|
+
primary,
|
|
142
|
+
danger
|
|
143
|
+
)
|
|
168
144
|
);
|
|
169
|
-
|
|
170
|
-
$outline-variations: (
|
|
171
|
-
badge,
|
|
172
|
-
button,
|
|
173
|
-
card,
|
|
174
|
-
disclosure,
|
|
175
|
-
list
|
|
176
|
-
);
|
|
177
|
-
);
|
|
178
|
-
</doc-code>
|
|
179
|
-
|
|
180
|
-
<p>And use is in your main scss as:</p>
|
|
181
|
-
|
|
182
|
-
<doc-code data-type="scss">
|
|
183
|
-
@use 'path/to/custom-options' as options;
|
|
145
|
+
@use "@natachah/vanilla-frontend/scss/base";
|
|
184
146
|
</doc-code>
|
|
185
147
|
|
|
186
|
-
<p>You can
|
|
187
|
-
|
|
188
|
-
<doc-code data-type="scss">
|
|
189
|
-
@use '@natachah/vanilla-frontend/scss/abstracts/_default.scss' with (
|
|
190
|
-
$item-properties: (
|
|
191
|
-
color: var(--color-font),
|
|
192
|
-
background: transparent,
|
|
193
|
-
border-size: var(--border-size),
|
|
194
|
-
border-style: var(--border-style),
|
|
195
|
-
border-color: transparent,
|
|
196
|
-
border-radius: var(--border-radius),
|
|
197
|
-
padding-inline: var(--padding-inline),
|
|
198
|
-
padding-block: var(--padding-block)
|
|
199
|
-
);
|
|
200
|
-
);
|
|
201
|
-
</doc-code>
|
|
148
|
+
<p>You can do the same with the default file <code>@natachah/vanilla-frontend/scss/abstracts/_default.scss</code></p>
|
|
202
149
|
|
|
203
150
|
</doc-layout>
|
|
204
151
|
<script type="module" src="/main.js"></script>
|
|
@@ -31,14 +31,11 @@
|
|
|
31
31
|
@use '@natachah/vanilla-frontend/scss/themes/_root';
|
|
32
32
|
|
|
33
33
|
// If you need to use the mixin
|
|
34
|
-
@use '@natachah/vanilla-frontend/scss/abstracts/
|
|
34
|
+
@use '@natachah/vanilla-frontend/scss/abstracts/_mixins';
|
|
35
35
|
|
|
36
36
|
// Base files (reset, typography and media)
|
|
37
37
|
@use "@natachah/vanilla-frontend/scss/base";
|
|
38
|
-
|
|
39
|
-
// Layouts
|
|
40
|
-
@use "@natachah/vanilla-frontend/scss/layouts/grid";
|
|
41
|
-
|
|
38
|
+
|
|
42
39
|
// Components files (or: @use "@natachah/vanilla-frontend/scss/components";)
|
|
43
40
|
@use '@natachah/vanilla-frontend/scss/components/_badge';
|
|
44
41
|
@use '@natachah/vanilla-frontend/scss/components/_breadcrumb';
|
|
@@ -46,6 +43,7 @@
|
|
|
46
43
|
@use '@natachah/vanilla-frontend/scss/components/_card';
|
|
47
44
|
@use '@natachah/vanilla-frontend/scss/components/_dialog';
|
|
48
45
|
@use '@natachah/vanilla-frontend/scss/components/_disclosure';
|
|
46
|
+
@use '@natachah/vanilla-frontend/scss/components/_drawer';
|
|
49
47
|
@use '@natachah/vanilla-frontend/scss/components/_dropdown';
|
|
50
48
|
@use '@natachah/vanilla-frontend/scss/components/_form';
|
|
51
49
|
@use '@natachah/vanilla-frontend/scss/components/_grid';
|
package/docs/src/js/doc-code.js
CHANGED
|
@@ -61,7 +61,7 @@ class DocCode extends HTMLElement {
|
|
|
61
61
|
const type = this.getAttribute('data-type') ?? 'html'
|
|
62
62
|
|
|
63
63
|
// Clean the code
|
|
64
|
-
let content = type === 'html'
|
|
64
|
+
let content = type === 'html' ? this.innerHTML : this.textContent
|
|
65
65
|
var pattern = content.match(/\s*\n[\t\s]*/)
|
|
66
66
|
content = content.replace(new RegExp(pattern, "g"), '\n').replaceAll('=""', '')
|
|
67
67
|
content = content.trim()
|
|
@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
|
|
|
18
18
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
|
|
19
19
|
<path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
|
|
20
20
|
</svg>
|
|
21
|
-
0.1.
|
|
21
|
+
0.1.21
|
|
22
22
|
</span>
|
|
23
23
|
</li>
|
|
24
24
|
<li>
|
|
@@ -61,10 +61,6 @@ class DocLayout extends HTMLElement {
|
|
|
61
61
|
<li><a href="/pages/base/typography.html">Typography</a></li>
|
|
62
62
|
<li><a href="/pages/base/media.html">Media</a></li>
|
|
63
63
|
</ul>
|
|
64
|
-
<h2>Layouts</h2>
|
|
65
|
-
<ul>
|
|
66
|
-
<li><a href="/pages/layouts/grid.html">Grid</a></li>
|
|
67
|
-
</ul>
|
|
68
64
|
<h2>Components</h2>
|
|
69
65
|
<ul>
|
|
70
66
|
<li><a href="/pages/components/badge.html">Badge</a></li>
|
|
@@ -76,6 +72,7 @@ class DocLayout extends HTMLElement {
|
|
|
76
72
|
<li><a href="/pages/components/drawer.html">Drawer</a></li>
|
|
77
73
|
<li><a href="/pages/components/dropdown.html">Dropdown</a></li>
|
|
78
74
|
<li><a href="/pages/components/form.html">Form</a></li>
|
|
75
|
+
<li><a href="/pages/components/grid.html">Grid</a></li>
|
|
79
76
|
<li><a href="/pages/components/list.html">List</a></li>
|
|
80
77
|
<li><a href="/pages/components/loading.html">Loading</a></li>
|
|
81
78
|
<li><a href="/pages/components/progress.html">Progress</a></li>
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
color: var(--#{$name}-focus-color, var(--#{$name}-hover-color, $default-color));
|
|
80
80
|
background-color: var(--#{$name}-focus-background, var(--#{$name}-hover-background, $default-hover-background));
|
|
81
81
|
border-color: var(--#{$name}-focus-border-color, var(--#{$name}-hover-border-color, $default-border-color));
|
|
82
|
-
outline: var(--#{$name}-outline-size, var(--outline-size)) var(--#{$name}-outline-style, var(--outline-style)) var(--#{$name}-outline-color, color-mix(in srgb,
|
|
82
|
+
outline: var(--#{$name}-outline-size, var(--outline-size)) var(--#{$name}-outline-style, var(--outline-style)) var(--#{$name}-outline-color, color-mix(in srgb, var(--#{$name}-border-color, currentcolor), transparent var(--outline-opacity)));
|
|
83
83
|
outline-offset: var(--#{$name}-outline-offset, var(--outline-offset));
|
|
84
84
|
}
|
|
85
85
|
}
|
|
@@ -147,6 +147,7 @@ select {
|
|
|
147
147
|
|
|
148
148
|
&:checked {
|
|
149
149
|
background-color: var(--form-active-background, currentColor);
|
|
150
|
+
border-color: var(--form-active-border-color, currentColor);
|
|
150
151
|
}
|
|
151
152
|
|
|
152
153
|
&:disabled:not(:checked) {
|
|
@@ -155,7 +156,7 @@ select {
|
|
|
155
156
|
|
|
156
157
|
& ~ label {
|
|
157
158
|
|
|
158
|
-
display:
|
|
159
|
+
display: initial;
|
|
159
160
|
vertical-align: middle;
|
|
160
161
|
|
|
161
162
|
&:not(:last-of-type) {
|
|
@@ -195,4 +196,19 @@ select {
|
|
|
195
196
|
background-position: calc(100% - .125em) center;
|
|
196
197
|
}
|
|
197
198
|
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
form div {
|
|
203
|
+
&:has([aria-invalid=true]) {
|
|
204
|
+
[aria-live] {
|
|
205
|
+
color: var(--color-error);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
&:has([aria-invalid=false]) {
|
|
210
|
+
[aria-live] {
|
|
211
|
+
color: var(--color-success);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
198
214
|
}
|
|
@@ -6,33 +6,30 @@
|
|
|
6
6
|
///
|
|
7
7
|
/// @example <div class="grid">...</div> or <div class="flex-grid">...</div>
|
|
8
8
|
///
|
|
9
|
-
/// @group
|
|
9
|
+
/// @group components
|
|
10
10
|
/// @author Natacha Herth
|
|
11
11
|
///
|
|
12
12
|
////
|
|
13
13
|
|
|
14
14
|
.grid,
|
|
15
15
|
.flex-grid {
|
|
16
|
-
|
|
17
16
|
gap: var(--grid-gap-block, 1rem) var(--grid-gap-inline, 1rem);
|
|
18
17
|
justify-content: var(--grid-justify, start);
|
|
19
18
|
align-items: var(--grid-align, initial);
|
|
20
|
-
|
|
21
19
|
}
|
|
22
20
|
|
|
23
21
|
.grid {
|
|
24
22
|
display: grid;
|
|
25
|
-
grid-template-columns: repeat(var(--grid-columns, 12), minmax(0
|
|
23
|
+
grid-template-columns: repeat(var(--grid-columns, 12), minmax(min(var(--grid-column-size, 0%), 100%), 1fr));
|
|
26
24
|
}
|
|
27
25
|
|
|
28
26
|
.flex-grid {
|
|
29
|
-
|
|
30
27
|
display: flex;
|
|
31
28
|
flex-wrap: wrap;
|
|
32
29
|
|
|
33
30
|
> * {
|
|
34
31
|
$column: var(--grid-columns, 12);
|
|
35
|
-
flex-basis: calc((1
|
|
32
|
+
flex-basis: calc((1 * 100% - (($column - 1) * var(--grid-gap-inline, 1rem))) / $column);
|
|
36
33
|
flex-grow: var(--grid-grow, 0);
|
|
37
34
|
}
|
|
38
35
|
|
|
Binary file
|