////////////////////////////// // Blueprint theme paths - for use with interpolation syntax: // background: url(“#{$base-images}/image-name.png”) $base: “../../blueprint” $base-images: “../../blueprint/blueprint_images”

$content-stream-img-sm: 50% $content-stream-img-md: 47.5%

@mixin img-types

.pane-node-field-cover-photo,
.field--name-field-image
  @content

@mixin img-left

float: left
padding: 0 10px 5px 0

@mixin img-right

float: right
padding: 0 0 5px 10px

@mixin img-no-float

float: none
padding: 0

%img-left

+img-left

%img-right

+img-right

@mixin img2x($file, $type, $width, $height, $inline: 'false')

@if $inline == true
  background-image: inline-image($file + '.' + $type)
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) 
    &
      background-image: inline-image($file + '@2x.' + $type)
      -webkit-background-size: $width $height
@else
  background-image: image-url("#{$file}.#{$type}")
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) 
    &
      background-image: image-url("#{$file}@2x.#{$type}")
      -webkit-background-size: $width $height

// EXAMPLE: // +img2x('puppies', 'png', 100px, 75px)

@mixin svg-bg($filename, $position: 0, $height: 20px, $width: 20px, $spacing: 10px, $bg-color: transparent, $repeat: no-repeat, $attachment: scroll, $source: '#{$base-images}', $no-svg-class: '.no-svg', $pseudo: 'before')

&:#{$pseudo}
  content: ''
  display: inline-block
  background: $bg-color url($source + '/' + $filename + '.svg') $attachment $repeat $position
  background-size: $height $width
  height: $height
  width: $width
  margin-right: $spacing
#{$no-svg-class} &
  &:#{$pseudo}
    background-image: url($source + '/' + $filename + '.png')

@mixin svg-bg-simple($filename, $source: '#{$base-images}', $no-svg-class: '.lt-ie9', $pseudo: 'before')

background-image: url($source + '/' + $filename + '.svg')
#{$no-svg-class} &
  background-image: url($source + '/' + $filename + '.png')

// gist.github.com/darren131/3410875

@mixin resize-sprite($map, $sprite, $percent) 
 $spritePath:    sprite-path($map)
 $spriteWidth:   image-width($spritePath)
 $spriteHeight:  image-height($spritePath)
 $width: image-width(sprite-file($map, $sprite))
 $height: image-height(sprite-file($map, $sprite))
 @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)))
 width: ceil($width*($percent/100))
 height: ceil($height*($percent/100))
 background-position: 0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) )