Galerías
12 Resultados para Diseño de sonrisa
Diseño de sonrisa
Diseño de sonrisa
Diseño de sonrisa
Diseño de sonrisa
Diseño de sonrisa
Diseño de sonrisa
Diseño de sonrisa
Diseño de sonrisa
Diseño de sonrisa
Diseño de sonrisa
carga
{%- comment -%} Elimina los espacios en blanco iniciales y finales de `tag_name`. {%- comentario final -%} {%- asignar nombre_etiqueta = nombre_etiqueta | strip -%} {%- comment -%} Maneja el caso `tag_name: ''`. {%- endcomment -%} {%- if nombre_etiqueta y nombre_etiqueta.tamaño < 1 -%} {%- asignar nombre_etiqueta = false -%} {%- endif -%} {%- if nombre_etiqueta -%} <{{ nombre_etiqueta }} {{- atributos | to_attrs -}} {{- added_attrs -}} {%- if self_closing == true -%} {{- ' /' -}} {%- endif -%} > {%- endif -%} {%- a menos que self_closing == true -%} {%- ifslot -%} {%- slot -%} {%- else -%} {{- inner_html -}} {%- endifslot -%} {%- if tag_name -%} {%- endif -%} {%- endunless -%}{%- comment -%} Este componente puede generar una etiqueta `img` o `div style="background-..."`.
{%- comentario final -%} {%- asignar is_global_asset = is_global_asset | predeterminado: falso -%} {%- if bg -%} {%- comentario -%} Imagen de fondo {%- endcomment -%} {%- asignar nombre_etiqueta = nombre_etiqueta | predeterminado: 'div' -%} {%- asignar cierre_automático = cierre_automático | predeterminado: falso -%} {%- comentario -%} Representamos los atributos nosotros mismos y filtramos `estilo`. {%- endcomment -%} {%- asignar attr_list = attrs | to_attrs: lista: verdadero -%} {%- capturar atributos_adicionales -%} {%- comentario -%} Incluir atributos del contexto. {%- comentario final -%} {%- para atributo en lista_atributo -%} {%- a menos que atributo[0] == 'estilo' -%} {{- ' ' -}} {{- atributo[0] -} } {%- if attr[1].size > 0 -%} ="{{- attr[1] -}}" {%- endif -%} {%- endunless -%} {%- endfor -%} {{- ' ' -}} style=" {%- comment -%} Representa estilos bg. Use src si no obtuvimos una imagen. {%- endcomment -%} {%- asigna has_bg_image = false -%} {%- asigna has_bg_size = false -%} {%- asigna has_bg_position_x = false -%} {%- asigna has_bg_position_y = false -%} {%- asigne has_bg_repeat = false -%} {%- para prop en bg -%} {%- case prop[0] -%} {%- when 'image' -%} {%- asigne has_bg_image = true -%} {% - cuando 'tamaño' -%} {%- asigne has_bg_size = true -%} {%- cuando 'posición' -%} {%- asigne has_bg_position_x = true -%} {%- asigne has_bg_position_y = true -%} {% - cuando 'posición-x' -%} {%- asignar has_bg_position_x = verdadero -%} {%- cuando 'posición-y' -%} {%- asignar tiene_bg_posición_y = verdadero -%} {%- cuando 'repetir' - %} {%- asignar has_bg_repeat = true -%} {%- endcase -%} background-{{- prop[0] -}}: {{- prop[1] -}}; {%- endfor -%} {%- a menos que haya_bg_image -%} background-image: url('{{- src | asset_url: global: is_global_asset -}}'); {%- endunless -%} {%- a menos que has_bg_size -%} tamaño de fondo: portada; {%- endunless -%} {%- a menos que has_bg_position_x -%} background-position-x: center; {%- endunless -%} {%- a menos que has_bg_position_y -%} background-position-y: center; {%- endunless -%} {%- a menos que has_bg_repeat -%} background-repeat: no-repeat; {%- endunless -%} {%- comment -%} Agregue cualquier estilo del atributo de estilo. {%- endcomment -%} {{- attrs.style -}} " {%- endcapture -%} {%- comment -%} Elimina los atributos para que no los representemos dos veces. {%- asignar atributos_de_grupo = atributos_de_grupo | merge_props: class: 'listcard__group' -%} {%- asignar nombre de etiqueta = 'div' -%} {%- si es plegable -%} {%- asignar nombre de etiqueta = 'detalles' -%} {%- endif -%} < {{ tag_name }} {{ group_attrs | to_attrs }}> {% a menos que el título == falso o grupo.título == nil o grupo.título.tamaño == 0 %} {% si es plegable %} {% terminara si %} {{ grupo.título }} {% si es plegable %} {% endif %} {% endunless %} {% para elemento en grupo.tarjetas %} {%- incluye 'lista de tarjetas/tarjeta de lista/elemento' -%} {% endfor %} {% a menos que group.group_button_link == nil o group.cards.size < 2 %} {{ grupo.group_button_label }} {% sin fin %}{% assign card_count = forloop.index %}
{%- capture curr_class -%}
listcard__card
{%- unless item.id == nil -%}
{{- ' ' -}} listcard__card--{{ item.id }}
{%- endunless -%}
{%- unless card_class == nil or card_class.size == 0 -%}
{{- ' ' -}} listcard__card--{{ card_class }}
{%- endunless -%}
{%- endcapture -%}
{%- assign card_attrs = item.attrs | merge_props: class: curr_class -%}
{% if singlelink %}
{%- assign card_attrs = card_attrs | merge_props: href: item.ctas[0].link -%}
{% endif %}
{% if linkcard %}<a {{ card_attrs | to_attrs }}>{% elsif singlelink %}<a {{ card_attrs | to_attrs }}>{% else %}<div {{ card_attrs | to_attrs }}>{% endif %}
{%- unless headline == false or item.headline == nil or item.headline.size == 0 -%}
<h2 class="listcard__card-headline">{{ item.headline }}</h2>
{%- endunless -%}
{% unless subheadline == false or item.subheadline == nil or item.subheadline.size == 0 %}
<h3 class="listcard__card-subheadline">{{ item.subheadline }}</h3>
{% endunless %}
{% unless images == false or item.images == nil or item.images.size == 0 %}
{% if compare == true %}
<div class="listcard__card-images">
<div class="listcard__comparison comparison comparison--popup">
<figure style="background-image: url('{{ item.compare_img_1 | asset_url }}')">
<a class="listcard__card-image-link listcard__card-image-link--before" href="#view-{{ item.id }}">Before</a>
<div
class="divisor"
style="
background-image: url('{{ item.compare_img_2 | asset_url }}');
clip-path: inset(0 0 0 50%);
">
<a class="listcard__card-image-link listcard__card-image-link--after" href="#view-{{ item.id }}">After</a>
</div>
</figure>
<input type="range" min="0" max="100" value="50" class="slider">
</div>
<div id="view-{{ item.id }}" class="modal-window comparison">
<a href="#" class="modal-close">Close</a>
<div class="modal-window__wrapper">
<figure style="background-image: url('{{ item.compare_img_1 | asset_url }}')">
<span class="listcard__card-image-link listcard__card-image-link--before">Before</span>
<div
class="divisor"
style="
background-image: url('{{ item.compare_img_2 | asset_url }}');
clip-path: inset(0 0 0 50%);
">
<span class="listcard__card-image-link listcard__card-image-link--after">After</span>
</div>
</figure>
<input type="range" min="0" max="100" value="50" class="slider">
</div>
</div>
</div>
{% else %}
{% if legacy %}
<div class="listcard__card-images">
{% for image in item.images %}
{% using image %}
{%- comment -%}
We're adding a class list to the `image` data before `atom/img`.
Si `attrs.class` ya existe, nuestra lista de clases se agregará después.
Se necesita `capture` porque estamos usando datos de `forloop.index`.
Si quisiéramos usar una lista de clases constante sin datos dinámicos, podríamos hacerlo en línea como: `{%- asignar atributos = atributos | merge_props: clase: "mi-lista de clases estática" -%}` {%- endcomment -%} {%- clase de captura -%} {% if image_link -%} listcard__card-image-linkable listcard__card-image-linkable-- {{ forloop.index }} {%- else -%} listcard__card-image listcard__card-image--{{ forloop.index }} {%- endif %} {%- endcapture %} {% if image_link %} {%- asignar tag_name = 'a' -%} {%- asignar atributos = atributos | merge_props: href: image_link -%} {% endif %} {%- asignar atributos = atributos | merge_props: class: class -%} {% include "atom/img" %} {% endusing %} {% if image.modal_img %} Cerrar {% usando imagen %} {%- comentario -%} Estamos agregando una lista de clases a los datos de `image` antes de `atom/img`.
Si `attrs.class` ya existe, nuestra lista de clases se agregará después.
Se necesita `capture` porque estamos usando datos de `forloop.index`.
Si quisiéramos usar una lista de clases constantes sin datos dinámicos, podríamos hacerlo en línea como: `{%-assign attrs = attrs | merge_props: class: "my-static class-list" -%}` {%- endcomment -%} {%- capture class -%} listcard__modal-image listcard__modal-image--{{ forloop.index }} {%- endcapture -%} {%- asignar atributos = atributos | merge_props: clase: clase -%} {% incluye "átomo/img" %} {% uso final %} {% endif %} {% endfor %} {% si imagen.imagen_texto%} {{imagen.imagen_texto}} {% endif %} {% más %} {% for image in item.images %} {% using image %} {%- comment -%} Estamos agregando una lista de clases a los datos de `image` antes de `atom/img`.
Si `attrs.class` ya existe, nuestra lista de clases se agregará después.
Se necesita `capture` porque estamos usando datos de `forloop.index`.
Si quisiéramos usar una lista de clases constante sin datos dinámicos, podríamos hacerlo en línea como: `{%- asignar atributos = atributos | merge_props: clase: "mi-lista de clases estática" -%}` {%- endcomment -%} {%- clase de captura -%} {% if image_link -%} listcard__card-image-linkable listcard__card-image-linkable-- {{ forloop.index }} {%- else -%} listcard__card-image listcard__card-image--{{ forloop.index }} {%- endif %} {%- endcapture %} {% if image_link %} {%- asignar tag_name = 'a' -%} {%- asignar atributos = atributos | merge_props: href: image_link -%} {% endif %} {%- asignar atributos = atributos | merge_props: class: class -%} {% include "atom/img" %} {% endusing %} {% if image.image_text %} {{imagen.image_text}} {% endif %} {% endfor %} {%- if item.images[0].modal_img -%} > < Cerrar {% para imagen en item.images %} {% usando image.modal_img %} {%- comentario -%} Estamos agregando una lista de clases a los datos de `image` antes de `atom/img`.
Si `attrs.class` ya existe, nuestra lista de clases se agregará después.
Se necesita `capture` porque estamos usando datos de `forloop.index`.