{% set id = field('id') %}
{% set class = field('class') %}
{% set classes = classNames('qx-element qx-element-spacer-v2', class) %}
{% set animation = "" %}
{% if field('animation') != 'none' %}
{% if field('animation')is not empty %}
{% set animation = "cls:" ~ field('animation') ~ ";" %}
{% endif %}
{# repeat #}
{% if field('animation_repeat') %}
{% set animation = animation ~ "repeat:ture;" %}
{% endif %}
{# delay #}
{% if field('animation_delay').value %}
{% set animation = animation ~ "delay:" ~ field('animation_delay').value %}
{% endif %}
{% endif %}
var style = Object.assign({}, Assets),
id = "#{{ field("id") }}",
css = "";
// margin
style.margin(id, {{ field("margin") | json_encode() }})
// padding
style.padding(id, {{ field("padding") | json_encode() }})
// Z-Index
style.css(id, 'z-index', {{ field("zindex") | json_encode() }})
// background
style.background (id, {{ field("background") | json_encode() }})
// border + box shadow
style.border (id, {{ field("border") | json_encode() }})
// custom css
style.raw ("{{ field("custom_css").code }}")
{% include 'global.twig' %}
var id = "#{{ field("id") }}",
seperator = id + " .qx-divider-separator";
style.height(id, {{ field('space') | json_encode() }});
style.load(id)