separator.liquid

{% assign mt = section.settings.margin_top | prepend: 'mt-' %}
{% assign mb = section.settings.margin_bottom | prepend: 'mb-' %}

<div
    id="separator-{{ section.id }}"
    class="separator">
    <div class="{% if section.settings.container %} container {% else %} container-fluid {% endif %}">
    
        <hr 
            class="{{ mt }} {{ mb }}"
            style="{{ section.settings.bg_color | prepend: 'background-color: ' | append: ';' }};">

    </div>
</div>


{% schema %}
{
    "name": "Separator",
    "settings": [
        {
            "type": "header",
            "content": "General settings"
        },
        {
            "type": "checkbox",
            "id": "container",
            "label": "Wrap in container",
            "default": true
        },
        {
            "type": "color",
            "id": "bg_color",
            "label": "Border color",
            "default": "#dee2e6"
        },
        {
            "type": "header",
            "content": "Spacing",
            "info": "Based on Bootstrap spacing utility classes [Learn more](https://getbootstrap.com/docs/5.0/utilities/spacing/)"
        },
        {
            "type": "range",
            "id": "margin_top",
            "label": "Margin top",
            "min": 0,
            "max": 12,
            "step": 1,
            "default": 7
        },
        {
            "type": "range",
            "id": "margin_bottom",
            "label": "Margin bottom",
            "min": 0,
            "max": 12,
            "step": 1,
            "default": 7
        }
    ],
    "presets": [
        {
            "name": "Separator",
            "category": "Layout"
        }
    ]
}
{% endschema %}