diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
| commit | b28028ac4082842143b0f528d6bc539da6ccb419 (patch) | |
| tree | 1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss | |
| parent | 676270d21beed31d767a06c89522198c77d5d865 (diff) | |
mega changes, including updates and X
Diffstat (limited to 'www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss')
| -rw-r--r-- | www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss b/www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss new file mode 100644 index 00000000..7a08d72d --- /dev/null +++ b/www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss @@ -0,0 +1,67 @@ +@mixin effects-slidein-spring{ + +/** + * SLIDE IN SPRING + * Same as slide-in but with a springy animation. + * + */ + + .mfb-component--tl.mfb-slidein-spring, + .mfb-component--tr.mfb-slidein-spring{ + .mfb-component__list li{ + opacity: 0; + transition: all $slide-speed; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); + } + @for $i from 1 through $number-of-child-buttons { + .mfb-component__list li:nth-child( #{$i} ) { + transition-delay: #{$i * 0.05}s; + } + } + &[data-mfb-toggle="hover"]:hover, + &[data-mfb-state="open"]{ + .mfb-component__list{ + li{ + opacity: 1; + } + @for $i from 1 through $number-of-child-buttons { + $distance: $button-space * $i; + li:nth-child( #{$i} ) { + transition-delay: #{$i * 0.05}s; + -webkit-transform: translateY( $distance ); + transform: translateY( $distance ); } + } + } + } + } + + .mfb-component--bl.mfb-slidein-spring, + .mfb-component--br.mfb-slidein-spring{ + .mfb-component__list li{ + opacity: 0; + transition: all $slide-speed; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); + } + @for $i from 1 through $number-of-child-buttons { + .mfb-component__list li:nth-child( #{$i} ) { + transition-delay: #{$i * 0.05}s; + } + } + &[data-mfb-toggle="hover"]:hover, + &[data-mfb-state="open"]{ + .mfb-component__list{ + li{ + opacity: 1; + } + @for $i from 1 through $number-of-child-buttons { + $distance: -1 * $button-space * $i; + li:nth-child( #{$i} ) { + transition-delay: #{$i * 0.05}s; + -webkit-transform: translateY( $distance ); + transform: translateY( $distance ); } + } + } + } + } + +} |
