@shift72/core-template 0.4.2 → 0.5.0

package/site/styles/_awards.scss

@@ -1,6 +1,8 @@
 .meta-awards {
   @extend .d-flex;
   @extend .align-items-center;
+  margin-left: -25px;
+  margin-right: -25px;
 
   &.meta-awards-all {
     @extend .align-items-start;
@@ -8,27 +10,30 @@
 
   .meta-award-nomination {
     @extend .d-flex;
+    max-width: 370px;
+    padding-right: 25px;
+    padding-left: 25px;
   }
 
   .meta-award-nomination-icon {
     @extend .fa;
     @extend .fa-star; // for now
+
     font-size: 1.25rem;
     line-height: 1.5rem;
-    padding-right: .5rem;
+    padding-right: 0.5rem;
   }
 }
 
 .meta-awards-icon-overlay {
   @extend .text-center;
 
-  border-radius: $meta-item-border-radius;
   background: rgba(0, 0, 0, 0.8);
-
-  padding-right: 3px;
+  border-radius: $meta-item-border-radius;
+  height: 16px + (3px * 2);
   padding-left: 3px;
+  padding-right: 3px;
   width: 16px + (3px * 2);
-  height: 16px + (3px * 2);
 
   .meta-award-nomination-icon {
     @extend .fa;
@@ -36,4 +41,4 @@
 
     font-size: 1rem;
   }
-}
+}

package/site/styles/_bootstrap4.scss

@@ -34,3 +34,93 @@
 @import 'bootstrap/scss/tooltip';
 @import 'bootstrap/scss/popover';
 @import 'bootstrap/scss/utilities';
+
+// The following override classes are to get around Bootstrap 4's use of Sass variables.
+// CSS themes will not work without these hacks.
+
+.btn-primary-override {
+  @extend .btn-primary;
+  border-color: $button-background;
+
+  color: $button-text-color;
+
+  @include hover() {
+    border-color: $button-background-hover;
+    color: $button-text-color-hover;
+  }
+
+  &:focus,
+  &.focus {
+    border-color: $button-background-hover;
+    color: $button-text-color-hover;
+    @if $enable-shadows {
+      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(var(--primary-rgb), 0.5));
+    } @else {
+      box-shadow: 0 0 0 $btn-focus-width rgba(var(--primary-rgb), 0.5);
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    background-color: $button-background;
+    border-color: $button-background;
+    color: $button-text-color;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    background-color: $button-background-hover;
+    border-color: $button-background-hover;
+    color: $button-text-color-hover;
+
+    &:focus {
+      @if $enable-shadows and $btn-active-box-shadow != none {
+        @include box-shadow(
+          $btn-active-box-shadow,
+          0 0 0 $btn-focus-width rgba(var(--primary-rgb), 0.5)
+        );
+      } @else {
+        box-shadow: 0 0 0 $btn-focus-width rgba(var(--primary-rgb), 0.5);
+      }
+    }
+  }
+}
+
+.btn-link-override {
+  @extend .btn-link;
+
+  color: var(--link-color);
+
+  @include hover() {
+    color: var(--link-color-hover);
+  }
+}
+
+a {
+  @extend a;
+
+  color: var(--link-color);
+
+  @include hover() {
+    color: var(--link-color-hover);
+  }
+}
+
+.dropdown-item-override {
+  @extend .dropdown-item;
+
+  &.active,
+  &:active {
+    background-color: transparent;
+  }
+}
+
+.list-group-item-override {
+  @extend .list-group-item;
+
+  &.active {
+    background-color: var(--primary);
+    border-color: var(--primary);
+  }
+}

package/site/styles/_buttons.scss

@@ -25,7 +25,7 @@
   @include hover-focus {
     background: $signin-background-hover;
     border: 3px solid $signin-border-color-hover;
-    color: $body-color;
+    color: var(--body-color);
   }
   @include media-breakpoint-up(lg) {
     background-color: $signin-background-lg;
@@ -115,8 +115,8 @@
     background: transparent;
 
     .s72-icon-play circle {
-      fill: $primary;
-      stroke: $primary;
+      fill: var(--primary);
+      stroke: var(--primary);
       stroke-width: 3px;
     }
 
@@ -136,7 +136,7 @@
 
     .verb {
       background: transparent;
-      color: $primary;
+      color:var(--primary);
     }
   }
 
@@ -152,13 +152,13 @@
 
     circle {
       fill: transparent;
-      stroke: $primary;
+      stroke: var(--primary);
       stroke-width: 3px;
     }
 
     path {
-      fill: $body-color;
-      stroke: $body-color;
+      fill: var(--body-color);
+      stroke: var(--body-color);
     }
   }
 
@@ -168,6 +168,7 @@
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
     font-size: 12px;
