@shift72/core-template 0.4.0 → 0.4.3

package/site/styles/_plans.scss

@@ -84,4 +84,4 @@ s72-plan-label {
   .signup-link {
     display: inline !important;
   }
-}
+}

package/site/styles/_poster.scss

@@ -23,14 +23,15 @@
 
     @extend .p-p5;
     @extend .mw-100;
+    width: 100%;
 
     z-index: 99;
-    width: 100%;
 
     s72-availability-status {
-      position: unset; z-index: unset;
-      min-width: 0px;
       @extend .pr-p5;
+      min-width: 0;
+      position: unset;
+      z-index: unset;
 
       /* stylelint-disable selector-max-compound-selectors */
       .availability-bg {
@@ -46,4 +47,4 @@
   max-width: 100%;
   position: relative;
   width: 100%;
-}
+}

package/site/styles/_shift72.scss

@@ -12,15 +12,15 @@
 }
 
 .s72-btn-search {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-purchase {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-rent {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-close {
@@ -28,47 +28,47 @@
 }
 
 .s72-btn-purchase-card {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-purchase-free {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-changepassword {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-updateaccount {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-signup {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-signin {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-signin-vip {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-forgotpassword {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-resetpassword {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-activatedevice {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-modal-action {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-modal-cancel {
@@ -76,19 +76,19 @@
 }
 
 .s72-btn-combined-auth {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-combined-auth-change {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-applydiscount {
-  @extend .btn-secondary;
+  @extend .btn-primary-override;
 }
 
 .s72-btn-next-page {
-  @extend .btn-secondary;
+  @extend .btn-primary-override;
   @extend .btn-lg;
   width: 100%;
 }
@@ -181,7 +181,7 @@
 }
 
 .s72-dropdown-item {
-  @extend .dropdown-item;
+  @extend .dropdown-item-override;
 }
 
 // s72-sign-out             { @extend li; }
@@ -224,7 +224,7 @@
   @extend .form-control-plaintext;
 
   .form-page & {
-    color: $body-color;
+    color: var(--body-color);
   }
 }
 
@@ -322,7 +322,7 @@ s72-cant-be-watched {
   @extend .position-relative;
   &::after {
     @extend .position-absolute;
-    background-color: $primary;
+    background-color: var(--primary);
     bottom: 0 !important;
     content: '';
     height: 3px;
@@ -334,5 +334,5 @@ s72-cant-be-watched {
 
 .s72-view-all-passes {
   @extend .py-4;
-  background-color: mix(invert($body-bg), $body-bg, 4.5%);
+  background-color: var(--body-bg-accent);
 }

package/site/styles/_shopping.scss

@@ -13,7 +13,7 @@
 
     .s72-btn-close {
       background: transparent;
-      color: $body-color;
+      color: var(--body-color);
       display: block;
       height: 30px;
       line-height: 30px;
@@ -71,9 +71,9 @@
 
 .s72-combined-auth-email {
   @extend .d-flex;
-  background: rgba($body-color, 0.1);
+  background: rgba(var(--body-color-rgb), 0.1);
   border: 0 none;
-  color: $body-color;
+  color: var(--body-color);
   font-weight: $font-weight-normal;
   justify-content: space-between;
   padding-bottom: 0;
@@ -138,7 +138,7 @@
   padding: 10px 0 0;
 
   li {
-    color: rgba($body-color, 0.8);
+    color: rgba(var(--body-color-rgb), 0.8);
     font-size: 12px;
     list-style-type: none;
     text-align: left;
@@ -158,7 +158,7 @@
 
 .s72-shopping-item-info {
   p {
-    color: $body-color;
+    color: var(--body-color);
     font-size: 14px;
 
     a {
@@ -191,7 +191,7 @@
 .s72-shopping-done {
   /* stylelint-disable-next-line */
   div div p {
-    color: $body-color;
+    color: var(--body-color);
     font-size: 20px;
     font-weight: $font-weight-bold;
     margin-bottom: 5px;
@@ -205,7 +205,7 @@
   }
 
   div p {
-    color: $body-color;
+    color: var(--body-color);
     display: block;
     font-size: 12px;
     text-align: center;
@@ -289,7 +289,7 @@
     }
 
     .s72-icon {
-      color: $primary;
+      color: var(--primary);
     }
   }
 }

package/site/styles/_slider.scss

@@ -1,7 +1,7 @@
 s72-slider .s72-slider-control,
 s72-userwishlist .s72-slider-control {
-  background-color: $primary;
-  border: 1px solid $primary;
+  background-color: var(--primary);
+  border: 1px solid var(--primary);
   border-radius: 50%;
   font-family: $font-family-base;
   height: $slider-control-height;
@@ -31,12 +31,6 @@ s72-userwishlist .s72-slider-control {
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
   }
-
-  &:hover,
-  &:active,
-  &:focus {
-    background: darken($primary, 7.5%);
-  }
 }
 
 // make .slider-control be in the middle of the poster, not the middle of the item (which includes captions).
@@ -72,7 +66,7 @@ s72-slider.has-next.s72-slider-scroll::after {
 /* stylelint-enable selector-no-qualifying-type */
 
 .slider-fade-in {
-  @include gradient-x(rgba($body-bg, 0.9), transparent, 0%, 100%);
+  @include gradient-x(rgba(var(--body-bg-rgb), 0.9), transparent, 0%, 100%);
   content: '';
   display: block;
   height: 100%;
@@ -86,7 +80,7 @@ s72-slider.has-next.s72-slider-scroll::after {
 
 .slider-fade-out {
   @extend .slider-fade-in;
-  @include gradient-x(transparent, rgba($body-bg, 0.9), 0%, 100%);
+  @include gradient-x(transparent, rgba(var(--body-bg-rgb), 0.9), 0%, 100%);
   left: auto;
   right: 0;
 }

package/site/styles/_social-media-buttons.scss

@@ -13,7 +13,7 @@
   h2,
   h5 {
     align-self: center;
-    color: $body-color;
+    color: var(--body-color);
     font-family: $font-family-base;
     font-size: 12px;
     font-weight: $font-weight-bold;
@@ -47,7 +47,7 @@
     border-color: $facebook-color;
 
     .fa {
-      color: $body-bg;
+      color: var(--body-bg);
     }
   }
 
@@ -56,7 +56,7 @@
     border-color: $instagram-color;
 
     .fa {
-      color: $body-bg;
+      color: var(--body-bg);
     }
   }
 
@@ -65,7 +65,7 @@
     border-color: $twitter-color;
 
     .fa {
-      color: $body-bg;
+      color: var(--body-bg);
     }
   }
 
@@ -74,7 +74,7 @@
     border-color: $linkedin-color;
 
     .fa {
-      color: $body-bg;
+      color: var(--body-bg);
     }
   }
 
@@ -83,7 +83,7 @@
     border-color: $youtube-color;
 
     .fa {
-      color: $body-bg;
+      color: var(--body-bg);
     }
   }
 
@@ -92,8 +92,8 @@
     border-color: $letterboxd-color;
 
     path {
-      fill: $body-bg;
-      stroke: $body-bg;
+      fill: var(--body-bg);
+      stroke: var(--body-bg);
       stroke-width: 1;
     }
   }
@@ -102,8 +102,8 @@
   &:active,
   &:focus {
     &.btn-social-facebook {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       .fa {
         color: $facebook-color;
@@ -111,8 +111,8 @@
     }
 
     &.btn-social-instagram {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       .fa {
         color: $instagram-color;
@@ -120,8 +120,8 @@
     }
 
     &.btn-social-twitter {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       .fa {
         color: $twitter-color;
@@ -129,8 +129,8 @@
     }
 
     &.btn-social-linkedin {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       .fa {
         color: $linkedin-color;
@@ -138,8 +138,8 @@
     }
 
     &.btn-social-youtube {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       .fa {
         color: $youtube-color;
@@ -147,8 +147,8 @@
     }
 
     &.btn-social-letterboxd {
-      background-color: $primary;
-      border-color: $primary;
+      background-color: var(--primary);
+      border-color: var(--primary);
 
       path {
         fill: $letterboxd-color;

package/site/styles/_swiper.scss

@@ -22,12 +22,12 @@
 }
 
 .swiper-button-next {
-  background: rgba($body-bg, 0.8) url('/images/icons/next.png') center center no-repeat;
+  background: rgba(var(--body-bg-rgb), 0.8) url('/images/icons/next.png') center center no-repeat;
   right: 0;
 }
 
 .swiper-button-prev {
-  background: rgba($body-bg, 0.8) url('/images/icons/prev.png') center center no-repeat;
+  background: rgba(var(--body-bg-rgb), 0.8) url('/images/icons/prev.png') center center no-repeat;
   left: 0;
 }
 

package/site/styles/_variables.scss

@@ -3,6 +3,59 @@
 // This file contains any variables used by the site.
 // These variables should be reasonably generic so that overrides are placed in main.scss.
 
+:root {
+  --primary-rgb: 53, 160, 168;
+  --secondary-rgb: 76, 211, 221;
+  --body-color-rgb: 255, 255, 255;
+  --body-bg-rgb: 15, 15, 15;
+  --body-bg-accent-rgb: 25, 25, 25; // darken(body-bg, 10%) OR lighten(body-bg, 10%)
+  --link-color-hover-rgb: 217, 217, 217; // darken(body-color, 15%)
+  --input-focus-border-color-rgb: 131, 210, 216; // lighten(primary, 25%)
+
+  --primary: rgb(var(--primary-rgb));
+  --secondary: rgb(var(--secondary-rgb));
+  --body-color: rgb(var(--body-color-rgb));
+  --body-bg: rgb(var(--body-bg-rgb));
+  --body-bg-accent: rgb(var(--body-bg-accent-rgb));
+  --link-color: var(--body-color);
+  --link-color-hover: rgb(var(--link-color-hover-rgb));
+  --input-focus-border-color: rgb(var(--input-focus-border-color-rgb));
+
+  --navbar-brand-padding-y: 25px;
+  --navbar-brand-min-width: 126px;
+  --navbar-brand-min-width-md: 126px;
+  --navbar-brand-min-width-lg: 126px;
+  --navbar-brand-min-width-xl: 126px;
+
+  --carousel-height: 470px;
+  --carousel-height-sm: 470px;
+  --carousel-height-md: 620px;
+  --carousel-caption-top: 150px;
+  --carousel-caption-top-md: 175px;
+
+  --page-padding-top: 120px;
+  --page-padding-top-md: 120px;
+  --page-padding-top-lg: 180px;
+  --page-detail-padding-top: 120px;
+  --page-detail-padding-top-md: 120px;
+  --page-detail-padding-top-lg: 180px;
+}
+
+// Bootstrap 4 overrides START
+$input-btn-focus-color: rgba(var(--primary-rgb), 0.25) !default;
+$input-focus-border-color: var(--input-focus-border-color) !default;
+$custom-control-indicator-checked-disabled-bg: rgba(var(--primary-rgb), 0.5) !default;
+$progress-bar-bg: var(--primary) !default;
+$body-color: var(--body-color) !default;
+$body-bg: var(--body-bg) !default;
+$body-bg-accent: var(--body-bg-accent) !default;
+$error-color: var(--body-color) !default;
+$error-background: rgba(var(--body-color-rgb), 0.1) !default;
+$hr-border-color: rgba(var(--body-color-rgb), 0.5) !default;
+$list-group-bg: var(--body-bg) !default;
+$list-group-border-color: rgba(var(--body-color-rgb), 0.125) !default;
+// Bootstrap 4 overrides END
+
 // Bootstrap variables copied here, that some of the below are dependent on.
 $grid-gutter-width-base: 30px !default;
 
@@ -36,76 +89,63 @@ $spacer: math.div(5, 8) * 1rem; // 10px
 
 $spacers: (
   '0': 0,
-  'p5':  ($spacer * 0.5),  // 5px
-  'p75': ($spacer * 0.75), // 7.5px
-  '1':   $spacer,          // 10px
-  '2':   ($spacer * 2),    // 20px
-  '2p5': ($spacer * 2.5),  // 25px
-  '3':   ($spacer * 3),    // 30px
-  '4':   ($spacer * 4),    // 40px
-  '5':   ($spacer * 5),    // 50px
+  'p5': $spacer * 0.5,
+  // 5px
+  'p75': $spacer * 0.75,
+  // 7.5px
+  '1': $spacer,
+  // 10px
+  '2': $spacer * 2,
+  // 20px
+  '2p5': $spacer * 2.5,
+  // 25px
+  '3': $spacer * 3,
+  // 30px
+  '4': $spacer * 4,
+  // 40px
+  '5': $spacer * 5,
+  // 50px
 );
 
-// Body / Core
-// ------------------------------------
-
-$primary: #35a0a8 !default;
-$secondary: #4cd3dd !default;
-$body-color: #fff !default;
-$body-bg: #0f0f0f !default;
-$body-bg-accent: get-accent-color($body-bg) !default;
-$error-color: $body-color !default;
-$error-background: rgba($body-color, 0.1) !default;
-$hr-border-color: rgba($body-color, 0.5) !default;
-$list-group-bg: $body-bg !default;
-$list-group-border-color: rgba($body-color, 0.125) !default;
-
 // Cookie Consent
 $cookie-consent-color: #000;
-$cookie-consent-link-color: $primary;
-$cookie-consent-hover-link-color: $secondary;
+$cookie-consent-link-color: var(--primary);
+$cookie-consent-hover-link-color: var(--secondary);
 
 // Nav
 // ------------------------------------
 $navbar-background-color: transparent !default;
-$navbar-show-background-color: $body-bg-accent !default;
-$navbar-dark-active-color: $primary !default;
+$navbar-show-background-color: var(--body-bg-accent) !default;
+$navbar-dark-active-color: var(--primary) !default;
 $navbar-nav-link-padding-x: 1em !default;
 $navbar-nav-link-padding-y: 1em !default;
-$navbar-search-background-color: $body-bg-accent !default;
+$navbar-search-background-color: var(--body-bg-accent) !default;
 
 // Uses navbar-dark theme so we can use variables for colouring
 $navbar-dark-active-color: #fd4766 !default;
-$navbar-dark-color: $body-color !default;
+$navbar-dark-color: var(--body-color) !default;
 $navbar-dark-hover-color: #fd4766 !default;
 
-// Navbar Logo (Brand)
-$navbar-brand-padding-y: 25px !default;
-$navbar-brand-min-width: 126px !default;
-$navbar-brand-min-width-md: 126px !default;
-$navbar-brand-min-width-lg: 126px !default;
-$navbar-brand-min-width-xl: 126px !default;
-
 // Sub Navivgation
-$subnav-nav-item-color: $body-color !default;
-$subnav-nav-item-hover-background-color: $primary !default;
-$subnav-nav-item-active-background-color: $primary !default;
-$subnav-dropdown-background: $body-bg-accent !default;
+$subnav-nav-item-color: var(--body-color) !default;
+$subnav-nav-item-hover-background-color: var(--primary) !default;
+$subnav-nav-item-active-background-color: var(--primary) !default;
+$subnav-dropdown-background: var(--body-bg-accent) !default;
 
 // Buttons
-$button-text-color: $body-color !default;
-$button-text-color-hover: $body-color !default;
-$button-background: $primary !default;
-$button-background-hover: $secondary !default;
-$trailer-button-text-color: $body-color !default;
-$mobile-nav-link-color: $body-color !default;
-
-$signin-text-color: $body-color !default;
-$signin-text-color-hover: $primary !default;
+$button-text-color: var(--body-color) !default;
+$button-text-color-hover: var(--body-color) !default;
+$button-background: var(--primary) !default;
+$button-background-hover: var(--secondary) !default;
+$trailer-button-text-color: var(--body-color) !default;
+$mobile-nav-link-color: var(--body-color) !default;
+
+$signin-text-color: var(--body-color) !default;
+$signin-text-color-hover: var(--primary) !default;
 $signin-border-color: transparent !default;
 $signin-border-color-hover: transparent !default;
-$signin-background: rgba($body-color, 0.1) !default;
-$signin-background-hover: rgba($body-color, 0.2) !default;
+$signin-background: rgba(var(--body-color-rgb), 0.1) !default;
+$signin-background-hover: rgba(var(--body-color-rgb), 0.2) !default;
 $signin-background-lg: transparent !default;
 $signin-background-hover-lg: transparent !default;
 
@@ -116,54 +156,39 @@ $signup-border-color-hover: transparent !default;
 $signup-background: $button-background !default;
 $signup-background-hover: $button-background-hover !default;
 
-$signout-background: rgba($body-color, 0.1) !default;
-$signout-background-hover: rgba($body-color, 0.2) !default;
-$signout-text-color: $body-color !default;
-$signout-text-color-hover: $body-color !default;
-
-$link-color: $body-color !default;
+$signout-background: rgba(var(--body-color-rgb), 0.1) !default;
+$signout-background-hover: rgba(var(--body-color-rgb), 0.2) !default;
+$signout-text-color: var(--body-color) !default;
+$signout-text-color-hover: var(--body-color) !default;
 
 // Image Gradient Overlays
-$top-gradient-color: $body-bg !default;
-$right-gradient-bg-color: $body-bg !default;
-$bottom-gradient-bg-color: $body-bg !default;
-$left-gradient-bg-color: $body-bg !default;
+$top-gradient-color: var(--body-bg-rgb) !default;
+$right-gradient-bg-color: var(--body-bg-rgb) !default;
+$bottom-gradient-bg-color: var(--body-bg-rgb) !default;
+$left-gradient-bg-color: var(--body-bg-rgb) !default;
 
 // Carousel
-$carousel-bg-color: $body-bg !default;
-$carousel-height: 470px !default;
-$carousel-height-sm: 470px !default;
-$carousel-height-md: 620px !default;
-$carousel-caption-top: 150px !default;
-$carousel-caption-top-md: 175px !default;
-
-// Pages
-$page-padding-top: 120px !default;
-$page-padding-top-md: 120px !default;
-$page-padding-top-lg: 180px !default;
-$page-detail-padding-top: 120px !default;
-$page-detail-padding-top-md: 120px !default;
-$page-detail-padding-top-lg: 180px !default;
+$carousel-bg-color: var(--body-bg) !default;
 
 // Footer
 $footer-brand-min-width: 100px !default;
 $footer-brand-min-width-md: 100px !default;
-$footer-bar-background-color: $body-bg-accent !default;
+$footer-bar-background-color: var(--body-bg-accent) !default;
 
 // Social
 // ------------------------------------
-$facebook-color: $body-color !default;
-$instagram-color: $body-color !default;
-$twitter-color: $body-color !default;
-$youtube-color: $body-color !default;
-$linkedin-color: $body-color !default;
-$letterboxd-color: $body-color !default;
+$facebook-color: var(--body-color) !default;
+$instagram-color: var(--body-color) !default;
+$twitter-color: var(--body-color) !default;
+$youtube-color: var(--body-color) !default;
+$linkedin-color: var(--body-color) !default;
+$letterboxd-color: var(--body-color) !default;
 
 // Meta Items
 // ------------------------------------
 $meta-item-border-radius: 3px !default;
 $featured-meta-item-body-padding: 10px !default;
-$meta-item-body-color: $body-color !default;
+$meta-item-body-color: var(--body-color) !default;
 $meta-item-tagline-classification-border-radius: $meta-item-border-radius !default;
 $meta-item-availability-tag-margin: 5px !default;
 

package/site/styles/_wishlist.scss

@@ -28,7 +28,7 @@
     @extend .btn;
     font-size: 12px;
     font-weight: $font-weight-bold;
-    margin-right: 32px; // was 10px before awards needed some space
+    margin-right: 0.5rem;
     padding-bottom: 3px;
     padding-left: 0;
     padding-top: 3px;
@@ -50,4 +50,4 @@
 .poster .s72-userwishlist-buttons .s72-btn-wishlist {
   margin: 0;
   padding: 0;
-}
+}

package/site/styles/main.scss

@@ -1,5 +1,3 @@
-@import '_functions';
-
 @import '_variables';
 
 @import '_bootstrap4';
@@ -53,4 +51,4 @@
 // @import local must be last in this file.
 @import 'local/local';
 
-// DO NOT PUT ANYTHING IN THIS FILE.
+// DO NOT PUT ANYTHING IN THIS FILE.