Alpaca components for Magento 2

Price: Between 

<div class="price  ">
    <span class="price__value price__value--between">
        <span class="price__text">
            From
        </span>
        $

        61.00

    </span>

    <span class="price__value price__value--between">
        <span class="price__text">
            To
        </span>

        $

        79.00

    </span>
</div>
 
<div class="price {{ class }} {{{ attributes }}}">
    <span class="price__value {{ priceClass }}">
        <span class="price__text">
            {{ textBeforeFromPrice }}
        </span>
        {{#if prefix.tag}}
            <{{tag}}>
        {{/if}}
            {{ prefix.text }}
        {{#if prefix.tag}}
            </{{tag}}>
        {{/if}}

        {{ fromPrice }}

        {{#if suffix.tag}}
            <{{suffix.tag}}>
        {{/if}}
            {{ suffix.text }}
        {{#if suffix.tag}}
            </{{suffix.tag}}>
        {{/if}}
    </span>

    <span class="price__value {{ priceClass }}">
        <span class="price__text">
            {{ textBeforeToPrice }}
        </span>

        {{#if prefix.tag}}
            <{{tag}}>
        {{/if}}
            {{ prefix.text }}
        {{#if prefix.tag}}
            </{{tag}}>
        {{/if}}

        {{ toPrice }}

        {{#if suffix.tag}}
            <{{suffix.tag}}>
        {{/if}}
            {{ suffix.text }}
        {{#if suffix.tag}}
            </{{suffix.tag}}>
        {{/if}}
    </span>
</div>
 
{
  "regularPrice": "159.95",
  "specialPrice": "",
  "prefix": {
    "tag": "",
    "text": "$"
  },
  "suffix": {
    "tag": "",
    "text": ""
  },
  "priceClass": "price__value--between",
  "textBeforeFromPrice": "From",
  "textBeforeToPrice": "To",
  "fromPrice": "61.00",
  "toPrice": "79.00"
}
  • Content: 
    $price__spacing                : $spacer--small !default;
$price__font-size              : $font-size-large !default;
$price__font-size\@medium      : $font-size-large !default;
$price__font-weight            : $font-weight-bold !default;

$price__color--old             : $color-secondary !default;
$price__font-size--old         : $font-size-small !default;
$price__font-size--old\@medium : $font-size-base !default;
$price__font-weight--old       : $font-weight-normal !default;

$price__color--special         : $color-error !default;
$price__font-weight--special   : $font-weight-bold !default;

$price__text-color             : $color-secondary !default;
$price__text-font-size         : $font-size-base !default;
$price__text-font-size\@medium : $font-size-medium !default;
  • URL: /components/raw/price/_price-variables.scss
  • Filesystem Path: build/components/Molecules/price/_price-variables.scss
  • Size: 781 Bytes
  • Content: 
    @import 'price-variables';

.price {
    &__value {
        font-size: $price__font-size;
        font-weight: $price__font-weight;

        @include mq($screen-m) {
            font-size: $price__font-size\@medium;
        }

        &--old {
            margin-right: $price__spacing;
            color: $price__color--old;
            font-size: $price__font-size--old;
            font-weight: $price__font-weight--old;
            text-decoration: line-through;

            @include mq($screen-m) {
                font-size: $price__font-size--old\@medium;
            }
        }

        &--special {
            color: $price__color--special;
            font-weight: $price__font-weight--special;

            & > ins {
                text-decoration: none;
            }
        }
    }

    &__text {
        color: $price__text-color;
        font-size: $price__text-font-size;
        font-weight: $price__font-weight--old;

        @include mq($screen-m) {
            font-size: $price__text-font-size\@medium;
        }
    }
}
  • URL: /components/raw/price/_price.scss
  • Filesystem Path: build/components/Molecules/price/_price.scss
  • Size: 1 KB

No notes defined.