Skip to content

Product Rating And Review Modal

Styles for a product rating and review modal used in product_rating_and_review_modal_form macro.

Structurally .rating-and-review-modal element contains following elements:

  • .rating-and-review-modal__header
  • .rating-and-review-modal__product
  • .rating-and-review-modal__product-image-wrapper
  • .rating-and-review-modal__product-name

LESS

You can modify any product rating and review modal less variable in your User Less section to change product rating and review modal styles.

Product Rating And Review Modal variables

Variables used to style a product rating and review modal.

@ratingAndReviewModalProductImageWrapperMaxWidth: 128px;
@ratingAndReviewModalProductImageWrapperMarginBottom: @globalSpacing;

@ratingAndReviewModalProductNameFontSize: @fontSizeInPxS;
@ratingAndReviewModalProductNameLineHeight: @lineHeightInPxS;
@ratingAndReviewModalProductNameColor: @globalFontColorSecondary;

If you want to change product rating and review modal styles, you can just change the variables. To change default color of the product name element of the product rating and review modal just modify @ratingAndReviewModalProductNameColor variable.

@ratingAndReviewModalProductNameColor: red;

Product Rating And Review Modal styles

Standard product rating and review modal styles.

.rating-and-review-modal {
    &__product {
        @media (max-width: (@breakPointXs - 1)) {
            flex-direction: column;
        }

        &-image-wrapper {
            max-width: @ratingAndReviewModalProductImageWrapperMaxWidth;

            @media (max-width: (@breakPointXs - 1)) {
                margin-bottom: @ratingAndReviewModalProductImageWrapperMarginBottom;
            }
        }

        &-name {
            .pixel-to-rem(font-size, @ratingAndReviewModalProductNameFontSize);
            .pixel-to-rem(line-height, @ratingAndReviewModalProductNameLineHeight);

            color: @ratingAndReviewModalProductNameColor;
        }
    }
}

Macros reference