GIF94;
| Path : /var/www/wordpress/wp-content/plugins/oxygen/subplugins/breakdance-elements/elements/image/ |
| Current File : /var/www/wordpress/wp-content/plugins/oxygen/subplugins/breakdance-elements/elements/image/css.twig |
%%SELECTOR%% {
{{ macros.spacing_margin_y(design.spacing) }}
max-width: {{ design.image.max_width.style }};
width: {{ design.image.width.style }};
}
%%SELECTOR%% .breakdance-image-container {
box-shadow: {{ design.borders.shadow.style }};
{{ macros.border_radius(design.borders.radius) }}
}
%%SELECTOR%% .breakdance-image-clip {
{{ macros.borders_without_shadows(design.borders) }}
}
/* Actual Image */
%%SELECTOR%% .breakdance-image-object {
{% if design.image.width.style %}
width: 100%;
{% if not design.image.height.style %}
height: auto;
{% endif %}
{% endif %}
{% if design.image.height.style or design.image.aspect_ratio %}
object-fit: {{ design.image.object_fit }};
{% if design.image.object_position %}
object-position: {{ design.image.object_position.x }}% {{ design.image.object_position.y }}%;
{% endif %}
{% endif %}
{% if design.image.height.style %}
height: {{ design.image.height.style }};
{% if not design.image.width.style %}
width: auto;
{% endif %}
{% endif %}
{# Zoom #}
{% if design.image.zoom %}
transform: scale({{ (design.image.zoom.number / 100) + 1 }}) translateZ(0);
{% endif %}
{% if design.image.focus_point %}
transform-origin: {{ design.image.focus_point.x }}% {{ design.image.focus_point.y }}%;
{% endif %}
{# Effects #}
opacity: {{ design.effects.opacity }};
transition-duration: {{ design.effects.transition_duration.style }};
mix-blend-mode: {{ design.effects.blend_mode }};
{# Aspect Ratio #}
{% if design.image.aspect_ratio %}
{% if design.image.aspect_ratio == 'custom' and design.image.custom_ratio.width and design.image.custom_ratio.height %}
aspect-ratio: {{ design.image.custom_ratio.width }} / {{ design.image.custom_ratio.height }};
{% else %}
aspect-ratio: {{ design.image.aspect_ratio }};
{% endif %}
object-fit: {{ design.image.object_fit }};
{% endif %}
{{ macros.filters(design.effects.filters) }}
}
%%SELECTOR%%:hover .breakdance-image-object {
{# Zoom Hover #}
{% if design.image.zoom_hover %}
transform: scale({{ (design.image.zoom_hover.number / 100) + 1 }}) translateZ(0);
{% endif %}
{% if design.image.focus_point_hover %}
transform-origin: {{ design.image.focus_point_hover.x }}% {{ design.image.focus_point_hover.y }}%;
{% endif %}
{# Effects Hover #}
opacity: {{ design.effects.opacity_hover }};
{{ macros.filtersHover(design.effects.filters) }}
}
/* Caption */
%%SELECTOR%% .breakdance-image__caption {
{{ macros.typography(design.caption.typography, globalSettings) }}
{{ macros.backgroundColor(design.caption.background) }}
{{ macros.borders(design.caption.borders) }}
{{ macros.spacing_padding_all(design.caption.spacing) }}
}
/* Mask */
%%SELECTOR%% .breakdance-image__mask {
{% set mask = design.effects.mask %}
-webkit-mask-repeat: {{ mask.repeat }};
mask-repeat: {{ mask.repeat }};
{% if mask.position %}
-webkit-mask-position: {{ mask.position.x }}% {{ mask.position.y }}%;
mask-position: {{ mask.position.x }}% {{ mask.position.y }}%;
{% endif %}
{% if mask.size == 'custom' %}
-webkit-mask-size: {{ mask.custom_size.style }};
mask-size: {{ mask.custom_size.style }};
{% else %}
-webkit-mask-size: {{ mask.size }};
mask-size: {{ mask.size }};
{% endif %}
{% if mask.shape == 'custom' %}
-webkit-mask-image: url({{ mask.custom_shape.url }}) !important;
mask-image: url({{ mask.custom_shape.url }}) !important;
{% elseif mask.shape %}
{% set shape = getBreakdanceElementsPluginUrl() ~ 'elements/image/masks/' ~ design.effects.mask.shape ~ '.svg' %}
-webkit-mask-image: url('{{ shape }}');
mask-image: url('{{ shape }}');
{% endif %}
}
/* Lightbox */
{{ macros.atomV1LightboxCss(design.lightbox) }}