diff options
27 files changed, 87 insertions, 992 deletions
@@ -172,9 +172,6 @@ <plugin name="cordova-plugin-photo-library" spec="https://github.com/terikon/cordova-plugin-photo-library.git"> <variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="save event images from ZM" /> </plugin> - <plugin name="cordova-plugin-ionic-webview" spec="https://github.com/pliablepixels/cordova-plugin-ionic-webview.git"> - <variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" /> - </plugin> <plugin name="cordova-plugin-media-pp-fork" spec="^1.0.2-dev" /> <engine name="android" spec="7.1.4" /> <engine name="ios" spec="4.5.5" /> diff --git a/www/css/angular-carousel.css b/etc/css/angular-carousel.css index a11d8523..a11d8523 100755 --- a/www/css/angular-carousel.css +++ b/etc/css/angular-carousel.css diff --git a/www/css/angular-circular-navigation.css b/etc/css/angular-circular-navigation.css index b2143741..b2143741 100644 --- a/www/css/angular-circular-navigation.css +++ b/etc/css/angular-circular-navigation.css diff --git a/www/css/custommfb.scss b/etc/css/custommfb.scss index 20dbeb58..20dbeb58 100644 --- a/www/css/custommfb.scss +++ b/etc/css/custommfb.scss diff --git a/www/css/ionic.app.css b/etc/css/ionic.app.css index c3bf964b..c3bf964b 100644 --- a/www/css/ionic.app.css +++ b/etc/css/ionic.app.css diff --git a/package.json b/package.json index 0cb7c05b..3f2d8036 100644 --- a/package.json +++ b/package.json @@ -56,9 +56,6 @@ "cordova-plugin-photo-library": { "PHOTO_LIBRARY_USAGE_DESCRIPTION": "save event images from ZM" }, - "cordova-plugin-ionic-webview": { - "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+" - }, "cordova-plugin-media-pp-fork": {} } }, @@ -84,7 +81,6 @@ "cordova-plugin-inappbrowser": "^1.7.2", "cordova-plugin-insomnia": "^4.3.0", "cordova-plugin-ionic-keyboard": "^2.1.3", - "cordova-plugin-ionic-webview": "git+https://github.com/pliablepixels/cordova-plugin-ionic-webview.git", "cordova-plugin-media-pp-fork": "^1.0.2-dev", "cordova-plugin-multi-window": "0.0.3", "cordova-plugin-network-information": "^2.0.1", diff --git a/tests/chromedriver/README.TXT b/tests/chromedriver/README.TXT index 1c78b3b2..b036365f 100644 --- a/tests/chromedriver/README.TXT +++ b/tests/chromedriver/README.TXT @@ -1,2 +1,2 @@ Download the chrome driver version corresponding to the chrome browser version you are testing with -from http://chromedriver.chromium.org/downloads and save it here as 'chromedriver' +from http://appium.io/docs/en/writing-running-appium/web/chromedriver/ diff --git a/tests/startappium.sh b/tests/startappium.sh index b7d106f6..992b0486 100755 --- a/tests/startappium.sh +++ b/tests/startappium.sh @@ -1,2 +1,4 @@ #!/bin/bash -appium --chromedriver-executable ./chromedriver/chromedriver55 +appium --chromedriver-executable ./chromedriver/chromedriver234 +#appium --chromedriver-executable ./chromedriver/chromedriver55 +#appium --chromedriver-executable ./chromedriver/chromedriver220 diff --git a/tests/testcases/common.py b/tests/testcases/common.py index 7216f7ad..05587f2d 100644 --- a/tests/testcases/common.py +++ b/tests/testcases/common.py @@ -18,6 +18,7 @@ from selenium.webdriver.support import expected_conditions as EC # global pointer to chrome driver driver = None platform = None +avd = 'zmNinja_8_0' native_context = None web_context = None @@ -74,9 +75,12 @@ def _click_with_retry(element, max_retry=3): # makes sure we can see the element to avoid out of view issues def _goto_element(e): driver.execute_script("arguments[0].scrollIntoView();", e) + #driver.execute_script("mobile:scroll", {"direction": 'up', 'element': e}) # waits for an element to load # allows you to also specify if you want a screenshot after it comes in + + def _wait_for_id(id=id, dur=30, save_screenshot=False, save_screenshot_file=None): log('Waiting for '+id+'...') WebDriverWait(driver, dur).until( @@ -86,6 +90,8 @@ def _wait_for_id(id=id, dur=30, save_screenshot=False, save_screenshot_file=None if save_screenshot: take_screenshot(id, save_screenshot_file) + + # element properties def get_element_attributes(id=id, save_screenshot=False, save_screenshot_file=None): _wait_for_id(id=id, save_screenshot=save_screenshot, diff --git a/tests/testcases/copy_binary.sh b/tests/testcases/copy_binary.sh index a02e8118..4719ea6b 100755 --- a/tests/testcases/copy_binary.sh +++ b/tests/testcases/copy_binary.sh @@ -1,4 +1,5 @@ #!/bin/bash rm -rf binary/* -cp ../../debug_files/app-debug.apk binary/zmNinja.apk +#cp ../../debug_files/app-debug.apk binary/zmNinja.apk +cp ../../release_files/zmNinja.apk binary/zmNinja.apk cp -R ~/Library/Developer/Xcode/DerivedData/zmNinja-dgoooijqwytvduflzaereulftmpl/Build/Products/Debug-iphonesimulator/zmNinja.app binary/ diff --git a/tests/testcases/logs.py b/tests/testcases/logs.py new file mode 100644 index 00000000..a24abb8c --- /dev/null +++ b/tests/testcases/logs.py @@ -0,0 +1,15 @@ +''' +Validates Logs View +''' + +import common as c +from time import sleep +import app + +def run_tests(self): + app.tap_menu_js() + c.log ('Validating logs') + c.click_item('testaut_menu_logs') + sleep(2) + c.take_screenshot(None, 'logs-app-ver.png') + diff --git a/tests/testcases/test.py b/tests/testcases/test.py index 5c54f40c..c9ee5d35 100644 --- a/tests/testcases/test.py +++ b/tests/testcases/test.py @@ -19,6 +19,7 @@ import app import montage import state import events +import logs class ZmninjaAndroidTests(unittest.TestCase): @@ -33,10 +34,10 @@ class ZmninjaAndroidTests(unittest.TestCase): desired_caps = { 'platformName': 'Android', 'automationName': 'UiAutomator2', - 'platformVersion': '7.1.1', + 'platformVersion': '8.0', 'deviceName': 'DoesntMatter', - 'avd': 'zmNinja_7_1_1', - # 'avd': 'zmNinja_6_0', + 'avd': c.avd, + # 'avd': 'zmNinja_6_0', 'nativeWebTap': True, 'nativeWebScreenshot': True, # important, for screenshots 'autoAcceptAlerts': True, @@ -135,7 +136,7 @@ class ZmninjaAndroidTests(unittest.TestCase): c.testConfig = config - run_dir = strftime(c.platform+'-%b-%d-%I_%M_%S%p', localtime()) + run_dir = strftime(c.avd+'_'+c.platform+'-%b-%d-%I_%M_%S%p', localtime()) c.testConfig['screenshot_dir'] = './screenshots/'+run_dir try: os.makedirs(c.testConfig['screenshot_dir']) @@ -153,8 +154,9 @@ class ZmninjaAndroidTests(unittest.TestCase): sleep(5) wizard.run_tests(self, isFirstRun) isFirstRun = False - montage.run_tests(self) - events.run_tests(self) + #montage.run_tests(self) + #events.run_tests(self) + logs.run_tests(self) if c.testConfig['restart']: state.run_tests(self) @@ -166,6 +168,7 @@ platform = None ap = argparse.ArgumentParser() ap.add_argument('-i', '--ios', action='store_true') ap.add_argument('-a', '--android', action='store_true') +ap.add_argument('--avd') args, u = ap.parse_known_args() args = vars(args) @@ -174,6 +177,9 @@ if args['ios']: else: c.platform = 'android' +if args['avd']: + c.avd = args['avd'] + suite = unittest.TestLoader().loadTestsFromTestCase(ZmninjaAndroidTests) diff --git a/tests/testcases/timeline.py b/tests/testcases/timeline.py new file mode 100644 index 00000000..59d94bb2 --- /dev/null +++ b/tests/testcases/timeline.py @@ -0,0 +1,15 @@ +''' +Validates Timeline View +''' + +import common as c +from time import sleep +import app + +def run_tests(self): + app.tap_menu_js() + c.log ('Validating timeline') + _wait_for_id('timeline-ctrl') + c.take_screenshot(None, 'view-after-timeline-draw.png') + + 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.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.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/index.html b/www/index.html index a81760d1..d7f0e9bf 100644 --- a/www/index.html +++ b/www/index.html @@ -19,9 +19,9 @@ <!-- style sheets--> <link rel="stylesheet" href="css/animate.min.css"> - <link rel="stylesheet" href="css/angular-circular-navigation.css"> - <link rel="stylesheet" href="css/custommfb.css"> - <link rel="stylesheet" href="css/angular-carousel.css"> + <link rel="stylesheet" href="css/angular-circular-navigation.min.css"> + <link rel="stylesheet" href="css/custommfb.min.css"> + <link rel="stylesheet" href="css/angular-carousel.min.css"> <link href="css/ionic.app.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index a7ba3128..15ae11df 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -67,6 +67,9 @@ angular.module('zmApp.controllers') var eventsListScrubHeight = eventsListScrubHeight; var eventsListDetailsHeight = eventsListDetailsHeight; + var eHandle; + var scrubOngoing = false; + //--------------------------------------------------- // initial code @@ -149,6 +152,9 @@ angular.module('zmApp.controllers') else if ($scope.modal != undefined && $scope.modal.isShown()) { NVR.debug ("Not reloading as you have a modal open"); } + else if (scrubOngoing) { + NVR.debug ("Not reloading, as video scrub is on"); + } else { doRefresh(); } @@ -825,11 +831,18 @@ angular.module('zmApp.controllers') $scope.readyToPlay = function (api) { - api.mediaElement.attr("playsinline", ""); + eHandle = api; + eHandle.mediaElement.attr("playsinline", ""); }; + $scope.eventCanPlay = function() { + NVR.debug("This video can be played"); + eHandle.play(); + + }; + $scope.downloadFileToDevice = function (path, eid) { @@ -2109,6 +2122,11 @@ angular.module('zmApp.controllers') scrollbynumber = 0; } + if (scrubOngoing) { + NVR.debug ("making sure scrub is off"); + scrubOngoing = false; + } + if (oldEvent && event != oldEvent) { NVR.debug("EventCtrl:Old event scrub will hide now"); @@ -2207,6 +2225,7 @@ angular.module('zmApp.controllers') { NVR.debug("EventCtrl: Scrubbing will turn on now"); + scrubOngoing = true; $scope.currentEvent = ""; $scope.event = event; //$ionicScrollDelegate.freezeScroll(true); @@ -2313,7 +2332,7 @@ angular.module('zmApp.controllers') ], - theme: "lib/videogular-themes-default/videogular.css", + theme: "external/videogular2.2.1/videogular.min.css", }; diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js index c025cd3d..f22f6dc0 100644 --- a/www/js/EventModalCtrl.js +++ b/www/js/EventModalCtrl.js @@ -208,28 +208,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro }); - $timeout(function () { - // NVR.debug("Player is ready, invoking play"); - // handle.play() - - /* - .then (function (succ) { - NVR.debug ("Pause completed, doing a play"); - handle.play(); - }) - .catch (function (err) { - NVR.log ('Error invoking promised pause ' + JSON.stringify(err), 'error'); - })*/ - - /*playerPromise - .then (function (succ) {NVR.debug ("video should be playing");}) - .catch ( function (err) { - NVR.log ('Error trying to play: '+JSON.stringify(err), 'error'); - });*/ - - }, 300); - - // window.stop(); + }; $scope.onPlaybackUpdate = function (rate) { diff --git a/www/js/app.js b/www/js/app.js index af63f450..7c03fbdd 100755 --- a/www/js/app.js +++ b/www/js/app.js @@ -701,8 +701,9 @@ angular.module('zmApp', [ if (response.data && typeof(response.data) == 'string' && response.data.startsWith("<pre class=\"cake-error\">")) { console.log ("cake error detected, attempting fix..."); + //console.log ("BAD = "+ JSON.stringify(response.data)); response.data = JSON.parse(response.data.replace(/<pre class=\"cake-error\">[\s\S]*<\/pre>/,'')); - //console.log ("FIXED="+response.data); + // console.log ("FIXED="+JSON.stringify(response.data)); } //"data":"<pre class=\"cake-error\"> return response; diff --git a/www/templates/events.html b/www/templates/events.html index 394dfa14..62249598 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -198,7 +198,7 @@ <br /> <div class="videogular-container"> <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'" - vg-responsive="true" vg-player-ready="readyToPlay($API)"> + vg-responsive="true" vg-can-play="eventCanPlay()" vg-player-ready="readyToPlay($API)"> <vg-overlay-play></vg-overlay-play> <vg-controls> <vg-play-pause-button></vg-play-pause-button> diff --git a/www/templates/menu.html b/www/templates/menu.html index 25df3422..9c780310 100644 --- a/www/templates/menu.html +++ b/www/templates/menu.html @@ -35,7 +35,7 @@ <!--<ion-item ng-click="navigateView('app.timeline')" menu-close>--> - <ion-item id="menu-move-2" href="#/app/timeline" ng-click="go('/app/timeline')"> + <ion-item id="testaut_menu_timeline" href="#/app/timeline" ng-click="go('/app/timeline')"> <span class=" item-icon-left"> <i class="icon ion-android-time"></i> </span>{{'kMenuTimeline'|translate}} @@ -136,7 +136,7 @@ </div> <!--<ion-item nav-clear menu-close ng-click="navigateView('app.log')" >--> - <ion-item id="menu-move-12" nav-clear href="#/app/log" ng-click="go('/app/log')"> + <ion-item id="testaut_menu_logs" nav-clear href="#/app/log" ng-click="go('/app/log')"> <span class=" item-icon-left"> <i class="icon ion-clipboard"></i> </span> {{'kMenuLogs'|translate}} |