This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Cascade | |
// $count accepts any whole number > 1 | |
// $delay & $duration accept values in seconds | |
// NB you'll need to handle vendor prefixes yourself | |
// -------------------------- | |
@mixin cascade($count, $property, $delay: 0s, $duration: 0.2s, $timing: ease) { | |
transition-property: $property; | |
transition-timing-function: $timing; | |
@for $i from 1 through $count { | |
&:nth-child(#{$i}) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Full bleed | |
// $direction accepts 'up', 'down' or 'none'; | |
// NB using 'up' or 'down' causes the shadow to extend | |
// to (and beyond) the top or bottom of the viewport | |
// Only use 'none' on relatively wide elements, | |
// and set $width to the width of the element | |
// -------------------------- | |
@mixin full-bleed($color, $direction: none, $width: 400em) { | |
@if $color == 'none' { | |
box-shadow: none; |