Alpaca components for Magento 2

Review: Summary 

<div class="
        review
        review--summary
        
    ">
    <div class="review__summary-handle">
        <div class="rating review__rating" aria-label="Average rating 72%" title="" tabindex="0">
            <div class="rating__star " role="presentation" style="width: 72%">
                <span class="
                rating__indicator
                
            "></span>
            </div>
        </div>

        <a href="#" class="review__summary-add">
            32 Reviews
        </a>
    </div>
</div>
 
<div
    class="
        review
        review--summary
        {{ class }}
    "
>
    <div class="review__summary-handle">
        {{ render '@rating' rating }}

        <a
            href="#"
            class="review__summary-add"
        >
            {{#if reviewsQty}}
                {{ reviewsQty }}
            {{else}}
                {{ reviewsText}}
            {{/if}}
        </a>
    </div>
</div>
 
{
  "rating": {
    "ariaLabel": "Average rating 72%",
    "star": {
      "attributes": "style=\"width: 72%\""
    },
    "class": "review__rating"
  },
  "author": "Anna Maria",
  "authorDescription": "Verified Buyer",
  "shareText": "Share",
  "reviewText": "Was This Review Helpful?",
  "title": "Review title",
  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper. ",
  "date": "07/08/2018",
  "icons": {
    "thumbUp": {
      "id": "thumb-up",
      "title": "Thumb up"
    },
    "thumbDown": {
      "id": "thumb-down",
      "title": "Thumb down"
    },
    "share": {
      "id": "share"
    }
  },
  "reviewsQty": "32 Reviews",
  "reviewsText": "Reviews"
}
  • Content: 
    $review__width                          : 100% !default;

$review__wrapper-height                 : $spacer--extra-large !default;
$review__wrapper-margin                 : $spacer--medium 0 !default;
$review-width--summary                  : auto !default;

$review__title-font-weight              : $font-weight-bold !default;
$review__title-text-transform           : capitalize !default;
$review__title-font-family              : $font-family-base !default;
$review__title-product-margin           : $spacer 0 !default;
$review__title-text-transform           : none !default;

$review__author-text-transform          : capitalize !default;
$review__author-font-family             : $font-family-base !default;
$review__author-margin                  : 0 !default;
$review__author-description-color       : $gray-dark !default;
$review__author-description-font-size   : $font-size-small !default;
$review__author-font-weight             : $font-weight-bold !default;

$review__date-color                     : $color-secondary !default;
$review__date-font-size                 : $font-size-small !default;

$review__submit-btn-width               : 100% !default;
$review__submit-btn-width\@medium       : auto !default;

$review__required-info-margin           : $spacer--large 0 0 !default;
$review__required-info-font-size        : $font-size-small !default;

$review__summary-handle-display         : flex !default;
$review__summary-handle-flex-flow       : row wrap !default;
$review__summary-handle-align-items     : center !default;
$review__summary-handle-justify-content : flex-start !default;
$review__summary-handle-width           : auto !default;

$review__amount-text-decoration         : none !default;
$review__amount-letter-spacing          : 2px !default;
$review__amount-margin                  : 0 $spacer 0 0 !default;
$review__amount-margin\@medium          : 0 $spacer 0 0 !default;
$review__amount-padding                 : 0 !default;
$review__amount-color                   : $gray-dark !default;

$review__summary-add-width              : 100% !default;
$review__summary-add-padding            : 0 !default;
$review__summary-add-text-decoration    : underline !default;
$review__summary-add-text-align         : left !default;
$review__summary-add-color              : $gray-dark !default;

$review__details-max-width              : calc(100% - #{$spacer--extra-large}) !default;
$review__details-flex-basis             : calc(100% - #{$spacer--extra-large}) !default;
$review__details-padding                : 0 0 0 $spacer--medium !default;

$review__image-max-width                : $spacer--extra-large !default;
$review__image-width                    : $spacer--extra-large !default;
$review__image-flex-basis               : $spacer--extra-large !default;
$review__image-border-radius            : 50% !default;
$review__image-height                   : auto !default;

$review__rating-legend-color            : $gray-dark !default;

$review__fieldset-padding               : 0 0 $spacer--extra-large * 2 0 !default;
$review__fieldset-margin                : 0 auto !default;
$review__fieldset-max-width             : 650px !default;
$review__field-margin                   : $spacer--semi-medium 0 !default;

$review__rating-margin                  : 0 0 $spacer--medium !default;
$review__description-margin             : 0 0 $spacer--medium !default;
$review__description-paragraph-font-size: $font-size-base !default;
$review__description-paragraph-color    : $gray-dark !default;

$review__links-column-margin-first-child: $spacer--large 0 !default;
$review__links-margin                   : 0 0 $spacer--large !default;
$review__links-btn-color                : $gray-dark !default;
$review__links-btn-text-decoration      : none !default;
$review__links-btn-padding              : 0 $spacer--medium 0 0 !default;
$review__links-btn-icon-fill            : $gray-dark !default;
$review__links-btn-icon-margin          : 0 $spacer 0 0 !default;
$review__links-legend-color             : $gray-dark !default;
$review__links-legend-margin            : 0 $spacer--medium 0 0 !default;

// add variant
$review__padding--add                   : $spacer--semi-large 0 0 !default;
$review__margin--add                    : 0 0 $spacer--medium !default;
$review__border--add                    : $border-base !default;
$review__border-width--add              : 0 0 1px 0 !default;

// summary variant
$review__rating-margin--summary         : 0 $spacer 0 0 !default;
$review__rating-padding--summary        : 0 !default;
  • URL: /components/raw/review/_review-variables.scss
  • Filesystem Path: build/components/Organisms/review/_review-variables.scss
  • Size: 4.6 KB
  • Content: 
    @import 'review-variables';

.review {
    width: $review__width;

    @include mq($screen-m) {
        display: flex;
        flex-flow: row nowrap;
    }

    &--add {
        padding: $review__padding--add;
        margin: $review__margin--add;
        border: $review__border--add;
        border-width: $review__border-width--add;

        @include mq($screen-m) {
            display: block;
        }
    }

    &--summary {
        width: $review-width--summary;

        .rating {
            margin: $review__rating-margin--summary;
            padding: $review__rating-padding--summary;
        }
    }

    &__details {
        max-width: $review__details-max-width;
        flex-basis: $review__details-flex-basis;
        padding: $review__details-padding;
    }

    &__image {
        max-width: $review__image-max-width;
        flex-basis: $review__image-flex-basis;

        .image {
            max-width: $review__image-max-width;
            width: $review__image-width;
            height: $review__image-height;
            border-radius: $review__image-border-radius;
        }
    }

    &__rating-legend {
        color: $review__rating-legend-color;
    }

    &__wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        height: $review__wrapper-height;
        margin: $review__wrapper-margin;
    }

    &__title {
        font-weight: $review__title-font-weight;
        text-transform: $review__title-text-transform;
        font-family: $review__title-font-family;
    }

    &__title-product {
        display: block;
        margin: $review__title-product-margin;
        text-transform: $review__title-text-transform;
    }

    &__author-name {
        font-weight: $review__author-font-weight;
        text-transform: $review__author-text-transform;
        font-family: $review__author-font-family;
        margin: $review__author-margin;
    }

    &__author-description {
        color: $review__author-description-color;
        font-size: $review__author-description-font-size;
    }

    &__date {
        display: block;
        color: $review__date-color;
        font-size: $review__date-font-size;
    }

    &__fieldset {
        max-width: $review__fieldset-max-width;
        margin: $review__fieldset-margin;
        padding: $review__fieldset-padding;
    }

    &__field {
        margin: $review__field-margin;
    }

    &__submit-btn {
        width: $review__submit-btn-width;

        @include mq($screen-m) {
            width: $review__submit-btn-width\@medium;
        }
    }

    &__required-info {
        margin: $review__required-info-margin;
        font-size: $review__required-info-font-size;
    }

    &__summary-handle {
        display: $review__summary-handle-display;
        flex-flow: $review__summary-handle-flex-flow;
        align-items: $review__summary-handle-align-items;
        justify-content: $review__summary-handle-justify-content;
        width: $review__summary-handle-width;
    }

    &__amount {
        margin: $review__amount-margin;
        padding: $review__amount-padding;
        letter-spacing: $review__amount-letter-spacing;
        text-decoration: $review__amount-text-decoration;
        color: $review__amount-color;
        white-space: nowrap;

        @include mq($screen-m) {
            margin: $review__amount-margin\@medium;
        }

        &.focus-visible {
            @include focus-inline();
        }
    }

    &__summary-add {
        width: $review__summary-add-width;
        padding: $review__summary-add-padding;
        text-decoration: $review__summary-add-text-decoration;
        text-align: $review__summary-add-text-align;
        color: $review__summary-add-color;

        &.focus-visible {
            @include focus-inline();
        }
        .review-customer-view & {
            display: none;
        }
    }

    &__rating {
        margin: $review__rating-margin;
    }

    &__description {
        margin: $review__description-margin;

        p {
            font-size: $review__description-paragraph-font-size;
            color: $review__description-paragraph-color;
        }
    }

    &__links {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: $review__links-margin;

        .button {
            padding: 0;
        }
    }

    &__links-column {
        display: flex;
        align-items: center;

        &:first-child {
            margin: $review__links-column-margin-first-child;
        }
    }

    &__links-btn {
        display: flex;
        align-items: center;
        background: transparent;
        border: none;
        cursor: pointer;
        border-radius: 0;
        color: $review__links-btn-color;
        text-decoration: $review__links-btn-text-decoration;
        padding: $review__links-btn-padding;

        &:last-child {
            padding-right: 0;
        }

        .icon {
            fill: $review__links-btn-icon-fill;
            margin: $review__links-btn-icon-margin;
        }
    }

    &__links-legend {
        color: $review__links-legend-color;
        margin: $review__links-legend-margin;
    }
}
  • URL: /components/raw/review/_review.scss
  • Filesystem Path: build/components/Organisms/review/_review.scss
  • Size: 5.2 KB

No notes defined.