<section class="product-list-item ">
    <a href="#" class="
            link
            product-list-item__image-link
        ">
        <div class="badges product-list-item__badges">
            <div class="badge ">
                -15%
            </div>

            <div class="badge badge--new">
                New
            </div>

        </div>

        <div class="lazyload-wrapper product-list-item__image">
            <img class="
            image
            lazyload
            
        " src="" data-src="/images/product/product-160_240.jpg" alt="">
        </div>

    </a>

    <div class="product-list-item__main">
        <div class="product-list-item__details">
            <div class="rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
                <div class="rating__star " role="presentation" style="width: 72%">
                    <span class="
                rating__indicator
                
            "></span>
                </div>
            </div>

            <h2 class="product-list-item__name">
                <a class="link product-list-item__name-link" href="#" title="Title">
                    Some product name - very long name because that&#x27;s important
                </a>

            </h2>

            <div class="product-list-item__sku">
                SKU: CEL-31145
            </div>

            <div class="product-list-item__list">
                <!-- Markup generated by snowdog/module-bullet-points -->
                <dl class="list list--description ">
                    <dt class="list__label">
                        Attribute
                    </dt>
                    <dd class="list__value">
                        Value
                    </dd>
                    <dt class="list__label">
                        Attribute
                    </dt>
                    <dd class="list__value">
                        Value
                    </dd>
                    <dt class="list__label">
                        Attribute
                    </dt>
                    <dd class="list__value">
                        Value
                    </dd>
                    <dt class="list__label">
                        Attribute
                    </dt>
                    <dd class="list__value">
                        Value
                    </dd>
                </dl>

            </div>
        </div>

        <div class="product-list-item__actions">
            <button class="button button--link modal-trigger product-list-item__stock" type="button" data-modal-trigger="shipping-latency-1">
                In stock
            </button>

            <div role="dialog" aria-hidden="true" id="shipping-latency-1" data-modal="shipping-latency-1" class="modal " aria-labbeledny="shipping-latency-title-1">
                <div role="document" class="modal__container " tabindex="0">
                    <div class="modal__content ">
                        <div class="modal__top ">
                            <h2 class="modal__heading heading heading--third-level" id="shipping-latency-title-1">
                                Shipping Latency Modal
                            </h2>

                        </div>

                        <div class="modal__middle ">
                            <p class="
                                modal__description
                                margin-bottom-xs
                            ">
                                This is a shipping latency modal. Inside we have some text from shippig latency module.
                            </p>

                        </div>

                    </div>

                    <button class="button button--icon button--rotate-icon modal__close-button" type="button" aria-label="click to close the modal">
                        <svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
                            <title>Close</title>
                            <use href="/images/icons-sprite.svg#close"></use>
                        </svg>

                    </button>

                </div>
            </div>
            <script type="text/javascript">
                new Modal(document.querySelector('[data-modal-trigger="shipping-latency-1"]'));
            </script>

            <div class="product-list-item__price">
                <div class="price  aria-label=" Product price" tabindex="0"">
    <span class=" price__value price__value--old ">
        <del aria-label=" Price reduced from: $249.95">
                    $
                    249.95

                    </del>
                    </span>
                    <span class="price__value price__value--special ">
                        <ins aria-label="On sale at: $159.95">

                            $

                            159.95

                        </ins>
                    </span>
                </div>

            </div>
            <div class="swatch__container swatch__container--catalog">
                <div class="swatch ">

                    <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                        <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                            <div class="swatch__option " style="background-color: #ffa500">

                            </div>
                        </div>
                        <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                            <div class="swatch__option " style="background-color: #00ff00">

                            </div>
                        </div>
                        <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                            <div class="swatch__option " style="background-color: #ff0000">

                            </div>
                        </div>
                        <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                            <div class="swatch__option " style="background-color: #000000">

                            </div>
                        </div>
                    </div>
                </div>

                <script src="/components/raw/swatch/swatch.js"></script>

            </div>

            <div class="product-list-item__actions-inner">
                <button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to compare">
                    <svg class="icon button__icon" role="presentation" focusable="false">
                        <title>Compare</title>
                        <use href="/images/icons-sprite.svg#compare"></use>
                    </svg>

                </button>

                <button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to Wish List">
                    <svg class="icon button__icon" role="presentation" focusable="false">
                        <title>Heart</title>
                        <use href="/images/icons-sprite.svg#heart"></use>
                    </svg>

                </button>

                <form action="#" class="product-list-item__add-to-action">
                    <button class="button button--add-to button--add-to product-list-item__add-to-button button--fluid" type="button" aria-label="Add to cart">
                        <span class="button__text ">
                            Add to cart
                        </span>

                        <svg class="icon button__icon" role="presentation" focusable="false">
                            <title>Add to Cart</title>
                            <use href="/images/icons-sprite.svg#shopping-cart"></use>
                        </svg>

                    </button>

                </form>
            </div>

        </div>
    </div>
