josephbergdoll

<!-- 
* Liquid Snippet for generating responsive image srcsets based on Shopify's native image transforms.
* Published June 17, 2016 by Joseph Bergdoll
* www.extendedplay.nyc
*
* Full list of Shopify's generated image transforms:
* https://ecommerce.shopify.com/c/ecommerce-design/t/very-important-please-read-new-image-sizes-supported-up-to-2048x2048-for-retina-support-110766
*
* Simply include it within your image element, define the `image`, and the maximum size.
* Product Images and Theme Asset Images should have either `product: 'true'` or `asset: 'true'` declared, respectively.

josephbergdoll

@include transform\((.+?(?=\);))\);
transform: ${1};

josephbergdoll

// $property: the property of the element that you would like to scale/lock
// $min-size: minimum element $property size in $unit specified
// $max-size: maximum element $property size in $unit specified
// $min-width: the screen width in $units where you want to lock in the $min-size
// $max-width: the screen width in $units where you want to lock in the $max-size
// $unit: the units which all measurements are taken in
// $vunit: the viewport unit which all measurements are taken in

@mixin css-lock($property: font-size, $min-size: 1, $max-size: 1.4, $min-width: 20, $max-width: 100, $unit: px, $vunit: vw) {
  #{$property}: calc(#{$min-size}#{$unit} + (#{$max-size} - #{$min-size}) * ((100#{$vunit} - #{$min-width}#{$unit}) / (#{$max-width} - #{$min-width})));

josephbergdoll

@mixin reset-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto;