@shift72/core-template 0.4.4 → 0.6.0-alpha.0

package/site/styles/_forms.scss

@@ -1,7 +1,8 @@
 label {
-  font-size: 14px;
-  font-weight: $font-weight-normal;
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
 }
+
 // Form Container Defaults
 s72-signin-form,
 s72-signup-form,
@@ -37,11 +38,11 @@ s72-activatedevice-form,
     }
 
     .s72-form-group-password {
-      padding-right: $grid-gutter-width / 2;
+      padding-right: 2px;
     }
 
     .s72-form-group-password2 {
-      padding-left: $grid-gutter-width / 2;
+      padding-left: 2px;
     }
   }
 }
@@ -61,10 +62,12 @@ s72-activatedevice-form,
 // Error Messaging
 .s72-error-message {
   background: $error-background;
+  border-radius: $border-radius;
   color: $error-color;
-  font-weight: $font-weight-normal;
+  font-size: 0.875rem;
+  letter-spacing: 0.02em;
   margin-top: 10px;
-  padding: 5px 8px;
+  padding: 4px 8px;
   position: relative;
 
   &::before {
@@ -88,20 +91,41 @@ s72-activatedevice-form,
   .s72-datepicker-year {
     flex-shrink: 0;
   }
+  .s72-datepicker-month {
+    margin: 0 4px;
+    width: 100%;
+  }
 }
 // Form Control Default
 .s72-form-control {
   font-weight: $font-weight-normal;
+  height: var(--input-height);
+
+  /* stylelint-disable-next-line */
+  &:not(.StripeElement) {
+    background-color: $body-bg-accent;
+    border-color: rgba(var(--body-color-rgb), 0.2);
+    color: var(--body-color);
+    &:focus {
+      border-color: $input-focus-border-color;
+      color: var(--body-color);
+    }
+    &::placeholder {
+      color: rgba(var(--body-color-rgb), 0.8);
+    }
+  }
 }
 // Account Page Change Password Field
 .s72-form-control-static {
-  background: rgba(var(--body-color-rgb), 0.1);
-  border-radius: 6px 0 0 6px;
+  background: $body-bg-accent;
   color: var(--body-color);
+  cursor: not-allowed;
   display: inline-block;
-  font-size: 30px;
-  line-height: 34px;
-  padding: 0.375rem 0.75rem 0 0.75em;
+  font-size: 1rem;
+  height: var(--input-height);
+  line-height: 1rem;
+  outline: none;
+  padding: 0.375rem 0.75rem;
 }
 .s72-modal-sm .s72-modal-dialog {
   max-width: 400px;
@@ -116,6 +140,9 @@ s72-activatedevice-form,
       }
     }
   }
+  .s72-form-control {
+    height: var(--input-height);
+  }
 }
 
 .s72-modal-closable {
@@ -128,11 +155,16 @@ s72-activatedevice-form,
 
 .s72-modal-container {
   .s72-buttons {
-    .s72-btn {
+
+    .fa-ellipsis-v {
+      opacity: 0.7;
+    }
+
+    .s72-btn:not(.s72-btn-show-saved-cards) {
       color: $button-text-color;
 
       &:hover {
-        color: $button-text-color-hover;
+        color: $button-text-color;
       }
     }
   }
@@ -195,3 +227,43 @@ s72-signup-form {
     margin-bottom: 1rem;
   }
 }
+
+// Error
+.was-validated .form-control:invalid,
+.was-validated .s72-form-control:invalid,
+.was-validated .s72-pincode:invalid,
+.form-control.is-invalid,
+.s72-has-error .form-control,
+.is-invalid.s72-form-control,
+.is-invalid.s72-pincode,
+.s72-has-error .s72-form-control,
+.s72-has-error .s72-pincode {
+  border: 2px solid rgba(var(--body-color-rgb), 0.5) !important;
+  box-shadow: none !important;
+}
+
+// Stripe Inputs
+.s72-payment-option-group {
+  .existing-card {
+    padding: 0.125rem 0 0.125rem 0.75rem;
+  }
+  // List of Saved Cards
+  .s72-form-control.existing-card.selectable {
+    background-color: transparent;
+    border-color: transparent;
+    margin-bottom: 12px;
+    padding-left: 0;
+    &:hover {
+      background-color: transparent;
+    }
+
+    /* stylelint-disable selector-no-qualifying-type */
+    i.fa.fa-trash {
+      color: $error-color;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+    /* stylelint-enable selector-no-qualifying-type */
+  }
+}

package/site/styles/_icons.scss

@@ -1,16 +1,187 @@
-// 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 +190,7 @@
 
 .icon-errored {
   @extend .fa;
-  @extend .fa-exclamation-circle;
+  @extend .fa-warning;
 }
 
 .icon-warning {

package/site/styles/_legacy.scss

@@ -159,13 +159,6 @@ s72-classification-label {
   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;

package/site/styles/_meta-detail.scss

@@ -120,7 +120,9 @@
 .meta-detail-main {
   @extend .d-flex;
   flex-direction: column;
+  gap: 0 20px;
   padding: var(--page-detail-padding-top) 20px 0 20px;
+
   @include media-breakpoint-up(md) {
     flex-direction: row;
     padding-bottom: 0;
@@ -135,23 +137,39 @@
   .poster {
     animation: fadein 2s;
     display: block;
-    width: 70%;
+    width: 110px;
+
+    @include media-breakpoint-up(xs) {
+      width: 155px;
+    }
+
     @include media-breakpoint-up(md) {
-      width: 200px;
+      width: 208px;
     }
   }
-  > .poster {
-    padding-right: 20px;
+
+  .poster-wrapper .sponsor {
+    @include media-breakpoint-up(xl) {
+      display: none;
+    }
   }
 }
 
-.meta-detail-content {
+s72-element-switcher,
+.meta-detail-bonus-content,
+.meta-detail-episodes-content {
+  flex: 1 1 100%;
+
   @include media-breakpoint-up(md) {
-    width: 563px;
+    max-width: 563px;
   }
   @include media-breakpoint-up(xl) {
-    width: 1100px;
+    max-width: 1100px;
   }
+}
+
+.meta-detail-content {
+  width: 100%;
 
   h1 {
     animation: fadein 2s;
@@ -175,7 +193,7 @@
   }
 
   .meta-item-tagline {
-    color: var(--body-color);
+    color: rgba(var(--body-color-rgb), 0.8);
     font-size: 14px;
     font-weight: $font-weight-normal;
     @include media-breakpoint-up(xxxl) {
@@ -201,7 +219,6 @@
     .meta-detail-extras,
     s72-play-button,
     can-be-watched-button:not(:empty) {
-
       animation: fadein 2s;
       margin-left: 0.5rem;
       margin-right: 0.5rem;
@@ -229,23 +246,8 @@
     /* stylelint-enable selector-max-compound-selectors */
   }
 
-  s72-availability-label {
-    position: relative;
-
-    .availability-bg {
-      background: transparent;
-      display: inline-block;
-      padding: 10px 0;
-    }
-
-    .availability-state {
-      color: var(--body-color);
-      font-size: 12px;
-      text-transform: none;
-    }
-  }
-
-  .meta-detail-synopsis {
+  .meta-detail-synopsis,
+  .meta-detail-switcher-tagline {
     padding-top: 10px;
 
     p {
@@ -286,8 +288,6 @@
   .meta-detail-studio,
   .meta-detail-country,
   .meta-detail-subtitle {
-    padding-bottom: 20px;
-
     h2,
     h3,
     h4 {
@@ -319,25 +319,11 @@
       font-size: 12px;
     }
   }
-
-  .meta-detail-crew {
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding: 0;
-
-    .crew-member {
-      padding-bottom: 20px;
-      padding-right: 20px;
-    }
-  }
 }
 
 /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
 .meta-detail-bonus-content,
 .meta-detail-episodes-content {
-  padding: 0;
-  padding-top: 20px;
-
   h2,
   h4 {
     align-self: stretch;
@@ -600,3 +586,42 @@
     font-size: 12px;
   }
 }
+
+.element-switcher-wrapper {
+  display: flex;
+  gap: 50px;
+  justify-content: space-between;
+  width: 100%;
+
+  .sponsor {
+    display: none;
+    padding-top: 10px;
+    @include media-breakpoint-up(xl) {
+      display: block;
+    }
+  }
+}
+
+.sponsor {
+  margin-bottom: 25px;
+  max-width: 250px;
+}
+
+.meta-detail-content .sponsor {
+  flex: 0 0 auto;
+  text-align: right;
+}
+
+s72-element-switcher {
+  margin-bottom: 50px;
+}
+
+.meta-detail-info {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(1, 1fr);
+
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

package/site/styles/_meta-item-tagline.scss

@@ -7,7 +7,7 @@
 
   .meta-item-tagline-item,
   .meta-item-tagline-divider {
-    @extend .list-inline-item;
+    @extend .d-inline;
 
     &:not(:last-child) {
       margin-right: map-get($spacers, 1); // Currently 0.25rem

package/site/styles/_nav.scss

@@ -165,7 +165,7 @@
 }
 
 .navbar-toggler {
-  height: 16px;
+  height: 19px;
   padding: 0;
   position: relative;
   width: 24px;
@@ -311,7 +311,7 @@
     }
 
     &::placeholder {
-      color: rgba($color: var(--body-color-rgb), $alpha: 0.8);
+      color: rgba(var(--body-color-rgb), 0.8);
       font-weight: $font-weight-normal;
       opacity: 0;
       transition: 0.25s ease-out;
@@ -383,7 +383,7 @@
 
   .search-icon {
     color: var(--body-color);
-    font-size: 18px;
+    font-size: 24px;
     left: 5px;
     pointer-events: none;
     position: absolute;
@@ -396,8 +396,9 @@
     background: transparent;
     border: 0;
     border-radius: 50%;
-    color: rgba($color: var(--body-color-rgb), $alpha: 0.7);
-    height: 32px;
+    color: rgba(var(--body-color-rgb), 0.7);
+    font-size: 24px;
+    line-height: 0;
     opacity: 0;
     pointer-events: none;
     position: absolute;
@@ -413,7 +414,7 @@
     &:hover,
     &:focus,
     &:active {
-      color: rgba($color: var(--body-color-rgb), $alpha: 1);
+      color: rgba(var(--body-color-rgb), 1);
       outline: 0;
     }
   }
@@ -701,7 +702,7 @@ s72-dropdown,
 
   s72-user-known,
   s72-user-anon {
-    border-top: 1px solid rgba($color: var(--body-color-rgb), $alpha: 0.1);
+    border-top: 1px solid rgba(var(--body-color-rgb), 0.1);
 
     @include media-breakpoint-up(lg) {
       border: 0;
@@ -710,7 +711,7 @@ s72-dropdown,
   }
 
   hr {
-    border-top: 1px solid rgba($color: var(--body-color-rgb), $alpha: 0.1);
+    border-top: 1px solid rgba(var(--body-color-rgb), 0.1);
     display: none;
     margin: 0 15px 5px;
 
@@ -809,7 +810,7 @@ s72-dropdown,
 }
 
 .vertical-line {
-  border-left: solid 1px rgba($color: var(--body-color-rgb), $alpha: 0.5);
+  border-left: solid 1px rgba(var(--body-color-rgb), 0.5);
   display: none;
   height: 25px;
   margin: 0 12px;
@@ -891,9 +892,9 @@ s72-dropdown,
   display: flex;
   justify-content: center;
   min-height: 26px;
+  padding: 8px 0;
   text-align: center;
   z-index: 10;
-
   .header-banner-message {
     font-size: 12px;
     margin-bottom: 0;

package/site/styles/_pages.scss

@@ -104,10 +104,8 @@
 .curated-page {
   .page-content {
     max-width: 1100px;
-    min-height: 220px;
     padding: 20px 20px 0;
     @include media-breakpoint-up(lg) {
-      min-height: 600px;
       padding: 20px 50px 0;
     }
 

package/site/styles/_plans.scss

@@ -32,21 +32,13 @@ s72-plan-label {
           }
         }
 
-        .poster {
-          s72-plan-label {
-            @extend .position-absolute;
-            @extend .mx-auto;
-            left: 5px !important;
-            top: 5px;
+        s72-plan-label {
+          @extend .position-absolute;
+          @extend .mx-auto;
 
-            z-index: 99;
-
-            .s72-plan-owned {
-              @extend .availability-bg;
-
-              background-color: $button-background;
-            }
-          }
+          left: 0;
+          top: 0;
+          z-index: 99;
         }
 
         s72-pricing-buttons:not(.s72-show) {
@@ -55,10 +47,11 @@ s72-plan-label {
 
         .plan-caption-details .s72-plan-owned {
           @extend .d-inline-block;
-          @extend .availability-bg;
-          @extend .mb-p5;
 
-          background-color: $button-background;
+          background-color: var(--primary);
+          border-radius: $border-radius 0 $border-radius 0;
+          line-height: 20px;
+          padding: 0 5px;
         }
 
         s72-user-anon a {
@@ -70,6 +63,11 @@ s72-plan-label {
 }
 
 .curated-plan-page {
+  // Fix some spacing under the h1
+  h1 {
+    line-height: 1;
+  }
+
   // Hide the separator if this is a curated collection page
   + .separator {
     @extend .border-0;