@shift72/core-template 0.4.1 → 0.4.4

package/site/styles/_pages.scss

@@ -52,7 +52,7 @@
 }
 
 .separator {
-  border-bottom: 1px solid rgba($body-color, 0.2);
+  border-bottom: 1px solid rgba(var(--body-color-rgb), 0.2);
   margin: 0 20px;
 
   @include media-breakpoint-up(lg) {
@@ -70,18 +70,18 @@
 .devices-page,
 .plans-page,
 .carousel-len-0 {
-  padding-top: $page-padding-top;
+  padding-top: var(--page-padding-top);
   @include media-breakpoint-up(md) {
-    padding: $page-padding-top-md 0 0 0;
+    padding: var(--page-padding-top-md) 0 0 0;
   }
   @include media-breakpoint-up(lg) {
-    padding: $page-padding-top-lg 0 0 0;
+    padding: var(--page-padding-top-lg) 0 0 0;
   }
 }
 
 .form-page {
   @include media-breakpoint-up(xl) {
-    padding: $page-padding-top-lg 0 0 0;
+    padding: var(--page-padding-top-lg) 0 0 0;
   }
 
   .page-header {
@@ -148,12 +148,12 @@
 
 .curated-page,
 .collection-page {
-  padding: $page-padding-top 0 0 0;
+  padding: var(--page-padding-top) 0 0 0;
   @include media-breakpoint-up(md) {
-    padding: $page-padding-top-md 0 0 0;
+    padding: var(--page-padding-top-md) 0 0 0;
   }
   @include media-breakpoint-up(lg) {
-    padding: $page-padding-top-lg 0 0 0;
+    padding: var(--page-padding-top-lg) 0 0 0;
   }
 }
 
@@ -293,14 +293,14 @@
 .not-found {
   background: transparent;
   padding-bottom: $grid-gutter-width;
-  padding-top: $page-padding-top;
+  padding-top: var(--page-padding-top);
   @include media-breakpoint-up(md) {
     padding-bottom: $grid-gutter-width;
-    padding-top: $page-padding-top-md;
+    padding-top: var(--page-padding-top-md);
   }
   @include media-breakpoint-up(lg) {
     padding-bottom: $grid-gutter-width * 3;
-    padding-top: $page-padding-top-lg;
+    padding-top: var(--page-padding-top-lg);
   }
 
   .text-center {
@@ -322,4 +322,4 @@
       }
     }
   }
-}
+}

package/site/styles/_pin-codes.scss

@@ -22,7 +22,7 @@ s72-useraccount-form {
     @extend .justify-content-between;
 
     .s72-btn-reset-pin {
-      @extend .btn-link;
+      @extend .btn-link-override;
       @extend .order-1;
     }
 
@@ -34,7 +34,7 @@ s72-useraccount-form {
 
 .s72-user-pin-error-limit {
   .s72-btn-reset-pin {
-    @extend .btn-primary;
+    @extend .btn-primary-override;
     margin-right: $modal-footer-button-margin;
   }
 

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;
 }