Skip to content

Instantly share code, notes, and snippets.

@sorahn

sorahn/side-shadow.scss

Last active August 29, 2015 14:16
Show Gist options
  • Save sorahn/7915cae6c820e351158f to your computer and use it in GitHub Desktop.
Save sorahn/7915cae6c820e351158f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sorahn revised this gist Feb 27, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions side-shadow.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    //
    // @author Daryl Roberts
    // @license MIT
    // @url https://gist.github.com/sorahn/7915cae6c820e351158f
    //

    @mixin side-shadow($shadow, $side, $base-size: 50px) {
  2. sorahn created this gist Feb 27, 2015.
    51 changes: 51 additions & 0 deletions side-shadow.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    //
    // @author Daryl Roberts
    // @license MIT
    //

    @mixin side-shadow($shadow, $side, $base-size: 50px) {
    // If you need to make shadows larger than 50px, you can
    // override the base size.

    // Some basics.
    // The child is absolute, so the parent must be relative.
    // We're going to use a pseudo element to create the shadow, so
    // we need to hide the overflow.
    position: relative;
    overflow: hidden;

    // Here is the pseudo element that is going to have a shadow.
    &::after {
    display: block;
    position: absolute;
    content: "";
    box-shadow: $shadow;

    // If this was a fancy mixin, I might try and figure out the
    // $side based on the $shadow, but I'm lazy.

    // Also the top/bottom/width and the right/left/height. See
    // previous reasoning.
    @if $side == left {
    right: 100%;
    top: -$base-size;
    bottom: -$base-size;
    width: $base-size;
    } @else if $side == right {
    right: 100%;
    top: -$base-size;
    bottom: -$base-size;
    width: $base-size;
    } @else if $side == bottom {
    top: 100%;
    left: -$base-size;
    right: -$base-size;
    height: $base-size;
    } @else {
    bottom: 100%;
    left: -$base-size;
    right: -$base-size;
    height: $base-size;
    }
    }
    }