Merge pull request Shopify#80 from Shopify/slim-styles

v1.3.0

assets/ajaxify.js

@@ -309,6 +309,8 @@ var ajaxifyShopify = (function(module, $) {
     // Touch check
     if ($isTouch) {
       $body.addClass('ajaxify-touch');
+    } else {
+      $body.addClass('ajaxify-notouch');
     }
 
     // Check if we can use .load
@@ -483,7 +485,7 @@ var ajaxifyShopify = (function(module, $) {
         right: ( $w.width() - ( $modalContainer.offset().left + $modalContainer.outerWidth() ) - 15 ),
         opacity: 1
       });
-    }, 200);
+    }, 600);
   };
 
   hideModal = function (e) {

assets/ajaxify.scss.liquid

@@ -17,6 +17,43 @@
 *    - Styles for cart drawer, modal, and the flipped add to cart button
 */
 
+// ==============================================================================
+// #Breakpoint and Grid Variables (from timber.scss.liquid)
+// ==============================================================================
+$viewportIncrement: 1px;
+
+$small: 480px;
+$medium: 768px;
+$large: 769px;
+
+$postSmall: $small + $viewportIncrement;
+$preMedium: $medium - $viewportIncrement;
+$preLarge: $large - $viewportIncrement;
+
+$gutter: 24px;
+
+// ==============================================================================
+// Dependency-free breakpoint mixin
+// http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
+// ==============================================================================
+$min: min-width;
+$max: max-width;
+@mixin at-query ($constraint, $viewport1, $viewport2:null) {
+  @if $constraint == $min {
+    @media screen and ($min: $viewport1) {
+      @content;
+    }
+  } @else if $constraint == $max {
+    @media screen and ($max: $viewport1) {
+      @content;
+    }
+  } @else {
+    @media screen and ($min: $viewport1) and ($max: $viewport2) {
+      @content;
+    }
+  }
+}
+
 // ==============================================================================
 // Sass Helpers
 // ==============================================================================
@@ -266,8 +303,8 @@ form[action^="/cart/add"] {
   @include perspective(1000px);
   @include transform-style(preserve-3d);
   @include transition(all 450ms cubic-bezier(0.57,.06,.05,.95));
-  padding-top: 30px;
-  padding-bottom: 30px;
+  padding-top: $gutter;
+  padding-bottom: $gutter;
 
   .is-visible & {
     @include transition(all 550ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
@@ -276,6 +313,11 @@ form[action^="/cart/add"] {
   form {
     margin-bottom: 0;
   }
+
+  @include at-query ($max, $medium) {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
 }
 
 // Row and column spacing
@@ -314,14 +356,6 @@ form[action^="/cart/add"] {
 .ajaxifyCart--row {
   clear: both;
   @include clearfix;
-
-  a {
-    text-decoration: none;
-
-    &.ajaxifyCart--remove {
-      text-decoration: underline;
-    }
-  }
 }
 
 .ajaxCart--product-image {
@@ -402,8 +436,11 @@ form[action^="/cart/add"] {
   margin-bottom: 0;
 
   input[type="text"] {
-    border: 1px solid rgba(0,0,0,0);
     @include transition(all 0.1s ease-out);
+
+    .ajaxify-notouch & {
+      border: 1px solid rgba(0,0,0,0);
+    }
   }
 
   .ajaxifyCart--is-loading & {
@@ -455,16 +492,45 @@ form[action^="/cart/add"] {
   left: 50%;
   margin: -300px 0 0 -500px; // overridden with JS
   width: 100%;
-  max-width: 1000px;
+  max-width: 760px;
   max-height: 80%;
   height: auto;
   z-index: 99999999;
   visibility: hidden;
   overflow: auto;
   @include transition('box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms, margin-top 200ms ease-in-out');
 
+  // Medium-down screens
+  @include at-query ($max, $medium) {
+    max-width: 90%;
+  }
+
+  // Small screens
+  @include at-query ($max, $small) {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    margin: 0!important;
+    max-height: none;
+    max-width: none;
+  }
+
   .ajaxifyCart--content {
-    padding: 30px;
+    padding-left: $gutter;
+    padding-right: $gutter;
+
+    // Medium-down screens
+    @include at-query ($max, $medium) {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+
+    // Small screens
+    @include at-query ($max, $small) {
+      padding-bottom: 60px;
+      height: 100%;
+    }
+
   }
 
   &.is-visible {
@@ -499,6 +565,10 @@ form[action^="/cart/add"] {
     @include transform(none);
   }
 
+  .update-cart {
+    display: none!important;
+  }
+
 }
 
 #ajaxifyCart-overlay {
@@ -515,7 +585,7 @@ form[action^="/cart/add"] {
   @include transition(opacity 450ms cubic-bezier(0.57,.06,.05,.95));
 }
 
-.is-visible ~ #ajaxifyCart-overlay {
+#ajaxifyModal.is-visible ~ #ajaxifyCart-overlay {
   opacity: 0.8;
   visibility: visible;
   @include transition(opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
@@ -555,7 +625,8 @@ form[action^="/cart/add"] {
 #ajaxifyModal {
   .cart-row:hover input[type="text"],
   .ajaxifyCart--product:hover input[type="text"],
-  .ajaxify-touch input[type="text"] {
+  .ajaxify-touch input[type="text"],
+  .page-header {
     border-color: $modalBorderColor;
   }
 
@@ -596,13 +667,19 @@ form[action^="/cart/add"] {
   &.is-visible {
     @include transition(all 550ms cubic-bezier(0.47, 0, 0, 0.95));
   }
+
+  .update-cart {
+    display: none!important;
+  }
 }
 
 // Drawer colors and general styles
 #ajaxifyDrawer .ajaxifyCart--content {
   margin: 0 auto;
   opacity: 0;
   overflow: hidden;
+  padding-top: $gutter;
+  padding-bottom: $gutter;
   background-color: $drawerBackgroundColor;
   color: color-control($drawerBackgroundColor);
 
@@ -632,7 +709,8 @@ form[action^="/cart/add"] {
 #ajaxifyDrawer {
   .cart-row:hover input[type="text"],
   .ajaxifyCart--product:hover input[type="text"],
-  .ajaxify-touch input[type="text"] {
+  .ajaxify-touch input[type="text"],
+  .page-header {
     border-color: $drawerBorderColor;
   }
 
@@ -731,7 +809,7 @@ form[action^="/cart/add"] {
   background-color: $ajaxifyGreyDark;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkMzRUY2REVBNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkMzRUY2REVCNDY1QjExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzNFRjZERTg0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzNFRjZERTk0NjVCMTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7sdZ8fAAAAp0lEQVR42nSPQQ6CMBBFx4ZEj+DSY8BGt9SVwRP1QBDdULeygaN4BFzpn+Q3mZCW5DFk/uvQ2YUQfiIygYuUnzc4O7wW/QCxIEbmi8oNG23mgO03js0reDF4gCNry77mUpkpHvSgo7QHA7gnwW1+q8FKcbViTtbJB/Bl7Uty5BWe4MTa2aWTPJplbuDDmpYe04IzqBn4zbU8J2udHcUpI9oDmtd/AQYAX20mtnhTCxQAAAAASUVORK5CYII=);
   z-index: 999999999;
-  @include transition('background-color 100ms ease-in-out, margin 100ms ease-in-out');
+  @include transition(all 100ms ease-in-out);
 
   #ajaxifyModal.is-visible + & {
     display: block;
@@ -741,8 +819,9 @@ form[action^="/cart/add"] {
     background-color: lighten($ajaxifyGreyDark, 50%);
   }
 
-  @media only screen and (max-width:972px) {
-    @include transform(translateY(-100%) translateX(-100%));
+  @include at-query ($max, 972px) {
+    background-color: transparent;
+    @include transform(translateY(32px) translateX(-32px));
   }
 }