desy-html 5.3.0 → 6.0.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/config/tailwind.config.js +10 -10
- package/docs/_include.template-header.njk +8 -0
- package/docs/_macro.example-render.njk +8 -0
- package/docs/componentes.html +6 -0
- package/docs/ds/_ds.example.accordion.njk +61 -0
- package/docs/ds/_ds.example.footer.njk +7 -128
- package/docs/ds/_ds.example.header.njk +118 -0
- package/docs/ds/_ds.example.layout.njk +16 -6
- package/docs/ds/_ds.example.menu-navigation.njk +494 -0
- package/docs/ds/_ds.example.searchbar.njk +39 -0
- package/docs/ds/_ds.example.table.njk +432 -0
- package/docs/ds/_ds.example.toggle.njk +55 -35
- package/docs/ds/_ds.section.layout.njk +12 -12
- package/docs/ds/_ds.section.navigation.njk +5 -0
- package/docs/ds/_ds.section.textos.njk +27 -0
- package/docs/examples-accordion-history.html +5 -0
- package/docs/examples-menu-navigation.html +5 -0
- package/docs/index.html +39 -0
- package/gulpfile.js +7 -6
- package/package.json +6 -7
- package/src/css/base.css +4 -0
- package/src/css/styles.css +1 -0
- package/src/js/aria/accordion.js +16 -5
- package/src/js/aria/disclosureMenu.js +153 -0
- package/src/js/desy-html.js +15 -0
- package/src/js/index.js +2 -0
- package/src/templates/components/accordion/_examples.accordion.njk +70 -2
- package/src/templates/components/accordion/_template.accordion.njk +18 -8
- package/src/templates/components/accordion/params.accordion.yaml +38 -0
- package/src/templates/components/accordion-history/_examples.accordion-history.njk +356 -0
- package/src/templates/components/accordion-history/_macro.accordion-history.njk +3 -0
- package/src/templates/components/accordion-history/_template.accordion-history.njk +209 -0
- package/src/templates/components/accordion-history/params.accordion-history.yaml +125 -0
- package/src/templates/components/button/_examples.button.njk +7 -0
- package/src/templates/components/button/_styles.button.css +27 -0
- package/src/templates/components/button/_template.button.njk +1 -1
- package/src/templates/components/button-loader/_template.button-loader.njk +6 -6
- package/src/templates/components/file-upload/_template.file-upload.njk +1 -1
- package/src/templates/components/footer/_examples.footer.njk +46 -136
- package/src/templates/components/footer/_template.footer.njk +35 -28
- package/src/templates/components/footer/params.footer.yaml +18 -0
- package/src/templates/components/header/_examples.header.njk +166 -0
- package/src/templates/components/header/_template.header.header__navigation.njk +2 -2
- package/src/templates/components/header/_template.header.njk +7 -3
- package/src/templates/components/header/params.header.yaml +24 -0
- package/src/templates/components/item/_examples.item.njk +1 -1
- package/src/templates/components/item/_template.item.njk +3 -3
- package/src/templates/components/listbox/_styles.listbox.css +7 -4
- package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +25 -0
- package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +26 -0
- package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +1 -1
- package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +1080 -0
- package/src/templates/components/menu-navigation/_macro.menu-navigation.njk +3 -0
- package/src/templates/components/menu-navigation/_styles.menu-navigation.css +216 -0
- package/src/templates/components/menu-navigation/_template.menu-navigation.njk +116 -0
- package/src/templates/components/menu-navigation/params.menu-navigation.yaml +93 -0
- package/src/templates/components/menubar/_examples.menubar.njk +1 -1
- package/src/templates/components/menubar/_styles.menubar.css +26 -5
- package/src/templates/components/modal/_examples.modal.njk +62 -0
- package/src/templates/components/modal/_template.modal.njk +21 -4
- package/src/templates/components/modal/params.modal.yaml +2 -2
- package/src/templates/components/searchbar/_examples.searchbar.njk +12 -1
- package/src/templates/components/searchbar/_template.searchbar.njk +8 -8
- package/src/templates/components/spinner/_styles.spinner.css +1 -0
- package/src/templates/components/spinner/_template.spinner.njk +4 -4
- package/src/templates/components/table-advanced/_examples.table-advanced.njk +182 -5
- package/src/templates/components/table-advanced/_template.table-advanced.njk +26 -2
- package/src/templates/components/table-advanced/params.table-advanced.yaml +5 -0
- package/src/templates/components/toggle/_examples.toggle.njk +33 -11
- package/src/templates/components/toggle/_template.toggle.njk +3 -1
- package/src/templates/components/toggle/params.toggle.yaml +4 -0
- package/src/templates/components/tree/_examples.tree.njk +580 -32
- package/src/templates/components/tree/_template.tree.njk +1 -1
- package/config/clean-css.js +0 -25
|
@@ -4,10 +4,10 @@ text-neutral-dark {{ params.classes if params.classes }}"
|
|
|
4
4
|
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
5
5
|
<div class="container mx-auto px-base {{ params.containerClasses if params.containerClasses }}">
|
|
6
6
|
{% if params.navigation | length %}
|
|
7
|
-
<div class="flex flex-wrap">
|
|
7
|
+
<div class="flex flex-col lg:flex-row flex-wrap gap-base">
|
|
8
8
|
{% for nav in params.navigation %}
|
|
9
|
-
<div class="flex-1
|
|
10
|
-
<h3 class="mb-base
|
|
9
|
+
<div class="lg:flex-1">
|
|
10
|
+
<h3 class="c-h3 mb-base">{{ nav.title }}</h3>
|
|
11
11
|
{% if nav.items | length %}
|
|
12
12
|
{% set listClasses %}
|
|
13
13
|
{% if nav.columns %}
|
|
@@ -36,7 +36,7 @@ text-neutral-dark {{ params.classes if params.classes }}"
|
|
|
36
36
|
{% if params.meta %}
|
|
37
37
|
<h2 class="sr-only">{{ params.meta.visuallyHiddenTitle | default("Enlaces de pie de página") }}</h2>
|
|
38
38
|
{% if params.meta.items | length %}
|
|
39
|
-
<ul class="flex flex-col lg:flex-row lg:flex-wrap">
|
|
39
|
+
<ul class="flex flex-col lg:flex-row lg:flex-wrap mb-base">
|
|
40
40
|
{% for item in params.meta.items %}
|
|
41
41
|
<li class="mb-sm mr-base">
|
|
42
42
|
<a class="c-link font-semibold" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
@@ -52,36 +52,43 @@ text-neutral-dark {{ params.classes if params.classes }}"
|
|
|
52
52
|
</div>
|
|
53
53
|
{% endif %}
|
|
54
54
|
{% endif %}
|
|
55
|
-
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
>
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
55
|
+
{% if params.description %}
|
|
56
|
+
<h2 class="sr-only">{{ params.description.visuallyHiddenTitle | default("Acerca de") }}</h2>
|
|
57
|
+
{% if params.description.text or params.description.html %}
|
|
58
|
+
{{ params.description.html | safe if params.description.html else params.description.text }}
|
|
59
|
+
{% endif %}
|
|
60
|
+
{% else %}
|
|
61
|
+
<div>
|
|
62
|
+
<p>
|
|
63
|
+
Todo el contenido bajo
|
|
64
|
+
<a
|
|
65
|
+
class="c-link c-link--neutral"
|
|
66
|
+
href="https://creativecommons.org/licenses/by/4.0/legalcode.es"
|
|
67
|
+
rel="license"
|
|
68
|
+
>licencia CC BY 4.0</a>
|
|
69
|
+
</p>
|
|
70
|
+
</div>
|
|
71
|
+
<div>
|
|
72
|
+
<p>
|
|
73
|
+
<a
|
|
74
|
+
class="c-link c-link--neutral"
|
|
75
|
+
href="https://www.aragon.es/"
|
|
76
|
+
>Gobierno de Aragón</a>. Edificio Pignatelli. <abbr title=”Paseo”>Pº</abbr> María Agustín, 36. 50004 - Zaragoza - <abbr title="Teléfono" class="no-underline">Tel.</abbr> <a href="tel:+976714000" class="c-link c-link--neutral">976 714 000</a>
|
|
77
|
+
</p>
|
|
78
|
+
</div>
|
|
79
|
+
{% endif %}
|
|
73
80
|
</div>
|
|
74
81
|
<div class="mb-base lg:pl-base overflow-hidden">
|
|
75
82
|
{% if params.icon.html %}
|
|
83
|
+
{{ params.icon.html | safe }}
|
|
84
|
+
{% endif %}
|
|
85
|
+
{% if not params.noLogo %}
|
|
76
86
|
<p>
|
|
77
|
-
|
|
87
|
+
<a href="http://www.aragon.es/Fondos_Europeos" class="inline-block text-sm c-link no-underline -ml-sm" title="Más información sobre los Fondos Estructurales y de Inversión Europeos (Fondos EIE)">
|
|
88
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 575 96" width="288" height="48" class="w-auto h-12" role="img" aria-label="Logotipo Unión Europea. Fondo Europeo de Desarrollo Regional (FEDER). Construyendo Europa desde Aragón."><text transform="translate(126 33)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans" font-weight="700"><tspan x="0" y="0">UNIÓN EUROPEA</tspan></text><text transform="translate(126 56)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans"><tspan x="0" y="0">Fondo Europeo de Desarrollo Regional (FEDER)</tspan></text><text transform="translate(126 79)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans"><tspan x="0" y="0">“Construyendo Europa desde Aragón”</tspan></text><path fill="#039" stroke="#fff" stroke-width="1%" d="M14.086 13.02h104.282v69.522H14.086z"/><g fill="#fc0"><path d="M64.004 28.167l2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606h-2.755l-.843-2.628-.843 2.631h-2.753l2.233 1.606zM52.617 31.229l2.2-1.606 2.2 1.606-.836-2.6 2.233-1.606h-2.755l-.843-2.631-.843 2.634H51.22l2.234 1.606zM46.486 32.743l-.843 2.634H42.89l2.234 1.606-.837 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.234-1.606h-2.752zM43.429 49.345l2.2 1.606-.836-2.6 2.234-1.606h-2.753l-.843-2.631-.843 2.637-2.755-.006 2.235 1.606-.837 2.6zM47.332 58.156l-.843-2.631-.843 2.634h-2.753l2.234 1.606-.837 2.6 2.2-1.609 2.2 1.609-.837-2.6 2.234-1.606zM55.677 66.504l-.843-2.628-.842 2.631h-2.755l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.836-2.6 2.234-1.606zM67.05 69.528l-.843-2.631-.842 2.634H62.61l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606zM78.422 66.504l-.842-2.628-.845 2.631h-2.752l2.232 1.606-.836 2.6 2.2-1.606 2.2 1.606-.839-2.6 2.235-1.606zM86.774 58.156l-.845-2.631-.845 2.634h-2.752l2.235 1.606-.839 2.6 2.2-1.609 2.2 1.609-.839-2.6 2.235-1.606zM92.551 46.716h-2.755l-.845-2.631-.842 2.634h-2.755l2.235 1.606-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6zM83.728 39.544l2.2-1.606 2.2 1.606-.839-2.6 2.235-1.6h-2.752l-.845-2.631-.845 2.634H82.33l2.235 1.6zM77.613 24.395l-.842 2.634-2.755-.006 2.232 1.609-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6 2.235-1.609h-2.758z"/></g></svg>
|
|
89
|
+
</a>
|
|
78
90
|
</p>
|
|
79
91
|
{% endif %}
|
|
80
|
-
<p>
|
|
81
|
-
<a href="http://www.aragon.es/Fondos_Europeos" class="inline-block text-sm c-link no-underline" title="Más información sobre los Fondos Estructurales y de Inversión Europeos (Fondos EIE)">
|
|
82
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 575 96" width="288" height="48" class="w-auto h-12" role="img" aria-label="Logotipo Unión Europea. Fondo Europeo de Desarrollo Regional (FEDER). Construyendo Europa desde Aragón."><text transform="translate(126 33)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans" font-weight="700"><tspan x="0" y="0">UNIÓN EUROPEA</tspan></text><text transform="translate(126 56)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans"><tspan x="0" y="0">Fondo Europeo de Desarrollo Regional (FEDER)</tspan></text><text transform="translate(126 79)" fill="#039" font-size="20" font-family="Arial, Tahoma, Verdana, Calibri, Garamond, Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, HelveticaNeue-Bold, Helvetica Neue, Helvetica, sans"><tspan x="0" y="0">“Construyendo Europa desde Aragón”</tspan></text><path fill="#039" stroke="#fff" stroke-width="1%" d="M14.086 13.02h104.282v69.522H14.086z"/><g fill="#fc0"><path d="M64.004 28.167l2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606h-2.755l-.843-2.628-.843 2.631h-2.753l2.233 1.606zM52.617 31.229l2.2-1.606 2.2 1.606-.836-2.6 2.233-1.606h-2.755l-.843-2.631-.843 2.634H51.22l2.234 1.606zM46.486 32.743l-.843 2.634H42.89l2.234 1.606-.837 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.234-1.606h-2.752zM43.429 49.345l2.2 1.606-.836-2.6 2.234-1.606h-2.753l-.843-2.631-.843 2.637-2.755-.006 2.235 1.606-.837 2.6zM47.332 58.156l-.843-2.631-.843 2.634h-2.753l2.234 1.606-.837 2.6 2.2-1.609 2.2 1.609-.837-2.6 2.234-1.606zM55.677 66.504l-.843-2.628-.842 2.631h-2.755l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.836-2.6 2.234-1.606zM67.05 69.528l-.843-2.631-.842 2.634H62.61l2.234 1.606-.836 2.6 2.2-1.606 2.2 1.606-.837-2.6 2.235-1.606zM78.422 66.504l-.842-2.628-.845 2.631h-2.752l2.232 1.606-.836 2.6 2.2-1.606 2.2 1.606-.839-2.6 2.235-1.606zM86.774 58.156l-.845-2.631-.845 2.634h-2.752l2.235 1.606-.839 2.6 2.2-1.609 2.2 1.609-.839-2.6 2.235-1.606zM92.551 46.716h-2.755l-.845-2.631-.842 2.634h-2.755l2.235 1.606-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6zM83.728 39.544l2.2-1.606 2.2 1.606-.839-2.6 2.235-1.6h-2.752l-.845-2.631-.845 2.634H82.33l2.235 1.6zM77.613 24.395l-.842 2.634-2.755-.006 2.232 1.609-.836 2.6 2.2-1.609 2.2 1.609-.836-2.6 2.235-1.609h-2.758z"/></g></svg>
|
|
83
|
-
</a>
|
|
84
|
-
</p>
|
|
85
92
|
</div>
|
|
86
93
|
</div>
|
|
87
94
|
</div>
|
|
@@ -30,6 +30,20 @@ params:
|
|
|
30
30
|
type: object
|
|
31
31
|
required: false
|
|
32
32
|
description: HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
|
|
33
|
+
- name: description
|
|
34
|
+
type: object
|
|
35
|
+
required: false
|
|
36
|
+
description: Object containing options for the description content. If not defined, it defaults to `Todo el contenido bajo licencia CC BY 4.0. Gobierno de Aragón. Edificio Pignatelli. Pº María Agustín, 36. 50004 - Zaragoza - Tel. 976 714 000`
|
|
37
|
+
params:
|
|
38
|
+
- name: visuallyHiddenTitle
|
|
39
|
+
type: string
|
|
40
|
+
description: Title for a meta item section, which defaults to Support links
|
|
41
|
+
- name: html
|
|
42
|
+
type: string
|
|
43
|
+
description: HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
|
|
44
|
+
- name: text
|
|
45
|
+
type: string
|
|
46
|
+
description: Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored.
|
|
33
47
|
- name: navigation
|
|
34
48
|
type: array
|
|
35
49
|
required: false
|
|
@@ -60,6 +74,10 @@ params:
|
|
|
60
74
|
type: object
|
|
61
75
|
required: false
|
|
62
76
|
description: HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
|
|
77
|
+
- name: noLogo
|
|
78
|
+
type: boolean
|
|
79
|
+
required: false
|
|
80
|
+
description: When true, there will be no UE Feder logo.
|
|
63
81
|
- name: icon
|
|
64
82
|
type: object
|
|
65
83
|
required: false
|
|
@@ -1,5 +1,116 @@
|
|
|
1
1
|
{% from "components/nav/_macro.nav.njk" import componentNav %}
|
|
2
2
|
{% from "components/details/_macro.details.njk" import componentDetails %}
|
|
3
|
+
{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}
|
|
4
|
+
|
|
5
|
+
{% set navigationCustom %}
|
|
6
|
+
{{ componentMenuNavigation({
|
|
7
|
+
"idPrefix": "header-custom-nav",
|
|
8
|
+
"classes": "bg-black c-menu-navigation--last-right w-full",
|
|
9
|
+
"items": [
|
|
10
|
+
{
|
|
11
|
+
"text": "Custom Item 1",
|
|
12
|
+
"id": "header-custom-nav-item-1",
|
|
13
|
+
"classes": "c-menu-navigation__button--header -mr-base uppercase",
|
|
14
|
+
"sub": {
|
|
15
|
+
"items": [
|
|
16
|
+
{
|
|
17
|
+
"href": "#",
|
|
18
|
+
"text": "Subitem 1"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"href": "#",
|
|
22
|
+
"text": "Subitem 2"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"href": "#",
|
|
26
|
+
"text": "Subitem 3"
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"attributes": {
|
|
30
|
+
"aria-labelledby": "header-custom-nav-item-1"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"text": "Custom Active Item 2",
|
|
36
|
+
"id": "header-custom-nav-item-2",
|
|
37
|
+
"classes": "c-menu-navigation__button--header -mr-base uppercase",
|
|
38
|
+
"active": true,
|
|
39
|
+
"sub": {
|
|
40
|
+
"items": [
|
|
41
|
+
{
|
|
42
|
+
"href": "#",
|
|
43
|
+
"text": "Subitem 1"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"href": "#",
|
|
47
|
+
"text": "Subitem 2",
|
|
48
|
+
"active": true
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"href": "#",
|
|
52
|
+
"text": "Subitem 3"
|
|
53
|
+
}
|
|
54
|
+
],
|
|
55
|
+
"attributes": {
|
|
56
|
+
"aria-labelledby": "header-custom-nav-item-2"
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"text": "Custom Item 3",
|
|
62
|
+
"id": "header-custom-nav-item-3",
|
|
63
|
+
"classes": "c-menu-navigation__button--header -mr-base uppercase",
|
|
64
|
+
"sub": {
|
|
65
|
+
"items": [
|
|
66
|
+
{
|
|
67
|
+
"href": "#",
|
|
68
|
+
"text": "Subitem 1"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"href": "#",
|
|
72
|
+
"text": "Subitem 2"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"href": "#",
|
|
76
|
+
"text": "Subitem 3"
|
|
77
|
+
}
|
|
78
|
+
],
|
|
79
|
+
"attributes": {
|
|
80
|
+
"aria-labelledby": "header-custom-nav-item-3"
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"text": "Item 4 right",
|
|
86
|
+
"id": "header-custom-nav-item-4",
|
|
87
|
+
"classes": "c-menu-navigation__button--header uppercase",
|
|
88
|
+
"sub": {
|
|
89
|
+
"items": [
|
|
90
|
+
{
|
|
91
|
+
"href": "#",
|
|
92
|
+
"text": "Subitem 1"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"href": "#",
|
|
96
|
+
"text": "Subitem 2"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"href": "#",
|
|
100
|
+
"text": "Subitem 3"
|
|
101
|
+
}
|
|
102
|
+
],
|
|
103
|
+
"attributes": {
|
|
104
|
+
"aria-labelledby": "header-custom-nav-item-4"
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
],
|
|
109
|
+
"attributes": {
|
|
110
|
+
"aria-label": "Navegación principal"
|
|
111
|
+
}
|
|
112
|
+
}) }}
|
|
113
|
+
{% endset %}
|
|
3
114
|
|
|
4
115
|
{% set exampleOffcanvas %}
|
|
5
116
|
<nav class="w-full p-2" aria-label="Menú móvil">
|
|
@@ -116,6 +227,28 @@
|
|
|
116
227
|
}
|
|
117
228
|
}
|
|
118
229
|
},
|
|
230
|
+
{
|
|
231
|
+
"name": "with custom navigation",
|
|
232
|
+
"description": "Tras nuestro menú de navegación tenemos una zona anidable para poder añadir una navegación personalizada",
|
|
233
|
+
"data": {
|
|
234
|
+
"homepageUrl": "/",
|
|
235
|
+
"subnav": {
|
|
236
|
+
"text": "Carpeta del gestor"
|
|
237
|
+
},
|
|
238
|
+
"customNavigationHtml": '<div class="flex flex-wrap flex-1 gap-base">'+ navigationCustom | safe + '</div>'
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"name": "with custom navigation right",
|
|
243
|
+
"description": "En el customNavigationHtml podemos añadir elementos posicionados a la derecha",
|
|
244
|
+
"data": {
|
|
245
|
+
"homepageUrl": "/",
|
|
246
|
+
"subnav": {
|
|
247
|
+
"text": "Carpeta del gestor"
|
|
248
|
+
},
|
|
249
|
+
"customNavigationHtml": '<div class="relative flex justify-end items-center flex-1 gap-base"><div class="absolute -top-3 right-0 text-white"><a href="#"><svg class="w-5 h-5" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-label="Notificaciones"><path d="M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(3.42857)"/><g transform="scale(3.42857)"><circle cx="10.5" cy="2.5" r="2.5" fill="currentColor"/><path d="M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z" fill="currentColor"/></g></svg></a></div></div>'
|
|
250
|
+
}
|
|
251
|
+
},
|
|
119
252
|
{
|
|
120
253
|
"name": "with custom skipLink",
|
|
121
254
|
"description": "Pasando parámetros customizados al componente Skip Link. Útil para hacer plantillas de página con barra lateral o con un contenido principal localizado en otro sitio diferente al habitual.",
|
|
@@ -187,6 +320,39 @@
|
|
|
187
320
|
}
|
|
188
321
|
}
|
|
189
322
|
},
|
|
323
|
+
{
|
|
324
|
+
"name": "No logo y customLogoHtml",
|
|
325
|
+
"description": "noLogo: true. Oculta el logotipo del Gobierno de Aragón. customLogoHtml para insertar un logotipo o HTML personalizado en su lugar",
|
|
326
|
+
"data": {
|
|
327
|
+
"homepageUrl": "/",
|
|
328
|
+
"noLogo": true,
|
|
329
|
+
"customLogoHtml": '<svg class="fill-current" width="144" height="32" id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 423.76 83.87" aria-label="Gobierno de Aragón" role="img"><title>Ir a la página de inicio</title><defs><style>.cls-1{fill:currentColor}</style></defs><path class="cls-1" d="M0 52.4v8.29s4.78 3.42 8.45 3 44.2-9.18 51.41-9.57S72.06 54 76.13 56s10.36 5.38 10.36 5.38v-9ZM64.32 65.68c-8.26 2-32.39 6.82-40.66 7.21a34.19 34.19 0 0 1-15.87-3.27C6.22 69 0 65 0 65v9h86.49v-7.9s-2.76-2.38-5-2.91-8.92.53-17.18 2.49M21.67 26.07a8.62 8.62 0 0 1-3.24 7.11c-2.16 1.73-5.16 2.6-9 2.6a21.1 21.1 0 0 1-9.41-2v-6.57a38.66 38.66 0 0 0 5.7 2.12 16.75 16.75 0 0 0 4.26.61 6 6 0 0 0 3.56-.89 3 3 0 0 0 1.24-2.64 2.88 2.88 0 0 0-.55-1.74 6.08 6.08 0 0 0-1.6-1.47 38.09 38.09 0 0 0-4.33-2.26 20.45 20.45 0 0 1-4.57-2.76A10.17 10.17 0 0 1 1.3 15.1 8.76 8.76 0 0 1 .39 11a8.59 8.59 0 0 1 3-6.95c2-1.69 4.75-2.53 8.26-2.53a19.52 19.52 0 0 1 4.95.61 34.24 34.24 0 0 1 4.92 1.73l-2.27 5.5a33.2 33.2 0 0 0-4.4-1.53 14.06 14.06 0 0 0-3.42-.43 4.52 4.52 0 0 0-3.07.93 3.07 3.07 0 0 0-1.07 2.44 3 3 0 0 0 .43 1.63 4.94 4.94 0 0 0 1.38 1.35 41.72 41.72 0 0 0 4.47 2.33c3.1 1.49 5.23 3 6.39 4.48a8.79 8.79 0 0 1 1.72 5.51M46.65 18.52q0-10.74-9.46-10.74h-3.76v21.71h3q10.18 0 10.19-11m7.38-.15q0 8.23-4.7 12.66t-13.5 4.32h-9.42V2h10.44Q45 2 49.47 6.3t4.5 12M74.8 21.46Q71.45 10.68 71 9.27c-.28-.95-.48-1.69-.6-2.24q-.75 2.93-4.3 14.43Zm4.09 13.86-2.41-7.93H64.36L62 35.32h-7.6L66.09 1.86h8.62l11.78 33.46ZM126.49 23.49a7.21 7.21 0 0 1-2.81 6.05 12.16 12.16 0 0 1-7.63 2.18 19 19 0 0 1-8-1.35v-3.3a21.62 21.62 0 0 0 3.95 1.21 20.91 20.91 0 0 0 4.21.44 8.45 8.45 0 0 0 5.14-1.3 4.26 4.26 0 0 0 1.65-3.61 4.64 4.64 0 0 0-.62-2.51 5.65 5.65 0 0 0-2-1.8 29.29 29.29 0 0 0-4.38-1.87 13.94 13.94 0 0 1-5.85-3.48 7.7 7.7 0 0 1-1.76-5.26A6.54 6.54 0 0 1 111 3.48a10.6 10.6 0 0 1 6.75-2 19.92 19.92 0 0 1 8 1.61l-1.07 3a18.1 18.1 0 0 0-7.06-1.53 6.83 6.83 0 0 0-4.24 1.17 3.82 3.82 0 0 0-1.52 3.24 4.9 4.9 0 0 0 .56 2.5 5.21 5.21 0 0 0 1.89 1.79A22.71 22.71 0 0 0 118.4 15q4.62 1.65 6.35 3.55a7 7 0 0 1 1.74 4.91M139.15 11.65a5.45 5.45 0 0 0-4.23 1.73 8 8 0 0 0-1.85 4.79h11.5a7.35 7.35 0 0 0-1.41-4.84 4.92 4.92 0 0 0-4-1.68m.9 20.07a10.09 10.09 0 0 1-7.7-3c-1.88-2-2.82-4.74-2.82-8.27a12.87 12.87 0 0 1 2.61-8.45 8.7 8.7 0 0 1 7-3.13 8.25 8.25 0 0 1 6.54 2.72 10.46 10.46 0 0 1 2.41 7.2v2.11H133a8.72 8.72 0 0 0 1.95 5.9 6.77 6.77 0 0 0 5.23 2 17.76 17.76 0 0 0 7-1.49v3a17.56 17.56 0 0 1-3.34 1.1 18.88 18.88 0 0 1-3.81.33M162.23 8.85a13.13 13.13 0 0 1 2.63.25l-.47 3.1a10.82 10.82 0 0 0-2.41-.31 5.84 5.84 0 0 0-4.56 2.18 7.91 7.91 0 0 0-1.9 5.41v11.84h-3.33V9.26h2.75l.38 4.08h.16a9.8 9.8 0 0 1 3-3.32 6.63 6.63 0 0 1 3.8-1.17M174.53 31.32l-8.35-22.06h3.58l4.73 13.08c1.07 3.06 1.7 5 1.89 6h.16a44.09 44.09 0 0 1 1.4-4.42q1.17-3.36 5.27-14.62h3.57l-8.35 22.06ZM192.77 31.32h-3.33V9.26h3.33Zm-3.61-28a2.18 2.18 0 0 1 .56-1.68 1.92 1.92 0 0 1 1.4-.53 2 2 0 0 1 1.39.54 2.17 2.17 0 0 1 .58 1.67 2.21 2.21 0 0 1-.58 1.68 1.94 1.94 0 0 1-1.39.55 1.9 1.9 0 0 1-1.4-.55 2.24 2.24 0 0 1-.56-1.68M206.91 31.72a9.37 9.37 0 0 1-7.4-2.95q-2.62-3-2.62-8.34 0-5.54 2.66-8.56t7.58-3a14.86 14.86 0 0 1 3.17.34 10.41 10.41 0 0 1 2.49.8l-1 2.84a15.86 15.86 0 0 0-2.41-.73 10.46 10.46 0 0 0-2.31-.3q-6.7 0-6.71 8.58a10.24 10.24 0 0 0 1.64 6.23 5.69 5.69 0 0 0 4.85 2.17 14.85 14.85 0 0 0 5.64-1.19v3a11.94 11.94 0 0 1-5.56 1.15M219.4 31.32h-3.34V9.26h3.34Zm-3.62-28a2.22 2.22 0 0 1 .56-1.68 2.1 2.1 0 0 1 2.8 0 2.21 2.21 0 0 1 .58 1.67 2.25 2.25 0 0 1-.58 1.69 2.06 2.06 0 0 1-2.8 0 2.29 2.29 0 0 1-.56-1.68M226.89 20.27q0 4.22 1.68 6.44a6.69 6.69 0 0 0 9.93 0q1.69-2.2 1.7-6.45t-1.7-6.39a6 6 0 0 0-5-2.19 5.86 5.86 0 0 0-4.94 2.16q-1.67 2.14-1.66 6.42m16.76 0q0 5.39-2.71 8.42a9.53 9.53 0 0 1-7.49 3 9.87 9.87 0 0 1-5.24-1.39 9.17 9.17 0 0 1-3.53-4 13.88 13.88 0 0 1-1.25-6.07q0-5.4 2.69-8.41a9.54 9.54 0 0 1 7.47-3 9.3 9.3 0 0 1 7.34 3.07 12.17 12.17 0 0 1 2.72 8.34M262 25.3a5.56 5.56 0 0 1-2.29 4.75 10.79 10.79 0 0 1-6.43 1.67 13.88 13.88 0 0 1-6.82-1.39v-3.1a16.44 16.44 0 0 0 3.4 1.27 14.1 14.1 0 0 0 3.5.46 8 8 0 0 0 4-.83 2.89 2.89 0 0 0 .29-4.75 17.31 17.31 0 0 0-4.35-2.17 23.31 23.31 0 0 1-4.36-2 5.94 5.94 0 0 1-1.93-1.94 5.11 5.11 0 0 1-.63-2.6 4.94 4.94 0 0 1 2.19-4.25 10.15 10.15 0 0 1 6-1.56 17.66 17.66 0 0 1 6.95 1.44l-1.13 2.7a16 16 0 0 0-6-1.37 6.89 6.89 0 0 0-3.58.75 2.3 2.3 0 0 0-1.2 2 2.52 2.52 0 0 0 .45 1.51 4.47 4.47 0 0 0 1.46 1.19 33.24 33.24 0 0 0 3.85 1.63 14.32 14.32 0 0 1 5.29 2.88A5.06 5.06 0 0 1 262 25.3M297.22 16.44c0-3.83-1-6.73-2.88-8.67s-4.77-2.92-8.56-2.92h-5v23.51H285q6.11 0 9.18-3t3.07-8.91m3.61-.12q0 7.29-3.94 11.14t-11.35 3.86h-8.13V1.89h9q6.84 0 10.64 3.8t3.79 10.63M308.65 31.32h-3.33V9.26h3.33ZM305 3.28a2.22 2.22 0 0 1 .56-1.68 1.93 1.93 0 0 1 1.44-.53 2 2 0 0 1 1.38.54 2.17 2.17 0 0 1 .62 1.67 2.21 2.21 0 0 1-.61 1.72 1.93 1.93 0 0 1-1.38.55A1.91 1.91 0 0 1 305.6 5a2.29 2.29 0 0 1-.6-1.72M316.19 16.32a4.49 4.49 0 0 0 1.3 3.5 5.16 5.16 0 0 0 3.63 1.18c3.26 0 4.88-1.58 4.88-4.75s-1.64-5-4.94-5a4.86 4.86 0 0 0-3.61 1.27 5.11 5.11 0 0 0-1.26 3.76M314.38 35a3 3 0 0 0 1.5 2.72 8.41 8.41 0 0 0 4.32.92q4.2 0 6.22-1.26a3.84 3.84 0 0 0 2-3.41 2.7 2.7 0 0 0-1.1-2.48 8.47 8.47 0 0 0-4.16-.7h-4a5.26 5.26 0 0 0-3.54 1.09 3.88 3.88 0 0 0-1.24 3.12m17.55-25.74v2.11l-4.08.48a7.08 7.08 0 0 1 1 1.85 6.87 6.87 0 0 1 .45 2.56 6.52 6.52 0 0 1-2.21 5.17 8.92 8.92 0 0 1-6.09 1.94 9.75 9.75 0 0 1-1.84-.17c-1.42.76-2.13 1.7-2.13 2.84a1.45 1.45 0 0 0 .74 1.34 5.43 5.43 0 0 0 2.55.43h3.9a8.75 8.75 0 0 1 5.49 1.51 5.25 5.25 0 0 1 1.91 4.39 6.27 6.27 0 0 1-2.93 5.59q-2.93 1.92-8.55 1.92a11.67 11.67 0 0 1-6.65-1.61 5.21 5.21 0 0 1-2.34-4.55 5.14 5.14 0 0 1 1.28-3.48 6.55 6.55 0 0 1 3.62-2 3.44 3.44 0 0 1-1.42-1.18 3.16 3.16 0 0 1-.57-1.87 3.57 3.57 0 0 1 .64-2.12 6.85 6.85 0 0 1 2-1.75 5.94 5.94 0 0 1-2.7-2.39 7 7 0 0 1-1.08-3.87 7.17 7.17 0 0 1 2.17-5.58 8.86 8.86 0 0 1 6.15-2 11.1 11.1 0 0 1 3.11.41ZM338.36 31.32H335V9.26h3.34Zm-3.62-28a2.22 2.22 0 0 1 .56-1.68 2.1 2.1 0 0 1 2.8 0 2.21 2.21 0 0 1 .58 1.67A2.25 2.25 0 0 1 338.1 5a2.06 2.06 0 0 1-2.8 0 2.29 2.29 0 0 1-.56-1.68M351.29 29a10.58 10.58 0 0 0 1.71-.13 12.37 12.37 0 0 0 1.3-.27v2.55a6 6 0 0 1-1.59.44 12.47 12.47 0 0 1-1.9.17q-6.39 0-6.38-6.74V11.85h-3.16v-1.61l3.16-1.39 1.4-4.71h1.93v5.12h6.38v2.59h-6.38v13a4.47 4.47 0 0 0 .94 3.06 3.27 3.27 0 0 0 2.59 1.09M364 29a6.74 6.74 0 0 0 4.89-1.71 6.32 6.32 0 0 0 1.78-4.79v-2l-3.33.14a12 12 0 0 0-5.73 1.24 3.71 3.71 0 0 0-1.76 3.41 3.42 3.42 0 0 0 1.09 2.71 4.49 4.49 0 0 0 3.06 1m7.53 2.36-.66-3.14h-.16a9.28 9.28 0 0 1-3.28 2.8 10 10 0 0 1-4.09.74 7.38 7.38 0 0 1-5.13-1.76 6.17 6.17 0 0 1-1.85-4.81q0-6.69 10.66-7l3.73-.12v-1.35a5.61 5.61 0 0 0-1.11-3.83 4.59 4.59 0 0 0-3.57-1.24 14.57 14.57 0 0 0-6.22 1.69l-1-2.55a15.59 15.59 0 0 1 3.57-1.39 15.15 15.15 0 0 1 3.88-.51c2.63 0 4.57.59 5.84 1.76s1.89 3 1.89 5.61v15.06ZM379.15 0h3.33v31.32h-3.33zM396.31 11.65a5.44 5.44 0 0 0-4.22 1.73 8 8 0 0 0-1.86 4.79h11.5a7.41 7.41 0 0 0-1.4-4.84 5 5 0 0 0-4-1.68m.91 20.07a10.07 10.07 0 0 1-7.7-3c-1.88-2-2.82-4.74-2.82-8.27s.87-6.38 2.62-8.48a8.68 8.68 0 0 1 7-3.13 8.29 8.29 0 0 1 6.55 2.72 10.51 10.51 0 0 1 2.41 7.2v2.11h-15.15a8.77 8.77 0 0 0 2 5.9 6.75 6.75 0 0 0 5.23 2 17.72 17.72 0 0 0 7-1.49v3a17.56 17.56 0 0 1-3.34 1.1 18.84 18.84 0 0 1-3.8.33M423.76 25.3a5.53 5.53 0 0 1-2.29 4.75 10.77 10.77 0 0 1-6.42 1.67 13.9 13.9 0 0 1-6.83-1.39v-3.1a16.44 16.44 0 0 0 3.4 1.27 14.11 14.11 0 0 0 3.51.46 8 8 0 0 0 4-.83 2.77 2.77 0 0 0 1.41-2.55 2.74 2.74 0 0 0-1.12-2.2 17.38 17.38 0 0 0-4.34-2.17 23.16 23.16 0 0 1-4.37-2 6 6 0 0 1-1.93-1.94 5.11 5.11 0 0 1-.63-2.6 4.94 4.94 0 0 1 2.19-4.25 10.18 10.18 0 0 1 6-1.56 17.63 17.63 0 0 1 6.95 1.44l-1.18 2.7a16 16 0 0 0-6-1.37 6.83 6.83 0 0 0-3.57.75 2.29 2.29 0 0 0-1.21 2 2.52 2.52 0 0 0 .45 1.51 4.47 4.47 0 0 0 1.46 1.19 33.24 33.24 0 0 0 3.85 1.63 14.23 14.23 0 0 1 5.29 2.88 5.06 5.06 0 0 1 1.38 3.64M117.74 71.58q3.41 0 5-1.86t1.53-6V63q0-4.68-1.55-6.69t-5-2a5.1 5.1 0 0 0-4.49 2.28 11.39 11.39 0 0 0-1.58 6.41q0 4.23 1.55 6.38a5.22 5.22 0 0 0 4.54 2.16m6.66-.54h-.18a7.83 7.83 0 0 1-6.91 3.36 8.16 8.16 0 0 1-6.71-3c-1.6-2-2.4-4.78-2.4-8.42s.8-6.46 2.41-8.47a8.11 8.11 0 0 1 6.7-3 8 8 0 0 1 6.87 3.26h.26l-.14-1.59-.08-1.55v-9h3.33V74h-2.71ZM141.34 54.31a5.45 5.45 0 0 0-4.23 1.69 7.93 7.93 0 0 0-1.85 4.79h11.5a7.33 7.33 0 0 0-1.41-4.79 4.92 4.92 0 0 0-4-1.68m.9 20.06a10.12 10.12 0 0 1-7.7-3q-2.82-3-2.82-8.28a12.84 12.84 0 0 1 2.62-8.47 8.71 8.71 0 0 1 7-3.14 8.26 8.26 0 0 1 6.54 2.73 10.44 10.44 0 0 1 2.41 7.19v2.12h-15.12a8.69 8.69 0 0 0 1.95 5.89 6.74 6.74 0 0 0 5.23 2 17.76 17.76 0 0 0 7-1.49v3a17.49 17.49 0 0 1-3.31 1.07 18.88 18.88 0 0 1-3.81.33M179.69 61.53l-3.41-9.11c-.44-1.16-.89-2.57-1.36-4.25a39.64 39.64 0 0 1-1.27 4.25l-3.45 9.11ZM184.41 74l-3.65-9.36H169L165.38 74h-3.45l11.6-29.54h2.87L188 74ZM200.73 51.51a13 13 0 0 1 2.63.24l-.46 3.1a11.37 11.37 0 0 0-2.41-.3 5.86 5.86 0 0 0-4.57 2.17 8 8 0 0 0-1.92 5.42V74h-3.34V51.91h2.75l.39 4.09h.2a9.6 9.6 0 0 1 2.95-3.32 6.6 6.6 0 0 1 3.79-1.17M211.74 71.62a6.78 6.78 0 0 0 4.89-1.71 6.35 6.35 0 0 0 1.77-4.79v-2l-3.33.14a12.17 12.17 0 0 0-5.73 1.24 3.74 3.74 0 0 0-1.76 3.41 3.45 3.45 0 0 0 1.1 2.76 4.52 4.52 0 0 0 3.06 1m7.53 2.33-.67-3.14h-.16a9.32 9.32 0 0 1-3.28 2.81 10 10 0 0 1-4.09.73 7.29 7.29 0 0 1-5.07-1.72 6.16 6.16 0 0 1-1.86-4.81q0-6.68 10.66-7l3.73-.12v-1.37a5.6 5.6 0 0 0-1.11-3.83 4.55 4.55 0 0 0-3.56-1.24 14.47 14.47 0 0 0-6.28 1.69l-1-2.56a15.88 15.88 0 0 1 7.42-1.89q3.93 0 5.83 1.75t1.89 5.62V74ZM229.13 59a4.5 4.5 0 0 0 1.31 3.5 5.21 5.21 0 0 0 3.63 1.19c3.26 0 4.88-1.59 4.88-4.75 0-3.32-1.64-5-4.94-5a4.9 4.9 0 0 0-3.61 1.26 5.14 5.14 0 0 0-1.27 3.8m-1.8 18.69a3 3 0 0 0 1.5 2.72 8.3 8.3 0 0 0 4.32.93q4.2 0 6.21-1.26a3.85 3.85 0 0 0 2-3.41 2.72 2.72 0 0 0-1.1-2.49 8.65 8.65 0 0 0-4.16-.69h-4a5.24 5.24 0 0 0-3.54 1.09 3.88 3.88 0 0 0-1.26 3.11m17.54-25.76V54l-4.07.48a7 7 0 0 1 1 1.84 6.93 6.93 0 0 1 .44 2.57 6.53 6.53 0 0 1-2.2 5.17A8.92 8.92 0 0 1 234 66a9.77 9.77 0 0 1-1.84-.16c-1.42.75-2.13 1.7-2.13 2.84a1.46 1.46 0 0 0 .74 1.34 5.43 5.43 0 0 0 2.55.43h3.89a8.7 8.7 0 0 1 5.5 1.51 5.28 5.28 0 0 1 1.91 4.39 6.25 6.25 0 0 1-2.96 5.65q-2.92 1.92-8.55 1.92a11.62 11.62 0 0 1-6.66-1.61 5.19 5.19 0 0 1-2.33-4.54 5.1 5.1 0 0 1 1.28-3.49 6.55 6.55 0 0 1 3.61-2 3.42 3.42 0 0 1-1.41-1.19 3.14 3.14 0 0 1-.57-1.87 3.54 3.54 0 0 1 .64-2.11 6.58 6.58 0 0 1 2-1.75 5.9 5.9 0 0 1-2.78-2.4 7 7 0 0 1-1.08-3.86 7.14 7.14 0 0 1 2.19-5.63 8.83 8.83 0 0 1 6.14-2 11.57 11.57 0 0 1 3.12.4ZM253.29 48.49c.64-.83 1.33-1.84 2.08-3a31.94 31.94 0 0 0 1.75-3.08h4.06v.43a31.2 31.2 0 0 1-2.63 3.16 31 31 0 0 1-3 3h-2.23Zm-3.85 14.43q0 4.23 1.68 6.44a6.67 6.67 0 0 0 9.93 0q1.69-2.2 1.7-6.45t-1.7-6.39a6 6 0 0 0-5-2.18 5.88 5.88 0 0 0-4.94 2.15q-1.66 2.16-1.66 6.42m16.76 0q0 5.4-2.71 8.43a9.53 9.53 0 0 1-7.49 3 10 10 0 0 1-5.25-1.34 9.17 9.17 0 0 1-3.53-4 13.92 13.92 0 0 1-1.23-6.08q0-5.39 2.69-8.4a9.51 9.51 0 0 1 7.47-3 9.3 9.3 0 0 1 7.34 3.08 12.14 12.14 0 0 1 2.72 8.33M285.44 74V59.7a5.77 5.77 0 0 0-1.22-4 5 5 0 0 0-3.84-1.33q-3.45 0-5.06 1.87t-1.6 6.18V74h-3.34V51.91h2.71l.55 3h.16a6.79 6.79 0 0 1 2.87-2.52 9.25 9.25 0 0 1 4.11-.9q4 0 6 1.92t2 6.15V74Z"/></svg>',
|
|
330
|
+
"subnav": {
|
|
331
|
+
"text": "Carpeta del gestor"
|
|
332
|
+
},
|
|
333
|
+
"navigation": {
|
|
334
|
+
"items": [
|
|
335
|
+
{
|
|
336
|
+
"href": "#1",
|
|
337
|
+
"text": "Navigation item 1"
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"href": "#2",
|
|
341
|
+
"text": "Navigation item 2",
|
|
342
|
+
"active": true
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"href": "#3",
|
|
346
|
+
"text": "Navigation item 3"
|
|
347
|
+
},
|
|
348
|
+
{
|
|
349
|
+
"href": "#4",
|
|
350
|
+
"text": "Navigation item 4"
|
|
351
|
+
}
|
|
352
|
+
]
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
},
|
|
190
356
|
{
|
|
191
357
|
"name": "con offcanvas",
|
|
192
358
|
"description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
{% endif %}
|
|
20
20
|
{% endif %}
|
|
21
21
|
{% if item.active %}
|
|
22
|
-
<a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 font-bold text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base" aria-current="page"><strong>{{ item.html | safe if item.html else item.text }}</strong></a>
|
|
22
|
+
<a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 font-bold text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base" aria-current="page" {%- if item.target %} target="{{ item.target }}"{% endif %}><strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong></a>
|
|
23
23
|
{% else %}
|
|
24
|
-
<a href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%}" {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%}>{{ item.html | safe if item.html else item.text }}</a>
|
|
24
|
+
<a href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%}" {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %}>{{ item.html | safe if item.html else item.text }}</a>
|
|
25
25
|
{% endif %}
|
|
26
26
|
</li>
|
|
27
27
|
{% endif %}
|
|
@@ -22,9 +22,12 @@
|
|
|
22
22
|
<div class="flex items-center justify-between min-h-14">
|
|
23
23
|
<div class="flex flex-wrap items-center">
|
|
24
24
|
<div class="flex items-center flex-shrink-0">
|
|
25
|
-
<a href="{{ params.homepageUrl | default('/') }}" class="text-white focus:outline-none focus:shadow-outline-warning" title="Ir a la página de inicio">
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
<a href="{{ params.homepageUrl | default('/') }}" class="flex flex-wrap text-white focus:outline-none focus:shadow-outline-warning" title="Ir a la página de inicio">
|
|
26
|
+
{% if not params.noLogo %}
|
|
27
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.878 51.894" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Gobierno de Aragón" role="img"><title>Ir a la página de inicio</title><path data-name="img" d="M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z"/><path data-name="typo" d="M59.352 45.091V32.36h2.074c4.307 0 6.668 2.266 6.668 6.382 0 4.212-2.265 6.349-6.7 6.349zm15.489-16.974v21.281h14.1v-4.307h-9.348v-4.85h9.253v-4.308h-9.253v-3.542h9.348v-4.275zm32.389 0l-7.757 21.282h5.041l2.3-6.477h6.509l2.265 6.477h5.138l-7.912-21.281zm2.807 4.4l-1.978 6.287h3.989zm63.051 6h-4.754v6.7a6.262 6.262 0 01-2.042.288c-3.638 0-6.317-2.84-6.317-6.7 0-4.147 2.84-6.923 7.051-6.923a11.142 11.142 0 016.062 1.851v-4.849a17.388 17.388 0 00-6.477-1.276c-6.891 0-11.677 4.626-11.677 11.262 0 6.54 4.689 10.976 11.677 10.976a19.329 19.329 0 006.477-1.117zm24.023.192c0-6.35-4.722-10.976-11.167-10.976a11.024 11.024 0 00.16 22.047c6.445.001 11.007-4.593 11.007-11.07zm-11.1-6.637c-3.573 0-5.966 2.713-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.681 5.934-6.7s-2.428-6.699-6.033-6.699zm12.94-3.956v21.281h4.85v-13.56l8.58 13.56h4.5V28.116h-4.849l.006 13.235-8.237-13.235zm-126.6-15h-4.754v6.7a6.266 6.266 0 01-2.042.287c-3.637 0-6.317-2.84-6.317-6.7 0-4.148 2.84-6.923 7.051-6.923a11.152 11.152 0 016.062 1.85V3.481a17.386 17.386 0 00-6.477-1.277c-6.891 0-11.677 4.626-11.677 11.263 0 6.54 4.69 10.974 11.677 10.974a19.342 19.342 0 006.477-1.116zm24 .191c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.159 22.046c6.437-.002 11-4.597 11-11.074zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.457 6.7 6.062 6.7c3.573 0 5.935-2.68 5.935-6.7s-2.437-6.702-6.042-6.702zm12.695-3.956v21.281h8.806c4.69 0 7.433-2.33 7.433-6.318 0-2.743-1.563-4.721-4.435-5.551a4.665 4.665 0 002.9-4.371c.032-3.382-2.265-5.041-6.859-5.041zm7.083 7.944c2.074 0 2.9-.575 2.9-2.01 0-1.372-.8-1.882-3.062-1.882h-2.074v3.892zm.638 9c2.36 0 3.381-.734 3.381-2.457 0-1.786-1.053-2.489-3.573-2.489h-2.679v4.946zm14.274-16.942h-4.768v21.281h4.754zm2.07 0v21.281h14.1v-4.307h-9.349v-4.85h9.253v-4.307h-9.253V6.993h9.349V2.718zm75.145 10.592c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.16 22.046c6.435-.004 10.997-4.599 10.997-11.076zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.68 5.934-6.7s-2.438-6.704-6.043-6.704zm-37.783 32.132l-2.01-6.287-1.978 6.287zM126.43 49.398v-8.743h.606c3.063 0 3.382.319 5.423 5.583a10.7 10.7 0 00.447 1.085l.415.989a9.523 9.523 0 00.51 1.085h6.911l2.3-6.477h6.509l2.265 6.477h5.137l-7.912-21.281h-5.583l-6.288 17.258a89.817 89.817 0 01-1.549-3.411c-.83-1.819-1.308-2.362-2.84-3a5.086 5.086 0 003.892-5.106c0-3.828-2.52-5.743-7.593-5.743h-7.53v21.281zm0-12.763h2.105c2.042 0 3.063-.734 3.063-2.265s-.926-2.2-3-2.2h-2.17zm16.613-12.643V15.25h.605c3.063 0 3.382.319 5.424 5.583a10.427 10.427 0 00.447 1.085l.415.989a9.465 9.465 0 00.51 1.085h9.578l.027-13.652 8.555 13.652h4.5V2.711h-4.849l.021 13.056-8.252-13.056h-4.851v19.812a44.3 44.3 0 01-2.942-5.962c-.829-1.818-1.307-2.36-2.839-3a5.085 5.085 0 003.892-5.1c0-3.829-2.521-5.743-7.594-5.743h-7.529v21.281zm0-12.762h2.106c2.041 0 3.062-.734 3.062-2.265s-.924-2.2-3-2.2h-2.169zM54.53 28.117v21.281h7.114c7.21 0 11.454-3.956 11.454-10.657 0-6.669-4.339-10.625-11.709-10.625z" fill-rule="evenodd"/></svg>
|
|
28
|
+
<svg class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" viewBox="0 0 51.894 51.894" width="32" height="32" aria-label="Gobierno de Aragón" role="img"><title>Ir a la página de inicio</title><path data-name="img" d="M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z"/></svg>
|
|
29
|
+
{% endif %}
|
|
30
|
+
{{ params.customLogoHtml | safe if params.customLogoHtml }}
|
|
28
31
|
</a>
|
|
29
32
|
{% if params.subnav %}
|
|
30
33
|
{% from "./_macro.header.header__subnav.njk" import componentHeaderSubnav %}
|
|
@@ -66,6 +69,7 @@
|
|
|
66
69
|
}) | indent(12) }}
|
|
67
70
|
{% endif %}
|
|
68
71
|
</div>
|
|
72
|
+
{{ params.customNavigationHtml | safe if params.customNavigationHtml }}
|
|
69
73
|
{% if params.dropdown.items or params.dropdown.contentHtml %}
|
|
70
74
|
{% from "./_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
|
|
71
75
|
{% call componentHeaderDropdown({
|
|
@@ -11,6 +11,14 @@ params:
|
|
|
11
11
|
type: boolean
|
|
12
12
|
required: false
|
|
13
13
|
description: When true, the logo has the complete logo with text. Use it when showing header to citizen public apps.
|
|
14
|
+
- name: noLogo
|
|
15
|
+
type: boolean
|
|
16
|
+
required: false
|
|
17
|
+
description: When true, there will be no Gobierno de Aragón logo.
|
|
18
|
+
- name: customLogoHtml
|
|
19
|
+
type: string
|
|
20
|
+
required: false
|
|
21
|
+
description: HTML for the custom logo. If provided there will appear a custom logo after the Gobierno de Aragón logo
|
|
14
22
|
- name: subnav
|
|
15
23
|
type: object
|
|
16
24
|
required: false
|
|
@@ -57,6 +65,10 @@ params:
|
|
|
57
65
|
type: string
|
|
58
66
|
required: true
|
|
59
67
|
description: Item link.
|
|
68
|
+
- name: target
|
|
69
|
+
type: string
|
|
70
|
+
required: false
|
|
71
|
+
description: The target where the item should link to.
|
|
60
72
|
- name: text
|
|
61
73
|
type: string
|
|
62
74
|
required: true
|
|
@@ -135,6 +147,10 @@ params:
|
|
|
135
147
|
type: string
|
|
136
148
|
required: true
|
|
137
149
|
description: Item link.
|
|
150
|
+
- name: target
|
|
151
|
+
type: string
|
|
152
|
+
required: false
|
|
153
|
+
description: The target where the item should link to.
|
|
138
154
|
- name: text
|
|
139
155
|
type: string
|
|
140
156
|
required: true
|
|
@@ -193,6 +209,10 @@ params:
|
|
|
193
209
|
type: string
|
|
194
210
|
required: false
|
|
195
211
|
description: Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item.
|
|
212
|
+
- name: target
|
|
213
|
+
type: string
|
|
214
|
+
required: false
|
|
215
|
+
description: The target where the item should link to.
|
|
196
216
|
- name: active
|
|
197
217
|
type: boolean
|
|
198
218
|
required: false
|
|
@@ -201,6 +221,10 @@ params:
|
|
|
201
221
|
type: object
|
|
202
222
|
required: false
|
|
203
223
|
description: HTML attributes (for example data attributes) to add to the navigation item anchor.
|
|
224
|
+
- name: customNavigationHtml
|
|
225
|
+
type: string
|
|
226
|
+
required: false
|
|
227
|
+
description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation after the default one.
|
|
204
228
|
- name: offcanvas
|
|
205
229
|
type: object
|
|
206
230
|
required: false
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
"html": "<a class=\" c-link break-all \" href=\" # \">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
|
|
180
180
|
},
|
|
181
181
|
"icon": {
|
|
182
|
-
"html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
182
|
+
"html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de papelera" focusable="false" role="img"><path d="M19.5 7.5h-15A.5.5 0 0 0 4 8v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a.5.5 0 0 0-.5-.5Zm-9.25 13a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0Zm5 0a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0ZM22 4h-4.75a.25.25 0 0 1-.25-.25V2.5A2.5 2.5 0 0 0 14.5 0h-5A2.5 2.5 0 0 0 7 2.5v1.25a.25.25 0 0 1-.25.25H2a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2ZM9 3.75V2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1.25a.25.25 0 0 1-.25.25h-5.5A.25.25 0 0 1 9 3.75Z" fill="currentColor" transform="scale(2)"/></svg>'
|
|
183
183
|
},
|
|
184
184
|
"caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-6a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-6a t6">Eliminar</button></li><li><button id="b-6b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-6b t6">Editar</button></li></ul>'
|
|
185
185
|
}
|
|
@@ -16,11 +16,11 @@
|
|
|
16
16
|
{% if params.icon.html %}
|
|
17
17
|
{{ params.icon.html | safe }}
|
|
18
18
|
{% elseif params.icon.type == 'document' %}
|
|
19
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
19
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de documento" focusable="false" role="img"><path d="m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z" fill="currentColor" transform="scale(2)"/><path d="M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(2)"/></svg>
|
|
20
20
|
{% elseif params.icon.type == 'link' %}
|
|
21
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
21
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de enlace" focusable="false" role="img"><path d="M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z" fill="currentColor" transform="scale(2)"/><path d="M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z" fill="currentColor" transform="scale(2)"/><path d="m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z" fill="currentColor" transform="scale(2)"/></svg>
|
|
22
22
|
{% elseif params.icon.type == 'clipboard' %}
|
|
23
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
23
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de datos" focusable="false" role="img"><path d="M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z" fill="currentColor" transform="scale(2)"/><path d="M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z" fill="currentColor" transform="scale(2)"/><path d="M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(2)"/></svg>
|
|
24
24
|
{% endif %}
|
|
25
25
|
</div>
|
|
26
26
|
{% endif %}
|
|
@@ -80,11 +80,14 @@
|
|
|
80
80
|
@apply font-bold;
|
|
81
81
|
|
|
82
82
|
&::before {
|
|
83
|
-
|
|
83
|
+
@apply bg-center bg-no-repeat bg-cover;
|
|
84
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Cpath d='M4,12.5a2,2,0,0,1-1.55-.78L.25,9.23A1,1,0,0,1,.34,7.81a1,1,0,0,1,1.41.1l2.06,2.33a.21.21,0,0,0,.18.09.23.23,0,0,0,.18-.08l8.11-8.44a1,1,0,0,1,1.44,1.38l-8.2,8.63A1.94,1.94,0,0,1,4,12.5Z' style='fill: %23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
|
|
85
|
+
content: '';
|
|
86
|
+
@apply w-3;
|
|
87
|
+
@apply h-3;
|
|
84
88
|
@apply absolute;
|
|
85
|
-
@apply top-
|
|
86
|
-
@apply left-
|
|
87
|
-
@apply p-sm;
|
|
89
|
+
@apply top-3;
|
|
90
|
+
@apply left-2;
|
|
88
91
|
}
|
|
89
92
|
}
|
|
90
93
|
}
|
|
@@ -161,6 +161,31 @@
|
|
|
161
161
|
}
|
|
162
162
|
}
|
|
163
163
|
},
|
|
164
|
+
{
|
|
165
|
+
"name": "with classes applied: tabs in mobile",
|
|
166
|
+
"description": "Modifier class applied: .c-menu-horizontal--tabs-mobile",
|
|
167
|
+
"data": {
|
|
168
|
+
"classes": "c-menu-horizontal--tabs-mobile",
|
|
169
|
+
"items": [
|
|
170
|
+
{
|
|
171
|
+
"href": "#",
|
|
172
|
+
"html": '<span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em"><g transform="scale(2)"><circle cx="2.5" cy="4" r="2.5" fill="currentColor"/><path d="M8.5 5H23a1 1 0 0 0 0-2H8.5a1 1 0 0 0 0 2Z" fill="currentColor"/><circle cx="2.5" cy="12" r="2.5" fill="currentColor"/><path d="M23 11H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z" fill="currentColor"/><circle cx="2.5" cy="20" r="2.5" fill="currentColor"/><path d="M23 19H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z" fill="currentColor"/></g></svg></span><span class="block text-sm">Seguimiento</span></span>'
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"href": "#",
|
|
176
|
+
"html": '<span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M11 8h3.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2ZM11 12h7.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2Z" fill="currentColor" transform="scale(2)"/><path d="M23.71 5.71 18.29.29a1 1 0 0 0-.7-.29H8a2 2 0 0 0-2 2v11.17c0 .19.1.33.25.33h1.5a.25.25 0 0 0 .25-.25v-11A.25.25 0 0 1 8.25 2h8.82a.31.31 0 0 1 .18.07l4.68 4.68a.31.31 0 0 1 .07.18v12.82a.25.25 0 0 1-.25.25h-6a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H22a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7Z" fill="currentColor" transform="scale(2)"/><path d="M13 15H6a1 1 0 0 1-.8-.4l-.9-1.2a1 1 0 0 0-.8-.4H1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Z" fill="currentColor" transform="scale(2)"/></svg></span><span class="block text-sm">Documentos</span></span>',
|
|
177
|
+
"active": true
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"href": "#",
|
|
181
|
+
"html": '<span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM19.5 22h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h1.75a.25.25 0 0 1 .25.25V13a.5.5 0 0 0 .31.46.47.47 0 0 0 .54-.11l2-2a.27.27 0 0 1 .36 0l2 2a.47.47 0 0 0 .35.15.43.43 0 0 0 .19 0 .5.5 0 0 0 .25-.5V2.25a.25.25 0 0 1 .25-.25H15a.49.49 0 0 1 .36.15l4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5Z" fill="currentColor" transform="scale(2)"/></svg></span><span class="block text-sm">Notificaciones</span></span>'
|
|
182
|
+
}
|
|
183
|
+
],
|
|
184
|
+
"attributes": {
|
|
185
|
+
"aria-label": "Menu horizontal"
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
},
|
|
164
189
|
{
|
|
165
190
|
"name": "with idPrefix",
|
|
166
191
|
"description": "See code to display the idPrefix applied",
|
|
@@ -20,6 +20,32 @@
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
.c-menu-horizontal--tabs-mobile {
|
|
24
|
+
@apply w-full;
|
|
25
|
+
@apply border-b;
|
|
26
|
+
@apply border-neutral-dark;
|
|
27
|
+
|
|
28
|
+
.c-menu-horizontal__list {
|
|
29
|
+
@apply flex;
|
|
30
|
+
@apply -mb-0.5;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.c-menu-horizontal__active {
|
|
34
|
+
@apply px-base;
|
|
35
|
+
@apply py-base;
|
|
36
|
+
@apply bg-white;
|
|
37
|
+
@apply border-neutral-base;
|
|
38
|
+
@apply border-b-0;
|
|
39
|
+
@apply rounded-t;
|
|
40
|
+
@apply no-underline;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.c-menu-horizontal__link {
|
|
44
|
+
@apply px-base;
|
|
45
|
+
@apply py-base;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
23
49
|
.c-menu-horizontal__link {
|
|
24
50
|
&:focus span{
|
|
25
51
|
@apply bg-warning-base;
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
</span>
|
|
27
27
|
{% else %}
|
|
28
28
|
<a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
|
|
29
|
-
{%- if item.disabled %} no-underline pointer-events-none{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
29
|
+
{%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
30
30
|
<span class="flex items-center pointer-events-none">
|
|
31
31
|
{{ item.html | safe if item.html else item.text }}
|
|
32
32
|
</span>
|