diff --git a/assets/ajaxify.js b/assets/ajaxify.js index 35dec0a54..3ffc67eee 100644 --- a/assets/ajaxify.js +++ b/assets/ajaxify.js @@ -361,9 +361,9 @@ var ajaxifyShopify = (function(module, $) { $addToCart.addClass('flip-front').wrap('
'); // Write a (hidden) Checkout button, a loader, and the extra view cart button - var checkoutBtn = $('Checkout').addClass($btnClass), - flipLoader = $(''), - flipExtra = $('
or View Cart ()
'); + var checkoutBtn = $('Checkout').addClass($btnClass), + flipLoader = $(''), + flipExtra = $('
or View Cart ()
'); // Append checkout button and loader checkoutBtn.insertAfter($addToCart); @@ -378,7 +378,7 @@ var ajaxifyShopify = (function(module, $) { // Setup extra selectors once appended flipExtra.insertAfter($flipContainer); - $flipCart = $('.flip__cart'); + $flipCart = $('.flip-cart'); $flipCart.on('click', function(e) { e.preventDefault(); @@ -561,7 +561,7 @@ var ajaxifyShopify = (function(module, $) { switch (settings.method) { case 'flip': - $('.flip__cart span').html(cart.item_count); + $('.flip-cart span').html(cart.item_count); break; case 'modal': buildCart(cart); @@ -684,7 +684,7 @@ var ajaxifyShopify = (function(module, $) { // Link up close modal link if (settings.method == 'modal') { - $closeCart = $('.ajaxifyCart__close'); + $closeCart = $('.ajaxifyCart--close'); $closeCart.off( 'click', hideModal ); $closeCart.on( 'click', hideModal ); } @@ -723,10 +723,11 @@ var ajaxifyShopify = (function(module, $) { if (cart.item_count > 0) { sizeDrawer(); - // Since your /cart template might use larger images, resize again + // Since your /cart template might use larger images, resize again. + // ** Will work on a better solution to image loading here soon. ** setTimeout(function() { sizeDrawer(); - }, 500); + }, 1000); } else { sizeDrawer(true); } @@ -749,18 +750,18 @@ var ajaxifyShopify = (function(module, $) { } // Update quantify selectors - var qtyAdjust = $('.ajaxifyCart__qty span'); + var qtyAdjust = $('.ajaxifyCart--qty span'); // Add or remove from the quantity qtyAdjust.off('click'); qtyAdjust.on('click', function() { var el = $(this), id = el.data('id'), - qtySelector = el.siblings('.ajaxifyCart__num'), + qtySelector = el.siblings('.ajaxifyCart--num'), qty = parseInt( qtySelector.val() ); // Add or subtract from the current quantity - if (el.hasClass('ajaxifyCart__add')) { + if (el.hasClass('ajaxifyCart--add')) { qty = qty + 1; } else { qty = qty - 1; @@ -778,7 +779,7 @@ var ajaxifyShopify = (function(module, $) { }); // Update quantity based on input on change - var qtyInput = $('.ajaxifyCart__num'); + var qtyInput = $('.ajaxifyCart--num'); qtyInput.off('change'); qtyInput.on('change', function() { var el = $(this), @@ -810,7 +811,7 @@ var ajaxifyShopify = (function(module, $) { }); // Completely remove product - $('.ajaxifyCart__remove').on('click', function(e) { + $('.ajaxifyCart--remove').on('click', function(e) { var el = $(this), id = el.data('id') || null, qty = 0; @@ -827,10 +828,12 @@ var ajaxifyShopify = (function(module, $) { function updateQuantity(id, qty) { // This function only adds activity classes if using the default handlebar.js templates. // The item quantity will be updated normally if using the /cart template. - var row = $('.ajaxifyCart__row[data-id="' + id + '"]').parent().addClass('ajaxifyCart--is-loading'); + if (!settings.useCartTemplate) { + var row = $('.ajaxifyCart--row[data-id="' + id + '"]').parent().addClass('ajaxifyCart--is-loading'); - if ( qty == 0 ) { - row.addClass('is-removed'); + if ( qty == 0 ) { + row.addClass('is-removed'); + } } // Slight delay to make sure removed animation is done @@ -902,7 +905,7 @@ var ajaxifyShopify = (function(module, $) { // If there is a regular link to remove an item, add attributes needed to ajaxify it if ($('a[href^="/cart/change"]', $cartContainer).length) { $('a[href^="/cart/change"]', $cartContainer).each(function() { - var el = $(this).addClass('ajaxifyCart__remove'); + var el = $(this).addClass('ajaxifyCart--remove'); }); } }, diff --git a/assets/ajaxify.scss.liquid b/assets/ajaxify.scss.liquid index fd9cfa7be..82ee1e8bc 100644 --- a/assets/ajaxify.scss.liquid +++ b/assets/ajaxify.scss.liquid @@ -115,7 +115,7 @@ $quantityTextColor: #fff; // ============================================================================== // Ajaxify Loader // ============================================================================== -.ajaxifyCart__loader { +.ajaxifyCart-loader { display: none; opacity: 0; position: absolute; @@ -142,6 +142,7 @@ $quantityTextColor: #fff; form[action="/cart/add"] { @include clearfix; } + .flip { display: block; float: left; @@ -205,7 +206,7 @@ form[action="/cart/add"] { } } -.flip__extra { +.flip-extra { display: inline; position: relative; padding: 2px 10px; @@ -225,12 +226,12 @@ form[action="/cart/add"] { } } -.flip__cart { +.flip-cart { display: inline-block; padding: 0 8px; } -.flip__checkout { +.flip-checkout { margin: 0; } @@ -238,7 +239,7 @@ form[action="/cart/add"] { // ============================================================================== // Ajaxify Cart - General // ============================================================================== -.ajaxifyCart__content { +.ajaxifyCart--content { position: relative; @include perspective(1000px); @include transform-style(preserve-3d); @@ -256,12 +257,12 @@ form[action="/cart/add"] { } // Row and column spacing -.ajaxifyCart__products { +.ajaxifyCart--products { padding-bottom: 10px; border-bottom: 1px solid $ajaxifyGreyDark; } -.ajaxifyCart__product { +.ajaxifyCart--product { position: relative; @include transform-origin(top); @include transition(all 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95)); @@ -284,7 +285,7 @@ form[action="/cart/add"] { } } -.ajaxifyCart__row { +.ajaxifyCart--row { display: table; width: 100%; clear: both; @@ -299,12 +300,12 @@ form[action="/cart/add"] { padding-left: 0; } - &.ajaxifyCart__col1 { + &.ajaxifyCart--col1 { padding-left: 20px; } } - &.ajaxifyCart__summary { + &.ajaxifyCart--summary { & > div { padding-top: 20px; @@ -313,7 +314,7 @@ form[action="/cart/add"] { } // Row and general typography -.ajaxifyCart__title { +.ajaxifyCart--title { position: relative; font-size: 18px; padding: 0 0 20px !important; @@ -321,7 +322,7 @@ form[action="/cart/add"] { border-bottom: 1px solid $ajaxifyGreyDark; } -.ajaxifyCart__row { +.ajaxifyCart--row { // General typography h1, h2, h3, h4, h5, p { @@ -335,32 +336,22 @@ form[action="/cart/add"] { a { text-decoration: none; - &.ajaxifyCart__remove { + &.ajaxifyCart--remove { text-decoration: underline; font-size: 12px; } } } -.ajaxifyCart__img { - display: block; - float: left; - margin-right: 10px; - - img { - display: block; - } -} - -.ajaxifyCart__col2, -.ajaxifyCart__col3, -.ajaxifyCart__col4 { +.ajaxifyCart--col2, +.ajaxifyCart--col3, +.ajaxifyCart--col4 { text-align: right; } // Default column widths -.ajaxifyCart__media { +.ajaxifyCart--media { width: 7%; & > a { @@ -374,19 +365,19 @@ form[action="/cart/add"] { } } -.ajaxifyCart__col1 { +.ajaxifyCart--col1 { width: 48%; } -.ajaxifyCart__col2 { +.ajaxifyCart--col2 { width: 14%; } -.ajaxifyCart__col3 { +.ajaxifyCart--col3 { width: 15%; } -.ajaxifyCart__col4 { +.ajaxifyCart--col4 { text-align: center; width: 16%; @@ -399,13 +390,13 @@ form[action="/cart/add"] { } } -.ajaxifyCart__total { +.ajaxifyCart--total { width: 69%; text-align: right; color: $ajaxifyGrey; } -.ajaxifyCart__qty { +.ajaxifyCart--qty { position: relative; top: -5px; right: -30px; @@ -416,11 +407,11 @@ form[action="/cart/add"] { max-width: 90px; @include transition(all 0.4s ease-out); - .ajaxifyCart__row & { + .ajaxifyCart--row & { top: 0; } - .ajaxifyCart__product:hover &, + .ajaxifyCart--product:hover &, .ajaxify-touch &, &:hover { border-color: $ajaxifyGreyDark; @@ -448,7 +439,7 @@ form[action="/cart/add"] { } } -.ajaxifyCart__qty-adjuster { +.ajaxifyCart--qty-adjuster { cursor: pointer; position: absolute; display: block; @@ -462,9 +453,9 @@ form[action="/cart/add"] { overflow: hidden; @include transition(all 0.2s ease-out); - .ajaxifyCart__product:hover &, + .ajaxifyCart--product:hover &, .ajaxify-touch &, - .ajaxifyCart__qty:hover & { + .ajaxifyCart--qty:hover & { opacity: 1; @include transition(background-color 0.2s ease-out); } @@ -479,17 +470,17 @@ form[action="/cart/add"] { } // Turn off animation on initial hover - .ajaxifyCart__product:hover &:hover { + .ajaxifyCart--product:hover &:hover { @include transition(none); } } -.ajaxifyCart__add { +.ajaxifyCart--add { right: 0; border-left: 1px solid $ajaxifyGreyDark; } -.ajaxifyCart__minus { +.ajaxifyCart--minus { left: 0; border-right: 1px solid $ajaxifyGreyDark; } @@ -512,7 +503,7 @@ form[action="/cart/add"] { @include transform(translateX(-50%) translateY(-50%)); @include transition(box-shadow 600ms cubic-bezier(0.47, 0.5, 0, 0.95) 400ms); - .ajaxifyCart__content { + .ajaxifyCart--content { padding: 30px; } @@ -529,11 +520,11 @@ form[action="/cart/add"] { } // Typography - .ajaxifyCart__remove:hover { + .ajaxifyCart--remove:hover { color: #555; } - .ajaxifyCart__row { + .ajaxifyCart--row { & > div { padding-left: 20px; @@ -544,46 +535,46 @@ form[action="/cart/add"] { } } - .ajaxifyCart__product { + .ajaxifyCart--product { @include transform(none); } - .ajaxifyCart__products, - .ajaxifyCart__title { + .ajaxifyCart--products, + .ajaxifyCart--title { border-bottom-color: $ajaxifyGreyLight; } - .ajaxifyCart__col1 { + .ajaxifyCart--col1 { width: 36%; } - .ajaxifyCart__col2 { + .ajaxifyCart--col2 { width: 17%; } - .ajaxifyCart__col3 { + .ajaxifyCart--col3 { width: 17%; } - .ajaxifyCart__col4 { + .ajaxifyCart--col4 { width: 23%; } - .ajaxifyCart__total { + .ajaxifyCart--total { width: 60%; } // Quantity selectors - .ajaxifyCart__product:hover .ajaxifyCart__qty { + .ajaxifyCart--product:hover .ajaxifyCart--qty { border-color: $ajaxifyGreyLight; } - .ajaxifyCart--is-loading .ajaxifyCart__qty { + .ajaxifyCart--is-loading .ajaxifyCart--qty { opacity: 0.7; border-color: $ajaxifyGreyLight; } - .ajaxifyCart__qty-adjuster { + .ajaxifyCart--qty-adjuster { &:hover { background-color: $ajaxifyGreyLight; @@ -594,11 +585,11 @@ form[action="/cart/add"] { } } - .ajaxifyCart__add { + .ajaxifyCart--add { border-left-color: $ajaxifyGreyLight; } - .ajaxifyCart__minus { + .ajaxifyCart--minus { border-right-color: $ajaxifyGreyLight; } @@ -624,20 +615,20 @@ form[action="/cart/add"] { @include transition(opacity 650ms cubic-bezier(0.57, 0.06, 0.05, 0.95)); } -#ajaxifyModal .ajaxifyCart__content { +#ajaxifyModal .ajaxifyCart--content { background-color: #fff; min-width: 700px; @include transform(scale(0.7)); opacity: 0; } -#ajaxifyModal.is-visible .ajaxifyCart__content { +#ajaxifyModal.is-visible .ajaxifyCart--content { @include transform(scale(1)); opacity: 1; } #ajaxifyModal { - .ajaxifyCart__qty input[type="text"] { + .ajaxifyCart--qty input[type="text"] { color: #000; } } @@ -659,7 +650,7 @@ form[action="/cart/add"] { } // Typography styles - .ajaxifyCart__title { + .ajaxifyCart--title { display: none; } @@ -684,7 +675,7 @@ form[action="/cart/add"] { } } -#ajaxifyDrawer .ajaxifyCart__content { +#ajaxifyDrawer .ajaxifyCart--content { margin: 0 auto; opacity: 0; overflow: hidden; @@ -694,7 +685,7 @@ form[action="/cart/add"] { @include rotateX(-90deg); } -#ajaxifyDrawer.is-visible .ajaxifyCart__content { +#ajaxifyDrawer.is-visible .ajaxifyCart--content { opacity: 1; @include rotateX(0deg); } @@ -746,19 +737,19 @@ form[action="/cart/add"] { background-position: 0 0; } -.ajaxifyCart__add { +.ajaxifyCart--add { @extend .sprite; background-position: center center; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxNTJBNEY1NDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxNTJBNEY2NDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUU4MjYyOEE0NjU3MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjE1MkE0RjQ0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6VbCy4AAAAWklEQVR42mJsampigAIeIH4GZUsB8RcQg4UBAUACvEhsBpgCkE5GKA0DklBF/0EKXgExJwMqgFn1nYmBAACZIIZkBbojwVbAHPQZSeNzZBOQvfkZiQ3WCBBgALZlEm83dptmAAAAAElFTkSuQmCC); } -.ajaxifyCart__minus { +.ajaxifyCart--minus { @extend .sprite; background-position: center center; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxNTJBNEZENDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxNTJBNEZFNDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjE1MkE0RkI0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjE1MkE0RkM0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6MzbYiAAAALElEQVR42mL6//8/Az7MxEAAEFTA2NTU9A1Ic+KQ/07YBJBDKHIDQQUAAQYAbksecMSS2doAAAAASUVORK5CYII=); } -.ajaxifyCart__close { +.ajaxifyCart--close { @extend .sprite; width: 20px; height: 20px; @@ -777,12 +768,12 @@ form[action="/cart/add"] { (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - .ajaxifyCart__add { + .ajaxifyCart--add { background-size: 8px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFFODI2Mjg4NDY1NzExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFFODI2Mjg5NDY1NzExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUU4MjYyODY0NjU3MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUU4MjYyODc0NjU3MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Q1IXcAAAAL0lEQVR42mJsampiwAH+o/EZsSliYqAQjBrAwMCCJbSJjZXhFAaMoylxgA0ACDAAufIFqTR3duwAAAAASUVORK5CYII=); } - .ajaxifyCart__minus { + .ajaxifyCart--minus { background-size: 8px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxNTJBNEY5NDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxNTJBNEZBNDY1OTExRTM4ODdCODU0OEQ4MDA1MjgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjE1MkE0Rjc0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjE1MkE0Rjg0NjU5MTFFMzg4N0I4NTQ4RDgwMDUyODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz54TqQaAAAAKElEQVR42mL8//8/AyWAiYFCMGoAAwNLc3Pz/xEeBoyjKXEQGAAQYABVgwijPO94YQAAAABJRU5ErkJggg==); } diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid index aef67b27c..18e4dda7a 100755 --- a/assets/timber.scss.liquid +++ b/assets/timber.scss.liquid @@ -27,7 +27,7 @@ #Lists #Tables #OOCSS Media Object - #Images + #Images and Iframes #Forms #Buttons #Pagination @@ -109,7 +109,7 @@ $successGreen: #0a942a; /* Width variables */ $siteWidth: 1180px; $gutter: 24px; -$gridGutter: 24px; +$gridGutter: 5%; // can be a %, but nested grids will have smaller margins because of it /* Radius */ $radius: 3px; @@ -718,6 +718,10 @@ blockquote { p { margin-bottom: 0; + + & + cite { + margin-top: $gutter/2; + } } cite { @@ -725,10 +729,6 @@ blockquote { font-size: 0.75em; color: $colorTextGrey; - p + & { - margin-top: $gutter/2; - } - &:before { content: "\2014 \0020"; } @@ -841,10 +841,11 @@ th, td { // ============================================================================== -// #Images +// #Images and Iframes // ============================================================================== img.auto, -.grid-item img { +.grid-item img, +.grid-item iframe { max-width: 100%; height: auto; } @@ -853,6 +854,9 @@ img.auto, // ============================================================================== // #Forms // ============================================================================== +form { + margin-bottom: $gutter; +} input, textarea, select, @@ -948,6 +952,8 @@ label[for] { /* Horizontal Form */ form.form-horizontal, .form-horizontal { + margin-bottom: 0; + input[type="text"], input[type="password"], input[type="email"], @@ -1468,7 +1474,7 @@ a.btn-secondary { padding-bottom: $gutter; border-bottom: 1px solid $borderColor; - .ajaxifyCart__content & { + .ajaxifyCart--content & { border-bottom-color: #444; } } diff --git a/layout/theme.liquid b/layout/theme.liquid index 4195d75ab..f58b69a91 100755 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -165,7 +165,7 @@ \ No newline at end of file diff --git a/snippets/collection-tags.liquid b/snippets/collection-tags.liquid index 1820e4784..64aa00fa8 100755 --- a/snippets/collection-tags.liquid +++ b/snippets/collection-tags.liquid @@ -34,10 +34,9 @@ {% assign type_escaped = collection.products.first.type | escape %} {% assign vendor_escaped = collection.products.first.vendor | escape %} -
Tags
- -