</section>
<{{{ tag }}} class="product-list-item {{ class }}">
    <a
        href="#"
        class="
            link
            product-list-item__image-link
        "
    >
        {{#if productBadges}}
            {{ render '@badges' productBadges }}
        {{/if}}
        {{ render '@image' image }}
    </a>

    <div class="product-list-item__main">
        <div class="product-list-item__details">
            {{ render '@rating--secondary' }}
            <h2 class="product-list-item__name">
                {{ render '@link' linkName merge=true }}
            </h2>

            <div class="product-list-item__sku">
                {{ sku }}
            </div>
            {{#if description}}
                <div class="product-list-item__description">
                    {{ description }}
                </div>
            {{/if}}

            {{#if bulletList }}
                <div class="product-list-item__list">
                    <!-- Markup generated by snowdog/module-bullet-points -->
                    {{ render '@list--description' bulletList }}
                </div>
            {{/if}}
        </div>

        <div class="product-list-item__actions">
            {{ render '@button' stockButton merge=true }}
            {{ render '@modal' shippingLatencyModal }}
            <div class="product-list-item__price">
                {{ render (component price.name) price.context merge=true }}
            </div>
            {{#if swatches}}
                <div class="swatch__container swatch__container--catalog">
                    {{ render '@swatch--color' }}
                </div>
            {{/if}}

            <div class="product-list-item__actions-inner">
                {{
                    render '@button--icon'
                    secondaryActions.compare
                    merge=true
                }}
                {{
                    render '@button--icon'
                    secondaryActions.wishlist
                    merge=true
                }}
                <form action="#" class="product-list-item__add-to-action">
                    {{ render '@button--add-to' addToButton merge=true }}
                </form>
            </div>

        </div>
    </div>
</{{{ tag }}}>
{
  "tag": "section",
  "class": "",
  "swatches": true,
  "image": {
    "wrapperClass": "product-list-item__image",
    "dataSrc": "/images/product/product-160_240.jpg"
  },
  "productBadges": {
    "class": "product-list-item__badges",
    "badges": [
      {
        "contentElement": "badge",
        "contentContext": {
          "text": "-15%"
        }
      },
      {
        "contentElement": "badge--new",
        "contentContext": {
          "text": "New"
        }
      }
    ]
  },
  "linkName": {
    "class": "product-list-item__name-link",
    "text": "Some product name - very long name because that's important"
  },
  "sku": "SKU: CEL-31145",
  "description": false,
  "bulletList": {
    "attributes": "",
    "elements": [
      {
        "label": "Attribute",
        "value": "Value"
      },
      {
        "label": "Attribute",
        "value": "Value"
      },
      {
        "label": "Attribute",
        "value": "Value"
      },
      {
        "label": "Attribute",
        "value": "Value"
      }
    ]
  },
  "stockButton": {
    "class": "button--link modal-trigger product-list-item__stock",
    "text": "In stock",
    "attributes": "type=\"button\" data-modal-trigger=\"shipping-latency-1\""
  },
  "shippingLatencyModal": {
    "modal": {
      "id": "shipping-latency-1",
      "attributes": "aria-labbeledny=\"shipping-latency-title-1\""
    },
    "buttonClose": {
      "tag": "button",
      "text": "",
      "class": "button--rotate-icon modal__close-button",
      "icon": {
        "id": "close",
        "title": "Close",
        "class": "button__icon modal__close-button-icon",
        "hidden": true
      },
      "attributes": "type=\"button\" aria-label=\"click to close the modal\""
    },
    "modalTop": true,
    "heading": {
      "tag": "h2",
      "class": "heading heading--third-level",
      "attributes": "id=\"shipping-latency-title-1\"",
      "text": "Shipping Latency Modal"
    },
    "modalMiddle": true,
    "modalDescription": {
      "attributes": "",
      "class": "margin-bottom-xs",
      "tag": "p",
      "text": "This is a shipping latency modal. Inside we have some text from shippig latency module."
    }
  },
  "price": {
    "name": "price--with-special-price",
    "context": {
      "attributes": "aria-label=\"Product price\" tabindex=\"0\""
    }
  },
  "secondaryActions": {
    "wishlist": {
      "class": "product-list-item__button-action",
      "icon": {
        "id": "heart",
        "title": "Heart",
        "class": "button__icon",
        "hidden": true
      },
      "attributes": "type=\"button\" aria-label=\"Add to Wish List\""
    },
    "compare": {
      "class": "product-list-item__button-action",
      "icon": {
        "id": "compare",
        "title": "Compare",
        "class": "button__icon",
        "hidden": true
      },
      "attributes": "type=\"button\" aria-label=\"Add to compare\""
    }
  },
  "addToButton": {
    "text": "Add to cart",
    "class": "button--add-to product-list-item__add-to-button button--fluid",
    "attributes": "type=\"button\" aria-label=\"Add to cart\"",
    "iconBefore": {
      "id": "shopping-cart",
      "title": "Add to cart",
      "class": "button__icon",
      "hidden": true
    }
  },
  "name": "Short name"
}
  • Content:
    $product-list-item__border-style                          : $border-style-base !default;
    $product-list-item__border-color                          : $border-color-base !default;
    $product-list-item__border-width                          : 0 0 1px 0 !default;
    $product-list-item__padding                               : $spacer--semi-medium 0 $spacer--medium !default;
    $product-list-item__padding\@medium                       : $spacer--semi-medium 0 !default;
    $product-list-item__transition                            : $transition-base !default;
    
    $product-list-item__image-width                           : 80px !default;
    $product-list-item__image-width\@medium                   : 160px !default;
    $product-list-item__image-margin-right                    : $spacer !default;
    $product-list-item__image-margin-right\@medium            : $spacer--medium !default;
    $product-list-item__image-margin                          : 0 $product-list-item__image-margin-right 0 0 !default;
    $product-list-item__image-margin\@medium                  : 0 $product-list-item__image-margin-right\@medium 0 0 !default;
    $product-list-item__image-margin\@xl                      : 0 64px 0 0 !default;
    $product-list-item__image-link-decoration                 : none !default;
    
    $product-list-item__main-width                            : calc(100% - #{$product-list-item__image-width} - #{$product-list-item__image-margin-right}) !default;
    $product-list-item__main-width\@medium                    : calc(100% - #{$product-list-item__image-width\@medium} - #{$product-list-item__image-margin-right\@medium}) !default;
    
    $product-list-item__badges-z-index                        : $z-index-low !default;
    $product-list-item__badges-top\@medium                    : $spacer--medium !default;
    $product-list-item__badges-left                           : 0 !default;
    $product-list-item__badges-bottom                         : -$spacer !default;
    $product-list-item__badges-bottom\@medium                 : $spacer--large !default;
    
    $product-list-item__name-font-size                        : $font-size-base !default;
    $product-list-item__name-font-size\@medium                : $font-size-medium !default;
    $product-list-item__name-margin                           : ($spacer / 2) 0 !default;
    $product-list-item__name-margin\@medium                   : $spacer 0 ($spacer / 2) !default;
    $product-list-item__name-text-transform                   : none !default;
    $product-list-item__name-decoration                       : none !default;
    $product-list-item__name-decoration-hover                 : none !default;
    $product-list-item__name-color-hover                      : $color-primary !default;
    
    $product-list-item__sku-font-size                         : $font-size-extra-small !default;
    $product-list-item__sku-font-size\@medium                 : $font-size-base !default;
    $product-list-item__sku-color                             : $color-secondary !default;
    $product-list-item__sku-margin                            : 0 0 $spacer--medium !default;
    
    $product-list-item__description-margin                    : 0 0 $spacer !default;
    $product-list-item__description-font-size                 : $font-size-extra-small !default;
    $product-list-item__description-font-size\@medium         : $font-size-base !default;
    $product-list-item__description-color                     : $color-secondary !default;
    
    $product-list-item__list-display                          : block !default;
    $product-list-item__list-display\@medium                  : block !default;
    $product-list-item__list-color                            : $color-secondary !default;
    $product-list-item__list-font-size                        : $font-size-extra-small !default;
    $product-list-item__list-font-size\@medium                : $font-size-base !default;
    $product-list-item__list-margin                           : 0 !default;
    $product-list-item__list-margin\@medium                   : 0 !default;
    $product-list-item__list-label-padding                    : 0 $spacer $spacer $spacer--medium !default;
    
    $product-list-item__price-width                           : 100% !default;
    $product-list-item__price-margin\@medium                  : $spacer--extra-large 0 0 0 !default;
    $product-list-item__price-align                           : right !default;
    $product-list-item__price-font-size\@medium               : $font-size-extra-large !default;
    $product-list-item__price-old-font-size\@medium           : $font-size-large !default;
    $product-list-item__price-old-margin\@medium              : 0 !default;
    
    $product-list-item__action-icon-fill                      : $gray-darker !default;
    $product-list-item__action-margin                         : 0 $spacer--extra-small 0 0 !default;
    $product-list-item__action-margin\@medium                 : 0 $spacer 0 0 !default;
    
    $product-list-item__add-to-action-flex-grow               : 0 !default;
    $product-list-item__add-to-action-max-width               : 250px !default;
    $product-list-item__add-to-action-min-width\@large        : 160px !default;
    
    $product-list-item__add-to-icon-display                   : block !default;
    $product-list-item__add-to-icon-display\@medium           : block !default;
    $product-list-item__add-to-icon-display\@xl               : none !default;
    
    $product-list-item__stock-width                           : 100% !default;
    $product-list-item__stock-display                         : none !default;
    $product-list-item__stock-display\@medium                 : inline-flex !default;
    $product-list-item__stock-decoration                      : none !default;
    $product-list-item__stock-padding                         : 0 !default;
    $product-list-item__stock-text-aligment                   : flex-start !default;
    $product-list-item__stock-text-aligment\@medium           : flex-end !default;
    $product-list-item__stock-text-transform                  : uppercase !default;
    $product-list-item__stock-text-decoration-hover           : underline !default;
    
    $product-list-item__swatch-loader-icon-margin             : 0 $spacer--semi-large 0 0 !default;
    
    $product-list-item__wishlist-filled-bg-color-hover        : $color-primary !default;
    $product-list-item__wishlist-filled-bg-image-after-hover  : linear-gradient(to right, $white 50%, transparent 50%) !default;
    
    // EE Version
    $product-list-item-ee__tocompare-background-color         : $gray-lighter !default;
    $product-list-item-ee__towishlist-background-color        : $gray-lighter !default;
    $product-list-item-ee__multiwishlist-width                : 48px !default;
    $product-list-item-ee__multiwishlist-margin               : 0 $spacer 0 0 !default;
    $product-list-item-ee__dropdown-list-content-top          : auto !default;
    $product-list-item-ee__dropdown-list-content-bottom       : 100% !default;
    $product-list-item-ee__dropdown-list-content-width        : 180px !default;
    $product-list-item-ee__dropdown-list-content-width\@medium: 210px !default;
    $product-list-item-ee__dropdown-list-label-width          : 48px !default;
    $product-list-item-ee__dropdown-list-label-height         : 48px !default;
    
  • URL: /components/raw/product-list-item/_product-list-item-variables.scss
  • Filesystem Path: build/components/Organisms/product-list-item/_product-list-item-variables.scss
  • Size: 7.1 KB
  • Content:
    @import 'product-list-item-variables';
    
    .product-list-item {
        position: relative;
        display: flex;
        align-items: stretch;
        border-style: $product-list-item__border-style;
        border-width: $product-list-item__border-width;
        border-color: $product-list-item__border-color;
        padding: $product-list-item__padding;
        @include darken-layout-hover('.product-list-item__image-link .lazyload-wrapper');
    
        @include mq($screen-m) {
            padding: $product-list-item__padding\@medium;
        }
    
        &__image {
            transition: $product-list-item__transition;
    
            .image {
                transition: $product-list-item__transition;
            }
        }
    
        &__image-link {
            position: relative;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            width: $product-list-item__image-width;
            margin: $product-list-item__image-margin;
            text-decoration: $product-list-item__image-link-decoration;
    
            @include mq($screen-m) {
                margin: $product-list-item__image-margin\@medium;
                flex-basis: $product-list-item__image-width\@medium;
                min-width: $product-list-item__image-width\@medium;
            }
    
            @include mq($screen-xl) {
                margin: $product-list-item__image-margin\@xl;
            }
    
            &:after {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: transparent;
                transition: $product-list-item__transition;
            }
        }
    
        &__badges {
            z-index: $product-list-item__badges-z-index;
            left: $product-list-item__badges-left;
            bottom: $product-list-item__badges-bottom;
    
            @include mq($screen-m) {
                top: $product-list-item__badges-top\@medium;
                bottom: $product-list-item__badges-bottom\@medium;
            }
        }
    
        &__main {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: $product-list-item__main-width;
            max-width: $product-list-item__main-width;
    
            @include mq($screen-m) {
                display: flex;
                flex-basis: $product-list-item__main-width\@medium;
                max-width: $product-list-item__main-width\@medium;
            }
        }
    
        &__details {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
    
            @include mq($screen-m) {
                flex-grow: 1;
                flex-shrink: 1;
            }
        }
    
        &__name {
            margin: $product-list-item__name-margin;
            font-size: $product-list-item__name-font-size;
    
            @include mq($screen-m) {
                margin: $product-list-item__name-margin\@medium;
                font-size: $product-list-item__name-font-size\@medium;
            }
        }
    
        &__name-link {
            display: block;
            text-decoration: $product-list-item__name-decoration;
            text-transform: $product-list-item__name-text-transform;
            &:hover {
                color: $product-list-item__name-color-hover;
                text-decoration: $product-list-item__name-decoration-hover;
            }
        }
    
        &__sku {
            font-size: $product-list-item__sku-font-size;
            color: $product-list-item__sku-color;
            margin: $product-list-item__sku-margin;
    
            @include mq($screen-m) {
                font-size: $product-list-item__sku-font-size\@medium;
            }
        }
    
        &__description {
            color: $product-list-item__description-color;
            font-size: $product-list-item__description-font-size;
            margin: $product-list-item__description-margin;
            @include mq($screen-m) {
                font-size: $product-list-item__description-font-size\@medium;
            }
        }
    
        &__list {
            display: $product-list-item__list-display;
            margin: $product-list-item__list-margin;
            color: $product-list-item__list-color;
            font-size: $product-list-item__list-font-size;
    
            @include mq($screen-m) {
                display: $product-list-item__list-display\@medium;
                margin: $product-list-item__list-margin\@medium;
                font-size: $product-list-item__list-font-size\@medium;
            }
    
            dl {
                color: $product-list-item__list-color;
            }
    
            dt {
                position: relative;
                padding: $product-list-item__list-label-padding;
            }
        }
    
        &__actions {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            align-items: center;
    
            @include mq($screen-m) {
                flex-grow: 1;
                justify-content: flex-end;
                align-items: flex-start;
            }
        }
    
        &__actions-inner {
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-end;
    
            .button--icon:not(.button--add-to) {
                margin: $product-list-item__action-margin;
    
                @include mq($screen-m) {
                    margin: $product-list-item__action-margin\@medium;
                }
            }
    
            &--ee {
                display: flex;
                align-items: center;
    
                .button--tocompare {
                    background-color: $product-list-item-ee__tocompare-background-color;
                }
    
                .button--wishlist {
                    background-color: $product-list-item-ee__towishlist-background-color;
                }
    
                .button {
                    justify-content: center;
                    order: 1;
    
                    &__text {
                        display: none;
                    }
                }
    
                .product-list-item__add-to-action {
                    flex-grow: 0;
                    width: auto;
                    order: 4;
    
                    .button {
                        .button__text {
                            display: none;
    
                            @include mq($screen-xl) {
                                display: block;
                            }
                        }
    
                        .button__icon {
                            display: block;
    
                            @include mq($screen-xl) {
                                display: none;
                            }
                        }
                    }
                }
    
                .block-requisition-list {
                    order: 3;
                }
    
                .product-view {
                    &__update-wishlist {
                        display: none;
                    }
    
                    &__multiwishlist {
                        width: $product-list-item-ee__multiwishlist-width;
                        margin: $product-list-item-ee__multiwishlist-margin;
                        order: 2;
    
                        .dropdown-list__label {
                            justify-content: center;
                        }
                    }
                }
    
                .dropdown-list {
                    &__content {
                        top: $product-list-item-ee__dropdown-list-content-top;
                        bottom: $product-list-item-ee__dropdown-list-content-bottom;
                        width: $product-list-item-ee__dropdown-list-content-width;
    
                        @include mq($screen-m) {
                            width: $product-list-item-ee__dropdown-list-content-width\@medium;
                        }
                    }
    
                    &__icon {
                        display: none;
                    }
    
                    &__label {
                        width: $product-list-item-ee__dropdown-list-label-width;
                        height: $product-list-item-ee__dropdown-list-label-height;
                    }
    
                    &__item {
                        position: relative;
                    }
                }
            }
        }
    
        &__price {
            width: $product-list-item__price-width;
            .price {
                display: flex;
                flex-flow: column nowrap;
            }
    
            @include mq($screen-m) {
                margin: $product-list-item__price-margin\@medium;
                text-align: $product-list-item__price-align;
    
                .price {
                    align-items: flex-end;
                }
    
                .price__value {
                    font-size: $product-list-item__price-font-size\@medium;
    
                    &--old {
                        margin: $product-list-item__price-old-margin\@medium;
                        font-size: $product-list-item__price-old-font-size\@medium;
                    }
                }
            }
        }
    
        &__add-to-action {
            flex-grow: $product-list-item__add-to-action-flex-grow;
            max-width: $product-list-item__add-to-action-max-width;
    
            @include mq($screen-l) {
                min-width: $product-list-item__add-to-action-min-width\@large;
            }
    
            .button--add-to {
                @include add-to-button($product-list-item__add-to-icon-display);
    
                padding: $spacer;
    
                @include mq($screen-m) {
                    @include add-to-button($product-list-item__add-to-icon-display\@medium);
                }
    
                @include mq($screen-xl) {
                    @include add-to-button($product-list-item__add-to-icon-display\@xl);
                }
            }
        }
    
        &__stock {
            display: $product-list-item__stock-display;
            width: $product-list-item__stock-width;
            justify-content: $product-list-item__stock-text-aligment;
            padding: $product-list-item__stock-padding;
            text-transform: $product-list-item__stock-text-transform;
            text-decoration: $product-list-item__stock-decoration;
    
            @include mq($screen-m) {
                display: $product-list-item__stock-display\@medium;
                justify-content: $product-list-item__stock-text-aligment\@medium;
            }
    
            &:hover {
                text-decoration: $product-list-item__stock-text-decoration-hover;
            }
        }
    
        .button--wishlist {
            &.button--icon-filled {
                .icon {
                    fill: $color-primary;
                }
    
                &:after {
                    display: block;
                    background-position: 0 100%;
                }
    
                &:hover,
                &:active {
                    &:before {
                        background-color: $product-list-item__wishlist-filled-bg-color-hover;
                    }
    
                    &:after {
                        display: block;
                        background-image: $product-list-item__wishlist-filled-bg-image-after-hover;
                    }
    
                    .icon {
                        fill: $white;
                    }
                }
            }
        }
    
        &__rating {
            .review__amount,
            .review__summary-add {
                display: none;
            }
        }
    
        // swatch & loader
        .swatch {
            &__container--catalog {
                .loader__icon {
                    margin: $product-list-item__swatch-loader-icon-margin;
                }
            }
    
            &__wrapper {
                justify-content: flex-start;
                margin-left: -$swatch__option-padding--catalog;
    
                @include mq($screen-m) {
                    justify-content: flex-end;
                    margin-left: 0;
                }
            }
        }
    }
    
  • URL: /components/raw/product-list-item/_product-list-item.scss
  • Filesystem Path: build/components/Organisms/product-list-item/_product-list-item.scss
  • Size: 11 KB

to show attributes list in product-list-item, the module snowdog/module-highpointscientific-bullet-points is required to confirm