desy-html 11.2.0 → 12.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/docs/_global.foot.njk +1 -1
- package/docs/_macro.example-render.njk +62 -18
- package/docs/ds/_ds.section.textos.njk +1 -1
- package/docs/index.html +10 -0
- package/docs/pagina-prueba.html +2 -2
- package/package.json +2 -2
- package/src/css/component.text.css +0 -1
- package/src/js/aria/utils.js +80 -15
- package/src/js/desy-html.js +239 -196
- package/src/js/filters/filter-caller.js +4 -2
- package/src/js/filters/filter-escape-ltgt.js +7 -0
- package/src/js/filters/filter-quotes.js +50 -0
- package/src/js/filters/filter-version.js +8 -0
- package/src/js/filters/index.js +7 -1
- package/src/templates/components/accordion/_examples.accordion.njk +107 -107
- package/src/templates/components/accordion/_template.accordion.njk +5 -5
- package/src/templates/components/accordion-history/_examples.accordion-history.njk +119 -119
- package/src/templates/components/accordion-history/_template.accordion-history.njk +11 -11
- package/src/templates/components/alert/_examples.alert.njk +2 -2
- package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +4 -4
- package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +4 -4
- package/src/templates/components/button/_examples.button.njk +19 -19
- package/src/templates/components/button/_template.button.njk +2 -2
- package/src/templates/components/button-loader/_examples.button-loader.njk +17 -17
- package/src/templates/components/button-loader/_template.button-loader.njk +2 -2
- package/src/templates/components/card/_examples.card.njk +3 -3
- package/src/templates/components/card/_template.card.njk +4 -4
- package/src/templates/components/character-count/_examples.character-count.njk +2 -2
- package/src/templates/components/checkboxes/_examples.checkboxes.njk +6 -6
- package/src/templates/components/checkboxes/_template.checkboxes.njk +2 -2
- package/src/templates/components/collapsible/_examples.collapsible.njk +4 -4
- package/src/templates/components/collapsible/_template.collapsible.njk +1 -1
- package/src/templates/components/date-input/_template.date-input.njk +1 -1
- package/src/templates/components/datepicker/_examples.datepicker.njk +45 -62
- package/src/templates/components/datepicker/_styles.datepicker.css +4 -0
- package/src/templates/components/datepicker/_template.datepicker.njk +10 -2
- package/src/templates/components/description-list/_examples.description-list.njk +3 -3
- package/src/templates/components/description-list/_template.description-list.njk +2 -2
- package/src/templates/components/details/_examples.details.njk +3 -3
- package/src/templates/components/details/_template.details.njk +1 -1
- package/src/templates/components/dialog/_examples.dialog.njk +4 -4
- package/src/templates/components/dropdown/_examples.dropdown.njk +31 -17
- package/src/templates/components/dropdown/_template.dropdown.njk +1 -1
- package/src/templates/components/error-message/_examples.error-message.njk +1 -1
- package/src/templates/components/error-message/_template.error-message.njk +1 -1
- package/src/templates/components/error-summary/_template.error-summary.njk +2 -2
- package/src/templates/components/fieldset/_examples.fieldset.njk +3 -3
- package/src/templates/components/fieldset/_template.fieldset.njk +7 -7
- package/src/templates/components/footer/_examples.footer.njk +32 -32
- package/src/templates/components/footer/_template.footer.njk +6 -6
- package/src/templates/components/header/_examples.header.njk +14 -8
- package/src/templates/components/header/_template.header.header__navigation.njk +2 -2
- package/src/templates/components/header/_template.header.header__offcanvasButton.njk +1 -1
- package/src/templates/components/header/_template.header.header__subnav.njk +1 -1
- package/src/templates/components/header/_template.header.njk +2 -2
- package/src/templates/components/header-advanced/_examples.header-advanced.njk +14 -8
- package/src/templates/components/header-advanced/_template.header-advanced.njk +3 -3
- package/src/templates/components/header-mini/_examples.header-mini.njk +3 -3
- package/src/templates/components/header-mini/_template.header-mini.njk +2 -2
- package/src/templates/components/hint/_examples.hint.njk +1 -1
- package/src/templates/components/hint/_template.hint.njk +1 -1
- package/src/templates/components/input/_examples.input.njk +7 -7
- package/src/templates/components/input-group/_examples.input-group.njk +1 -1
- package/src/templates/components/input-group/_template.input-group.njk +1 -1
- package/src/templates/components/item/_examples.item.njk +23 -23
- package/src/templates/components/item/_template.item.njk +9 -9
- package/src/templates/components/label/_examples.label.njk +2 -2
- package/src/templates/components/label/_template.label.njk +1 -1
- package/src/templates/components/links-list/_examples.links-list.njk +29 -32
- package/src/templates/components/links-list/_template.links-list.njk +11 -11
- package/src/templates/components/listbox/_examples.listbox.njk +16 -16
- package/src/templates/components/listbox/_template.listbox.njk +3 -3
- package/src/templates/components/media-object/_examples.media-object.njk +5 -5
- package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +16 -16
- package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +2 -2
- package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +6 -6
- package/src/templates/components/menu-navigation/_template.menu-navigation.njk +4 -4
- package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +8 -8
- package/src/templates/components/menu-vertical/_template.menu-vertical.njk +9 -9
- package/src/templates/components/menubar/_examples.menubar.njk +16 -16
- package/src/templates/components/menubar/_template.menubar.njk +7 -7
- package/src/templates/components/modal/_examples.modal.njk +18 -18
- package/src/templates/components/modal/_template.modal.njk +8 -8
- package/src/templates/components/nav/_examples.nav.njk +7 -7
- package/src/templates/components/nav/_template.nav.njk +2 -2
- package/src/templates/components/notification/_examples.notification.njk +9 -9
- package/src/templates/components/notification/_template.notification.njk +11 -11
- package/src/templates/components/pagination/_examples.pagination.njk +6 -6
- package/src/templates/components/pagination/_template.pagination.njk +3 -3
- package/src/templates/components/pill/_examples.pill.njk +8 -8
- package/src/templates/components/pill/_template.pill.njk +3 -3
- package/src/templates/components/radios/_examples.radios.njk +2 -2
- package/src/templates/components/radios/_template.radios.njk +1 -1
- package/src/templates/components/select/_examples.select.njk +1 -1
- package/src/templates/components/skip-link/_examples.skip-link.njk +1 -1
- package/src/templates/components/skip-link/_template.skip-link.njk +1 -1
- package/src/templates/components/status/_examples.status.njk +1 -1
- package/src/templates/components/status/_template.status.njk +1 -1
- package/src/templates/components/status-item/_examples.status-item.njk +15 -15
- package/src/templates/components/status-item/_template.status-item.njk +3 -3
- package/src/templates/components/table/_examples.table.njk +3 -3
- package/src/templates/components/table/_template.table.njk +2 -2
- package/src/templates/components/table-advanced/_examples.table-advanced.njk +7 -7
- package/src/templates/components/table-advanced/_template.table-advanced.njk +5 -5
- package/src/templates/components/tabs/_examples.tabs.njk +19 -19
- package/src/templates/components/tabs/_styles.tabs.css +2 -2
- package/src/templates/components/tabs/_template.tabs.njk +7 -7
- package/src/templates/components/textarea/_examples.textarea.njk +2 -2
- package/src/templates/components/toggle/_examples.toggle.njk +29 -29
- package/src/templates/components/toggle/_template.toggle.njk +2 -2
- package/src/templates/components/tooltip/_examples.tooltip.njk +11 -11
- package/src/templates/components/tooltip/_template.tooltip.njk +3 -3
- package/src/templates/components/tree/_examples.tree.njk +12 -60
- package/src/templates/components/tree/_template.tree.njk +4 -4
- package/src/templates/includes/_test-include.njk +2 -2
- package/src/templates/pages/_page.footer.njk +1 -1
- package/src/templates/pages/_template.logged-selector-subheader.njk +1 -1
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
<div class="flex justify-between">
|
|
24
24
|
{% if params.heading.html or params.heading.text %}
|
|
25
25
|
{% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
|
|
26
|
-
{% set headingContent %}{{ params.heading.html | safe if params.heading.html else params.heading.text }}{% endset %}
|
|
26
|
+
{% set headingContent %}{{ params.heading.html | filterquotes | safe if params.heading.html else params.heading.text }}{% endset %}
|
|
27
27
|
{% if params.headingLevel == "1" %}
|
|
28
28
|
<h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
|
|
29
29
|
{% elseif params.headingLevel == "2" %}
|
|
@@ -83,14 +83,14 @@
|
|
|
83
83
|
<span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
|
|
84
84
|
<span class="c-accordion__show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
|
|
85
85
|
{% if item.show %}
|
|
86
|
-
{{ item.show.html | safe if item.show.html else item.show.text }}
|
|
86
|
+
{{ item.show.html | filterquotes | safe if item.show.html else item.show.text }}
|
|
87
87
|
{% else %}
|
|
88
88
|
Mostrar
|
|
89
89
|
{% endif %}
|
|
90
90
|
</span>
|
|
91
91
|
<span class="c-accordion__hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
|
|
92
92
|
{% if item.hide %}
|
|
93
|
-
{{ item.hide.html | safe if item.hide.html else item.hide.text }}
|
|
93
|
+
{{ item.hide.html | filterquotes | safe if item.hide.html else item.hide.text }}
|
|
94
94
|
{% else %}
|
|
95
95
|
Ocultar
|
|
96
96
|
{% endif %}
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
{% if item.status == 'current' %}
|
|
129
129
|
<div class="absolute -top-px -left-5 h-6 border-2 border-primary-base"></div>
|
|
130
130
|
{% elseif item.status == 'pending' %}
|
|
131
|
-
<div class="absolute -top-px -left-5 h-6 border-2 border-neutral-
|
|
131
|
+
<div class="absolute -top-px -left-5 h-6 border-2 border-neutral-base border-dashed"></div>
|
|
132
132
|
{% elseif item.status == 'muted' %}
|
|
133
133
|
<div class="absolute -top-px -left-5 h-6 border-2 border-neutral-base"></div>
|
|
134
134
|
{% elseif item.status == 'currentmuted' %}
|
|
@@ -139,13 +139,13 @@
|
|
|
139
139
|
{% endif %}
|
|
140
140
|
{% if not loop.last %}
|
|
141
141
|
{% if item.status == 'current' %}
|
|
142
|
-
<div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-
|
|
142
|
+
<div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-base border-dashed"></div>
|
|
143
143
|
{% elseif item.status == 'pending' %}
|
|
144
|
-
<div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-
|
|
144
|
+
<div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-base border-dashed"></div>
|
|
145
145
|
{% elseif item.status == 'muted' %}
|
|
146
146
|
<div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-base"></div>
|
|
147
147
|
{% elseif item.status == 'currentmuted' %}
|
|
148
|
-
<div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-
|
|
148
|
+
<div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-base"></div>
|
|
149
149
|
{% else %}
|
|
150
150
|
<div class="absolute top-6 bottom-0 -left-5 border-2 border-primary-base"></div>
|
|
151
151
|
{% endif %}
|
|
@@ -172,18 +172,18 @@
|
|
|
172
172
|
{%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
173
173
|
{% if not loop.last %}
|
|
174
174
|
{% if item.status == 'current' %}
|
|
175
|
-
<div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-
|
|
175
|
+
<div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-base border-dashed"></div>
|
|
176
176
|
{% elseif item.status == 'pending' %}
|
|
177
|
-
<div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-
|
|
177
|
+
<div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-base border-dashed"></div>
|
|
178
178
|
{% elseif item.status == 'muted' %}
|
|
179
179
|
<div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-base"></div>
|
|
180
180
|
{% elseif item.status == 'currentmuted' %}
|
|
181
|
-
<div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-
|
|
181
|
+
<div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-base"></div>
|
|
182
182
|
{% else %}
|
|
183
183
|
<div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-primary-base"></div>
|
|
184
184
|
{% endif %}
|
|
185
185
|
{% endif %}
|
|
186
|
-
{{ item.html | safe if item.html else item.text }}
|
|
186
|
+
{{ item.html | filterquotes | safe if item.html else item.text }}
|
|
187
187
|
</div>
|
|
188
188
|
</div>
|
|
189
189
|
{% endif %}
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
{% set examples = [
|
|
44
44
|
{
|
|
45
45
|
"name": "alert mostrando una notificación de éxito",
|
|
46
|
-
"description":
|
|
46
|
+
"description": "Utilizamos los atributos <code>'role': 'alert'</code> y <code>'aria-live': 'assertive'</code>, para que lo lea el lector de pantalla. La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente.",
|
|
47
47
|
"data": {
|
|
48
48
|
"button": {
|
|
49
49
|
"text": "Abrir éxito",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
},
|
|
62
62
|
{
|
|
63
63
|
"name": "alert mostrando una notificación de alerta",
|
|
64
|
-
"description":
|
|
64
|
+
"description": "Utilizamos los atributos <code>'role': 'alert'</code> y <code>'aria-live': 'assertive'</code>, para que lo lea el lector de pantalla. La función <code>openAlert</code> toma como primer argumento el <code>id</code> del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente. El tercer argumento es el <code>id</code> del elemento al que queremos que vaya el foco al abrir el elemento emergente, que suele ser el título de una notificación.",
|
|
65
65
|
"data": {
|
|
66
66
|
"button": {
|
|
67
67
|
"text": "Abrir alerta",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
},
|
|
76
76
|
{
|
|
77
77
|
"name": "Último item más largo y con truncado en cadenas largas",
|
|
78
|
-
"description":
|
|
78
|
+
"description": "Usa la clase <code>.c-breadcrumbs--truncated</code> para hacer que los items se trunquen solo si tienen mucha anchura (mayor que <code>20rem</code>), como el penúltimo item de este ejemplo. Y que el último item ocupe el espacio restante, truncándose si es necesario, al final, si no le queda espacio suficiente.",
|
|
79
79
|
"data": {
|
|
80
80
|
"classes": "c-breadcrumbs--truncated",
|
|
81
81
|
"items": [
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
},
|
|
181
181
|
{
|
|
182
182
|
"name": "con inline en móvil",
|
|
183
|
-
"description":
|
|
183
|
+
"description": "Usa <code>'inlineOnMobile':true</code> para hacer que los elementos se pongan en linea en móvil en lugar de truncarse. Mirar en anchuras pequeñas para ver cómo se genera un salto de línea si el texto no cabe. Si se quiere también en desktop, usar el parámetro <code>inlineOnDesktop</code>. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.",
|
|
184
184
|
"data": {
|
|
185
185
|
"inlineOnMobile": true,
|
|
186
186
|
"items": [
|
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
},
|
|
222
222
|
{
|
|
223
223
|
"name": "con inline en desktop",
|
|
224
|
-
"description":
|
|
224
|
+
"description": "Usa <code>'inlineOnDesktop':true</code> para hacer que los elementos se pongan en linea en escritorio y anchuras superiores, en lugar de truncarse. Se genera un salto de línea si el texto no cabe en escritorio, no en mobile. Si se quiere también en mobile, usar el parámetro <code>inlineOnMobile</code>.",
|
|
225
225
|
"data": {
|
|
226
226
|
"inlineOnDesktop": true,
|
|
227
227
|
"items": [
|
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
},
|
|
263
263
|
{
|
|
264
264
|
"name": "con inline en mobile y en desktop",
|
|
265
|
-
"description":
|
|
265
|
+
"description": "Usa <code>'inlineOnMobile':true</code> y <code>'inlineOnDesktop':true</code> para hacer que los elementos se pongan en linea en todas las anchuras. Se genera un salto de línea si el texto no cabe en escritorio y en mobile. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.",
|
|
266
266
|
"data": {
|
|
267
267
|
"inlineOnMobile": true,
|
|
268
268
|
"inlineOnDesktop": true,
|
|
@@ -55,9 +55,9 @@ lg:grid-cols-max-content-8{% endif %}
|
|
|
55
55
|
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark hover:text-black {% if loop.last %} flex-1 font-semibold{% endif %}">
|
|
56
56
|
<a class="underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if loop.last %} text-black font-semibold no-underline{% endif %} truncate" href="{{ item.href }}" {% if loop.last %} aria-current="page"{% endif %}{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
57
57
|
{% if loop.last %}
|
|
58
|
-
<strong>{{ item.html | safe if item.html else item.text }}</strong>
|
|
58
|
+
<strong>{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
|
|
59
59
|
{% else %}
|
|
60
|
-
{{ item.html | safe if item.html else item.text }}
|
|
60
|
+
{{ item.html | filterquotes | safe if item.html else item.text }}
|
|
61
61
|
{% endif %}
|
|
62
62
|
</a>
|
|
63
63
|
</li>
|
|
@@ -65,9 +65,9 @@ lg:grid-cols-max-content-8{% endif %}
|
|
|
65
65
|
<li class="flex items-baseline max-w-full mb-sm py-xs text-neutral-dark {% if loop.last %} flex-1 font-semibold{% endif %}">
|
|
66
66
|
<span class="no-underline {%- if loop.last %} text-black{% endif %} truncate"{% if loop.last %} aria-current="page"{% endif %}>
|
|
67
67
|
{% if loop.last %}
|
|
68
|
-
<strong>{{ item.html | safe if item.html else item.text }}</strong>
|
|
68
|
+
<strong>{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
|
|
69
69
|
{% else %}
|
|
70
|
-
{{ item.html | safe if item.html else item.text }}
|
|
70
|
+
{{ item.html | filterquotes | safe if item.html else item.text }}
|
|
71
71
|
{% endif %}
|
|
72
72
|
</span>
|
|
73
73
|
</li>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
},
|
|
9
9
|
{
|
|
10
10
|
"name": "por defecto con estado activo",
|
|
11
|
-
"description":
|
|
11
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
12
12
|
"data": {
|
|
13
13
|
"name": "active",
|
|
14
14
|
"text": "Activo",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
"name": "por defecto con estado hover",
|
|
20
|
-
"description":
|
|
20
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
21
21
|
"data": {
|
|
22
22
|
"name": "hover",
|
|
23
23
|
"text": "Hover",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
"name": "por defecto con estado focus",
|
|
29
|
-
"description":
|
|
29
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
30
30
|
"data": {
|
|
31
31
|
"name": "focus",
|
|
32
32
|
"text": "Focus",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"name": "primario con estado activo",
|
|
52
|
-
"description":
|
|
52
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
53
53
|
"data": {
|
|
54
54
|
"name": "active",
|
|
55
55
|
"text": "Activo",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
"name": "primario con estado hover",
|
|
61
|
-
"description":
|
|
61
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
62
62
|
"data": {
|
|
63
63
|
"name": "hover",
|
|
64
64
|
"text": "Hover",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
69
|
"name": "primario con estado focus",
|
|
70
|
-
"description":
|
|
70
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
71
71
|
"data": {
|
|
72
72
|
"name": "focus",
|
|
73
73
|
"text": "Focus",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
93
|
"name": "alerta con estado activo",
|
|
94
|
-
"description":
|
|
94
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
95
95
|
"data": {
|
|
96
96
|
"name": "active",
|
|
97
97
|
"text": "Activo",
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
102
|
"name": "alerta con estado hover",
|
|
103
|
-
"description":
|
|
103
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
104
104
|
"data": {
|
|
105
105
|
"name": "hover",
|
|
106
106
|
"text": "Hover",
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
},
|
|
110
110
|
{
|
|
111
111
|
"name": "alerta con estado focus",
|
|
112
|
-
"description":
|
|
112
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
113
113
|
"data": {
|
|
114
114
|
"name": "focus",
|
|
115
115
|
"text": "Focus",
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
135
|
"name": "transparente con estado activo",
|
|
136
|
-
"description":
|
|
136
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
137
137
|
"data": {
|
|
138
138
|
"name": "active",
|
|
139
139
|
"text": "Activo",
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
},
|
|
143
143
|
{
|
|
144
144
|
"name": "transparente con estado hover",
|
|
145
|
-
"description":
|
|
145
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
146
146
|
"data": {
|
|
147
147
|
"name": "hover",
|
|
148
148
|
"text": "Hover",
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
},
|
|
152
152
|
{
|
|
153
153
|
"name": "transparente con estado focus",
|
|
154
|
-
"description":
|
|
154
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
155
155
|
"data": {
|
|
156
156
|
"name": "focus",
|
|
157
157
|
"text": "Focus",
|
|
@@ -204,7 +204,7 @@
|
|
|
204
204
|
{
|
|
205
205
|
"name": "botón enlace con target blank",
|
|
206
206
|
"data": {
|
|
207
|
-
"html":
|
|
207
|
+
"html": "Botón enlace con target <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='self-center ml-sm' aria-hidden='true' focusable='false' role='img'><g><path id='Union' fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
208
208
|
"href": "http://www.google.com",
|
|
209
209
|
"target": "_blank",
|
|
210
210
|
"attributes": {
|
|
@@ -224,14 +224,14 @@
|
|
|
224
224
|
{
|
|
225
225
|
"name": "botón con icono a la derecha",
|
|
226
226
|
"data": {
|
|
227
|
-
"html":
|
|
227
|
+
"html": "Botón con icono<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center ml-2' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
228
228
|
"href": "/"
|
|
229
229
|
}
|
|
230
230
|
},
|
|
231
231
|
{
|
|
232
232
|
"name": "botón con icono a la izquierda",
|
|
233
233
|
"data": {
|
|
234
|
-
"html":
|
|
234
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center mr-2' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>Botón con icono",
|
|
235
235
|
"href": "/"
|
|
236
236
|
}
|
|
237
237
|
},
|
|
@@ -239,7 +239,7 @@
|
|
|
239
239
|
"name": "botón atrás",
|
|
240
240
|
"description": "Transparente con icono a la izquierda",
|
|
241
241
|
"data": {
|
|
242
|
-
"html":
|
|
242
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z' fill='currentColor'></path></svg>Volver",
|
|
243
243
|
"classes": "c-button--transparent",
|
|
244
244
|
"href": "/"
|
|
245
245
|
}
|
|
@@ -248,7 +248,7 @@
|
|
|
248
248
|
"name": "botón adelante",
|
|
249
249
|
"description": "Transparente con icono a la derecha",
|
|
250
250
|
"data": {
|
|
251
|
-
"html":
|
|
251
|
+
"html": "Ver más<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center ml-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg>",
|
|
252
252
|
"classes": "c-button--transparent",
|
|
253
253
|
"href": "/"
|
|
254
254
|
}
|
|
@@ -256,7 +256,7 @@
|
|
|
256
256
|
{
|
|
257
257
|
"name": "botón sólo con icono",
|
|
258
258
|
"data": {
|
|
259
|
-
"html":
|
|
259
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center my-1' aria-hidden='true' focusable='false' role='img' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
260
260
|
"href": "/",
|
|
261
261
|
"classes": "c-button--primary align-bottom"
|
|
262
262
|
}
|
|
@@ -265,7 +265,7 @@
|
|
|
265
265
|
{
|
|
266
266
|
"name": "button peque sólo con icono",
|
|
267
267
|
"data": {
|
|
268
|
-
"html":
|
|
268
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center my-1' aria-hidden='true' focusable='false' role='img' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
269
269
|
"href": "/",
|
|
270
270
|
"classes": "c-button--primary c-button--sm align-bottom"
|
|
271
271
|
}
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
{%- if element == 'a' %}
|
|
34
34
|
|
|
35
35
|
<a href="{{ params.href if params.href else '#' }}" draggable="false" {%- if params.disabled %} tabindex="-1"{% endif %}{% if params.target %} target="{{ params.target }}"{% endif %} {{- commonAttributes | safe }}>
|
|
36
|
-
{{ params.html | safe if params.html else params.text }}
|
|
36
|
+
{{ params.html | filterquotes | safe if params.html else params.text }}
|
|
37
37
|
</a>
|
|
38
38
|
|
|
39
39
|
{%- elseif element == 'button' %}
|
|
40
40
|
|
|
41
41
|
<button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
|
|
42
|
-
{{ params.html | safe if params.html else params.text }}
|
|
42
|
+
{{ params.html | filterquotes | safe if params.html else params.text }}
|
|
43
43
|
</button>
|
|
44
44
|
|
|
45
45
|
{%- elseif element == 'input' %}
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"name": "por defecto con estado activo",
|
|
37
|
-
"description":
|
|
37
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
38
38
|
"data": {
|
|
39
39
|
"name": "active",
|
|
40
40
|
"text": "Activo",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
45
|
"name": "por defecto con estado hover",
|
|
46
|
-
"description":
|
|
46
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
47
47
|
"data": {
|
|
48
48
|
"name": "hover",
|
|
49
49
|
"text": "Hover",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
54
|
"name": "por defecto con estado focus",
|
|
55
|
-
"description":
|
|
55
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
56
56
|
"data": {
|
|
57
57
|
"name": "focus",
|
|
58
58
|
"text": "Focus",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
},
|
|
76
76
|
{
|
|
77
77
|
"name": "primario con estado activo",
|
|
78
|
-
"description":
|
|
78
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
79
79
|
"data": {
|
|
80
80
|
"name": "active",
|
|
81
81
|
"text": "Activo",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
86
|
"name": "primario con estado hover",
|
|
87
|
-
"description":
|
|
87
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
88
88
|
"data": {
|
|
89
89
|
"name": "hover",
|
|
90
90
|
"text": "Hover",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
},
|
|
94
94
|
{
|
|
95
95
|
"name": "primario con estado focus",
|
|
96
|
-
"description":
|
|
96
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
97
97
|
"data": {
|
|
98
98
|
"name": "focus",
|
|
99
99
|
"text": "Focus",
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
},
|
|
118
118
|
{
|
|
119
119
|
"name": "alerta con estado activo",
|
|
120
|
-
"description":
|
|
120
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
121
121
|
"data": {
|
|
122
122
|
"name": "active",
|
|
123
123
|
"text": "Activo",
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
128
|
"name": "alerta con estado hover",
|
|
129
|
-
"description":
|
|
129
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
130
130
|
"data": {
|
|
131
131
|
"name": "hover",
|
|
132
132
|
"text": "Hover",
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
},
|
|
136
136
|
{
|
|
137
137
|
"name": "alerta con estado focus",
|
|
138
|
-
"description":
|
|
138
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
139
139
|
"data": {
|
|
140
140
|
"name": "focus",
|
|
141
141
|
"text": "Focus",
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
},
|
|
160
160
|
{
|
|
161
161
|
"name": "transparente con estado activo",
|
|
162
|
-
"description":
|
|
162
|
+
"description": "Simula activar la pseudoclase de CSS <code>:active</code>",
|
|
163
163
|
"data": {
|
|
164
164
|
"name": "active",
|
|
165
165
|
"text": "Activo",
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
170
|
"name": "transparente con estado hover",
|
|
171
|
-
"description":
|
|
171
|
+
"description": "Simula activar la pseudoclase de CSS <code>:hover</code>",
|
|
172
172
|
"data": {
|
|
173
173
|
"name": "hover",
|
|
174
174
|
"text": "Hover",
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
},
|
|
178
178
|
{
|
|
179
179
|
"name": "transparente con estado focus",
|
|
180
|
-
"description":
|
|
180
|
+
"description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
|
|
181
181
|
"data": {
|
|
182
182
|
"name": "focus",
|
|
183
183
|
"text": "Focus",
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
{
|
|
217
217
|
"name": "botón enlace con target blank",
|
|
218
218
|
"data": {
|
|
219
|
-
"html":
|
|
219
|
+
"html": "Botón enlace con target <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='self-center ml-sm' aria-hidden='true' focusable='false' role='img'><g><path id='Union' fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
220
220
|
"href": "http://www.google.com",
|
|
221
221
|
"target": "_blank",
|
|
222
222
|
"attributes": {
|
|
@@ -235,7 +235,7 @@
|
|
|
235
235
|
{
|
|
236
236
|
"name": "botón con icono a la derecha",
|
|
237
237
|
"data": {
|
|
238
|
-
"html":
|
|
238
|
+
"html": "Botón con icono<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center ml-2' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
239
239
|
"href": "/"
|
|
240
240
|
}
|
|
241
241
|
},
|
|
@@ -243,14 +243,14 @@
|
|
|
243
243
|
"name": "botón con icono a la izquierda",
|
|
244
244
|
"data": {
|
|
245
245
|
|
|
246
|
-
"html":
|
|
246
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center mr-2' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>Botón con icono",
|
|
247
247
|
"href": "/"
|
|
248
248
|
}
|
|
249
249
|
},
|
|
250
250
|
{
|
|
251
251
|
"name": "botón sólo con icono",
|
|
252
252
|
"data": {
|
|
253
|
-
"html":
|
|
253
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center' aria-hidden='true' focusable='false' role='img' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
254
254
|
"href": "/",
|
|
255
255
|
"classes": "c-button-loader--primary p-3 align-bottom"
|
|
256
256
|
}
|
|
@@ -258,7 +258,7 @@
|
|
|
258
258
|
{
|
|
259
259
|
"name": "button peque sólo con icono",
|
|
260
260
|
"data": {
|
|
261
|
-
"html":
|
|
261
|
+
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center' aria-hidden='true' focusable='false' role='img' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
262
262
|
"href": "/",
|
|
263
263
|
"classes": "c-button-loader--primary c-button-loader--sm p-2 align-bottom"
|
|
264
264
|
}
|