////////////////////////////// // 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) )