Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add retina pixel border with gradients
retinaBorder(top = false, right = false, bottom = false, left = false)
retinaGradients = ''
retinaSizes = ''
if top
retinaGradients += createGradient(top, 'top', appending: retinaGradients ? true : false)
retinaSizes = appendSize('100% 1px', retinaSizes)
if right
retinaGradients += createGradient(right, 'right', appending: retinaGradients ? true : false)
retinaSizes = appendSize('1px 100%', retinaSizes)
if bottom
retinaGradients += createGradient(bottom, 'bottom', appending: retinaGradients ? true : false)
retinaSizes = appendSize('100% 1px', retinaSizes)
if left
retinaGradients += createGradient(left, 'left', appending: retinaGradients ? true : false)
retinaSizes = appendSize('1px 100%', retinaSizes)
if retinaGradients
background: unquote(retinaGradients)
@media (-webkit-min-device-pixel-ratio: 1.5) {
background-size: unquote(retinaSizes)
}
appendSize(size, sizes)
if sizes
sizes += ','
sizes += size
createGradient(color, anchor, appending)
if anchor is 'top'
angle = 180deg
position = 'top left / 100% 2px'
if anchor is 'right'
angle = -90deg
position = 'top right / 2px 100%'
if anchor is 'bottom'
angle = 0deg
position = 'bottom right / 100% 2px'
if anchor is 'left'
angle = 90deg
position = 'bottom left / 2px 100%'
gradient = 'linear-gradient(' + angle + ',' + color + ',' + color + ' 50%, transparent 50%)' + position + ' no-repeat'
if appending
gradient = ',' + gradient
return gradient
@einarlove

This comment has been minimized.

Copy link
Owner Author

commented Mar 2, 2015

.example:

@import 'retinaBorder'

.element {
  retinaBorder(bottom: #eee, right: blue)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.