<div class="review ">
<div class="review__details">
<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>
<div class="rating__title">
</div>
</div>
<div class="review__details">
<div class="review__heading">
<span class="review__title">
Klaas Akkerman
</span>
<span class="review__date">
08-06-2020
</span>
</div>
<div class="review__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.
</div>
</div>
</div>
<div class="review {{ class }}" {{{ attributes }}}>
<div class="review__details">
{{> '@rating' rating }}
</div>
<div class="review__details">
<div class="review__heading">
<span class="review__title">
{{ author }}
</span>
<span class="review__date">
{{ date }}
</span>
</div>
<div class="review__content">
{{ content }}
</div>
</div>
</div>
{
"modalContent": {
"class": "review--add-content"
},
"modal": {
"class": "review review--add",
"id": "addReview",
"attributes": "aria-labelledby=\"addReview\" aria-describedby=\"addReview\""
},
"trigger": true,
"addReviewTrigger": {
"buttonModalTrigger": {
"tag": "button",
"class": "modal-trigger review__summary-add",
"attributes": "data-modal-trigger=\"addReview\" type=\"button\"",
"icon": {
"id": "plus",
"title": "Plus",
"class": "button__icon review__summary-add--icon"
},
"text": "Review plaatsen"
}
},
"script": false,
"rating": {
"ariaLabel": "Average rating 72%",
"star": {
"attributes": "style=\"width: 72%\""
},
"class": "review__rating"
},
"author": "Klaas Akkerman",
"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": "08-06-2020"
}
.review {
width: 100%;
@include mq($screen-m) {
display: flex;
flex-flow: row nowrap;
padding: $spacer--3 $spacer--075;
}
&--add {
@include mq($screen-m) {
display: block;
}
&__heading {
padding: $spacer--1;
}
&__title {
font-family: $font-family-evogria;
font-style: normal;
font-weight: normal;
font-size: $font-size-large;
text-transform: uppercase;
color: #343434;
margin: 0;
}
&__title-product {
font-family: $font-family-saira;
font-style: normal;
font-weight: normal;
font-size: $font-size-medium;
color: #a7a7a7;
}
&__main-block {
background-color: #ecf5f4;
border-radius: 5px;
padding: $spacer--1;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
&__rating-block {
background-color: $white;
border-radius: $border-radius;
padding: $spacer--075;
flex: 1 0 60%;
}
&__product-image {
flex: 0 1 40%;
padding-right: $spacer--2;
}
&__rating {
display: grid;
grid-template-columns: 30% 70%;
border-bottom: 1px solid $gray-light;
&:last-child {
border: 0;
}
}
}
&--summary {
@include mq($screen-m) {
display: flex;
justify-content: flex-end;
}
.rating {
margin-right: $spacer;
}
}
&__details {
width: 100%;
&:first-child {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
&:last-child {
margin-top: $spacer--2;
}
@include mq($screen-m) {
&:first-child {
display: block;
width: 20%;
margin-right: $spacer--large;
}
&:last-child {
width: 80%;
margin-top: 0;
}
}
}
&__heading {
display: flex;
justify-content: space-between;
letter-spacing: 1px;
}
&__title {
font-size: $font-size-large;
font-weight: $font-weight-base;
font-family: $font-family-evogria;
text-transform: uppercase;
color: #a6a6a6;
}
&__title-product {
display: block;
margin: $spacer--05 0;
text-transform: none;
font-weight: bold;
}
&__content {
font-size: $font-size-base;
font-family: $font-family-saira;
font-weight: $font-weight-base;
margin-top: $spacer--15;
line-height: 165%;
& span {
color: $gray;
}
& p {
color: $gray-light;
}
}
&__date {
display: block;
color: #b4b4b4;
font-size: $font-size-base;
font-family: $font-family-saira;
}
&__field {
margin: 0;
padding: $spacer--1;
position: relative;
& .input__field {
opacity: 0.5;
font-family: $font-family-saira;
padding-right: 3rem;
+ svg.icon,
+ .mage-error + svg.icon {
display: none;
fill: #09cfc4;
}
&.valid + svg.icon,
&.valid + .mage-error + svg.icon {
position: absolute;
display: block;
top: 1.57rem;
right: 1rem;
}
}
}
&__placeReview-btn {
display: flex;
justify-content: flex-end;
margin-top: $spacer--15;
padding: 0;
}
&__submit-btn {
width: 50%;
border-radius: $border-radius;
}
&__required-info {
margin-top: $spacer--large;
font-size: $font-size-small;
}
&__summary-handle {
@include mq($screen-m) {
display: flex;
flex-basis: 100%;
}
}
&__amount {
&-qty {
font-family: $font-family-saira;
font-size: $font-size-base;
font-weight: $font-weight-semibold;
color: rgba(52, 52, 52, 0.75);
@include mq($screen-m) {
font-size: $font-size-large;
}
}
}
&__summary-add {
background: $white;
border-radius: $border-radius--small;
font-family: $font-family-saira;
font-weight: $font-weight-base;
font-size: $font-size-small;
color: #a6a6a6;
padding: 0 $spacer--125;
height: 40px;
display: flex;
flex-direction: row-reverse;
&:hover {
background: $red;
color: $white;
& .review__summary-add--icon {
fill: $white;
}
}
@include mq($screen-m) {
font-size: $font-size-medium;
}
&--icon {
fill: #a6a6a6;
height: 16px;
width: 16px;
margin-right: $spacer--05;
@include mq($screen-m) {
margin-right: $spacer--125;
height: 18px;
width: 18px;
}
}
}
&__summary-rating {
display: flex;
align-items: flex-end;
align-self: baseline;
justify-content: space-between;
flex-direction: row;
flex-basis: 100%;
@include mq($screen-m) {
flex-basis: 20%;
flex-direction: column;
align-items: flex-start;
align-self: center;
}
}
&__summary-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-basis: 100%;
margin-top: $spacer--075;
@include mq($screen-m) {
flex-basis: 80%;
margin-top: 0;
}
}
&__summary-amount {
display: flex;
@include mq($screen-m) {
justify-content: flex-start;
flex-basis: 50%;
}
}
&__summary-add-review {
display: flex;
@include mq($screen-m) {
flex-basis: 50%;
justify-content: flex-end;
}
}
&__rating-fieldset {
border-bottom: 1px solid $gray-lighter;
padding-bottom: $spacer--1;
&--second {
margin-top: $spacer--1;
}
&--last {
margin-top: $spacer--1;
padding: 0;
border: none;
}
& .row {
justify-content: space-between;
padding: 0 $spacer--075;
}
}
&__rating-legend {
font-family: $font-family-saira;
font-weight: $font-weight-semibold;
font-size: $font-size-large;
display: flex;
align-items: center;
margin-bottom: 0;
}
&__rating-stars {
margin: 0;
}
&__modal {
&.modal-popup {
display: none;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.6);
&._show {
display: block;
}
.modal-inner-wrap {
max-width: 650px;
border-radius: $border-radius--large;
padding: 15px;
}
.modal-header {
justify-content: space-between;
align-items: center;
padding-top: $spacer--1;
padding-bottom: $spacer--1;
.heading--page {
margin: 0;
}
.modal__close-button {
background: transparent;
.icon {
fill: $gray-light;
}
}
}
.content {
.review {
&--add {
padding: 0;
&__main-block {
margin-bottom: 0;
}
&__heading {
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
}
&__field {
padding: $spacer--1 0 0;
}
}
}
.modal-footer {
display: none;
}
@include mq(false, $screen-m) {
.modal-inner-wrap {
width: 95%;
}
.modal-header,
.modal-content {
padding-left: $spacer--05;
padding-right: $spacer--05;
}
.review {
&--add__main-block {
padding: $spacer--05;
}
&--add__product-image {
display: none;
}
&--add__rating {
grid-template-columns: 25% 75%;
}
}
}
}
}
}
There are no notes for this item.