@shift72/core-template 0.5.1 → 1.0.0-alpha.0

package/site/styles/_cta-buttons.scss

@@ -0,0 +1,262 @@
+/* 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;
+  }
+
+  > * {
+    &:not(.extra-buttons) {
+      animation: fadein 2s;
+    }
+
+    @include media-breakpoint-up(xs) {
+      grid-column: auto;
+      grid-row: 1;
+    }
+  }
+
+  .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

@@ -104,7 +104,7 @@ s72-activatedevice-form,
   /* stylelint-disable-next-line */
   &:not(.StripeElement) {
     background-color: $body-bg-accent;
-    border-color: rgba(var(--body-color-rgb), 0.1);
+    border-color: rgba(var(--body-color-rgb), 0.2);
     color: var(--body-color);
     &:focus {
       border-color: $input-focus-border-color;
@@ -155,11 +155,15 @@ s72-activatedevice-form,
 
 .s72-modal-container {
   .s72-buttons {
+    .fa-ellipsis-v {
+      opacity: 0.7;
+    }
+
     .s72-btn {
       color: $button-text-color;
 
       &:hover {
-        color: $button-text-color-hover;
+        color: $button-text-color;
       }
     }
   }

package/site/styles/_icons.scss

@@ -1,16 +1,189 @@
-// These icons mostly build off fontawesome
-// to help with common UX class combinations.
-//--------------------------------------------------
+@font-face {
+  font-family: 'fa-s72';
+  font-style: normal;
+  font-weight: normal;
+  src: url('/fonts/fa-s72.woff') format('woff');
+}
 
-.icon-navbar-toggler {
-  @extend .fa;
-  @extend .fa-bars;
+.fa {
+  font-family: 'fa-s72' !important;
+  font-style: normal !important;
+  font-variant: normal !important;
+  font-weight: normal !important;
+  line-height: 1;
+  text-transform: none !important;
+  vertical-align: middle;
+}
+
+.fa-credit-card::before,
+.fa-trash::before {
+  font-size: 18px;
+}
+
+.fa-ellipsis-v {
+  font-size: 26px;
+}
+
+.fa-credit-card {
+  line-height: 0;
+}
+
+.fa-angle-down,
+.fa-angle-left,
+.fa-angle-right,
+.fa-angle-up {
+  &::before {
+    content: '\e017';
+  }
+}
+
+.fa-angle-left {
+  transform: rotate(90deg);
+}
+
+.fa-angle-up {
+  transform: rotate(180deg);
+}
+
+.fa-angle-right {
+  transform: rotate(270deg);
+}
+
+.fa-cc-visa::before {
+  content: '\e000';
+}
+
+.fa-cc-stripe::before {
+  content: '\e001';
+}
+
+.fa-cc-paypal::before {
+  content: '\e002';
+}
+
+.fa-cc-mastercard::before {
+  content: '\e003';
+}
+
+.fa-cc-jcb::before {
+  content: '\e004';
+}
+
+.fa-cc-discover::before {
+  content: '\e005';
+}
+
+.fa-cc-diners-club::before {
+  content: '\e006';
+}
+
+.fa-cc-amex::before {
+  content: '\e007';
+}
+
+.fa-twitter::before {
+  content: '\e008';
+}
+
+.fa-star::before {
+  content: '\e009';
+}
+
+.fa-error::before {
+  content: '\e00a';
+}
+
+.fa-circle-o::before {
+  content: '\e00b';
+}
+
+.fa-check::before {
+  content: '\e00c';
+}
+
+.fa-times::before {
+  content: '\e00d';
+}
+
+.fa-trash::before {
+  content: '\e00e';
+}
+
+.fa-facebook::before {
+  content: '\e00f';
+}
+
+.fa-link::before {
+  content: '\e010';
+}
+
+.fa-linkedin::before {
+  content: '\e011';
+}
+
+.fa-envelope::before {
+  content: '\e012';
+}
+
+.fa-ellipsis-v::before {
+  content: '\e013';
+}
+
+.fa-check-circle::before {
+  content: '\e015';
+}
+
+.fa-search::before {
+  content: '\e016';
+}
 
-  &.toggled {
-    @extend .fa-close;
+.fa-angle-down::before {
+  content: '\e017';
+}
+
+.fa-credit-card::before {
+  content: '\e018';
+}
+
+.fa-globe::before {
+  content: '\e019';
+}
+
+.fa-share-alt::before {
+  content: '\e01a';
+}
+
+.fa-circle::before {
+  content: '\e01c';
+}
+
+.fa-warning::before,
+.fa-exclamation-circle::before,
+.fa-exclamation-triangle::before {
+  content: '\e01b';
+}
+
+s72-availability-label .availability-state::before {
+  content: '\e01b';
+}
+
+.fa-spinner::before {
+  content: '\e014';
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
   }
 }
 
+.fa-spin {
+  animation: fa-spin 2s linear infinite;
+}
+
 .icon-loading {
   @extend .fa;
   @extend .fa-spinner;
@@ -19,7 +192,7 @@
 
 .icon-errored {
   @extend .fa;
-  @extend .fa-exclamation-circle;
+  @extend .fa-warning;
 }
 
 .icon-warning {

package/site/styles/_legacy.scss

@@ -116,56 +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;
-}
-
-.meta-detail-content .meta-detail-tagline-and-classification .meta-item-tagline {
-  align-self: center;
-  color: rgba(var(--body-color-rgb), 0.8);
-  font-weight: $font-weight-normal;
-  margin-bottom: 0;
-}
-
 .wishlist-page-landscape .s72-userwishlist-items {
   @extend .d-flex;
   flex-wrap: wrap;
@@ -302,6 +252,7 @@ p,
 
 .no-scroll {
   overflow-y: hidden;
+
   @include media-breakpoint-up(lg) {
     overflow-y: visible;
   }