@shift72/core-template 0.6.0 → 1.1.0

package/site/styles/_cta-buttons.scss

@@ -0,0 +1,261 @@
+/* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
+.cta-buttons {
+  display: grid;
+  gap: 16px;
+  margin-bottom: 8px;
+
+  @include media-breakpoint-up(xs) {
+    grid-auto-columns: min-content;
+    grid-template-rows: 1fr;
+  }
+
+  > * {
+    @include media-breakpoint-up(xs) {
+      grid-column: auto;
+      grid-row: 1;
+    }
+    &:not(.extra-buttons) {
+      animation: fadein 2s;
+    }
+  }
+
+  .s72-pricing-button-container {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: 1fr 1fr;
+
+    @include media-breakpoint-up(xs) {
+      grid-template-columns: none;
+    }
+
+    > * {
+      align-self: start;
+    }
+
+    // If there is only one button, make it full width on one row.
+    :only-child {
+      grid-column: 1 / 3;
+      grid-row: 1;
+    }
+
+    // If there are two buttons...
+    :first-child:nth-last-child(2) {
+      // And the first button is the subscribe button:
+      // Put the subscribe button in the first row full width.
+      &.s72-subscribe {
+        grid-column: 1 / 3;
+        grid-row: 1;
+
+        @include media-breakpoint-up(xs) {
+          grid-column: auto;
+        }
+
+        // And put the other button in the second row full width.
+        + .s72-btn-purchase,
+        + .s72-btn-rent {
+          grid-column: 1 / 3;
+          grid-row: 2;
+
+          @include media-breakpoint-up(xs) {
+            grid-column: auto;
+            grid-row: 1;
+          }
+        }
+      }
+
+      // And the first button is the buy button
+      // Put the buy button in the first column, first row.
+      &.s72-btn-purchase {
+        grid-column: 1 / 2;
+        grid-row: 1;
+
+        @include media-breakpoint-up(xs) {
+          grid-column: auto;
+        }
+
+        // And put the rent button in the second column, first row.
+        + .s72-btn-rent {
+          grid-column: 2 / 3;
+          grid-row: 1;
+
+          @include media-breakpoint-up(xs) {
+            grid-column: auto;
+          }
+        }
+      }
+    }
+
+    // If there are three buttons...
+    :first-child:nth-last-child(3) {
+      // Put the subscribe button in the first row full width.
+      &.s72-subscribe {
+        grid-column: 1 / 3;
+        grid-row: 1;
+
+        @include media-breakpoint-up(xs) {
+          grid-column: auto;
+        }
+
+        // Put the buy button in the first column, second row.
+        ~ .s72-btn-purchase {
+          grid-column: 1 / 2;
+          grid-row: 2;
+
+          @include media-breakpoint-up(xs) {
+            grid-column: auto;
+            grid-row: 1;
+          }
+        }
+
+        // And put the rent button in the second column, second row.
+        ~ .s72-btn-rent {
+          grid-column: 2 / 3;
+          grid-row: 2;
+
+          @include media-breakpoint-up(xs) {
+            grid-column: auto;
+            grid-row: 1;
+          }
+        }
+      }
+    }
+
+    .s72-btn {
+      white-space: nowrap;
+      width: 100%;
+
+      @include media-breakpoint-up(xs) {
+        width: auto;
+      }
+
+      &:nth-child(2) {
+        margin: 0; // RELISH OVERRIDE.
+      }
+    }
+  }
+
+  s72-play-button {
+    .s72-btn-play {
+      margin: 0;
+      min-width: 140px;
+      padding: 6px 12px;
+      width: 100%;
+    }
+
+    .s72-btn-play-icon {
+      display: none;
+    }
+
+    .verb {
+      font-size: 1rem;
+    }
+  }
+
+  .s72-btn-can-be-watched {
+    min-width: 140px;
+    padding: 6px 12px;
+    width: 100%;
+
+    .padder {
+      display: none;
+    }
+
+    .s72-btn-can-be-watched-label {
+      font-size: 1rem;
+      font-weight: 400;
+    }
+  }
+
+  .extra-buttons {
+    align-items: center;
+    display: grid;
+    gap: 16px;
+    grid-template-rows: 1fr;
+    justify-items: center;
+    padding: 0 36px;
+
+    @include media-breakpoint-up(xs) {
+      grid-template-columns: min-content min-content min-content;
+      padding: 0;
+    }
+
+    > * {
+      align-self: start;
+      animation: fadein 2s;
+      grid-column: auto;
+      grid-row: 1;
+    }
+
+    /*#region ICON HACKS.  TODO: CLEAN THIS MESS UP! */
+    // This region exists to override styles for the trailer button, wishlist button, and share modal button.
+    // Once the new icons have been committed to core-template, this region should be deleted from this file,
+    // and the new CSS for these icons should live in _buttons.scss (probably).
+    .s72-btn-play {
+      background: transparent;
+      border: 0;
+      height: 42px;
+      margin: 0;
+      padding: 0;
+      width: 42px;
+
+      @include hover-focus {
+        background: transparent;
+
+        circle {
+          fill: var(--primary);
+          stroke: var(--primary);
+          stroke-width: 3px;
+        }
+
+        path {
+          fill: #000;
+          stroke: #000;
+        }
+      }
+
+      circle {
+        fill: transparent;
+        stroke: var(--primary);
+        stroke-width: 3px;
+      }
+
+      path {
+        fill: var(--body-color);
+        stroke: var(--body-color);
+      }
+
+      .verb {
+        display: none;
+      }
+    }
+
+    .s72-userwishlist-buttons {
+      .s72-btn-wishlist {
+        height: 42px;
+        margin: 0;
+        padding: 0;
+        width: 42px;
+      }
+
+      i {
+        margin: 0;
+        padding: 0;
+      }
+
+      span {
+        font-size: 0;
+      }
+    }
+
+    .social-media-buttons {
+      .s72-btn {
+        border: 0;
+        height: 42px;
+        padding: 0;
+        width: 42px;
+      }
+    }
+    /*#endregion */
+  }
+}
+/* stylelint-enable selector-max-compound-selectors, max-nesting-depth */

