Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Product review app style overrides for Shopify's Supply theme
/*============================================================================
#Product Reviews - Free Shopify App
- https://apps.shopify.com/product-reviews
==============================================================================*/
#shopify-product-reviews {
margin: 0;
.spr-header-title {
@extend h1;
}
.spr-container {
padding: 0;
border: 0 none;
}
/*================ Summary Rating ================*/
.spr-summary {
border-bottom: 1px solid $borderColor;
padding-bottom: $gutter/2;
margin-bottom: $gutter;
@include at-query ($min, $large) {
float: left;
border: 1px solid $borderColor;
width: 20%;
padding: $gutter/3;
.spr-summary-starrating {
display: block;
margin: 0;
}
}
}
.spr-summary-caption {
font-size: 14px;
@include at-query ($min, $large) {
display: block;
border-bottom: 1px solid $borderColor;
margin-bottom: $gutter/3;
padding-bottom: $gutter/3;
}
}
.spr-summary-actions-newreview {
&:after {
content: ' \203A';
clear: none;
display: inline;
}
@include at-query ($min, $large) {
float: none;
}
}
.spr-header:after {
clear: none;
}
/*================ Content ================*/
.spr-content {
@include at-query ($min, $large) {
float: left;
width: 80%;
padding-left: $gutter;
}
}
.spr-reviews {
margin: 0;
}
.spr-review {
padding: 0;
margin: 0;
border: 0 none;
& + .spr-review {
margin-top: $gutter/2;
}
}
.spr-review-content-body {
font-size: inherit;
br {
content: '';
display: block;
overflow: hidden;
height: 1px;
}
}
/*================ Individual Ratings ================*/
.spr-review-header {
@include clearfix;
margin-bottom: $gutter/3;
}
.spr-review-header-title {
margin-right: $gutter/2;
font-family: $bodyFontStack;
font-weight: 400;
text-transform: uppercase;
font-size: 17px;
line-height: 20px; // may need adjusting if font sizes change
position: relative;
top: 2px;
}
@include at-query ($min, $large) {
.spr-review-header-starratings,
.spr-review-header-title {
display: inline;
}
.spr-review-header-title {
float: left;
}
}
.spr-review-header-starratings {
margin: 0 $gutter/2 $gutter/3 0;
}
.spr-review-header-byline {
display: inline-block;
margin: 0 0 $gutter/3;
}
.spr-review-reportreview {
display: none;
}
/*================ Review Form ================*/
.spr-form {
border: 0 none;
border-bottom: 1px solid $borderColor;
margin: 0 0 $gutter;
padding: 0 0 $gutter;
}
}
/*================ Star Icons ================*/
.spr-badge-starrating,
.spr-icon {
color: {{ settings.product_reviews_star_color }};
font-size: inherit;
}
/*================ Review count ================*/
.spr-badge-caption {
font-size: 13px;
}
/*================ Hide review badge if no reviews ================*/
.product-grid-item,
.product-meta--review {
.spr-badge[data-rating="0.0"] {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment