Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// libsass (v3.1.0)
// ----
//
// @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);
}
.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; }
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.