summaryrefslogtreecommitdiff
path: root/www/lib/ng-mfb/mfb/src/_/_zoomin.scss
diff options
context:
space:
mode:
authorPliable Pixels <pliablepixels@gmail.com>2017-09-21 12:49:18 -0400
committerPliable Pixels <pliablepixels@gmail.com>2017-09-21 12:49:18 -0400
commitb28028ac4082842143b0f528d6bc539da6ccb419 (patch)
tree1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/ng-mfb/mfb/src/_/_zoomin.scss
parent676270d21beed31d767a06c89522198c77d5d865 (diff)
mega changes, including updates and X
Diffstat (limited to 'www/lib/ng-mfb/mfb/src/_/_zoomin.scss')
-rw-r--r--www/lib/ng-mfb/mfb/src/_/_zoomin.scss78
1 files changed, 78 insertions, 0 deletions
diff --git a/www/lib/ng-mfb/mfb/src/_/_zoomin.scss b/www/lib/ng-mfb/mfb/src/_/_zoomin.scss
new file mode 100644
index 00000000..df0ee0ff
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/_/_zoomin.scss
@@ -0,0 +1,78 @@
+@mixin effects-zoomin{
+
+/**
+ * ZOOM-IN
+ * When hovering the main button, the child buttons grow
+ * from zero to normal size.
+ *
+ */
+
+ .mfb-component--tl.mfb-zoomin,
+ .mfb-component--tr.mfb-zoomin{
+ .mfb-component__list{
+ li{
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ }
+ @for $i from 1 through $number-of-child-buttons {
+ $distance: $button-space * $i;
+ li:nth-child( #{$i} ) {
+ -webkit-transform: translateY($distance) scale(0);
+ transform: translateY($distance) scale(0);
+ transition: all $slide-speed;
+ // this is the delay at which the buttons *disappear*
+ transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
+ }
+ }
+ }
+ &[data-mfb-toggle="hover"]:hover,
+ &[data-mfb-state="open"]{
+ .mfb-component__list{
+ @for $i from 1 through $number-of-child-buttons {
+ $distance: $button-space * $i;
+ li:nth-child( #{$i} ) {
+ -webkit-transform: translateY($distance) scale(1);
+ transform: translateY($distance) scale(1);
+ // this is the delay at which the buttons *appear*
+ transition-delay: $i * 0.05s;
+ }
+ }
+ }
+ }
+ }
+
+ .mfb-component--bl.mfb-zoomin,
+ .mfb-component--br.mfb-zoomin{
+ .mfb-component__list{
+ li{
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ }
+ @for $i from 1 through $number-of-child-buttons {
+ $distance: -1 * $button-space * $i;
+ li:nth-child( #{$i} ) {
+ -webkit-transform: translateY($distance) scale(0);
+ transform: translateY($distance) scale(0);
+ transition: all $slide-speed;
+ // this is the delay at which the buttons start disappearing
+ transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
+ }
+ }
+ }
+ &[data-mfb-toggle="hover"]:hover,
+ &[data-mfb-state="open"]{
+ .mfb-component__list{
+ @for $i from 1 through $number-of-child-buttons {
+ $distance: -1 * $button-space * $i;
+ li:nth-child( #{$i} ) {
+ -webkit-transform: translateY($distance) scale(1);
+ transform: translateY($distance) scale(1);
+ // this is the delay at which the buttons appear
+ transition-delay: $i * 0.05s;
+ }
+ }
+ }
+ }
+ }
+
+}