Shopware Theme: Defines the delivery status for products with custom colours.

delivery-information.less

/*
Delivery information
=========================================
Defines the delivery status for products (e.g. detail page, note).

The styling includes the base styling and the delivery states.


```
<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-available">
            <i class="delivery--status-icon delivery--status-available"></i>
            delivery--text-available
        </span>
    </p>
</div>

<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-more-is-coming">
            <i class="delivery--status-icon delivery--status-more-is-coming"></i>
            delivery--text-more-is-coming
        </span>
    </p>
</div>

<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-shipping-free">
            <i class="delivery--status-icon delivery--status-shipping-free"></i>
            delivery--text-shipping-free
        </span>
    </p>
</div>

<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-not-available">
            <i class="delivery--status-icon delivery--status-not-available"></i>
            delivery--text-not-available
        </span>
    </p>
</div>
```
*/

@not-available-color: #e74c3c;
@available-color: #ab273c;
@more-is-coming-color: #ccaf86;

.product--delivery {
    .delivery--status-not-available {
        background: @not-available-color;
    }
    .delivery--text-not-available {
        color: @not-available-color;
    }
    
    .deliver--status-available {
        background: @available-color;
    }
    .delivery--text-available {
        color: @available-color;
    }
    
    delivery--status-more-is-coming {
        background: @more-is-coming-color;
    }
    .delivery--text-more-is-coming {
        color: @more-is-coming-color;
    }
}

How to add to your Responsive-child-Theme:

1. copy file to /themes/Frontend/your-theme/frontend/_public/src/less/_components
2. change the colours to your needs
3. add @import "_components/delivery-information"; to your all.less
4. compile the theme