Shopify - Data bar

data-bar.liquid

{% comment %}
    @rotcl
{% endcomment %}


{%- if section.settings.link == blank -%}
<div class="bar-{{ section.id }} {{ section.settings.text-align }}">
  {%- else -%}
  <a class="bar-{{ section.id }} {{ section.settings.text-align }}" href="{{ section.settings.link }}" >
    {%- endif -%}

    <p>{{ section.settings.title | escape }}</p>

    {%- if section.settings.link == blank -%}
    </div>
  {%- else -%}
  </a>
{%- endif -%}


<style>
  .bar-{{ section.id }} {
    color: {{ section.settings.text-color }}!important;
    background-color: {{ section.settings.text-background }}!important;
    margin-top: {{ section.settings.t-margin }}px !important;
    margin-bottom:  {{ section.settings.b-margin }}px !important;
  }
  .bar-{{ section.id }} p {
    color: {{ section.settings.text-color }}!important;
    background-color: {{ section.settings.text-background }}!important;
    padding: {{ section.settings.v-padding }}px {{ section.settings.h-padding }}px !important;
    line-height: 1.3 !important;
    font-size: {{ section.settings.font-size }}px !important;
    margin-bottom: 0;
  }
  .lefted {
    text-align: left !important;
  }
  .centered {
    text-align: center !important;
  }
  .righted {
    text-align: right !important;
  }
</style>

{% schema %}
{
  "name": "Data bar",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Texto barra",
      "default": "Texto a anunciar"
    },
	{
       "type": "color",
       "id": "text-color",
       "label": "Color texto",
       "default": "#fff"
    },
	{
       "type": "color",
       "id": "text-background",
       "label": "Color fondo",
       "default": "#000"
    },
	{
      "type": "range",
      "id": "font-size",
      "min": 10,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Tamaño del texto",
      "default": 14
    },
	{
      "type": "range",
      "id": "v-padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Padding vertical del texto",
      "default": 0,
	  "info": "5 es un tamaño decente para mobile y desktop"
    },
	{
      "type": "range",
      "id": "h-padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Padding horizontal del texto",
      "default": 0,
	  "info": "20 es un tamaño decente para mobile y desktop"
    },
	{
      "type": "range",
      "id": "t-margin",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Margin superior del box",
      "default": 0
    },
	{
      "type": "range",
      "id": "b-margin",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Margin inferior del box",
      "default": 0
    },
    {
      "type": "select",
      "id": "text-align",
      "label": "Alineacion del texto",
      "default": "centered",
      "options": [
        {
          "value": "lefted",
          "label": "Izquierda"
        },
        {
          "value": "centered",
          "label": "Centrado"
        },
        {
          "value": "righted",
          "label": "Derecha"
        }
      ]
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link barra"
    }
  ],
  "presets": [
    {
      "name": "Data bar",
      "category": "Custom"
    }
  ]
}
{% endschema %}