@natachah/vanilla-frontend 0.1.20 → 0.1.22
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/base/typography.html +19 -0
- package/docs/pages/components/form.html +25 -13
- package/docs/pages/{layouts → components}/grid.html +2 -2
- package/docs/pages/quick-start/customization.html +77 -130
- package/docs/pages/quick-start/installation.html +2 -5
- package/docs/src/js/doc-layout.js +2 -5
- package/natachah-vanilla-frontend-0.1.22.tgz +0 -0
- package/package.json +1 -1
- package/scss/abstracts/_mixins.scss +1 -1
- package/scss/base/_typography.scss +12 -0
- package/scss/components/_form.scss +2 -1
- package/scss/{layouts → components}/_grid.scss +1 -1
- package/scss/components/index.scss +1 -0
- package/scss/themes/_root.scss +1 -0
- package/scss/vanilla-frontend.scss +0 -3
- package/natachah-vanilla-frontend-0.1.20.tgz +0 -0
|
@@ -104,6 +104,25 @@
|
|
|
104
104
|
</doc-code>
|
|
105
105
|
</div>
|
|
106
106
|
|
|
107
|
+
<p>By default the external link with <code>target="_blank"</code> attribute, will have an icon for accessibility.</p>
|
|
108
|
+
|
|
109
|
+
<doc-demo>
|
|
110
|
+
<a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>
|
|
111
|
+
</doc-demo>
|
|
112
|
+
|
|
113
|
+
<div class="code-group">
|
|
114
|
+
<div role="tablist">
|
|
115
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
116
|
+
<button role="tab" aria-controls="css">CSS</button>
|
|
117
|
+
</div>
|
|
118
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
119
|
+
<a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>
|
|
120
|
+
</doc-code>
|
|
121
|
+
<doc-code id="css" data-type="css" role="tabpanel">
|
|
122
|
+
--icon-external
|
|
123
|
+
</doc-code>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
107
126
|
<h2>Inline</h2>
|
|
108
127
|
|
|
109
128
|
<doc-demo>
|
|
@@ -332,30 +332,42 @@
|
|
|
332
332
|
<label for="invalidInput">Invalid input</label>
|
|
333
333
|
<input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
|
|
334
334
|
<small id="invalidMsg">
|
|
335
|
-
<span aria-live="assertive">
|
|
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>
|
|
336
342
|
</small>
|
|
337
343
|
</div>
|
|
338
344
|
<div>
|
|
339
345
|
<label for="validInput">Valid input</label>
|
|
340
346
|
<input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
|
|
341
347
|
<small id="validMsg">
|
|
342
|
-
<span aria-live="assertive">
|
|
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>
|
|
343
355
|
</small>
|
|
344
356
|
</div>
|
|
345
357
|
</doc-code>
|
|
346
358
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
347
359
|
form div {
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
360
|
+
&:has([aria-invalid=true]) {
|
|
361
|
+
[aria-live] {
|
|
362
|
+
color: var(--color-error);
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
&:has([aria-invalid=false]) {
|
|
367
|
+
[aria-live] {
|
|
368
|
+
color: var(--color-success);
|
|
369
|
+
}
|
|
370
|
+
}
|
|
359
371
|
}
|
|
360
372
|
</doc-code>
|
|
361
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>
|
|
@@ -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';
|
|
@@ -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.22
|
|
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
|
}
|
|
@@ -49,6 +49,18 @@ button[role=link] {
|
|
|
49
49
|
opacity: var(--anchor-disabled-opacity, var(--disabled-opacity));
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
+
&[target=_blank]::after {
|
|
53
|
+
content: "";
|
|
54
|
+
display: inline-block;
|
|
55
|
+
width: .825em;
|
|
56
|
+
height: .825em;
|
|
57
|
+
vertical-align: baseline;
|
|
58
|
+
margin-inline-start: 0.25em;
|
|
59
|
+
background-color: currentColor;
|
|
60
|
+
mask-image: var(--icon-external);
|
|
61
|
+
mask-size: cover;
|
|
62
|
+
}
|
|
63
|
+
|
|
52
64
|
}
|
|
53
65
|
|
|
54
66
|
small {
|
|
@@ -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) {
|
package/scss/themes/_root.scss
CHANGED
|
@@ -67,6 +67,7 @@
|
|
|
67
67
|
--color-warning-contrast: black;
|
|
68
68
|
|
|
69
69
|
// Icons
|
|
70
|
+
--icon-external: url('data: image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" /><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" /></svg>');
|
|
70
71
|
--icon-date: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>');
|
|
71
72
|
--icon-time: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/></svg>');
|
|
72
73
|
--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"><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"/><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"/></svg>');
|
|
Binary file
|