Skip to content

Instantly share code, notes, and snippets.

@rolandcoops

rolandcoops/inset-border.scss

Created July 5, 2019 09:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rolandcoops/77dfe5c3168812ca65e1c773abc7f173 to your computer and use it in GitHub Desktop.
Save rolandcoops/77dfe5c3168812ca65e1c773abc7f173 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
inset-border.scss
/**
* Add an inset border (in a single direction) to an element
* Examples:
* @include inset-border(bottom)
* @include inset-border(right, 3px, red)
*/
@mixin inset-border ($direction, $width: 1px, $color: black, $opacity: 0.05) {
$y: if($direction == bottom, -$width, if($direction == top, $width, 0));
$x: if($direction == right, -$width, if($direction == left, $width, 0));
box-shadow: inset #{$x} #{$y} 0 0 rgba($color, $opacity);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment