@shift72/core-template 0.4.2 → 0.5.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.1);
+    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($body-color, 0.1);
-  border-radius: 6px 0 0 6px;
-  color: $body-color;
+  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 {
@@ -149,9 +176,9 @@ s72-activatedevice-form,
 }
 
 .s72-modal-content {
-  background: $body-bg;
+  background: var(--body-bg);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  color: $body-color;
+  color: var(--body-color);
   padding: 20px 10px;
 
   .s72-modal-header {
@@ -159,7 +186,7 @@ s72-activatedevice-form,
     padding: 0 50px 20px 0;
 
     .s72-modal-title {
-      color: $body-color;
+      color: var(--body-color);
       font-size: 20px;
       font-weight: $font-weight-bold;
       line-height: auto;
@@ -194,4 +221,44 @@ s72-signup-form {
   .s72-form-text {
     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/_globals.scss

@@ -4,4 +4,4 @@ small {
 
 a:not([class]) {
   text-decoration: underline;
-}
+}

package/site/styles/_icons.scss

@@ -33,5 +33,5 @@
 }
 
 .alert svg {
-  fill: $primary;
-}
+  fill: var(--primary);
+}

package/site/styles/_language-selector.scss

@@ -30,11 +30,11 @@ s72-language-selector {
     }
 
     &:focus {
-      color: $primary;
+      color: var(--primary);
     }
 
     &:focus-visible {
-      outline: 1px dotted $body-color;
+      outline: 1px dotted var(--body-color);
       outline: 5px auto -webkit-focus-ring-color;
     }
   }

package/site/styles/_legacy.scss

@@ -136,9 +136,9 @@ s72-classification-label {
   }
 
   .s72-classification-label {
-    border: 1px solid rgba($body-color, 0.8);
+    border: 1px solid rgba(var(--body-color-rgb), 0.8);
     border-radius: 0;
-    color: rgba($body-color, 0.8);
+    color: rgba(var(--body-color-rgb), 0.8);
     font-size: 12px;
     font-weight: $font-weight-bold;
     padding: 1px 5px;
@@ -161,7 +161,7 @@ s72-classification-label {
 
 .meta-detail-content .meta-detail-tagline-and-classification .meta-item-tagline {
   align-self: center;
-  color: rgba($body-color, 0.8);
+  color: rgba(var(--body-color-rgb), 0.8);
   font-weight: $font-weight-normal;
   margin-bottom: 0;
 }

package/site/styles/_meta-detail.scss

@@ -105,7 +105,7 @@
 }
 
 .meta-detail-bg-gradient {
-  @include gradient-y(rgba($body-bg, 0.4), $body-bg, 0%, 100%);
+  @include gradient-y(rgba(var(--body-bg-rgb), 0.4), var(--body-bg), 0%, 100%);
   bottom: 0;
   position: absolute;
   top: 0;
@@ -120,16 +120,16 @@
 .meta-detail-main {
   @extend .d-flex;
   flex-direction: column;
-  padding: $page-detail-padding-top 20px 0 20px;
+  padding: var(--page-detail-padding-top) 20px 0 20px;
   @include media-breakpoint-up(md) {
     flex-direction: row;
     padding-bottom: 0;
-    padding-top: $page-detail-padding-top-md;
+    padding-top: var(--page-detail-padding-top-md);
   }
   @include media-breakpoint-up(lg) {
     padding-left: 50px;
     padding-right: 50px;
-    padding-top: $page-detail-padding-top-lg;
+    padding-top: var(--page-detail-padding-top-lg);
   }
 
   .poster {
@@ -175,7 +175,7 @@
   }
 
   .meta-item-tagline {
-    color: $body-color;
+    color: var(--body-color);
     font-size: 14px;
     font-weight: $font-weight-normal;
     @include media-breakpoint-up(xxxl) {
@@ -189,21 +189,43 @@
   }
 
   .meta-detail-buttons {
+    margin-left: -0.5rem;
+
+    // Purchase, play, trailer, wishlist are all in one group now
+    // Need similar bootstrap approach of handling/wrapping rows and columns via negative margin
+    margin-right: -0.5rem;
     min-height: 45px;
 
-    .s72-btn {
+    /* stylelint-disable selector-max-compound-selectors */
+    s72-pricing-buttons .s72-btn,
+    .meta-detail-extras,
+    s72-play-button,
+    can-be-watched-button:not(:empty) {
       animation: fadein 2s;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+    }
 
+    s72-modal-player,
+    s72-userwishlist-button,
+    s72-pricing-buttons .s72-btn,
+    s72-play-button,
+    .social-media-buttons,
+    can-be-watched-button:not(:empty) {
       margin-bottom: 10px;
+    }
 
+    // Handles spacing when there is only rent, only buy, or only play button
+    s72-pricing-buttons .s72-btn,
+    s72-play-button {
       &:nth-child(1) {
-        margin-right: 0.5rem;
+        margin-right: 0;
       }
-
-      &:nth-child(2) {
-        margin-left: 0;
+      &:only-child {
+        margin-right: 0.5rem;
       }
     }
+    /* stylelint-enable selector-max-compound-selectors */
   }
 
   s72-availability-label {
@@ -216,13 +238,14 @@
     }
 
     .availability-state {
-      color: $body-color;
+      color: var(--body-color);
       font-size: 12px;
       text-transform: none;
     }
   }
 
-  .meta-detail-synopsis {
+  .meta-detail-synopsis,
+  .meta-detail-switcher-tagline {
     padding-top: 10px;
 
     p {
@@ -246,8 +269,6 @@
     @extend .d-flex;
     flex-direction: row;
     flex-wrap: wrap;
-    min-height: 48px;
-    padding-bottom: 15px;
     @include media-breakpoint-up(md) {
       flex-direction: row;
     }
@@ -271,7 +292,7 @@
     h3,
     h4 {
       animation: fadein 2s;
-      color: $body-color;
+      color: var(--body-color);
       font-size: 8px;
       font-weight: $font-weight-bold;
       margin-bottom: 0;
@@ -283,7 +304,7 @@
 
     p {
       animation: fadein 2s;
-      color: $body-color;
+      color: var(--body-color);
       font-size: 12px;
       font-weight: $font-weight-light;
       margin-bottom: 0;
@@ -386,7 +407,7 @@
           }
 
           .runtime {
-            color: $body-color;
+            color: var(--body-color);
             font-size: 8px;
             margin-left: auto;
             padding-left: 5px;
@@ -400,7 +421,7 @@
 
           .synopsis {
             p {
-              color: $body-color;
+              color: var(--body-color);
               font-size: 12px;
               line-height: 12px;
               @include media-breakpoint-up(lg) {
@@ -437,7 +458,7 @@
     }
 
     &::after {
-      @include gradient-y(rgba($body-bg, 0), $body-bg, 0%, 100%);
+      @include gradient-y(rgba(var(--body-bg-rgb), 0), var(--body-bg), 0%, 100%);
 
       bottom: 0;
       left: 0;
@@ -447,7 +468,7 @@
 
     s72-image {
       &::before {
-        @include gradient-x(rgba($body-bg, 1), transparent, 0%, 100%);
+        @include gradient-x(rgba(var(--body-bg-rgb), 1), transparent, 0%, 100%);
 
         bottom: 0;
         content: '';
@@ -460,7 +481,7 @@
       }
 
       &::after {
-        @include gradient-x(transparent, rgba($body-bg, 1), 0%, 100%);
+        @include gradient-x(transparent, rgba(var(--body-bg-rgb), 1), 0%, 100%);
 
         bottom: 0;
         content: '';
@@ -476,18 +497,18 @@
 
   .meta-detail-main {
     flex-direction: column;
-    padding-top: $page-detail-padding-top;
+    padding-top: var(--page-detail-padding-top);
 
     @include media-breakpoint-up(md) {
       padding-left: 20px;
       padding-right: 20px;
-      padding-top: $page-detail-padding-top-md;
+      padding-top: var(--page-detail-padding-top-md);
     }
 
     @include media-breakpoint-up(lg) {
       padding-left: 50px;
       padding-right: 50px;
-      padding-top: $page-detail-padding-top-lg;
+      padding-top: var(--page-detail-padding-top-lg);
     }
   }
 
@@ -540,7 +561,6 @@
   .meta-detail-extras {
     @extend .d-flex;
 
-    margin-bottom: 64px;
     min-height: min-content;
     padding: 0;
   }

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/_mixins.scss

@@ -26,12 +26,12 @@
 
 @mixin a {
   background-color: transparent;
-  color: $link-color;
+  color: var(--link-color);
   text-decoration: underline;
 
   &:hover,
   &:focus {
-    color: $link-color;
+    color: var(--link-color);
     text-decoration: none;
   }
 }