Merge pull request #220 from Pearson-Advance/pearson/PAE-164.2

PAE - 164.2: Addressing feedback problems on ticket for the Regis ecommerce theme
Pearson-Advance · Aug 11, 2022 · a0580fc · a0580fc
2 parents 09efc47 + 7f3dd4d
commit a0580fc
Show file tree

Hide file tree

Showing 5 changed files with 341 additions and 80 deletions.
diff --git a/ecommerce/regis/static/sass/base/_basket.scss b/ecommerce/regis/static/sass/base/_basket.scss
@@ -1,36 +1,75 @@
 // Basket styles ecommerce/ecommerce/static/sass/partials/views/_basket.scss.
 
 .basket {
+  font-family: $font-family-primary;
+
   .container {
-    padding: 45px 20px 30px;
+    padding: 45px 55px 30px;
+    margin: 0;
+    width: 100%;
+    max-width: 1170px;
+    margin: 0 auto;
 
     h3 {
       margin-bottom: 30px;
+      color: black;
     }
 
     .basket-items {
       border: 1px solid $gray;
       padding: 20px;
       margin-bottom: 45px;
+      font-family: $font-family-primary;
+
+      .row {
+        margin: 0;
+
+        .product-image {
+          margin-bottom: 20px;
+        }
+
+        .product-title {
+          font-family: $font-family-primary;
+          font-weight: 500;
+          font-size: 18px;
+          line-height: 28px;
+          color: black;
+        }
+
+        .product-prices {
+          width: fit-content;
+          padding: 0;
+
+          .discount {
+            margin: 0;
+            display: block;
+
+            .benefit {
+              display: block;
+            }
+
+            & > div {
+              margin: 0;
+              font-weight: 500;
+              font-size: 18px;
+              line-height: 28px;
+            }
+          }
+
+          .price,
+          .price.discounted {
+            color: black;
+            font-weight: 500;
+            font-size: 18px;
+            line-height: 28px;
+          }
+        }
+      }
     }
 
     .payment-buttons {
       .payment-button {
-        border-color: $contrast-color;
-        padding: 1em 3em;
-        background: $contrast-color;
-        border-radius: initial;
-        letter-spacing: 0.16em;
-        text-transform: uppercase;
-        font-size: 0.8em;
-
-        &:hover,
-        &.is-hovered,
-        &:focus,
-        &.is-focused {
-          border-color: $contrast-color;
-          background: $contrast-color;
-        }
+        @include primary-button-mixin;
       }
     }
 
@@ -43,16 +82,36 @@
 
     .total,
     #summary {
+      margin-right: 20px;
+
       .use-voucher {
+        padding: 0;
+
+        .code {
+          float: right;
+        }
+
         #voucher_form_link {
           @include float(right);
 
           a {
             color: $contrast-color;
             border: none;
             font-weight: 500;
+            font-size: 16px;
+            font-family: $font-family-primary;
           }
         }
+
+        #voucher-form-container {
+          @include float(right);
+        }
+
+        #apply-voucher-button {
+          @include primary-button-mixin;
+
+          padding: 5px 10px;
+        }
       }
 
       #basket_totals {
@@ -67,5 +126,53 @@
         }
       }
     }
+
+    #content-inner > .row {
+      margin: 0 20px;
+
+      .col-sm-12 {
+        padding: 0;
+      }
+    }
+  }
+}
+
+@media (max-width: $screen-sm-max) {
+  .basket {
+    font-family: $font-family-primary;
+
+    .container {
+      padding: 45px 15px 30px;
+
+      .basket-items {
+        .row {
+          & > .col-sm-12 {
+            padding: 0;
+          }
+
+          .product-prices {
+            float: left !important;
+            margin-top: 0;
+
+            .discount {
+              text-align: left;
+            }
+
+            .price {
+              padding: 0;
+              float: left;
+            }
+          }
+        }
+      }
+
+      .total {
+        margin-right: 0;
+      }
+    }
+
+    #content-inner > .row {
+      margin: 0 !important;
+    }
   }
 }