Skip to content

Instantly share code, notes, and snippets.

@sorahn

sorahn/SassMeister-input.scss

Last active August 29, 2015 14:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sorahn/8c94737fc12fa8da8ff9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sorahn/8c94737fc12fa8da8ff9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Daryl Roberts revised this gist Feb 21, 2015. 2 changed files with 11 additions and 14 deletions.
    3 changes: 1 addition & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    // ----
    // Sass (v3.3.14)
    // Compass (v1.0.1)
    // libsass (v3.1.0)
    // ----

    //
    22 changes: 10 additions & 12 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,12 @@
    .shadow-top {
    position: relative;
    overflow: hidden;
    }
    .shadow-top::after {
    display: block;
    position: absolute;
    content: "";
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.55);
    bottom: 100%;
    left: -50px;
    right: -50px;
    height: 50px;
    }
    overflow: hidden; }
    .shadow-top::after {
    display: block;
    position: absolute;
    content: "";
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.55);
    bottom: 100%;
    left: -50px;
    right: -50px;
    height: 50px; }
  2. Daryl Roberts revised this gist Feb 21, 2015. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,6 @@

    //
    // @author Daryl Roberts

    // @license MIT
    //

  3. Daryl Roberts created this gist Feb 21, 2015.
    62 changes: 62 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    // ----
    // Sass (v3.3.14)
    // Compass (v1.0.1)
    // ----

    //
    // @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;
    }
    }
    }

    .shadow-top {
    $shadow: 0px 10px 10px 0px rgba(0,0,0,0.55);
    @include side-shadow($shadow, top);
    }
    14 changes: 14 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    .shadow-top {
    position: relative;
    overflow: hidden;
    }
    .shadow-top::after {
    display: block;
    position: absolute;
    content: "";
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.55);
    bottom: 100%;
    left: -50px;
    right: -50px;
    height: 50px;
    }