@internetstiftelsen/styleguide 5.1.11-beta.0.1 → 5.1.11-beta.0.3
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/atoms/progress/progress.js +12 -0
- package/dist/components.js +1 -0
- package/dist/organisms/selectable/selectable.js +26 -2
- package/package.json +1 -1
- package/src/atoms/icon/_all-icons.zip +0 -0
- package/src/atoms/icon/check-variant.svg +1 -0
- package/src/atoms/icon/close-variant.svg +1 -0
- package/src/atoms/icon/icon.config.js +3 -1
- package/src/atoms/icon/info-variant.svg +1 -0
- package/src/atoms/icon/security-variant.svg +1 -0
- package/src/atoms/icon/sprite.svg +25 -0
- package/src/atoms/icon/unsecure-variant.svg +1 -0
- package/src/atoms/icon/unsecure.svg +1 -0
- package/src/atoms/icon/warning-variant.svg +1 -0
- package/src/atoms/progress/_progress.scss +2 -2
- package/src/configurations/icons.json +1 -1
- package/src/organisms/selectable/_selectable.scss +8 -6
- package/src/organisms/selectable/selectable.js +33 -2
- package/src/utilities/_links.scss +21 -0
- package/src/utilities/_margin.scss +16 -0
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const progressbars = document.querySelectorAll('[data-width-progress]');
|
|
3
|
+
if (progressbars) {
|
|
4
|
+
function progressBarWidths() {
|
|
5
|
+
progressbars.forEach((container, index)=>{
|
|
6
|
+
const width = container.offsetWidth;
|
|
7
|
+
document.documentElement.style.setProperty(`--progressbar-width`, width + 'px');
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
window.addEventListener('DOMContentLoaded', progressBarWidths);
|
|
11
|
+
window.addEventListener('resize', progressBarWidths);
|
|
12
|
+
}
|
package/dist/components.js
CHANGED
|
@@ -20,10 +20,22 @@ document.addEventListener('click', (e)=>{
|
|
|
20
20
|
const selectable = button.closest('[data-selectable]');
|
|
21
21
|
if (selectable) {
|
|
22
22
|
const select = selectable.querySelector('[data-selectable-select]');
|
|
23
|
+
const text = button.querySelector('span');
|
|
24
|
+
const pressed = button.getAttribute('aria-pressed') === 'true';
|
|
25
|
+
let firstValue = null;
|
|
23
26
|
if (select) {
|
|
24
|
-
|
|
27
|
+
firstValue = select.querySelector('option:not(:disabled)').value;
|
|
28
|
+
select.value = pressed ? firstValue : '';
|
|
29
|
+
}
|
|
30
|
+
if (pressed) {
|
|
31
|
+
text.innerText = text.dataset.labelUnpressed;
|
|
32
|
+
button.setAttribute('aria-pressed', 'false');
|
|
33
|
+
toggleItems(selectable, firstValue);
|
|
34
|
+
} else {
|
|
35
|
+
text.innerText = text.dataset.labelPressed;
|
|
36
|
+
button.setAttribute('aria-pressed', 'true');
|
|
37
|
+
toggleItems(selectable, null);
|
|
25
38
|
}
|
|
26
|
-
toggleItems(selectable, null);
|
|
27
39
|
}
|
|
28
40
|
return;
|
|
29
41
|
}
|
|
@@ -59,6 +71,12 @@ if (hash) {
|
|
|
59
71
|
if (item) {
|
|
60
72
|
if (item.matches('[data-selectable]')) {
|
|
61
73
|
const select = item.querySelector('[data-selectable-select]');
|
|
74
|
+
const button = item.querySelector('[data-selectable-all]');
|
|
75
|
+
if (button) {
|
|
76
|
+
const text = button.querySelector('span');
|
|
77
|
+
button.setAttribute('aria-pressed', 'true');
|
|
78
|
+
text.innerText = text.dataset.labelPressed;
|
|
79
|
+
}
|
|
62
80
|
if (select) {
|
|
63
81
|
select.value = '';
|
|
64
82
|
}
|
|
@@ -67,6 +85,12 @@ if (hash) {
|
|
|
67
85
|
const selectable = item.closest('[data-selectable]');
|
|
68
86
|
if (selectable) {
|
|
69
87
|
const select = selectable.querySelector('[data-selectable-select]');
|
|
88
|
+
const button = item.querySelector('[data-selectable-all]');
|
|
89
|
+
if (button) {
|
|
90
|
+
const text = button.querySelector('span');
|
|
91
|
+
button.setAttribute('aria-pressed', 'false');
|
|
92
|
+
text.innerText = text.dataset.labelUnpressed;
|
|
93
|
+
}
|
|
70
94
|
if (select) {
|
|
71
95
|
select.value = hash.replace(`${selectable.id}-`, '');
|
|
72
96
|
}
|
package/package.json
CHANGED
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path d="M16 31.5C7.4 31.5.5 24.6.5 16S7.4.5 16 .5 31.5 7.4 31.5 16 24.6 31.5 16 31.5"/><path d="m22.84 9.16-9.08 9.8-4.75-4.4-1.86 2.01 6.76 6.27.17-.18 10.77-11.64z" style="fill:#fff"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path d="M16 31.5C7.4 31.5.5 24.6.5 16S7.4.5 16 .5 31.5 7.4 31.5 16 24.6 31.5 16 31.5"/><path d="m23.5 10.19-.21-.21-1.48-1.48L16 14.31 10.19 8.5 8.5 10.19 14.31 16 8.5 21.81l1.69 1.69L16 17.69l5.81 5.81 1.69-1.69L17.69 16z" style="fill:#fff"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path d="M16 31.5C7.4 31.5.5 24.6.5 16S7.4.5 16 .5 31.5 7.4 31.5 16 24.6 31.5 16 31.5"/><path d="M14.5 7.1h3v3.1h-3zm3 17.8h-3.1V12.7h3.1z" style="fill:#fff"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 32 32" width="32" height="32"><defs><style>.st0{fill:#fff}</style></defs><path d="M27.7 4.3c-.3-.1-5.9-2.5-11.7-2.5S4.7 4.2 4.4 4.3l-.5.2v14.1c0 5.08 4.33 8.27 7.8 10.02.01 0 .02.01.03.02a28.129 28.129 0 0 0 3.47 1.46c.3.1.5.1.8.1h.1c.3 0 .5 0 .8-.1.76-.26 2.04-.75 3.47-1.47.01 0 .02-.01.03-.02 3.46-1.75 7.8-4.93 7.8-10.02V4.5z"/><path d="M21.07 12.58v-2.22a2.83 2.83 0 0 0-2.85-2.85h-4.44a2.83 2.83 0 0 0-2.85 2.85v2.22H9.72v8.69h12.56v-8.69zm-8.69-2.22c0-.77.63-1.4 1.4-1.4h4.44c.77 0 1.4.63 1.4 1.4v2.22h-7.24zm8.45 9.46h-9.66v-5.8h9.66z" class="st0"/><path d="M16.92 16.15c0-.53-.43-.92-.92-.92s-.92.43-.92.92c0 .29.1.53.29.68v1.79h1.21v-1.79c.24-.14.34-.39.34-.68" class="st0"/></svg>
|
|
@@ -30,9 +30,15 @@
|
|
|
30
30
|
<path d="M27.5,2L30,4.5L4.5,30L2,27.5L27.5,2z"/>
|
|
31
31
|
<path d="M30,27.5L27.5,30L2,4.5L4.5,2L30,27.5z"/>
|
|
32
32
|
</symbol>
|
|
33
|
+
<symbol id="icon-close-variant" viewbox="0 0 32 32">
|
|
34
|
+
<path d="M16 31.5C7.4 31.5.5 24.6.5 16S7.4.5 16 .5 31.5 7.4 31.5 16 24.6 31.5 16 31.5"/><path d="m23.5 10.19-.21-.21-1.48-1.48L16 14.31 10.19 8.5 8.5 10.19 14.31 16 8.5 21.81l1.69 1.69L16 17.69l5.81 5.81 1.69-1.69L17.69 16z" style="fill:#ffffff"/>
|
|
35
|
+
</symbol>
|
|
33
36
|
<symbol id="icon-check" viewbox="0 0 32 24.42">
|
|
34
37
|
<polygon points="12.04 24.42 0 13.26 2.87 10.16 11.81 18.44 28.9 0 32 2.87 12.04 24.42"/>
|
|
35
38
|
</symbol>
|
|
39
|
+
<symbol id="icon-check-variant" viewbox="0 0 32 32">
|
|
40
|
+
<path d="M16 31.5C7.4 31.5.5 24.6.5 16S7.4.5 16 .5 31.5 7.4 31.5 16 24.6 31.5 16 31.5"/><path d="m22.84 9.16-9.08 9.8-4.75-4.4-1.86 2.01 6.76 6.27.17-.18 10.77-11.64z" style="fill:#ffffff"/>
|
|
41
|
+
</symbol>
|
|
36
42
|
<symbol id="icon-quote" viewbox="0 0 16 32">
|
|
37
43
|
<path d="M16,0v24H8v-8H0V0H16z M0,24h8v8H0C0,32,0,24,0,24z"/>
|
|
38
44
|
</symbol>
|
|
@@ -143,6 +149,9 @@
|
|
|
143
149
|
<path class="st0" d="M640 604.5c6.9 0 12.5-5.6 12.5-12.5s-5.6-12.5-12.5-12.5-12.5 5.6-12.5 12.5 5.6 12.5 12.5 12.5m0 3c-8.6 0-15.5-6.9-15.5-15.5s6.9-15.5 15.5-15.5 15.5 6.9 15.5 15.5-6.9 15.5-15.5 15.5"/>
|
|
144
150
|
</g>
|
|
145
151
|
</symbol>
|
|
152
|
+
<symbol id="icon-info-variant" viewbox="0 0 32 32">
|
|
153
|
+
<path d="M16 31.5C7.4 31.5.5 24.6.5 16S7.4.5 16 .5 31.5 7.4 31.5 16 24.6 31.5 16 31.5"/><path d="M14.5 7.1h3v3.1h-3zm3 17.8h-3.1V12.7h3.1z" style="fill:#ffffff"/>
|
|
154
|
+
</symbol>
|
|
146
155
|
<symbol id="icon-contrast" viewbox="0 0 32 32">
|
|
147
156
|
<path d="M15.4 6c5.5 0 10 4.5 10 10s-4.5 10-10 10V6z"/>
|
|
148
157
|
<g transform="translate(-624 -576)">
|
|
@@ -369,6 +378,18 @@
|
|
|
369
378
|
<path d="M27.7 4.3c-.3-.1-5.9-2.5-11.7-2.5S4.7 4.2 4.4 4.3l-.5.2v14.1c0 5.08 4.33 8.27 7.8 10.02.01 0 .02.01.03.02a28.129 28.129 0 0 0 3.47 1.46c.3.1.5.1.8.1h.1c.3 0 .5 0 .8-.1.76-.26 2.04-.75 3.47-1.47.01 0 .02-.01.03-.02 3.46-1.75 7.8-4.93 7.8-10.02V4.5zm-1.3 14.3c0 6.1-8.4 9.2-10.1 9.8a.9.9 0 0 1-.25.07.5.5 0 0 1-.25-.07c-1.7-.6-10.1-3.7-10.1-9.8v-13c1.49-.6 5.95-2.08 10.32-2.1l2.9.2c-.94-.12-1.91-.2-2.87-.2h.05c1.02 0 2.05.08 3.04.21h-.22c3.33.41 6.31 1.42 7.48 1.89z"/><path d="M21.07 12.58v-2.22a2.83 2.83 0 0 0-2.85-2.85h-4.44a2.83 2.83 0 0 0-2.85 2.85v2.22H9.72v8.69h12.56v-8.69zm-8.69-2.22c0-.77.63-1.4 1.4-1.4h4.44c.77 0 1.4.63 1.4 1.4v2.22h-7.24zm8.45 9.46h-9.66v-5.8h9.66z"/><path d="M16.92 16.15c0-.53-.43-.92-.92-.92s-.92.43-.92.92c0 .29.1.53.29.68v1.79h1.21v-1.79c.24-.14.34-.39.34-.68"/>
|
|
370
379
|
</symbol>
|
|
371
380
|
|
|
381
|
+
<symbol id="icon-security-variant" viewbox="0 0 32 32">
|
|
382
|
+
<path d="M27.7 4.3c-.3-.1-5.9-2.5-11.7-2.5S4.7 4.2 4.4 4.3l-.5.2v14.1c0 5.08 4.33 8.27 7.8 10.02.01 0 .02.01.03.02a28.129 28.129 0 0 0 3.47 1.46c.3.1.5.1.8.1h.1c.3 0 .5 0 .8-.1.76-.26 2.04-.75 3.47-1.47.01 0 .02-.01.03-.02 3.46-1.75 7.8-4.93 7.8-10.02V4.5z"/><path d="M21.07 12.58v-2.22a2.83 2.83 0 0 0-2.85-2.85h-4.44a2.83 2.83 0 0 0-2.85 2.85v2.22H9.72v8.69h12.56v-8.69zm-8.69-2.22c0-.77.63-1.4 1.4-1.4h4.44c.77 0 1.4.63 1.4 1.4v2.22h-7.24zm8.45 9.46h-9.66v-5.8h9.66z" fill="#ffffff"/><path d="M16.92 16.15c0-.53-.43-.92-.92-.92s-.92.43-.92.92c0 .29.1.53.29.68v1.79h1.21v-1.79c.24-.14.34-.39.34-.68" fill="#ffffff"/>
|
|
383
|
+
</symbol>
|
|
384
|
+
|
|
385
|
+
<symbol id="icon-unsecure" viewbox="0 0 32 32">
|
|
386
|
+
<path d="M27.7 4.3c-.3-.1-5.9-2.5-11.7-2.5S4.7 4.2 4.4 4.3l-.5.2v14.1c0 5.08 4.33 8.27 7.8 10.02.01 0 .02.01.03.02 1.12.56 2.28 1.05 3.47 1.46.3.1.5.1.8.1h.1c.3 0 .5 0 .8-.1.76-.26 2.04-.75 3.47-1.47.01 0 .02-.01.03-.02 3.46-1.75 7.8-4.93 7.8-10.02V4.5zm-1.3 14.3c0 6.1-8.4 9.2-10.1 9.8-.08.04-.16.06-.25.07-.09 0-.17-.03-.25-.07-1.7-.6-10.1-3.7-10.1-9.8v-13c1.49-.6 5.95-2.08 10.32-2.1l2.9.2c-.94-.12-1.91-.2-2.87-.2h.05c1.02 0 2.05.08 3.04.21h-.22c3.33.41 6.31 1.42 7.48 1.89z"/><path d="m22.26 10.15-.18-.18-1.23-1.23L16 13.59l-4.85-4.85-1.41 1.41L14.59 15l-4.85 4.85 1.41 1.41L16 16.41l4.85 4.85 1.41-1.41L17.41 15z"/>
|
|
387
|
+
</symbol>
|
|
388
|
+
|
|
389
|
+
<symbol id="icon-unsecure-variant" viewbox="0 0 32 32">
|
|
390
|
+
<path d="M27.7 4.3c-.3-.1-5.9-2.5-11.7-2.5S4.7 4.2 4.4 4.3l-.5.2v14.1c0 5.08 4.33 8.27 7.8 10.02.01 0 .02.01.03.02a28.129 28.129 0 0 0 3.47 1.46c.3.1.5.1.8.1h.1c.3 0 .5 0 .8-.1.76-.26 2.04-.75 3.47-1.47.01 0 .02-.01.03-.02 3.46-1.75 7.8-4.93 7.8-10.02V4.5z"/><path d="m22.26 10.15-.18-.18-1.23-1.23L16 13.59l-4.85-4.85-1.41 1.41L14.59 15l-4.85 4.85 1.41 1.41L16 16.41l4.85 4.85 1.41-1.41L17.41 15z" style="fill:#ffffff"/>
|
|
391
|
+
</symbol>
|
|
392
|
+
|
|
372
393
|
<symbol id="icon-romance" viewbox="0 0 32 32">
|
|
373
394
|
<path d="M15.953 29.329l-12.6-12.7c-3.2-3.2-3.2-8.4 0-11.7 1.5-1.6 3.6-2.4 5.8-2.4 2.2 0 4.3.8 5.8 2.4l.9.9.9-.9c3.2-3.2 8.5-3.2 11.7 0 3.2 3.2 3.2 8.5 0 11.7l-12.5 12.7zm-6.8-24.6c-1.6 0-3.2.6-4.4 1.8-2.4 2.4-2.4 6.3 0 8.8l11.1 11.1 11.1-11.1c2.4-2.4 2.4-6.3 0-8.8-2.4-2.4-6.3-2.4-8.8 0l-2.4 2.4-2.4-2.4c-.9-1.2-2.6-1.8-4.2-1.8z"/>
|
|
374
395
|
<path d="M15.953 29.329l-12.6-12.7c-3.2-3.2-3.2-8.4 0-11.7 1.5-1.6 3.6-2.4 5.8-2.4 2.2 0 4.3.8 5.8 2.4l.9.9.9-.9c3.2-3.2 8.5-3.2 11.7 0 3.2 3.2 3.2 8.5 0 11.7l-12.5 12.7zm-6.8-24.6c-1.6 0-3.2.6-4.4 1.8-2.4 2.4-2.4 6.3 0 8.8l11.1 11.1 11.1-11.1c2.4-2.4 2.4-6.3 0-8.8-2.4-2.4-6.3-2.4-8.8 0l-2.4 2.4-2.4-2.4c-.9-1.2-2.6-1.8-4.2-1.8z"/>
|
|
@@ -383,6 +404,10 @@
|
|
|
383
404
|
<path d="M29 28.3H3c-.4 0-.7-.2-.9-.5-.2-.3-.2-.7 0-1l13-22.5c.2-.3.5-.5.9-.5s.7.2.9.5l13 22.5c.2.3.2.7 0 1-.2.3-.5.5-.9.5zm-24.3-2h22.6L16 6.7 4.7 26.3z"/>
|
|
384
405
|
</symbol>
|
|
385
406
|
|
|
407
|
+
<symbol id="icon-warning-variant" viewbox="0 0 32 32">
|
|
408
|
+
<path d="M29 28.3H3c-.4 0-.7-.2-.9-.5s-.2-.7 0-1l13-22.5c.2-.3.5-.5.9-.5s.7.2.9.5l13 22.5c.2.3.2.7 0 1s-.5.5-.9.5"/><path d="M17 24.1h-2v-2h2zm-2-11.7h2v8h-2z" style="fill:#ffffff"/>
|
|
409
|
+
</symbol>
|
|
410
|
+
|
|
386
411
|
<symbol id="icon-diamond" viewbox="0 0 32 32">
|
|
387
412
|
<path d="M27 4H5l-4 8.7 14 16.1 1 1.2 1-1.2 14-16.1L27 4zm1.2 7.5h-5l3-4.4 2 4.4zm-3.8-5.4-3.1 4.6-3.1-4.6h6.2zm-5 5.4h-6.7l3.4-5 3.3 5zm-5.6-5.4-3.1 4.6-3.1-4.6h6.2zm-8 1 3 4.4h-5l2-4.4zm-1.3 6.5H10l3.3 10.2-8.8-10.2zm11.5 12-3.9-12.1h7.8L16 25.6zm6-12H27.6l-8.8 10.2L22 13.6z"/>
|
|
388
413
|
</symbol>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path d="M27.7 4.3c-.3-.1-5.9-2.5-11.7-2.5S4.7 4.2 4.4 4.3l-.5.2v14.1c0 5.08 4.33 8.27 7.8 10.02.01 0 .02.01.03.02a28.129 28.129 0 0 0 3.47 1.46c.3.1.5.1.8.1h.1c.3 0 .5 0 .8-.1.76-.26 2.04-.75 3.47-1.47.01 0 .02-.01.03-.02 3.46-1.75 7.8-4.93 7.8-10.02V4.5z"/><path d="m22.26 10.15-.18-.18-1.23-1.23L16 13.59l-4.85-4.85-1.41 1.41L14.59 15l-4.85 4.85 1.41 1.41L16 16.41l4.85 4.85 1.41-1.41L17.41 15z" style="fill:#fff"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path d="M27.7 4.3c-.3-.1-5.9-2.5-11.7-2.5S4.7 4.2 4.4 4.3l-.5.2v14.1c0 5.08 4.33 8.27 7.8 10.02.01 0 .02.01.03.02 1.12.56 2.28 1.05 3.47 1.46.3.1.5.1.8.1h.1c.3 0 .5 0 .8-.1.76-.26 2.04-.75 3.47-1.47.01 0 .02-.01.03-.02 3.46-1.75 7.8-4.93 7.8-10.02V4.5zm-1.3 14.3c0 6.1-8.4 9.2-10.1 9.8-.08.04-.16.06-.25.07-.09 0-.17-.03-.25-.07-1.7-.6-10.1-3.7-10.1-9.8v-13c1.49-.6 5.95-2.08 10.32-2.1l2.9.2c-.94-.12-1.91-.2-2.87-.2h.05c1.02 0 2.05.08 3.04.21h-.22c3.33.41 6.31 1.42 7.48 1.89z"/><path d="m22.26 10.15-.18-.18-1.23-1.23L16 13.59l-4.85-4.85-1.41 1.41L14.59 15l-4.85 4.85 1.41 1.41L16 16.41l4.85 4.85 1.41-1.41L17.41 15z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path d="M29 28.3H3c-.4 0-.7-.2-.9-.5s-.2-.7 0-1l13-22.5c.2-.3.5-.5.9-.5s.7.2.9.5l13 22.5c.2.3.2.7 0 1s-.5.5-.9.5"/><path d="M17 24.1h-2v-2h2zm-2-11.7h2v8h-2z" style="fill:#fff"/></svg>
|
|
@@ -94,14 +94,14 @@
|
|
|
94
94
|
border-radius: 0;
|
|
95
95
|
transition: width 5s ease;
|
|
96
96
|
background: linear-gradient(90deg, rgba(217, 0, 47, 1) 0%, rgba(217, 0, 47, 1) 19.99%, rgba(255, 64, 105, 1) 20%, rgba(255, 64, 105, 1) 39.99%, rgba(249, 153, 99, 1) 40%, rgba(249, 153, 99, 1) 59.99%, rgba(255, 206, 46, 1) 60%, rgba(255, 206, 46, 1) 79.99%, rgba(37, 194, 121, 1) 80%, rgba(37, 194, 121, 1) 89.99%, rgba(25, 135, 84, 1) 90%, rgba(25, 135, 84, 1) 100%);
|
|
97
|
-
background-size: var(--progressbar-width) 100%; /*
|
|
97
|
+
background-size: var(--progressbar-width) 100%; /* The value is calculated by JS and set in the DOM */
|
|
98
98
|
background-repeat: no-repeat;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
&::-moz-progress-bar {
|
|
102
102
|
transition: width 5s ease;
|
|
103
103
|
background: linear-gradient(90deg, rgba(217, 0, 47, 1) 0%, rgba(217, 0, 47, 1) 19.99%, rgba(255, 64, 105, 1) 20%, rgba(255, 64, 105, 1) 39.99%, rgba(249, 153, 99, 1) 40%, rgba(249, 153, 99, 1) 59.99%, rgba(255, 206, 46, 1) 60%, rgba(255, 206, 46, 1) 79.99%, rgba(37, 194, 121, 1) 80%, rgba(37, 194, 121, 1) 89.99%, rgba(25, 135, 84, 1) 90%, rgba(25, 135, 84, 1) 100%);
|
|
104
|
-
background-size: var(--progressbar-width) 100%; /*
|
|
104
|
+
background-size: var(--progressbar-width) 100%; /* The value is calculated by JS and set in the DOM */
|
|
105
105
|
background-repeat: no-repeat;
|
|
106
106
|
}
|
|
107
107
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"at","name":"At"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"richtext-heading-2","name":"Richtext Heading 2"},{"id":"richtext-heading-3","name":"Richtext Heading 3"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-ordered-list","name":"Richtext Ordered List"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"security","name":"Security"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]
|
|
1
|
+
[{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"close-variant","name":"Close Variant"},{"id":"check","name":"Check"},{"id":"check-variant","name":"Check Variant"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"info-variant","name":"Info Variant"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"at","name":"At"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"richtext-heading-2","name":"Richtext Heading 2"},{"id":"richtext-heading-3","name":"Richtext Heading 3"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-ordered-list","name":"Richtext Ordered List"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"security","name":"Security"},{"id":"security-variant","name":"Security Variant"},{"id":"unsecure","name":"Unsecure"},{"id":"unsecure-variant","name":"Unsecure Variant"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"warning-variant","name":"Warning Variant"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]
|
|
@@ -9,16 +9,10 @@
|
|
|
9
9
|
@use '../../vendor/grid/breakpoints' as breakpoint;
|
|
10
10
|
|
|
11
11
|
@include mixin.organism(selectable) {
|
|
12
|
-
padding: func.rhythm(1);
|
|
13
|
-
|
|
14
12
|
[aria-hidden="true"] {
|
|
15
13
|
display: none;
|
|
16
14
|
}
|
|
17
15
|
|
|
18
|
-
@include breakpoint.bp-up(md) {
|
|
19
|
-
padding: func.rhythm(2);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
16
|
@include bem.e(item) {
|
|
23
17
|
border-top: 1px solid colors.$color-concrete;
|
|
24
18
|
padding-top: func.rhythm(2);
|
|
@@ -29,6 +23,14 @@
|
|
|
29
23
|
}
|
|
30
24
|
}
|
|
31
25
|
|
|
26
|
+
@include bem.m(padded) {
|
|
27
|
+
padding: func.rhythm(1);
|
|
28
|
+
|
|
29
|
+
@include breakpoint.bp-up(md) {
|
|
30
|
+
padding: func.rhythm(2);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
32
34
|
@include bem.m(border-radius) {
|
|
33
35
|
border-radius: var.$border-radius;
|
|
34
36
|
}
|
|
@@ -26,12 +26,27 @@ document.addEventListener('click', (e) => {
|
|
|
26
26
|
|
|
27
27
|
if (selectable) {
|
|
28
28
|
const select = selectable.querySelector('[data-selectable-select]');
|
|
29
|
+
const text = button.querySelector('span');
|
|
30
|
+
const pressed = button.getAttribute('aria-pressed') === 'true';
|
|
31
|
+
let firstValue = null;
|
|
29
32
|
|
|
30
33
|
if (select) {
|
|
31
|
-
|
|
34
|
+
firstValue = select.querySelector('option:not(:disabled)').value;
|
|
35
|
+
|
|
36
|
+
select.value = pressed ? firstValue : '';
|
|
32
37
|
}
|
|
33
38
|
|
|
34
|
-
|
|
39
|
+
if (pressed) {
|
|
40
|
+
text.innerText = text.dataset.labelUnpressed;
|
|
41
|
+
button.setAttribute('aria-pressed', 'false');
|
|
42
|
+
|
|
43
|
+
toggleItems(selectable, firstValue);
|
|
44
|
+
} else {
|
|
45
|
+
text.innerText = text.dataset.labelPressed;
|
|
46
|
+
button.setAttribute('aria-pressed', 'true');
|
|
47
|
+
|
|
48
|
+
toggleItems(selectable, null);
|
|
49
|
+
}
|
|
35
50
|
}
|
|
36
51
|
|
|
37
52
|
return;
|
|
@@ -82,6 +97,14 @@ if (hash) {
|
|
|
82
97
|
if (item) {
|
|
83
98
|
if (item.matches('[data-selectable]')) {
|
|
84
99
|
const select = item.querySelector('[data-selectable-select]');
|
|
100
|
+
const button = item.querySelector('[data-selectable-all]');
|
|
101
|
+
|
|
102
|
+
if (button) {
|
|
103
|
+
const text = button.querySelector('span');
|
|
104
|
+
|
|
105
|
+
button.setAttribute('aria-pressed', 'true');
|
|
106
|
+
text.innerText = text.dataset.labelPressed;
|
|
107
|
+
}
|
|
85
108
|
|
|
86
109
|
if (select) {
|
|
87
110
|
select.value = '';
|
|
@@ -93,6 +116,14 @@ if (hash) {
|
|
|
93
116
|
|
|
94
117
|
if (selectable) {
|
|
95
118
|
const select = selectable.querySelector('[data-selectable-select]');
|
|
119
|
+
const button = item.querySelector('[data-selectable-all]');
|
|
120
|
+
|
|
121
|
+
if (button) {
|
|
122
|
+
const text = button.querySelector('span');
|
|
123
|
+
|
|
124
|
+
button.setAttribute('aria-pressed', 'false');
|
|
125
|
+
text.innerText = text.dataset.labelUnpressed;
|
|
126
|
+
}
|
|
96
127
|
|
|
97
128
|
if (select) {
|
|
98
129
|
select.value = hash.replace(`${selectable.id}-`, '');
|
|
@@ -24,6 +24,27 @@
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
.u-link-default,
|
|
28
|
+
.u-link-default * {
|
|
29
|
+
padding: 0 !important;
|
|
30
|
+
border: 0 !important;
|
|
31
|
+
border-radius: 0 !important;
|
|
32
|
+
word-wrap: normal !important;
|
|
33
|
+
word-break: normal !important;
|
|
34
|
+
hyphens: none !important;
|
|
35
|
+
overflow-wrap: normal !important;
|
|
36
|
+
text-decoration: underline !important;
|
|
37
|
+
color: var(--cyberspace-color) !important;
|
|
38
|
+
|
|
39
|
+
&:hover,
|
|
40
|
+
&:focus {
|
|
41
|
+
border: 0 !important;
|
|
42
|
+
border-radius: 0 !important;
|
|
43
|
+
background-color: transparent !important;
|
|
44
|
+
text-decoration: none !important;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
27
48
|
/* Force body text link link-styles */
|
|
28
49
|
.u-link {
|
|
29
50
|
padding: func.rhythm(0) func.rhythm(0.5) !important;
|
|
@@ -90,3 +90,19 @@ $class-m-y: u-m-y !default;
|
|
|
90
90
|
.u-m-r-auto {
|
|
91
91
|
margin-right: auto !important;
|
|
92
92
|
}
|
|
93
|
+
|
|
94
|
+
.u-m-t-05 {
|
|
95
|
+
margin-top: func.rhythm(.5) !important;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.u-m-r-05 {
|
|
99
|
+
margin-right: func.rhythm(.5) !important;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.u-m-b-05 {
|
|
103
|
+
margin-bottom: func.rhythm(.5) !important;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.u-m-l-05 {
|
|
107
|
+
margin-left: func.rhythm(.5) !important;
|
|
108
|
+
}
|