package/site/styles/_forms.scss

@@ -155,12 +155,11 @@ s72-activatedevice-form,
 
 .s72-modal-container {
   .s72-buttons {
-
     .fa-ellipsis-v {
       opacity: 0.7;
     }
 
-    .s72-btn:not(.s72-btn-show-saved-cards) {
+    .s72-btn {
       color: $button-text-color;
 
       &:hover {

package/site/styles/_icons.scss

@@ -50,35 +50,35 @@
 }
 
 .fa-cc-visa::before {
-  content: '\e000';
+  content: '\e027';
 }
 
 .fa-cc-stripe::before {
-  content: '\e001';
+  content: '\e026';
 }
 
 .fa-cc-paypal::before {
-  content: '\e002';
+  content: '\e025';
 }
 
 .fa-cc-mastercard::before {
-  content: '\e003';
+  content: '\e024';
 }
 
 .fa-cc-jcb::before {
-  content: '\e004';
+  content: '\e023';
 }
 
 .fa-cc-discover::before {
-  content: '\e005';
+  content: '\e022';
 }
 
 .fa-cc-diners-club::before {
-  content: '\e006';
+  content: '\e000';
 }
 
 .fa-cc-amex::before {
-  content: '\e007';
+  content: '\e002';
 }
 
 .fa-twitter::before {
@@ -154,13 +154,19 @@
 }
 
 .fa-circle::before {
-  content: '\e01c';
+  content: '\e001';
 }
 
-.fa-warning::before, .fa-exclamation-circle::before, .fa-exclamation-triangle::before {
+.fa-warning::before,
+.fa-exclamation-circle::before,
+.fa-exclamation-triangle::before {
   content: '\e01b';
 }
 
+.existing-card-icon {
+  font-size: 1.2rem;
+}
+
 s72-availability-label .availability-state::before {
   content: '\e01b';
 }

package/site/styles/_legacy.scss

@@ -116,49 +116,6 @@ s72-classification-label {
   display: inline-block;
 }
 
-.s72-classification {
-  @extend .d-flex;
-  display: inline-block;
-  margin-top: 0;
-  padding: 0;
-
-  .s72-classification-intro,
-  .s72-classification-divider {
-    display: none;
-  }
-
-  .s72-classification-description {
-    color: rgba(255, 255, 255, 0.8);
-    display: none;
-    font-size: 14px;
-    font-weight: $font-weight-normal;
-    margin-left: 5px;
-  }
-
-  .s72-classification-label {
-    border: 1px solid rgba(var(--body-color-rgb), 0.8);
-    border-radius: 0;
-    color: rgba(var(--body-color-rgb), 0.8);
-    font-size: 12px;
-    font-weight: $font-weight-bold;
-    padding: 1px 5px;
-    @include media-breakpoint-up(xxxl) {
-      font-size: 14px;
-    }
-  }
-}
-
-.meta-detail-content .meta-detail-tagline-and-classification {
-  align-items: center;
-  display: flex !important;
-  padding-bottom: 14px;
-  padding-top: 8px;
-}
-
-.meta-detail-content .meta-detail-tagline-and-classification .s72-classification {
-  margin-right: 5px;
-}
-
 .wishlist-page-landscape .s72-userwishlist-items {
   @extend .d-flex;
   flex-wrap: wrap;
@@ -295,6 +252,7 @@ p,
 
 .no-scroll {
   overflow-y: hidden;
+
   @include media-breakpoint-up(lg) {
     overflow-y: visible;
   }