desy-html 8.8.1 → 8.10.0
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/ds/_ds.example.layout-escritorio.njk +38 -34
- package/docs/ds/_ds.example.layout-movil.njk +13 -9
- package/docs/ds/_ds.example.layout-sidebar.njk +10 -6
- package/docs/ds/_ds.example.textos.njk +1 -1
- package/docs/ds/_ds.section.color.njk +33 -33
- package/docs/ds/_ds.section.espaciado.njk +0 -58
- package/docs/ds/_ds.section.textos.njk +1 -1
- package/docs/index.html +15 -0
- package/package.json +2 -2
- package/src/css/component.text.css +8 -0
- package/src/css/styles.css +1 -0
- package/src/js/aria/HeaderNavigation.js +1 -1
- package/src/js/aria/MenuNavigation.js +333 -115
- package/src/js/aria/checkBoxes.js +18 -12
- package/src/js/aria/collapsible.js +36 -34
- package/src/js/aria/dialog.js +1 -0
- package/src/js/aria/listbox.js +23 -1
- package/src/js/aria/radioButton.js +18 -2
- package/src/js/desy-html.js +5 -10
- package/src/js/index.js +0 -2
- package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +125 -8
- package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +9 -1
- package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +5 -1
- package/src/templates/components/breadcrumbs/params.breadcrumbs.yaml +4 -0
- package/src/templates/components/button/_examples.button.njk +5 -2
- package/src/templates/components/button-loader/_examples.button-loader.njk +5 -2
- package/src/templates/components/card/_examples.card.njk +16 -0
- package/src/templates/components/checkboxes/_examples.checkboxes.njk +62 -0
- package/src/templates/components/collapsible/_examples.collapsible.njk +19 -4
- package/src/templates/components/collapsible/_styles.collapsible.css +33 -0
- package/src/templates/components/collapsible/_template.collapsible.njk +5 -5
- package/src/templates/components/dialog/_examples.dialog.njk +47 -3
- package/src/templates/components/header/_template.header.header__offcanvas.njk +2 -2
- package/src/templates/components/header/_template.header.njk +1 -2
- package/src/templates/components/header-advanced/params.header-advanced.yaml +3 -3
- package/src/templates/components/header-mini/_examples.header-mini.njk +1 -1
- package/src/templates/components/header-mini/params.header-mini.yaml +2 -2
- package/src/templates/components/listbox/_examples.listbox.njk +37 -0
- package/src/templates/components/menu-navigation/_template.menu-navigation.njk +1 -1
- package/src/templates/components/radios/_examples.radios.njk +72 -2
- package/src/js/aria/disclosureMenu.js +0 -152
|
@@ -1,35 +1,39 @@
|
|
|
1
|
-
<div
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
1
|
+
<div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible en escritorio: hay una de 100%, dos de 50% una al lado de la otra y dos ejemplos de zona de contenido con zona de sidebar en el lateral y, por último, un ejemplo de 4 columnas contigual con misma anchura de un cuarto del espacio disponible.">
|
|
2
|
+
<!-- copiar a a partir de aqui -->
|
|
3
|
+
<div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
|
|
4
|
+
<div class="col-span-2 lg:col-span-4">
|
|
5
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
|
|
6
|
+
</div>
|
|
7
|
+
<div class="col-span-2 lg:col-span-2">
|
|
8
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="col-span-2 lg:col-span-2">
|
|
11
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="col-span-2 lg:col-span-3">
|
|
14
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="col-span-2 lg:col-span-1">
|
|
17
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="col-span-2 lg:col-span-1">
|
|
20
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="col-span-2 lg:col-span-3">
|
|
23
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="col-span-2 lg:col-span-1">
|
|
26
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="col-span-2 lg:col-span-1">
|
|
29
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="col-span-2 lg:col-span-1">
|
|
32
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="col-span-2 lg:col-span-1">
|
|
35
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
<!-- copiar hasta aqui -->
|
|
35
39
|
</div>
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
<div
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
<div role="img" aria-label="Imagen de retícula y 3 columnas, una que ocupa 100% de la anchura disponible, y otras dos que ocupan la mitad una al lado de la otra">
|
|
2
|
+
<!-- copiar a a partir de aqui -->
|
|
3
|
+
<div class="grid grid-cols-2 gap-lg col-span-1">
|
|
4
|
+
<div class="col-span-2">
|
|
5
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
|
|
6
|
+
</div>
|
|
7
|
+
<div class="col-span-1">
|
|
8
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="col-span-1">
|
|
11
|
+
<span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
|
|
12
|
+
</div>
|
|
10
13
|
</div>
|
|
14
|
+
<!-- copiar hasta aqui -->
|
|
11
15
|
</div>
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
<div
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
<div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible">
|
|
2
|
+
<!-- copiar a a partir de aqui -->
|
|
3
|
+
<div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
|
|
4
|
+
<div class="col-span-2 lg:col-span-3">
|
|
5
|
+
Zona de contenido (75% en escritorio, 100% en móvil)
|
|
6
|
+
</div>
|
|
7
|
+
<div class="col-span-2 lg:col-span-1">
|
|
8
|
+
Barra lateral (25% en escritorio, 100% en móvil)
|
|
9
|
+
</div>
|
|
7
10
|
</div>
|
|
11
|
+
<!-- copiar hasta aqui -->
|
|
8
12
|
</div>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<h3 class="c-h3">Título 3</h3>
|
|
5
5
|
<h4 class="c-h4">Título 4</h4>
|
|
6
6
|
<p>Esto es un <a href="#" class="c-link">link</a> en un texto</p>
|
|
7
|
-
<p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block
|
|
7
|
+
<p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block ml-sm no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M22.286057142857143 0H23.142857142857142c0.4733142857142857 0 0.8571428571428571 0.3837565714285714 0.8571428571428571 0.8571428571428571v0.8559548571428571l0 0.0023708571428571424V9.428571428571429c0 0.34668 -0.20879999999999999 0.6592285714285714 -0.5291999999999999 0.7918971428571429 -0.3202285714285714 0.1326685714285714 -0.6889714285714285 0.05933142857142857 -0.9341142857142858 -0.18581142857142857l-3.0733714285714284 -3.073525714285714 -16.536839999999998 16.536754285714284c-0.66948 0.6694285714285714 -1.7549022857142855 0.6694285714285714 -2.424372 0 -0.6694698857142857 -0.6694285714285714 -0.6694698857142857 -1.7549142857142856 0 -2.424342857142857L17.03886857142857 4.536771428571429 13.965342857142856 1.4632337142857141c-0.2451428571428571 -0.24514114285714284 -0.31848 -0.6138137142857142 -0.18581142857142857 -0.9341057142857143C13.912199999999999 0.208836 14.22474857142857 0 14.571428571428571 0h7.713942857142856l0.0006857142857142857 0Z" fill="currentColor"></path></g></svg></a> en un texto.</p>
|
|
8
8
|
<p>Esto es un <a href="#" class="c-link c-link--alert">link</a> en una notificación de error</p>
|
|
9
9
|
<p class="c-paragraph-lg">Párrafo destacados</p>
|
|
10
10
|
<p class="c-paragraph-base">Párrafo por defecto</p>
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
<p class="font-semibold text-center self-center">Interacción</p>
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
17
|
-
<div class="flex inset-0 bg-primary-light text-black lg:p-lg"><
|
|
18
|
-
<div class="flex inset-0 bg-primary-base text-white"><
|
|
19
|
-
<div class="flex inset-0 bg-primary-dark font-semibold text-white"><
|
|
17
|
+
<div class="flex inset-0 bg-primary-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-light</dt><dd>#d6eaf0</dd></dl></div>
|
|
18
|
+
<div class="flex inset-0 bg-primary-base text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-base</dt><dd>#00607a</dd></dl></div>
|
|
19
|
+
<div class="flex inset-0 bg-primary-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-dark</dt><dd>#00475C</dd></dl></div>
|
|
20
20
|
|
|
21
21
|
{# 2 #}
|
|
22
22
|
<div class="self-center flex items-center p-base border border-neutral-base rounded lg:row-span-4 h-full">
|
|
@@ -25,21 +25,21 @@
|
|
|
25
25
|
</div>
|
|
26
26
|
</div>
|
|
27
27
|
|
|
28
|
-
<div class="flex inset-0 bg-warning-light text-black lg:p-lg"><
|
|
29
|
-
<div class="flex inset-0 bg-warning-base text-black"><
|
|
30
|
-
<div class="flex inset-0 bg-warning-dark font-semibold text-black"><
|
|
28
|
+
<div class="flex inset-0 bg-warning-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-light</dt><dd>#fef6b2</dd></dl></div>
|
|
29
|
+
<div class="flex inset-0 bg-warning-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-base</dt><dd>#fdcb33</dd></dl></div>
|
|
30
|
+
<div class="flex inset-0 bg-warning-dark font-semibold text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-dark</dt><dd>#b88e12</dd></dl></div>
|
|
31
31
|
|
|
32
|
-
<div class="flex inset-0 bg-success-light text-black lg:p-lg"><
|
|
33
|
-
<div class="flex inset-0 bg-success-base text-black"><
|
|
34
|
-
<div class="flex inset-0 bg-success-dark font-semibold text-black"><
|
|
32
|
+
<div class="flex inset-0 bg-success-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-light</dt><dd>#dcf8e2</dd></dl></div>
|
|
33
|
+
<div class="flex inset-0 bg-success-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-base</dt><dd>#24d14c</dd></dl></div>
|
|
34
|
+
<div class="flex inset-0 bg-success-dark font-semibold text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-dark</dt><dd>#1aa23a</dd></dl></div>
|
|
35
35
|
|
|
36
|
-
<div class="flex inset-0 bg-info-light text-black lg:p-lg"><
|
|
37
|
-
<div class="flex inset-0 bg-info-base text-black"><
|
|
38
|
-
<div class="flex inset-0 bg-info-dark font-semibold text-black"><
|
|
36
|
+
<div class="flex inset-0 bg-info-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-light</dt><dd>#feebcc</dd></dl></div>
|
|
37
|
+
<div class="flex inset-0 bg-info-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-base</dt><dd>#fa9902</dd></dl></div>
|
|
38
|
+
<div class="flex inset-0 bg-info-dark font-semibold text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-dark</dt><dd>#c97a00</dd></dl></div>
|
|
39
39
|
|
|
40
|
-
<div class="flex inset-0 bg-alert-light text-black lg:p-lg"><
|
|
41
|
-
<div class="flex inset-0 bg-alert-base text-white"><
|
|
42
|
-
<div class="flex inset-0 bg-alert-dark font-semibold text-white"><
|
|
40
|
+
<div class="flex inset-0 bg-alert-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-light</dt><dd>#fbd3ce</dd></dl></div>
|
|
41
|
+
<div class="flex inset-0 bg-alert-base text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-base</dt><dd>#d22333</dd></dl></div>
|
|
42
|
+
<div class="flex inset-0 bg-alert-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-dark</dt><dd>#a40014</dd></dl></div>
|
|
43
43
|
|
|
44
44
|
{# 3 #}
|
|
45
45
|
<div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
|
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
<p class="font-semibold text-center self-center">Fondo</p>
|
|
48
48
|
</div>
|
|
49
49
|
</div>
|
|
50
|
-
<div class="flex inset-0 bg-white stroke-black text-black lg:p-lg border border-neutral-base"><
|
|
51
|
-
<div class="flex inset-0 bg-neutral-lighter text-black lg:p-lg"><
|
|
52
|
-
<div class="flex inset-0 bg-neutral-light text-black"><
|
|
50
|
+
<div class="flex inset-0 bg-white stroke-black text-black lg:p-lg border border-neutral-base"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">white</dt><dd>#ffffff</dd></dl></div>
|
|
51
|
+
<div class="flex inset-0 bg-neutral-lighter text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-lighter</dt><dd>#f6f6f5</dd></dl></div>
|
|
52
|
+
<div class="flex inset-0 bg-neutral-light text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-light</dt><dd>#ededec</dd></dl></div>
|
|
53
53
|
|
|
54
54
|
{# 4 #}
|
|
55
55
|
<div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
<p class="font-semibold text-center self-center">Contenido</p>
|
|
58
58
|
</div>
|
|
59
59
|
</div>
|
|
60
|
-
<div class="flex inset-0 bg-neutral-base text-black lg:p-lg"><
|
|
61
|
-
<div class="flex inset-0 bg-neutral-dark font-semibold text-white lg:p-lg"><
|
|
62
|
-
<div class="flex inset-0 bg-black font-semibold text-white"><
|
|
60
|
+
<div class="flex inset-0 bg-neutral-base text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-base</dt><dd>#92949b</dd></dl></div>
|
|
61
|
+
<div class="flex inset-0 bg-neutral-dark font-semibold text-white lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-dark</dt><dd>#5e616b</dd></dl></div>
|
|
62
|
+
<div class="flex inset-0 bg-black font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">black</dt><dd>#1f2331</dd></dl></div>
|
|
63
63
|
|
|
64
64
|
{# 5 #}
|
|
65
65
|
<div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
|
|
@@ -67,8 +67,8 @@
|
|
|
67
67
|
<p class="font-semibold text-center self-center">Cabecera</p>
|
|
68
68
|
</div>
|
|
69
69
|
</div>
|
|
70
|
-
<div class="flex inset-0 bg-heading-base font-semibold text-white lg:p-lg"><
|
|
71
|
-
<div class="flex inset-0 bg-heading-dark font-semibold text-white"><
|
|
70
|
+
<div class="flex inset-0 bg-heading-base font-semibold text-white lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">heading-base</dt><dd>#2d495f</dd></dl></div>
|
|
71
|
+
<div class="flex inset-0 bg-heading-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">heading-dark</dt><dd>#21384b</dd></dl></div>
|
|
72
72
|
<div></div>
|
|
73
73
|
|
|
74
74
|
{# 6 #}
|
|
@@ -77,11 +77,11 @@
|
|
|
77
77
|
<p class="font-semibold text-center self-center ">Para gráficas</p>
|
|
78
78
|
</div>
|
|
79
79
|
</div>
|
|
80
|
-
<div class="flex inset-0 bg-[#4d1f2e] font-semibold text-white p-sm lg:p-lg"><
|
|
81
|
-
<div class="flex inset-0 bg-[#aa3c2b] font-semibold text-white p-sm lg:p-lg"><
|
|
82
|
-
<div class="flex inset-0 bg-[#819eae] font-semibold text-black p-sm lg:p-lg"><
|
|
83
|
-
<div class="flex inset-0 bg-[#00607a] font-semibold text-white p-sm lg:p-lg"><
|
|
84
|
-
<div class="flex inset-0 bg-[#013c53] font-semibold text-white p-sm lg:p-lg"><
|
|
80
|
+
<div class="flex inset-0 bg-[#4d1f2e] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>A</dt><dd>#819eae</dd></dl></div>
|
|
81
|
+
<div class="flex inset-0 bg-[#aa3c2b] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>B</dt><dd>#aa3c2b</dd></dl></div>
|
|
82
|
+
<div class="flex inset-0 bg-[#819eae] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>C</dt><dd>#819eae</dd></dl></div>
|
|
83
|
+
<div class="flex inset-0 bg-[#00607a] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>D</dt><dd>#00607a</dd></dl></div>
|
|
84
|
+
<div class="flex inset-0 bg-[#013c53] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>E</dt><dd>#013c53</dd></dl></div>
|
|
85
85
|
<div></div>
|
|
86
86
|
|
|
87
87
|
{# 6 #}
|
|
@@ -90,11 +90,11 @@
|
|
|
90
90
|
<p class="font-semibold text-center self-center ">Para gráficas (ampliación)</p>
|
|
91
91
|
</div>
|
|
92
92
|
</div>
|
|
93
|
-
<div class="flex inset-0 bg-[#ffdc00] font-semibold text-black p-sm lg:p-lg"><
|
|
94
|
-
<div class="flex inset-0 bg-[#ffaa00] font-semibold text-black p-sm lg:p-lg"><
|
|
95
|
-
<div class="flex inset-0 bg-[#ed020d] font-semibold text-white p-sm lg:p-lg"><
|
|
96
|
-
<div class="flex inset-0 bg-[#646464] font-semibold text-white p-sm lg:p-lg"><
|
|
97
|
-
<div class="flex inset-0 bg-[#e1e1e1] text-black p-sm lg:p-lg"><
|
|
93
|
+
<div class="flex inset-0 bg-[#ffdc00] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>F</dt><dd>#ffdc00</dd></dl></div>
|
|
94
|
+
<div class="flex inset-0 bg-[#ffaa00] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>G</dt><dd>#ffaa00</dd></dl></div>
|
|
95
|
+
<div class="flex inset-0 bg-[#ed020d] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>H</dt><dd>#ed020d</dd></dl></div>
|
|
96
|
+
<div class="flex inset-0 bg-[#646464] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>I</dt><dd>#646464</dd></dl></div>
|
|
97
|
+
<div class="flex inset-0 bg-[#e1e1e1] text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>J</dt><dd>#e1e1e1</dd></dl></div>
|
|
98
98
|
<div></div>
|
|
99
99
|
</div>
|
|
100
100
|
|
|
@@ -136,64 +136,6 @@
|
|
|
136
136
|
<p>
|
|
137
137
|
Utiliza en la medida de lo posible estos valores para establecer valores de width y max-width.
|
|
138
138
|
</p>
|
|
139
|
-
<table>
|
|
140
|
-
<thead>
|
|
141
|
-
<tr>
|
|
142
|
-
<th>Nombre</th>
|
|
143
|
-
<th>Tamaño</th>
|
|
144
|
-
<th>Pixels</th>
|
|
145
|
-
<th>Ejemplo de clases</th>
|
|
146
|
-
<th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
|
|
147
|
-
</tr>
|
|
148
|
-
</thead>
|
|
149
|
-
<tbody>
|
|
150
|
-
<tr>
|
|
151
|
-
<td>xs</td>
|
|
152
|
-
<td>20rem</td>
|
|
153
|
-
<td>320px</td>
|
|
154
|
-
<td><code>w-xs</code></td>
|
|
155
|
-
<td class="hidden sm:table-cell">
|
|
156
|
-
<div class="inline-block w-xs h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
|
|
157
|
-
</td>
|
|
158
|
-
</tr>
|
|
159
|
-
<tr>
|
|
160
|
-
<td>sm</td>
|
|
161
|
-
<td>24rem</td>
|
|
162
|
-
<td>384px</td>
|
|
163
|
-
<td><code>w-sm</code></td>
|
|
164
|
-
<td class="hidden sm:table-cell">
|
|
165
|
-
<div class="inline-block w-sm h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
|
|
166
|
-
</td>
|
|
167
|
-
</tr>
|
|
168
|
-
<tr>
|
|
169
|
-
<td>md</td>
|
|
170
|
-
<td>28rem</td>
|
|
171
|
-
<td>448px</td>
|
|
172
|
-
<td><code>w-md</code></td>
|
|
173
|
-
<td class="hidden sm:table-cell">
|
|
174
|
-
<div class="inline-block w-md h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
|
|
175
|
-
</td>
|
|
176
|
-
</tr>
|
|
177
|
-
<tr>
|
|
178
|
-
<td>lg</td>
|
|
179
|
-
<td>32rem</td>
|
|
180
|
-
<td>512px</td>
|
|
181
|
-
<td><code>w-lg</code></td>
|
|
182
|
-
<td class="hidden sm:table-cell">
|
|
183
|
-
<div class="inline-block w-lg h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
|
|
184
|
-
</td>
|
|
185
|
-
</tr>
|
|
186
|
-
<tr>
|
|
187
|
-
<td>xl</td>
|
|
188
|
-
<td>36rem</td>
|
|
189
|
-
<td>576px</td>
|
|
190
|
-
<td><code>w-xl</code></td>
|
|
191
|
-
<td class="hidden sm:table-cell">
|
|
192
|
-
<div class="inline-block w-xl h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
|
|
193
|
-
</td>
|
|
194
|
-
</tr>
|
|
195
|
-
</tbody>
|
|
196
|
-
</table>
|
|
197
139
|
<div class="max-w-full overflow-x-auto">
|
|
198
140
|
<table>
|
|
199
141
|
<thead>
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
<li>
|
|
124
124
|
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
|
|
125
125
|
<dt class="col-span-2 lg:col-span-2">
|
|
126
|
-
<p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block
|
|
126
|
+
<p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block ml-1 no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M22.286057142857143 0H23.142857142857142c0.4733142857142857 0 0.8571428571428571 0.3837565714285714 0.8571428571428571 0.8571428571428571v0.8559548571428571l0 0.0023708571428571424V9.428571428571429c0 0.34668 -0.20879999999999999 0.6592285714285714 -0.5291999999999999 0.7918971428571429 -0.3202285714285714 0.1326685714285714 -0.6889714285714285 0.05933142857142857 -0.9341142857142858 -0.18581142857142857l-3.0733714285714284 -3.073525714285714 -16.536839999999998 16.536754285714284c-0.66948 0.6694285714285714 -1.7549022857142855 0.6694285714285714 -2.424372 0 -0.6694698857142857 -0.6694285714285714 -0.6694698857142857 -1.7549142857142856 0 -2.424342857142857L17.03886857142857 4.536771428571429 13.965342857142856 1.4632337142857141c-0.2451428571428571 -0.24514114285714284 -0.31848 -0.6138137142857142 -0.18581142857142857 -0.9341057142857143C13.912199999999999 0.208836 14.22474857142857 0 14.571428571428571 0h7.713942857142856l0.0006857142857142857 0Z" fill="currentColor"></path></g></svg></a> en un texto.</p>
|
|
127
127
|
</dt>
|
|
128
128
|
<dd class="col-span-2 lg:col-span-2 mb-lg">
|
|
129
129
|
<p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code>. Con un <code>title</code>, <code>svg</code> y <code>target</code></p>
|
package/docs/index.html
CHANGED
|
@@ -38,6 +38,21 @@
|
|
|
38
38
|
|
|
39
39
|
<h2>Changelog (English)</h2>
|
|
40
40
|
<p>What's new in the latest version of desy-html</p>
|
|
41
|
+
<h3>v.8.10.0</h3>
|
|
42
|
+
<ul class="text-sm">
|
|
43
|
+
<li>Updated to Tailwind CSS v3.3.5</li>
|
|
44
|
+
<li>Fixed bugs in Checkboxes and Radio conditionals.</li>
|
|
45
|
+
<li>Added global function to select items in Listbox.</li>
|
|
46
|
+
<li>Added global function to open/close Collapsible and Dialog.</li>
|
|
47
|
+
<li>Accesibility improvements.</li>
|
|
48
|
+
<li>Improvements in Docs.</li>
|
|
49
|
+
</ul>
|
|
50
|
+
<h3>v.8.9.0</h3>
|
|
51
|
+
<ul class="text-sm">
|
|
52
|
+
<li>Added global function to select items and refactor Menu navigation to fix keyboard navigation.</li>
|
|
53
|
+
<li>More improvements of height in offcanvas in Header and Header advanced.</li>
|
|
54
|
+
<li>Improvements in Docs.</li>
|
|
55
|
+
</ul>
|
|
41
56
|
<h3>v.8.8.1</h3>
|
|
42
57
|
<ul class="text-sm">
|
|
43
58
|
<li>Fixed a bug in active items in Nav, Menu horizontal and Menu vertical.</li>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "desy-html",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.10.0",
|
|
4
4
|
"description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Desy (SDA Servicios Digitales de Aragón)",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"postcss": "^8.2.15",
|
|
42
42
|
"postcss-cli": "^10.0.0",
|
|
43
43
|
"postcss-import": "^15.0.0",
|
|
44
|
-
"tailwindcss": "
|
|
44
|
+
"tailwindcss": "^3.3.5"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"browser-sync": "^2.26.13",
|
package/src/css/styles.css
CHANGED
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
@import "../templates/components/button/_styles.button.css";
|
|
21
21
|
@import "../templates/components/button-loader/_styles.button-loader.css";
|
|
22
22
|
@import "../templates/components/checkboxes/_styles.checkboxes.css";
|
|
23
|
+
@import "../templates/components/collapsible/_styles.collapsible.css";
|
|
23
24
|
@import "../templates/components/dialog/_styles.dialog.css";
|
|
24
25
|
@import "../templates/components/dropdown/_styles.dropdown.css";
|
|
25
26
|
@import "../templates/components/header/_styles.header.css";
|
|
@@ -25,7 +25,7 @@ export function HeaderNavigation(aria) {
|
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
aria.HeaderNavigation.prototype.wrapActiveElement = function (elementActive) {
|
|
28
|
-
elementActive.setAttribute('aria-current', '
|
|
28
|
+
elementActive.setAttribute('aria-current', 'page');
|
|
29
29
|
elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
|
|
30
30
|
};
|
|
31
31
|
|