From 54a54a2907cbf8f07cab2c05dd478570c78cf3f1 Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Tue, 2 Apr 2019 10:49:25 -0400 Subject: #801 final cleanups, some test aut stuff too --- www/css/_/_fountain.scss | 77 - www/css/_/_slidein-spring.scss | 67 - www/css/_/_slidein.scss | 53 - www/css/_/_zoomin.scss | 78 - www/css/angular-carousel.css | 64 - www/css/angular-carousel.min.css | 1 + www/css/angular-circular-navigation.css | 296 - www/css/angular-circular-navigation.min.css | 1 + www/css/custommfb.css | 670 -- www/css/custommfb.min.css | 1 + www/css/custommfb.scss | 404 -- www/css/ionic.app.css | 9864 --------------------------- www/index.html | 6 +- www/js/EventCtrl.js | 23 +- www/js/EventModalCtrl.js | 23 +- www/js/app.js | 3 +- www/templates/events.html | 2 +- www/templates/menu.html | 4 +- 18 files changed, 33 insertions(+), 11604 deletions(-) delete mode 100644 www/css/_/_fountain.scss delete mode 100644 www/css/_/_slidein-spring.scss delete mode 100644 www/css/_/_slidein.scss delete mode 100644 www/css/_/_zoomin.scss delete mode 100755 www/css/angular-carousel.css create mode 100644 www/css/angular-carousel.min.css delete mode 100644 www/css/angular-circular-navigation.css create mode 100644 www/css/angular-circular-navigation.min.css delete mode 100644 www/css/custommfb.css create mode 100644 www/css/custommfb.min.css delete mode 100644 www/css/custommfb.scss delete mode 100644 www/css/ionic.app.css (limited to 'www') diff --git a/www/css/_/_fountain.scss b/www/css/_/_fountain.scss deleted file mode 100644 index cd5a2933..00000000 --- a/www/css/_/_fountain.scss +++ /dev/null @@ -1,77 +0,0 @@ -@mixin effects-fountain{ - -/** - * FOUNTAIN - * When hovering the main button the child buttons - * jump into view from outside the viewport - */ - - .mfb-component--tl.mfb-fountain, - .mfb-component--tr.mfb-fountain{ - .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: $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-fountain, - .mfb-component--br.mfb-fountain{ - .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 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; - } - } - } - } - } - -} diff --git a/www/css/_/_slidein-spring.scss b/www/css/_/_slidein-spring.scss deleted file mode 100644 index 7a08d72d..00000000 --- a/www/css/_/_slidein-spring.scss +++ /dev/null @@ -1,67 +0,0 @@ -@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 ); } - } - } - } - } - -} diff --git a/www/css/_/_slidein.scss b/www/css/_/_slidein.scss deleted file mode 100644 index f2735124..00000000 --- a/www/css/_/_slidein.scss +++ /dev/null @@ -1,53 +0,0 @@ -@mixin effects-slidein{ - -/** - * SLIDE IN + FADE - * When hovering the main button, the child buttons slide out from beneath - * the main button while transitioning from transparent to opaque. - * - */ - - .mfb-component--tl.mfb-slidein, - .mfb-component--tr.mfb-slidein{ - .mfb-component__list li{ - opacity: 0; - transition: all $slide-speed; - } - &[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} ) { - -webkit-transform: translateY( $distance ); - transform: translateY( $distance ); } - } - } - } - } - - .mfb-component--bl.mfb-slidein, - .mfb-component--br.mfb-slidein{ - .mfb-component__list li{ - opacity: 0; - transition: all $slide-speed; - } - &[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} ) { -webkit-transform: translateY( $distance ); - transform: translateY( $distance ); } - } - } - } - } - -} diff --git a/www/css/_/_zoomin.scss b/www/css/_/_zoomin.scss deleted file mode 100644 index df0ee0ff..00000000 --- a/www/css/_/_zoomin.scss +++ /dev/null @@ -1,78 +0,0 @@ -@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; - } - } - } - } - } - -} diff --git a/www/css/angular-carousel.css b/www/css/angular-carousel.css deleted file mode 100755 index a11d8523..00000000 --- a/www/css/angular-carousel.css +++ /dev/null @@ -1,64 +0,0 @@ -input[type=range] { - width: 300px; } - -ul[rn-carousel] { - overflow: hidden; - padding: 0; - white-space: nowrap; - position: relative; - -webkit-perspective: 1000px; - -ms-perspective: 1000px; - perspective: 1000px; - -ms-touch-action: pan-y; - touch-action: pan-y; } - ul[rn-carousel] > li { - color: black; - -webkit-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; - overflow: visible; - vertical-align: top; - position: absolute; - left: 0; - right: 0; - white-space: normal; - padding: 0; - margin: 0; - list-style-type: none; - width: 100%; - height: 100%; - display: inline-block; } - -/* prevent flickering when moving buffer */ -ul[rn-carousel-buffered] > li { - display: none; } - -ul[rn-carousel-transition="hexagon"] { - overflow: visible; } - -/* indicators */ -div.rn-carousel-indicator span { - cursor: pointer; - color: #666; } - div.rn-carousel-indicator span.active { - color: white; } - -/* prev/next controls */ -.rn-carousel-control { - -webkit-transition: opacity 0.2s ease-out; - transition: opacity 0.2s ease-out; - font-size: 2rem; - position: absolute; - top: 40%; - opacity: 0.75; - cursor: pointer; } - .rn-carousel-control:hover { - opacity: 1; } - .rn-carousel-control.rn-carousel-control-prev { - left: 0.5em; } - .rn-carousel-control.rn-carousel-control-prev:before { - content: "<"; } - .rn-carousel-control.rn-carousel-control-next { - right: 0.5em; } - .rn-carousel-control.rn-carousel-control-next:before { - content: ">"; } diff --git a/www/css/angular-carousel.min.css b/www/css/angular-carousel.min.css new file mode 100644 index 00000000..976a3cdb --- /dev/null +++ b/www/css/angular-carousel.min.css @@ -0,0 +1 @@ +input[type=range]{width:300px}ul[rn-carousel]{overflow:hidden;padding:0;white-space:nowrap;position:relative;-webkit-perspective:1000px;-ms-perspective:1000px;perspective:1000px;-ms-touch-action:pan-y;touch-action:pan-y}ul[rn-carousel]>li{color:#000;-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;overflow:visible;vertical-align:top;position:absolute;left:0;right:0;white-space:normal;padding:0;margin:0;list-style-type:none;width:100%;height:100%;display:inline-block}ul[rn-carousel-buffered]>li{display:none}ul[rn-carousel-transition=hexagon]{overflow:visible}div.rn-carousel-indicator span{cursor:pointer;color:#666}div.rn-carousel-indicator span.active{color:#fff}.rn-carousel-control{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;font-size:2rem;position:absolute;top:40%;opacity:.75;cursor:pointer}.rn-carousel-control:hover{opacity:1}.rn-carousel-control.rn-carousel-control-prev{left:.5em}.rn-carousel-control.rn-carousel-control-prev:before{content:"<"}.rn-carousel-control.rn-carousel-control-next{right:.5em}.rn-carousel-control.rn-carousel-control-next:before{content:">"} diff --git a/www/css/angular-circular-navigation.css b/www/css/angular-circular-navigation.css deleted file mode 100644 index b2143741..00000000 --- a/www/css/angular-circular-navigation.css +++ /dev/null @@ -1,296 +0,0 @@ -.cn-button { - margin-top: -1.5em; - margin-left: -1.5em; - width: 3em; - height: 3em; } - -.cn-button.small { - margin-top: -1em; - margin-left: -1em; - width: 2em; - height: 2em; } - -.cn-button.big { - margin-top: -2em; - margin-left: -2em; - width: 4em; - height: 4em; } - -.cn-wrapper { - margin-top: -7em; - margin-left: -7em; - width: 14em; - height: 14em; } - -.cn-wrapper.small { - margin-top: -5.25em; - margin-left: -5.25em; - width: 10.5em; - height: 10.5em; } - -.cn-wrapper.big { - margin-top: -8.75em; - margin-left: -8.75em; - width: 17.5em; - height: 17.5em; } - -.cn-wrapper li { - margin-top: -2.6em; - margin-left: -8em; - width: 8em; - height: 8em; } - -.cn-wrapper.small li { - margin-top: -1.6em; - margin-left: -6em; - width: 6em; - height: 6em; } - -.cn-wrapper.big li { - margin-top: -3.5em; - margin-left: -10em; - width: 10em; - height: 10em; } - -.cn-wrapper li a { - right: -4em; - bottom: -4em; - width: 8em; - height: 8em; } - -.cn-wrapper.small li a { - right: -3.4em; - bottom: -3em; - width: 7.2em; - height: 6.2em; } - -.cn-wrapper.big li a { - right: -5em; - bottom: -5em; - width: 10em; - height: 10em; } - -circular *, .circular * { - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 0; - padding: 0; - list-style: none; - position: relative; } - -circular, .circular { - position: absolute; - top: 100%; - left: 50%; } - -.cn-button { - position: absolute; - top: 100%; - left: 50%; - z-index: 11; - padding-top: 0em; - border: none; - border-radius: 50%; - background: none; - background-color: #0A833D; - color: #ffffff; - text-align: center; - font-weight: 700; - font-size: 1.3em; - text-transform: uppercase; - cursor: pointer; - -webkit-backface-visibility: hidden; - outline: 0; } - -.cn-wrapper { - position: absolute; - top: 100%; - left: 50%; - z-index: 10; - border-radius: 50%; - background: transparent; - opacity: 0; - -webkit-transition: all .3s ease 0.3s; - -moz-transition: all .3s ease 0.3s; - transition: all .3s ease 0.3s; - -webkit-transform: scale(0.1); - -ms-transform: scale(0.1); - transform: scale(0.1); - pointer-events: none; - overflow: hidden; } - -.opened-nav { - border-radius: 50%; - opacity: 1; - -webkit-transition: all .3s ease; - -moz-transition: all .3s ease; - transition: all .3s ease; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - pointer-events: auto; } - -.cn-wrapper li { - position: absolute; - top: 50%; - left: 50%; - overflow: hidden; - font-size: 1.3em; - -webkit-transition: all .3s ease; - -moz-transition: all .3s ease; - transition: all .3s ease; - -webkit-transform-origin: 100% 100%; - transform-origin: 100% 100%; - pointer-events: none; } - -.cn-wrapper li a { - position: absolute; - display: block; - border-radius: 50%; - background: #0A833D; - opacity: 0.7; - color: #ffffff; - text-align: center; - text-decoration: none; - font-size: 1.2em; - line-height: 2.5; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - pointer-events: auto; - cursor: pointer; } - -.cn-wrapper li a.is-active { - opacity: 1; } - -.cn-wrapper li a:hover, -.cn-wrapper li a:active, -.cn-wrapper li a:focus { - opacity: 0.9; } - -.cn-wrapper li a.is-active:hover, -.cn-wrapper li a.is-active:active, -.cn-wrapper li a.is-active:focus { - opacity: 0.9; } - -.cn-wrapper li a span { - position: relative; - top: 1.8em; - display: block; - font-size: .5em; - font-weight: 700; - text-transform: uppercase; } - -.opened-nav li { - -webkit-transition: all .3s ease .3s; - -moz-transition: all .3s ease .3s; - transition: all .3s ease .3s; } - -.item-odd-left-5, .opened-nav.items-11 li:first-child { - -webkit-transform: rotate(-105deg) skew(60deg); - -ms-transform: rotate(-105deg) skew(60deg); - transform: rotate(-105deg) skew(60deg); } - -.item-odd-left-4, .opened-nav.items-9 li:first-child, .opened-nav.items-11 li:nth-child(2) { - -webkit-transform: rotate(-63deg) skew(60deg); - -ms-transform: rotate(-63deg) skew(60deg); - transform: rotate(-63deg) skew(60deg); } - -.item-odd-left-3, .opened-nav.items-7 li:first-child, .opened-nav.items-9 li:nth-child(2), .opened-nav.items-11 li:nth-child(3) { - -webkit-transform: rotate(-21deg) skew(60deg); - -ms-transform: rotate(-21deg) skew(60deg); - transform: rotate(-21deg) skew(60deg); } - -.item-odd-left-2, .opened-nav.items-5 li:first-child, .opened-nav.items-7 li:nth-child(2), .opened-nav.items-9 li:nth-child(3), .opened-nav.items-11 li:nth-child(4) { - -webkit-transform: rotate(11deg) skew(60deg); - -ms-transform: rotate(11deg) skew(60deg); - transform: rotate(11deg) skew(60deg); } - -.item-odd-left-1, .opened-nav.items-3 li:first-child, .opened-nav.items-5 li:nth-child(2), .opened-nav.items-7 li:nth-child(3), .opened-nav.items-9 li:nth-child(4), .opened-nav.items-11 li:nth-child(5) { - -webkit-transform: rotate(23deg) skew(60deg); - -ms-transform: rotate(23deg) skew(60deg); - transform: rotate(23deg) skew(60deg); } - -.item-odd-center, .cn-wrapper li, .opened-nav.items-1 li:first-child, .opened-nav.items-3 li:nth-child(2), .opened-nav.items-5 li:nth-child(3), .opened-nav.items-7 li:nth-child(4), .opened-nav.items-9 li:nth-child(5), .opened-nav.items-11 li:nth-child(6) { - -webkit-transform: rotate(75deg) skew(60deg); - -ms-transform: rotate(75deg) skew(60deg); - transform: rotate(75deg) skew(60deg); } - -.item-odd-right-1, .opened-nav.items-3 li:nth-child(3), .opened-nav.items-5 li:nth-child(4), .opened-nav.items-7 li:nth-child(5), .opened-nav.items-9 li:nth-child(6), .opened-nav.items-11 li:nth-child(7) { - -webkit-transform: rotate(127deg) skew(60deg); - -ms-transform: rotate(127deg) skew(60deg); - transform: rotate(127deg) skew(60deg); } - -.item-odd-right-2, .opened-nav.items-5 li:nth-child(5), .opened-nav.items-7 li:nth-child(6), .opened-nav.items-9 li:nth-child(7), .opened-nav.items-11 li:nth-child(8) { - -webkit-transform: rotate(139deg) skew(60deg); - -ms-transform: rotate(139deg) skew(60deg); - transform: rotate(139deg) skew(60deg); } - -.item-odd-right-3, .opened-nav.items-7 li:nth-child(7), .opened-nav.items-9 li:nth-child(8), .opened-nav.items-11 li:nth-child(9) { - -webkit-transform: rotate(171deg) skew(60deg); - -ms-transform: rotate(171deg) skew(60deg); - transform: rotate(171deg) skew(60deg); } - -.item-odd-right-4, .opened-nav.items-9 li:nth-child(9), .opened-nav.items-11 li:nth-child(10) { - -webkit-transform: rotate(213deg) skew(60deg); - -ms-transform: rotate(213deg) skew(60deg); - transform: rotate(213deg) skew(60deg); } - -.item-odd-right-5, .opened-nav.items-11 li:nth-child(11) { - -webkit-transform: rotate(235deg) skew(60deg); - -ms-transform: rotate(235deg) skew(60deg); - transform: rotate(235deg) skew(60deg); } - -.item-even-left-5, .opened-nav.items-10 li:first-child { - -webkit-transform: rotate(-69deg) skew(60deg); - -ms-transform: rotate(-69deg) skew(60deg); - transform: rotate(-69deg) skew(60deg); } - -.item-even-left-4, .opened-nav.items-8 li:first-child, .opened-nav.items-10 li:nth-child(2) { - -webkit-transform: rotate(-37deg) skew(60deg); - -ms-transform: rotate(-37deg) skew(60deg); - transform: rotate(-37deg) skew(60deg); } - -.item-even-left-3, .opened-nav.items-6 li:first-child, .opened-nav.items-8 li:nth-child(2), .opened-nav.items-10 li:nth-child(3) { - -webkit-transform: rotate(-5deg) skew(60deg); - -ms-transform: rotate(-5deg) skew(60deg); - transform: rotate(-5deg) skew(60deg); } - -.item-even-left-2, .opened-nav.items-4 li:first-child, .opened-nav.items-6 li:nth-child(2), .opened-nav.items-8 li:nth-child(3), .opened-nav.items-10 li:nth-child(4) { - -webkit-transform: rotate(27deg) skew(60deg); - -ms-transform: rotate(27deg) skew(60deg); - transform: rotate(27deg) skew(60deg); } - -.item-even-left-1, .opened-nav.items-2 li:first-child, .opened-nav.items-4 li:nth-child(2), .opened-nav.items-6 li:nth-child(3), .opened-nav.items-8 li:nth-child(4), .opened-nav.items-10 li:nth-child(5) { - -webkit-transform: rotate(59deg) skew(60deg); - -ms-transform: rotate(59deg) skew(60deg); - transform: rotate(59deg) skew(60deg); } - -.item-even-right-1, .opened-nav.items-2 li:nth-child(2), .opened-nav.items-4 li:nth-child(3), .opened-nav.items-6 li:nth-child(4), .opened-nav.items-8 li:nth-child(5), .opened-nav.items-10 li:nth-child(6) { - -webkit-transform: rotate(91deg) skew(60deg); - -ms-transform: rotate(91deg) skew(60deg); - transform: rotate(91deg) skew(60deg); } - -.item-even-right-2, .opened-nav.items-4 li:nth-child(4), .opened-nav.items-6 li:nth-child(5), .opened-nav.items-8 li:nth-child(6), .opened-nav.items-10 li:nth-child(7) { - -webkit-transform: rotate(123deg) skew(60deg); - -ms-transform: rotate(123deg) skew(60deg); - transform: rotate(123deg) skew(60deg); } - -.item-even-right-3, .opened-nav.items-6 li:nth-child(6), .opened-nav.items-8 li:nth-child(7), .opened-nav.items-10 li:nth-child(8) { - -webkit-transform: rotate(155deg) skew(60deg); - -ms-transform: rotate(155deg) skew(60deg); - transform: rotate(155deg) skew(60deg); } - -.item-even-right-4, .opened-nav.items-8 li:nth-child(8), .opened-nav.items-10 li:nth-child(9) { - -webkit-transform: rotate(187deg) skew(60deg); - -ms-transform: rotate(187deg) skew(60deg); - transform: rotate(187deg) skew(60deg); } - -.item-even-right-5, .opened-nav.items-10 li:nth-child(10) { - -webkit-transform: rotate(219deg) skew(60deg); - -ms-transform: rotate(219deg) skew(60deg); - transform: rotate(219deg) skew(60deg); } - -.cn-wrapper li a { - -webkit-transform: skew(-60deg) rotate(-75deg) scale(1); - -ms-transform: skew(-60deg) rotate(-75deg) scale(1); - transform: skew(-60deg) rotate(-75deg) scale(1); } diff --git a/www/css/angular-circular-navigation.min.css b/www/css/angular-circular-navigation.min.css new file mode 100644 index 00000000..ec8690d7 --- /dev/null +++ b/www/css/angular-circular-navigation.min.css @@ -0,0 +1 @@ +.cn-button{margin-top:-1.5em;margin-left:-1.5em;width:3em;height:3em}.cn-button.small{margin-top:-1em;margin-left:-1em;width:2em;height:2em}.cn-button.big{margin-top:-2em;margin-left:-2em;width:4em;height:4em}.cn-wrapper{margin-top:-7em;margin-left:-7em;width:14em;height:14em}.cn-wrapper.small{margin-top:-5.25em;margin-left:-5.25em;width:10.5em;height:10.5em}.cn-wrapper.big{margin-top:-8.75em;margin-left:-8.75em;width:17.5em;height:17.5em}.cn-wrapper li{margin-top:-2.6em;margin-left:-8em;width:8em;height:8em}.cn-wrapper.small li{margin-top:-1.6em;margin-left:-6em;width:6em;height:6em}.cn-wrapper.big li{margin-top:-3.5em;margin-left:-10em;width:10em;height:10em}.cn-wrapper li a{right:-4em;bottom:-4em;width:8em;height:8em}.cn-wrapper.small li a{right:-3.4em;bottom:-3em;width:7.2em;height:6.2em}.cn-wrapper.big li a{right:-5em;bottom:-5em;width:10em;height:10em}.circular *,circular *{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;position:relative}.circular,circular{position:absolute;top:100%;left:50%}.cn-button{position:absolute;top:100%;left:50%;z-index:11;padding-top:0;border:none;border-radius:50%;background:0 0;background-color:#0a833d;color:#fff;text-align:center;font-weight:700;font-size:1.3em;text-transform:uppercase;cursor:pointer;-webkit-backface-visibility:hidden;outline:0}.cn-wrapper{position:absolute;top:100%;left:50%;z-index:10;border-radius:50%;background:0 0;opacity:0;-webkit-transition:all .3s ease .3s;-moz-transition:all .3s ease .3s;transition:all .3s ease .3s;-webkit-transform:scale(.1);-ms-transform:scale(.1);transform:scale(.1);pointer-events:none;overflow:hidden}.opened-nav{border-radius:50%;opacity:1;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);pointer-events:auto}.cn-wrapper li{position:absolute;top:50%;left:50%;overflow:hidden;font-size:1.3em;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;pointer-events:none}.cn-wrapper li a{position:absolute;display:block;border-radius:50%;background:#0a833d;opacity:.7;color:#fff;text-align:center;text-decoration:none;font-size:1.2em;line-height:2.5;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto;cursor:pointer}.cn-wrapper li a.is-active{opacity:1}.cn-wrapper li a:active,.cn-wrapper li a:focus,.cn-wrapper li a:hover{opacity:.9}.cn-wrapper li a.is-active:active,.cn-wrapper li a.is-active:focus,.cn-wrapper li a.is-active:hover{opacity:.9}.cn-wrapper li a span{position:relative;top:1.8em;display:block;font-size:.5em;font-weight:700;text-transform:uppercase}.opened-nav li{-webkit-transition:all .3s ease .3s;-moz-transition:all .3s ease .3s;transition:all .3s ease .3s}.item-odd-left-5,.opened-nav.items-11 li:first-child{-webkit-transform:rotate(-105deg) skew(60deg);-ms-transform:rotate(-105deg) skew(60deg);transform:rotate(-105deg) skew(60deg)}.item-odd-left-4,.opened-nav.items-11 li:nth-child(2),.opened-nav.items-9 li:first-child{-webkit-transform:rotate(-63deg) skew(60deg);-ms-transform:rotate(-63deg) skew(60deg);transform:rotate(-63deg) skew(60deg)}.item-odd-left-3,.opened-nav.items-11 li:nth-child(3),.opened-nav.items-7 li:first-child,.opened-nav.items-9 li:nth-child(2){-webkit-transform:rotate(-21deg) skew(60deg);-ms-transform:rotate(-21deg) skew(60deg);transform:rotate(-21deg) skew(60deg)}.item-odd-left-2,.opened-nav.items-11 li:nth-child(4),.opened-nav.items-5 li:first-child,.opened-nav.items-7 li:nth-child(2),.opened-nav.items-9 li:nth-child(3){-webkit-transform:rotate(11deg) skew(60deg);-ms-transform:rotate(11deg) skew(60deg);transform:rotate(11deg) skew(60deg)}.item-odd-left-1,.opened-nav.items-11 li:nth-child(5),.opened-nav.items-3 li:first-child,.opened-nav.items-5 li:nth-child(2),.opened-nav.items-7 li:nth-child(3),.opened-nav.items-9 li:nth-child(4){-webkit-transform:rotate(23deg) skew(60deg);-ms-transform:rotate(23deg) skew(60deg);transform:rotate(23deg) skew(60deg)}.cn-wrapper li,.item-odd-center,.opened-nav.items-1 li:first-child,.opened-nav.items-11 li:nth-child(6),.opened-nav.items-3 li:nth-child(2),.opened-nav.items-5 li:nth-child(3),.opened-nav.items-7 li:nth-child(4),.opened-nav.items-9 li:nth-child(5){-webkit-transform:rotate(75deg) skew(60deg);-ms-transform:rotate(75deg) skew(60deg);transform:rotate(75deg) skew(60deg)}.item-odd-right-1,.opened-nav.items-11 li:nth-child(7),.opened-nav.items-3 li:nth-child(3),.opened-nav.items-5 li:nth-child(4),.opened-nav.items-7 li:nth-child(5),.opened-nav.items-9 li:nth-child(6){-webkit-transform:rotate(127deg) skew(60deg);-ms-transform:rotate(127deg) skew(60deg);transform:rotate(127deg) skew(60deg)}.item-odd-right-2,.opened-nav.items-11 li:nth-child(8),.opened-nav.items-5 li:nth-child(5),.opened-nav.items-7 li:nth-child(6),.opened-nav.items-9 li:nth-child(7){-webkit-transform:rotate(139deg) skew(60deg);-ms-transform:rotate(139deg) skew(60deg);transform:rotate(139deg) skew(60deg)}.item-odd-right-3,.opened-nav.items-11 li:nth-child(9),.opened-nav.items-7 li:nth-child(7),.opened-nav.items-9 li:nth-child(8){-webkit-transform:rotate(171deg) skew(60deg);-ms-transform:rotate(171deg) skew(60deg);transform:rotate(171deg) skew(60deg)}.item-odd-right-4,.opened-nav.items-11 li:nth-child(10),.opened-nav.items-9 li:nth-child(9){-webkit-transform:rotate(213deg) skew(60deg);-ms-transform:rotate(213deg) skew(60deg);transform:rotate(213deg) skew(60deg)}.item-odd-right-5,.opened-nav.items-11 li:nth-child(11){-webkit-transform:rotate(235deg) skew(60deg);-ms-transform:rotate(235deg) skew(60deg);transform:rotate(235deg) skew(60deg)}.item-even-left-5,.opened-nav.items-10 li:first-child{-webkit-transform:rotate(-69deg) skew(60deg);-ms-transform:rotate(-69deg) skew(60deg);transform:rotate(-69deg) skew(60deg)}.item-even-left-4,.opened-nav.items-10 li:nth-child(2),.opened-nav.items-8 li:first-child{-webkit-transform:rotate(-37deg) skew(60deg);-ms-transform:rotate(-37deg) skew(60deg);transform:rotate(-37deg) skew(60deg)}.item-even-left-3,.opened-nav.items-10 li:nth-child(3),.opened-nav.items-6 li:first-child,.opened-nav.items-8 li:nth-child(2){-webkit-transform:rotate(-5deg) skew(60deg);-ms-transform:rotate(-5deg) skew(60deg);transform:rotate(-5deg) skew(60deg)}.item-even-left-2,.opened-nav.items-10 li:nth-child(4),.opened-nav.items-4 li:first-child,.opened-nav.items-6 li:nth-child(2),.opened-nav.items-8 li:nth-child(3){-webkit-transform:rotate(27deg) skew(60deg);-ms-transform:rotate(27deg) skew(60deg);transform:rotate(27deg) skew(60deg)}.item-even-left-1,.opened-nav.items-10 li:nth-child(5),.opened-nav.items-2 li:first-child,.opened-nav.items-4 li:nth-child(2),.opened-nav.items-6 li:nth-child(3),.opened-nav.items-8 li:nth-child(4){-webkit-transform:rotate(59deg) skew(60deg);-ms-transform:rotate(59deg) skew(60deg);transform:rotate(59deg) skew(60deg)}.item-even-right-1,.opened-nav.items-10 li:nth-child(6),.opened-nav.items-2 li:nth-child(2),.opened-nav.items-4 li:nth-child(3),.opened-nav.items-6 li:nth-child(4),.opened-nav.items-8 li:nth-child(5){-webkit-transform:rotate(91deg) skew(60deg);-ms-transform:rotate(91deg) skew(60deg);transform:rotate(91deg) skew(60deg)}.item-even-right-2,.opened-nav.items-10 li:nth-child(7),.opened-nav.items-4 li:nth-child(4),.opened-nav.items-6 li:nth-child(5),.opened-nav.items-8 li:nth-child(6){-webkit-transform:rotate(123deg) skew(60deg);-ms-transform:rotate(123deg) skew(60deg);transform:rotate(123deg) skew(60deg)}.item-even-right-3,.opened-nav.items-10 li:nth-child(8),.opened-nav.items-6 li:nth-child(6),.opened-nav.items-8 li:nth-child(7){-webkit-transform:rotate(155deg) skew(60deg);-ms-transform:rotate(155deg) skew(60deg);transform:rotate(155deg) skew(60deg)}.item-even-right-4,.opened-nav.items-10 li:nth-child(9),.opened-nav.items-8 li:nth-child(8){-webkit-transform:rotate(187deg) skew(60deg);-ms-transform:rotate(187deg) skew(60deg);transform:rotate(187deg) skew(60deg)}.item-even-right-5,.opened-nav.items-10 li:nth-child(10){-webkit-transform:rotate(219deg) skew(60deg);-ms-transform:rotate(219deg) skew(60deg);transform:rotate(219deg) skew(60deg)}.cn-wrapper li a{-webkit-transform:skew(-60deg) rotate(-75deg) scale(1);-ms-transform:skew(-60deg) rotate(-75deg) scale(1);transform:skew(-60deg) rotate(-75deg) scale(1)} diff --git a/www/css/custommfb.css b/www/css/custommfb.css deleted file mode 100644 index 58c3b049..00000000 --- a/www/css/custommfb.css +++ /dev/null @@ -1,670 +0,0 @@ -/** - * CONTENTS - * - * #Introduction........Naming conventions used throughout the code. - * - * #SETTINGS - * Variables............Globally-available variables and config. - * - * #TOOLS - * Mixins...............Useful mixins. - * - * #GENERIC - * Demo styles..........Styles for demo only (consider removing these). - * - * #BASE - * Raw styles...........The very basic component wrapper. - * Modifiers............The basic styles dependant on component placement. - * Debuggers............The basic styles dependant on component placement. - * - * #BUTTONS - * Base..................Wrapping and constraining every button. - * Modifiers.............Styles that depends on state and settings. - * Animations............Main animations of the component. - * Debuggers.............Styles for development. - * - * #LABELS - * Base..................Wrapping and constraining every label. - * Modifiers.............Styles that depends on state and settings. - * Debuggers.............Styles for development. - * - * #DEVELOPMENT - * In development........These styles are in development and not yet finalised - * Debuggers.............Helper styles and flags for development. - */ -/*------------------------------------*\ - #Introduction -\*------------------------------------*/ -/** - * The code AND the comments use naming conventions to refer to each part of - * the UI put in place by this component. If you see that somewhere they are - * not followed please consider a Pull Request. The naming conventions are: - * - * "Component" : the widget itself as a whole. This is the last time it will be - * called anything different than "component". So, stay away from - * "widget", "button" or anything else when referring to the - * Component in general. - * - * "Main Button" : the button that is always in view. Hovering or clicking on it - * will reveal the child buttons. - * - * "Child buttons" : if you've read the previous point you know what they are. - * Did you read the previous point? :) - * - * "Label(s)" : the tooltip that fades in when hovering over a button. - -/*------------------------------------*\ - #SETTINGS | Variables -\*------------------------------------*/ -/** - * These variables are the default styles that serve as fallback and can be - * easily customised at compile time. - * Consider overriding them in your own style sheets rather than editing them - * here. Refer to the docs for more info. - */ -/* COLORS ----------------------------*/ -/* EFFECTS ---------------------------*/ -/* SPEEDS ----------------------------*/ -/* SIZES -----------------------------*/ -/* SPACING ---------------------------*/ -/* OTHER VARIABLES -------------------*/ -/*------------------------------------*\ - #BASE | Raw styles -\*------------------------------------*/ -/** - * The very core styling of the button. - * These styles are shared by every instance of the button. - * Styles placed here should NOT care about placement in the screen, - * options chosen by the user or state of the button. - */ -.mfb-component--tl, .mfb-component--tr, .mfb-component--bl, .mfb-component--br { - box-sizing: border-box; - margin: 20px; - position: fixed; - white-space: nowrap; - z-index: 30; - padding-left: 0; - list-style: none; } - .mfb-component--tl *, .mfb-component--tr *, .mfb-component--bl *, .mfb-component--br *, .mfb-component--tl *:before, .mfb-component--tr *:before, .mfb-component--bl *:before, .mfb-component--br *:before, .mfb-component--tl *:after, .mfb-component--tr *:after, .mfb-component--bl *:after, .mfb-component--br *:after { - box-sizing: inherit; } - -/*------------------------------------*\ - #BASE | Modifiers -\*------------------------------------*/ -/** - * These styles depends on the placement of the button. - * Styles can be: - * 1. Top-left: modified by the " --tl " suffix. - * 2. Top-right: modified by the " --tr " suffix. - * 3. Bottom-left: modified by the " --bl " suffix. - * 4. Bottom-right: modified by the " --br " suffix. - */ -.mfb-component--tl { - left: 0; - top: 0; } - -.mfb-component--tr { - right: 0; - top: 0; } - -.mfb-component--bl { - left: 0; - bottom: 0; } - -.mfb-component--br { - right: 0; - bottom: 0; } - -/*------------------------------------*\ - #BUTTONS | Base -\*------------------------------------*/ -.mfb-component__button--main, .mfb-component__button--child { - background-color: #E40A5D; - display: inline-block; - position: relative; - border: none; - border-radius: 50%; - /* box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28); - PP */ - opacity: 0.8; - /* PP */ - cursor: pointer; - outline: none; - padding: 0; - position: relative; - -webkit-user-drag: none; - font-weight: bold; - color: #f1f1f1; } - -/** - * This is the unordered list for the list items that contain - * the child buttons. - * - */ -.mfb-component__list { - list-style: none; - margin: 0; - padding: 0; } - .mfb-component__list > li { - display: block; - position: absolute; - top: 0; - right: 1px; - padding: 10px 0; - margin: -10px 0; } - -/** - * These are the basic styles for all the icons inside the main button - */ -.mfb-component__icon, .mfb-component__main-icon--active, -.mfb-component__main-icon--resting, .mfb-component__child-icon { - position: absolute; - font-size: 18px; - text-align: center; - line-height: 45px; - width: 100%; } - -.mfb-component__wrap { - padding: 20px; - margin: -20px; } - -[data-mfb-toggle="hover"]:hover .mfb-component__icon, [data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active, -[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting, [data-mfb-toggle="hover"]:hover .mfb-component__child-icon, -[data-mfb-state="open"] .mfb-component__icon, -[data-mfb-state="open"] .mfb-component__main-icon--active, -[data-mfb-state="open"] .mfb-component__main-icon--resting, -[data-mfb-state="open"] .mfb-component__child-icon { - -webkit-transform: scale(1) rotate(0deg); - transform: scale(1) rotate(0deg); } - -/*------------------------------------*\ - #BUTTONS | Modifiers -\*------------------------------------*/ -.mfb-component__button--main { - height: 45px; - width: 45px; - z-index: 20; } - -.mfb-component__button--child { - height: 45px; - width: 45px; } - -.mfb-component__main-icon--active, -.mfb-component__main-icon--resting { - -webkit-transform: scale(1) rotate(360deg); - transform: scale(1) rotate(360deg); - -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 1, 1); - transition: transform 150ms cubic-bezier(0.4, 0, 1, 1); } - -.mfb-component__child-icon, -.mfb-component__child-icon { - line-height: 45px; - font-size: 14.46429px; } - -.mfb-component__main-icon--active { - opacity: 0; } - -[data-mfb-toggle="hover"]:hover .mfb-component__main-icon, -[data-mfb-state="open"] .mfb-component__main-icon { - -webkit-transform: scale(1) rotate(0deg); - transform: scale(1) rotate(0deg); } -[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting, -[data-mfb-state="open"] .mfb-component__main-icon--resting { - opacity: 0; - position: absolute !important; } -[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active, -[data-mfb-state="open"] .mfb-component__main-icon--active { - opacity: 1; } - -/*------------------------------------*\ - #BUTTONS | Animations -\*------------------------------------*/ -/** - * SLIDE IN + FADE - * When hovering the main button, the child buttons slide out from beneath - * the main button while transitioning from transparent to opaque. - * - */ -.mfb-component--tl.mfb-slidein .mfb-component__list li, -.mfb-component--tr.mfb-slidein .mfb-component__list li { - opacity: 0; - transition: all 0.5s; } -.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li, -.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, -.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li { - opacity: 1; } -.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(50px); - transform: translateY(50px); } -.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(100px); - transform: translateY(100px); } -.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(150px); - transform: translateY(150px); } -.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(200px); - transform: translateY(200px); } - -.mfb-component--bl.mfb-slidein .mfb-component__list li, -.mfb-component--br.mfb-slidein .mfb-component__list li { - opacity: 0; - transition: all 0.5s; } -.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li, -.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, -.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li { - opacity: 1; } -.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(-50px); - transform: translateY(-50px); } -.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(-100px); - transform: translateY(-100px); } -.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(-150px); - transform: translateY(-150px); } -.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(-200px); - transform: translateY(-200px); } - -/** - * SLIDE IN SPRING - * Same as slide-in but with a springy animation. - * - */ -.mfb-component--tl.mfb-slidein-spring .mfb-component__list li, -.mfb-component--tr.mfb-slidein-spring .mfb-component__list li { - opacity: 0; - transition: all 0.5s; - transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } -.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(1) { - transition-delay: 0.05s; } -.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(2) { - transition-delay: 0.1s; } -.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(3) { - transition-delay: 0.15s; } -.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(4) { - transition-delay: 0.2s; } -.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li, -.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, -.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li { - opacity: 1; } -.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - transition-delay: 0.05s; - -webkit-transform: translateY(50px); - transform: translateY(50px); } -.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - transition-delay: 0.1s; - -webkit-transform: translateY(100px); - transform: translateY(100px); } -.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - transition-delay: 0.15s; - -webkit-transform: translateY(150px); - transform: translateY(150px); } -.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - transition-delay: 0.2s; - -webkit-transform: translateY(200px); - transform: translateY(200px); } - -.mfb-component--bl.mfb-slidein-spring .mfb-component__list li, -.mfb-component--br.mfb-slidein-spring .mfb-component__list li { - opacity: 0; - transition: all 0.5s; - transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } -.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(1) { - transition-delay: 0.05s; } -.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(2) { - transition-delay: 0.1s; } -.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(3) { - transition-delay: 0.15s; } -.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(4) { - transition-delay: 0.2s; } -.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li, -.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, -.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li { - opacity: 1; } -.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - transition-delay: 0.05s; - -webkit-transform: translateY(-50px); - transform: translateY(-50px); } -.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - transition-delay: 0.1s; - -webkit-transform: translateY(-100px); - transform: translateY(-100px); } -.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - transition-delay: 0.15s; - -webkit-transform: translateY(-150px); - transform: translateY(-150px); } -.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - transition-delay: 0.2s; - -webkit-transform: translateY(-200px); - transform: translateY(-200px); } - -/** - * ZOOM-IN - * When hovering the main button, the child buttons grow - * from zero to normal size. - * - */ -.mfb-component--tl.mfb-zoomin .mfb-component__list li, -.mfb-component--tr.mfb-zoomin .mfb-component__list li { - -webkit-transform: scale(0); - transform: scale(0); } -.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(50px) scale(0); - transform: translateY(50px) scale(0); - transition: all 0.5s; - transition-delay: 0.15s; } -.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(100px) scale(0); - transform: translateY(100px) scale(0); - transition: all 0.5s; - transition-delay: 0.1s; } -.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(150px) scale(0); - transform: translateY(150px) scale(0); - transition: all 0.5s; - transition-delay: 0.05s; } -.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(200px) scale(0); - transform: translateY(200px) scale(0); - transition: all 0.5s; - transition-delay: 0s; } -.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(50px) scale(1); - transform: translateY(50px) scale(1); - transition-delay: 0.05s; } -.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(100px) scale(1); - transform: translateY(100px) scale(1); - transition-delay: 0.1s; } -.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(150px) scale(1); - transform: translateY(150px) scale(1); - transition-delay: 0.15s; } -.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(200px) scale(1); - transform: translateY(200px) scale(1); - transition-delay: 0.2s; } - -.mfb-component--bl.mfb-zoomin .mfb-component__list li, -.mfb-component--br.mfb-zoomin .mfb-component__list li { - -webkit-transform: scale(0); - transform: scale(0); } -.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(-50px) scale(0); - transform: translateY(-50px) scale(0); - transition: all 0.5s; - transition-delay: 0.15s; } -.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(-100px) scale(0); - transform: translateY(-100px) scale(0); - transition: all 0.5s; - transition-delay: 0.1s; } -.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(-150px) scale(0); - transform: translateY(-150px) scale(0); - transition: all 0.5s; - transition-delay: 0.05s; } -.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(-200px) scale(0); - transform: translateY(-200px) scale(0); - transition: all 0.5s; - transition-delay: 0s; } -.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(-50px) scale(1); - transform: translateY(-50px) scale(1); - transition-delay: 0.05s; } -.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(-100px) scale(1); - transform: translateY(-100px) scale(1); - transition-delay: 0.1s; } -.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(-150px) scale(1); - transform: translateY(-150px) scale(1); - transition-delay: 0.15s; } -.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(-200px) scale(1); - transform: translateY(-200px) scale(1); - transition-delay: 0.2s; } - -/** - * FOUNTAIN - * When hovering the main button the child buttons - * jump into view from outside the viewport - */ -.mfb-component--tl.mfb-fountain .mfb-component__list li, -.mfb-component--tr.mfb-fountain .mfb-component__list li { - -webkit-transform: scale(0); - transform: scale(0); } -.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(-50px) scale(0); - transform: translateY(-50px) scale(0); - transition: all 0.5s; - transition-delay: 0.15s; } -.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(-100px) scale(0); - transform: translateY(-100px) scale(0); - transition: all 0.5s; - transition-delay: 0.1s; } -.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(-150px) scale(0); - transform: translateY(-150px) scale(0); - transition: all 0.5s; - transition-delay: 0.05s; } -.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(-200px) scale(0); - transform: translateY(-200px) scale(0); - transition: all 0.5s; - transition-delay: 0s; } -.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(50px) scale(1); - transform: translateY(50px) scale(1); - transition-delay: 0.05s; } -.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(100px) scale(1); - transform: translateY(100px) scale(1); - transition-delay: 0.1s; } -.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(150px) scale(1); - transform: translateY(150px) scale(1); - transition-delay: 0.15s; } -.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(200px) scale(1); - transform: translateY(200px) scale(1); - transition-delay: 0.2s; } - -.mfb-component--bl.mfb-fountain .mfb-component__list li, -.mfb-component--br.mfb-fountain .mfb-component__list li { - -webkit-transform: scale(0); - transform: scale(0); } -.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(50px) scale(0); - transform: translateY(50px) scale(0); - transition: all 0.5s; - transition-delay: 0.15s; } -.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(100px) scale(0); - transform: translateY(100px) scale(0); - transition: all 0.5s; - transition-delay: 0.1s; } -.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(150px) scale(0); - transform: translateY(150px) scale(0); - transition: all 0.5s; - transition-delay: 0.05s; } -.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(200px) scale(0); - transform: translateY(200px) scale(0); - transition: all 0.5s; - transition-delay: 0s; } -.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(-50px) scale(1); - transform: translateY(-50px) scale(1); - transition-delay: 0.05s; } -.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(-100px) scale(1); - transform: translateY(-100px) scale(1); - transition-delay: 0.1s; } -.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(-150px) scale(1); - transform: translateY(-150px) scale(1); - transition-delay: 0.15s; } -.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(-200px) scale(1); - transform: translateY(-200px) scale(1); - transition-delay: 0.2s; } - -/*------------------------------------*\ - #LABELS | base -\*------------------------------------*/ -/** - * These are the labels associated to each button, - * exposed only when hovering the related button. - * They are called labels but are in fact data-attributes of - * each button (an anchor tag). - */ -[data-mfb-label]:after { - content: attr(data-mfb-label); - opacity: 0; - transition: all 0.5s; - background: rgba(0, 0, 0, 0.4); - padding: 4px 10px; - border-radius: 3px; - color: rgba(255, 255, 255, 0.8); - font-size: 12px; - pointer-events: none; - position: absolute; - top: 50%; - margin-top: -10px; - transition: all 0.5s; } - -[data-mfb-toggle="hover"] [data-mfb-label]:hover:after, -[data-mfb-state="open"] [data-mfb-label]:after { - content: attr(data-mfb-label); - opacity: 1; - transition: all 0.3s; } - -/*------------------------------------*\ - #LABELS | Modifiers -\*------------------------------------*/ -.mfb-component--br [data-mfb-label]:after, .mfb-component--tr [data-mfb-label]:after { - content: attr(data-mfb-label); - right: 50px; } - -.mfb-component--br .mfb-component__list [data-mfb-label]:after, .mfb-component--tr .mfb-component__list [data-mfb-label]:after { - content: attr(data-mfb-label); - right: 50px; } - -.mfb-component--tl [data-mfb-label]:after, .mfb-component--bl [data-mfb-label]:after { - content: attr(data-mfb-label); - left: 50px; } - -.mfb-component--tl .mfb-component__list [data-mfb-label]:after, .mfb-component--bl .mfb-component__list [data-mfb-label]:after { - content: attr(data-mfb-label); - left: 50px; } - -/*------------------------------------*\ - #DEVELOPMENT | In development -\*------------------------------------*/ -/** - * This part is where unfinished code should stay. - * When a feature is ready(sh) move these styles to their proper place. - */ -/*------------------------------------*\ - #DEVELOPMENT | Debuggers -\*------------------------------------*/ -/** - * These are mainly helpers for development. They do not have to end up - * in production but it's handy to keep them when developing. - */ -/** - * Apply this class to the html tag when developing the slide-in button - */ diff --git a/www/css/custommfb.min.css b/www/css/custommfb.min.css new file mode 100644 index 00000000..cb67dac6 --- /dev/null +++ b/www/css/custommfb.min.css @@ -0,0 +1 @@ +.mfb-component--bl,.mfb-component--br,.mfb-component--tl,.mfb-component--tr{box-sizing:border-box;margin:20px;position:fixed;white-space:nowrap;z-index:30;padding-left:0;list-style:none}.mfb-component--bl *,.mfb-component--bl :after,.mfb-component--bl :before,.mfb-component--br *,.mfb-component--br :after,.mfb-component--br :before,.mfb-component--tl *,.mfb-component--tl :after,.mfb-component--tl :before,.mfb-component--tr *,.mfb-component--tr :after,.mfb-component--tr :before{box-sizing:inherit}.mfb-component--tl{left:0;top:0}.mfb-component--tr{right:0;top:0}.mfb-component--bl{left:0;bottom:0}.mfb-component--br{right:0;bottom:0}.mfb-component__button--child,.mfb-component__button--main{background-color:#e40a5d;display:inline-block;position:relative;border:none;border-radius:50%;opacity:.8;cursor:pointer;outline:0;padding:0;position:relative;-webkit-user-drag:none;font-weight:700;color:#f1f1f1}.mfb-component__list{list-style:none;margin:0;padding:0}.mfb-component__list>li{display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0}.mfb-component__child-icon,.mfb-component__icon,.mfb-component__main-icon--active,.mfb-component__main-icon--resting{position:absolute;font-size:18px;text-align:center;line-height:45px;width:100%}.mfb-component__wrap{padding:20px;margin:-20px}[data-mfb-state=open] .mfb-component__child-icon,[data-mfb-state=open] .mfb-component__icon,[data-mfb-state=open] .mfb-component__main-icon--active,[data-mfb-state=open] .mfb-component__main-icon--resting,[data-mfb-toggle=hover]:hover .mfb-component__child-icon,[data-mfb-toggle=hover]:hover .mfb-component__icon,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--active,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--resting{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}.mfb-component__button--main{height:45px;width:45px;z-index:20}.mfb-component__button--child{height:45px;width:45px}.mfb-component__main-icon--active,.mfb-component__main-icon--resting{-webkit-transform:scale(1) rotate(360deg);transform:scale(1) rotate(360deg);-webkit-transition:-webkit-transform 150ms cubic-bezier(.4,0,1,1);transition:transform 150ms cubic-bezier(.4,0,1,1)}.mfb-component__child-icon{line-height:45px;font-size:14.46429px}.mfb-component__main-icon--active{opacity:0}[data-mfb-state=open] .mfb-component__main-icon,[data-mfb-toggle=hover]:hover .mfb-component__main-icon{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}[data-mfb-state=open] .mfb-component__main-icon--resting,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--resting{opacity:0;position:absolute!important}[data-mfb-state=open] .mfb-component__main-icon--active,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--active{opacity:1}.mfb-component--tl.mfb-slidein .mfb-component__list li,.mfb-component--tr.mfb-slidein .mfb-component__list li{opacity:0;transition:all .5s}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px);transform:translateY(50px)}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px);transform:translateY(100px)}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px);transform:translateY(150px)}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px);transform:translateY(200px)}.mfb-component--bl.mfb-slidein .mfb-component__list li,.mfb-component--br.mfb-slidein .mfb-component__list li{opacity:0;transition:all .5s}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px);transform:translateY(-50px)}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px);transform:translateY(-100px)}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px);transform:translateY(-150px)}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px);transform:translateY(-200px)}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring .mfb-component__list li{opacity:0;transition:all .5s;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(1){transition-delay:50ms}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(2){transition-delay:.1s}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(3){transition-delay:.15s}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(4){transition-delay:.2s}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){transition-delay:50ms;-webkit-transform:translateY(50px);transform:translateY(50px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){transition-delay:.1s;-webkit-transform:translateY(100px);transform:translateY(100px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){transition-delay:.15s;-webkit-transform:translateY(150px);transform:translateY(150px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){transition-delay:.2s;-webkit-transform:translateY(200px);transform:translateY(200px)}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li,.mfb-component--br.mfb-slidein-spring .mfb-component__list li{opacity:0;transition:all .5s;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(1){transition-delay:50ms}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(2){transition-delay:.1s}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(3){transition-delay:.15s}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(4){transition-delay:.2s}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){transition-delay:50ms;-webkit-transform:translateY(-50px);transform:translateY(-50px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){transition-delay:.1s;-webkit-transform:translateY(-100px);transform:translateY(-100px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){transition-delay:.15s;-webkit-transform:translateY(-150px);transform:translateY(-150px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){transition-delay:.2s;-webkit-transform:translateY(-200px);transform:translateY(-200px)}.mfb-component--tl.mfb-zoomin .mfb-component__list li,.mfb-component--tr.mfb-zoomin .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(0);transform:translateY(50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(0);transform:translateY(100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(0);transform:translateY(150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(0);transform:translateY(200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(1);transform:translateY(50px) scale(1);transition-delay:50ms}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(1);transform:translateY(100px) scale(1);transition-delay:.1s}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(1);transform:translateY(150px) scale(1);transition-delay:.15s}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(1);transform:translateY(200px) scale(1);transition-delay:.2s}.mfb-component--bl.mfb-zoomin .mfb-component__list li,.mfb-component--br.mfb-zoomin .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(0);transform:translateY(-50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(0);transform:translateY(-100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(0);transform:translateY(-150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(0);transform:translateY(-200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(1);transform:translateY(-50px) scale(1);transition-delay:50ms}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(1);transform:translateY(-100px) scale(1);transition-delay:.1s}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(1);transform:translateY(-150px) scale(1);transition-delay:.15s}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(1);transform:translateY(-200px) scale(1);transition-delay:.2s}.mfb-component--tl.mfb-fountain .mfb-component__list li,.mfb-component--tr.mfb-fountain .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(0);transform:translateY(-50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(0);transform:translateY(-100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(0);transform:translateY(-150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(0);transform:translateY(-200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(1);transform:translateY(50px) scale(1);transition-delay:50ms}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(1);transform:translateY(100px) scale(1);transition-delay:.1s}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(1);transform:translateY(150px) scale(1);transition-delay:.15s}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(1);transform:translateY(200px) scale(1);transition-delay:.2s}.mfb-component--bl.mfb-fountain .mfb-component__list li,.mfb-component--br.mfb-fountain .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(0);transform:translateY(50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(0);transform:translateY(100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(0);transform:translateY(150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(0);transform:translateY(200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(1);transform:translateY(-50px) scale(1);transition-delay:50ms}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(1);transform:translateY(-100px) scale(1);transition-delay:.1s}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(1);transform:translateY(-150px) scale(1);transition-delay:.15s}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(1);transform:translateY(-200px) scale(1);transition-delay:.2s}[data-mfb-label]:after{content:attr(data-mfb-label);opacity:0;transition:all .5s;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:3px;color:rgba(255,255,255,.8);font-size:12px;pointer-events:none;position:absolute;top:50%;margin-top:-10px;transition:all .5s}[data-mfb-state=open] [data-mfb-label]:after,[data-mfb-toggle=hover] [data-mfb-label]:hover:after{content:attr(data-mfb-label);opacity:1;transition:all .3s}.mfb-component--br [data-mfb-label]:after,.mfb-component--tr [data-mfb-label]:after{content:attr(data-mfb-label);right:50px}.mfb-component--br .mfb-component__list [data-mfb-label]:after,.mfb-component--tr .mfb-component__list [data-mfb-label]:after{content:attr(data-mfb-label);right:50px}.mfb-component--bl [data-mfb-label]:after,.mfb-component--tl [data-mfb-label]:after{content:attr(data-mfb-label);left:50px}.mfb-component--bl .mfb-component__list [data-mfb-label]:after,.mfb-component--tl .mfb-component__list [data-mfb-label]:after{content:attr(data-mfb-label);left:50px} diff --git a/www/css/custommfb.scss b/www/css/custommfb.scss deleted file mode 100644 index 20dbeb58..00000000 --- a/www/css/custommfb.scss +++ /dev/null @@ -1,404 +0,0 @@ -/** - * CONTENTS - * - * #Introduction........Naming conventions used throughout the code. - * - * #SETTINGS - * Variables............Globally-available variables and config. - * - * #TOOLS - * Mixins...............Useful mixins. - * - * #GENERIC - * Demo styles..........Styles for demo only (consider removing these). - * - * #BASE - * Raw styles...........The very basic component wrapper. - * Modifiers............The basic styles dependant on component placement. - * Debuggers............The basic styles dependant on component placement. - * - * #BUTTONS - * Base..................Wrapping and constraining every button. - * Modifiers.............Styles that depends on state and settings. - * Animations............Main animations of the component. - * Debuggers.............Styles for development. - * - * #LABELS - * Base..................Wrapping and constraining every label. - * Modifiers.............Styles that depends on state and settings. - * Debuggers.............Styles for development. - * - * #DEVELOPMENT - * In development........These styles are in development and not yet finalised - * Debuggers.............Helper styles and flags for development. - */ - -/*------------------------------------*\ - #Introduction -\*------------------------------------*/ -/** - * The code AND the comments use naming conventions to refer to each part of - * the UI put in place by this component. If you see that somewhere they are - * not followed please consider a Pull Request. The naming conventions are: - * - * "Component" : the widget itself as a whole. This is the last time it will be - * called anything different than "component". So, stay away from - * "widget", "button" or anything else when referring to the - * Component in general. - * - * "Main Button" : the button that is always in view. Hovering or clicking on it - * will reveal the child buttons. - * - * "Child buttons" : if you've read the previous point you know what they are. - * Did you read the previous point? :) - * - * "Label(s)" : the tooltip that fades in when hovering over a button. - -/*------------------------------------*\ - #SETTINGS | Variables -\*------------------------------------*/ - -/** - * These variables are the default styles that serve as fallback and can be - * easily customised at compile time. - * Consider overriding them in your own style sheets rather than editing them - * here. Refer to the docs for more info. - */ - -/* COLORS ----------------------------*/ - -// the main/primary color -$main-color: #E40A5D !default; -// aka the white text -$bright-text: rgba(255, 255, 255, 0.8) !default; - -/* EFFECTS ---------------------------*/ - -// which effects must be made available in the css -$effects-zoomin: true !default; -$effects-slidein: true !default; -$effects-fountain: true !default; - -/* SPEEDS ----------------------------*/ - -// the speed of the inflation of each button after hovering on the main button -$delay-staggering-inflate: 0.1s !default; -// when hovering on the main button the child buttons slide into view -$slide-speed: .5s !default; -// the labels disappear at this speed on mouse out -$label-hover-off: .5s !default; -// the labels appear at this speed on mouse over -$label-hover-on: .3s !default; - -/* SIZES -----------------------------*/ - -// main button diameter -$main_button_size: 45px !default; -// main button diameter -$child_button_size: 45px !default; -// the distance of the main button from the closest corners of the screen -$border-distance: 20px !default; -// font-size for labels -$labels-font-size: 12px !default; -// top & bottom padding for the labels -$labels-padding-vertical: 4px !default; -// left & right padding for the labels -$labels-padding-horizontal: 10px !default; - -/* SPACING ---------------------------*/ - -// space between buttons -$button-space: 50px !default; - -// space between button and label -$button-label-space: 50px !default; - -/* OTHER VARIABLES -------------------*/ - -// how many child buttons does the component have -$number-of-child-buttons: 4 !default; - -/*------------------------------------*\ - #BASE | Raw styles -\*------------------------------------*/ - -/** - * The very core styling of the button. - * These styles are shared by every instance of the button. - * Styles placed here should NOT care about placement in the screen, - * options chosen by the user or state of the button. - */ - -%mfb-component{ - box-sizing: border-box; // A better box-sizing - margin: $border-distance; - position: fixed; - white-space: nowrap; - z-index: 30; - // this padding is really needed only if the element is an