+    font-weight: $font-weight-bold;
     margin-left: 0;
     padding-bottom: 0;
     padding-left: 8px;
@@ -215,7 +216,7 @@
   .s72-btn-wishlist {
     background: transparent;
     border: 0 none;
-    color: $body-color;
+    color: var(--body-color);
     font-size: 14px;
 
     .s72-icon-loading,
@@ -243,3 +244,26 @@
     border-color: $gray-200;
   }
 }
+
+s72-donate-button:not(:empty) {
+   &:hover a {
+    background-color: $button-background-hover;
+    color: $button-text-color-hover;
+    /* stylelint-disable selector-max-compound-selectors */
+    svg {
+      g {
+        fill: $button-text-color-hover;
+      }
+    }
+    /* stylelint-enable selector-max-compound-selectors */
+  }
+  a {
+    color: $button-text-color;
+    background-color: $button-background;
+  }
+  svg {
+    g {
+      fill: $button-text-color;
+    }
+  }
+}

package/site/styles/_can-be-watched-button.scss

@@ -24,8 +24,10 @@
 
 .meta-detail-content .meta-detail-buttons,
 .meta-item-buttons {
+  align-items: center;
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
 
   .owned-custom-container {
     display: none;

package/site/styles/_card.scss

@@ -1,3 +1,3 @@
 .card {
-    @extend .text-dark;
-}
+  @extend .text-dark;
+}

package/site/styles/_carousel.scss

@@ -7,29 +7,28 @@ s72-carousel {
 
 .s72-carousel-slides {
   background: $carousel-bg-color;
-  height: $carousel-height !important;
-  overflow: hidden;
+  height: var(--carousel-height) !important;
   position: relative;
   width: 100%;
   @include media-breakpoint-up(sm) {
-    height: $carousel-height-sm !important;
+    height: var(--carousel-height-sm) !important;
   }
   @include media-breakpoint-up(md) {
-    height: $carousel-height-md !important;
+    height: var(--carousel-height-md) !important;
   }
 
   s72-image {
     float: right;
-    height: $carousel-height;
+    height: var(--carousel-height);
     max-width: 1600px;
     overflow: hidden;
     position: relative;
     width: 100%;
     @include media-breakpoint-up(sm) {
-      height: $carousel-height-sm;
+      height: var(--carousel-height-sm);
     }
     @include media-breakpoint-up(md) {
-      height: $carousel-height-md;
+      height: var(--carousel-height-md);
     }
 
     &::before {
@@ -51,19 +50,23 @@ s72-carousel {
     }
 
     img {
-      height: $carousel-height;
+      height: var(--carousel-height);
       margin-left: 50%;
       transform: translateX(-50%);
 
       @include media-breakpoint-up(sm) {
-        height: $carousel-height-sm;
+        height: var(--carousel-height-sm);
       }
       @include media-breakpoint-up(md) {
-        height: $carousel-height-md;
+        height: var(--carousel-height-md);
         width: auto;
       }
     }
   }
+
+  .s72-pricing-button-container {
+    white-space: nowrap;
+  }
 }
 
 .s72-carousel-item {
@@ -102,25 +105,30 @@ s72-carousel {
   left: 0;
   padding: 0 20px;
   position: absolute;
-  top: $carousel-caption-top;
+  top: var(--carousel-caption-top);
   z-index: 999;
+  @include media-breakpoint-up(xs) {
+    left: 60px;
+    top: var(--carousel-caption-top-xs);
+    width: 70%;
+  }
   @include media-breakpoint-up(md) {
     left: 60px;
-    top: $carousel-caption-top-md;
+    top: var(--carousel-caption-top-md);
     width: 70%;
   }
   @include media-breakpoint-up(lg) {
     left: 70px;
-    top: $carousel-caption-top-md;
+    top: var(--carousel-caption-top-md);
     width: 70%;
   }
   @include media-breakpoint-up(xl) {
     left: 120px;
-    top: $carousel-caption-top-md;
+    top: var(--carousel-caption-top-md);
     width: 50%;
   }
   @include media-breakpoint-up(xxxl) {
-    top: $carousel-caption-top-md;
+    top: var(--carousel-caption-top-md);
     width: 50%;
   }
 
@@ -135,7 +143,7 @@ s72-carousel {
     }
 
     .availability-state {
-      color: $body-color;
+      color: var(--body-color);
       font-size: 12px;
       text-transform: none;
     }
@@ -145,7 +153,7 @@ s72-carousel {
     color: #fff;
 
     h3 {
-      color: $body-color;
+      color: var(--body-color);
       font-size: 28px;
       font-weight: $font-weight-bold;
       margin-bottom: 0;
@@ -162,7 +170,7 @@ s72-carousel {
     }
 
     h4 {
-      background: $primary;
+      background: var(--primary);
       color: #000;
       display: inline-block;
       font-size: 6px;
@@ -186,7 +194,7 @@ s72-carousel {
     }
 
     .meta-item-tagline {
-      color: rgba($body-color, 0.8);
+      color: rgba(var(--body-color-rgb), 0.8);
       font-size: 14px;
       font-weight: $font-weight-normal;
       @include media-breakpoint-up(xxxl) {
@@ -212,7 +220,6 @@ s72-carousel {
 
     .meta-item-extras {
       @extend .d-flex;
-      padding: 0 0 20px;
     }
 
     .btn-wishlist {
@@ -220,18 +227,34 @@ s72-carousel {
     }
   }
 
-  .s72-pricing-button-container {
-    .s72-btn {
+  // Purchase, play, trailer, wishlist and share are all in one group now
+  // Need similar bootstrap approach of handling/wrapping rows and columns via negative margin
+  .meta-item-buttons {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+
+    /* stylelint-disable selector-max-compound-selectors */
+    s72-pricing-buttons .s72-btn,
+    .meta-detail-extras,
+    .meta-item-extras,
+    s72-play-button,
+    can-be-watched-button:not(:empty) {
       margin-bottom: 10px;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+    }
 
+    // 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-btn-play {
@@ -251,13 +274,13 @@ s72-carousel {
   transform: translateX(-50%);
 
   .s72-carousel-page {
-    color: rgba($body-color, 0.2);
+    color: rgba(var(--body-color-rgb), 0.2);
     @include media-breakpoint-up(md) {
       margin: 0 5px;
     }
 
     &.current {
-      color: $primary;
+      color: var(--primary);
     }
 
     .fa {
@@ -285,7 +308,7 @@ s72-carousel {
   z-index: 6;
   @include media-breakpoint-down(sm) {
     :hover {
-      color: $primary;
+      color: var(--primary);
     }
 
     :active {

package/site/styles/_collections.scss

@@ -64,7 +64,7 @@
     .poster {
       .hover {
         @extend .d-flex;
-        background: rgba($body-bg, 0.8);
+        background: rgba(var(--body-bg-rgb), 0.8);
         bottom: 0;
         flex-direction: column;
         justify-content: space-between;
@@ -137,7 +137,7 @@
 
           .titles {
             h4 {
-              color: $body-color;
+              color: var(--body-color);
               font-size: 18px;
               font-weight: $font-weight-normal;
               margin: 0;
@@ -149,7 +149,7 @@
             }
 
             .meta-item-tagline {
-              color: $body-color;
+              color: var(--body-color);
               display: inline-block;
               font-weight: $font-weight-normal;
               margin: 0;
@@ -192,7 +192,7 @@
 
           .synopsis {
             p {
-              color: $body-color;
+              color: var(--body-color);
               font-size: 12px;
               line-height: 14px;
               margin-bottom: 0;

package/site/styles/_cookie-consent.scss

@@ -14,5 +14,5 @@
 }
 
 .s72-btn-cookie-consent {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }

package/site/styles/_devices.scss

@@ -7,7 +7,7 @@
 }
 
 .s72-userdevices-device {
-  @extend .list-group-item;
+  @extend .list-group-item-override;
 }
 
 .s72-userdevices-device-type {
@@ -42,7 +42,7 @@
 
 .s72-btn-userdevices-confirm,
 .s72-btn-userdevices-delete {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
   @extend .btn-sm;
 }
 
@@ -56,6 +56,6 @@
 }
 
 .s72-btn-userdevices-cancel {
-  @extend .btn-link;
+  @extend .btn-link-override;
   @extend .btn-sm;
 }

package/site/styles/_footer.scss

@@ -44,7 +44,7 @@ footer {
     }
 
     &:hover {
-      color: $primary;
+      color: var(--primary);
     }
   }
 }
@@ -73,7 +73,7 @@ footer {
 }
 
 .powered-by {
-  color: rgba($body-color, 0.8);
+  color: rgba(var(--body-color-rgb), 0.8);
   font-size: 12px;
   font-weight: $font-weight-normal;
   margin: 0;
@@ -115,15 +115,15 @@ footer {
 .sponsor-banner {
   display: flex;
   justify-content: center;
-  padding: 60px 20px 0 20px;
+  padding: 60px 20px 0;
   @include media-breakpoint-up(lg) {
-    padding: 60px 50px 0 50px;
+    padding: 60px 50px 0;
   }
 
   img {
     max-width: max-content;
   }
-  
+
   .sponsors-xxxs {
     width: 100%;
 
@@ -153,4 +153,4 @@ footer {
       display: block;
     }
   }
-}
+}