Product Card Details

gistfile1.less

/*
Product card details,

Markup for non sale item:
----
    <div class="product-card-details">
        <a href="#">
            <div class="product-card-details__designer">
                Valentino
            </div>
            <div class="product-card-details__description">
                Blue Silk Skirt
            </div>
        </a>
        <div class="product-card-details__price-area">
            <span class="price">$500</span>
        </div>
    </div>


Markup for sale item:
----

    <div class="product-card-details">
        <a href="#">
            <div class="product-card-details__designer">
                Valentino
            </div>
            <div class="product-card-details__description">
                Blue Silk Skirt
            </div>
        </a>
        <div class="product-card-details__price-area">
            <span class="product-card-details__price product-card-details__price--old">$500</span>
            <span class="product-card-details__price product-card-details__price--sale">$450</span>
            <span class="product-card-details__price-info">(30% off + Free Shipping)</span>
        </div>
    </div>


*/

.product-card-details {
    font-size: 14px;

    &__designer {
        font-family: @secondary-heading-font-name;
        line-height: 20px;
        margin-bottom: 5px;
    }

    &__description {
        line-height: 17px;
        margin-bottom: 5px;
    }

    &__price-area {
        margin-bottom: 15px;
    }

    &__price {
        font-size: 14px;
        line-height: 17px;

        &--sale {
            color: @red;
        }

        &--old {
            text-decoration: line-through;
        }
    }

    a:hover {
        color: @blue;
    }

    // Additional shipping details or % sale
    &__price-info {
        color: @text-grey;
        margin-left: 5px;
    }
}