-
-
Save KRTerrafix/44e5584e874045f1927ccda7ef67cd25 to your computer and use it in GitHub Desktop.
Broken Data Bindings
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Framework7 4.0.1 | |
| * Full featured mobile HTML framework for building iOS & Android apps | |
| * http://framework7.io/ | |
| * | |
| * Copyright 2014-2019 Vladimir Kharlampidi | |
| * | |
| * Released under the MIT License | |
| * | |
| * Released on: February 8, 2019 | |
| */ | |
| /*==================== | |
| Core | |
| ==================== */ | |
| :root { | |
| --f7-theme-color: #007aff; | |
| --f7-theme-color-rgb: 0, 122, 255; | |
| --f7-theme-color-shade: #0066d6; | |
| --f7-theme-color-tint: #298fff; | |
| --f7-safe-area-left: 0px; | |
| --f7-safe-area-right: 0px; | |
| --f7-safe-area-top: 0px; | |
| --f7-safe-area-bottom: 0px; | |
| --f7-safe-area-outer-left: 0px; | |
| --f7-safe-area-outer-right: 0px; | |
| --f7-device-pixel-ratio: 1; | |
| } | |
| @supports (left: env(safe-area-inset-left)) { | |
| :root { | |
| --f7-safe-area-top: env(safe-area-inset-top); | |
| --f7-safe-area-bottom: env(safe-area-inset-bottom); | |
| } | |
| :root .ios-left-edge, | |
| :root .ios-edges, | |
| :root .safe-area-left, | |
| :root .safe-areas, | |
| :root .popup, | |
| :root .sheet-modal, | |
| :root .panel-left { | |
| --f7-safe-area-left: env(safe-area-inset-left); | |
| --f7-safe-area-outer-left: env(safe-area-inset-left); | |
| } | |
| :root .ios-right-edge, | |
| :root .ios-edges, | |
| :root .safe-area-right, | |
| :root .safe-areas, | |
| :root .popup, | |
| :root .sheet-modal, | |
| :root .panel-right { | |
| --f7-safe-area-right: env(safe-area-inset-right); | |
| --f7-safe-area-outer-right: env(safe-area-inset-right); | |
| } | |
| :root .no-safe-areas, | |
| :root .no-safe-area-left, | |
| :root .no-ios-edges, | |
| :root .no-ios-left-edge { | |
| --f7-safe-area-left: 0px; | |
| --f7-safe-area-outer-left: 0px; | |
| } | |
| :root .no-safe-areas, | |
| :root .no-safe-area-right, | |
| :root .no-ios-edges, | |
| :root .no-ios-right-edge { | |
| --f7-safe-area-right: 0px; | |
| --f7-safe-area-outer-right: 0px; | |
| } | |
| } | |
| @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { | |
| :root { | |
| --f7-device-pixel-ratio: 2; | |
| } | |
| } | |
| @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { | |
| :root { | |
| --f7-device-pixel-ratio: 3; | |
| } | |
| } | |
| /*==================== | |
| Fonts | |
| ==================== */ | |
| .ios { | |
| --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif; | |
| --f7-text-color: #000; | |
| --f7-font-size: 14px; | |
| --f7-line-height: 1.4; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-text-color: #fff; | |
| } | |
| .md { | |
| --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif; | |
| --f7-text-color: #212121; | |
| --f7-font-size: 14px; | |
| --f7-line-height: 1.5; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-text-color: rgba(255, 255, 255, 0.87); | |
| } | |
| /*==================== | |
| Bars | |
| ==================== */ | |
| :root { | |
| /* | |
| --f7-bars-link-color: var(--f7-theme-color); | |
| */ | |
| --f7-bars-bg-image: none; | |
| --f7-bars-bg-color: #f7f7f8; | |
| --f7-bars-bg-color-rgb: 247, 247, 248; | |
| --f7-bars-text-color: #000; | |
| --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%); | |
| --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%); | |
| } | |
| .theme-dark { | |
| --f7-bars-bg-color: #1b1b1b; | |
| --f7-bars-text-color: #fff; | |
| } | |
| .ios { | |
| --f7-bars-border-color: #c4c4c4; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-bars-border-color: #282829; | |
| } | |
| .md { | |
| --f7-bars-border-color: transparent; | |
| } | |
| /*==================== | |
| Color Themes | |
| ==================== */ | |
| .text-color-primary { | |
| --f7-theme-color-text-color: var(--f7-theme-color); | |
| } | |
| .bg-color-primary { | |
| --f7-theme-color-bg-color: var(--f7-theme-color); | |
| } | |
| .border-color-primary { | |
| --f7-theme-color-border-color: var(--f7-theme-color); | |
| } | |
| .ripple-color-primary { | |
| --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3); | |
| } | |
| :root { | |
| --f7-color-red: #ff3b30; | |
| --f7-color-red-rgb: 255, 59, 48; | |
| --f7-color-red-shade: #ff1407; | |
| --f7-color-red-tint: #ff6259; | |
| --f7-color-green: #4cd964; | |
| --f7-color-green-rgb: 76, 217, 100; | |
| --f7-color-green-shade: #2cd048; | |
| --f7-color-green-tint: #6ee081; | |
| --f7-color-blue: #2196f3; | |
| --f7-color-blue-rgb: 33, 150, 243; | |
| --f7-color-blue-shade: #0c82df; | |
| --f7-color-blue-tint: #48a8f5; | |
| --f7-color-pink: #ff2d55; | |
| --f7-color-pink-rgb: 255, 45, 85; | |
| --f7-color-pink-shade: #ff0434; | |
| --f7-color-pink-tint: #ff5676; | |
| --f7-color-yellow: #ffcc00; | |
| --f7-color-yellow-rgb: 255, 204, 0; | |
| --f7-color-yellow-shade: #d6ab00; | |
| --f7-color-yellow-tint: #ffd429; | |
| --f7-color-orange: #ff9500; | |
| --f7-color-orange-rgb: 255, 149, 0; | |
| --f7-color-orange-shade: #d67d00; | |
| --f7-color-orange-tint: #ffa629; | |
| --f7-color-purple: #9c27b0; | |
| --f7-color-purple-rgb: 156, 39, 176; | |
| --f7-color-purple-shade: #7e208f; | |
| --f7-color-purple-tint: #b92fd1; | |
| --f7-color-deeppurple: #673ab7; | |
| --f7-color-deeppurple-rgb: 103, 58, 183; | |
| --f7-color-deeppurple-shade: #563098; | |
| --f7-color-deeppurple-tint: #7c52c8; | |
| --f7-color-lightblue: #5ac8fa; | |
| --f7-color-lightblue-rgb: 90, 200, 250; | |
| --f7-color-lightblue-shade: #32bbf9; | |
| --f7-color-lightblue-tint: #82d5fb; | |
| --f7-color-teal: #009688; | |
| --f7-color-teal-rgb: 0, 150, 136; | |
| --f7-color-teal-shade: #006d63; | |
| --f7-color-teal-tint: #00bfad; | |
| --f7-color-lime: #cddc39; | |
| --f7-color-lime-rgb: 205, 220, 57; | |
| --f7-color-lime-shade: #bac923; | |
| --f7-color-lime-tint: #d6e25c; | |
| --f7-color-deeporange: #ff6b22; | |
| --f7-color-deeporange-rgb: 255, 107, 34; | |
| --f7-color-deeporange-shade: #f85200; | |
| --f7-color-deeporange-tint: #ff864b; | |
| --f7-color-gray: #8e8e93; | |
| --f7-color-gray-rgb: 142, 142, 147; | |
| --f7-color-gray-shade: #79797f; | |
| --f7-color-gray-tint: #a3a3a7; | |
| --f7-color-white: #ffffff; | |
| --f7-color-white-rgb: 255, 255, 255; | |
| --f7-color-white-shade: #ebebeb; | |
| --f7-color-white-tint: #ffffff; | |
| --f7-color-black: #000000; | |
| --f7-color-black-rgb: 0, 0, 0; | |
| --f7-color-black-shade: #000000; | |
| --f7-color-black-tint: #141414; | |
| } | |
| .color-theme-red { | |
| --f7-theme-color: #ff3b30; | |
| --f7-theme-color-rgb: 255, 59, 48; | |
| --f7-theme-color-shade: #ff1407; | |
| --f7-theme-color-tint: #ff6259; | |
| } | |
| .color-theme-green { | |
| --f7-theme-color: #4cd964; | |
| --f7-theme-color-rgb: 76, 217, 100; | |
| --f7-theme-color-shade: #2cd048; | |
| --f7-theme-color-tint: #6ee081; | |
| } | |
| .color-theme-blue { | |
| --f7-theme-color: #2196f3; | |
| --f7-theme-color-rgb: 33, 150, 243; | |
| --f7-theme-color-shade: #0c82df; | |
| --f7-theme-color-tint: #48a8f5; | |
| } | |
| .color-theme-pink { | |
| --f7-theme-color: #ff2d55; | |
| --f7-theme-color-rgb: 255, 45, 85; | |
| --f7-theme-color-shade: #ff0434; | |
| --f7-theme-color-tint: #ff5676; | |
| } | |
| .color-theme-yellow { | |
| --f7-theme-color: #ffcc00; | |
| --f7-theme-color-rgb: 255, 204, 0; | |
| --f7-theme-color-shade: #d6ab00; | |
| --f7-theme-color-tint: #ffd429; | |
| } | |
| .color-theme-orange { | |
| --f7-theme-color: #ff9500; | |
| --f7-theme-color-rgb: 255, 149, 0; | |
| --f7-theme-color-shade: #d67d00; | |
| --f7-theme-color-tint: #ffa629; | |
| } | |
| .color-theme-purple { | |
| --f7-theme-color: #9c27b0; | |
| --f7-theme-color-rgb: 156, 39, 176; | |
| --f7-theme-color-shade: #7e208f; | |
| --f7-theme-color-tint: #b92fd1; | |
| } | |
| .color-theme-deeppurple { | |
| --f7-theme-color: #673ab7; | |
| --f7-theme-color-rgb: 103, 58, 183; | |
| --f7-theme-color-shade: #563098; | |
| --f7-theme-color-tint: #7c52c8; | |
| } | |
| .color-theme-lightblue { | |
| --f7-theme-color: #5ac8fa; | |
| --f7-theme-color-rgb: 90, 200, 250; | |
| --f7-theme-color-shade: #32bbf9; | |
| --f7-theme-color-tint: #82d5fb; | |
| } | |
| .color-theme-teal { | |
| --f7-theme-color: #009688; | |
| --f7-theme-color-rgb: 0, 150, 136; | |
| --f7-theme-color-shade: #006d63; | |
| --f7-theme-color-tint: #00bfad; | |
| } | |
| .color-theme-lime { | |
| --f7-theme-color: #cddc39; | |
| --f7-theme-color-rgb: 205, 220, 57; | |
| --f7-theme-color-shade: #bac923; | |
| --f7-theme-color-tint: #d6e25c; | |
| } | |
| .color-theme-deeporange { | |
| --f7-theme-color: #ff6b22; | |
| --f7-theme-color-rgb: 255, 107, 34; | |
| --f7-theme-color-shade: #f85200; | |
| --f7-theme-color-tint: #ff864b; | |
| } | |
| .color-theme-gray { | |
| --f7-theme-color: #8e8e93; | |
| --f7-theme-color-rgb: 142, 142, 147; | |
| --f7-theme-color-shade: #79797f; | |
| --f7-theme-color-tint: #a3a3a7; | |
| } | |
| .color-theme-white { | |
| --f7-theme-color: #ffffff; | |
| --f7-theme-color-rgb: 255, 255, 255; | |
| --f7-theme-color-shade: #ebebeb; | |
| --f7-theme-color-tint: #ffffff; | |
| } | |
| .color-theme-black { | |
| --f7-theme-color: #000000; | |
| --f7-theme-color-rgb: 0, 0, 0; | |
| --f7-theme-color-shade: #000000; | |
| --f7-theme-color-tint: #141414; | |
| } | |
| .color-red { | |
| --f7-theme-color: #ff3b30; | |
| --f7-theme-color-rgb: 255, 59, 48; | |
| --f7-theme-color-shade: #ff1407; | |
| --f7-theme-color-tint: #ff6259; | |
| } | |
| .text-color-red { | |
| --f7-theme-color-text-color: #ff3b30; | |
| } | |
| .bg-color-red { | |
| --f7-theme-color-bg-color: #ff3b30; | |
| } | |
| .border-color-red { | |
| --f7-theme-color-border-color: #ff3b30; | |
| } | |
| .ripple-color-red, | |
| .ripple-red { | |
| --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3); | |
| } | |
| .color-green { | |
| --f7-theme-color: #4cd964; | |
| --f7-theme-color-rgb: 76, 217, 100; | |
| --f7-theme-color-shade: #2cd048; | |
| --f7-theme-color-tint: #6ee081; | |
| } | |
| .text-color-green { | |
| --f7-theme-color-text-color: #4cd964; | |
| } | |
| .bg-color-green { | |
| --f7-theme-color-bg-color: #4cd964; | |
| } | |
| .border-color-green { | |
| --f7-theme-color-border-color: #4cd964; | |
| } | |
| .ripple-color-green, | |
| .ripple-green { | |
| --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3); | |
| } | |
| .color-blue { | |
| --f7-theme-color: #2196f3; | |
| --f7-theme-color-rgb: 33, 150, 243; | |
| --f7-theme-color-shade: #0c82df; | |
| --f7-theme-color-tint: #48a8f5; | |
| } | |
| .text-color-blue { | |
| --f7-theme-color-text-color: #2196f3; | |
| } | |
| .bg-color-blue { | |
| --f7-theme-color-bg-color: #2196f3; | |
| } | |
| .border-color-blue { | |
| --f7-theme-color-border-color: #2196f3; | |
| } | |
| .ripple-color-blue, | |
| .ripple-blue { | |
| --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3); | |
| } | |
| .color-pink { | |
| --f7-theme-color: #ff2d55; | |
| --f7-theme-color-rgb: 255, 45, 85; | |
| --f7-theme-color-shade: #ff0434; | |
| --f7-theme-color-tint: #ff5676; | |
| } | |
| .text-color-pink { | |
| --f7-theme-color-text-color: #ff2d55; | |
| } | |
| .bg-color-pink { | |
| --f7-theme-color-bg-color: #ff2d55; | |
| } | |
| .border-color-pink { | |
| --f7-theme-color-border-color: #ff2d55; | |
| } | |
| .ripple-color-pink, | |
| .ripple-pink { | |
| --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3); | |
| } | |
| .color-yellow { | |
| --f7-theme-color: #ffcc00; | |
| --f7-theme-color-rgb: 255, 204, 0; | |
| --f7-theme-color-shade: #d6ab00; | |
| --f7-theme-color-tint: #ffd429; | |
| } | |
| .text-color-yellow { | |
| --f7-theme-color-text-color: #ffcc00; | |
| } | |
| .bg-color-yellow { | |
| --f7-theme-color-bg-color: #ffcc00; | |
| } | |
| .border-color-yellow { | |
| --f7-theme-color-border-color: #ffcc00; | |
| } | |
| .ripple-color-yellow, | |
| .ripple-yellow { | |
| --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3); | |
| } | |
| .color-orange { | |
| --f7-theme-color: #ff9500; | |
| --f7-theme-color-rgb: 255, 149, 0; | |
| --f7-theme-color-shade: #d67d00; | |
| --f7-theme-color-tint: #ffa629; | |
| } | |
| .text-color-orange { | |
| --f7-theme-color-text-color: #ff9500; | |
| } | |
| .bg-color-orange { | |
| --f7-theme-color-bg-color: #ff9500; | |
| } | |
| .border-color-orange { | |
| --f7-theme-color-border-color: #ff9500; | |
| } | |
| .ripple-color-orange, | |
| .ripple-orange { | |
| --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3); | |
| } | |
| .color-purple { | |
| --f7-theme-color: #9c27b0; | |
| --f7-theme-color-rgb: 156, 39, 176; | |
| --f7-theme-color-shade: #7e208f; | |
| --f7-theme-color-tint: #b92fd1; | |
| } | |
| .text-color-purple { | |
| --f7-theme-color-text-color: #9c27b0; | |
| } | |
| .bg-color-purple { | |
| --f7-theme-color-bg-color: #9c27b0; | |
| } | |
| .border-color-purple { | |
| --f7-theme-color-border-color: #9c27b0; | |
| } | |
| .ripple-color-purple, | |
| .ripple-purple { | |
| --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3); | |
| } | |
| .color-deeppurple { | |
| --f7-theme-color: #673ab7; | |
| --f7-theme-color-rgb: 103, 58, 183; | |
| --f7-theme-color-shade: #563098; | |
| --f7-theme-color-tint: #7c52c8; | |
| } | |
| .text-color-deeppurple { | |
| --f7-theme-color-text-color: #673ab7; | |
| } | |
| .bg-color-deeppurple { | |
| --f7-theme-color-bg-color: #673ab7; | |
| } | |
| .border-color-deeppurple { | |
| --f7-theme-color-border-color: #673ab7; | |
| } | |
| .ripple-color-deeppurple, | |
| .ripple-deeppurple { | |
| --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3); | |
| } | |
| .color-lightblue { | |
| --f7-theme-color: #5ac8fa; | |
| --f7-theme-color-rgb: 90, 200, 250; | |
| --f7-theme-color-shade: #32bbf9; | |
| --f7-theme-color-tint: #82d5fb; | |
| } | |
| .text-color-lightblue { | |
| --f7-theme-color-text-color: #5ac8fa; | |
| } | |
| .bg-color-lightblue { | |
| --f7-theme-color-bg-color: #5ac8fa; | |
| } | |
| .border-color-lightblue { | |
| --f7-theme-color-border-color: #5ac8fa; | |
| } | |
| .ripple-color-lightblue, | |
| .ripple-lightblue { | |
| --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3); | |
| } | |
| .color-teal { | |
| --f7-theme-color: #009688; | |
| --f7-theme-color-rgb: 0, 150, 136; | |
| --f7-theme-color-shade: #006d63; | |
| --f7-theme-color-tint: #00bfad; | |
| } | |
| .text-color-teal { | |
| --f7-theme-color-text-color: #009688; | |
| } | |
| .bg-color-teal { | |
| --f7-theme-color-bg-color: #009688; | |
| } | |
| .border-color-teal { | |
| --f7-theme-color-border-color: #009688; | |
| } | |
| .ripple-color-teal, | |
| .ripple-teal { | |
| --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3); | |
| } | |
| .color-lime { | |
| --f7-theme-color: #cddc39; | |
| --f7-theme-color-rgb: 205, 220, 57; | |
| --f7-theme-color-shade: #bac923; | |
| --f7-theme-color-tint: #d6e25c; | |
| } | |
| .text-color-lime { | |
| --f7-theme-color-text-color: #cddc39; | |
| } | |
| .bg-color-lime { | |
| --f7-theme-color-bg-color: #cddc39; | |
| } | |
| .border-color-lime { | |
| --f7-theme-color-border-color: #cddc39; | |
| } | |
| .ripple-color-lime, | |
| .ripple-lime { | |
| --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3); | |
| } | |
| .color-deeporange { | |
| --f7-theme-color: #ff6b22; | |
| --f7-theme-color-rgb: 255, 107, 34; | |
| --f7-theme-color-shade: #f85200; | |
| --f7-theme-color-tint: #ff864b; | |
| } | |
| .text-color-deeporange { | |
| --f7-theme-color-text-color: #ff6b22; | |
| } | |
| .bg-color-deeporange { | |
| --f7-theme-color-bg-color: #ff6b22; | |
| } | |
| .border-color-deeporange { | |
| --f7-theme-color-border-color: #ff6b22; | |
| } | |
| .ripple-color-deeporange, | |
| .ripple-deeporange { | |
| --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3); | |
| } | |
| .color-gray { | |
| --f7-theme-color: #8e8e93; | |
| --f7-theme-color-rgb: 142, 142, 147; | |
| --f7-theme-color-shade: #79797f; | |
| --f7-theme-color-tint: #a3a3a7; | |
| } | |
| .text-color-gray { | |
| --f7-theme-color-text-color: #8e8e93; | |
| } | |
| .bg-color-gray { | |
| --f7-theme-color-bg-color: #8e8e93; | |
| } | |
| .border-color-gray { | |
| --f7-theme-color-border-color: #8e8e93; | |
| } | |
| .ripple-color-gray, | |
| .ripple-gray { | |
| --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3); | |
| } | |
| .color-white { | |
| --f7-theme-color: #ffffff; | |
| --f7-theme-color-rgb: 255, 255, 255; | |
| --f7-theme-color-shade: #ebebeb; | |
| --f7-theme-color-tint: #ffffff; | |
| } | |
| .text-color-white { | |
| --f7-theme-color-text-color: #ffffff; | |
| } | |
| .bg-color-white { | |
| --f7-theme-color-bg-color: #ffffff; | |
| } | |
| .border-color-white { | |
| --f7-theme-color-border-color: #ffffff; | |
| } | |
| .ripple-color-white, | |
| .ripple-white { | |
| --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3); | |
| } | |
| .color-black { | |
| --f7-theme-color: #000000; | |
| --f7-theme-color-rgb: 0, 0, 0; | |
| --f7-theme-color-shade: #000000; | |
| --f7-theme-color-tint: #141414; | |
| } | |
| .text-color-black { | |
| --f7-theme-color-text-color: #000000; | |
| } | |
| .bg-color-black { | |
| --f7-theme-color-bg-color: #000000; | |
| } | |
| .border-color-black { | |
| --f7-theme-color-border-color: #000000; | |
| } | |
| .ripple-color-black, | |
| .ripple-black { | |
| --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3); | |
| } | |
| @font-face { | |
| font-family: 'framework7-core-icons'; | |
| src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAucABAAAAAAFdAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAALgAAAABkAAAAciVvo20dERUYAAAmwAAAAIwAAACQAdwBXR1BPUwAAC1AAAAAuAAAANuAY7+xHU1VCAAAJ1AAAAXsAAANI9IT86E9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAnQAAACIAAABYt6F0cBjdnQgAAAC/AAAAAQAAAAEABEBRGdhc3AAAAmoAAAACAAAAAj//wADZ2x5ZgAAA4gAAAOZAAAITCn3I+5oZWFkAAABbAAAADAAAAA2FHn/62hoZWEAAAGcAAAAIAAAACQHggM3aG10eAAAAigAAABMAAABDCk9AApsb2NhAAADAAAAAIgAAACIN4I51G1heHAAAAG8AAAAHwAAACAAiQBLbmFtZQAAByQAAAFTAAAC1pgGDVZwb3N0AAAIeAAAAS4AAAH92CB3HXjaY2BkYGAA4uKM/yHx/DZfGbiZGEDgRu397TD6/89/vSxpTJ+BXA4GsDQAfeMOn3jaY2BkYGD6/K+XQY8l7f9PBgaWNAagCApwBgCRZgXAeNpjYGRgYHBmkGJgYQABJiBmZACJOTDogQQADRYA1QB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wLxWSCWAGI3CGZKg/KBNBNIjTHEHKazED1MQD4AiKAPYnjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIB3gIAAioCPAJSAmQChAKUAqQC1gLsAv4DEAMiAzQDRANqA3wDlgOqA7wDzgP2BAwEJnja7VTPaxtHFH7fyNLGCFuWrF/tpZa82nVpcYhW0qZUrgWKezAtDcHuwZdYJeiUQ0yIe5N8LAGhHhyMRW6GHNqTZdOeKqu9KBc1oFMpPqlQh0JOPgXiVd/MaoOT/gclMLNv5pu3b7753pshQWEi2sc6+UijxUPQ1WJbm6AX2cOA/7TY9gke0qFPwn4Jt7UAXhXbkLgVtsKmFZ4Pf/dttYp158cwLI4Gbl3VeRS+JsfvsHfY/x4TlzAfo58IBdME90ncxAbfsBDFKEEUSQei8WwhZ2Tj0UDayPltM4SEbf6wViyuFR/fXV29u4ry1L3p6a3pLZSKa0tLa1+vSvjl9L0pCbocRr/C4k0iRJl0SMhIyzCNXCH7AeIwAfwVnIsHT06C8VRwGGoLMQzG54KdE4kOQy7n0Rm6eMLvwHscJaGZeTMwn5Yx4rGolkhLlswWpR1jR1tcXqlUHn6zoP20eePGZrmxY9Rj2kLlYaWy8tmiVt4slzcVLzKow+f1E81qHNLubG/rrRYKytCY+zlaaNAV3jWWkk4JDS3naVPv9/XmnznXjn1pCr/hjoxnIwHTbiKkO/2mvj62hNFL1uIj1oLfM7uwDKYfZUmlvFdh+MEn5zN3OvL8w9Az+IZSE567Ssg9otRzOdtMxrR7B3q9rv/M31rmzfU8U01o4+VMra4rHZ3GRFWcU1DmN2OyQ8LmjNqmmNPFTESfm4jMCFHqFXpe+9T53bnY24MPWfj29v7p2d6S/er0NexcSLf/aiYF4/fXRkvqZH3flQbXWUBPsxK+RIkCPElo19gbH+qnWzpjbOa/UJxpA30Y6u2nJaRi/nwqhr5joX9uWfuWpfbsIsm68rkzkLogOaLk8+fJrmvcvW7jc44j882Z1MwDJQ4MZTw+r304CGvj+tw+0Gs1XdVhQ1RxzkxmiXIznL+ZQBocy1Py2Dk+dmj0frXqtRLo6GhER9i/BNKbnPOQuQIlz86SXYwZezVVxX3OF0FTpBUtVJtN3Wv46tJE/uN0RUt0paY2a29N4u/+mdN1njSEdaFk82Kv8L00lPZKehvWszuRW78gqszbd0RWv8k3Q3/wABtstrdpfDc3RF8YNMmvhtTEkqLMp2cvVddg99Fg8Gh3t1aocavL78dYGAycPwZ4XLdrNbuuvm/Xj9ozlU+ZfVk3zlNcb6IhhzlVPz7JT1jMT9YGaxTOu9Uhuzys22HkcjuqEf0LOMqq8QAAAHjarZC9TgJBFIXP8GOihTFG+lsCYTfDhoRAZUJCQ2MstnazjDCB3cFhE0J8Fms7G2ufwtha+hzeGaawoLBgk5v59sy5M+cOgEu8QeDwtXEfWKCF18A1XOAzcB1S3AZuoCVeAjdxJb4Cn6FVu2anaJzz353vcizQxXPgGm7wEbiOB3wHbqArngI3QeI98BnrP5jAYIM9LDQWWKICceYcHV4TSPQxQo85xRoZ5uwquCwrM3ZnTE4v+AztdzExm73Vi2VF7bxDieyPepSus7kutKXZMrPrrNjoOTsfudm1Kuw4hMUKQ0R8tWPFpD2X2LLVZoXaGbsaRrmxKtK5KVk+6v1rmHqx8qvl+ZSfKua5CGOu/0c4+AesJb4OL4OpKaupsQtFSSxpTEeDsj6Iksi9xSmmTtlneV97H3EUFyb2qxsMqbJbbUqSsh9LKekEl/4CxNCFmAB42m2QB2/CMBCF30FbSBgJBcJof0333nsoColprEIcOWb8+ao1I4hIPcmS796973xGDvP4/QHhv9jXh5BDHjbqaKAJBy200UEXO9jFHg5wiCMc4wSnOMM5LnCJK1zjBre4wz0e8IgnPOMFr3jDOz7wSTnK0wZt0hYVqEgGmVSiMlWoShbZVKNtqlODmuRQi9rUoa6ZME/6octFUvNDNpYiciX/CtWsYizFYWCl2oD1lc4rnpRikmYlrfrfPTHVdzvTqSGVDLa8LjuRULzPfU9xXfEHImEzh7WA94RSYqiRhvQCLmZKIRFyPjCZ8JhJN2JTZabEUbyCB2ISWQEbMMVcKUZRsOaJJRsbS00vEivpLuZpfnm1iE7s7H/o1TJE3VFdGFO9OH+drv8BbS2SHgAAAAAAAf//AAJ42mNgZGBg4AFiGSBmAkJmBk0GRgYtBicgmwUsxgAADTQAzwB42nVSSVLCQBR9HSmJOIAhSkpJkEGwEOcZcVy4cO2SDSu1inJFuXDhUTyBJ/AcnsMjiO93TAKhUl1Jd7/3+v2hGwpABh5aUP3e4AUmUkQwHEIY1X9+7BGDvyOX0rMJZfwiDRuv6tPIGB2jawwwRXwDdzhEFmUOD3WuFjlXOTwUuSsijxssjPBlOFhGgQqf3cb8CLvKGEshl6GyjS7e8YEvfONHmWoNm4xRoG5dn3Jjng6xCnaRi2kiZ19xNaGIZ7bFOclD+D1mnuRwhrkYl9cVutifYALXy3/GworuYiPMdQezE4xkcMoOjXvVUNL30sQ9rlmhrd2r/LJaU6MqH/q2uUpSiH8HM2O8YPIqDlil3LLDvB1mldNrPwOLevG2wyhy4oK9qtI/S2102xF/xEg5ugsS4NN8N3V25QFPeMM5e1AnU6Kz+JT4l8pPYrjLucFYTfbG1tEs9ijwbOmKIlQqumW/PCLR2zjmWw8Qv+Y0z1hcuTpu5Q/+XTUsAHjaY2BkYGDgYpBjMGFgzEksyWPgYGABijD8/88AkmEszqxKhYp9YIADAMCOBtEAAHjaY2BgYGQAghsJmjlguvb+dhgNAEgzB6UAAAA=") format("woff"); | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: 'framework7-skeleton'; | |
| src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAYQAA0AAAAAEcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAF9AAAABkAAAAciVvoDU9TLzIAAAGcAAAASwAAAGBRtV1jY21hcAAAAfwAAAC8AAABamglddJjdnQgAAACuAAAAAQAAAAEABEBRGdhc3AAAAXsAAAACAAAAAj //wADZ2x5ZgAAA2wAAACUAAAJjHCzhiRoZWFkAAABMAAAAC4AAAA2ERr/HWhoZWEAAAFgAAAAGgAAACQC8ADFaG10eAAAAegAAAATAAAAtAMAABFsb2NhAAACvAAAAK4AAACuaNBmhG1heHAAAAF8AAAAHwAAACAAmgA5bmFtZQAABAAAAAFQAAACuLf6wytwb3N0AAAFUAAAAJkAAADOCKMIc3jaY2BkYGAA4lUx8ibx/DZfGbiZGEDgRu39AAT9/wAjA+MBIJeDASwNACBICpsAAHjaY2BkYGA88P8Agx6QAQSMYIQCWABQZgK3AAB42mNgZGBgCGPgYGBiAAEQycgAEnNg0AMJAAANJwDUAHjaY2BhZGCcwMDKwMDow5jGwMDgDqW/MkgytDAwMDGwcjLAACMDEghIc01haGBQYKhlPPD/AIMe4wEGB5gaxgNAHgNQjhEA6dgLvQB42mNkYBBkAAJGKB4KAAAOfQAVAHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMSgxWDNEMsQz1D7/z9QXIFBjUGHwRHIT/z////j/w/+3/9/6//N/zeg5iABRjYGuCAjE5BgQlcAdAILK5DBxs7BycXAzcPLxy8gKCQsIiomLiEpBVYjLSMrJ6+gqKSsoqqmrqGppa2jq6dvYGhkbGJqZs5gwWBpZW1ja2fv4Ojk7OLq5u7h6eXt4+vnHxAYFBwSyjDgAABJLiG7ABEBRAAAACoAKgAqADgARgBUAGIAcAB+AIwAmgCoALYAxADYAOYA9AECARABHgEsAToBSAFWAWQBcgGAAY4BnAGqAbgBxgHUAeIB8AH+AgwCGgIoAjYCRAJSAmACbgJ8AooCmAKmArQCwgLQAt4C8gMAAw4DHAMqAzgDRgNUA2IDcAN+A4wDmgOoA7YDxAPSA+AD7gP8BAoEGAQmBDQEQgRQBF4EbAR6BIgEnASqBLgExgAAeNpjYGIQZGBgmMkYysDMwM6gt5GRQd9mEzsLw1ujjWysd2w2MTMBmQwbmUHCrCDhTexsjH9sNjGCxI0FjQXVjQWVBTvK09IYQ/+tFmQ0BprGyMDw/wAjA+MBoJkMooKKgowMDkwM/xgYRuVwyjEhybFDZBXBKv4zQFVBVI6G36jcqNyo3GiZMSo3Kjes8hQAx51w5njapZC9agJBFIXP+EfSBMEXmEoU3GVcBNFWsLEJKbYKhEUnOrjryrggkgfIQ6RMnzZVHiBNijxM6pydHUiRFAEXLvebc8+duXcBXOEFAtXXw41ngQ6ePddwgXfPdYRCeW6gIx49N9EWb55b1L/oFI1Lnq5dV8kCXTx4rqGNV8913OLTcwNdcee5CSmePLeof2CGHHucYGGwxgYFJGdeos8cQWGICQbkGCkSrOjKGJbKgu6EVOoZ7zCuilm+P1mz3hSyt+zLSA0nAxmnycpkxsrFJrFpku3Nis57NpetGkcOYbHFGAEOzJqXao6SY0ebTTJ9zO12HBy2OtVFTvGX66c0d0LhsuVO2m0ScheJKeN/z1beESuRi+pPYJ7vinlu11pGoZJT+cdwVEdBFJSbn7djzLql1/iBlBsidLlcBrG2B8MHlRqGSil51nPfEi6AO3jaXc5ZM4IBAEbhp9RF1FhCRbmyVNYskSXG0CaEQvaf2j/LN112bt6Zc/HOETZiOJAJJmSc15ENmxARFTNpSlzCtBmz5iTNW7AoJR08LFmWlbNi1Zp1G/IKijZt2bZj156SfQcOHSk7dqLi1JlzF6ouXbl241ZNXUNTy522ew8edTx59qKrF3S9edf34dOXbz9+/f0DgycTFgAAAAAAAAH//wACeNpjYGBgZACCGwmaOWC69n4AjAYARC0G1wAAAA==") format("woff"); | |
| font-weight: 300, 400, 500, 600, 700; | |
| font-style: normal, italic; | |
| } | |
| html, | |
| body, | |
| .framework7-root { | |
| position: relative; | |
| height: 100%; | |
| width: 100%; | |
| overflow-x: hidden; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| background: #fff; | |
| overflow: hidden; | |
| -webkit-text-size-adjust: 100%; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: var(--f7-font-family); | |
| font-size: var(--f7-font-size); | |
| line-height: var(--f7-line-height); | |
| color: var(--f7-text-color); | |
| } | |
| .theme-dark { | |
| color: var(--f7-text-color); | |
| } | |
| .framework7-root { | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| } | |
| .framework7-initializing *, | |
| .framework7-initializing *:before, | |
| .framework7-initializing *:after { | |
| transition-duration: 0ms !important; | |
| } | |
| .device-ios, | |
| .device-android { | |
| cursor: pointer; | |
| } | |
| .device-ios { | |
| touch-action: manipulation; | |
| } | |
| @media (width: 1024px) and (height: 691px) and (orientation: landscape) { | |
| html, | |
| body, | |
| .framework7-root { | |
| height: 671px; | |
| } | |
| } | |
| @media (width: 1024px) and (height: 692px) and (orientation: landscape) { | |
| html, | |
| body, | |
| .framework7-root { | |
| height: 672px; | |
| } | |
| } | |
| * { | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
| -webkit-touch-callout: none; | |
| } | |
| a, | |
| input, | |
| textarea, | |
| select { | |
| outline: 0; | |
| } | |
| a { | |
| cursor: pointer; | |
| text-decoration: none; | |
| color: var(--f7-theme-color); | |
| } | |
| p { | |
| margin: 1em 0; | |
| } | |
| .disabled { | |
| opacity: 0.55 !important; | |
| pointer-events: none !important; | |
| } | |
| html.device-full-viewport, | |
| html.device-full-viewport body { | |
| height: 100vh; | |
| } | |
| .ios .md-only, | |
| .ios .if-md { | |
| display: none !important; | |
| } | |
| @media (width: 1024px) and (height: 691px) and (orientation: landscape) { | |
| .ios, | |
| .ios body, | |
| .ios .framework7-root { | |
| height: 671px; | |
| } | |
| } | |
| @media (width: 1024px) and (height: 692px) and (orientation: landscape) { | |
| .ios, | |
| .ios body, | |
| .ios .framework7-root { | |
| height: 672px; | |
| } | |
| } | |
| .md .ios-only, | |
| .md .if-ios { | |
| display: none !important; | |
| } | |
| /* === Statusbar === */ | |
| :root { | |
| --f7-statusbar-height: 0px; | |
| --f7-statusbar-bg-color: var(--f7-bars-bg-color); | |
| } | |
| .device-ios { | |
| --f7-statusbar-height: var(--f7-safe-area-top, 20px); | |
| } | |
| .device-android { | |
| --f7-statusbar-height: var(--f7-safe-area-top, 24px); | |
| } | |
| .with-statusbar.ios:not(.device-ios):not(.device-android) { | |
| --f7-statusbar-height: 20px; | |
| } | |
| .with-statusbar.md:not(.device-ios):not(.device-android) { | |
| --f7-statusbar-height: 24px; | |
| } | |
| @supports not (top: env(safe-area-inset-top)) { | |
| .with-statusbar.device-ios { | |
| --f7-statusbar-height: 20px; | |
| } | |
| } | |
| @supports not (top: env(safe-area-inset-top)) { | |
| .with-statusbar.device-android { | |
| --f7-statusbar-height: 24px; | |
| } | |
| } | |
| .statusbar { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| z-index: 10000; | |
| box-sizing: border-box; | |
| display: block; | |
| height: var(--f7-statusbar-height); | |
| } | |
| .framework7-root { | |
| padding-top: var(--f7-statusbar-height); | |
| } | |
| .ios .statusbar { | |
| background: var(--f7-statusbar-bg-color, var(--f7-bars-bg-color)); | |
| } | |
| .md .statusbar { | |
| background: var(--f7-statusbar-bg-color, var(--f7-theme-color-shade)); | |
| } | |
| /* === Views === */ | |
| .views, | |
| .view { | |
| position: relative; | |
| height: 100%; | |
| z-index: 5000; | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| } | |
| /* === Pages === */ | |
| :root { | |
| --f7-page-master-width: 320px; | |
| --f7-page-master-border-color: rgba(0, 0, 0, 0.1); | |
| --f7-page-master-border-width: 1px; | |
| } | |
| .ios { | |
| --f7-page-bg-color: #efeff4; | |
| --f7-page-transition-duration: 400ms; | |
| --f7-page-swipeback-transition-duration: 400ms; | |
| } | |
| .md { | |
| --f7-page-bg-color: #fff; | |
| --f7-page-transition-duration: 250ms; | |
| --f7-page-swipeback-transition-duration: 400ms; | |
| } | |
| .theme-dark { | |
| --f7-page-bg-color: #171717; | |
| --f7-page-master-border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .pages { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .page { | |
| box-sizing: border-box; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| transform: translate3d(0, 0, 0); | |
| background-color: var(--f7-page-bg-color); | |
| } | |
| .page.stacked { | |
| display: none; | |
| } | |
| .page-previous { | |
| pointer-events: none; | |
| } | |
| .page-content { | |
| will-change: scroll-position; | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| box-sizing: border-box; | |
| height: 100%; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .page-transitioning, | |
| .page-transitioning .page-shadow-effect, | |
| .page-transitioning .page-opacity-effect { | |
| transition-duration: var(--f7-page-transition-duration); | |
| } | |
| .page-transitioning-swipeback, | |
| .page-transitioning-swipeback .page-shadow-effect, | |
| .page-transitioning-swipeback .page-opacity-effect { | |
| transition-duration: var(--f7-page-swipeback-transition-duration); | |
| } | |
| .router-transition-forward .page-next, | |
| .router-transition-backward .page-next, | |
| .router-transition-forward .page-current, | |
| .router-transition-backward .page-current, | |
| .router-transition-forward .page-previous:not(.stacked), | |
| .router-transition-backward .page-previous:not(.stacked) { | |
| pointer-events: none; | |
| } | |
| .page-shadow-effect { | |
| position: absolute; | |
| top: 0; | |
| width: 16px; | |
| bottom: 0; | |
| z-index: -1; | |
| content: ''; | |
| opacity: 0; | |
| right: 100%; | |
| background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%); | |
| } | |
| .page-opacity-effect { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| background: rgba(0, 0, 0, 0.1); | |
| width: 100%; | |
| bottom: 0; | |
| content: ''; | |
| opacity: 0; | |
| z-index: 10000; | |
| } | |
| .ios .page-previous { | |
| transform: translate3d(-20%, 0, 0); | |
| } | |
| .ios .page-next { | |
| transform: translate3d(100%, 0, 0); | |
| } | |
| .ios .page-previous .page-opacity-effect { | |
| opacity: 1; | |
| } | |
| .ios .page-previous:after { | |
| opacity: 1; | |
| } | |
| .ios .page-current .page-shadow-effect { | |
| opacity: 1; | |
| } | |
| .ios .router-transition-forward .page-next, | |
| .ios .router-transition-forward .page-current { | |
| will-change: transform; | |
| } | |
| .ios .router-transition-forward .page-next { | |
| animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-forward .page-next:before { | |
| position: absolute; | |
| top: 0; | |
| width: 16px; | |
| bottom: 0; | |
| z-index: -1; | |
| content: ''; | |
| opacity: 0; | |
| right: 100%; | |
| background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%); | |
| animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-forward .page-current { | |
| animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-forward .page-current:after { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| background: rgba(0, 0, 0, 0.1); | |
| width: 100%; | |
| bottom: 0; | |
| content: ''; | |
| opacity: 0; | |
| z-index: 10000; | |
| animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-backward .page-previous, | |
| .ios .router-transition-backward .page-current { | |
| will-change: transform; | |
| } | |
| .ios .router-transition-backward .page-previous { | |
| animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-backward .page-previous:after { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| background: rgba(0, 0, 0, 0.1); | |
| width: 100%; | |
| bottom: 0; | |
| content: ''; | |
| opacity: 0; | |
| z-index: 10000; | |
| animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-backward .page-current { | |
| animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-backward .page-current:before { | |
| position: absolute; | |
| top: 0; | |
| width: 16px; | |
| bottom: 0; | |
| z-index: -1; | |
| content: ''; | |
| opacity: 0; | |
| right: 100%; | |
| background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%); | |
| animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-dynamic-navbar-inside .page-shadow-effect, | |
| .ios .router-dynamic-navbar-inside .page-opacity-effect { | |
| top: var(--f7-navbar-height); | |
| } | |
| .ios .router-dynamic-navbar-inside .page-next:before, | |
| .ios .router-dynamic-navbar-inside .page-current:after, | |
| .ios .router-dynamic-navbar-inside .page-current:before, | |
| .ios .router-dynamic-navbar-inside .page-previous:after { | |
| top: var(--f7-navbar-height); | |
| } | |
| @keyframes ios-page-next-to-current { | |
| from { | |
| transform: translate3d(100%, 0, 0); | |
| } | |
| to { | |
| transform: translate3d(0%, 0, 0); | |
| } | |
| } | |
| @keyframes ios-page-previous-to-current { | |
| from { | |
| transform: translate3d(-20%, 0, 0); | |
| } | |
| to { | |
| transform: translate3d(0%, 0, 0); | |
| } | |
| } | |
| @keyframes ios-page-current-to-previous { | |
| from { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| to { | |
| transform: translate3d(-20%, 0, 0); | |
| } | |
| } | |
| @keyframes ios-page-current-to-next { | |
| from { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| to { | |
| transform: translate3d(100%, 0, 0); | |
| } | |
| } | |
| @keyframes ios-page-element-fade-in { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes ios-page-element-fade-out { | |
| from { | |
| opacity: 1; | |
| } | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| .md .page-next { | |
| transform: translate3d(0, 56px, 0); | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .md .page-next.page-next-on-right { | |
| transform: translate3d(100%, 0, 0); | |
| } | |
| .md .router-transition-forward .page-next { | |
| will-change: transform, opacity; | |
| animation: md-page-next-to-current var(--f7-page-transition-duration) forwards; | |
| } | |
| .md .router-transition-forward .page-current { | |
| animation: none; | |
| } | |
| .md .router-transition-backward .page-current { | |
| will-change: transform, opacity; | |
| animation: md-page-current-to-next var(--f7-page-transition-duration) forwards; | |
| } | |
| .md .router-transition-backward .page-previous { | |
| animation: none; | |
| } | |
| @keyframes md-page-next-to-current { | |
| from { | |
| transform: translate3d(0, 56px, 0); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translate3d(0, 0px, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes md-page-current-to-next { | |
| from { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| to { | |
| transform: translate3d(0, 56px, 0); | |
| opacity: 0; | |
| } | |
| } | |
| .view:not(.view-master-detail) .page-master-stacked { | |
| display: none; | |
| } | |
| .view:not(.view-master-detail) .navbar-master-stacked { | |
| display: none; | |
| } | |
| .view-master-detail .page-master, | |
| .view-master-detail .navbar-master { | |
| width: var(--f7-page-master-width); | |
| --f7-safe-area-right: 0px; | |
| --f7-safe-area-outer-right: 0px; | |
| border-right: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color); | |
| } | |
| .view-master-detail .page-master-detail, | |
| .view-master-detail .navbar-master-detail { | |
| width: calc(100% - var(--f7-page-master-width)); | |
| --f7-safe-area-left: 0px; | |
| --f7-safe-area-outer-left: 0px; | |
| left: var(--f7-page-master-width); | |
| } | |
| .view-master-detail .page-master { | |
| z-index: 1; | |
| transform: none; | |
| pointer-events: auto; | |
| } | |
| .view-master-detail .page-master:before, | |
| .view-master-detail .page-master:after { | |
| display: none; | |
| } | |
| .view-master-detail.router-transition .page-master { | |
| animation: none; | |
| } | |
| /* === Link === */ | |
| :root { | |
| --f7-link-highlight-black: rgba(0, 0, 0, 0.1); | |
| --f7-link-highlight-white: rgba(255, 255, 255, 0.15); | |
| --f7-link-highlight-color: var(--f7-link-highlight-black); | |
| } | |
| .theme-dark { | |
| --f7-link-highlight-color: var(--f7-link-highlight-white); | |
| } | |
| .link, | |
| .tab-link { | |
| display: inline-flex; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: center; | |
| position: relative; | |
| box-sizing: border-box; | |
| transform: translate3d(0, 0, 0); | |
| z-index: 1; | |
| } | |
| .link i + span, | |
| .link i + i, | |
| .link span + i, | |
| .link span + span { | |
| margin-left: 4px; | |
| } | |
| .ios .link { | |
| transition: opacity 300ms; | |
| } | |
| .ios .link.active-state { | |
| opacity: 0.3; | |
| transition-duration: 0ms; | |
| } | |
| /* === Navbar === */ | |
| :root { | |
| /* | |
| --f7-navbar-bg-color: var(--f7-bars-bg-color); | |
| --f7-navbar-bg-image: var(--f7-bars-bg-image); | |
| --f7-navbar-border-color: var(--f7-bars-border-color); | |
| --f7-navbar-link-color: var(--f7-bars-link-color); | |
| --f7-navbar-text-color: var(--f7-bars-text-color); | |
| */ | |
| --f7-navbar-hide-show-transition-duration: 400ms; | |
| --f7-navbar-title-line-height: 1.2; | |
| } | |
| .ios { | |
| --f7-navbar-height: 44px; | |
| --f7-navbar-tablet-height: 44px; | |
| --f7-navbar-font-size: 17px; | |
| --f7-navbar-inner-padding-left: 8px; | |
| --f7-navbar-inner-padding-right: 8px; | |
| --f7-navbar-title-font-weight: 600; | |
| --f7-navbar-title-margin-left: 0; | |
| --f7-navbar-title-margin-right: 0; | |
| --f7-navbar-title-text-align: center; | |
| --f7-navbar-subtitle-text-color: #6d6d72; | |
| --f7-navbar-subtitle-font-size: 10px; | |
| --f7-navbar-subtitle-line-height: 1; | |
| --f7-navbar-subtitle-text-align: inherit; | |
| --f7-navbar-shadow-image: none; | |
| --f7-navbar-large-title-height: 52px; | |
| --f7-navbar-large-title-font-size: 34px; | |
| --f7-navbar-large-title-font-weight: 700; | |
| --f7-navbar-large-title-line-height: 1.2; | |
| --f7-navbar-large-title-letter-spacing: -0.03em; | |
| --f7-navbar-large-title-padding-left: 15px; | |
| --f7-navbar-large-title-padding-right: 15px; | |
| --f7-navbar-large-title-text-color: inherit; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-navbar-subtitle-text-color: #8e8e93; | |
| } | |
| .md { | |
| --f7-navbar-height: 56px; | |
| --f7-navbar-tablet-height: 64px; | |
| --f7-navbar-font-size: 20px; | |
| --f7-navbar-inner-padding-left: 0px; | |
| --f7-navbar-inner-padding-right: 0px; | |
| --f7-navbar-title-font-weight: 500; | |
| --f7-navbar-title-margin-left: 16px; | |
| --f7-navbar-title-margin-right: 16px; | |
| --f7-navbar-title-text-align: left; | |
| --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85); | |
| --f7-navbar-subtitle-font-size: 14px; | |
| --f7-navbar-subtitle-line-height: 1.2; | |
| --f7-navbar-subtitle-text-align: inherit; | |
| --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image); | |
| --f7-navbar-large-title-font-size: 34px; | |
| --f7-navbar-large-title-height: 56px; | |
| --f7-navbar-large-title-font-weight: 500; | |
| --f7-navbar-large-title-line-height: 1.2; | |
| --f7-navbar-large-title-letter-spacing: 0; | |
| --f7-navbar-large-title-padding-left: 16px; | |
| --f7-navbar-large-title-padding-right: 16px; | |
| --f7-navbar-large-title-text-color: inherit; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85); | |
| } | |
| .navbar { | |
| --f7-navbar-large-collapse-progress: 0; | |
| position: relative; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| z-index: 500; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| box-sizing: border-box; | |
| margin: 0; | |
| transform: translate3d(0, 0, 0); | |
| height: var(--f7-navbar-height); | |
| background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image)); | |
| background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color))); | |
| color: var(--f7-navbar-text-color, var(--f7-bars-text-color)); | |
| font-size: var(--f7-navbar-font-size); | |
| } | |
| .navbar .material-icons { | |
| width: 24px; | |
| } | |
| .navbar .f7-icons { | |
| width: 28px; | |
| } | |
| .navbar b { | |
| font-weight: 500; | |
| } | |
| .navbar a { | |
| color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color))); | |
| } | |
| .navbar a.link { | |
| display: flex; | |
| justify-content: flex-start; | |
| line-height: var(--f7-navbar-height); | |
| height: var(--f7-navbar-height); | |
| } | |
| .navbar .title, | |
| .navbar .left, | |
| .navbar .right { | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .navbar .title { | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| flex-shrink: 10; | |
| font-weight: var(--f7-navbar-title-font-weight); | |
| display: inline-block; | |
| line-height: var(--f7-navbar-title-line-height); | |
| text-align: var(--f7-navbar-title-text-align); | |
| margin-left: var(--f7-navbar-title-margin-left); | |
| margin-right: var(--f7-navbar-title-margin-left); | |
| } | |
| .navbar .subtitle { | |
| display: block; | |
| color: var(--f7-navbar-subtitle-text-color); | |
| font-weight: normal; | |
| font-size: var(--f7-navbar-subtitle-font-size); | |
| line-height: var(--f7-navbar-subtitle-line-height); | |
| text-align: var(--f7-navbar-subtitle-text-align); | |
| } | |
| .navbar .left, | |
| .navbar .right { | |
| flex-shrink: 0; | |
| display: flex; | |
| justify-content: flex-start; | |
| align-items: center; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .navbar .right:first-child { | |
| position: absolute; | |
| height: 100%; | |
| } | |
| .navbar.no-hairline:after, | |
| .navbar.no-border:after { | |
| display: none !important; | |
| } | |
| .navbar.no-hairline .title-large:after, | |
| .navbar.no-border .title-large:after { | |
| display: none !important; | |
| } | |
| .navbar.no-shadow:before { | |
| display: none !important; | |
| } | |
| .navbar.navbar-hidden:before { | |
| opacity: 0 !important; | |
| } | |
| .navbar:after, | |
| .navbar:before { | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| } | |
| .navbar:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color)); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .navbar:before { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| width: 100%; | |
| top: 100%; | |
| bottom: auto; | |
| height: 8px; | |
| pointer-events: none; | |
| background: var(--f7-navbar-shadow-image, var(--f7-bars-shadow-bottom-image)); | |
| } | |
| .navbar:after { | |
| z-index: 1; | |
| } | |
| @media (min-width: 768px) { | |
| :root { | |
| --f7-navbar-height: var(--f7-navbar-tablet-height); | |
| } | |
| } | |
| .navbar-transitioning, | |
| .navbar-transitioning:before, | |
| .navbar-transitioning .title, | |
| .navbar-transitioning .title-large, | |
| .navbar-transitioning .title-large-inner, | |
| .navbar-transitioning .title-large-text, | |
| .navbar-transitioning .subnavbar { | |
| transition-duration: var(--f7-navbar-hide-show-transition-duration); | |
| } | |
| .navbar-page-transitioning { | |
| transition-duration: var(--f7-page-swipeback-transition-duration) !important; | |
| } | |
| .navbar-page-transitioning .title-large-text, | |
| .navbar-page-transitioning .title-large-inner { | |
| transition-duration: var(--f7-page-swipeback-transition-duration) !important; | |
| } | |
| .navbar-hidden { | |
| transform: translate3d(0, -100%, 0); | |
| } | |
| .navbar-large-hidden { | |
| --f7-navbar-large-collapse-progress: 1; | |
| } | |
| .navbar-inner { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: var(--f7-navbar-height); | |
| display: flex; | |
| align-items: center; | |
| box-sizing: border-box; | |
| padding: 0 calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-left)); | |
| } | |
| .navbar-inner.stacked { | |
| display: none; | |
| } | |
| .views > .navbar, | |
| .view > .navbar, | |
| .page > .navbar { | |
| position: absolute; | |
| } | |
| .navbar-large:before { | |
| transform: translateY(calc((1 - var(--f7-navbar-large-collapse-progress)) * var(--f7-navbar-large-title-height))); | |
| } | |
| .navbar-inner-large > .title { | |
| opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)); | |
| } | |
| .navbar-large-collapsed, | |
| .navbar-inner-large-collapsed { | |
| --f7-navbar-large-collapse-progress: 1; | |
| } | |
| .navbar .title-large { | |
| box-sizing: border-box; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 100%; | |
| display: flex; | |
| align-items: center; | |
| white-space: nowrap; | |
| transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0); | |
| will-change: transform, opacity; | |
| transition-property: transform; | |
| overflow: hidden; | |
| background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image)); | |
| background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color))); | |
| height: calc(var(--f7-navbar-large-title-height) + 1px); | |
| z-index: 5; | |
| margin-top: -1px; | |
| transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center; | |
| } | |
| .navbar .title-large:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color)); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .title-large-text, | |
| .title-large-inner .title { | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| color: var(--f7-navbar-large-title-text-color); | |
| letter-spacing: var(--f7-navbar-large-title-letter-spacing); | |
| font-size: var(--f7-navbar-large-title-font-size); | |
| font-weight: var(--f7-navbar-large-title-font-weight); | |
| line-height: var(--f7-navbar-large-title-line-height); | |
| padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)); | |
| padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right)); | |
| transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center; | |
| } | |
| .title-large-text, | |
| .title-large-inner { | |
| box-sizing: border-box; | |
| overflow: hidden; | |
| transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0); | |
| transition-property: transform, opacity; | |
| width: 100%; | |
| } | |
| .navbar-no-title-large-transition .title-large, | |
| .navbar-no-title-large-transition .title-large-text, | |
| .navbar-no-title-large-transition .title-large-inner { | |
| transition-duration: 0ms; | |
| } | |
| .navbar ~ * .page:not(.no-navbar) .page-content, | |
| .navbar ~ .page:not(.no-navbar) .page-content, | |
| .navbar ~ .page-content, | |
| .navbar ~ :not(.page) .page-content { | |
| padding-top: var(--f7-navbar-height); | |
| } | |
| .navbar ~ * .page:not(.no-navbar).page-with-navbar-large .page-content, | |
| .navbar ~ .page:not(.no-navbar).page-with-navbar-large .page-content, | |
| .page-with-navbar-large .navbar ~ .page-content, | |
| .page-with-navbar-large .navbar ~ * .page-content { | |
| padding-top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height)); | |
| } | |
| .ios { | |
| --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left)); | |
| --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left); | |
| } | |
| .ios .navbar a.icon-only { | |
| width: 44px; | |
| margin: 0; | |
| justify-content: center; | |
| } | |
| .ios .navbar .left a + a, | |
| .ios .navbar .right a + a { | |
| margin-left: 15px; | |
| } | |
| .ios .navbar b { | |
| font-weight: 600; | |
| } | |
| .ios .navbar .left { | |
| margin-right: 10px; | |
| } | |
| .ios .navbar .right { | |
| margin-left: 10px; | |
| } | |
| .ios .navbar .right:first-child { | |
| right: calc(8px + var(--f7-safe-area-right)); | |
| } | |
| .ios .navbar-inner { | |
| justify-content: space-between; | |
| } | |
| .ios .navbar-inner-left-title { | |
| justify-content: flex-start; | |
| } | |
| .ios .navbar-inner-left-title .right { | |
| margin-left: auto; | |
| } | |
| .ios .navbar-inner-left-title .title { | |
| text-align: left; | |
| margin-right: 10px; | |
| } | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master), | |
| .ios .view:not(.view-master-detail) .navbar-previous { | |
| pointer-events: none; | |
| } | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large, | |
| .ios .view:not(.view-master-detail) .navbar-previous .title-large { | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| transition: 0ms; | |
| } | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text, | |
| .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text { | |
| transform: scale(0.5); | |
| transition: 0ms; | |
| } | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-inner, | |
| .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner { | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| transition: 0ms; | |
| } | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master) .left, | |
| .ios .view:not(.view-master-detail) .navbar-previous .left, | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master) .right, | |
| .ios .view:not(.view-master-detail) .navbar-previous .right, | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master) > .title, | |
| .ios .view:not(.view-master-detail) .navbar-previous > .title, | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar, | |
| .ios .view:not(.view-master-detail) .navbar-previous .subnavbar, | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master) .fading, | |
| .ios .view:not(.view-master-detail) .navbar-previous .fading { | |
| opacity: 0; | |
| } | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding, | |
| .ios .view:not(.view-master-detail) .navbar-previous .sliding { | |
| opacity: 0; | |
| } | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding, | |
| .ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding, | |
| .ios .view-master-detail .navbar-previous:not(.navbar-master).sliding .subnavbar, | |
| .ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar { | |
| opacity: 1; | |
| transform: translate3d(-100%, 0, 0); | |
| } | |
| .ios .navbar-next { | |
| pointer-events: none; | |
| } | |
| .ios .navbar-next .title-large { | |
| transform: translateX(100%); | |
| transition: 0ms; | |
| } | |
| .ios .navbar-next .title-large .title-large-text, | |
| .ios .navbar-next .title-large .title-large-inner { | |
| transition: 0ms; | |
| } | |
| .ios .navbar-next .left, | |
| .ios .navbar-next .right, | |
| .ios .navbar-next > .title, | |
| .ios .navbar-next .subnavbar, | |
| .ios .navbar-next .fading { | |
| opacity: 0; | |
| } | |
| .ios .navbar-next .sliding { | |
| opacity: 0; | |
| } | |
| .ios .navbar-next.sliding .left, | |
| .ios .navbar-next.sliding .right, | |
| .ios .navbar-next.sliding > .title, | |
| .ios .navbar-next.sliding .subnavbar { | |
| opacity: 0; | |
| } | |
| .ios .navbar-next .subnavbar.sliding, | |
| .ios .navbar-next.sliding .subnavbar { | |
| opacity: 1; | |
| transform: translate3d(100%, 0, 0); | |
| } | |
| .ios .router-dynamic-navbar-inside .navbar-next .title-large, | |
| .ios .router-dynamic-navbar-inside .navbar-next .title-large-text, | |
| .ios .router-dynamic-navbar-inside .navbar-next .title-large-inner { | |
| transform: none; | |
| } | |
| .ios .router-dynamic-navbar-inside .navbar-previous .title-large { | |
| opacity: 1; | |
| transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0); | |
| } | |
| .ios .router-dynamic-navbar-inside .navbar-previous .title-large-text, | |
| .ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner { | |
| transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0); | |
| } | |
| .ios .router-transition .navbar { | |
| transition-duration: var(--f7-page-transition-duration); | |
| } | |
| .ios .router-transition .title-large { | |
| transition: 0ms; | |
| } | |
| .ios .router-transition .navbar-current .left, | |
| .ios .router-transition .navbar-current > .title, | |
| .ios .router-transition .navbar-current .right, | |
| .ios .router-transition .navbar-current .subnavbar { | |
| animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition .navbar-current .sliding, | |
| .ios .router-transition .navbar-current .left.sliding .icon + span, | |
| .ios .router-transition .navbar-current.sliding .left, | |
| .ios .router-transition .navbar-current.sliding .left .icon + span, | |
| .ios .router-transition .navbar-current.sliding > .title, | |
| .ios .router-transition .navbar-current.sliding .right { | |
| transition-duration: var(--f7-page-transition-duration); | |
| opacity: 0 !important; | |
| animation: none; | |
| } | |
| .ios .router-transition .navbar-current.sliding .subnavbar, | |
| .ios .router-transition .navbar-current .sliding.subnavbar { | |
| transition-duration: var(--f7-page-transition-duration); | |
| animation: none; | |
| opacity: 1; | |
| } | |
| .ios .router-transition-forward .navbar-next .left, | |
| .ios .router-transition-backward .navbar-previous .left, | |
| .ios .router-transition-forward .navbar-next > .title, | |
| .ios .router-transition-backward .navbar-previous > .title, | |
| .ios .router-transition-forward .navbar-next .right, | |
| .ios .router-transition-backward .navbar-previous .right, | |
| .ios .router-transition-forward .navbar-next .subnavbar, | |
| .ios .router-transition-backward .navbar-previous .subnavbar { | |
| animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-forward .navbar-next .sliding, | |
| .ios .router-transition-backward .navbar-previous .sliding, | |
| .ios .router-transition-forward .navbar-next .left.sliding .icon + span, | |
| .ios .router-transition-backward .navbar-previous .left.sliding .icon + span, | |
| .ios .router-transition-forward .navbar-next.sliding .left, | |
| .ios .router-transition-backward .navbar-previous.sliding .left, | |
| .ios .router-transition-forward .navbar-next.sliding .left .icon + span, | |
| .ios .router-transition-backward .navbar-previous.sliding .left .icon + span, | |
| .ios .router-transition-forward .navbar-next.sliding > .title, | |
| .ios .router-transition-backward .navbar-previous.sliding > .title, | |
| .ios .router-transition-forward .navbar-next.sliding .right, | |
| .ios .router-transition-backward .navbar-previous.sliding .right, | |
| .ios .router-transition-forward .navbar-next.sliding .subnavbar, | |
| .ios .router-transition-backward .navbar-previous.sliding .subnavbar { | |
| transition-duration: var(--f7-page-transition-duration); | |
| animation: none; | |
| transform: translate3d(0, 0, 0) !important; | |
| opacity: 1 !important; | |
| } | |
| .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large { | |
| overflow: visible; | |
| } | |
| .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text { | |
| animation: ios-navbar-title-large-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large { | |
| animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text { | |
| animation: ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-scale-out var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner { | |
| animation: ios-navbar-title-large-inner-current-to-previous var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span { | |
| animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards; | |
| transition: none; | |
| transform-origin: left center; | |
| } | |
| .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large { | |
| overflow: visible; | |
| } | |
| .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text, | |
| .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner { | |
| animation: ios-navbar-title-large-text-slide-left var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large { | |
| animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text, | |
| .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner { | |
| animation: ios-navbar-title-large-text-slide-left-top var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-forward .navbar-next.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title, | |
| .ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title { | |
| animation: none; | |
| opacity: 0 !important; | |
| transition-duration: 0; | |
| } | |
| .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large, | |
| .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large, | |
| .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-text, | |
| .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-text, | |
| .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-inner, | |
| .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner { | |
| animation: none !important; | |
| } | |
| .ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span { | |
| animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards; | |
| transition: none; | |
| transform-origin: left center; | |
| } | |
| .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large { | |
| overflow: visible; | |
| transform: translateX(100%); | |
| } | |
| .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text, | |
| .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner { | |
| animation: ios-navbar-title-large-text-slide-right var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large { | |
| animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text, | |
| .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner { | |
| animation: ios-navbar-title-large-text-slide-right-bottom var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large { | |
| opacity: 0; | |
| } | |
| .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large { | |
| overflow: visible; | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text { | |
| animation: ios-navbar-title-large-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large { | |
| opacity: 1; | |
| animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text { | |
| animation: ios-navbar-title-large-text-scale-in var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner { | |
| animation: ios-navbar-title-large-inner-previous-to-current var(--f7-page-transition-duration) forwards; | |
| } | |
| .ios .router-transition-backward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title, | |
| .ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title { | |
| animation: none; | |
| opacity: 0 !important; | |
| transition-duration: 0; | |
| } | |
| .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large, | |
| .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large, | |
| .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-text, | |
| .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-text, | |
| .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-inner, | |
| .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner { | |
| animation: none !important; | |
| } | |
| .view-master-detail .navbar-master.navbar-previous { | |
| pointer-events: auto; | |
| } | |
| .view-master-detail .navbar-master.navbar-previous .left, | |
| .view-master-detail .navbar-master.navbar-previous:not(.navbar-inner-large) .title, | |
| .view-master-detail .navbar-master.navbar-previous .right, | |
| .view-master-detail .navbar-master.navbar-previous .subnavbar { | |
| opacity: 1; | |
| } | |
| .ios .view-master-detail.router-transition .navbar-master .left, | |
| .ios .view-master-detail.router-transition .navbar-master .left .icon + span, | |
| .ios .view-master-detail.router-transition .navbar-master:not(.navbar-inner-large) .title, | |
| .ios .view-master-detail.router-transition .navbar-master .right, | |
| .ios .view-master-detail.router-transition .navbar-master .subnavbar, | |
| .ios .view-master-detail.router-transition .navbar-master .sliding, | |
| .ios .view-master-detail.router-transition .navbar-master .fading { | |
| opacity: 1 !important; | |
| transition-duration: 0ms; | |
| transform: none !important; | |
| animation: none !important; | |
| } | |
| .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title { | |
| opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important; | |
| transition-duration: 0ms; | |
| transform: none !important; | |
| animation: none !important; | |
| } | |
| .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large, | |
| .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-text, | |
| .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner { | |
| transition-duration: 0ms; | |
| animation: none !important; | |
| } | |
| @keyframes ios-navbar-element-fade-in { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes ios-navbar-element-fade-out { | |
| from { | |
| opacity: 1; | |
| } | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-slide-up { | |
| 0% { | |
| transform: translateY(0%); | |
| } | |
| 100% { | |
| transform: translateY(calc(-1 * var(--f7-navbar-large-title-height))); | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-slide-down { | |
| 0% { | |
| transform: translateY(calc(-1 * var(--f7-navbar-large-title-height))); | |
| } | |
| 100% { | |
| transform: translateY(0%); | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-text-slide-up { | |
| 0% { | |
| transform: translateX(0px) translateY(0%) scale(1); | |
| } | |
| 100% { | |
| transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5); | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-text-slide-down { | |
| 0% { | |
| transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5); | |
| } | |
| 100% { | |
| transform: translateX(0px) translateY(0%) scale(1); | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-text-slide-left { | |
| 0% { | |
| transform: translateX(0%) scale(1); | |
| } | |
| 100% { | |
| transform: translateX(-100%) scale(1); | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-text-slide-right { | |
| 0% { | |
| transform: translateX(-100%) scale(1); | |
| } | |
| 100% { | |
| transform: translateX(0%) scale(1); | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-text-slide-left-top { | |
| 0% { | |
| transform: translateX(100%) translateY(var(--f7-navbar-large-title-height)) scale(1); | |
| } | |
| 100% { | |
| transform: translateX(0%) translateY(0%) scale(1); | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-text-slide-right-bottom { | |
| 0% { | |
| transform: translateX(0%) translateY(0%) scale(1); | |
| } | |
| 100% { | |
| transform: translateX(100%) translateY(var(--f7-navbar-large-title-height)) scale(1); | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-text-fade-out { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 80% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-text-fade-in { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 20% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-text-scale-out { | |
| 0% { | |
| transform: translateY(0%) scale(1); | |
| } | |
| 100% { | |
| transform: translateY(0%) scale(0.5); | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-text-scale-in { | |
| 0% { | |
| transform: translateY(0%) scale(0.5); | |
| } | |
| 100% { | |
| transform: translateY(0%) scale(1); | |
| } | |
| } | |
| @keyframes ios-navbar-back-text-current-to-previous { | |
| 0% { | |
| opacity: 1; | |
| transform: translateY(0px) translateX(0px) scale(1); | |
| } | |
| 80% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2); | |
| } | |
| } | |
| @keyframes ios-navbar-back-text-next-to-current { | |
| 0% { | |
| opacity: 0; | |
| transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2); | |
| } | |
| 20% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateX(0px) translateY(0px) scale(1); | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-inner-current-to-previous { | |
| 0% { | |
| transform: translateX(0%); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes ios-navbar-title-large-inner-previous-to-current { | |
| 0% { | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translateX(0%); | |
| opacity: 1; | |
| } | |
| } | |
| .md .navbar a.link { | |
| padding: 0 16px; | |
| min-width: 48px; | |
| } | |
| .md .navbar a.link:before { | |
| content: ''; | |
| width: 152%; | |
| height: 152%; | |
| position: absolute; | |
| left: -26%; | |
| top: -26%; | |
| background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: 100% 100%; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition-duration: 600ms; | |
| } | |
| .md .navbar a.link.active-state:before { | |
| opacity: 1; | |
| transition-duration: 150ms; | |
| } | |
| .md .navbar a.icon-only { | |
| min-width: 0; | |
| flex-shrink: 0; | |
| width: 56px; | |
| } | |
| .md .navbar .right { | |
| margin-left: auto; | |
| } | |
| .md .navbar .right:first-child { | |
| right: var(--f7-safe-area-right); | |
| } | |
| .md .navbar-inner { | |
| justify-content: flex-start; | |
| overflow: hidden; | |
| } | |
| .md .navbar-inner-large:not(.navbar-inner-large-collapsed) { | |
| overflow: visible; | |
| } | |
| .md .page.page-with-subnavbar .navbar-inner { | |
| overflow: visible; | |
| } | |
| .md .navbar-inner-centered-title { | |
| justify-content: space-between; | |
| } | |
| .md .navbar-inner-centered-title .right { | |
| margin-left: 0; | |
| } | |
| .md .navbar-inner-centered-title .title { | |
| text-align: center; | |
| } | |
| /* === Toolbar === */ | |
| :root { | |
| /* | |
| --f7-toolbar-bg-color: var(--f7-bars-bg-color); | |
| --f7-toolbar-bg-image: var(--f7-bars-bg-image); | |
| --f7-toolbar-border-color: var(--f7-bars-border-color); | |
| --f7-toolbar-link-color: var(--f7-bars-link-color); | |
| --f7-toolbar-text-color: var(--f7-bars-text-color); | |
| */ | |
| --f7-toolbar-hide-show-transition-duration: 400ms; | |
| } | |
| .ios { | |
| --f7-toolbar-height: 44px; | |
| --f7-toolbar-font-size: 17px; | |
| --f7-tabbar-labels-height: 50px; | |
| --f7-tabbar-labels-tablet-height: 56px; | |
| --f7-tabbar-link-inactive-color: #929292; | |
| /* | |
| --f7-tabbar-link-active-color: var(--f7-theme-color); | |
| */ | |
| --f7-toolbar-top-shadow-image: none; | |
| --f7-toolbar-bottom-shadow-image: none; | |
| --f7-tabbar-icon-size: 28px; | |
| --f7-tabbar-link-text-transform: none; | |
| --f7-tabbar-link-font-weight: 400; | |
| --f7-tabbar-link-letter-spacing: 0; | |
| --f7-tabbar-label-font-size: 10px; | |
| --f7-tabbar-label-tablet-font-size: 14px; | |
| --f7-tabbar-label-text-transform: none; | |
| --f7-tabbar-label-font-weight: 400; | |
| --f7-tabbar-label-letter-spacing: 0.01; | |
| } | |
| .md { | |
| --f7-toolbar-height: 48px; | |
| --f7-toolbar-font-size: 14px; | |
| --f7-tabbar-labels-height: 56px; | |
| --f7-tabbar-labels-tablet-height: 56px; | |
| --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54); | |
| /* | |
| --f7-tabbar-link-active-color: var(--f7-theme-color); | |
| --f7-tabbar-link-active-border-color: var(--f7-theme-color); | |
| */ | |
| --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image); | |
| --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image); | |
| --f7-tabbar-icon-size: 24px; | |
| --f7-tabbar-link-text-transform: uppercase; | |
| --f7-tabbar-link-font-weight: 500; | |
| --f7-tabbar-link-letter-spacing: 0.03em; | |
| --f7-tabbar-label-font-size: 14px; | |
| --f7-tabbar-label-tablet-font-size: 14px; | |
| --f7-tabbar-label-text-transform: none; | |
| --f7-tabbar-label-font-weight: 400; | |
| --f7-tabbar-label-letter-spacing: 0; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54); | |
| } | |
| .toolbar { | |
| width: 100%; | |
| position: relative; | |
| margin: 0; | |
| transform: translate3d(0, 0, 0); | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| z-index: 500; | |
| box-sizing: border-box; | |
| left: 0; | |
| height: var(--f7-toolbar-height); | |
| background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image)); | |
| background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color))); | |
| color: var(--f7-toolbar-text-color, var(--f7-bars-text-color)); | |
| font-size: var(--f7-toolbar-font-size); | |
| } | |
| .toolbar b { | |
| font-weight: 600; | |
| } | |
| .toolbar a { | |
| color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color))); | |
| box-sizing: border-box; | |
| flex-shrink: 1; | |
| position: relative; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| .toolbar a.link { | |
| display: flex; | |
| line-height: var(--f7-toolbar-height); | |
| height: var(--f7-toolbar-height); | |
| } | |
| .toolbar i.icon { | |
| display: block; | |
| } | |
| .toolbar:after, | |
| .toolbar:before { | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| } | |
| .views > .toolbar, | |
| .view > .toolbar, | |
| .page > .toolbar { | |
| position: absolute; | |
| } | |
| .toolbar-top, | |
| .ios .toolbar-top-ios, | |
| .md .toolbar-top-md { | |
| top: 0; | |
| } | |
| .toolbar-top .tab-link-highlight, | |
| .ios .toolbar-top-ios .tab-link-highlight, | |
| .md .toolbar-top-md .tab-link-highlight { | |
| bottom: 0; | |
| } | |
| .toolbar-top.no-hairline:after, | |
| .ios .toolbar-top-ios.no-hairline:after, | |
| .md .toolbar-top-md.no-hairline:after, | |
| .toolbar-top.no-border:after, | |
| .ios .toolbar-top-ios.no-border:after, | |
| .md .toolbar-top-md.no-border:after { | |
| display: none !important; | |
| } | |
| .toolbar-top.no-shadow:before, | |
| .ios .toolbar-top-ios.no-shadow:before, | |
| .md .toolbar-top-md.no-shadow:before, | |
| .toolbar-top.toolbar-hidden:before, | |
| .ios .toolbar-top-ios.toolbar-hidden:before, | |
| .md .toolbar-top-md.toolbar-hidden:before { | |
| display: none !important; | |
| } | |
| .toolbar-top:after, | |
| .ios .toolbar-top-ios:after, | |
| .md .toolbar-top-md:after, | |
| .toolbar-top:before, | |
| .ios .toolbar-top-ios:before, | |
| .md .toolbar-top-md:before { | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| } | |
| .toolbar-top:after, | |
| .ios .toolbar-top-ios:after, | |
| .md .toolbar-top-md:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color)); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .toolbar-top:before, | |
| .ios .toolbar-top-ios:before, | |
| .md .toolbar-top-md:before { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| width: 100%; | |
| top: 100%; | |
| bottom: auto; | |
| height: 8px; | |
| pointer-events: none; | |
| background: var(--f7-toolbar-top-shadow-image, var(--f7-bars-shadow-bottom-image)); | |
| } | |
| .toolbar-bottom, | |
| .ios .toolbar-bottom-ios, | |
| .md .toolbar-bottom-md { | |
| bottom: 0; | |
| height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom)); | |
| } | |
| .toolbar-bottom .tab-link-highlight, | |
| .ios .toolbar-bottom-ios .tab-link-highlight, | |
| .md .toolbar-bottom-md .tab-link-highlight { | |
| top: 0; | |
| } | |
| .toolbar-bottom .toolbar-inner, | |
| .ios .toolbar-bottom-ios .toolbar-inner, | |
| .md .toolbar-bottom-md .toolbar-inner { | |
| height: auto; | |
| top: 0; | |
| bottom: var(--f7-safe-area-bottom); | |
| } | |
| .toolbar-bottom.no-hairline:before, | |
| .ios .toolbar-bottom-ios.no-hairline:before, | |
| .md .toolbar-bottom-md.no-hairline:before, | |
| .toolbar-bottom.no-border:before, | |
| .ios .toolbar-bottom-ios.no-border:before, | |
| .md .toolbar-bottom-md.no-border:before { | |
| display: none !important; | |
| } | |
| .toolbar-bottom.no-shadow:after, | |
| .ios .toolbar-bottom-ios.no-shadow:after, | |
| .md .toolbar-bottom-md.no-shadow:after, | |
| .toolbar-bottom.toolbar-hidden:after, | |
| .ios .toolbar-bottom-ios.toolbar-hidden:after, | |
| .md .toolbar-bottom-md.toolbar-hidden:after { | |
| display: none !important; | |
| } | |
| .toolbar-bottom:before, | |
| .ios .toolbar-bottom-ios:before, | |
| .md .toolbar-bottom-md:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color)); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .toolbar-bottom:after, | |
| .ios .toolbar-bottom-ios:after, | |
| .md .toolbar-bottom-md:after { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| width: 100%; | |
| bottom: 100%; | |
| height: 8px; | |
| top: auto; | |
| pointer-events: none; | |
| background: var(--f7-toolbar-bottom-shadow-image, var(--f7-bars-shadow-top-image)); | |
| } | |
| .toolbar-inner { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| align-items: center; | |
| align-content: center; | |
| overflow: hidden; | |
| } | |
| .views > .tabbar, | |
| .views > .tabbar-labels { | |
| z-index: 5001; | |
| } | |
| .tabbar a, | |
| .tabbar-labels a { | |
| color: var(--f7-tabbar-link-inactive-color); | |
| } | |
| .tabbar a.link, | |
| .tabbar-labels a.link { | |
| line-height: 1.4; | |
| } | |
| .tabbar a.tab-link, | |
| .tabbar-labels a.tab-link, | |
| .tabbar a.link, | |
| .tabbar-labels a.link { | |
| height: 100%; | |
| width: 100%; | |
| box-sizing: border-box; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| text-transform: var(--f7-tabbar-link-text-transform); | |
| font-weight: var(--f7-tabbar-link-font-weight); | |
| letter-spacing: var(--f7-tabbar-link-letter-spacing); | |
| overflow: hidden; | |
| } | |
| .tabbar .tab-link-active, | |
| .tabbar-labels .tab-link-active { | |
| color: var(--f7-tabbar-link-active-color, var(--f7-theme-color)); | |
| } | |
| .tabbar i.icon, | |
| .tabbar-labels i.icon { | |
| font-size: var(--f7-tabbar-icon-size); | |
| height: var(--f7-tabbar-icon-size); | |
| line-height: var(--f7-tabbar-icon-size); | |
| } | |
| .tabbar-labels { | |
| --f7-toolbar-height: var(--f7-tabbar-labels-height); | |
| } | |
| .tabbar-labels a.tab-link, | |
| .tabbar-labels a.link { | |
| height: 100%; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .tabbar-labels .tabbar-label { | |
| display: block; | |
| line-height: 1; | |
| margin: 0; | |
| position: relative; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| font-size: var(--f7-tabbar-label-font-size); | |
| text-transform: var(--f7-tabbar-label-text-transform); | |
| font-weight: var(--f7-tabbar-label-font-weight); | |
| letter-spacing: var(--f7-tabbar-label-letter-spacing); | |
| } | |
| @media (min-width: 768px) { | |
| :root { | |
| --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height); | |
| --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size); | |
| } | |
| } | |
| .tabbar-scrollable .toolbar-inner { | |
| will-change: scroll-position; | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .tabbar-scrollable .toolbar-inner::-webkit-scrollbar { | |
| display: none !important; | |
| width: 0 !important; | |
| height: 0 !important; | |
| -webkit-appearance: none; | |
| opacity: 0 !important; | |
| } | |
| .tabbar-scrollable a.tab-link, | |
| .tabbar-scrollable a.link { | |
| width: auto; | |
| flex-shrink: 0; | |
| } | |
| .toolbar-transitioning, | |
| .navbar-transitioning + .toolbar, | |
| .navbar-transitioning ~ * .toolbar { | |
| transition-duration: var(--f7-toolbar-hide-show-transition-duration); | |
| } | |
| .toolbar-bottom.toolbar-hidden, | |
| .ios .toolbar-bottom-ios.toolbar-hidden, | |
| .md .toolbar-bottom-md.toolbar-hidden { | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| .toolbar-bottom ~ .page-content, | |
| .ios .toolbar-bottom-ios ~ .page-content, | |
| .md .toolbar-bottom-md ~ .page-content, | |
| .toolbar-bottom ~ * .page-content, | |
| .ios .toolbar-bottom-ios ~ * .page-content, | |
| .md .toolbar-bottom-md ~ * .page-content { | |
| padding-bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom)); | |
| } | |
| .toolbar-bottom.tabbar-labels ~ .page-content, | |
| .ios .toolbar-bottom-ios.tabbar-labels ~ .page-content, | |
| .md .toolbar-bottom-md.tabbar-labels ~ .page-content, | |
| .toolbar-bottom.tabbar-labels ~ * .page-content, | |
| .ios .toolbar-bottom-ios.tabbar-labels ~ * .page-content, | |
| .md .toolbar-bottom-md.tabbar-labels ~ * .page-content { | |
| padding-bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom)); | |
| } | |
| .toolbar-top.toolbar-hidden, | |
| .ios .toolbar-top-ios.toolbar-hidden, | |
| .md .toolbar-top-md.toolbar-hidden { | |
| transform: translate3d(0, -100%, 0); | |
| } | |
| .toolbar-top ~ .page-content, | |
| .ios .toolbar-top-ios ~ .page-content, | |
| .md .toolbar-top-md ~ .page-content, | |
| .toolbar-top ~ * .page-content, | |
| .ios .toolbar-top-ios ~ * .page-content, | |
| .md .toolbar-top-md ~ * .page-content { | |
| padding-top: var(--f7-toolbar-height); | |
| } | |
| .toolbar-top.tabbar-labels ~ .page-content, | |
| .ios .toolbar-top-ios.tabbar-labels ~ .page-content, | |
| .md .toolbar-top-md.tabbar-labels ~ .page-content, | |
| .toolbar-top.tabbar-labels ~ * .page-content, | |
| .ios .toolbar-top-ios.tabbar-labels ~ * .page-content, | |
| .md .toolbar-top-md.tabbar-labels ~ * .page-content { | |
| padding-top: var(--f7-tabbar-labels-height); | |
| } | |
| .navbar ~ .toolbar-top, | |
| .ios .navbar ~ .toolbar-top-ios, | |
| .md .navbar ~ .toolbar-top-md, | |
| .navbar ~ * .toolbar-top, | |
| .ios .navbar ~ * .toolbar-top-ios, | |
| .md .navbar ~ * .toolbar-top-md, | |
| .navbar ~ .page:not(.no-navbar) .toolbar-top, | |
| .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios, | |
| .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md { | |
| top: var(--f7-navbar-height); | |
| } | |
| .navbar ~ .toolbar-top ~ .page-content, | |
| .ios .navbar ~ .toolbar-top-ios ~ .page-content, | |
| .md .navbar ~ .toolbar-top-md ~ .page-content, | |
| .navbar ~ * .toolbar-top ~ .page-content, | |
| .ios .navbar ~ * .toolbar-top-ios ~ .page-content, | |
| .md .navbar ~ * .toolbar-top-md ~ .page-content, | |
| .navbar ~ .page:not(.no-navbar) .toolbar-top ~ .page-content, | |
| .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios ~ .page-content, | |
| .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md ~ .page-content, | |
| .navbar ~ .toolbar-top ~ * .page-content, | |
| .ios .navbar ~ .toolbar-top-ios ~ * .page-content, | |
| .md .navbar ~ .toolbar-top-md ~ * .page-content, | |
| .navbar ~ * .toolbar-top ~ * .page-content, | |
| .ios .navbar ~ * .toolbar-top-ios ~ * .page-content, | |
| .md .navbar ~ * .toolbar-top-md ~ * .page-content, | |
| .navbar ~ .page:not(.no-navbar) .toolbar-top ~ * .page-content, | |
| .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios ~ * .page-content, | |
| .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md ~ * .page-content { | |
| padding-top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height)); | |
| } | |
| .navbar ~ .toolbar-top.tabbar-labels ~ .page-content, | |
| .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .page-content, | |
| .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .page-content, | |
| .navbar ~ * .toolbar-top.tabbar-labels ~ .page-content, | |
| .ios .navbar ~ * .toolbar-top-ios.tabbar-labels ~ .page-content, | |
| .md .navbar ~ * .toolbar-top-md.tabbar-labels ~ .page-content, | |
| .navbar ~ .page:not(.no-navbar) .toolbar-top.tabbar-labels ~ .page-content, | |
| .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.tabbar-labels ~ .page-content, | |
| .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.tabbar-labels ~ .page-content, | |
| .navbar ~ .toolbar-top.tabbar-labels ~ * .page-content, | |
| .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ * .page-content, | |
| .md .navbar ~ .toolbar-top-md.tabbar-labels ~ * .page-content, | |
| .navbar ~ * .toolbar-top.tabbar-labels ~ * .page-content, | |
| .ios .navbar ~ * .toolbar-top-ios.tabbar-labels ~ * .page-content, | |
| .md .navbar ~ * .toolbar-top-md.tabbar-labels ~ * .page-content, | |
| .navbar ~ .page:not(.no-navbar) .toolbar-top.tabbar-labels ~ * .page-content, | |
| .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.tabbar-labels ~ * .page-content, | |
| .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.tabbar-labels ~ * .page-content { | |
| padding-top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height)); | |
| } | |
| .navbar ~ .toolbar-top.toolbar-hidden, | |
| .ios .navbar ~ .toolbar-top-ios.toolbar-hidden, | |
| .md .navbar ~ .toolbar-top-md.toolbar-hidden, | |
| .navbar ~ * .toolbar-top.toolbar-hidden, | |
| .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden, | |
| .md .navbar ~ * .toolbar-top-md.toolbar-hidden, | |
| .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden, | |
| .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden, | |
| .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden { | |
| transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height))), 0); | |
| } | |
| .navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels, | |
| .ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels, | |
| .md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels, | |
| .navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels, | |
| .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels, | |
| .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels, | |
| .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels, | |
| .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels, | |
| .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels { | |
| transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height))), 0); | |
| } | |
| .navbar-hidden + .toolbar-top:not(.toolbar-hidden), | |
| .ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden), | |
| .md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden), | |
| .navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden), | |
| .ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden), | |
| .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) { | |
| transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0); | |
| } | |
| .navbar-large-hidden + .toolbar-top:not(.toolbar-hidden), | |
| .ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden), | |
| .md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden), | |
| .navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden), | |
| .ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden), | |
| .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) { | |
| transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height))), 0); | |
| } | |
| .ios .toolbar a.icon-only { | |
| min-height: var(--f7-toolbar-height); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin: 0; | |
| min-width: 44px; | |
| } | |
| .ios .toolbar-inner { | |
| padding: 0 calc(8px + var(--f7-safe-area-right)) 0 calc(8px + var(--f7-safe-area-left)); | |
| } | |
| .ios .tabbar-labels a.tab-link, | |
| .ios .tabbar-labels a.link { | |
| padding-top: 4px; | |
| padding-bottom: 4px; | |
| } | |
| .ios .tabbar-labels a.tab-link i + span, | |
| .ios .tabbar-labels a.link i + span { | |
| margin: 0; | |
| } | |
| @media (min-width: 768px) { | |
| .ios .tabbar .toolbar-inner, | |
| .ios .tabbar-labels .toolbar-inner { | |
| justify-content: center; | |
| } | |
| .ios .tabbar a.tab-link, | |
| .ios .tabbar-labels a.tab-link, | |
| .ios .tabbar a.link, | |
| .ios .tabbar-labels a.link { | |
| width: auto; | |
| min-width: 105px; | |
| } | |
| } | |
| .ios .tabbar-scrollable .toolbar-inner { | |
| justify-content: flex-start; | |
| } | |
| .ios .tabbar-scrollable a.tab-link, | |
| .ios .tabbar-scrollable a.link { | |
| padding: 0 8px; | |
| } | |
| .md .toolbar a.link { | |
| justify-content: center; | |
| padding: 0 16px; | |
| min-width: 48px; | |
| } | |
| .md .toolbar a.link:before { | |
| content: ''; | |
| width: 152%; | |
| height: 152%; | |
| position: absolute; | |
| left: -26%; | |
| top: -26%; | |
| background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: 100% 100%; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition-duration: 600ms; | |
| } | |
| .md .toolbar a.link.active-state:before { | |
| opacity: 1; | |
| transition-duration: 150ms; | |
| } | |
| .md .toolbar a.icon-only { | |
| min-width: 0; | |
| flex-shrink: 0; | |
| } | |
| .md .toolbar-inner { | |
| padding: 0 var(--f7-safe-area-right) 0 var(--f7-safe-area-left); | |
| } | |
| .md .tabbar a.tab-link, | |
| .md .tabbar-labels a.tab-link, | |
| .md .tabbar a.link, | |
| .md .tabbar-labels a.link { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .md .tabbar a.tab-link, | |
| .md .tabbar-labels a.tab-link { | |
| transition-duration: 300ms; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .md .tabbar .tab-link-highlight, | |
| .md .tabbar-labels .tab-link-highlight { | |
| position: absolute; | |
| height: 2px; | |
| background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color)); | |
| transition-duration: 300ms; | |
| left: 0; | |
| } | |
| .md .tabbar-labels a.tab-link, | |
| .md .tabbar-labels a.link { | |
| padding-top: 7px; | |
| padding-bottom: 7px; | |
| } | |
| .md .tabbar-label { | |
| max-width: 100%; | |
| overflow: hidden; | |
| line-height: 1.2; | |
| } | |
| .md .tabbar-scrollable .toolbar-inner { | |
| overflow: auto; | |
| justify-content: flex-start; | |
| } | |
| .md .tabbar-scrollable a.tab-link, | |
| .md .tabbar-scrollable a.link { | |
| padding: 0 16px; | |
| } | |
| /* === Subnavbar === */ | |
| :root { | |
| /* | |
| --f7-subnavbar-bg-image: var(--f7-bars-bg-image); | |
| --f7-subnavbar-bg-color: var(--f7-bars-bg-color); | |
| --f7-subnavbar-border-color: var(--f7-bars-border-color); | |
| --f7-subnavbar-link-color: var(--f7-bars-link-color); | |
| --f7-subnavbar-text-color: var(--f7-bars-text-color); | |
| */ | |
| } | |
| .ios { | |
| --f7-subnavbar-height: 44px; | |
| --f7-subnavbar-inner-padding-left: 8px; | |
| --f7-subnavbar-inner-padding-right: 8px; | |
| --f7-subnavbar-title-font-size: 34px; | |
| --f7-subnavbar-title-font-weight: 700; | |
| --f7-subnavbar-title-line-height: 1.2; | |
| --f7-subnavbar-title-letter-spacing: -0.03em; | |
| --f7-subnavbar-title-margin-left: 7px; | |
| --f7-navbar-shadow-image: none; | |
| } | |
| .md { | |
| --f7-subnavbar-height: 48px; | |
| --f7-subnavbar-inner-padding-left: 16px; | |
| --f7-subnavbar-inner-padding-right: 16px; | |
| --f7-subnavbar-title-font-size: 20px; | |
| --f7-subnavbar-title-font-weight: 500; | |
| --f7-subnavbar-title-line-height: 1.2; | |
| --f7-subnavbar-title-letter-spacing: 0; | |
| --f7-subnavbar-title-margin-left: 0px; | |
| --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image); | |
| } | |
| .subnavbar { | |
| width: 100%; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| z-index: 500; | |
| box-sizing: border-box; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image)); | |
| background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color))); | |
| color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color)); | |
| } | |
| .subnavbar .title { | |
| position: relative; | |
| overflow: hidden; | |
| text-overflow: ellpsis; | |
| white-space: nowrap; | |
| font-size: var(--f7-subnavbar-title-font-size); | |
| font-weight: var(--f7-subnavbar-title-font-weight); | |
| text-align: left; | |
| display: inline-block; | |
| line-height: var(--f7-subnavbar-title-line-height); | |
| letter-spacing: var(--f7-subnavbar-title-letter-spacing); | |
| margin-left: var(--f7-subnavbar-title-margin-left); | |
| } | |
| .subnavbar .left, | |
| .subnavbar .right { | |
| flex-shrink: 0; | |
| display: flex; | |
| justify-content: flex-start; | |
| align-items: center; | |
| } | |
| .subnavbar .right:first-child { | |
| position: absolute; | |
| height: 100%; | |
| } | |
| .subnavbar a { | |
| color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color))); | |
| } | |
| .subnavbar a.link { | |
| line-height: var(--f7-subnavbar-height); | |
| height: var(--f7-subnavbar-height); | |
| } | |
| .subnavbar a.icon-only { | |
| min-width: var(--f7-subnavbar-height); | |
| } | |
| .subnavbar.no-hairline:after, | |
| .subnavbar.no-border:after { | |
| display: none !important; | |
| } | |
| .subnavbar.no-shadow:before, | |
| .subnavbar.navbar-hidden:before { | |
| display: none !important; | |
| } | |
| .subnavbar:after, | |
| .subnavbar:before { | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| } | |
| .subnavbar:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color)); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .subnavbar:before { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| width: 100%; | |
| top: 100%; | |
| bottom: auto; | |
| height: 8px; | |
| pointer-events: none; | |
| background: var(--f7-navbar-shadow-image, var(--f7-bars-shadow-bottom-image)); | |
| } | |
| .subnavbar-inner { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| box-sizing: border-box; | |
| justify-content: space-between; | |
| overflow: hidden; | |
| padding: 0 calc(var(--f7-subnavbar-inner-padding-left) + var(--f7-safe-area-right)) 0 calc(var(--f7-subnavbar-inner-padding-right) + var(--f7-safe-area-left)); | |
| } | |
| .subnavbar-inner.stacked { | |
| display: none; | |
| } | |
| .navbar .subnavbar { | |
| top: 100%; | |
| } | |
| .views > .subnavbar, | |
| .view > .subnavbar, | |
| .page > .subnavbar { | |
| position: absolute; | |
| } | |
| .navbar ~ * .subnavbar, | |
| .page-with-subnavbar .navbar ~ .subnavbar, | |
| .page-with-subnavbar .navbar ~ * .subnavbar, | |
| .navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar, | |
| .navbar ~ .subnavbar { | |
| top: var(--f7-navbar-height); | |
| } | |
| .navbar .title-large ~ .subnavbar { | |
| top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height)); | |
| transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0); | |
| } | |
| .page-with-subnavbar .page-content, | |
| .subnavbar ~ .page-content, | |
| .subnavbar ~ * .page-content { | |
| padding-top: var(--f7-subnavbar-height); | |
| } | |
| .navbar ~ .page-with-subnavbar:not(.no-navbar) .page-content, | |
| .navbar ~ *:not(.no-navbar) .subnavbar ~ .page-content, | |
| .navbar ~ *:not(.no-navbar) .subnavbar ~ * .page-content, | |
| .navbar ~ .subnavbar ~ .page-content, | |
| .navbar ~ .subnavbar ~ * .page-content, | |
| .page-with-subnavbar .navbar ~ * .page-content, | |
| .page-with-subnavbar .navbar ~ .page-content { | |
| padding-top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height)); | |
| } | |
| .navbar ~ .page-with-subnavbar.page-with-navbar-large:not(.no-navbar) .page-content, | |
| .page-with-subnavbar.page-with-navbar-large .navbar ~ * .page-content, | |
| .page-with-subnavbar.page-with-navbar-large .navbar ~ .page-content, | |
| .page-with-subnavbar.page-with-navbar-large .page-content { | |
| padding-top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height) + var(--f7-navbar-large-title-height)); | |
| } | |
| .ios .subnavbar { | |
| height: calc(var(--f7-subnavbar-height) + 1px); | |
| margin-top: -1px; | |
| padding-top: 1px; | |
| } | |
| .ios .subnavbar .title { | |
| align-self: flex-start; | |
| flex-shrink: 10; | |
| } | |
| .ios .subnavbar .left a + a, | |
| .ios .subnavbar .right a + a { | |
| margin-left: 15px; | |
| } | |
| .ios .subnavbar .left { | |
| margin-right: 10px; | |
| } | |
| .ios .subnavbar .right { | |
| margin-left: 10px; | |
| } | |
| .ios .subnavbar .right:first-child { | |
| right: 8px; | |
| } | |
| .ios .subnavbar a.link { | |
| justify-content: flex-start; | |
| } | |
| .ios .subnavbar a.icon-only { | |
| justify-content: center; | |
| margin: 0; | |
| } | |
| .md .subnavbar { | |
| height: var(--f7-subnavbar-height); | |
| } | |
| .md .subnavbar .right { | |
| margin-left: auto; | |
| } | |
| .md .subnavbar .right:first-child { | |
| right: 16px; | |
| } | |
| .md .subnavbar a.link { | |
| justify-content: center; | |
| padding: 0 16px; | |
| } | |
| .md .subnavbar a.link:before { | |
| content: ''; | |
| width: 152%; | |
| height: 152%; | |
| position: absolute; | |
| left: -26%; | |
| top: -26%; | |
| background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: 100% 100%; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition-duration: 600ms; | |
| } | |
| .md .subnavbar a.link.active-state:before { | |
| opacity: 1; | |
| transition-duration: 150ms; | |
| } | |
| .md .subnavbar a.icon-only { | |
| flex-shrink: 0; | |
| } | |
| .md .subnavbar-inner > a.link:first-child { | |
| margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left)); | |
| } | |
| .md .subnavbar-inner > a.link:last-child { | |
| margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right)); | |
| } | |
| /* === Content Block === */ | |
| :root { | |
| --f7-block-font-size: inherit; | |
| --f7-block-strong-bg-color: #fff; | |
| --f7-block-title-font-size: inherit; | |
| --f7-block-header-margin: 10px; | |
| --f7-block-footer-margin: 10px; | |
| --f7-block-header-font-size: 14px; | |
| --f7-block-footer-font-size: 14px; | |
| --f7-block-title-white-space: nowrap; | |
| --f7-block-title-medium-text-color: #000; | |
| --f7-block-title-medium-text-transform: none; | |
| --f7-block-title-large-text-color: #000; | |
| --f7-block-title-large-text-transform: none; | |
| } | |
| :root .theme-dark, | |
| :root.theme-dark { | |
| --f7-block-title-medium-text-color: #fff; | |
| --f7-block-title-large-text-color: #fff; | |
| } | |
| .ios { | |
| --f7-block-text-color: #6d6d72; | |
| --f7-block-padding-horizontal: 15px; | |
| --f7-block-padding-vertical: 15px; | |
| --f7-block-margin-vertical: 35px; | |
| --f7-block-strong-text-color: #000; | |
| --f7-block-strong-border-color: #c8c7cc; | |
| --f7-block-title-text-transform: uppercase; | |
| --f7-block-title-text-color: #6d6d72; | |
| --f7-block-title-font-weight: 400; | |
| --f7-block-title-line-height: 17px; | |
| --f7-block-title-margin-bottom: 10px; | |
| --f7-block-title-medium-font-size: 22px; | |
| --f7-block-title-medium-font-weight: bold; | |
| --f7-block-title-medium-line-height: 1.4; | |
| --f7-block-title-large-font-size: 29px; | |
| --f7-block-title-large-font-weight: bold; | |
| --f7-block-title-large-line-height: 1.3; | |
| --f7-block-inset-side-margin: 15px; | |
| --f7-block-inset-border-radius: 7px; | |
| --f7-block-header-text-color: #8f8f94; | |
| --f7-block-footer-text-color: #8f8f94; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-block-strong-border-color: #282829; | |
| --f7-block-title-text-color: #8E8E93; | |
| --f7-block-header-text-color: #8E8E93; | |
| --f7-block-footer-text-color: #8E8E93; | |
| --f7-block-strong-bg-color: #1c1c1d; | |
| --f7-block-strong-text-color: #fff; | |
| } | |
| .md { | |
| --f7-block-text-color: inherit; | |
| --f7-block-padding-horizontal: 16px; | |
| --f7-block-padding-vertical: 16px; | |
| --f7-block-margin-vertical: 32px; | |
| --f7-block-strong-text-color: inherit; | |
| --f7-block-strong-border-color: rgba(0, 0, 0, 0.12); | |
| --f7-block-title-text-transform: none; | |
| --f7-block-title-text-color: rgba(0, 0, 0, 0.54); | |
| --f7-block-title-font-weight: 500; | |
| --f7-block-title-line-height: 16px; | |
| --f7-block-title-margin-bottom: 16px; | |
| --f7-block-title-medium-font-size: 24px; | |
| --f7-block-title-medium-font-weight: 500; | |
| --f7-block-title-medium-line-height: 1.3; | |
| --f7-block-title-large-font-size: 34px; | |
| --f7-block-title-large-font-weight: 500; | |
| --f7-block-title-large-line-height: 1.2; | |
| --f7-block-inset-side-margin: 16px; | |
| --f7-block-inset-border-radius: 4px; | |
| --f7-block-header-text-color: rgba(0, 0, 0, 0.54); | |
| --f7-block-footer-text-color: rgba(0, 0, 0, 0.54); | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-block-strong-border-color: #282829; | |
| --f7-block-title-text-color: #fff; | |
| --f7-block-header-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-block-footer-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-block-strong-bg-color: #1c1c1d; | |
| } | |
| .block { | |
| box-sizing: border-box; | |
| position: relative; | |
| z-index: 1; | |
| color: var(--f7-block-text-color); | |
| margin: var(--f7-block-margin-vertical) 0; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left)); | |
| padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right)); | |
| font-size: var(--f7-block-font-size); | |
| } | |
| .block.no-hairlines:before, | |
| .block.no-hairlines ul:before, | |
| .md .block.no-hairlines-md:before, | |
| .md .block.no-hairlines-md ul:before, | |
| .ios .block.no-hairlines-ios:before, | |
| .ios .block.no-hairlines-ios ul:before { | |
| display: none !important; | |
| } | |
| .block.no-hairlines:after, | |
| .block.no-hairlines ul:after, | |
| .md .block.no-hairlines-md:after, | |
| .md .block.no-hairlines-md ul:after, | |
| .ios .block.no-hairlines-ios:after, | |
| .ios .block.no-hairlines-ios ul:after { | |
| display: none !important; | |
| } | |
| .block.no-hairline-top:before, | |
| .block.no-hairline-top ul:before, | |
| .md .block.no-hairline-top-md:before, | |
| .md .block.no-hairline-top-md ul:before, | |
| .ios .block.no-hairline-top-ios:before, | |
| .ios .block.no-hairline-top-ios ul:before { | |
| display: none !important; | |
| } | |
| .block.no-hairline-bottom:after, | |
| .block.no-hairline-bottom ul:after, | |
| .md .block.no-hairline-bottom-md:after, | |
| .md .block.no-hairline-bottom-md ul:after, | |
| .ios .block.no-hairline-bottom-ios:after, | |
| .ios .block.no-hairline-bottom-ios ul:after { | |
| display: none !important; | |
| } | |
| .block > h1:first-child, | |
| .block > h2:first-child, | |
| .block > h3:first-child, | |
| .block > h4:first-child, | |
| .block > p:first-child { | |
| margin-top: 0; | |
| } | |
| .block > h1:last-child, | |
| .block > h2:last-child, | |
| .block > h3:last-child, | |
| .block > h4:last-child, | |
| .block > p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .block-strong { | |
| color: var(--f7-block-strong-text-color); | |
| padding-top: var(--f7-block-padding-vertical); | |
| padding-bottom: var(--f7-block-padding-vertical); | |
| background-color: var(--f7-block-strong-bg-color); | |
| } | |
| .block-strong:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-block-strong-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .block-strong:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-block-strong-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .block-title { | |
| position: relative; | |
| overflow: hidden; | |
| margin: 0; | |
| white-space: var(--f7-block-title-white-space); | |
| text-overflow: ellipsis; | |
| text-transform: var(--f7-block-title-text-transform); | |
| color: var(--f7-block-title-text-color); | |
| font-size: var(--f7-block-title-font-size, inherit); | |
| font-weight: var(--f7-block-title-font-weight); | |
| line-height: var(--f7-block-title-line-height); | |
| margin-top: var(--f7-block-margin-vertical); | |
| margin-bottom: var(--f7-block-title-margin-bottom); | |
| margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left)); | |
| margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right)); | |
| } | |
| .block-title + .list, | |
| .block-title + .block, | |
| .block-title + .card, | |
| .block-title + .timeline, | |
| .block-title + .block-header { | |
| margin-top: 0px; | |
| } | |
| .block-title-medium { | |
| font-size: var(--f7-block-title-medium-font-size); | |
| text-transform: var(--f7-block-title-medium-text-transform); | |
| color: var(--f7-block-title-medium-text-color); | |
| font-weight: var(--f7-block-title-medium-font-weight); | |
| line-height: var(--f7-block-title-medium-line-height); | |
| } | |
| .block-title-large { | |
| font-size: var(--f7-block-title-large-font-size); | |
| text-transform: var(--f7-block-title-large-text-transform); | |
| color: var(--f7-block-title-large-text-color); | |
| font-weight: var(--f7-block-title-large-font-weight); | |
| line-height: var(--f7-block-title-large-line-height); | |
| } | |
| .block > .block-title:first-child, | |
| .list > .block-title:first-child { | |
| margin-top: 0; | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| .block-header { | |
| color: var(--f7-block-header-text-color); | |
| font-size: var(--f7-block-header-font-size); | |
| margin-bottom: var(--f7-block-header-margin); | |
| margin-top: var(--f7-block-margin-vertical); | |
| } | |
| .block-header + .list, | |
| .block-header + .block, | |
| .block-header + .card, | |
| .block-header + .timeline { | |
| margin-top: var(--f7-block-header-margin); | |
| } | |
| .block-footer { | |
| color: var(--f7-block-footer-text-color); | |
| font-size: var(--f7-block-footer-font-size); | |
| margin-top: var(--f7-block-footer-margin); | |
| margin-bottom: var(--f7-block-margin-vertical); | |
| } | |
| .block-footer, | |
| .block-header { | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left)); | |
| padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right)); | |
| } | |
| .block-footer ul:first-child, | |
| .block-header ul:first-child, | |
| .block-footer p:first-child, | |
| .block-header p:first-child, | |
| .block-footer h1:first-child, | |
| .block-header h1:first-child, | |
| .block-footer h2:first-child, | |
| .block-header h2:first-child, | |
| .block-footer h3:first-child, | |
| .block-header h3:first-child, | |
| .block-footer h4:first-child, | |
| .block-header h4:first-child { | |
| margin-top: 0; | |
| } | |
| .block-footer ul:last-child, | |
| .block-header ul:last-child, | |
| .block-footer p:last-child, | |
| .block-header p:last-child, | |
| .block-footer h1:last-child, | |
| .block-header h1:last-child, | |
| .block-footer h2:last-child, | |
| .block-header h2:last-child, | |
| .block-footer h3:last-child, | |
| .block-header h3:last-child, | |
| .block-footer h4:last-child, | |
| .block-header h4:last-child { | |
| margin-bottom: 0; | |
| } | |
| .block-footer ul:first-child:last-child, | |
| .block-header ul:first-child:last-child, | |
| .block-footer p:first-child:last-child, | |
| .block-header p:first-child:last-child, | |
| .block-footer h1:first-child:last-child, | |
| .block-header h1:first-child:last-child, | |
| .block-footer h2:first-child:last-child, | |
| .block-header h2:first-child:last-child, | |
| .block-footer h3:first-child:last-child, | |
| .block-header h3:first-child:last-child, | |
| .block-footer h4:first-child:last-child, | |
| .block-header h4:first-child:last-child { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| .list .block-header, | |
| .block .block-header, | |
| .card .block-header, | |
| .timeline .block-header { | |
| margin-top: 0; | |
| } | |
| .list .block-footer, | |
| .block .block-footer, | |
| .card .block-footer, | |
| .timeline .block-footer { | |
| margin-bottom: 0; | |
| } | |
| .list + .block-footer, | |
| .block + .block-footer, | |
| .card + .block-footer, | |
| .timeline + .block-footer { | |
| margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin))); | |
| } | |
| .block + .block-footer { | |
| margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin))); | |
| margin-bottom: var(--f7-block-margin-vertical); | |
| } | |
| .block .block-header, | |
| .block .block-footer { | |
| padding: 0; | |
| } | |
| .block.inset { | |
| border-radius: var(--f7-block-inset-border-radius); | |
| margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left)); | |
| margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right)); | |
| --f7-safe-area-left: 0px; | |
| --f7-safe-area-right: 0px; | |
| } | |
| .block-strong.inset:before { | |
| display: none !important; | |
| } | |
| .block-strong.inset:after { | |
| display: none !important; | |
| } | |
| @media (min-width: 768px) { | |
| .block.tablet-inset { | |
| border-radius: var(--f7-block-inset-border-radius); | |
| margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left)); | |
| margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right)); | |
| --f7-safe-area-left: 0px; | |
| --f7-safe-area-right: 0px; | |
| } | |
| .block-strong.tablet-inset:before { | |
| display: none !important; | |
| } | |
| .block-strong.tablet-inset:after { | |
| display: none !important; | |
| } | |
| } | |
| /* === List View === */ | |
| :root { | |
| --f7-list-bg-color: #fff; | |
| --f7-list-item-text-max-lines: 2; | |
| --f7-list-chevron-icon-color: #c7c7cc; | |
| --f7-list-item-title-font-size: inherit; | |
| --f7-list-item-title-font-weight: 400; | |
| --f7-list-item-title-text-color: inherit; | |
| --f7-list-item-title-line-height: inherit; | |
| --f7-list-item-title-white-space: nowrap; | |
| --f7-list-item-subtitle-font-weight: 400; | |
| --f7-list-item-subtitle-text-color: inherit; | |
| --f7-list-item-subtitle-line-height: inherit; | |
| --f7-list-item-header-text-color: inherit; | |
| --f7-list-item-header-font-size: 12px; | |
| --f7-list-item-header-font-weight: 400; | |
| --f7-list-item-header-line-height: 1.2; | |
| --f7-list-item-footer-font-size: 12px; | |
| --f7-list-item-footer-font-weight: 400; | |
| --f7-list-item-footer-line-height: 1.2; | |
| } | |
| .ios { | |
| --f7-list-inset-side-margin: 15px; | |
| --f7-list-inset-border-radius: 7px; | |
| --f7-list-margin-vertical: 35px; | |
| --f7-list-font-size: 17px; | |
| --f7-list-chevron-icon-area: 20px; | |
| --f7-list-border-color: #c8c7cc; | |
| --f7-list-item-border-color: #c8c7cc; | |
| --f7-list-link-pressed-bg-color: #d9d9d9; | |
| --f7-list-item-subtitle-font-size: 15px; | |
| --f7-list-item-text-font-size: 15px; | |
| --f7-list-item-text-font-weight: 400; | |
| --f7-list-item-text-text-color: #8e8e93; | |
| --f7-list-item-text-line-height: 21px; | |
| --f7-list-item-after-font-size: inherit; | |
| --f7-list-item-after-font-weight: 400; | |
| --f7-list-item-after-text-color: #8e8e93; | |
| --f7-list-item-after-line-height: inherit; | |
| --f7-list-item-after-padding: 5px; | |
| --f7-list-item-footer-text-color: #8e8e93; | |
| --f7-list-item-min-height: 44px; | |
| --f7-list-item-media-margin: 15px; | |
| --f7-list-item-media-icons-margin: 5px; | |
| --f7-list-item-cell-margin: 15px; | |
| --f7-list-item-padding-vertical: 8px; | |
| --f7-list-item-padding-horizontal: 15px; | |
| --f7-list-media-item-padding-vertical: 10px; | |
| --f7-list-media-item-padding-horizontal: 15px; | |
| /* | |
| --f7-list-button-text-color: var(--f7-theme-color); | |
| */ | |
| --f7-list-button-font-size: inherit; | |
| --f7-list-button-font-weight: 400; | |
| --f7-list-button-text-align: center; | |
| --f7-list-button-border-color: #c8c7cc; | |
| --f7-list-button-pressed-bg-color: #d9d9d9; | |
| --f7-list-item-divider-height: 31px; | |
| --f7-list-item-divider-text-color: #8e8e93; | |
| --f7-list-item-divider-font-size: inherit; | |
| --f7-list-item-divider-font-weight: 400; | |
| --f7-list-item-divider-bg-color: #f7f7f7; | |
| --f7-list-item-divider-line-height: inherit; | |
| --f7-list-item-divider-border-color: #c8c7cc; | |
| --f7-list-group-title-height: 31px; | |
| --f7-list-group-title-text-color: #8e8e93; | |
| --f7-list-group-title-font-size: inherit; | |
| --f7-list-group-title-font-weight: 400; | |
| --f7-list-group-title-bg-color: #f7f7f7; | |
| --f7-list-group-title-line-height: inherit; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-list-bg-color: #1c1c1d; | |
| --f7-list-border-color: #282829; | |
| --f7-list-button-border-color: #282829; | |
| --f7-list-item-border-color: #282829; | |
| --f7-list-item-divider-border-color: #282829; | |
| --f7-list-item-divider-bg-color: #232323; | |
| --f7-list-group-title-bg-color: #232323; | |
| --f7-list-link-pressed-bg-color: #363636; | |
| --f7-list-button-pressed-bg-color: #363636; | |
| --f7-list-chevron-icon-color: #434345; | |
| } | |
| .md { | |
| --f7-list-inset-side-margin: 16px; | |
| --f7-list-inset-border-radius: 4px; | |
| --f7-list-margin-vertical: 32px; | |
| --f7-list-font-size: 16px; | |
| --f7-list-chevron-icon-area: 26px; | |
| --f7-list-border-color: rgba(0, 0, 0, 0.12); | |
| --f7-list-item-border-color: rgba(0, 0, 0, 0.12); | |
| --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1); | |
| --f7-list-item-subtitle-font-size: 14px; | |
| --f7-list-item-text-font-size: 14px; | |
| --f7-list-item-text-font-weight: 400; | |
| --f7-list-item-text-text-color: #757575; | |
| --f7-list-item-text-line-height: 20px; | |
| --f7-list-item-after-font-size: 14px; | |
| --f7-list-item-after-font-weight: 400; | |
| --f7-list-item-after-text-color: #757575; | |
| --f7-list-item-after-line-height: inherit; | |
| --f7-list-item-after-padding: 8px; | |
| --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5); | |
| --f7-list-item-min-height: 48px; | |
| --f7-list-item-media-margin: 16px; | |
| --f7-list-item-media-icons-margin: 8px; | |
| --f7-list-item-cell-margin: 16px; | |
| --f7-list-item-padding-vertical: 8px; | |
| --f7-list-item-padding-horizontal: 16px; | |
| --f7-list-media-item-padding-vertical: 14px; | |
| --f7-list-media-item-padding-horizontal: 16px; | |
| --f7-list-button-text-color: #212121; | |
| --f7-list-button-font-size: inherit; | |
| --f7-list-button-font-weight: 400; | |
| --f7-list-button-text-align: left; | |
| --f7-list-button-border-color: transparent; | |
| --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1); | |
| --f7-list-item-divider-height: 48px; | |
| --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54); | |
| --f7-list-item-divider-font-size: 14px; | |
| --f7-list-item-divider-font-weight: 400; | |
| --f7-list-item-divider-bg-color: #f4f4f4; | |
| --f7-list-item-divider-line-height: inherit; | |
| --f7-list-item-divider-border-color: transparent; | |
| --f7-list-group-title-height: 48px; | |
| --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54); | |
| --f7-list-group-title-font-size: 14px; | |
| --f7-list-group-title-font-weight: 400; | |
| --f7-list-group-title-bg-color: #f4f4f4; | |
| --f7-list-group-title-line-height: inherit; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-list-bg-color: #1c1c1d; | |
| --f7-list-border-color: #282829; | |
| --f7-list-button-text-color: #fff; | |
| --f7-list-item-border-color: #282829; | |
| --f7-list-item-divider-border-color: #282829; | |
| --f7-list-item-divider-bg-color: #232323; | |
| --f7-list-item-divider-text-color: #fff; | |
| --f7-list-group-title-bg-color: #232323; | |
| --f7-list-group-title-text-color: #fff; | |
| --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05); | |
| --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05); | |
| --f7-list-chevron-icon-color: #434345; | |
| --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54); | |
| } | |
| .list { | |
| position: relative; | |
| z-index: 1; | |
| font-size: var(--f7-list-font-size); | |
| margin: var(--f7-list-margin-vertical) 0; | |
| } | |
| .list ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| background: var(--f7-list-bg-color); | |
| } | |
| .list ul:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-list-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .list ul:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-list-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .list ul ul:before { | |
| display: none !important; | |
| } | |
| .list ul ul:after { | |
| display: none !important; | |
| } | |
| .list li { | |
| position: relative; | |
| box-sizing: border-box; | |
| } | |
| .list .item-media { | |
| display: flex; | |
| flex-shrink: 0; | |
| flex-wrap: nowrap; | |
| align-items: center; | |
| box-sizing: border-box; | |
| padding-bottom: var(--f7-list-item-padding-vertical); | |
| padding-top: var(--f7-list-item-padding-vertical); | |
| } | |
| .list .item-media + .item-inner { | |
| margin-left: var(--f7-list-item-media-margin); | |
| } | |
| .list .item-media i + i, | |
| .list .item-media i + img { | |
| margin-left: var(--f7-list-item-media-icons-margin); | |
| } | |
| .list .item-after { | |
| padding-left: var(--f7-list-item-after-padding); | |
| } | |
| .list .item-inner { | |
| position: relative; | |
| width: 100%; | |
| min-width: 0; | |
| display: flex; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| align-items: center; | |
| align-self: stretch; | |
| padding-top: var(--f7-list-item-padding-vertical); | |
| padding-bottom: var(--f7-list-item-padding-vertical); | |
| min-height: var(--f7-list-item-min-height); | |
| padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right)); | |
| } | |
| .list .item-title { | |
| min-width: 0; | |
| flex-shrink: 1; | |
| white-space: var(--f7-list-item-title-white-space); | |
| position: relative; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 100%; | |
| font-size: var(--f7-list-item-title-font-size); | |
| font-weight: var(--f7-list-item-title-font-weight); | |
| color: var(--f7-list-item-title-text-color); | |
| line-height: var(--f7-list-item-title-line-height); | |
| } | |
| .list .item-after { | |
| white-space: nowrap; | |
| flex-shrink: 0; | |
| display: flex; | |
| font-size: var(--f7-list-item-after-font-size); | |
| font-weight: var(--f7-list-item-after-font-weight); | |
| color: var(--f7-list-item-after-text-color); | |
| line-height: var(--f7-list-item-after-line-height); | |
| margin-left: auto; | |
| } | |
| .list .item-header, | |
| .list .item-footer { | |
| white-space: normal; | |
| } | |
| .list .item-header { | |
| color: var(--f7-list-item-header-text-color); | |
| font-size: var(--f7-list-item-header-font-size); | |
| font-weight: var(--f7-list-item-header-font-weight); | |
| line-height: var(--f7-list-item-header-line-height); | |
| } | |
| .list .item-footer { | |
| color: var(--f7-list-item-footer-text-color); | |
| font-size: var(--f7-list-item-footer-font-size); | |
| font-weight: var(--f7-list-item-footer-font-weight); | |
| line-height: var(--f7-list-item-footer-line-height); | |
| } | |
| .list .item-link, | |
| .list .list-button { | |
| transition-duration: 300ms; | |
| transition-property: background-color; | |
| display: block; | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 0; | |
| } | |
| .list .item-link { | |
| color: inherit; | |
| } | |
| .list .item-link.active-state { | |
| background-color: var(--f7-list-link-pressed-bg-color); | |
| } | |
| .list .item-link .item-inner { | |
| padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right)); | |
| } | |
| .list .item-content { | |
| display: flex; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| align-items: center; | |
| min-height: var(--f7-list-item-min-height); | |
| padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left)); | |
| } | |
| .list .item-subtitle { | |
| position: relative; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| max-width: 100%; | |
| text-overflow: ellipsis; | |
| font-size: var(--f7-list-item-subtitle-font-size); | |
| font-weight: var(--f7-list-item-subtitle-font-weight); | |
| color: var(--f7-list-item-subtitle-text-color); | |
| line-height: var(--f7-list-item-subtitle-line-height); | |
| } | |
| .list .item-text { | |
| position: relative; | |
| overflow: hidden; | |
| text-overflow: hidden; | |
| -webkit-line-clamp: var(--f7-list-item-text-max-lines); | |
| display: -webkit-box; | |
| font-size: var(--f7-list-item-text-font-size); | |
| font-weight: var(--f7-list-item-text-font-weight); | |
| color: var(--f7-list-item-text-text-color); | |
| line-height: var(--f7-list-item-text-line-height); | |
| max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines)); | |
| } | |
| .list .item-title-row { | |
| position: relative; | |
| display: flex; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| } | |
| .list .item-title-row .item-after { | |
| align-self: center; | |
| } | |
| .list .item-row { | |
| display: flex; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| } | |
| .list .item-cell { | |
| display: block; | |
| align-self: center; | |
| box-sizing: border-box; | |
| width: 100%; | |
| min-width: 0; | |
| margin-left: var(--f7-list-item-cell-margin); | |
| flex-shrink: 1; | |
| } | |
| .list .item-cell:first-child { | |
| margin-left: 0; | |
| } | |
| .list .ripple-wave + .item-cell { | |
| margin-left: 0; | |
| } | |
| .list li:last-child .list-button:after { | |
| display: none !important; | |
| } | |
| .list li:last-child > .item-inner:after, | |
| .list li:last-child li:last-child > .item-inner:after, | |
| .list li:last-child > .item-content > .item-inner:after, | |
| .list li:last-child li:last-child > .item-content > .item-inner:after, | |
| .list li:last-child > .swipeout-content > .item-content > .item-inner:after, | |
| .list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after, | |
| .list li:last-child > .item-link > .item-content > .item-inner:after, | |
| .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after { | |
| display: none !important; | |
| } | |
| .list li li:last-child .item-inner:after, | |
| .list li:last-child li .item-inner:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-list-item-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .list.no-hairlines:before, | |
| .list.no-hairlines ul:before, | |
| .md .list.no-hairlines-md:before, | |
| .md .list.no-hairlines-md ul:before, | |
| .ios .list.no-hairlines-ios:before, | |
| .ios .list.no-hairlines-ios ul:before { | |
| display: none !important; | |
| } | |
| .list.no-hairlines:after, | |
| .list.no-hairlines ul:after, | |
| .md .list.no-hairlines-md:after, | |
| .md .list.no-hairlines-md ul:after, | |
| .ios .list.no-hairlines-ios:after, | |
| .ios .list.no-hairlines-ios ul:after { | |
| display: none !important; | |
| } | |
| .list.no-hairline-top:before, | |
| .list.no-hairline-top ul:before, | |
| .md .list.no-hairline-top-md:before, | |
| .md .list.no-hairline-top-md ul:before, | |
| .ios .list.no-hairline-top-ios:before, | |
| .ios .list.no-hairline-top-ios ul:before { | |
| display: none !important; | |
| } | |
| .list.no-hairline-bottom:after, | |
| .list.no-hairline-bottom ul:after, | |
| .md .list.no-hairline-bottom-md:after, | |
| .md .list.no-hairline-bottom-md ul:after, | |
| .ios .list.no-hairline-bottom-ios:after, | |
| .ios .list.no-hairline-bottom-ios ul:after { | |
| display: none !important; | |
| } | |
| .list.no-hairlines-between .item-inner:after, | |
| .md .list.no-hairlines-between-md .item-inner:after, | |
| .ios .list.no-hairlines-between-ios .item-inner:after, | |
| .list.no-hairlines-between .list-button:after, | |
| .md .list.no-hairlines-between-md .list-button:after, | |
| .ios .list.no-hairlines-between-ios .list-button:after, | |
| .list.no-hairlines-between .item-divider:after, | |
| .md .list.no-hairlines-between-md .item-divider:after, | |
| .ios .list.no-hairlines-between-ios .item-divider:after, | |
| .list.no-hairlines-between .list-group-title:after, | |
| .md .list.no-hairlines-between-md .list-group-title:after, | |
| .ios .list.no-hairlines-between-ios .list-group-title:after, | |
| .list.no-hairlines-between .list-group-title:after, | |
| .md .list.no-hairlines-between-md .list-group-title:after, | |
| .ios .list.no-hairlines-between-ios .list-group-title:after { | |
| display: none !important; | |
| } | |
| .list.no-hairlines-between.simple-list li:after, | |
| .md .list.no-hairlines-between-md.simple-list li:after, | |
| .ios .list.no-hairlines-between-ios.simple-list li:after { | |
| display: none !important; | |
| } | |
| .list.no-hairlines-between.links-list a:after, | |
| .md .list.no-hairlines-between-md.links-list a:after, | |
| .ios .list.no-hairlines-between-ios.links-list a:after { | |
| display: none !important; | |
| } | |
| .list-button { | |
| padding: 0 var(--f7-list-item-padding-horizontal); | |
| line-height: var(--f7-list-item-min-height); | |
| color: var(--f7-list-button-text-color, var(--f7-theme-color)); | |
| font-size: var(--f7-list-button-font-size); | |
| font-weight: var(--f7-list-button-font-weight); | |
| text-align: var(--f7-list-button-text-align); | |
| } | |
| .list-button:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-list-button-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .list-button.active-state { | |
| background-color: var(--f7-list-button-pressed-bg-color); | |
| } | |
| .list-button[class*="color-"] { | |
| --f7-list-button-text-color: var(--f7-theme-color); | |
| } | |
| .simple-list li { | |
| position: relative; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| max-width: 100%; | |
| box-sizing: border-box; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| align-content: center; | |
| line-height: var(--f7-list-item-min-height); | |
| height: var(--f7-list-item-min-height); | |
| padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left)); | |
| padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right)); | |
| } | |
| .simple-list li:after { | |
| left: var(--f7-list-item-padding-horizontal); | |
| width: auto; | |
| left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left)); | |
| right: 0; | |
| } | |
| .simple-list li:last-child:after { | |
| display: none !important; | |
| } | |
| .links-list li { | |
| z-index: 1; | |
| } | |
| .links-list a { | |
| transition-duration: 300ms; | |
| transition-property: background-color; | |
| display: block; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| max-width: 100%; | |
| height: var(--f7-list-item-min-height); | |
| color: inherit; | |
| } | |
| .links-list a .ripple-wave { | |
| z-index: 0; | |
| } | |
| .links-list a:after { | |
| width: auto; | |
| } | |
| .links-list a.active-state { | |
| background-color: var(--f7-list-link-pressed-bg-color); | |
| } | |
| .links-list a { | |
| padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left)); | |
| padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right)); | |
| } | |
| .links-list a:after { | |
| left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left)); | |
| right: 0; | |
| } | |
| .links-list li:last-child a:after { | |
| display: none !important; | |
| } | |
| .simple-list li:after, | |
| .links-list a:after, | |
| .list .item-inner:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-list-item-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .media-list, | |
| li.media-item { | |
| --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical); | |
| --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal); | |
| } | |
| .media-list .item-inner, | |
| li.media-item .item-inner { | |
| display: block; | |
| align-self: stretch; | |
| } | |
| .media-list .item-media, | |
| li.media-item .item-media { | |
| align-self: flex-start; | |
| } | |
| .media-list .item-media img, | |
| li.media-item .item-media img { | |
| display: block; | |
| } | |
| .media-list .item-link .item-inner, | |
| li.media-item .item-link .item-inner { | |
| padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right)); | |
| } | |
| .media-list .item-link .item-title-row, | |
| li.media-item .item-link .item-title-row { | |
| padding-right: calc(var(--f7-list-chevron-icon-area)); | |
| } | |
| .media-list.chevron-center .item-link .item-inner, | |
| .media-list .chevron-center .item-link .item-inner, | |
| .media-list .item-link.chevron-center .item-inner, | |
| li.media-item.chevron-center .item-link .item-inner, | |
| li.media-item .item-link.chevron-center .item-inner, | |
| li.media-item .chevron-center .item-link .item-inner { | |
| padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right)); | |
| } | |
| .media-list.chevron-center .item-title-row, | |
| .media-list .chevron-center .item-title-row, | |
| li.media-item.chevron-center .item-title-row, | |
| li.media-item .chevron-center .item-title-row { | |
| padding-right: 0; | |
| } | |
| .list .item-link .item-inner:before, | |
| .links-list a:before, | |
| .media-list .item-link .item-title-row:before, | |
| li.media-item .item-link .item-title-row:before, | |
| .media-list.chevron-center .item-link .item-inner:before, | |
| .media-list .chevron-center .item-link .item-inner:before, | |
| .media-list .item-link.chevron-center .item-inner:before, | |
| li.media-item.chevron-center .item-link .item-inner:before, | |
| li.media-item .chevron-center .item-link .item-inner:before, | |
| li.media-item .item-link.chevron-center .item-inner:before { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 50%; | |
| width: 8px; | |
| height: 14px; | |
| margin-top: -7px; | |
| font-size: 20px; | |
| line-height: 14px; | |
| color: var(--f7-list-chevron-icon-color); | |
| pointer-events: none; | |
| right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right)); | |
| content: 'chevron_right'; | |
| } | |
| .media-list.chevron-center .item-title-row:before, | |
| .media-list .chevron-center .item-title-row:before, | |
| li.media-item.chevron-center .item-title-row:before, | |
| li.media-item .chevron-center .item-title-row:before { | |
| display: none; | |
| } | |
| .media-list .item-link .item-inner:before, | |
| li.media-item .item-link .item-inner:before { | |
| display: none; | |
| } | |
| .media-list .item-link .item-title-row:before, | |
| li.media-item .item-link .item-title-row:before { | |
| right: 0; | |
| } | |
| .list-group ul:after, | |
| .list-group ul:before { | |
| z-index: 25 !important; | |
| } | |
| .list-group + .list-group ul:before { | |
| display: none !important; | |
| } | |
| li.item-divider, | |
| .item-divider, | |
| li.list-group-title { | |
| white-space: nowrap; | |
| position: relative; | |
| max-width: 100%; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| z-index: 15; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left)); | |
| padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right)); | |
| box-sizing: border-box; | |
| display: flex; | |
| align-items: center; | |
| align-content: center; | |
| } | |
| li.item-divider:after, | |
| .item-divider:after, | |
| li.list-group-title:after { | |
| display: none !important; | |
| } | |
| li.item-divider, | |
| .item-divider { | |
| margin-top: -1px; | |
| height: var(--f7-list-item-divider-height); | |
| color: var(--f7-list-item-divider-text-color); | |
| font-size: var(--f7-list-item-divider-font-size); | |
| font-weight: var(--f7-list-item-divider-font-weight); | |
| background-color: var(--f7-list-item-divider-bg-color); | |
| line-height: var(--f7-list-item-divider-line-height); | |
| } | |
| li.item-divider:before, | |
| .item-divider:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-list-item-divider-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| li.list-group-title, | |
| .list li.list-group-title { | |
| position: relative; | |
| position: -webkit-sticky; | |
| position: sticky; | |
| top: 0; | |
| margin-top: 0; | |
| z-index: 20; | |
| height: var(--f7-list-group-title-height); | |
| color: var(--f7-list-group-title-text-color); | |
| font-size: var(--f7-list-group-title-font-size); | |
| font-weight: var(--f7-list-group-title-font-weight); | |
| background-color: var(--f7-list-group-title-bg-color); | |
| line-height: var(--f7-list-group-title-line-height); | |
| } | |
| .list.inset { | |
| margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left)); | |
| margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right)); | |
| border-radius: var(--f7-list-inset-border-radius); | |
| --f7-safe-area-left: 0px; | |
| --f7-safe-area-right: 0px; | |
| } | |
| .list.inset .block-title { | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| .list.inset ul { | |
| border-radius: var(--f7-list-inset-border-radius); | |
| } | |
| .list.inset ul:before { | |
| display: none !important; | |
| } | |
| .list.inset ul:after { | |
| display: none !important; | |
| } | |
| .list.inset li:first-child > a { | |
| border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0; | |
| } | |
| .list.inset li:last-child > a { | |
| border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius); | |
| } | |
| .list.inset li:first-child:last-child > a { | |
| border-radius: var(--f7-list-inset-border-radius); | |
| } | |
| @media (min-width: 768px) { | |
| .list.tablet-inset { | |
| margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left)); | |
| margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right)); | |
| border-radius: var(--f7-list-inset-border-radius); | |
| --f7-safe-area-left: 0px; | |
| --f7-safe-area-right: 0px; | |
| } | |
| .list.tablet-inset .block-title { | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| .list.tablet-inset ul { | |
| border-radius: var(--f7-list-inset-border-radius); | |
| } | |
| .list.tablet-inset ul:before { | |
| display: none !important; | |
| } | |
| .list.tablet-inset ul:after { | |
| display: none !important; | |
| } | |
| .list.tablet-inset li:first-child > a { | |
| border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0; | |
| } | |
| .list.tablet-inset li:last-child > a { | |
| border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius); | |
| } | |
| .list.tablet-inset li:first-child:last-child > a { | |
| border-radius: var(--f7-list-inset-border-radius); | |
| } | |
| } | |
| .list.no-chevron, | |
| .list .no-chevron { | |
| --f7-list-chevron-icon-color: transparent; | |
| --f7-list-chevron-icon-area: 0px; | |
| } | |
| .ios .list ul ul { | |
| padding-left: calc(var(--f7-list-item-padding-horizontal) + 30px); | |
| } | |
| .ios .item-link.active-state .item-inner:after, | |
| .ios .list-button.active-state:after, | |
| .ios .links-list a.active-state:after { | |
| background-color: transparent; | |
| } | |
| .ios .links-list a.active-state, | |
| .ios .list .item-link.active-state, | |
| .ios .list .list-button.active-state { | |
| transition-duration: 0ms; | |
| } | |
| .ios .media-list .item-title, | |
| .ios li.media-item .item-title { | |
| font-weight: 600; | |
| } | |
| .md .list ul ul { | |
| padding-left: calc(var(--f7-list-item-padding-horizontal) + 40px); | |
| } | |
| .md .list .item-media { | |
| min-width: 40px; | |
| } | |
| /* === Badge === */ | |
| :root { | |
| --f7-badge-text-color: #fff; | |
| --f7-badge-bg-color: #8e8e93; | |
| --f7-badge-padding: 0 4px; | |
| --f7-badge-in-icon-size: 16px; | |
| --f7-badge-in-icon-font-size: 10px; | |
| --f7-badge-font-weight: normal; | |
| --f7-badge-font-size: 12px; | |
| } | |
| .ios { | |
| --f7-badge-size: 20px; | |
| } | |
| .md { | |
| --f7-badge-size: 18px; | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: center; | |
| color: var(--f7-badge-text-color); | |
| background: var(--f7-badge-bg-color); | |
| position: relative; | |
| box-sizing: border-box; | |
| text-align: center; | |
| vertical-align: middle; | |
| font-weight: var(--f7-badge-font-weight); | |
| font-size: var(--f7-badge-font-size); | |
| border-radius: var(--f7-badge-size); | |
| padding: var(--f7-badge-padding); | |
| height: var(--f7-badge-size); | |
| min-width: var(--f7-badge-size); | |
| } | |
| .icon .badge, | |
| .f7-icons .badge, | |
| .framework7-icons .badge, | |
| .material-icons .badge { | |
| position: absolute; | |
| left: 100%; | |
| margin-left: -10px; | |
| top: -2px; | |
| font-family: var(--f7-font-family); | |
| --f7-badge-font-size: var(--f7-badge-in-icon-font-size); | |
| --f7-badge-size: var(--f7-badge-in-icon-size); | |
| } | |
| .badge[class*="color-"] { | |
| --f7-badge-bg-color: var(--f7-theme-color); | |
| } | |
| :root { | |
| --f7-button-font-size: 14px; | |
| --f7-button-min-width: 32px; | |
| --f7-button-bg-color: transparent; | |
| --f7-button-border-width: 0px; | |
| /* | |
| --f7-button-text-color: var(--f7-theme-color); | |
| --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color)); | |
| --f7-button-border-color: var(--f7-theme-color); | |
| --f7-button-fill-text-color: #fff; | |
| --f7-button-fill-bg-color: var(--f7-theme-color); | |
| --f7-button-outline-border-color: var(--f7-theme-color); | |
| */ | |
| --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24); | |
| --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23); | |
| --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .ios { | |
| --f7-button-height: 29px; | |
| --f7-button-padding-horizontal: 10px; | |
| --f7-button-border-radius: 5px; | |
| --f7-button-font-weight: 400; | |
| --f7-button-letter-spacing: 0; | |
| --f7-button-text-transform: none; | |
| /* | |
| --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15); | |
| --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint); | |
| */ | |
| --f7-button-outline-border-width: 1px; | |
| --f7-button-large-height: 44px; | |
| --f7-button-large-font-size: 17px; | |
| --f7-button-small-height: 26px; | |
| --f7-button-small-font-size: 13px; | |
| --f7-button-small-font-weight: 600; | |
| --f7-button-small-text-transform: uppercase; | |
| --f7-button-small-outline-border-width: 2px; | |
| } | |
| .md { | |
| --f7-button-height: 36px; | |
| --f7-button-padding-horizontal: 8px; | |
| --f7-button-border-radius: 4px; | |
| --f7-button-font-weight: 500; | |
| --f7-button-letter-spacing: 0.03em; | |
| --f7-button-text-transform: uppercase; | |
| --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1); | |
| /* | |
| --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade); | |
| */ | |
| --f7-button-outline-border-width: 2px; | |
| --f7-button-large-height: 48px; | |
| --f7-button-large-font-size: 14px; | |
| --f7-button-small-height: 28px; | |
| --f7-button-small-font-size: 13px; | |
| --f7-button-small-font-weight: 500; | |
| --f7-button-small-text-transform: uppercase; | |
| --f7-button-small-outline-border-width: 2px; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1); | |
| } | |
| button { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| width: 100%; | |
| } | |
| .button { | |
| text-decoration: none; | |
| text-align: center; | |
| display: block; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| background: none; | |
| margin: 0; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| position: relative; | |
| overflow: hidden; | |
| font-family: inherit; | |
| cursor: pointer; | |
| outline: 0; | |
| box-sizing: border-box; | |
| vertical-align: middle; | |
| border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color)); | |
| font-size: var(--f7-button-font-size); | |
| color: var(--f7-button-text-color, var(--f7-theme-color)); | |
| height: var(--f7-button-height); | |
| line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2); | |
| padding: var(--f7-button-padding-vertical, 0) var(--f7-button-padding-horizontal); | |
| border-radius: var(--f7-button-border-radius); | |
| min-width: var(--f7-button-min-width); | |
| font-weight: var(--f7-button-font-weight); | |
| letter-spacing: var(--f7-button-letter-spacing); | |
| text-transform: var(--f7-button-text-transform); | |
| background-color: var(--f7-button-bg-color); | |
| box-shadow: var(--f7-button-box-shadow); | |
| } | |
| .button.active-state { | |
| background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15)); | |
| color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color))); | |
| } | |
| input[type="submit"].button, | |
| input[type="button"].button { | |
| width: 100%; | |
| } | |
| .button > i + span, | |
| .button > span + span, | |
| .button > span + i, | |
| .button > i + i { | |
| margin-left: 4px; | |
| } | |
| .subnavbar .button, | |
| .navbar .button, | |
| .toolbar .button, | |
| .searchbar .button { | |
| color: var(--f7-button-text-color, var(--f7-theme-color)); | |
| } | |
| .button-round, | |
| .ios .button-round-ios, | |
| .md .button-round-md { | |
| --f7-button-border-radius: var(--f7-button-height); | |
| } | |
| .button-fill, | |
| .ios .button-fill-ios, | |
| .md .button-fill-md, | |
| .button-active, | |
| .button.tab-link-active { | |
| --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color)); | |
| --f7-button-text-color: var(--f7-button-fill-text-color, #fff); | |
| --f7-touch-ripple-color: var(--f7-touch-ripple-white); | |
| } | |
| .button-fill, | |
| .ios .button-fill-ios, | |
| .md .button-fill-md { | |
| --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color); | |
| } | |
| .button-active, | |
| .button.tab-link-active { | |
| --f7-button-pressed-bg-color: var(--f7-button-bg-color); | |
| } | |
| .button-outline, | |
| .ios .button-outline-ios, | |
| .md .button-outline-md { | |
| --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color)); | |
| --f7-button-border-width: var(--f7-button-outline-border-width); | |
| } | |
| .button-large, | |
| .ios .button-large-ios, | |
| .md .button-large-md { | |
| --f7-button-height: var(--f7-button-large-height); | |
| --f7-button-font-size: var(--f7-button-large-font-size); | |
| } | |
| .button-small, | |
| .ios .button-small-ios, | |
| .md .button-small-md { | |
| --f7-button-outline-border-width: var(--f7-button-small-outline-border-width); | |
| --f7-button-height: var(--f7-button-small-height); | |
| --f7-button-font-size: var(--f7-button-small-font-size); | |
| --f7-button-font-weight: var(--f7-button-small-font-weight); | |
| --f7-button-text-transform: var(--f7-button-small-text-transform); | |
| } | |
| .ios .button-small.button-fill, | |
| .ios .button-small-ios.button-fill, | |
| .ios .button-small.button-fill-ios { | |
| --f7-button-border-width: var(--f7-button-small-outline-border-width); | |
| --f7-button-pressed-text-color: var(--f7-theme-color); | |
| --f7-button-pressed-bg-color: transparent; | |
| } | |
| .segmented { | |
| align-self: center; | |
| display: flex; | |
| flex-wrap: nowrap; | |
| border-radius: var(--f7-button-border-radius); | |
| box-shadow: var(--f7-button-box-shadow); | |
| } | |
| .segmented .button, | |
| .segmented button { | |
| width: 100%; | |
| flex-shrink: 1; | |
| min-width: 0; | |
| border-radius: 0; | |
| } | |
| .segmented .button:first-child { | |
| border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius); | |
| } | |
| .segmented .button:not(.button-outline):first-child { | |
| border-left: none; | |
| } | |
| .segmented .button.button-outline:nth-child(n + 2) { | |
| border-left: none; | |
| } | |
| .segmented .button:last-child { | |
| border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0; | |
| } | |
| .segmented .button-round:first-child { | |
| border-radius: var(--f7-button-height) 0 0 var(--f7-button-height); | |
| } | |
| .segmented .button-round:last-child { | |
| border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0; | |
| } | |
| .segmented .button:first-child:last-child { | |
| border-radius: var(--f7-button-border-radius); | |
| } | |
| .segmented-round, | |
| .ios .segmented-round-ios, | |
| .md .segmented-round-md { | |
| border-radius: var(--f7-button-height); | |
| } | |
| .segmented-raised, | |
| .ios .segmented-raised-ios, | |
| .md .segmented-raised-md { | |
| box-shadow: var(--f7-button-raised-box-shadow); | |
| } | |
| .segmented-raised .button:not(.button-outline), | |
| .ios .segmented-raised-ios .button:not(.button-outline), | |
| .md .segmented-raised-md .button:not(.button-outline) { | |
| border-left: 1px solid var(--f7-segmented-raised-divider-color); | |
| } | |
| .button-raised, | |
| .ios .button-raised-ios, | |
| .md .button-raised-md { | |
| --f7-button-box-shadow: var(--f7-button-raised-box-shadow); | |
| } | |
| .button-raised.active-state, | |
| .ios .button-raised-ios.active-state, | |
| .md .button-raised-md.active-state { | |
| --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow); | |
| } | |
| .subnavbar .segmented { | |
| width: 100%; | |
| } | |
| .ios .button { | |
| transition-duration: 100ms; | |
| } | |
| .ios .button-fill, | |
| .ios .button-fill-ios { | |
| --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint)); | |
| } | |
| .ios .button-small, | |
| .ios .button-small-ios { | |
| transition-duration: 200ms; | |
| } | |
| .md .button { | |
| transition-duration: 300ms; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .md .button-fill, | |
| .md .button-fill-md { | |
| --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade)); | |
| } | |
| /* === Touch Ripple === */ | |
| :root { | |
| --f7-touch-ripple-black: rgba(0, 0, 0, 0.1); | |
| --f7-touch-ripple-white: rgba(255, 255, 255, 0.3); | |
| --f7-touch-ripple-color: var(--f7-touch-ripple-black); | |
| } | |
| .theme-dark { | |
| --f7-touch-ripple-color: var(--f7-touch-ripple-white); | |
| } | |
| .ripple, | |
| .fab a, | |
| a.link, | |
| a.item-link, | |
| a.list-button, | |
| .button, | |
| .dialog-button, | |
| .tab-link, | |
| .radio, | |
| .checkbox, | |
| .actions-button, | |
| .speed-dial-buttons a { | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .ripple-wave { | |
| left: 0; | |
| top: 0; | |
| position: absolute !important; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: -1; | |
| padding: 0; | |
| margin: 0; | |
| font-size: 0; | |
| transform: translate3d(0px, 0px, 0) scale(0); | |
| transition-duration: 1400ms; | |
| background-color: var(--f7-touch-ripple-color); | |
| will-change: transform, opacity; | |
| } | |
| .ripple-wave.ripple-wave-fill { | |
| transition-duration: 300ms; | |
| opacity: 0.35; | |
| } | |
| .ripple-wave.ripple-wave-out { | |
| transition-duration: 600ms; | |
| opacity: 0; | |
| } | |
| .button-fill .ripple-wave, | |
| .picker-calendar-day .ripple-wave, | |
| .menu .ripple-wave { | |
| z-index: 1; | |
| } | |
| .checkbox .ripple-wave, | |
| .radio .ripple-wave, | |
| .data-table .sortable-cell .ripple-wave { | |
| z-index: 0; | |
| } | |
| [class*="ripple-color-"] { | |
| --f7-touch-ripple-color: var(--f7-theme-color-ripple-color); | |
| } | |
| /* === Icon === */ | |
| i.icon { | |
| display: inline-block; | |
| vertical-align: middle; | |
| background-size: 100% auto; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| font-style: normal; | |
| position: relative; | |
| } | |
| .icon-back:after, | |
| .icon-prev:after, | |
| .icon-forward:after, | |
| .icon-next:after { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 20px; | |
| } | |
| .icon[class*="color-"] { | |
| color: var(--f7-theme-color); | |
| } | |
| .ios .icon-back, | |
| .ios .icon-prev, | |
| .ios .icon-forward, | |
| .ios .icon-next { | |
| width: 12px; | |
| height: 20px; | |
| line-height: 20px; | |
| } | |
| .ios .icon-back:after, | |
| .ios .icon-prev:after, | |
| .ios .icon-forward:after, | |
| .ios .icon-next:after { | |
| line-height: inherit; | |
| } | |
| .ios .icon-prev:after, | |
| .ios .icon-next:after { | |
| font-size: 16px; | |
| } | |
| .ios .item-media .icon { | |
| color: #808080; | |
| } | |
| .ios .item-media .f7-icons { | |
| font-size: 28px; | |
| width: 28px; | |
| height: 28px; | |
| } | |
| .ios .icon-back:after, | |
| .ios .icon-prev:after { | |
| content: 'chevron_left_ios'; | |
| } | |
| .ios .icon-forward:after, | |
| .ios .icon-next:after { | |
| content: 'chevron_right_ios'; | |
| } | |
| .md .icon-back, | |
| .md .icon-forward, | |
| .md .icon-next, | |
| .md .icon-prev { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .md .icon-back:after, | |
| .md .icon-forward:after, | |
| .md .icon-next:after, | |
| .md .icon-prev:after { | |
| line-height: 1.2; | |
| } | |
| .md .item-media .icon { | |
| color: #737373; | |
| } | |
| .md .item-media .material-icons { | |
| font-size: 24px; | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .md .icon-back:after { | |
| content: 'arrow_left_md'; | |
| } | |
| .md .icon-forward:after { | |
| content: 'arrow_right_md'; | |
| } | |
| .md .icon-next:after { | |
| content: 'chevron_right_md'; | |
| } | |
| .md .icon-prev:after { | |
| content: 'chevron_left_md'; | |
| } | |
| .custom-modal-backdrop { | |
| z-index: 10500; | |
| } | |
| .custom-modal-backdrop, | |
| .actions-backdrop, | |
| .dialog-backdrop, | |
| .popover-backdrop, | |
| .popup-backdrop, | |
| .preloader-backdrop, | |
| .sheet-backdrop { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.4); | |
| z-index: 13000; | |
| visibility: hidden; | |
| opacity: 0; | |
| transition-duration: 400ms; | |
| } | |
| .custom-modal-backdrop.not-animated, | |
| .actions-backdrop.not-animated, | |
| .dialog-backdrop.not-animated, | |
| .popover-backdrop.not-animated, | |
| .popup-backdrop.not-animated, | |
| .preloader-backdrop.not-animated, | |
| .sheet-backdrop.not-animated { | |
| transition-duration: 0ms; | |
| } | |
| .custom-modal-backdrop.backdrop-in, | |
| .actions-backdrop.backdrop-in, | |
| .dialog-backdrop.backdrop-in, | |
| .popover-backdrop.backdrop-in, | |
| .popup-backdrop.backdrop-in, | |
| .preloader-backdrop.backdrop-in, | |
| .sheet-backdrop.backdrop-in { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| /* === Dialog === */ | |
| :root { | |
| --f7-dialog-button-text-color: var(--f7-theme-color); | |
| } | |
| .ios { | |
| --f7-dialog-bg-color: rgba(255, 255, 255, 0.95); | |
| --f7-dialog-box-shadow: none; | |
| --f7-dialog-width: 270px; | |
| --f7-dialog-border-radius: 13px; | |
| --f7-dialog-text-color: #000; | |
| --f7-dialog-text-align: center; | |
| --f7-dialog-font-size: 14px; | |
| --f7-dialog-title-text-color: inherit; | |
| --f7-dialog-title-font-size: 18px; | |
| --f7-dialog-title-font-weight: 600; | |
| --f7-dialog-title-line-height: inherit; | |
| --f7-dialog-button-font-size: 17px; | |
| --f7-dialog-button-height: 44px; | |
| --f7-dialog-button-letter-spacing: 0; | |
| --f7-dialog-button-text-align: center; | |
| --f7-dialog-button-font-weight: 400; | |
| --f7-dialog-button-text-transform: none; | |
| --f7-dialog-button-pressed-bg-color: rgba(230, 230, 230, 0.95); | |
| --f7-dialog-input-font-size: 14px; | |
| --f7-dialog-input-height: 32px; | |
| --f7-dialog-input-bg-color: #fff; | |
| --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3); | |
| --f7-dialog-input-border-width: 1px; | |
| --f7-dialog-input-placeholder-color: #a9a9a9; | |
| --f7-dialog-preloader-size: 34px; | |
| } | |
| .md { | |
| --f7-dialog-bg-color: #fff; | |
| --f7-dialog-box-shadow: var(--f7-elevation-24); | |
| --f7-dialog-width: 280px; | |
| --f7-dialog-border-radius: 4px; | |
| --f7-dialog-text-color: #757575; | |
| --f7-dialog-text-align: left; | |
| --f7-dialog-font-size: 16px; | |
| --f7-dialog-title-text-color: #212121; | |
| --f7-dialog-title-font-size: 20px; | |
| --f7-dialog-title-font-weight: 500; | |
| --f7-dialog-title-line-height: 1.3; | |
| --f7-dialog-button-font-size: 14px; | |
| --f7-dialog-button-height: 36px; | |
| --f7-dialog-button-letter-spacing: 0.03em; | |
| --f7-dialog-button-text-align: center; | |
| --f7-dialog-button-font-weight: 500; | |
| --f7-dialog-button-text-transform: uppercase; | |
| --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1); | |
| --f7-dialog-input-font-size: 16px; | |
| --f7-dialog-input-height: 36px; | |
| --f7-dialog-input-bg-color: #fff; | |
| --f7-dialog-input-border-color: transparent; | |
| --f7-dialog-input-border-width: 0px; | |
| --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35); | |
| --f7-dialog-preloader-size: 32px; | |
| } | |
| .dialog { | |
| position: absolute; | |
| z-index: 13500; | |
| left: 50%; | |
| margin-top: 0; | |
| top: 50%; | |
| overflow: hidden; | |
| opacity: 0; | |
| transform: translate3d(0, -50%, 0) scale(1.185); | |
| transition-property: transform, opacity; | |
| display: none; | |
| transition-duration: 400ms; | |
| box-shadow: var(--f7-dialog-box-shadow); | |
| width: var(--f7-dialog-width); | |
| margin-left: calc(-1 * var(--f7-dialog-width) / 2); | |
| border-radius: var(--f7-dialog-border-radius); | |
| text-align: var(--f7-dialog-text-align); | |
| color: var(--f7-dialog-text-color); | |
| font-size: var(--f7-dialog-font-size); | |
| will-change: transform, opacity; | |
| } | |
| .dialog.modal-in { | |
| opacity: 1; | |
| transform: translate3d(0, -50%, 0) scale(1); | |
| } | |
| .dialog.modal-out { | |
| opacity: 0; | |
| z-index: 13499; | |
| } | |
| .dialog.not-animated { | |
| transition-duration: 0ms; | |
| } | |
| .dialog-inner { | |
| position: relative; | |
| } | |
| .dialog-title { | |
| color: var(--f7-dialog-title-text-color); | |
| font-size: var(--f7-dialog-title-font-size); | |
| font-weight: var(--f7-dialog-title-font-weight); | |
| line-height: var(--f7-dialog-title-line-height); | |
| } | |
| .dialog-buttons { | |
| position: relative; | |
| display: flex; | |
| } | |
| .dialog-buttons-vertical .dialog-buttons { | |
| display: block; | |
| height: auto !important; | |
| } | |
| .dialog-button { | |
| box-sizing: border-box; | |
| overflow: hidden; | |
| position: relative; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| color: var(--f7-dialog-button-text-color); | |
| font-size: var(--f7-dialog-button-font-size); | |
| height: var(--f7-dialog-button-height); | |
| line-height: var(--f7-dialog-button-height); | |
| letter-spacing: var(--f7-dialog-button-letter-spacing); | |
| text-align: var(--f7-dialog-button-text-align); | |
| font-weight: var(--f7-dialog-button-font-weight); | |
| text-transform: var(--f7-dialog-button-text-transform); | |
| display: block; | |
| cursor: pointer; | |
| } | |
| .dialog-button[class*="color-"] { | |
| --f7-dialog-button-text-color: var(--f7-theme-color); | |
| } | |
| .dialog-no-buttons .dialog-buttons { | |
| display: none; | |
| } | |
| .dialog-input-field { | |
| position: relative; | |
| } | |
| input.dialog-input[type] { | |
| box-sizing: border-box; | |
| margin: 0; | |
| margin-top: 15px; | |
| border-radius: 0; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| width: 100%; | |
| display: block; | |
| font-family: inherit; | |
| box-shadow: none; | |
| font-size: var(--f7-dialog-input-font-size); | |
| height: var(--f7-dialog-input-height); | |
| background-color: var(--f7-dialog-input-bg-color); | |
| border: var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color); | |
| } | |
| input.dialog-input[type]::-webkit-input-placeholder { | |
| color: var(--f7-dialog-input-placeholder-color); | |
| } | |
| input.dialog-input[type]::-moz-placeholder { | |
| color: var(--f7-dialog-input-placeholder-color); | |
| } | |
| input.dialog-input[type]::-ms-input-placeholder { | |
| color: var(--f7-dialog-input-placeholder-color); | |
| } | |
| input.dialog-input[type]::placeholder { | |
| color: var(--f7-dialog-input-placeholder-color); | |
| } | |
| .dialog-preloader .preloader { | |
| --f7-preloader-size: var(--f7-dialog-preloader-size); | |
| } | |
| html.with-modal-dialog .page-content { | |
| overflow: hidden; | |
| -webkit-overflow-scrolling: auto; | |
| } | |
| .ios .dialog.modal-out { | |
| transform: translate3d(0, -50%, 0) scale(1); | |
| } | |
| .ios .dialog-inner { | |
| padding: 15px; | |
| border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0; | |
| background: var(--f7-dialog-bg-color); | |
| } | |
| .ios .dialog-inner:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .ios .dialog-title + .dialog-text { | |
| margin-top: 5px; | |
| } | |
| .ios .dialog-buttons { | |
| height: 44px; | |
| justify-content: center; | |
| } | |
| .ios .dialog-button { | |
| width: 100%; | |
| padding: 0 5px; | |
| -webkit-box-flex: 1; | |
| -ms-flex: 1; | |
| background: var(--f7-dialog-bg-color); | |
| } | |
| .ios .dialog-button:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: 0; | |
| bottom: auto; | |
| left: auto; | |
| width: 1px; | |
| height: 100%; | |
| transform-origin: 100% 50%; | |
| transform: scaleX(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .ios .dialog-button.active-state { | |
| background-color: var(--f7-dialog-button-pressed-bg-color); | |
| } | |
| .ios .dialog-button:first-child { | |
| border-radius: 0 0 0 var(--f7-dialog-border-radius); | |
| } | |
| .ios .dialog-button:last-child { | |
| border-radius: 0 0 var(--f7-dialog-border-radius) 0; | |
| } | |
| .ios .dialog-button:last-child:after { | |
| display: none !important; | |
| } | |
| .ios .dialog-button:first-child:last-child { | |
| border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius); | |
| } | |
| .ios .dialog-button.dialog-button-bold { | |
| font-weight: 500; | |
| } | |
| .ios .dialog-buttons-vertical .dialog-buttons { | |
| height: auto; | |
| } | |
| .ios .dialog-buttons-vertical .dialog-button { | |
| border-radius: 0; | |
| } | |
| .ios .dialog-buttons-vertical .dialog-button:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .ios .dialog-buttons-vertical .dialog-button:last-child { | |
| border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius); | |
| } | |
| .ios .dialog-buttons-vertical .dialog-button:last-child:after { | |
| display: none !important; | |
| } | |
| .ios .dialog-no-buttons .dialog-inner { | |
| border-radius: var(--f7-dialog-border-radius); | |
| } | |
| .ios .dialog-no-buttons .dialog-inner:after { | |
| display: none !important; | |
| } | |
| .ios .dialog-input-field { | |
| margin-top: 15px; | |
| } | |
| .ios .dialog-input { | |
| padding: 0 5px; | |
| } | |
| .ios .dialog-input + .dialog-input { | |
| margin-top: 5px; | |
| } | |
| .ios .dialog-input-double + .dialog-input-double { | |
| margin-top: 0; | |
| } | |
| .ios .dialog-input-double + .dialog-input-double .dialog-input { | |
| border-top: 0; | |
| margin-top: 0; | |
| } | |
| .ios .dialog-preloader .dialog-title ~ .preloader, | |
| .ios .dialog-preloader .dialog-text ~ .preloader { | |
| margin-top: 15px; | |
| } | |
| .ios .dialog-progress .dialog-title ~ .progressbar, | |
| .ios .dialog-progress .dialog-text ~ .progressbar, | |
| .ios .dialog-progress .dialog-title ~ .progressbar-infinite, | |
| .ios .dialog-progress .dialog-text ~ .progressbar-infinite { | |
| margin-top: 15px; | |
| } | |
| .md .dialog { | |
| background: var(--f7-dialog-bg-color); | |
| } | |
| .md .dialog.modal-out { | |
| transform: translate3d(0, -50%, 0) scale(0.815); | |
| } | |
| .md .dialog-inner { | |
| padding: 24px 24px 20px; | |
| } | |
| .md .dialog-title + .dialog-text { | |
| margin-top: 20px; | |
| } | |
| .md .dialog-text { | |
| line-height: 1.5; | |
| } | |
| .md .dialog-buttons { | |
| height: 48px; | |
| padding: 6px 8px; | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| justify-content: flex-end; | |
| } | |
| .md .dialog-button { | |
| border-radius: 4px; | |
| min-width: 64px; | |
| padding: 0 8px; | |
| border: none; | |
| transition-duration: 300ms; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .md .dialog-button.active-state { | |
| background-color: var(--f7-dialog-button-pressed-bg-color); | |
| } | |
| .md .dialog-button.dialog-button-bold { | |
| font-weight: 700; | |
| } | |
| .md .dialog-button + .dialog-button { | |
| margin-left: 4px; | |
| } | |
| .md .dialog-buttons-vertical .dialog-buttons { | |
| padding: 0 0 8px 0; | |
| } | |
| .md .dialog-buttons-vertical .dialog-button { | |
| margin-left: 0; | |
| text-align: right; | |
| height: 48px; | |
| line-height: 48px; | |
| border-radius: 0; | |
| padding-left: 16px; | |
| padding-right: 16px; | |
| } | |
| .md .dialog-input { | |
| padding: 0; | |
| transition-duration: 200ms; | |
| position: relative; | |
| } | |
| .md .dialog-input + .dialog-input { | |
| margin-top: 16px; | |
| } | |
| .md .dialog-preloader .dialog-title, | |
| .md .dialog-progress .dialog-title, | |
| .md .dialog-preloader .dialog-inner, | |
| .md .dialog-progress .dialog-inner { | |
| text-align: center; | |
| } | |
| .md .dialog-preloader .dialog-title ~ .preloader, | |
| .md .dialog-preloader .dialog-text ~ .preloader { | |
| margin-top: 20px; | |
| } | |
| .md .dialog-progress .dialog-title ~ .progressbar, | |
| .md .dialog-progress .dialog-text ~ .progressbar, | |
| .md .dialog-progress .dialog-title ~ .progressbar-infinite, | |
| .md .dialog-progress .dialog-text ~ .progressbar-infinite { | |
| margin-top: 16px; | |
| } | |
| /* === Popup === */ | |
| :root { | |
| --f7-popup-border-radius: 0px; | |
| --f7-popup-tablet-width: 630px; | |
| --f7-popup-tablet-height: 630px; | |
| /* | |
| --f7-popup-tablet-border-radius: 0px; | |
| */ | |
| } | |
| .ios { | |
| --f7-popup-box-shadow: none; | |
| } | |
| .md { | |
| --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5); | |
| } | |
| .popup-backdrop { | |
| z-index: 10500; | |
| } | |
| .popup { | |
| position: absolute; | |
| left: 0; | |
| top: var(--f7-statusbar-height); | |
| width: 100%; | |
| height: calc(100% - var(--f7-statusbar-height)); | |
| display: none; | |
| box-sizing: border-box; | |
| transition-property: transform; | |
| transform: translate3d(0, 100%, 0); | |
| background: #fff; | |
| z-index: 11000; | |
| will-change: transform; | |
| overflow: hidden; | |
| border-radius: var(--f7-popup-border-radius); | |
| } | |
| .popup.modal-in, | |
| .popup.modal-out { | |
| transition-duration: 400ms; | |
| } | |
| .popup.not-animated { | |
| transition-duration: 0ms; | |
| } | |
| .popup.modal-in { | |
| display: block; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .popup.modal-out { | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| @media (min-width: 630px) and (min-height: 630px) { | |
| .popup:not(.popup-tablet-fullscreen) { | |
| width: var(--f7-popup-tablet-width); | |
| height: var(--f7-popup-tablet-height); | |
| left: 50%; | |
| top: 50%; | |
| margin-left: calc(-1 * var(--f7-popup-tablet-width) / 2); | |
| margin-top: calc(-1 * var(--f7-popup-tablet-height) / 2); | |
| transform: translate3d(0, 100vh, 0); | |
| box-shadow: var(--f7-popup-box-shadow); | |
| border-radius: var(--f7-popup-tablet-border-radius, var(--f7-popup-border-radius)); | |
| } | |
| .popup:not(.popup-tablet-fullscreen).modal-in { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .popup:not(.popup-tablet-fullscreen).modal-out { | |
| transform: translate3d(0, 100vh, 0); | |
| } | |
| } | |
| @media (max-width: 629px), (max-height: 629px) { | |
| .popup-backdrop { | |
| z-index: 9500; | |
| } | |
| } | |
| html.with-modal-popup .framework7-root > .views .page-content, | |
| html.with-modal-popup .framework7-root > .view .page-content, | |
| html.with-modal-popup .framework7-root > .panel .page-content { | |
| overflow: hidden; | |
| -webkit-overflow-scrolling: auto; | |
| } | |
| /* === Login Screen === */ | |
| :root { | |
| --f7-login-screen-bg-color: #fff; | |
| --f7-login-screen-content-bg-color: #fff; | |
| --f7-login-screen-blocks-max-width: 480px; | |
| /* | |
| --f7-login-screen-list-button-text-color: var(--f7-theme-color); | |
| */ | |
| --f7-login-screen-title-text-align: center; | |
| --f7-login-screen-title-text-color: inherit; | |
| --f7-login-screen-title-letter-spacing: 0; | |
| } | |
| :root .theme-dark, | |
| :root.theme-dark { | |
| --f7-login-screen-bg-color: #171717; | |
| --f7-login-screen-content-bg-color: transparent; | |
| } | |
| .ios { | |
| --f7-login-screen-blocks-margin-vertical: 25px; | |
| --f7-login-screen-title-font-size: 30px; | |
| --f7-login-screen-title-font-weight: normal; | |
| } | |
| .md { | |
| --f7-login-screen-blocks-margin-vertical: 24px; | |
| --f7-login-screen-title-font-size: 34px; | |
| --f7-login-screen-title-font-weight: normal; | |
| } | |
| .login-screen { | |
| position: absolute; | |
| left: 0; | |
| top: var(--f7-statusbar-height); | |
| width: 100%; | |
| height: calc(100% - var(--f7-statusbar-height)); | |
| display: none; | |
| box-sizing: border-box; | |
| transition-property: transform; | |
| transform: translate3d(0, 100%, 0); | |
| background: var(--f7-login-screen-bg-color); | |
| z-index: 11000; | |
| will-change: transform; | |
| } | |
| .login-screen.modal-in, | |
| .login-screen.modal-out { | |
| transition-duration: 400ms; | |
| } | |
| .login-screen.not-animated { | |
| transition-duration: 0ms; | |
| } | |
| .login-screen.modal-in { | |
| display: block; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .login-screen.modal-out { | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| .login-screen-content { | |
| background: var(--f7-login-screen-content-bg-color); | |
| } | |
| .login-screen-content .list-button { | |
| text-align: center; | |
| color: var(--f7-login-screen-list-button-text-color, var(--f7-theme-color)); | |
| } | |
| .login-screen-content .login-screen-title, | |
| .login-screen-content .list, | |
| .login-screen-content .block { | |
| margin: var(--f7-login-screen-blocks-margin-vertical) auto; | |
| } | |
| .login-screen-content .login-screen-title, | |
| .login-screen-content .list, | |
| .login-screen-content .block, | |
| .login-screen-content .block-footer, | |
| .login-screen-content .block-header { | |
| max-width: var(--f7-login-screen-blocks-max-width); | |
| } | |
| .login-screen-content .list ul { | |
| background: none; | |
| } | |
| .login-screen-content .list ul:before { | |
| display: none !important; | |
| } | |
| .login-screen-content .list ul:after { | |
| display: none !important; | |
| } | |
| .login-screen-content .block-footer, | |
| .login-screen-content .block-header { | |
| text-align: center; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .login-screen-title { | |
| text-align: var(--f7-login-screen-title-text-align); | |
| font-size: var(--f7-login-screen-title-font-size); | |
| font-weight: var(--f7-login-screen-title-font-weight); | |
| color: var(--f7-login-screen-title-text-color); | |
| letter-spacing: var(--f7-login-screen-title-letter-spacing); | |
| } | |
| .theme-dark .login-screen-content .list ul, | |
| .theme-dark .login-screen-content .block-strong { | |
| background-color: transparent; | |
| } | |
| /* === Popover === */ | |
| :root { | |
| --f7-popover-width: 260px; | |
| } | |
| .ios { | |
| --f7-popover-bg-color: rgba(255, 255, 255, 0.95); | |
| --f7-popover-border-radius: 13px; | |
| --f7-popover-box-shadow: none; | |
| --f7-popover-actions-icon-size: 28px; | |
| --f7-popover-actions-label-text-color: #8a8a8a; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-popover-bg-color: rgba(30, 30, 30, 0.95); | |
| } | |
| .md { | |
| --f7-popover-bg-color: #fff; | |
| --f7-popover-border-radius: 4px; | |
| --f7-popover-box-shadow: var(--f7-elevation-8); | |
| --f7-popover-actions-icon-size: 24px; | |
| --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.54); | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-popover-bg-color: #202020; | |
| --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.54); | |
| } | |
| .popover { | |
| width: var(--f7-popover-width); | |
| z-index: 13500; | |
| margin: 0; | |
| top: 0; | |
| opacity: 0; | |
| left: 0; | |
| position: absolute; | |
| display: none; | |
| transition-duration: 300ms; | |
| background-color: var(--f7-popover-bg-color); | |
| border-radius: var(--f7-popover-border-radius); | |
| box-shadow: var(--f7-popover-box-shadow); | |
| will-change: transform, opacity; | |
| } | |
| .popover .list { | |
| margin: 0; | |
| } | |
| .popover .list ul { | |
| background: none; | |
| } | |
| .popover .list:first-child ul:before { | |
| display: none !important; | |
| } | |
| .popover .list:last-child ul:after { | |
| display: none !important; | |
| } | |
| .popover .list:first-child ul { | |
| border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0; | |
| } | |
| .popover .list:first-child li:first-child, | |
| .popover .list:first-child li:first-child a, | |
| .popover .list:first-child li:first-child > label { | |
| border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0; | |
| } | |
| .popover .list:last-child ul { | |
| border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius); | |
| } | |
| .popover .list:last-child li:last-child, | |
| .popover .list:last-child li:last-child a, | |
| .popover .list:last-child li:last-child > label { | |
| border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius); | |
| } | |
| .popover .list:first-child:last-child li:first-child:last-child, | |
| .popover .list:first-child:last-child li:first-child:last-child a, | |
| .popover .list:first-child:last-child li:first-child:last-child > label, | |
| .popover .list:first-child:last-child ul { | |
| border-radius: var(--f7-popover-border-radius); | |
| } | |
| .popover .list + .list { | |
| margin-top: var(--f7-list-margin-vertical); | |
| } | |
| .popover.modal-in { | |
| opacity: 1; | |
| } | |
| .popover.not-animated { | |
| transition-duration: 0ms; | |
| } | |
| .popover-inner { | |
| will-change: scroll-position; | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .popover-from-actions .item-link i.icon { | |
| width: var(--f7-popover-actions-icon-size); | |
| height: var(--f7-popover-actions-icon-size); | |
| font-size: var(--f7-popover-actions-icon-size); | |
| } | |
| .popover-from-actions-bold { | |
| font-weight: 600; | |
| } | |
| .popover-from-actions-label { | |
| line-height: 1.3; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| padding: var(--f7-actions-label-padding); | |
| color: var(--f7-popover-actions-label-text-color); | |
| font-size: var(--f7-actions-label-font-size); | |
| justify-content: var(--f7-actions-label-justify-content); | |
| } | |
| .popover-from-actions-label:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-list-item-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .popover-from-actions-label:last-child:after { | |
| display: none !important; | |
| } | |
| .ios .popover { | |
| transform: none; | |
| transition-property: opacity; | |
| } | |
| .ios .popover-angle { | |
| width: 26px; | |
| height: 26px; | |
| position: absolute; | |
| left: -26px; | |
| top: 0; | |
| z-index: 100; | |
| overflow: hidden; | |
| } | |
| .ios .popover-angle:after { | |
| content: ''; | |
| background: var(--f7-popover-bg-color); | |
| width: 26px; | |
| height: 26px; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| border-radius: 3px; | |
| transform: rotate(45deg); | |
| } | |
| .ios .popover-angle.on-left { | |
| left: -26px; | |
| } | |
| .ios .popover-angle.on-left:after { | |
| left: 19px; | |
| top: 0; | |
| } | |
| .ios .popover-angle.on-right { | |
| left: 100%; | |
| } | |
| .ios .popover-angle.on-right:after { | |
| left: -19px; | |
| top: 0; | |
| } | |
| .ios .popover-angle.on-top { | |
| left: 0; | |
| top: -26px; | |
| } | |
| .ios .popover-angle.on-top:after { | |
| left: 0; | |
| top: 19px; | |
| } | |
| .ios .popover-angle.on-bottom { | |
| left: 0; | |
| top: 100%; | |
| } | |
| .ios .popover-angle.on-bottom:after { | |
| left: 0; | |
| top: -19px; | |
| } | |
| .md .popover { | |
| transform: scale(0.85, 0.6); | |
| transition-property: opacity, transform; | |
| } | |
| .md .popover.modal-in { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| .md .popover.modal-out { | |
| opacity: 0; | |
| transform: scale(1); | |
| } | |
| .md .popover-on-top { | |
| transform-origin: center bottom; | |
| } | |
| .md .popover-on-bottom { | |
| transform-origin: center top; | |
| } | |
| /* === Actions === */ | |
| .ios { | |
| --f7-actions-bg-color: rgba(255, 255, 255, 0.95); | |
| --f7-actions-border-radius: 13px; | |
| --f7-actions-button-border-color: rgba(0, 0, 0, 0.2); | |
| --f7-actions-button-text-color: var(--f7-theme-color); | |
| --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9); | |
| --f7-actions-button-padding: 0px; | |
| --f7-actions-button-text-align: center; | |
| --f7-actions-button-height: 57px; | |
| --f7-actions-button-height-landscape: 44px; | |
| --f7-actions-button-font-size: 20px; | |
| --f7-actions-button-icon-size: 28px; | |
| --f7-actions-button-justify-content: center; | |
| --f7-actions-label-padding: 8px 10px; | |
| --f7-actions-label-text-color: #8a8a8a; | |
| --f7-actions-label-font-size: 13px; | |
| --f7-actions-label-justify-content: center; | |
| --f7-actions-group-border-color: transparent; | |
| --f7-actions-group-margin: 8px; | |
| --f7-actions-grid-button-text-color: #757575; | |
| --f7-actions-grid-button-icon-size: 48px; | |
| --f7-actions-grid-button-font-size: 12px; | |
| } | |
| .md { | |
| --f7-actions-bg-color: #fff; | |
| --f7-actions-border-radius: 0px; | |
| --f7-actions-button-border-color: transparent; | |
| --f7-actions-button-text-color: rgba(0, 0, 0, 0.87); | |
| --f7-actions-button-pressed-bg-color: #e5e5e5; | |
| --f7-actions-button-padding: 0 16px; | |
| --f7-actions-button-text-align: left; | |
| --f7-actions-button-height: 48px; | |
| --f7-actions-button-height-landscape: 48px; | |
| --f7-actions-button-font-size: 16px; | |
| --f7-actions-button-icon-size: 24px; | |
| --f7-actions-button-justify-content: space-between; | |
| --f7-actions-label-padding: 12px 16px; | |
| --f7-actions-label-text-color: rgba(0, 0, 0, 0.54); | |
| --f7-actions-label-font-size: 16px; | |
| --f7-actions-label-justify-content: flex-start; | |
| --f7-actions-group-border-color: #d2d2d6; | |
| --f7-actions-group-margin: 0px; | |
| --f7-actions-grid-button-text-color: #757575; | |
| --f7-actions-grid-button-icon-size: 48px; | |
| --f7-actions-grid-button-font-size: 12px; | |
| } | |
| .actions-modal { | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| z-index: 13500; | |
| width: 100%; | |
| transform: translate3d(0, 100%, 0); | |
| display: none; | |
| max-height: 100%; | |
| will-change: scroll-position; | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| transition-property: transform; | |
| will-change: transform; | |
| } | |
| .actions-modal.modal-in, | |
| .actions-modal.modal-out { | |
| transition-duration: 300ms; | |
| } | |
| .actions-modal.not-animated { | |
| transition-duration: 0ms; | |
| } | |
| .actions-modal.modal-in { | |
| transform: translate3d(0, calc(-1 * var(--f7-safe-area-bottom)), 0); | |
| } | |
| .actions-modal.modal-out { | |
| z-index: 13499; | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| @media (min-width: 496px) { | |
| .actions-modal { | |
| width: 480px; | |
| left: 50%; | |
| margin-left: -240px; | |
| } | |
| } | |
| @media (orientation: landscape) { | |
| .actions-modal { | |
| --f7-actions-button-height: var(--f7-actions-button-height-landscape); | |
| } | |
| } | |
| .actions-group { | |
| overflow: hidden; | |
| position: relative; | |
| margin: var(--f7-actions-group-margin); | |
| border-radius: var(--f7-actions-border-radius); | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .actions-group:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-actions-group-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .actions-group:last-child:after { | |
| display: none !important; | |
| } | |
| .actions-button, | |
| .actions-label { | |
| width: 100%; | |
| font-weight: normal; | |
| margin: 0; | |
| box-sizing: border-box; | |
| display: block; | |
| position: relative; | |
| overflow: hidden; | |
| text-align: var(--f7-actions-button-text-align); | |
| background: var(--f7-actions-bg-color); | |
| } | |
| .actions-button:after, | |
| .actions-label:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-actions-button-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .actions-button:first-child, | |
| .actions-label:first-child { | |
| border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0; | |
| } | |
| .actions-button:last-child, | |
| .actions-label:last-child { | |
| border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius); | |
| } | |
| .actions-button:last-child:after, | |
| .actions-label:last-child:after { | |
| display: none !important; | |
| } | |
| .actions-button:first-child:last-child, | |
| .actions-label:first-child:last-child { | |
| border-radius: var(--f7-actions-border-radius); | |
| } | |
| .actions-button a, | |
| .actions-label a { | |
| text-decoration: none; | |
| color: inherit; | |
| display: block; | |
| } | |
| .actions-button b, | |
| .actions-label b, | |
| .actions-button.actions-button-bold, | |
| .actions-label.actions-button-bold { | |
| font-weight: 600; | |
| } | |
| .actions-button { | |
| cursor: pointer; | |
| display: flex; | |
| color: var(--f7-actions-button-text-color); | |
| font-size: var(--f7-actions-button-font-size); | |
| height: var(--f7-actions-button-height); | |
| line-height: var(--f7-actions-button-height); | |
| padding: var(--f7-actions-button-padding); | |
| justify-content: var(--f7-actions-button-justify-content); | |
| z-index: 10; | |
| } | |
| .actions-button.active-state { | |
| background-color: var(--f7-actions-button-pressed-bg-color) !important; | |
| } | |
| .actions-button[class*="color-"] { | |
| color: var(--f7-theme-color); | |
| } | |
| .actions-button-media { | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .actions-button-media i.icon { | |
| width: var(--f7-actions-button-icon-size); | |
| height: var(--f7-actions-button-icon-size); | |
| font-size: var(--f7-actions-button-icon-size); | |
| } | |
| .actions-button a, | |
| .actions-button-text { | |
| position: relative; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| .actions-button-text { | |
| width: 100%; | |
| flex-shrink: 1; | |
| text-align: var(--f7-actions-button-text-align); | |
| } | |
| .actions-label { | |
| line-height: 1.3; | |
| display: flex; | |
| align-items: center; | |
| font-size: var(--f7-actions-label-font-size); | |
| color: var(--f7-actions-label-text-color); | |
| padding: var(--f7-actions-label-padding); | |
| justify-content: var(--f7-actions-label-justify-content); | |
| min-height: var(--f7-actions-label-min-height, var(--f7-actions-button-height)); | |
| } | |
| .actions-grid .actions-group { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: flex-start; | |
| border-radius: 0; | |
| background: var(--f7-actions-bg-color); | |
| margin-top: 0; | |
| } | |
| .actions-grid .actions-group:first-child { | |
| border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0; | |
| } | |
| .actions-grid .actions-group:last-child { | |
| border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius); | |
| } | |
| .actions-grid .actions-group:first-child:last-child { | |
| border-radius: var(--f7-actions-border-radius); | |
| } | |
| .actions-grid .actions-group:not(:last-child) { | |
| margin-bottom: 0; | |
| } | |
| .actions-grid .actions-button, | |
| .actions-grid .actions-label { | |
| border-radius: 0 !important; | |
| background: none; | |
| } | |
| .actions-grid .actions-button { | |
| width: 33.33333333%; | |
| display: block; | |
| color: var(--f7-actions-grid-button-text-color); | |
| height: auto; | |
| line-height: 1; | |
| padding: 16px; | |
| } | |
| .actions-grid .actions-button:after { | |
| display: none !important; | |
| } | |
| .actions-grid .actions-button-media { | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| width: var(--f7-actions-grid-button-icon-size); | |
| height: var(--f7-actions-grid-button-icon-size); | |
| } | |
| .actions-grid .actions-button-media i.icon { | |
| width: var(--f7-actions-grid-button-icon-size); | |
| height: var(--f7-actions-grid-button-icon-size); | |
| font-size: var(--f7-actions-grid-button-icon-size); | |
| } | |
| .actions-grid .actions-button-text { | |
| margin-left: 0 !important; | |
| text-align: center !important; | |
| margin-top: 8px; | |
| line-height: 1.33em; | |
| height: 1.33em; | |
| font-size: var(--f7-actions-grid-button-font-size); | |
| } | |
| .ios .actions-button-media { | |
| margin-left: 15px; | |
| } | |
| .ios .actions-button-media + .actions-button-text { | |
| text-align: left; | |
| margin-left: 15px; | |
| } | |
| .md .actions-button { | |
| transition-duration: 300ms; | |
| } | |
| .md .actions-button-media { | |
| min-width: 40px; | |
| } | |
| .md .actions-button-media + .actions-button-text { | |
| margin-left: 16px; | |
| } | |
| /* === Sheet Modal === */ | |
| :root { | |
| --f7-sheet-height: 260px; | |
| } | |
| .ios { | |
| --f7-sheet-bg-color: #cfd5da; | |
| --f7-sheet-border-color: #929499; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-sheet-bg-color: #171717; | |
| --f7-sheet-border-color: var(--f7-bars-border-color); | |
| } | |
| .md { | |
| --f7-sheet-bg-color: #fff; | |
| --f7-sheet-border-color: transparent; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-sheet-bg-color: #202020; | |
| --f7-sheet-border-color: transparent; | |
| } | |
| .sheet-backdrop { | |
| z-index: 11000; | |
| } | |
| .sheet-modal { | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| width: 100%; | |
| height: var(--f7-sheet-height); | |
| display: none; | |
| box-sizing: border-box; | |
| transition-property: transform; | |
| transform: translate3d(0, 100%, 0); | |
| background: var(--f7-sheet-bg-color); | |
| z-index: 12500; | |
| will-change: transform; | |
| } | |
| .sheet-modal:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-sheet-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .sheet-modal:before { | |
| z-index: 600; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| transform-style: preserve-3d; | |
| } | |
| .sheet-modal.modal-in, | |
| .sheet-modal.modal-out { | |
| transition-duration: 300ms; | |
| } | |
| .sheet-modal.not-animated { | |
| transition-duration: 0ms; | |
| } | |
| .sheet-modal.modal-in { | |
| display: block; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .sheet-modal.modal-out { | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| .sheet-modal .sheet-modal-inner { | |
| height: 100%; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .sheet-modal .toolbar { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .sheet-modal .toolbar:after, | |
| .sheet-modal .toolbar:before { | |
| display: none; | |
| } | |
| .sheet-modal .toolbar ~ * .page-content { | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| } | |
| .sheet-modal .toolbar + .sheet-modal-inner { | |
| height: calc(100% - var(--f7-toolbar-height)); | |
| } | |
| .sheet-modal .toolbar ~ .sheet-modal-inner .page-content { | |
| padding-bottom: 0; | |
| padding-top: 0; | |
| } | |
| .sheet-modal .toolbar ~ .sheet-modal-inner .page-content, | |
| .sheet-modal .sheet-modal-inner > .page-content { | |
| padding-bottom: var(--f7-safe-area-bottom); | |
| } | |
| .md .sheet-modal .toolbar a.link:not(.tab-link) { | |
| flex-shrink: 0; | |
| } | |
| /* === Toast === */ | |
| .ios { | |
| --f7-toast-text-color: #fff; | |
| --f7-toast-font-size: 14px; | |
| --f7-toast-bg-color: rgba(0, 0, 0, 0.75); | |
| --f7-toast-translucent-bg-color-ios: rgba(0, 0, 0, 0.75); | |
| --f7-toast-padding-horizontal: 15px; | |
| --f7-toast-padding-vertical: 12px; | |
| --f7-toast-border-radius: 8px; | |
| --f7-toast-button-min-width: 64px; | |
| --f7-toast-icon-size: 48px; | |
| } | |
| .md { | |
| --f7-toast-text-color: #fff; | |
| --f7-toast-font-size: 14px; | |
| --f7-toast-bg-color: #323232; | |
| --f7-toast-padding-horizontal: 24px; | |
| --f7-toast-padding-vertical: 14px; | |
| --f7-toast-border-radius: 4px; | |
| --f7-toast-button-min-width: 64px; | |
| --f7-toast-icon-size: 48px; | |
| } | |
| .toast { | |
| transition-property: transform, opacity; | |
| position: absolute; | |
| max-width: 568px; | |
| z-index: 20000; | |
| color: var(--f7-toast-text-color); | |
| font-size: var(--f7-toast-font-size); | |
| box-sizing: border-box; | |
| background-color: var(--f7-toast-bg-color); | |
| opacity: 0; | |
| --f7-touch-ripple-color: var(--f7-touch-ripple-white); | |
| } | |
| .toast.modal-in { | |
| opacity: 1; | |
| } | |
| .toast .toast-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-sizing: border-box; | |
| padding: var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal); | |
| } | |
| .toast .toast-text { | |
| line-height: 20px; | |
| flex-shrink: 1; | |
| min-width: 0; | |
| } | |
| .toast .toast-button { | |
| flex-shrink: 0; | |
| min-width: var(--f7-toast-button-min-width); | |
| margin-top: -8px; | |
| margin-bottom: -8px; | |
| } | |
| .toast.toast-with-icon .toast-content { | |
| display: block; | |
| text-align: center; | |
| } | |
| .toast.toast-with-icon .toast-text { | |
| text-align: center; | |
| } | |
| .toast.toast-with-icon .toast-icon .f7-icons, | |
| .toast.toast-with-icon .toast-icon .material-icons { | |
| font-size: var(--f7-toast-icon-size); | |
| width: var(--f7-toast-icon-size); | |
| height: var(--f7-toast-icon-size); | |
| } | |
| .toast.toast-center { | |
| top: 50%; | |
| } | |
| .toast.toast-top { | |
| margin-top: var(--f7-statusbar-height); | |
| } | |
| .ios .toast { | |
| transition-duration: 300ms; | |
| width: 100%; | |
| left: 0; | |
| } | |
| @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) { | |
| .ios .toast { | |
| background: var(--f7-toast-translucent-bg-color-ios); | |
| -webkit-backdrop-filter: blur(10px); | |
| backdrop-filter: blur(10px); | |
| } | |
| } | |
| .ios .toast.toast-top { | |
| top: 0; | |
| transform: translate3d(0, -100%, 0); | |
| } | |
| .ios .toast.toast-top.modal-in { | |
| transform: translate3d(0, 0%, 0); | |
| } | |
| .ios .toast.toast-center { | |
| width: auto; | |
| left: 50%; | |
| border-radius: var(--f7-toast-border-radius); | |
| transform: translate3d(-50%, -50%, 0); | |
| } | |
| .ios .toast.toast-center.modal-in { | |
| transform: translate3d(-50%, -50%, 0); | |
| } | |
| .ios .toast.toast-bottom { | |
| bottom: 0; | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| .ios .toast.toast-bottom.modal-in { | |
| transform: translate3d(0, 0%, 0); | |
| } | |
| @media (max-width: 568px) { | |
| .ios .toast.toast-bottom .toast-content { | |
| padding-bottom: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom)); | |
| } | |
| } | |
| @media (min-width: 569px) { | |
| .ios .toast { | |
| left: 50%; | |
| margin-left: -284px; | |
| border-radius: var(--f7-toast-border-radius); | |
| } | |
| .ios .toast.toast-top { | |
| top: 15px; | |
| } | |
| .ios .toast.toast-center { | |
| margin-left: 0; | |
| } | |
| .ios .toast.toast-bottom { | |
| margin-bottom: calc(15px + var(--f7-safe-area-bottom)); | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .ios .toast { | |
| margin-left: 0; | |
| width: auto; | |
| } | |
| .ios .toast.toast-bottom, | |
| .ios .toast.toast-top { | |
| left: 15px; | |
| } | |
| } | |
| .ios .toast-button { | |
| margin-left: 15px; | |
| margin-right: calc(-1 * var(--f7-button-padding-horizontal)); | |
| } | |
| .md .toast { | |
| transition-duration: 200ms; | |
| border-radius: var(--f7-toast-border-radius); | |
| left: 8px; | |
| width: calc(100% - 16px); | |
| transform: scale(0.9); | |
| } | |
| .md .toast.modal-in { | |
| transform: scale(1); | |
| } | |
| .md .toast.modal-out { | |
| transform: scale(1); | |
| } | |
| .md .toast.toast-top { | |
| top: 8px; | |
| } | |
| .md .toast.toast-center { | |
| left: 50%; | |
| width: auto; | |
| transform: scale(0.9) translate3d(-55%, -55%, 0); | |
| } | |
| .md .toast.toast-center.modal-in { | |
| transform: scale(1) translate3d(-50%, -50%, 0); | |
| } | |
| .md .toast.toast-center.modal-out { | |
| transform: scale(1) translate3d(-50%, -50%, 0); | |
| } | |
| .md .toast.toast-bottom { | |
| bottom: calc(8px + var(--f7-safe-area-bottom)); | |
| } | |
| @media (min-width: 584px) { | |
| .md .toast { | |
| left: 50%; | |
| margin-left: -284px; | |
| } | |
| .md .toast.toast-center { | |
| margin-left: 0; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .md .toast { | |
| margin-left: 0; | |
| width: auto; | |
| } | |
| .md .toast.toast-bottom, | |
| .md .toast.toast-top { | |
| left: 24px; | |
| } | |
| .md .toast.toast-bottom { | |
| bottom: calc(24px + var(--f7-safe-area-bottom)); | |
| } | |
| .md .toast.toast-top { | |
| top: 24px; | |
| } | |
| } | |
| .md .toast-button { | |
| margin-left: 16px; | |
| margin-right: -8px; | |
| } | |
| /* === Preloader === */ | |
| :root { | |
| --f7-preloader-modal-padding: 8px; | |
| --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8); | |
| } | |
| .ios { | |
| --f7-preloader-color: #6c6c6c; | |
| --f7-preloader-size: 20px; | |
| --f7-preloader-modal-preloader-size: 34px; | |
| --f7-preloader-modal-border-radius: 5px; | |
| } | |
| .md { | |
| --f7-preloader-color: #757575; | |
| --f7-preloader-size: 32px; | |
| --f7-preloader-modal-preloader-size: 32px; | |
| --f7-preloader-modal-border-radius: 4px; | |
| } | |
| .preloader { | |
| display: inline-block; | |
| vertical-align: middle; | |
| width: var(--f7-preloader-size); | |
| height: var(--f7-preloader-size); | |
| font-size: 0; | |
| position: relative; | |
| } | |
| /* === Preloader Modal === */ | |
| .preloader-backdrop { | |
| visibility: visible; | |
| opacity: 0; | |
| background: none; | |
| z-index: 14000; | |
| } | |
| .preloader-modal { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| padding: var(--f7-preloader-modal-padding); | |
| background: var(--f7-preloader-modal-bg-color); | |
| z-index: 14500; | |
| transform: translateX(-50%) translateY(-50%); | |
| border-radius: var(--f7-preloader-modal-border-radius); | |
| } | |
| .preloader-modal .preloader { | |
| --f7-preloader-size: var(--f7-preloader-modal-preloader-size); | |
| display: block !important; | |
| } | |
| html.with-modal-preloader .page-content { | |
| overflow: hidden; | |
| -webkit-overflow-scrolling: auto; | |
| } | |
| .preloader[class*="color-"] { | |
| --f7-preloader-color: var(--f7-theme-color); | |
| } | |
| .ios .preloader { | |
| animation: ios-preloader-spin 1s steps(12, end) infinite; | |
| } | |
| .ios .preloader .preloader-inner-line { | |
| display: block; | |
| width: 10%; | |
| height: 25%; | |
| border-radius: 100px; | |
| background: var(--f7-preloader-color); | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform-origin: center 200%; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(1) { | |
| transform: translate(-50%, -200%) rotate(0deg); | |
| opacity: 0.27; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(2) { | |
| transform: translate(-50%, -200%) rotate(30deg); | |
| opacity: 0.32272727; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(3) { | |
| transform: translate(-50%, -200%) rotate(60deg); | |
| opacity: 0.37545455; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(4) { | |
| transform: translate(-50%, -200%) rotate(90deg); | |
| opacity: 0.42818182; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(5) { | |
| transform: translate(-50%, -200%) rotate(120deg); | |
| opacity: 0.48090909; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(6) { | |
| transform: translate(-50%, -200%) rotate(150deg); | |
| opacity: 0.53363636; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(7) { | |
| transform: translate(-50%, -200%) rotate(180deg); | |
| opacity: 0.58636364; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(8) { | |
| transform: translate(-50%, -200%) rotate(210deg); | |
| opacity: 0.63909091; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(9) { | |
| transform: translate(-50%, -200%) rotate(240deg); | |
| opacity: 0.69181818; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(10) { | |
| transform: translate(-50%, -200%) rotate(270deg); | |
| opacity: 0.74454545; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(11) { | |
| transform: translate(-50%, -200%) rotate(300deg); | |
| opacity: 0.79727273; | |
| } | |
| .ios .preloader .preloader-inner-line:nth-child(12) { | |
| transform: translate(-50%, -200%) rotate(330deg); | |
| opacity: 0.85; | |
| } | |
| @keyframes ios-preloader-spin { | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .md .preloader { | |
| animation: md-preloader-outer 3300ms linear infinite; | |
| } | |
| @keyframes md-preloader-outer { | |
| 0% { | |
| transform: rotate(0); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .md .preloader-inner { | |
| position: relative; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| animation: md-preloader-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite; | |
| } | |
| .md .preloader-inner .preloader-inner-gap { | |
| position: absolute; | |
| width: 2px; | |
| left: 50%; | |
| margin-left: -1px; | |
| top: 0; | |
| bottom: 0; | |
| box-sizing: border-box; | |
| border-top: 4px solid var(--f7-preloader-color); | |
| } | |
| .md .preloader-inner .preloader-inner-left, | |
| .md .preloader-inner .preloader-inner-right { | |
| position: absolute; | |
| top: 0; | |
| height: 100%; | |
| width: 50%; | |
| overflow: hidden; | |
| } | |
| .md .preloader-inner .preloader-inner-half-circle { | |
| position: absolute; | |
| top: 0; | |
| height: 100%; | |
| width: 200%; | |
| box-sizing: border-box; | |
| border: 4px solid var(--f7-preloader-color); | |
| border-bottom-color: transparent !important; | |
| border-radius: 50%; | |
| animation-iteration-count: infinite; | |
| animation-duration: 1.3125s; | |
| animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); | |
| } | |
| .md .preloader-inner .preloader-inner-left { | |
| left: 0; | |
| } | |
| .md .preloader-inner .preloader-inner-left .preloader-inner-half-circle { | |
| left: 0; | |
| border-right-color: transparent !important; | |
| animation-name: md-preloader-left-rotate; | |
| } | |
| .md .preloader-inner .preloader-inner-right { | |
| right: 0; | |
| } | |
| .md .preloader-inner .preloader-inner-right .preloader-inner-half-circle { | |
| right: 0; | |
| border-left-color: transparent !important; | |
| animation-name: md-preloader-right-rotate; | |
| } | |
| .md .preloader.color-multi .preloader-inner-left .preloader-inner-half-circle { | |
| animation-name: md-preloader-left-rotate-multicolor; | |
| } | |
| .md .preloader.color-multi .preloader-inner-right .preloader-inner-half-circle { | |
| animation-name: md-preloader-right-rotate-multicolor; | |
| } | |
| @keyframes md-preloader-left-rotate { | |
| 0%, | |
| 100% { | |
| transform: rotate(130deg); | |
| } | |
| 50% { | |
| transform: rotate(-5deg); | |
| } | |
| } | |
| @keyframes md-preloader-right-rotate { | |
| 0%, | |
| 100% { | |
| transform: rotate(-130deg); | |
| } | |
| 50% { | |
| transform: rotate(5deg); | |
| } | |
| } | |
| @keyframes md-preloader-inner-rotate { | |
| 12.5% { | |
| transform: rotate(135deg); | |
| } | |
| 25% { | |
| transform: rotate(270deg); | |
| } | |
| 37.5% { | |
| transform: rotate(405deg); | |
| } | |
| 50% { | |
| transform: rotate(540deg); | |
| } | |
| 62.5% { | |
| transform: rotate(675deg); | |
| } | |
| 75% { | |
| transform: rotate(810deg); | |
| } | |
| 87.5% { | |
| transform: rotate(945deg); | |
| } | |
| 100% { | |
| transform: rotate(1080deg); | |
| } | |
| } | |
| @keyframes md-preloader-left-rotate-multicolor { | |
| 0%, | |
| 100% { | |
| border-left-color: #4285F4; | |
| transform: rotate(130deg); | |
| } | |
| 75% { | |
| border-left-color: #1B9A59; | |
| border-top-color: #1B9A59; | |
| } | |
| 50% { | |
| border-left-color: #F7C223; | |
| border-top-color: #F7C223; | |
| transform: rotate(-5deg); | |
| } | |
| 25% { | |
| border-left-color: #DE3E35; | |
| border-top-color: #DE3E35; | |
| } | |
| } | |
| @keyframes md-preloader-right-rotate-multicolor { | |
| 0%, | |
| 100% { | |
| border-right-color: #4285F4; | |
| transform: rotate(-130deg); | |
| } | |
| 75% { | |
| border-right-color: #1B9A59; | |
| border-top-color: #1B9A59; | |
| } | |
| 50% { | |
| border-right-color: #F7C223; | |
| border-top-color: #F7C223; | |
| transform: rotate(5deg); | |
| } | |
| 25% { | |
| border-top-color: #DE3E35; | |
| border-right-color: #DE3E35; | |
| } | |
| } | |
| /* === Progressbar === */ | |
| .ios { | |
| /* | |
| --f7-progressbar-progress-color: var(--f7-theme-color); | |
| */ | |
| --f7-progressbar-bg-color: #b6b6b6; | |
| --f7-progressbar-height: 2px; | |
| --f7-progressbar-border-radius: 2px; | |
| } | |
| .md { | |
| /* | |
| --f7-progressbar-progress-color: var(--f7-theme-color); | |
| --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5); | |
| */ | |
| --f7-progressbar-height: 4px; | |
| --f7-progressbar-border-radius: 0px; | |
| } | |
| .progressbar, | |
| .progressbar-infinite { | |
| width: 100%; | |
| overflow: hidden; | |
| position: relative; | |
| display: block; | |
| transform-style: preserve-3d; | |
| background: var(--f7-progressbar-bg-color, rgba(var(--f7-theme-color-rgb), 0.5)); | |
| transform-origin: center top; | |
| height: var(--f7-progressbar-height); | |
| border-radius: var(--f7-progressbar-border-radius); | |
| } | |
| .progressbar { | |
| vertical-align: middle; | |
| } | |
| .progressbar span { | |
| background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color)); | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| transform: translate3d(-100%, 0, 0); | |
| transition-duration: 150ms; | |
| } | |
| .progressbar-infinite { | |
| z-index: 15000; | |
| } | |
| .progressbar-infinite:before, | |
| .progressbar-infinite:after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| transform-origin: left center; | |
| transform: translate3d(0, 0, 0); | |
| display: block; | |
| background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color)); | |
| } | |
| .progressbar-infinite.color-multi { | |
| background: none !important; | |
| } | |
| .progressbar-in { | |
| animation: progressbar-in 150ms forwards; | |
| } | |
| .progressbar-out { | |
| animation: progressbar-out 150ms forwards; | |
| } | |
| body > .progressbar, | |
| .view > .progressbar, | |
| .views > .progressbar, | |
| .page > .progressbar, | |
| .panel > .progressbar, | |
| .popup > .progressbar, | |
| .framework7-root > .progressbar, | |
| body > .progressbar-infinite, | |
| .view > .progressbar-infinite, | |
| .views > .progressbar-infinite, | |
| .page > .progressbar-infinite, | |
| .panel > .progressbar-infinite, | |
| .popup > .progressbar-infinite, | |
| .framework7-root > .progressbar-infinite { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| z-index: 15000; | |
| border-radius: 0 !important; | |
| transform-origin: center top !important; | |
| } | |
| body > .progressbar, | |
| .framework7-root > .progressbar, | |
| body > .progressbar-infinite, | |
| .framework7-root > .progressbar-infinite { | |
| top: var(--f7-statusbar-height); | |
| } | |
| @keyframes progressbar-in { | |
| from { | |
| opacity: 0; | |
| transform: scaleY(0); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scaleY(1); | |
| } | |
| } | |
| @keyframes progressbar-out { | |
| from { | |
| opacity: 1; | |
| transform: scaleY(1); | |
| } | |
| to { | |
| opacity: 0; | |
| transform: scaleY(0); | |
| } | |
| } | |
| .ios .progressbar-infinite:before { | |
| animation: ios-progressbar-infinite 1s linear infinite; | |
| } | |
| .ios .progressbar-infinite:after { | |
| display: none; | |
| } | |
| .ios .progressbar-infinite.color-multi:before { | |
| width: 400%; | |
| background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964); | |
| background-size: 25% 100%; | |
| background-repeat: repeat-x; | |
| animation: ios-progressbar-infinite-multicolor 3s linear infinite; | |
| } | |
| @keyframes ios-progressbar-infinite { | |
| 0% { | |
| transform: translate3d(-100%, 0, 0); | |
| } | |
| 100% { | |
| transform: translate3d(100%, 0, 0); | |
| } | |
| } | |
| @keyframes ios-progressbar-infinite-multicolor { | |
| 0% { | |
| transform: translate3d(0%, 0, 0); | |
| } | |
| 100% { | |
| transform: translate3d(-50%, 0, 0); | |
| } | |
| } | |
| .md .progressbar-infinite:before { | |
| animation: md-progressbar-infinite-1 2s linear infinite; | |
| } | |
| .md .progressbar-infinite:after { | |
| animation: md-progressbar-infinite-2 2s linear infinite; | |
| } | |
| .md .progressbar-infinite.color-multi:before { | |
| background: none; | |
| animation: md-progressbar-infinite-multicolor-bg 3s step-end infinite; | |
| } | |
| .md .progressbar-infinite.color-multi:after { | |
| background: none; | |
| animation: md-progressbar-infinite-multicolor-fill 3s linear infinite; | |
| transform-origin: center center; | |
| } | |
| @keyframes md-progressbar-infinite-1 { | |
| 0% { | |
| transform: translateX(-10%) scaleX(0.1); | |
| } | |
| 25% { | |
| transform: translateX(30%) scaleX(0.6); | |
| } | |
| 50% { | |
| transform: translateX(100%) scaleX(1); | |
| } | |
| 100% { | |
| transform: translateX(100%) scaleX(1); | |
| } | |
| } | |
| @keyframes md-progressbar-infinite-2 { | |
| 0% { | |
| transform: translateX(-100%) scaleX(1); | |
| } | |
| 40% { | |
| transform: translateX(-100%) scaleX(1); | |
| } | |
| 75% { | |
| transform: translateX(60%) scaleX(0.35); | |
| } | |
| 90% { | |
| transform: translateX(100%) scaleX(0.1); | |
| } | |
| 100% { | |
| transform: translateX(100%) scaleX(0.1); | |
| } | |
| } | |
| @keyframes md-progressbar-infinite-multicolor-bg { | |
| 0% { | |
| background-color: #4caf50; | |
| } | |
| 25% { | |
| background-color: #f44336; | |
| } | |
| 50% { | |
| background-color: #2196f3; | |
| } | |
| 75% { | |
| background-color: #ffeb3b; | |
| } | |
| } | |
| @keyframes md-progressbar-infinite-multicolor-fill { | |
| 0% { | |
| transform: scaleX(0); | |
| background-color: #f44336; | |
| } | |
| 24.9% { | |
| transform: scaleX(1); | |
| background-color: #f44336; | |
| } | |
| 25% { | |
| transform: scaleX(0); | |
| background-color: #2196f3; | |
| } | |
| 49.9% { | |
| transform: scaleX(1); | |
| background-color: #2196f3; | |
| } | |
| 50% { | |
| transform: scaleX(0); | |
| background-color: #ffeb3b; | |
| } | |
| 74.9% { | |
| transform: scaleX(1); | |
| background-color: #ffeb3b; | |
| } | |
| 75% { | |
| transform: scaleX(0); | |
| background-color: #4caf50; | |
| } | |
| 100% { | |
| transform: scaleX(1); | |
| background-color: #4caf50; | |
| } | |
| } | |
| /* === Sortable === */ | |
| :root { | |
| --f7-sortable-handler-color: #c7c7cc; | |
| --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8); | |
| } | |
| :root .theme-dark, | |
| :root.theme-dark { | |
| --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8); | |
| } | |
| .ios { | |
| --f7-sortable-handler-width: 35px; | |
| --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6); | |
| } | |
| .md { | |
| --f7-sortable-handler-width: 42px; | |
| --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2); | |
| } | |
| .sortable .sortable-handler { | |
| width: var(--f7-sortable-handler-width); | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| z-index: 10; | |
| opacity: 0; | |
| pointer-events: none; | |
| cursor: move; | |
| transition-duration: 300ms; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| right: var(--f7-safe-area-right); | |
| } | |
| .sortable .sortable-handler:after { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 20px; | |
| transition-duration: 300ms; | |
| transform: translateX(10px); | |
| color: var(--f7-sortable-handler-color); | |
| overflow: hidden; | |
| height: 20px; | |
| width: 18px; | |
| } | |
| .sortable .item-inner { | |
| transition-duration: 300ms; | |
| } | |
| .sortable li.sorting { | |
| z-index: 50; | |
| background: var(--f7-sortable-sorting-item-bg-color); | |
| transition-duration: 0ms; | |
| box-shadow: var(--f7-sortable-sorting-item-box-shadow); | |
| } | |
| .sortable li.sorting .item-inner:after { | |
| display: none !important; | |
| } | |
| .sortable-sorting li { | |
| transition-duration: 300ms; | |
| } | |
| .sortable-enabled .sortable-handler { | |
| pointer-events: auto; | |
| opacity: 1; | |
| } | |
| .sortable-enabled .sortable-handler:after { | |
| transform: translateX(0px); | |
| } | |
| .sortable-enabled .item-link .item-inner, | |
| .sortable-enabled .item-link .item-title-row { | |
| background-image: none !important; | |
| } | |
| .list.sortable-enabled .item-inner, | |
| .list.sortable-enabled .item-link .item-inner, | |
| .list.sortable-enabled .item-link.no-chevron .item-inner, | |
| .list.sortable-enabled.no-chevron .item-link .item-inner, | |
| .list.sortable-enabled .no-chevron .item-link .item-inner, | |
| .no-chevron .list.sortable-enabled .item-link .item-inner { | |
| padding-right: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right)); | |
| } | |
| .ios .sortable-handler:after { | |
| content: 'sort_ios'; | |
| } | |
| .md .sortable-handler:after { | |
| content: 'sort_md'; | |
| } | |
| /* === Swipeout === */ | |
| :root { | |
| --f7-swipeout-button-text-color: #fff; | |
| --f7-swipeout-button-bg-color: #c7c7cc; | |
| --f7-swipeout-delete-button-bg-color: #ff3b30; | |
| } | |
| .ios { | |
| --f7-swipeout-button-padding: 0 30px; | |
| } | |
| .md { | |
| --f7-swipeout-button-padding: 0 24px; | |
| } | |
| .swipeout { | |
| overflow: hidden; | |
| transform-style: preserve-3d; | |
| } | |
| .swipeout-deleting { | |
| transition-duration: 300ms; | |
| } | |
| .swipeout-deleting .swipeout-content { | |
| transform: translateX(-100%); | |
| } | |
| .swipeout-transitioning .swipeout-content, | |
| .swipeout-transitioning .swipeout-actions-right a, | |
| .swipeout-transitioning .swipeout-actions-left a, | |
| .swipeout-transitioning .swipeout-overswipe { | |
| transition-duration: 300ms; | |
| transition-property: transform, left; | |
| } | |
| .swipeout-content { | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .swipeout-overswipe { | |
| transition-duration: 200ms; | |
| transition-property: left; | |
| } | |
| .swipeout-actions-left, | |
| .swipeout-actions-right { | |
| position: absolute; | |
| top: 0; | |
| height: 100%; | |
| display: flex; | |
| direction: ltr; | |
| } | |
| .swipeout-actions-left > a, | |
| .swipeout-actions-right > a, | |
| .swipeout-actions-left > button, | |
| .swipeout-actions-right > button, | |
| .swipeout-actions-left > span, | |
| .swipeout-actions-right > span, | |
| .swipeout-actions-left > div, | |
| .swipeout-actions-right > div { | |
| color: var(--f7-swipeout-button-text-color); | |
| background: var(--f7-swipeout-button-bg-color); | |
| padding: var(--f7-swipeout-button-padding); | |
| display: flex; | |
| align-items: center; | |
| position: relative; | |
| left: 0; | |
| } | |
| .swipeout-actions-left > a:after, | |
| .swipeout-actions-right > a:after, | |
| .swipeout-actions-left > button:after, | |
| .swipeout-actions-right > button:after, | |
| .swipeout-actions-left > span:after, | |
| .swipeout-actions-right > span:after, | |
| .swipeout-actions-left > div:after, | |
| .swipeout-actions-right > div:after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| width: 600%; | |
| height: 100%; | |
| background: inherit; | |
| z-index: -1; | |
| transform: translate3d(0, 0, 0); | |
| pointer-events: none; | |
| } | |
| .swipeout-actions-left .swipeout-delete, | |
| .swipeout-actions-right .swipeout-delete { | |
| background: var(--f7-swipeout-delete-button-bg-color); | |
| } | |
| .swipeout-actions-right { | |
| right: 0%; | |
| transform: translateX(100%); | |
| } | |
| .swipeout-actions-right > a:after, | |
| .swipeout-actions-right > button:after, | |
| .swipeout-actions-right > span:after, | |
| .swipeout-actions-right > div:after { | |
| left: 100%; | |
| margin-left: -1px; | |
| } | |
| .swipeout-actions-left { | |
| left: 0%; | |
| transform: translateX(-100%); | |
| } | |
| .swipeout-actions-left > a:after, | |
| .swipeout-actions-left > button:after, | |
| .swipeout-actions-left > span:after, | |
| .swipeout-actions-left > div:after { | |
| right: 100%; | |
| margin-right: -1px; | |
| } | |
| .swipeout-actions-left [class*="color-"], | |
| .swipeout-actions-right [class*="color-"] { | |
| --f7-swipeout-button-bg-color: var(--f7-theme-color); | |
| } | |
| /* === Accordion === */ | |
| .accordion-item-toggle { | |
| cursor: pointer; | |
| transition-duration: 300ms; | |
| } | |
| .accordion-item-toggle.active-state { | |
| transition-duration: 300ms; | |
| } | |
| .accordion-item-toggle.active-state > .item-inner:after { | |
| background-color: transparent; | |
| } | |
| .accordion-item-toggle .item-inner { | |
| transition-duration: 300ms; | |
| transition-property: background-color; | |
| } | |
| .accordion-item-toggle .item-inner:after { | |
| transition-duration: 300ms; | |
| } | |
| .accordion-item .item-link .item-inner:after { | |
| transition-duration: 300ms; | |
| } | |
| .accordion-item .list, | |
| .accordion-item .block { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| .accordion-item .block > h1:first-child, | |
| .accordion-item .block > h2:first-child, | |
| .accordion-item .block > h3:first-child, | |
| .accordion-item .block > h4:first-child, | |
| .accordion-item .block > p:first-child { | |
| margin-top: 10px; | |
| } | |
| .accordion-item .block > h1:last-child, | |
| .accordion-item .block > h2:last-child, | |
| .accordion-item .block > h3:last-child, | |
| .accordion-item .block > h4:last-child, | |
| .accordion-item .block > p:last-child { | |
| margin-bottom: 10px; | |
| } | |
| .accordion-item-opened .accordion-item-toggle .item-inner:after, | |
| .accordion-item-opened > .item-link .item-inner:after { | |
| background-color: transparent; | |
| } | |
| .list li.accordion-item ul { | |
| padding-left: 0; | |
| } | |
| .accordion-item-content { | |
| position: relative; | |
| overflow: hidden; | |
| height: 0; | |
| font-size: 14px; | |
| transition-duration: 300ms; | |
| } | |
| .accordion-item-opened > .accordion-item-content { | |
| height: auto; | |
| } | |
| html.device-android-4 .accordion-item-content { | |
| transform: none; | |
| } | |
| .list .accordion-item-toggle .item-inner { | |
| padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-safe-area-right)); | |
| } | |
| .list .accordion-item-toggle .item-inner:before { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 50%; | |
| width: 14px; | |
| height: 8px; | |
| margin-top: -4px; | |
| font-size: 20px; | |
| line-height: 14px; | |
| color: var(--f7-list-chevron-icon-color); | |
| pointer-events: none; | |
| right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right)); | |
| content: 'chevron_right'; | |
| } | |
| .list .accordion-item-toggle.active-state { | |
| background-color: var(--f7-list-link-pressed-bg-color); | |
| } | |
| .list .accordion-item-toggle .item-inner:before, | |
| .list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before, | |
| .list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before, | |
| .media-list .accordion-item .accordion-item-toggle .item-title-row:before, | |
| .media-list .accordion-item > .item-link .item-title-row:before, | |
| .accordion-item.media-item .accordion-item-toggle .item-title-row:before, | |
| .accordion-item.media-item > .item-link .item-title-row:before, | |
| .links-list .accordion-item > a:before { | |
| content: 'chevron_down'; | |
| width: 14px; | |
| height: 8px; | |
| margin-top: -4px; | |
| line-height: 8px; | |
| } | |
| .list .accordion-item-toggle.accordion-item-opened .item-inner:before, | |
| .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before, | |
| .list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before, | |
| .media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before, | |
| .media-list .accordion-item-opened > .item-link .item-title-row:before, | |
| .accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before, | |
| .accordion-item-opened.media-item > .item-link .item-title-row:before, | |
| .links-list .accordion-item-opened > a:before { | |
| content: 'chevron_up'; | |
| width: 14px; | |
| height: 8px; | |
| margin-top: -4px; | |
| line-height: 8px; | |
| } | |
| /* === Contacts === */ | |
| .ios { | |
| --f7-contacts-list-title-font-size: inherit; | |
| --f7-contacts-list-title-font-weight: 600; | |
| --f7-contacts-list-title-text-color: #000; | |
| --f7-contacts-list-title-height: 22px; | |
| --f7-contacts-list-title-bg-color: #f7f7f7; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-contacts-list-title-text-color: #fff; | |
| --f7-contacts-list-title-bg-color: #232323; | |
| } | |
| .md { | |
| --f7-contacts-list-title-font-size: 20px; | |
| --f7-contacts-list-title-font-weight: 500; | |
| --f7-contacts-list-title-text-color: var(--f7-theme-color); | |
| --f7-contacts-list-title-height: 48px; | |
| --f7-contacts-list-title-bg-color: transparent; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-contacts-list-title-text-color: #fff; | |
| } | |
| .contacts-list { | |
| --f7-list-margin-vertical: 0px; | |
| } | |
| .contacts-list .list-group-title, | |
| .contacts-list li.list-group-title { | |
| background-color: var(--f7-contacts-list-title-bg-color); | |
| font-weight: var(--f7-contacts-list-title-font-weight); | |
| font-size: var(--f7-contacts-list-title-font-size); | |
| color: var(--f7-contacts-list-title-text-color, var(--f7-theme-color)); | |
| line-height: var(--f7-contacts-list-title-height); | |
| height: var(--f7-contacts-list-title-height); | |
| } | |
| .contacts-list .list-group:first-child ul:before { | |
| display: none !important; | |
| } | |
| .contacts-list .list-group:last-child ul:after { | |
| display: none !important; | |
| } | |
| .md .contacts-list .list-group-title { | |
| pointer-events: none; | |
| overflow: visible; | |
| width: 56px; | |
| } | |
| .md .contacts-list .list-group-title + li { | |
| margin-top: calc(var(--f7-contacts-list-title-height) * -1); | |
| } | |
| .md .contacts-list li:not(.list-group-title) { | |
| padding-left: 56px; | |
| } | |
| /* === Virtual List === */ | |
| /* === Indexed List === */ | |
| :root { | |
| --f7-list-index-width: 16px; | |
| --f7-list-index-font-size: 11px; | |
| --f7-list-index-font-weight: 600; | |
| /* --f7-list-index-text-color: var(--f7-theme-color); */ | |
| --f7-list-index-item-height: 14px; | |
| --f7-list-index-label-text-color: #fff; | |
| /* --f7-list-index-label-bg-color: var(--f7-theme-color); */ | |
| --f7-list-index-label-font-weight: 500; | |
| } | |
| .ios { | |
| --f7-list-index-label-size: 44px; | |
| --f7-list-index-label-font-size: 17px; | |
| --f7-list-index-skip-dot-size: 6px; | |
| } | |
| .md { | |
| --f7-list-index-label-size: 56px; | |
| --f7-list-index-label-font-size: 20px; | |
| --f7-list-index-skip-dot-size: 4px; | |
| } | |
| .list-index { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| text-align: center; | |
| z-index: 10; | |
| width: var(--f7-list-index-width); | |
| cursor: pointer; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| right: var(--f7-safe-area-right); | |
| } | |
| .list-index:before { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| top: 0; | |
| right: 100%; | |
| height: 100%; | |
| } | |
| .list-index ul { | |
| color: var(--f7-list-index-text-color, var(--f7-theme-color)); | |
| font-size: var(--f7-list-index-font-size); | |
| font-weight: var(--f7-list-index-font-weight); | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| flex-shrink: 0; | |
| height: 100%; | |
| width: 100%; | |
| position: relative; | |
| } | |
| .list-index li { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| position: relative; | |
| height: var(--f7-list-index-item-height); | |
| line-height: var(--f7-list-index-item-height); | |
| flex-shrink: 0; | |
| display: block; | |
| width: 100%; | |
| } | |
| .list-index .list-index-skip-placeholder:after { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| border-radius: 50%; | |
| width: var(--f7-list-index-skip-dot-size); | |
| height: var(--f7-list-index-skip-dot-size); | |
| margin-left: calc(-1 * var(--f7-list-index-skip-dot-size) / 2); | |
| margin-top: calc(-1 * var(--f7-list-index-skip-dot-size) / 2); | |
| background: var(--f7-list-index-text-color, var(--f7-theme-color)); | |
| } | |
| .list-index .list-index-label { | |
| position: absolute; | |
| bottom: 0; | |
| right: 100%; | |
| text-align: center; | |
| background-color: var(--f7-list-index-label-bg-color, var(--f7-theme-color)); | |
| color: var(--f7-list-index-label-text-color); | |
| width: var(--f7-list-index-label-size); | |
| height: var(--f7-list-index-label-size); | |
| line-height: var(--f7-list-index-label-size); | |
| font-size: var(--f7-list-index-label-font-size); | |
| font-weight: var(--f7-list-index-label-font-weight); | |
| } | |
| .navbar ~ .page > .list-index, | |
| .navbar ~ .list-index { | |
| top: var(--f7-navbar-height); | |
| } | |
| .navbar ~ .toolbar-top ~ .list-index, | |
| .ios .navbar ~ .toolbar-top-ios ~ .list-index, | |
| .md .navbar ~ .toolbar-top-md ~ .list-index { | |
| top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height)); | |
| } | |
| .navbar ~ .toolbar-top.tabbar-labels ~ .list-index, | |
| .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .list-index, | |
| .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .list-index { | |
| top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height)); | |
| } | |
| .navbar ~ .subnavbar ~ .list-index, | |
| .page-with-subnavbar .navbar ~ .list-index { | |
| top: calc(var(--f7-navbar-height) + var(--f7-subnvabar-height)); | |
| } | |
| .toolbar-bottom ~ .page > .list-index, | |
| .ios .toolbar-bottom-ios ~ .page > .list-index, | |
| .md .toolbar-bottom-md ~ .page > .list-index, | |
| .toolbar-bottom ~ * .page > .list-index, | |
| .ios .toolbar-bottom-ios ~ * .page > .list-index, | |
| .md .toolbar-bottom-md ~ * .page > .list-index, | |
| .toolbar-bottom ~ .list-index, | |
| .ios .toolbar-bottom-ios ~ .list-index, | |
| .md .toolbar-bottom-md ~ .list-index { | |
| bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom)); | |
| } | |
| .toolbar-bottom.tabbar-labels ~ .page > .list-index, | |
| .ios .toolbar-bottom-ios.tabbar-labels ~ .page > .list-index, | |
| .md .toolbar-bottom-md.tabbar-labels ~ .page > .list-index, | |
| .toolbar-bottom.tabbar-labels ~ * .page > .list-index, | |
| .ios .toolbar-bottom-ios.tabbar-labels ~ * .page > .list-index, | |
| .md .toolbar-bottom-md.tabbar-labels ~ * .page > .list-index, | |
| .toolbar-bottom.tabbar-labels ~ .list-index, | |
| .ios .toolbar-bottom-ios.tabbar-labels ~ .list-index, | |
| .md .toolbar-bottom-md.tabbar-labels ~ .list-index { | |
| bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom)); | |
| } | |
| .ios .list-index .list-index-label { | |
| margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2); | |
| margin-right: calc(var(--f7-list-index-width) - 1px); | |
| border-radius: 50%; | |
| } | |
| .ios .list-index .list-index-label:before { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50% 0% 50% 50%; | |
| content: ''; | |
| background-color: inherit; | |
| left: 0; | |
| top: 0; | |
| transform: rotate(45deg); | |
| z-index: -1; | |
| } | |
| .md .list-index .list-index-label { | |
| border-radius: 50% 50% 0 50%; | |
| } | |
| /* === Timeline === */ | |
| :root { | |
| --f7-timeline-horizontal-date-height: 34px; | |
| --f7-timeline-year-height: 24px; | |
| --f7-timeline-month-height: 24px; | |
| --f7-timeline-item-inner-bg-color: #fff; | |
| } | |
| :root .theme-dark, | |
| :root.theme-dark { | |
| --f7-timeline-item-inner-bg-color: #1c1c1d; | |
| } | |
| .ios { | |
| --f7-timeline-padding-horizontal: 15px; | |
| --f7-timeline-margin-vertical: 35px; | |
| --f7-timeline-divider-margin-horizontal: 15px; | |
| --f7-timeline-inner-block-margin-vertical: 15px; | |
| --f7-timeline-item-inner-border-radius: 7px; | |
| --f7-timeline-item-inner-box-shadow: none; | |
| --f7-timeline-item-time-font-size: 13px; | |
| --f7-timeline-item-time-text-color: #6d6d72; | |
| --f7-timeline-item-title-font-size: 17px; | |
| --f7-timeline-item-title-font-weight: 600; | |
| --f7-timeline-item-subtitle-font-size: 15px; | |
| --f7-timeline-item-subtitle-font-weight: inherit; | |
| --f7-timeline-horizontal-item-padding: 10px; | |
| --f7-timeline-horizontal-item-border-color: #c4c4c4; | |
| --f7-timeline-horizontal-item-date-border-color: #c4c4c4; | |
| --f7-timeline-horizontal-item-date-shadow-image: none; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-timeline-item-time-text-color: #8E8E93; | |
| } | |
| .md { | |
| --f7-timeline-padding-horizontal: 16px; | |
| --f7-timeline-margin-vertical: 32px; | |
| --f7-timeline-divider-margin-horizontal: 16px; | |
| --f7-timeline-inner-block-margin-vertical: 16px; | |
| --f7-timeline-item-inner-border-radius: 4px; | |
| --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1); | |
| --f7-timeline-item-time-font-size: 13px; | |
| --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54); | |
| --f7-timeline-item-title-font-size: 16px; | |
| --f7-timeline-item-title-font-weight: 400; | |
| --f7-timeline-item-subtitle-font-size: inherit; | |
| --f7-timeline-item-subtitle-font-weight: inherit; | |
| --f7-timeline-horizontal-item-padding: 12px; | |
| --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12); | |
| --f7-timeline-horizontal-item-date-border-color: transparent; | |
| --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image); | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54); | |
| } | |
| .timeline { | |
| box-sizing: border-box; | |
| margin: var(--f7-timeline-margin-vertical) 0; | |
| padding: 0 var(--f7-timeline-padding-horizontal); | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| padding-left: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left)); | |
| padding-right: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right)); | |
| } | |
| .block-strong .timeline { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .timeline-item { | |
| display: flex; | |
| justify-content: flex-start; | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| position: relative; | |
| padding: 2px 0px var(--f7-timeline-padding-horizontal); | |
| } | |
| .timeline-item:last-child { | |
| padding-bottom: 2px; | |
| } | |
| .timeline-item-date { | |
| flex-shrink: 0; | |
| width: 50px; | |
| text-align: right; | |
| box-sizing: border-box; | |
| } | |
| .timeline-item-date small { | |
| font-size: 10px; | |
| } | |
| .timeline-item-content { | |
| margin: 2px; | |
| min-width: 0; | |
| position: relative; | |
| flex-shrink: 10; | |
| } | |
| .timeline-item-content .card, | |
| .timeline-item-content.card, | |
| .timeline-item-content .list, | |
| .timeline-item-content.list, | |
| .timeline-item-content .block, | |
| .timeline-item-content.block { | |
| margin: 0; | |
| width: 100%; | |
| } | |
| .timeline-item-content .card + .card, | |
| .timeline-item-content .list + .card, | |
| .timeline-item-content .block + .card, | |
| .timeline-item-content .card + .list, | |
| .timeline-item-content .list + .list, | |
| .timeline-item-content .block + .list, | |
| .timeline-item-content .card + .block, | |
| .timeline-item-content .list + .block, | |
| .timeline-item-content .block + .block { | |
| margin: var(--f7-timeline-inner-block-margin-vertical) 0 0; | |
| } | |
| .timeline-item-content p:first-child, | |
| .timeline-item-content ul:first-child, | |
| .timeline-item-content ol:first-child, | |
| .timeline-item-content h1:first-child, | |
| .timeline-item-content h2:first-child, | |
| .timeline-item-content h3:first-child, | |
| .timeline-item-content h4:first-child { | |
| margin-top: 0; | |
| } | |
| .timeline-item-content p:last-child, | |
| .timeline-item-content ul:last-child, | |
| .timeline-item-content ol:last-child, | |
| .timeline-item-content h1:last-child, | |
| .timeline-item-content h2:last-child, | |
| .timeline-item-content h3:last-child, | |
| .timeline-item-content h4:last-child { | |
| margin-bottom: 0; | |
| } | |
| .timeline-item-inner { | |
| background: var(--f7-timeline-item-inner-bg-color); | |
| box-sizing: border-box; | |
| border-radius: var(--f7-timeline-item-inner-border-radius); | |
| padding: 8px var(--f7-timeline-padding-horizontal); | |
| box-shadow: var(--f7-timeline-item-inner-box-shadow); | |
| } | |
| .timeline-item-inner + .timeline-item-inner { | |
| margin-top: var(--f7-timeline-inner-block-margin-vertical); | |
| } | |
| .timeline-item-inner .block { | |
| padding: 0; | |
| color: inherit; | |
| } | |
| .timeline-item-inner .block-strong { | |
| padding-left: 0; | |
| padding-right: 0; | |
| margin: 0; | |
| } | |
| .timeline-item-inner .block-strong:before { | |
| display: none !important; | |
| } | |
| .timeline-item-inner .block-strong:after { | |
| display: none !important; | |
| } | |
| .timeline-item-inner .list ul:before { | |
| display: none !important; | |
| } | |
| .timeline-item-inner .list ul:after { | |
| display: none !important; | |
| } | |
| .timeline-item-divider { | |
| width: 1px; | |
| position: relative; | |
| width: 10px; | |
| height: 10px; | |
| background: #bbb; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| margin: 3px var(--f7-timeline-divider-margin-horizontal) 0; | |
| } | |
| .timeline-item-divider:after, | |
| .timeline-item-divider:before { | |
| content: ' '; | |
| width: 1px; | |
| height: 100vh; | |
| position: absolute; | |
| left: 50%; | |
| background: inherit; | |
| transform: translate3d(-50%, 0, 0); | |
| } | |
| .timeline-item-divider:after { | |
| top: 100%; | |
| } | |
| .timeline-item-divider:before { | |
| bottom: 100%; | |
| } | |
| .timeline-item:last-child .timeline-item-divider:after { | |
| display: none; | |
| } | |
| .timeline-item:first-child .timeline-item-divider:before { | |
| display: none; | |
| } | |
| .timeline-item-time { | |
| font-size: var(--f7-timeline-item-time-font-size); | |
| margin-top: var(--f7-timeline-inner-block-margin-vertical); | |
| color: var(--f7-timeline-item-time-text-color); | |
| } | |
| .timeline-item-time:first-child, | |
| .timeline-item-time:last-child { | |
| margin-top: 0; | |
| } | |
| .timeline-item-title + .timeline-item-time { | |
| margin-top: 0; | |
| } | |
| .timeline-item-title { | |
| font-size: var(--f7-timeline-item-title-font-size); | |
| font-weight: var(--f7-timeline-item-title-font-weight); | |
| } | |
| .timeline-item-subtitle { | |
| font-size: var(--f7-timeline-item-subtitle-font-size); | |
| font-weight: var(--f7-timeline-item-subtitle-font-weight); | |
| } | |
| .timeline-sides .timeline-item-right, | |
| .timeline-sides .timeline-item { | |
| margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px); | |
| margin-right: 0; | |
| } | |
| .timeline-sides .timeline-item-right .timeline-item-date, | |
| .timeline-sides .timeline-item .timeline-item-date { | |
| text-align: right; | |
| } | |
| .timeline-sides .timeline-item-left, | |
| .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) { | |
| flex-direction: row-reverse; | |
| margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px); | |
| margin-left: 0; | |
| } | |
| .timeline-sides .timeline-item-left .timeline-item-date, | |
| .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date { | |
| text-align: left; | |
| } | |
| @media (min-width: 768px) { | |
| .tablet-sides .timeline-item-right, | |
| .tablet-sides .timeline-item { | |
| margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px); | |
| margin-right: 0; | |
| } | |
| .tablet-sides .timeline-item-right .timeline-item-date, | |
| .tablet-sides .timeline-item .timeline-item-date { | |
| text-align: right; | |
| } | |
| .tablet-sides .timeline-item-left, | |
| .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) { | |
| flex-direction: row-reverse; | |
| margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px); | |
| margin-left: 0; | |
| } | |
| .tablet-sides .timeline-item-left .timeline-item-date, | |
| .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date { | |
| text-align: left; | |
| } | |
| } | |
| .timeline-horizontal { | |
| height: 100%; | |
| display: flex; | |
| padding: 0; | |
| margin: 0; | |
| position: relative; | |
| padding-left: var(--f7-safe-area-left); | |
| padding-right: 0; | |
| } | |
| .timeline-horizontal .timeline-item { | |
| display: block; | |
| width: 33.33333333vw; | |
| margin: 0; | |
| padding: 0; | |
| flex-shrink: 0; | |
| position: relative; | |
| height: 100%; | |
| padding-top: var(--f7-timeline-horizontal-date-height) !important; | |
| padding-bottom: var(--f7-timeline-horizontal-item-padding); | |
| } | |
| .timeline-horizontal .timeline-item:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-timeline-horizontal-item-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: 0; | |
| bottom: auto; | |
| left: auto; | |
| width: 1px; | |
| height: 100%; | |
| transform-origin: 100% 50%; | |
| transform: scaleX(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .timeline-horizontal .timeline-item-date { | |
| padding: 0px var(--f7-timeline-horizontal-item-padding); | |
| width: auto; | |
| line-height: var(--f7-timeline-horizontal-date-height); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: var(--f7-timeline-horizontal-date-height); | |
| background-color: var(--f7-bars-bg-color, var(--f7-theme-color)); | |
| color: var(--f7-bars-text-color); | |
| text-align: left; | |
| } | |
| .timeline-horizontal .timeline-item-date:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-timeline-horizontal-item-date-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .timeline-horizontal .timeline-item-date:before { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| width: 100%; | |
| top: 100%; | |
| bottom: auto; | |
| height: 8px; | |
| pointer-events: none; | |
| background: var(--f7-timeline-horizontal-item-date-shadow-image); | |
| } | |
| .timeline-horizontal.no-shadow .timeline-item-date:before { | |
| display: none; | |
| } | |
| .timeline-horizontal .timeline-item-content { | |
| padding: var(--f7-timeline-horizontal-item-padding); | |
| height: calc(100% - var(--f7-timeline-horizontal-item-padding)); | |
| will-change: scroll-position; | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| margin: 0; | |
| } | |
| .timeline-horizontal .timeline-item-divider { | |
| display: none; | |
| } | |
| .timeline-horizontal > .timeline-item:last-child:after, | |
| .timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after { | |
| display: none !important; | |
| } | |
| .timeline-horizontal.col-5 .timeline-item { | |
| width: 5vw; | |
| } | |
| .timeline-horizontal.col-10 .timeline-item { | |
| width: 10vw; | |
| } | |
| .timeline-horizontal.col-15 .timeline-item { | |
| width: 15vw; | |
| } | |
| .timeline-horizontal.col-20 .timeline-item { | |
| width: 20vw; | |
| } | |
| .timeline-horizontal.col-25 .timeline-item { | |
| width: 25vw; | |
| } | |
| .timeline-horizontal.col-30 .timeline-item { | |
| width: 30vw; | |
| } | |
| .timeline-horizontal.col-33 .timeline-item { | |
| width: 33.333333333333336vw; | |
| } | |
| .timeline-horizontal.col-35 .timeline-item { | |
| width: 35vw; | |
| } | |
| .timeline-horizontal.col-40 .timeline-item { | |
| width: 40vw; | |
| } | |
| .timeline-horizontal.col-45 .timeline-item { | |
| width: 45vw; | |
| } | |
| .timeline-horizontal.col-50 .timeline-item { | |
| width: 50vw; | |
| } | |
| .timeline-horizontal.col-55 .timeline-item { | |
| width: 55vw; | |
| } | |
| .timeline-horizontal.col-60 .timeline-item { | |
| width: 60vw; | |
| } | |
| .timeline-horizontal.col-65 .timeline-item { | |
| width: 65vw; | |
| } | |
| .timeline-horizontal.col-66 .timeline-item { | |
| width: 66.66666666666666vw; | |
| } | |
| .timeline-horizontal.col-70 .timeline-item { | |
| width: 70vw; | |
| } | |
| .timeline-horizontal.col-75 .timeline-item { | |
| width: 75vw; | |
| } | |
| .timeline-horizontal.col-80 .timeline-item { | |
| width: 80vw; | |
| } | |
| .timeline-horizontal.col-85 .timeline-item { | |
| width: 85vw; | |
| } | |
| .timeline-horizontal.col-90 .timeline-item { | |
| width: 90vw; | |
| } | |
| .timeline-horizontal.col-95 .timeline-item { | |
| width: 95vw; | |
| } | |
| .timeline-horizontal.col-100 .timeline-item { | |
| width: 100vw; | |
| } | |
| @media (min-width: 768px) { | |
| .timeline-horizontal.tablet-5 .timeline-item { | |
| width: 5vw; | |
| } | |
| .timeline-horizontal.tablet-10 .timeline-item { | |
| width: 10vw; | |
| } | |
| .timeline-horizontal.tablet-15 .timeline-item { | |
| width: 15vw; | |
| } | |
| .timeline-horizontal.tablet-20 .timeline-item { | |
| width: 20vw; | |
| } | |
| .timeline-horizontal.tablet-25 .timeline-item { | |
| width: 25vw; | |
| } | |
| .timeline-horizontal.tablet-30 .timeline-item { | |
| width: 30vw; | |
| } | |
| .timeline-horizontal.tablet-33 .timeline-item { | |
| width: 33.333333333333336vw; | |
| } | |
| .timeline-horizontal.tablet-35 .timeline-item { | |
| width: 35vw; | |
| } | |
| .timeline-horizontal.tablet-40 .timeline-item { | |
| width: 40vw; | |
| } | |
| .timeline-horizontal.tablet-45 .timeline-item { | |
| width: 45vw; | |
| } | |
| .timeline-horizontal.tablet-50 .timeline-item { | |
| width: 50vw; | |
| } | |
| .timeline-horizontal.tablet-55 .timeline-item { | |
| width: 55vw; | |
| } | |
| .timeline-horizontal.tablet-60 .timeline-item { | |
| width: 60vw; | |
| } | |
| .timeline-horizontal.tablet-65 .timeline-item { | |
| width: 65vw; | |
| } | |
| .timeline-horizontal.tablet-66 .timeline-item { | |
| width: 66.66666666666666vw; | |
| } | |
| .timeline-horizontal.tablet-70 .timeline-item { | |
| width: 70vw; | |
| } | |
| .timeline-horizontal.tablet-75 .timeline-item { | |
| width: 75vw; | |
| } | |
| .timeline-horizontal.tablet-80 .timeline-item { | |
| width: 80vw; | |
| } | |
| .timeline-horizontal.tablet-85 .timeline-item { | |
| width: 85vw; | |
| } | |
| .timeline-horizontal.tablet-90 .timeline-item { | |
| width: 90vw; | |
| } | |
| .timeline-horizontal.tablet-95 .timeline-item { | |
| width: 95vw; | |
| } | |
| .timeline-horizontal.tablet-100 .timeline-item { | |
| width: 100vw; | |
| } | |
| } | |
| .timeline-year { | |
| padding-top: var(--f7-timeline-year-height); | |
| } | |
| .timeline-year:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-timeline-horizontal-item-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: 0; | |
| bottom: auto; | |
| left: auto; | |
| width: 1px; | |
| height: 100%; | |
| transform-origin: 100% 50%; | |
| transform: scaleX(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .timeline-year:last-child:after { | |
| display: none !important; | |
| } | |
| .timeline-month { | |
| padding-top: var(--f7-timeline-month-height); | |
| } | |
| .timeline-month .timeline-item:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-timeline-horizontal-item-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .timeline-year, | |
| .timeline-month { | |
| display: flex; | |
| flex-shrink: 0; | |
| position: relative; | |
| box-sizing: border-box; | |
| height: 100%; | |
| } | |
| .timeline-year-title { | |
| line-height: var(--f7-timeline-year-height); | |
| height: var(--f7-timeline-year-height); | |
| } | |
| .timeline-month-title { | |
| line-height: var(--f7-timeline-month-height); | |
| height: var(--f7-timeline-month-height); | |
| } | |
| .timeline-year-title, | |
| .timeline-month-title { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| box-sizing: border-box; | |
| padding: 0 var(--f7-timeline-horizontal-item-padding); | |
| background-color: var(--f7-bars-bg-color, var(--f7-theme-color)); | |
| color: var(--f7-bars-text-color); | |
| } | |
| .timeline-year-title span, | |
| .timeline-month-title span { | |
| display: inline-block; | |
| position: -webkit-sticky; | |
| position: sticky; | |
| left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left)); | |
| } | |
| .timeline-year-title { | |
| font-size: 16px; | |
| } | |
| .timeline-month-title span { | |
| margin-top: -2px; | |
| } | |
| .timeline-year:first-child .timeline-year-title, | |
| .timeline-year:first-child .timeline-month:first-child .timeline-month-title, | |
| .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title { | |
| left: calc(var(--f7-safe-area-left) * -1); | |
| right: 0; | |
| width: auto; | |
| } | |
| .timeline-horizontal .timeline-item:first-child, | |
| .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child, | |
| .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child, | |
| .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item { | |
| overflow: visible; | |
| } | |
| .timeline-horizontal .timeline-item:first-child .timeline-item-date, | |
| .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date, | |
| .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child .timeline-item-date, | |
| .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item .timeline-item-date { | |
| width: auto; | |
| padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left)); | |
| left: calc(0px - var(--f7-safe-area-left)); | |
| right: 0; | |
| } | |
| .timeline-year:last-child .timeline-year-title, | |
| .timeline-year:last-child .timeline-month:last-child .timeline-month-title { | |
| width: auto; | |
| right: calc(0px - var(--f7-safe-area-right)); | |
| } | |
| .timeline-horizontal .timeline-item:last-child, | |
| .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child { | |
| overflow: visible; | |
| } | |
| .timeline-horizontal .timeline-item:last-child .timeline-item-date, | |
| .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date { | |
| width: auto; | |
| right: calc(0px - var(--f7-safe-area-right)); | |
| left: 0; | |
| } | |
| /* === Timeline iOS === */ | |
| .ios .block-strong .timeline-item-inner { | |
| border-radius: 3px; | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .ios .timeline-year-title span { | |
| margin-top: 3px; | |
| } | |
| /* === Timeline MD === */ | |
| .md .timeline-year-title span { | |
| margin-top: 2px; | |
| } | |
| /* === Tabs === */ | |
| .tabs .tab { | |
| display: none; | |
| } | |
| .tabs .tab-active { | |
| display: block; | |
| } | |
| .tabs-animated-wrap { | |
| position: relative; | |
| width: 100%; | |
| overflow: hidden; | |
| height: 100%; | |
| } | |
| .tabs-animated-wrap > .tabs { | |
| display: flex; | |
| height: 100%; | |
| transition-duration: 300ms; | |
| } | |
| .tabs-animated-wrap > .tabs > .tab { | |
| width: 100%; | |
| display: block; | |
| flex-shrink: 0; | |
| } | |
| .tabs-animated-wrap.not-animated > .tabs { | |
| transition-duration: 300ms; | |
| } | |
| .tabs-swipeable-wrap { | |
| height: 100%; | |
| } | |
| .tabs-swipeable-wrap > .tabs { | |
| height: 100%; | |
| } | |
| .tabs-swipeable-wrap > .tabs > .tab { | |
| display: block; | |
| } | |
| .page > .tabs { | |
| height: 100%; | |
| } | |
| /* === Panels === */ | |
| :root { | |
| --f7-panel-width: 260px; | |
| --f7-panel-bg-color: #fff; | |
| } | |
| .ios { | |
| --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0); | |
| --f7-panel-transition-duration: 400ms; | |
| --f7-panel-shadow: transparent; | |
| } | |
| .md { | |
| --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2); | |
| --f7-panel-transition-duration: 300ms; | |
| --f7-panel-shadow: rgba(0, 0, 0, 0.25) 0%, | |
| rgba(0, 0, 0, 0.1) 30%, | |
| rgba(0, 0, 0, 0.05) 40%, | |
| rgba(0, 0, 0, 0) 60%, | |
| rgba(0, 0, 0, 0) 100%; | |
| } | |
| .panel-backdrop { | |
| position: absolute; | |
| left: 0; | |
| top: var(--f7-statusbar-height); | |
| width: 100%; | |
| height: calc(100% - var(--f7-statusbar-height)); | |
| opacity: 0; | |
| z-index: 5999; | |
| display: none; | |
| transform: translate3d(0, 0, 0); | |
| background-color: var(--f7-panel-backdrop-bg-color); | |
| transition-duration: var(--f7-panel-transition-duration); | |
| will-change: transform, opacity; | |
| } | |
| .panel-backdrop.not-animated { | |
| transition-duration: 0ms !important; | |
| } | |
| .panel { | |
| z-index: 1000; | |
| display: none; | |
| box-sizing: border-box; | |
| position: absolute; | |
| top: var(--f7-statusbar-height); | |
| height: calc(100% - var(--f7-statusbar-height)); | |
| transform: translate3d(0, 0, 0); | |
| width: var(--f7-panel-width); | |
| background-color: var(--f7-panel-bg-color); | |
| overflow: visible; | |
| will-change: transform; | |
| } | |
| .panel:after { | |
| pointer-events: none; | |
| opacity: 0; | |
| z-index: 5999; | |
| position: absolute; | |
| content: ''; | |
| top: 0; | |
| width: 20px; | |
| height: 100%; | |
| } | |
| .panel, | |
| .panel:after { | |
| transition-duration: var(--f7-panel-transition-duration); | |
| } | |
| .panel.not-animated, | |
| .panel.not-animated:after { | |
| transition-duration: 0ms !important; | |
| } | |
| .panel.panel-reveal.not-animated ~ .views, | |
| .panel.panel-reveal.not-animated ~ .view { | |
| transition-duration: 0ms !important; | |
| } | |
| .panel-cover { | |
| z-index: 6000; | |
| } | |
| .panel-left { | |
| left: 0; | |
| } | |
| .panel-left.panel-cover { | |
| transform: translate3d(-100%, 0, 0); | |
| } | |
| .panel-left.panel-cover:after { | |
| left: 100%; | |
| background: linear-gradient(to right, var(--f7-panel-shadow)); | |
| } | |
| html.with-panel-left-cover .panel-left.panel-cover:after { | |
| opacity: 1; | |
| } | |
| .panel-left.panel-reveal:after { | |
| right: 100%; | |
| background: linear-gradient(to left, var(--f7-panel-shadow)); | |
| } | |
| html.with-panel-left-reveal .panel-left.panel-reveal:after { | |
| opacity: 1; | |
| transform: translate3d(var(--f7-panel-width), 0, 0); | |
| } | |
| .panel-right { | |
| right: 0; | |
| } | |
| .panel-right.panel-cover { | |
| transform: translate3d(100%, 0, 0); | |
| } | |
| .panel-right.panel-cover:after { | |
| right: 100%; | |
| background: linear-gradient(to left, var(--f7-panel-shadow)); | |
| } | |
| html.with-panel-right-cover .panel-right.panel-cover:after { | |
| opacity: 1; | |
| } | |
| .panel-right.panel-reveal:after { | |
| left: 100%; | |
| background: linear-gradient(to right, var(--f7-panel-shadow)); | |
| } | |
| html.with-panel-right-reveal .panel-right.panel-reveal:after { | |
| opacity: 1; | |
| transform: translate3d(calc(-1 * (var(--f7-panel-width))), 0, 0); | |
| } | |
| .panel-visible-by-breakpoint { | |
| display: block; | |
| transform: translate3d(0, 0, 0) !important; | |
| } | |
| .panel-visible-by-breakpoint:after { | |
| display: none; | |
| } | |
| .panel-visible-by-breakpoint.panel-cover { | |
| z-index: 5900; | |
| } | |
| html.with-panel-left-reveal .views, | |
| html.with-panel-right-reveal .views, | |
| html.with-panel-transitioning .views, | |
| html.with-panel-left-reveal .framework7-root > .view, | |
| html.with-panel-right-reveal .framework7-root > .view, | |
| html.with-panel-transitioning .framework7-root > .view { | |
| transition-duration: var(--f7-panel-transition-duration); | |
| transition-property: transform; | |
| } | |
| html.with-panel-left-reveal .panel-backdrop, | |
| html.with-panel-right-reveal .panel-backdrop, | |
| html.with-panel-transitioning .panel-backdrop { | |
| background: rgba(0, 0, 0, 0); | |
| display: block; | |
| opacity: 0; | |
| } | |
| html.with-panel .framework7-root > .views .page-content, | |
| html.with-panel .framework7-root > .view .page-content { | |
| overflow: hidden; | |
| -webkit-overflow-scrolling: auto; | |
| } | |
| html.with-panel-left-cover .panel-backdrop, | |
| html.with-panel-right-cover .panel-backdrop { | |
| display: block; | |
| opacity: 1; | |
| } | |
| html.with-panel-left-reveal .views, | |
| html.with-panel-left-reveal .framework7-root > .view, | |
| html.with-panel-left-reveal .panel-backdrop { | |
| transform: translate3d(var(--f7-panel-width), 0, 0); | |
| } | |
| html.with-panel-right-reveal .views, | |
| html.with-panel-right-reveal .framework7-root > .view, | |
| html.with-panel-right-reveal .panel-backdrop { | |
| transform: translate3d(calc(-1 * var(--f7-panel-width)), 0, 0); | |
| } | |
| html.with-panel-left-cover .panel-left { | |
| transform: translate3d(0px, 0, 0); | |
| } | |
| html.with-panel-right-cover .panel-right { | |
| transform: translate3d(0px, 0, 0); | |
| } | |
| /* === Card === */ | |
| :root { | |
| --f7-card-bg-color: #fff; | |
| --f7-card-outline-border-color: rgba(0, 0, 0, 0.12); | |
| --f7-card-border-radius: 4px; | |
| --f7-card-font-size: inherit; | |
| --f7-card-header-text-color: inherit; | |
| --f7-card-header-font-weight: 400; | |
| --f7-card-header-border-color: #e1e1e1; | |
| --f7-card-footer-border-color: #e1e1e1; | |
| --f7-card-footer-font-weight: 400; | |
| --f7-card-footer-font-size: inherit; | |
| --f7-card-expandable-bg-color: #fff; | |
| --f7-card-expandable-font-size: 16px; | |
| --f7-card-expandable-tablet-width: 670px; | |
| --f7-card-expandable-tablet-height: 670px; | |
| } | |
| :root .theme-dark, | |
| :root.theme-dark { | |
| --f7-card-bg-color: #1c1c1d; | |
| --f7-card-outline-border-color: #282829; | |
| --f7-card-header-border-color: #282829; | |
| --f7-card-footer-border-color: #282829; | |
| --f7-card-footer-text-color: #8E8E93; | |
| } | |
| .ios { | |
| --f7-card-margin-horizontal: 10px; | |
| --f7-card-margin-vertical: 10px; | |
| --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); | |
| --f7-card-content-padding-horizontal: 15px; | |
| --f7-card-content-padding-vertical: 15px; | |
| --f7-card-header-font-size: 17px; | |
| --f7-card-header-padding-vertical: 10px; | |
| --f7-card-header-padding-horizontal: 15px; | |
| --f7-card-header-min-height: 44px; | |
| --f7-card-footer-text-color: #6d6d72; | |
| --f7-card-footer-padding-vertical: 10px; | |
| --f7-card-footer-padding-horizontal: 15px; | |
| --f7-card-footer-min-height: 44px; | |
| --f7-card-expandable-margin-horizontal: 20px; | |
| --f7-card-expandable-margin-vertical: 30px; | |
| --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3); | |
| --f7-card-expandable-border-radius: 15px; | |
| --f7-card-expandable-tablet-border-radius: 5px; | |
| --f7-card-expandable-header-font-size: 27px; | |
| --f7-card-expandable-header-font-weight: bold; | |
| } | |
| .md { | |
| --f7-card-margin-horizontal: 8px; | |
| --f7-card-margin-vertical: 8px; | |
| --f7-card-box-shadow: var(--f7-elevation-1); | |
| --f7-card-content-padding-horizontal: 16px; | |
| --f7-card-content-padding-vertical: 16px; | |
| --f7-card-header-font-size: 16px; | |
| --f7-card-header-padding-vertical: 4px; | |
| --f7-card-header-padding-horizontal: 16px; | |
| --f7-card-header-min-height: 48px; | |
| --f7-card-footer-text-color: #757575; | |
| --f7-card-footer-padding-vertical: 4px; | |
| --f7-card-footer-padding-horizontal: 16px; | |
| --f7-card-footer-min-height: 48px; | |
| --f7-card-expandable-margin-horizontal: 12px; | |
| --f7-card-expandable-margin-vertical: 24px; | |
| --f7-card-expandable-box-shadow: var(--f7-elevation-10); | |
| --f7-card-expandable-border-radius: 8px; | |
| --f7-card-expandable-tablet-border-radius: 4px; | |
| --f7-card-expandable-header-font-size: 24px; | |
| --f7-card-expandable-header-font-weight: 500; | |
| } | |
| .cards-list > ul:before, | |
| .card .list > ul:before { | |
| display: none !important; | |
| } | |
| .cards-list > ul:after, | |
| .card .list > ul:after { | |
| display: none !important; | |
| } | |
| .cards-list ul, | |
| .card .list ul { | |
| background: none; | |
| } | |
| .card { | |
| background: var(--f7-card-bg-color); | |
| position: relative; | |
| border-radius: var(--f7-card-border-radius); | |
| font-size: var(--f7-card-font-size); | |
| margin-top: var(--f7-card-margin-vertical); | |
| margin-bottom: var(--f7-card-margin-vertical); | |
| margin-left: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left)); | |
| margin-right: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right)); | |
| box-shadow: var(--f7-card-box-shadow); | |
| } | |
| .card .list, | |
| .card .block { | |
| margin: 0; | |
| } | |
| .row:not(.no-gap) .col > .card { | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| .card.no-shadow { | |
| box-shadow: none; | |
| } | |
| .card-outline, | |
| .ios .card-outline-ios, | |
| .md .card-outline-md { | |
| box-shadow: none; | |
| border: 1px solid var(--f7-card-outline-border-color); | |
| } | |
| .card-outline.no-border, | |
| .ios .card-outline-ios.no-border, | |
| .md .card-outline-md.no-border, | |
| .card-outline.no-hairlines, | |
| .ios .card-outline-ios.no-hairlines, | |
| .md .card-outline-md.no-hairlines { | |
| border: none; | |
| } | |
| .card-content { | |
| position: relative; | |
| } | |
| .card-content-padding { | |
| position: relative; | |
| padding: var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal); | |
| } | |
| .card-content-padding > .list, | |
| .card-content-padding > .block { | |
| margin: calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal)); | |
| } | |
| .card-content-padding > p:first-child { | |
| margin-top: 0; | |
| } | |
| .card-content-padding > p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .card-header { | |
| min-height: var(--f7-card-header-min-height); | |
| color: var(--f7-card-header-text-color); | |
| font-size: var(--f7-card-header-font-size); | |
| font-weight: var(--f7-card-header-font-weight); | |
| padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal); | |
| } | |
| .card-footer { | |
| min-height: var(--f7-card-footer-min-height); | |
| color: var(--f7-card-footer-text-color); | |
| font-size: var(--f7-card-footer-font-size); | |
| font-weight: var(--f7-card-footer-font-weight); | |
| padding: var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal); | |
| } | |
| .card-footer a.link { | |
| overflow: hidden; | |
| } | |
| .card-header, | |
| .card-footer { | |
| position: relative; | |
| box-sizing: border-box; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .card-header[valign="top"], | |
| .card-footer[valign="top"] { | |
| align-items: flex-start; | |
| } | |
| .card-header[valign="bottom"], | |
| .card-footer[valign="bottom"] { | |
| align-items: flex-end; | |
| } | |
| .card-header a.link, | |
| .card-footer a.link { | |
| position: relative; | |
| } | |
| .card-header a.link i.icon, | |
| .card-footer a.link i.icon { | |
| display: block; | |
| } | |
| .card-header a.icon-only, | |
| .card-footer a.icon-only { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin: 0; | |
| } | |
| .card-header { | |
| border-radius: var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0; | |
| } | |
| .card-header:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-card-header-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .card-header.no-hairline:after { | |
| display: none !important; | |
| } | |
| .card-footer { | |
| border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius); | |
| } | |
| .card-footer:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-card-footer-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .card-footer.no-hairline:before { | |
| display: none !important; | |
| } | |
| .card-expandable { | |
| overflow: hidden; | |
| height: 300px; | |
| background: var(--f7-card-expandable-bg-color); | |
| position: relative; | |
| transform-origin: center center; | |
| transition-property: transform, border-radius; | |
| border-radius: var(--f7-card-expandable-border-radius); | |
| z-index: 2; | |
| transition-duration: 200ms; | |
| margin-left: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left)); | |
| margin-right: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right)); | |
| margin-top: var(--f7-card-expandable-margin-vertical); | |
| margin-bottom: var(--f7-card-expandable-margin-vertical); | |
| box-shadow: var(--f7-card-expandable-box-shadow); | |
| font-size: var(--f7-card-expandable-font-size); | |
| } | |
| .card-expandable.card-no-transition { | |
| transition-duration: 0ms; | |
| } | |
| .card-expandable.card-expandable-animate-width .card-content { | |
| transition-property: width, transform; | |
| width: 100%; | |
| } | |
| .card-expandable.active-state { | |
| transform: scale(0.97); | |
| } | |
| .card-expandable .card-opened-fade-in, | |
| .card-expandable .card-opened-fade-out { | |
| transition-duration: 400ms; | |
| } | |
| .card-expandable .card-opened-fade-in { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .card-expandable .card-content { | |
| position: absolute; | |
| top: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| transform-origin: center top; | |
| overflow: hidden; | |
| transition-property: transform; | |
| box-sizing: border-box; | |
| pointer-events: none; | |
| left: 0; | |
| } | |
| .card-expandable .card-content .card-content-padding { | |
| padding-left: calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal)); | |
| padding-right: calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal)); | |
| } | |
| .card-expandable.card-opened { | |
| transition-duration: 0ms; | |
| } | |
| .card-expandable.card-opening, | |
| .card-expandable.card-closing, | |
| .card-expandable.card-transitioning { | |
| transition-duration: 400ms; | |
| } | |
| .card-expandable.card-opening .card-content { | |
| transition-duration: 300ms; | |
| } | |
| .card-expandable.card-closing .card-content { | |
| transition-duration: 500ms; | |
| } | |
| .card-expandable.card-opening, | |
| .card-expandable.card-opened, | |
| .card-expandable.card-closing { | |
| z-index: 100; | |
| } | |
| .card-expandable.card-opening, | |
| .card-expandable.card-opened { | |
| border-radius: 0; | |
| } | |
| .card-expandable.card-opening .card-opened-fade-in, | |
| .card-expandable.card-opened .card-opened-fade-in { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .card-expandable.card-opening .card-opened-fade-out, | |
| .card-expandable.card-opened .card-opened-fade-out { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .card-expandable.card-opened .card-content { | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| pointer-events: auto; | |
| } | |
| .card-expandable .card-header { | |
| font-size: var(--f7-card-expandable-header-font-size); | |
| font-weight: var(--f7-card-expandable-header-font-weight); | |
| } | |
| .card-expandable .card-header:after { | |
| display: none !important; | |
| } | |
| .card-expandable-size { | |
| width: 0; | |
| height: 0; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| opacity: 0; | |
| pointer-events: none; | |
| visibility: hidden; | |
| } | |
| @media (min-width: 768px) and (min-height: 670px) { | |
| .card-expandable:not(.card-tablet-fullscreen) { | |
| max-width: var(--f7-card-expandable-tablet-width); | |
| } | |
| .card-expandable:not(.card-tablet-fullscreen).card-opened, | |
| .card-expandable:not(.card-tablet-fullscreen).card-opening { | |
| border-radius: var(--f7-card-expandable-tablet-border-radius); | |
| } | |
| .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content { | |
| width: var(--f7-card-expandable-tablet-width); | |
| } | |
| .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size { | |
| width: var(--f7-card-expandable-tablet-width); | |
| height: var(--f7-card-expandable-tablet-height); | |
| } | |
| } | |
| .page.page-with-card-opened .page-content { | |
| overflow: hidden; | |
| } | |
| .card-backdrop { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 99; | |
| pointer-events: none; | |
| background: rgba(0, 0, 0, 0.2); | |
| opacity: 0; | |
| } | |
| .card-backdrop-in { | |
| animation: card-backdrop-fade-in 400ms forwards; | |
| pointer-events: auto; | |
| } | |
| .card-backdrop-out { | |
| animation: card-backdrop-fade-out 400ms forwards; | |
| } | |
| @supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) { | |
| .card-backdrop { | |
| background: transparent; | |
| opacity: 1; | |
| } | |
| .card-backdrop-in { | |
| animation: card-backdrop-blur-in 400ms forwards; | |
| } | |
| .card-backdrop-out { | |
| animation: card-backdrop-blur-out 400ms forwards; | |
| } | |
| } | |
| @keyframes card-backdrop-fade-in { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes card-backdrop-fade-out { | |
| from { | |
| opacity: 1; | |
| } | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes card-backdrop-blur-in { | |
| from { | |
| -webkit-backdrop-filter: blur(0px); | |
| backdrop-filter: blur(0px); | |
| } | |
| to { | |
| -webkit-backdrop-filter: blur(15px); | |
| backdrop-filter: blur(15px); | |
| } | |
| } | |
| @keyframes card-backdrop-blur-out { | |
| from { | |
| -webkit-backdrop-filter: blur(15px); | |
| backdrop-filter: blur(15px); | |
| } | |
| to { | |
| -webkit-backdrop-filter: blur(0px); | |
| backdrop-filter: blur(0px); | |
| } | |
| } | |
| /* === Chips === */ | |
| :root { | |
| --f7-chip-bg-color: rgba(0, 0, 0, 0.12); | |
| --f7-chip-font-size: 13px; | |
| --f7-chip-font-weight: normal; | |
| --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12); | |
| --f7-chip-media-font-size: 16px; | |
| --f7-chip-delete-button-color: #000; | |
| } | |
| :root .theme-dark, | |
| :root.theme-dark { | |
| --f7-chip-delete-button-color: #fff; | |
| --f7-chip-bg-color: #333; | |
| --f7-chip-outline-border-color: #333; | |
| } | |
| .ios { | |
| --f7-chip-text-color: #000; | |
| --f7-chip-height: 24px; | |
| --f7-chip-padding-horizontal: 10px; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-chip-text-color: #fff; | |
| } | |
| .md { | |
| --f7-chip-text-color: rgba(0, 0, 0, 0.87); | |
| --f7-chip-height: 32px; | |
| --f7-chip-padding-horizontal: 12px; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-chip-text-color: rgba(255, 255, 255, 0.87); | |
| } | |
| .chip { | |
| padding-left: var(--f7-chip-padding-horizontal); | |
| padding-right: var(--f7-chip-padding-horizontal); | |
| font-weight: var(--f7-chip-font-weight); | |
| display: inline-flex; | |
| box-sizing: border-box; | |
| vertical-align: middle; | |
| align-items: center; | |
| margin: 2px 0; | |
| background-color: var(--f7-chip-bg-color); | |
| font-size: var(--f7-chip-font-size); | |
| color: var(--f7-chip-text-color); | |
| height: var(--f7-chip-height); | |
| line-height: var(--f7-chip-height); | |
| border-radius: var(--f7-chip-height); | |
| position: relative; | |
| } | |
| .chip-media { | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: var(--f7-chip-height); | |
| width: var(--f7-chip-height); | |
| border-radius: var(--f7-chip-height); | |
| text-align: center; | |
| line-height: var(--f7-chip-height); | |
| box-sizing: border-box; | |
| color: #fff; | |
| font-size: var(--f7-chip-media-font-size); | |
| vertical-align: middle; | |
| margin-left: calc(-1 * var(--f7-chip-padding-horizontal)); | |
| } | |
| .chip-media i.icon { | |
| font-size: calc(var(--f7-chip-height) - 8px); | |
| height: calc(var(--f7-chip-height) - 8px); | |
| } | |
| .chip-media img { | |
| max-width: 100%; | |
| max-height: 100%; | |
| width: auto; | |
| height: auto; | |
| border-radius: 50%; | |
| display: block; | |
| } | |
| .chip-media + .chip-label { | |
| margin-left: 4px; | |
| } | |
| .chip-label { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| position: relative; | |
| flex-shrink: 1; | |
| min-width: 0; | |
| } | |
| .chip-delete { | |
| text-align: center; | |
| cursor: pointer; | |
| flex-shrink: 0; | |
| background-repeat: no-repeat; | |
| width: 24px; | |
| height: 24px; | |
| color: var(--f7-chip-delete-button-color); | |
| opacity: 0.54; | |
| position: relative; | |
| } | |
| .chip-delete:after { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 20px; | |
| content: 'delete_round_ios'; | |
| line-height: 24px; | |
| } | |
| .chip .chip-delete.active-state { | |
| opacity: 1; | |
| } | |
| .chip-outline, | |
| .ios .chip-outline-ios, | |
| .md .chip-outline-md { | |
| border: 1px solid var(--f7-chip-outline-border-color); | |
| background: none; | |
| } | |
| .chip[class*="color-"] { | |
| --f7-chip-bg-color: var(--f7-theme-color); | |
| --f7-chip-text-color: #fff; | |
| } | |
| .chip-outline[class*="color-"], | |
| .ios .chip-outline-ios[class*="color-"], | |
| .md .chip-outline-md[class*="color-"] { | |
| --f7-chip-outline-border-color: var(--f7-theme-color); | |
| --f7-chip-text-color: var(--f7-theme-color); | |
| } | |
| .ios .chip-delete { | |
| margin-right: calc(-1 * var(--f7-chip-padding-horizontal)); | |
| } | |
| .ios .chip-delete:after { | |
| font-size: 10px; | |
| } | |
| .md .chip-label + .chip-delete { | |
| margin-left: 4px; | |
| } | |
| .md .chip-delete { | |
| margin-right: calc(-1 * var(--f7-chip-padding-horizontal) + 4px); | |
| } | |
| .md .chip-delete:after { | |
| font-size: 12px; | |
| } | |
| /* === Form === */ | |
| /* === Input === */ | |
| :root { | |
| --f7-label-font-size: 12px; | |
| --f7-label-font-weight: 400; | |
| --f7-label-line-height: 1.2; | |
| --f7-input-error-text-color: #ff3b30; | |
| --f7-input-error-font-size: 12px; | |
| --f7-input-error-line-height: 1.4; | |
| --f7-input-error-font-weight: 400; | |
| --f7-input-info-font-size: 12px; | |
| --f7-input-info-line-height: 1.4; | |
| } | |
| .ios { | |
| --f7-input-height: 44px; | |
| --f7-input-text-color: #000000; | |
| --f7-input-font-size: 17px; | |
| --f7-input-placeholder-color: #a9a9a9; | |
| /* | |
| --f7-input-focused-border-color: var(--f7-list-item-border-color); | |
| --f7-input-invalid-border-color: var(--f7-list-item-border-color); | |
| --f7-input-invalid-text-color: var(--f7-input-error-text-color); | |
| */ | |
| --f7-label-text-color: inherit; | |
| /* | |
| --f7-label-focused-text-color: var(--f7-label-text-color); | |
| --f7-label-invalid-text-color: var(--f7-label-text-color); | |
| */ | |
| --f7-floating-label-scale: calc(17 / 12); | |
| --f7-inline-label-font-size: 17px; | |
| --f7-inline-label-line-height: 1.4; | |
| --f7-input-info-text-color: #8e8e93; | |
| --f7-input-clear-button-size: 14px; | |
| --f7-input-clear-button-color: #8e8e93; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-input-text-color: #fff; | |
| } | |
| .md { | |
| --f7-input-height: 36px; | |
| --f7-input-text-color: #212121; | |
| --f7-input-font-size: 16px; | |
| --f7-input-placeholder-color: rgba(0, 0, 0, 0.35); | |
| /* | |
| --f7-input-focused-border-color: var(--f7-theme-color); | |
| --f7-input-invalid-border-color: var(--f7-input-error-text-color); | |
| --f7-input-invalid-text-color: var(--f7-input-text-color); | |
| */ | |
| --f7-label-text-color: rgba(0, 0, 0, 0.65); | |
| /* | |
| --f7-label-focused-text-color: var(--f7-theme-color); | |
| --f7-label-invalid-text-color: var(--f7-input-error-text-color ); | |
| */ | |
| --f7-floating-label-scale: calc(16 / 12); | |
| --f7-inline-label-font-size: 16px; | |
| --f7-inline-label-line-height: 1.5; | |
| --f7-input-info-text-color: rgba(0, 0, 0, 0.45); | |
| --f7-input-clear-button-size: 24px; | |
| --f7-input-clear-button-color: #aaa; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-input-text-color: rgba(255, 255, 255, 0.87); | |
| --f7-input-placeholder-color: rgba(255, 255, 255, 0.35); | |
| --f7-label-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-input-info-text-color: rgba(255, 255, 255, 0.35); | |
| } | |
| input[type="text"], | |
| input[type="password"], | |
| input[type="search"], | |
| input[type="email"], | |
| input[type="tel"], | |
| input[type="url"], | |
| input[type="date"], | |
| input[type="datetime-local"], | |
| input[type="time"], | |
| input[type="number"], | |
| select, | |
| textarea { | |
| box-sizing: border-box; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| border: none; | |
| box-shadow: none; | |
| border-radius: 0; | |
| outline: 0; | |
| display: block; | |
| padding: 0; | |
| margin: 0; | |
| font-family: inherit; | |
| background: none; | |
| resize: none; | |
| font-size: inherit; | |
| color: inherit; | |
| } | |
| .textarea-resizable-shadow { | |
| opacity: 0; | |
| position: absolute; | |
| z-index: -1000; | |
| pointer-events: none; | |
| left: -1000px; | |
| top: -1000px; | |
| visibility: hidden; | |
| } | |
| .list input[type="text"], | |
| .list input[type="password"], | |
| .list input[type="search"], | |
| .list input[type="email"], | |
| .list input[type="tel"], | |
| .list input[type="url"], | |
| .list input[type="date"], | |
| .list input[type="datetime-local"], | |
| .list input[type="time"], | |
| .list input[type="number"], | |
| .list select { | |
| width: 100%; | |
| height: var(--f7-input-height); | |
| color: var(--f7-input-text-color); | |
| font-size: var(--f7-input-font-size); | |
| } | |
| .list input[type="text"]::-webkit-input-placeholder, | |
| .list input[type="password"]::-webkit-input-placeholder, | |
| .list input[type="search"]::-webkit-input-placeholder, | |
| .list input[type="email"]::-webkit-input-placeholder, | |
| .list input[type="tel"]::-webkit-input-placeholder, | |
| .list input[type="url"]::-webkit-input-placeholder, | |
| .list input[type="date"]::-webkit-input-placeholder, | |
| .list input[type="datetime-local"]::-webkit-input-placeholder, | |
| .list input[type="time"]::-webkit-input-placeholder, | |
| .list input[type="number"]::-webkit-input-placeholder, | |
| .list select::-webkit-input-placeholder { | |
| color: var(--f7-input-placeholder-color); | |
| } | |
| .list input[type="text"]::-moz-placeholder, | |
| .list input[type="password"]::-moz-placeholder, | |
| .list input[type="search"]::-moz-placeholder, | |
| .list input[type="email"]::-moz-placeholder, | |
| .list input[type="tel"]::-moz-placeholder, | |
| .list input[type="url"]::-moz-placeholder, | |
| .list input[type="date"]::-moz-placeholder, | |
| .list input[type="datetime-local"]::-moz-placeholder, | |
| .list input[type="time"]::-moz-placeholder, | |
| .list input[type="number"]::-moz-placeholder, | |
| .list select::-moz-placeholder { | |
| color: var(--f7-input-placeholder-color); | |
| } | |
| .list input[type="text"]::-ms-input-placeholder, | |
| .list input[type="password"]::-ms-input-placeholder, | |
| .list input[type="search"]::-ms-input-placeholder, | |
| .list input[type="email"]::-ms-input-placeholder, | |
| .list input[type="tel"]::-ms-input-placeholder, | |
| .list input[type="url"]::-ms-input-placeholder, | |
| .list input[type="date"]::-ms-input-placeholder, | |
| .list input[type="datetime-local"]::-ms-input-placeholder, | |
| .list input[type="time"]::-ms-input-placeholder, | |
| .list input[type="number"]::-ms-input-placeholder, | |
| .list select::-ms-input-placeholder { | |
| color: var(--f7-input-placeholder-color); | |
| } | |
| .list input[type="text"]::placeholder, | |
| .list input[type="password"]::placeholder, | |
| .list input[type="search"]::placeholder, | |
| .list input[type="email"]::placeholder, | |
| .list input[type="tel"]::placeholder, | |
| .list input[type="url"]::placeholder, | |
| .list input[type="date"]::placeholder, | |
| .list input[type="datetime-local"]::placeholder, | |
| .list input[type="time"]::placeholder, | |
| .list input[type="number"]::placeholder, | |
| .list select::placeholder { | |
| color: var(--f7-input-placeholder-color); | |
| } | |
| .list textarea { | |
| width: 100%; | |
| color: var(--f7-input-text-color); | |
| font-size: var(--f7-input-font-size); | |
| resize: none; | |
| line-height: 1.4; | |
| height: 100px; | |
| } | |
| .list textarea::-webkit-input-placeholder { | |
| color: var(--f7-input-placeholder-color); | |
| } | |
| .list textarea::-moz-placeholder { | |
| color: var(--f7-input-placeholder-color); | |
| } | |
| .list textarea::-ms-input-placeholder { | |
| color: var(--f7-input-placeholder-color); | |
| } | |
| .list textarea::placeholder { | |
| color: var(--f7-input-placeholder-color); | |
| } | |
| .list textarea.resizable { | |
| height: var(--f7-input-height); | |
| } | |
| .list input[type="datetime-local"] { | |
| max-width: 50vw; | |
| } | |
| .list input[type="date"], | |
| .list input[type="datetime-local"] { | |
| line-height: var(--f7-input-height); | |
| } | |
| .list .item-label, | |
| .list .item-floating-label { | |
| width: 100%; | |
| vertical-align: top; | |
| flex-shrink: 0; | |
| font-size: var(--f7-label-font-size); | |
| font-weight: var(--f7-label-font-weight); | |
| line-height: var(--f7-label-line-height); | |
| color: var(--f7-label-text-color); | |
| transition-duration: 200ms; | |
| transition-property: transform, color; | |
| } | |
| .list .item-floating-label { | |
| transform: scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-input-height) / 2)); | |
| color: var(--f7-input-placeholder-color); | |
| width: auto; | |
| max-width: calc(100% / var(--f7-floating-label-scale)); | |
| pointer-events: none; | |
| transform-origin: left bottom; | |
| } | |
| .list .item-floating-label ~ .item-input-wrap input::-webkit-input-placeholder, | |
| .list .item-floating-label ~ .item-input-wrap textarea::-webkit-input-placeholder { | |
| opacity: 0; | |
| transition-duration: 100ms; | |
| } | |
| .list .item-floating-label ~ .item-input-wrap input::-moz-placeholder, | |
| .list .item-floating-label ~ .item-input-wrap textarea::-moz-placeholder { | |
| opacity: 0; | |
| transition-duration: 100ms; | |
| } | |
| .list .item-floating-label ~ .item-input-wrap input::-ms-input-placeholder, | |
| .list .item-floating-label ~ .item-input-wrap textarea::-ms-input-placeholder { | |
| opacity: 0; | |
| transition-duration: 100ms; | |
| } | |
| .list .item-floating-label ~ .item-input-wrap input::placeholder, | |
| .list .item-floating-label ~ .item-input-wrap textarea::placeholder { | |
| opacity: 0; | |
| transition-duration: 100ms; | |
| } | |
| .list .item-floating-label ~ .item-input-wrap input.input-focused::-webkit-input-placeholder, | |
| .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-webkit-input-placeholder { | |
| opacity: 1; | |
| transition-duration: 300ms; | |
| } | |
| .list .item-floating-label ~ .item-input-wrap input.input-focused::-moz-placeholder, | |
| .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-moz-placeholder { | |
| opacity: 1; | |
| transition-duration: 300ms; | |
| } | |
| .list .item-floating-label ~ .item-input-wrap input.input-focused::-ms-input-placeholder, | |
| .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-ms-input-placeholder { | |
| opacity: 1; | |
| transition-duration: 300ms; | |
| } | |
| .list .item-floating-label ~ .item-input-wrap input.input-focused::placeholder, | |
| .list .item-floating-label ~ .item-input-wrap textarea.input-focused::placeholder { | |
| opacity: 1; | |
| transition-duration: 300ms; | |
| } | |
| .list .item-input-with-value .item-floating-label { | |
| color: var(--f7-label-text-color); | |
| } | |
| .list .item-input-with-value .item-floating-label, | |
| .list .item-input-focused .item-floating-label { | |
| transform: scale(1) translateY(0); | |
| } | |
| .list .item-input-wrap { | |
| width: 100%; | |
| flex-shrink: 1; | |
| position: relative; | |
| } | |
| .item-input .item-inner { | |
| display: block; | |
| } | |
| .item-input-error-message, | |
| .input-error-message { | |
| font-size: var(--f7-input-error-font-size); | |
| line-height: var(--f7-input-error-line-height); | |
| color: var(--f7-input-error-text-color); | |
| font-weight: var(--f7-input-error-font-weight); | |
| display: none; | |
| } | |
| .item-input-info, | |
| .input-info { | |
| font-size: var(--f7-input-info-font-size); | |
| line-height: var(--f7-input-info-line-height); | |
| color: var(--f7-input-info-text-color); | |
| } | |
| .item-input-invalid .item-input-error-message, | |
| .input-invalid .item-input-error-message, | |
| .item-input-invalid .input-error-message, | |
| .input-invalid .input-error-message { | |
| display: block; | |
| } | |
| .item-input-invalid .item-input-info, | |
| .input-invalid .item-input-info, | |
| .item-input-invalid .input-info, | |
| .input-invalid .input-info { | |
| display: none; | |
| } | |
| .inline-labels .item-inner, | |
| .inline-label .item-inner { | |
| display: flex; | |
| } | |
| .inline-labels .item-label, | |
| .inline-label .item-label, | |
| .inline-labels .item-floating-label, | |
| .inline-label .item-floating-label { | |
| align-self: flex-start; | |
| width: 35%; | |
| font-size: var(--f7-inline-label-font-size); | |
| line-height: var(--f7-inline-label-line-height); | |
| } | |
| .inline-labels .item-label + .item-input-wrap, | |
| .inline-label .item-label + .item-input-wrap, | |
| .inline-labels .item-floating-label + .item-input-wrap, | |
| .inline-label .item-floating-label + .item-input-wrap { | |
| margin-left: 8px; | |
| } | |
| .input { | |
| position: relative; | |
| } | |
| .input input, | |
| .input select, | |
| .input textarea { | |
| width: 100%; | |
| } | |
| .input-clear-button { | |
| opacity: 0; | |
| pointer-events: none; | |
| visibility: hidden; | |
| transition-duration: 100ms; | |
| position: absolute; | |
| top: 50%; | |
| border: none; | |
| padding: 0; | |
| margin: 0; | |
| outline: 0; | |
| z-index: 1; | |
| cursor: pointer; | |
| background: none; | |
| width: var(--f7-input-clear-button-size); | |
| height: var(--f7-input-clear-button-size); | |
| margin-top: calc(-1 * var(--f7-input-clear-button-size) / 2); | |
| color: var(--f7-input-clear-button-color); | |
| right: 0; | |
| } | |
| .input-clear-button:after { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 20px; | |
| } | |
| .input-clear-button:before { | |
| position: absolute; | |
| content: ''; | |
| left: 50%; | |
| top: 50%; | |
| } | |
| .item-input-wrap .input-clear-button { | |
| top: calc(var(--f7-input-height) / 2); | |
| } | |
| .input-with-value ~ .input-clear-button, | |
| .item-input-with-value .input-clear-button, | |
| .input-with-value .input-clear-button { | |
| opacity: 1; | |
| pointer-events: auto; | |
| visibility: visible; | |
| } | |
| .input-dropdown-wrap, | |
| .input-dropdown { | |
| position: relative; | |
| } | |
| .input-dropdown-wrap:before, | |
| .input-dropdown:before { | |
| content: ''; | |
| pointer-events: none; | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -2px; | |
| width: 0; | |
| height: 0; | |
| border-left: 4px solid transparent; | |
| border-right: 4px solid transparent; | |
| border-top: 5px solid #727272; | |
| right: 6px; | |
| } | |
| .input-dropdown-wrap select, | |
| .input-dropdown select, | |
| .input-dropdown-wrap input, | |
| .input-dropdown input, | |
| .input-dropdown-wrap textarea, | |
| .input-dropdown textarea { | |
| padding-right: 20px; | |
| } | |
| .ios .list textarea { | |
| padding-top: 11px; | |
| padding-bottom: 11px; | |
| } | |
| .ios .item-label + .item-input-wrap, | |
| .ios .item-floating-label + .item-input-wrap { | |
| margin-top: 0; | |
| } | |
| .ios .item-input-focused .item-floating-label { | |
| color: var(--f7-label-text-color); | |
| } | |
| .ios .item-input .item-media { | |
| align-self: flex-start; | |
| } | |
| .ios .item-input-wrap { | |
| margin-top: calc(-1 * var(--f7-list-item-padding-vertical)); | |
| margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical)); | |
| } | |
| .ios .inline-labels .item-label, | |
| .ios .inline-label .item-label, | |
| .ios .inline-labels .item-floating-label, | |
| .ios .inline-label .item-floating-label { | |
| padding-top: 3px; | |
| } | |
| .ios .inline-labels .item-label + .item-input-wrap, | |
| .ios .inline-label .item-label + .item-input-wrap, | |
| .ios .inline-labels .item-floating-label + .item-input-wrap, | |
| .ios .inline-label .item-floating-label + .item-input-wrap { | |
| margin-top: calc(-1 * var(--f7-list-item-padding-vertical)); | |
| } | |
| .ios .inline-labels .item-input-wrap, | |
| .ios .inline-label .item-input-wrap { | |
| margin-top: calc(-1 * var(--f7-list-item-padding-vertical)); | |
| } | |
| .ios .item-input-error-message, | |
| .ios .item-input-info, | |
| .ios .input-error-message, | |
| .ios .input-info { | |
| position: relative; | |
| margin-bottom: 6px; | |
| margin-top: -8px; | |
| } | |
| .ios .item-input-focused .item-label, | |
| .ios .item-input-focused .item-floating-label { | |
| color: var(--f7-label-focused-text-color, var(--f7-label-text-color)); | |
| } | |
| .ios .item-input-focused .item-inner:after { | |
| background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color)); | |
| } | |
| .ios .item-input-invalid .item-label, | |
| .ios .item-input-invalid .item-floating-label { | |
| color: var(--f7-label-invalid-text-color, var(--f7-label-text-color)); | |
| } | |
| .ios .item-input-invalid .item-inner:after { | |
| background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color)); | |
| } | |
| .ios .item-input-invalid input, | |
| .ios .input-invalid input, | |
| .ios .item-input-invalid select, | |
| .ios .input-invalid select, | |
| .ios .item-input-invalid textarea, | |
| .ios .input-invalid textarea { | |
| color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color)); | |
| } | |
| .ios .input-clear-button:after { | |
| content: 'delete_round_ios'; | |
| font-size: calc(var(--f7-input-clear-button-size) / (14 / 10)); | |
| line-height: 1.4; | |
| } | |
| .ios .input-clear-button:before { | |
| width: 44px; | |
| height: 44px; | |
| margin-left: -22px; | |
| margin-top: -22px; | |
| } | |
| .md .list textarea { | |
| padding-top: 7px; | |
| padding-bottom: 7px; | |
| } | |
| .md .item-input-wrap:after, | |
| .md .input:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-list-item-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .md .item-input-wrap:after, | |
| .md .input:after { | |
| transition-duration: 200ms; | |
| } | |
| .md .item-input-wrap { | |
| min-height: var(--f7-input-height); | |
| } | |
| .md .item-input .item-media { | |
| align-self: flex-end; | |
| } | |
| .md .item-input .item-inner:after { | |
| display: none !important; | |
| } | |
| .md .inline-labels .item-media, | |
| .md .inline-label .item-media { | |
| align-self: flex-start; | |
| padding-top: 14px; | |
| } | |
| .md .inline-labels .item-label, | |
| .md .inline-label .item-label, | |
| .md .inline-labels .item-floating-label, | |
| .md .inline-label .item-floating-label { | |
| padding-top: 7px; | |
| } | |
| .md .item-input-with-error-message, | |
| .md .item-input-with-info, | |
| .md .input-with-error-message, | |
| .md .input-with-info { | |
| padding-bottom: 20px; | |
| } | |
| .md .item-input-error-message, | |
| .md .item-input-info, | |
| .md .input-error-message, | |
| .md .input-info { | |
| position: absolute; | |
| top: 100%; | |
| margin-top: 4px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| width: 100%; | |
| left: 0; | |
| } | |
| .md .item-input-focused .item-label, | |
| .md .item-input-focused .item-floating-label { | |
| color: var(--f7-label-focused-text-color, var(--f7-theme-color)); | |
| } | |
| .md .item-input-focused .item-input-wrap:after, | |
| .md .input-focused:after { | |
| background: var(--f7-input-focused-border-color, var(--f7-theme-color)); | |
| } | |
| .md .item-input-invalid .item-input-wrap:after, | |
| .md .item-input-focused .item-input-wrap:after, | |
| .md .input-invalid:after, | |
| .md .input-focused:after { | |
| transform: scaleY(2) !important; | |
| } | |
| .md .item-input-invalid .item-input-wrap:after, | |
| .md .input-invalid:after { | |
| background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color)); | |
| } | |
| .md .item-input-invalid .item-label, | |
| .md .item-input-invalid .item-floating-label { | |
| color: var(--f7-label-invalid-text-color, var(--f7-input-error-text-color)); | |
| } | |
| .md .item-input-invalid input, | |
| .md .input-invalid input, | |
| .md .item-input-invalid select, | |
| .md .input-invalid select, | |
| .md .item-input-invalid textarea, | |
| .md .input-invalid textarea { | |
| color: var(--f7-input-invalid-text-color, var(--f7-input-text-color)); | |
| } | |
| .md .input-clear-button:after { | |
| font-size: calc(var(--f7-input-clear-button-size) / (24 / 20)); | |
| content: 'delete_round_md'; | |
| line-height: 1.2; | |
| } | |
| .md .input-clear-button:before { | |
| width: 48px; | |
| height: 48px; | |
| margin-left: -24px; | |
| margin-top: -24px; | |
| } | |
| /* === Checkbox === */ | |
| :root { | |
| /* --f7-checkbox-active-color: var(--f7-theme-color); */ | |
| --f7-checkbox-icon-color: #fff; | |
| } | |
| .ios { | |
| --f7-checkbox-size: 22px; | |
| --f7-checkbox-border-radius: 50%; | |
| --f7-checkbox-border-width: 1px; | |
| --f7-checkbox-inactive-color: #c7c7cc; | |
| --f7-checkbox-extra-margin: 0px; | |
| } | |
| .md { | |
| --f7-checkbox-size: 18px; | |
| --f7-checkbox-border-radius: 2px; | |
| --f7-checkbox-border-width: 2px; | |
| --f7-checkbox-inactive-color: #6d6d6d; | |
| --f7-checkbox-extra-margin: 22px; | |
| } | |
| .checkbox { | |
| position: relative; | |
| display: inline-block; | |
| vertical-align: middle; | |
| z-index: 1; | |
| background-color: transparent; | |
| --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5); | |
| } | |
| .icon-checkbox, | |
| .checkbox i { | |
| flex-shrink: 0; | |
| border: var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color); | |
| width: var(--f7-checkbox-size); | |
| height: var(--f7-checkbox-size); | |
| border-radius: var(--f7-checkbox-border-radius); | |
| box-sizing: border-box; | |
| position: relative; | |
| display: block; | |
| } | |
| .icon-checkbox:after, | |
| .checkbox i:after { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 20px; | |
| width: var(--f7-checkbox-size); | |
| height: var(--f7-checkbox-size); | |
| line-height: var(--f7-checkbox-size); | |
| left: calc(0px - var(--f7-checkbox-border-width)); | |
| top: calc(0px - var(--f7-checkbox-border-width)); | |
| opacity: 0; | |
| color: var(--f7-checkbox-icon-color); | |
| position: relative; | |
| } | |
| label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox, | |
| label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox, | |
| .checkbox input[type="checkbox"]:checked ~ i { | |
| border-color: var(--f7-checkbox-active-color, var(--f7-theme-color)); | |
| background-color: var(--f7-checkbox-active-color, var(--f7-theme-color)); | |
| } | |
| label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox:after, | |
| label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox:after, | |
| .checkbox input[type="checkbox"]:checked ~ i:after { | |
| opacity: 1; | |
| } | |
| label.item-checkbox, | |
| .checkbox { | |
| cursor: pointer; | |
| } | |
| label.item-checkbox input[type="checkbox"], | |
| .checkbox input[type="checkbox"], | |
| label.item-checkbox input[type="radio"], | |
| .checkbox input[type="radio"] { | |
| display: none; | |
| } | |
| label.item-checkbox { | |
| transition-duration: 300ms; | |
| } | |
| label.item-checkbox .item-content .item-media, | |
| label.item-checkbox.item-content .item-media { | |
| align-self: center; | |
| } | |
| label.item-checkbox > .icon-checkbox { | |
| margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin)); | |
| } | |
| label.item-checkbox.active-state { | |
| background-color: var(--f7-list-link-pressed-bg-color); | |
| } | |
| label.item-checkbox.active-state:after { | |
| background-color: transparent; | |
| } | |
| label.item-checkbox.disabled, | |
| .disabled label.item-checkbox { | |
| opacity: 0.55; | |
| pointer-events: none; | |
| opacity: 0.55 !important; | |
| pointer-events: none !important; | |
| } | |
| .ios .icon-checkbox:after, | |
| .ios .checkbox i:after { | |
| content: 'checkbox_ios'; | |
| font-size: 21px; | |
| } | |
| .ios label.item-checkbox.active-state { | |
| transition-duration: 0ms; | |
| } | |
| .md .icon-checkbox, | |
| .md .checkbox i { | |
| transition-duration: 200ms; | |
| } | |
| .md .icon-checkbox:after, | |
| .md .checkbox i:after { | |
| content: 'checkbox_md'; | |
| transition-duration: 200ms; | |
| font-size: 15px; | |
| } | |
| .md label.item-checkbox { | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 0; | |
| } | |
| /* === Radio === */ | |
| :root { | |
| /* | |
| --f7-radio-active-color: var(--f7-theme-color); | |
| */ | |
| --f7-radio-border-radius: 50%; | |
| } | |
| .ios { | |
| --f7-radio-size: 22px; | |
| --f7-radio-border-width: 1px; | |
| --f7-radio-inactive-color: #c7c7cc; | |
| --f7-radio-extra-margin: 0px; | |
| } | |
| .md { | |
| --f7-radio-size: 20px; | |
| --f7-radio-border-width: 2px; | |
| --f7-radio-inactive-color: #6d6d6d; | |
| --f7-radio-extra-margin: 22px; | |
| } | |
| .radio { | |
| position: relative; | |
| display: inline-block; | |
| vertical-align: middle; | |
| z-index: 1; | |
| --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5); | |
| } | |
| .icon-radio { | |
| width: var(--f7-radio-size); | |
| height: var(--f7-radio-size); | |
| border-radius: var(--f7-radio-border-radius); | |
| position: relative; | |
| box-sizing: border-box; | |
| display: block; | |
| flex-shrink: 0; | |
| } | |
| .radio .icon-radio, | |
| .md .icon-radio { | |
| border: var(--f7-radio-border-width) solid var(--f7-radio-inactive-color); | |
| } | |
| label.item-radio, | |
| .radio { | |
| cursor: pointer; | |
| } | |
| label.item-radio input[type="checkbox"], | |
| .radio input[type="checkbox"], | |
| label.item-radio input[type="radio"], | |
| .radio input[type="radio"] { | |
| display: none; | |
| } | |
| label.item-radio { | |
| transition-duration: 300ms; | |
| } | |
| label.item-radio .item-content .item-media, | |
| label.item-radio.item-content .item-media { | |
| align-self: center; | |
| } | |
| label.item-radio.active-state { | |
| background-color: var(--f7-list-link-pressed-bg-color); | |
| } | |
| label.item-radio.active-state:after { | |
| background-color: transparent; | |
| } | |
| label.item-radio.disabled, | |
| .disabled label.item-radio { | |
| opacity: 0.55; | |
| pointer-events: none; | |
| opacity: 0.55 !important; | |
| pointer-events: none !important; | |
| } | |
| .ios .icon-radio:after { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| width: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2); | |
| height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2); | |
| line-height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px); | |
| font-size: 20px; | |
| content: 'radio_ios'; | |
| color: var(--f7-radio-active-color, var(--f7-theme-color)); | |
| opacity: 0; | |
| } | |
| .ios label.item-radio input[type="radio"]:checked ~ .icon-radio:after, | |
| .ios label.item-radio input[type="radio"]:checked ~ * .icon-radio:after, | |
| .ios .radio input[type="radio"]:checked ~ .icon-radio:after { | |
| opacity: 1; | |
| } | |
| .ios .radio input[type="radio"]:checked ~ .icon-radio { | |
| border-color: var(--f7-radio-active-color, var(--f7-theme-color)); | |
| } | |
| .ios label.item-radio input[type="radio"] ~ .icon-radio { | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -11px; | |
| right: calc(var(--f7-safe-area-right) + 10px); | |
| } | |
| .ios label.item-radio .item-inner { | |
| padding-right: calc(var(--f7-safe-area-right) + 35px); | |
| } | |
| .ios label.item-radio.active-state { | |
| transition-duration: 0ms; | |
| } | |
| .md .icon-radio { | |
| transition-duration: 200ms; | |
| } | |
| .md .icon-radio:after { | |
| content: ''; | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| left: 50%; | |
| top: 50%; | |
| margin-left: -5px; | |
| margin-top: -5px; | |
| background-color: var(--f7-radio-active-color, var(--f7-theme-color)); | |
| border-radius: 50%; | |
| transform: scale(0); | |
| transition-duration: 200ms; | |
| } | |
| .md label.item-radio input[type="radio"]:checked ~ .icon-radio, | |
| .md label.item-radio input[type="radio"]:checked ~ * .icon-radio, | |
| .md .radio input[type="radio"]:checked ~ .icon-radio { | |
| border-color: var(--f7-radio-active-color, var(--f7-theme-color)); | |
| } | |
| .md label.item-radio input[type="radio"]:checked ~ .icon-radio:after, | |
| .md label.item-radio input[type="radio"]:checked ~ * .icon-radio:after, | |
| .md .radio input[type="radio"]:checked ~ .icon-radio:after { | |
| background-color: var(--f7-radio-active-color, var(--f7-theme-color)); | |
| transform: scale(1); | |
| } | |
| .md label.item-radio { | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 0; | |
| } | |
| .md label.item-radio > .icon-radio { | |
| margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin)); | |
| } | |
| /* === Toggle === */ | |
| .ios { | |
| --f7-toggle-handle-color: #fff; | |
| --f7-toggle-width: 52px; | |
| --f7-toggle-height: 32px; | |
| --f7-toggle-border-color-ios: #e5e5e5; | |
| --f7-toggle-inactive-color: #fff; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-toggle-border-color-ios: #555; | |
| --f7-toggle-inactive-color: #222; | |
| } | |
| .md { | |
| --f7-toggle-handle-color: #fff; | |
| --f7-toggle-width: 36px; | |
| --f7-toggle-height: 14px; | |
| --f7-toggle-inactive-color: #b0afaf; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-toggle-inactive-color: #555; | |
| } | |
| .toggle, | |
| .toggle-icon { | |
| width: var(--f7-toggle-width); | |
| height: var(--f7-toggle-height); | |
| border-radius: var(--f7-toggle-height); | |
| } | |
| .toggle { | |
| display: inline-block; | |
| vertical-align: middle; | |
| position: relative; | |
| box-sizing: border-box; | |
| align-self: center; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .toggle input[type="checkbox"] { | |
| display: none; | |
| } | |
| .toggle input[disabled] ~ .toggle-icon { | |
| pointer-events: none; | |
| } | |
| .toggle-icon { | |
| z-index: 0; | |
| margin: 0; | |
| padding: 0; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| border: none; | |
| position: relative; | |
| transition: 300ms; | |
| box-sizing: border-box; | |
| display: block; | |
| cursor: pointer; | |
| } | |
| .toggle-icon:before, | |
| .toggle-icon:after { | |
| content: ''; | |
| will-change: transform; | |
| } | |
| .toggle-icon:after { | |
| background: var(--f7-toggle-handle-color); | |
| position: absolute; | |
| z-index: 2; | |
| transform: translateX(0px); | |
| transition-duration: 300ms; | |
| } | |
| .ios .toggle input[type="checkbox"]:checked + .toggle-icon { | |
| background: var(--f7-toggle-active-color, var(--f7-theme-color)); | |
| } | |
| .ios .toggle input[type="checkbox"]:checked + .toggle-icon:before { | |
| transform: scale(0); | |
| } | |
| .ios .toggle input[type="checkbox"]:checked + .toggle-icon:after { | |
| transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))); | |
| } | |
| .ios .toggle-icon { | |
| background: var(--f7-toggle-border-color-ios); | |
| } | |
| .ios .toggle-icon:before { | |
| position: absolute; | |
| left: 2px; | |
| top: 2px; | |
| width: calc(var(--f7-toggle-width) - 4px); | |
| height: calc(var(--f7-toggle-height) - 4px); | |
| border-radius: var(--f7-toggle-height); | |
| box-sizing: border-box; | |
| background: var(--f7-toggle-inactive-color); | |
| z-index: 1; | |
| transition-duration: 300ms; | |
| transform: scale(1); | |
| } | |
| .ios .toggle-icon:after { | |
| height: calc(var(--f7-toggle-height) - 4px); | |
| width: calc(var(--f7-toggle-height) - 4px); | |
| top: 2px; | |
| left: 2px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| border-radius: calc(var(--f7-toggle-height) - 4px); | |
| } | |
| .ios .toggle-active-state input[type="checkbox"]:not(:checked) + .toggle-icon:before { | |
| transform: scale(0); | |
| } | |
| .ios .toggle-active-state input[type="checkbox"] + .toggle-icon:after { | |
| width: calc(var(--f7-toggle-height) + 4px); | |
| } | |
| .ios .toggle-active-state input[type="checkbox"]:checked + .toggle-icon:after { | |
| transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)); | |
| } | |
| .md .toggle input[type="checkbox"]:checked + .toggle-icon { | |
| background: var(--f7-toggle-active-color, rgba(var(--f7-theme-color-rgb), 0.5)); | |
| } | |
| .md .toggle input[type="checkbox"]:checked + .toggle-icon:after { | |
| transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 6px)); | |
| background: var(--f7-toggle-active-color, var(--f7-theme-color)); | |
| } | |
| .md .toggle-icon { | |
| background: var(--f7-toggle-inactive-color); | |
| } | |
| .md .toggle-icon:after { | |
| height: calc(var(--f7-toggle-height) + 6px); | |
| width: calc(var(--f7-toggle-height) + 6px); | |
| top: -3px; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| border-radius: var(--f7-toggle-height); | |
| left: 0; | |
| } | |
| /* === Range Slider === */ | |
| .ios { | |
| --f7-range-size: 28px; | |
| --f7-range-bar-bg-color: #b7b8b7; | |
| /* | |
| --f7-range-bar-active-bg-color: var(--f7-theme-color); | |
| */ | |
| --f7-range-bar-size: 1px; | |
| --f7-range-bar-border-radius: 2px; | |
| --f7-range-knob-size: 28px; | |
| --f7-range-knob-color: #fff; | |
| --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| --f7-range-label-size: 20px; | |
| --f7-range-label-text-color: #000; | |
| --f7-range-label-bg-color: #fff; | |
| --f7-range-label-font-size: 12px; | |
| --f7-range-label-border-radius: 5px; | |
| /* | |
| --f7-range-scale-bg-color: var(--f7-range-bar-bg-color); | |
| */ | |
| --f7-range-scale-step-width: 1px; | |
| --f7-range-scale-step-height: 5px; | |
| --f7-range-scale-font-size: 12px; | |
| --f7-range-scale-font-weight: 400; | |
| --f7-range-scale-text-color: #666; | |
| --f7-range-scale-label-offset: 4px; | |
| /* | |
| --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color); | |
| */ | |
| --f7-range-scale-substep-width: 1px; | |
| --f7-range-scale-substep-height: 4px; | |
| } | |
| .md { | |
| --f7-range-size: 20px; | |
| --f7-range-bar-bg-color: #b9b9b9; | |
| /* | |
| --f7-range-bar-active-bg-color: var(--f7-theme-color); | |
| */ | |
| --f7-range-bar-size: 2px; | |
| --f7-range-bar-border-radius: 0px; | |
| --f7-range-knob-size: 12px; | |
| /* | |
| --f7-range-knob-color: var(--f7-theme-color); | |
| */ | |
| --f7-range-knob-box-shadow: none; | |
| --f7-range-label-size: 26px; | |
| --f7-range-label-text-color: #fff; | |
| /* | |
| --f7-range-label-bg-color: var(--f7-theme-color); | |
| */ | |
| --f7-range-label-font-size: 10px; | |
| --f7-range-label-border-radius: 50%; | |
| /* | |
| --f7-range-scale-bg-color: var(--f7-range-bar-bg-color); | |
| */ | |
| --f7-range-scale-step-width: 2px; | |
| --f7-range-scale-step-height: 5px; | |
| --f7-range-scale-font-size: 12px; | |
| --f7-range-scale-font-weight: 400; | |
| --f7-range-scale-text-color: #666; | |
| --f7-range-scale-label-offset: 4px; | |
| /* | |
| --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color); | |
| */ | |
| --f7-range-scale-substep-width: 1px; | |
| --f7-range-scale-substep-height: 4px; | |
| } | |
| .range-slider { | |
| display: block; | |
| position: relative; | |
| align-self: center; | |
| cursor: pointer; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .range-slider input[type="range"] { | |
| display: none; | |
| } | |
| .range-slider.range-slider-horizontal { | |
| width: 100%; | |
| height: var(--f7-range-size); | |
| } | |
| .range-slider.range-slider-vertical { | |
| height: 100%; | |
| width: var(--f7-range-size); | |
| } | |
| .range-bar { | |
| position: absolute; | |
| overflow: hidden; | |
| background: var(--f7-range-bar-bg-color); | |
| border-radius: var(--f7-range-bar-border-radius); | |
| } | |
| .range-slider-vertical .range-bar { | |
| left: 50%; | |
| top: 0; | |
| height: 100%; | |
| width: var(--f7-range-bar-size); | |
| margin-left: calc(-1 * var(--f7-range-bar-size) / 2); | |
| } | |
| .range-slider-horizontal .range-bar { | |
| left: 0; | |
| top: 50%; | |
| width: 100%; | |
| height: var(--f7-range-bar-size); | |
| margin-top: calc(-1 * var(--f7-range-bar-size) / 2); | |
| } | |
| .range-bar-active { | |
| position: absolute; | |
| background: var(--f7-range-bar-active-bg-color, var(--f7-theme-color)); | |
| } | |
| .range-slider-horizontal .range-bar-active { | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| } | |
| .range-slider-vertical .range-bar-active { | |
| left: 0; | |
| bottom: 0; | |
| width: 100%; | |
| } | |
| .range-slider-vertical-reversed .range-bar-active { | |
| top: 0; | |
| bottom: auto; | |
| } | |
| .range-knob-wrap { | |
| z-index: 20; | |
| position: absolute; | |
| height: var(--f7-range-knob-size); | |
| width: var(--f7-range-knob-size); | |
| } | |
| .range-slider-horizontal .range-knob-wrap { | |
| top: 50%; | |
| margin-top: calc(-1 * var(--f7-range-knob-size) / 2); | |
| margin-left: calc(-1 * var(--f7-range-knob-size) / 2); | |
| left: 0; | |
| } | |
| .range-slider-vertical .range-knob-wrap { | |
| left: 50%; | |
| margin-left: calc(-1 * var(--f7-range-knob-size) / 2); | |
| bottom: 0; | |
| margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2); | |
| } | |
| .range-slider-vertical-reversed .range-knob-wrap { | |
| bottom: auto; | |
| top: 0; | |
| margin-bottom: 0; | |
| margin-top: calc(-1 * var(--f7-range-knob-size) / 2); | |
| } | |
| .range-knob { | |
| box-sizing: border-box; | |
| border-radius: 50%; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color))); | |
| box-shadow: var(--f7-range-knob-box-shadow); | |
| } | |
| .range-knob:after { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| width: 44px; | |
| height: 44px; | |
| margin-left: -22px; | |
| margin-top: -22px; | |
| } | |
| .range-knob-label { | |
| position: absolute; | |
| left: 50%; | |
| bottom: 100%; | |
| text-align: center; | |
| transition-duration: 120ms; | |
| transition-property: transform; | |
| transform: translateY(100%) scale(0); | |
| height: var(--f7-range-label-size); | |
| line-height: var(--f7-range-label-size); | |
| min-width: var(--f7-range-label-size); | |
| color: var(--f7-range-label-text-color); | |
| background-color: var(--f7-range-label-bg-color, var(--f7-theme-color)); | |
| font-size: var(--f7-range-label-font-size); | |
| border-radius: var(--f7-range-label-border-radius); | |
| } | |
| .range-knob-active-state .range-knob-label { | |
| transform: translateY(0%) scale(1); | |
| } | |
| .range-scale { | |
| position: absolute; | |
| } | |
| .range-slider-horizontal .range-scale { | |
| top: 50%; | |
| left: 0; | |
| width: 100%; | |
| margin-top: calc(var(--f7-range-bar-size) / 2); | |
| } | |
| .range-slider-vertical .range-scale { | |
| right: 50%; | |
| top: 0; | |
| height: 100%; | |
| margin-right: calc(var(--f7-range-bar-size) / 2); | |
| } | |
| .range-scale-step { | |
| position: absolute; | |
| box-sizing: border-box; | |
| display: flex; | |
| font-size: var(--f7-range-scale-font-size); | |
| font-weight: var(--f7-range-scale-font-weight); | |
| color: var(--f7-range-scale-text-color, var(--f7-range-bar-bg-color)); | |
| line-height: 1; | |
| } | |
| .range-scale-step:before { | |
| content: ''; | |
| position: absolute; | |
| background: var(--f7-range-scale-step-bg-color, var(--f7-range-bar-bg-color)); | |
| } | |
| .range-slider-horizontal .range-scale-step { | |
| justify-content: center; | |
| align-items: flex-start; | |
| width: var(--f7-range-scale-step-width); | |
| height: var(--f7-range-scale-step-height); | |
| padding-top: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset)); | |
| top: 0; | |
| margin-left: calc(-1 * var(--f7-range-scale-step-width) / 2); | |
| } | |
| .range-slider-horizontal .range-scale-step:before { | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: var(--f7-range-scale-step-height); | |
| } | |
| .range-slider-horizontal .range-scale-step:first-child { | |
| margin-left: 0; | |
| } | |
| .range-slider-horizontal .range-scale-step:last-child { | |
| margin-left: calc(-1 * var(--f7-range-scale-step-width)); | |
| } | |
| .range-slider-vertical .range-scale-step { | |
| line-height: 1; | |
| justify-content: flex-end; | |
| align-items: center; | |
| height: var(--f7-range-scale-step-width); | |
| width: var(--f7-range-scale-step-height); | |
| padding-right: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset)); | |
| right: 0; | |
| margin-bottom: calc(-1 * var(--f7-range-scale-step-width) / 2); | |
| } | |
| .range-slider-vertical .range-scale-step:first-child { | |
| margin-bottom: 0; | |
| } | |
| .range-slider-vertical .range-scale-step:last-child { | |
| margin-bottom: calc(-1 * var(--f7-range-scale-step-width)); | |
| } | |
| .range-slider-vertical .range-scale-step:before { | |
| right: 0; | |
| top: 0; | |
| height: 100%; | |
| width: var(--f7-range-scale-step-height); | |
| } | |
| .range-scale-substep { | |
| --f7-range-scale-step-bg-color: var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color)); | |
| --f7-range-scale-step-width: var(--f7-range-scale-substep-width); | |
| --f7-range-scale-step-height: var(--f7-range-scale-substep-height); | |
| } | |
| .ios .range-knob-label { | |
| margin-bottom: 6px; | |
| transform: translateX(-50%) translateY(100%) scale(0); | |
| } | |
| .ios .range-knob-active-state .range-knob-label { | |
| transform: translateX(-50%) translateY(0%) scale(1); | |
| } | |
| .md .range-knob { | |
| transition-duration: 200ms; | |
| transition-property: transform, background-color; | |
| } | |
| .md .range-knob-active-state .range-knob { | |
| transform: scale(1.5); | |
| } | |
| .md .range-slider-min:not(.range-slider-dual) .range-knob { | |
| background: #fff !important; | |
| border: 2px solid var(--f7-range-bar-bg-color); | |
| } | |
| .md .range-knob-label { | |
| width: var(--f7-range-label-size); | |
| margin-left: calc(-1 * var(--f7-range-label-size) / 2); | |
| margin-bottom: 8px; | |
| } | |
| .md .range-knob-label:before { | |
| content: ''; | |
| left: 50%; | |
| top: 0px; | |
| margin-left: calc(-1 * var(--f7-range-label-size) / 2); | |
| position: absolute; | |
| z-index: -1; | |
| width: var(--f7-range-label-size); | |
| height: var(--f7-range-label-size); | |
| background: var(--f7-range-label-bg-color, var(--f7-theme-color)); | |
| transform: rotate(-45deg); | |
| border-radius: 50% 50% 50% 0; | |
| } | |
| .md .range-knob-active-state .range-knob-label { | |
| transform: translateY(0%) scale(1); | |
| } | |
| .md .range-slider-label .range-knob-active-state .range-knob { | |
| transform: scale(0); | |
| } | |
| /* === Stepper === */ | |
| :root { | |
| /* | |
| --f7-stepper-button-text-color: var(--f7-theme-color); | |
| --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color)); | |
| */ | |
| --f7-stepper-fill-button-text-color: #fff; | |
| /* | |
| --f7-stepper-fill-button-bg-color: var(--f7-theme-color); | |
| */ | |
| --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24); | |
| } | |
| .ios { | |
| --f7-stepper-height: 29px; | |
| --f7-stepper-border-radius: 5px; | |
| /* | |
| --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15); | |
| --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint); | |
| */ | |
| --f7-stepper-border-width: 1px; | |
| --f7-stepper-large-height: 44px; | |
| --f7-stepper-small-height: 26px; | |
| --f7-stepper-small-border-width: 2px; | |
| --f7-stepper-value-font-size: 17px; | |
| --f7-stepper-value-font-weight: 400; | |
| } | |
| .md { | |
| --f7-stepper-height: 36px; | |
| --f7-stepper-border-radius: 4px; | |
| --f7-stepper-button-pressed-bg-color: rgba(0, 0, 0, 0.1); | |
| /* | |
| --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade); | |
| */ | |
| --f7-stepper-border-width: 2px; | |
| --f7-stepper-large-height: 48px; | |
| --f7-stepper-small-border-width: 2px; | |
| --f7-stepper-small-height: 28px; | |
| --f7-stepper-value-font-size: 14px; | |
| --f7-stepper-value-font-weight: 500; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-stepper-button-pressed-bg-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .stepper { | |
| display: inline-flex; | |
| align-items: stretch; | |
| height: var(--f7-stepper-height); | |
| border-radius: var(--f7-stepper-border-radius); | |
| } | |
| .stepper-button, | |
| .stepper-button-minus, | |
| .stepper-button-plus { | |
| background-color: var(--f7-stepper-button-bg-color); | |
| width: 40px; | |
| border-radius: var(--f7-stepper-border-radius); | |
| border: var(--f7-stepper-border-width) solid var(--f7-theme-color); | |
| color: var(--f7-stepper-button-text-color, var(--f7-theme-color)); | |
| line-height: calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px)); | |
| text-align: center; | |
| display: flex; | |
| justify-content: center; | |
| align-content: center; | |
| align-items: center; | |
| flex-shrink: 0; | |
| box-sizing: border-box; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .stepper-button.active-state, | |
| .stepper-button-minus.active-state, | |
| .stepper-button-plus.active-state { | |
| background-color: var(--f7-stepper-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15)); | |
| color: var(--f7-stepper-button-pressed-text-color, var(--f7-stepper-button-text-color, var(--f7-theme-color))); | |
| } | |
| .stepper-button:first-child, | |
| .stepper-button-minus:first-child, | |
| .stepper-button-plus:first-child { | |
| border-radius: var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius); | |
| } | |
| .stepper-button:last-child, | |
| .stepper-button-minus:last-child, | |
| .stepper-button-plus:last-child { | |
| border-radius: 0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0; | |
| } | |
| .stepper-button .icon, | |
| .stepper-button-minus .icon, | |
| .stepper-button-plus .icon { | |
| pointer-events: none; | |
| } | |
| .stepper-button + .stepper-button, | |
| .stepper-button-minus + .stepper-button, | |
| .stepper-button-plus + .stepper-button, | |
| .stepper-button + .stepper-button-minus, | |
| .stepper-button-minus + .stepper-button-minus, | |
| .stepper-button-plus + .stepper-button-minus, | |
| .stepper-button + .stepper-button-plus, | |
| .stepper-button-minus + .stepper-button-plus, | |
| .stepper-button-plus + .stepper-button-plus { | |
| border-left: none; | |
| } | |
| .stepper-button-plus, | |
| .stepper-button-minus { | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .stepper-button-plus:after, | |
| .stepper-button-minus:after, | |
| .stepper-button-plus:before, | |
| .stepper-button-minus:before { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| background-color: var(--f7-stepper-button-text-color, var(--f7-theme-color)); | |
| } | |
| .stepper-button-plus:after, | |
| .stepper-button-minus:after { | |
| width: 15px; | |
| height: 2px; | |
| } | |
| .stepper-button-plus:before { | |
| height: 15px; | |
| width: 2px; | |
| } | |
| .stepper-value { | |
| display: flex; | |
| align-content: center; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .stepper-input-wrap, | |
| .stepper-value { | |
| flex-shrink: 1; | |
| text-align: center; | |
| border-top: var(--f7-stepper-border-width) solid var(--f7-theme-color); | |
| border-bottom: var(--f7-stepper-border-width) solid var(--f7-theme-color); | |
| } | |
| .stepper-input-wrap input, | |
| .stepper-value { | |
| width: 45px; | |
| color: var(--f7-theme-color); | |
| font-size: var(--f7-stepper-value-font-size); | |
| font-weight: var(--f7-stepper-value-font-weight); | |
| text-align: center; | |
| } | |
| .stepper-input-wrap input { | |
| height: 100%; | |
| } | |
| .stepper-round, | |
| .ios .stepper-round-ios, | |
| .md .stepper-round-md { | |
| --f7-stepper-border-radius: var(--f7-stepper-height); | |
| } | |
| .stepper-fill, | |
| .ios .stepper-fill-ios, | |
| .md .stepper-fill-md { | |
| --f7-stepper-button-bg-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color)); | |
| --f7-stepper-button-text-color: var(--f7-stepper-fill-button-text-color); | |
| --f7-touch-ripple-color: var(--f7-touch-ripple-white); | |
| } | |
| .stepper-fill .stepper-button + .stepper-button, | |
| .ios .stepper-fill-ios .stepper-button + .stepper-button, | |
| .md .stepper-fill-md .stepper-button + .stepper-button, | |
| .stepper-raised .stepper-button + .stepper-button, | |
| .ios .stepper-raised-ios .stepper-button + .stepper-button, | |
| .md .stepper-raised-md .stepper-button + .stepper-button, | |
| .stepper-fill .stepper-button-minus + .stepper-button-plus, | |
| .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus, | |
| .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus, | |
| .stepper-raised .stepper-button-minus + .stepper-button-plus, | |
| .ios .stepper-raised-ios .stepper-button-minus + .stepper-button-plus, | |
| .md .stepper-raised-md .stepper-button-minus + .stepper-button-plus { | |
| border-left: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .stepper-fill .stepper-button + .stepper-button.active-state, | |
| .ios .stepper-fill-ios .stepper-button + .stepper-button.active-state, | |
| .md .stepper-fill-md .stepper-button + .stepper-button.active-state, | |
| .stepper-fill .stepper-button-minus + .stepper-button-plus.active-state, | |
| .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus.active-state, | |
| .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus.active-state { | |
| border-left-color: var(--f7-stepper-button-pressed-bg-color); | |
| } | |
| .stepper-raised:not(.stepper-fill) .stepper-input-wrap, | |
| .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap, | |
| .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap, | |
| .stepper-raised:not(.stepper-fill) .stepper-value, | |
| .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value, | |
| .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value { | |
| border-left: 1px solid rgba(0, 0, 0, 0.1); | |
| border-right: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .stepper-large, | |
| .ios .stepper-large-ios, | |
| .md .stepper-large-md { | |
| --f7-stepper-height: var(--f7-stepper-large-height); | |
| } | |
| .stepper-small, | |
| .ios .stepper-small-ios, | |
| .md .stepper-small-md { | |
| --f7-stepper-border-width: var(--f7-stepper-small-border-width); | |
| --f7-stepper-height: var(--f7-stepper-small-height); | |
| } | |
| .ios .stepper-fill.stepper-small-ios, | |
| .ios .stepper-fill.stepper-small { | |
| --f7-stepper-button-pressed-bg-color: transparent; | |
| --f7-stepper-button-pressed-text-color: var(--f7-theme-color); | |
| } | |
| .stepper-raised, | |
| .ios .stepper-raised-ios, | |
| .md .stepper-raised-md { | |
| --f7-stepper-border-width: 0; | |
| box-shadow: var(--f7-stepper-raised-box-shadow); | |
| } | |
| .ios .stepper-button .f7-icons, | |
| .ios .stepper-button-minus .f7-icons, | |
| .ios .stepper-button-plus .f7-icons { | |
| font-size: 22px; | |
| } | |
| .ios .stepper-fill, | |
| .ios .stepper-fill-ios { | |
| --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint)); | |
| } | |
| .ios .stepper-small.stepper-raised, | |
| .ios .stepper-small-ios.stepper-raised, | |
| .ios .stepper-small.stepper-raised-ios, | |
| .ios .stepper-small-ios.stepper-raised-ios { | |
| --f7-stepper-border-width: 0px; | |
| } | |
| .ios .stepper-small .stepper-button, | |
| .ios .stepper-small-ios .stepper-button, | |
| .ios .stepper-small .stepper-button-minus, | |
| .ios .stepper-small-ios .stepper-button-minus, | |
| .ios .stepper-small .stepper-button-plus, | |
| .ios .stepper-small-ios .stepper-button-plus { | |
| transition-duration: 200ms; | |
| } | |
| .ios .stepper-small .stepper-button.active-state:after, | |
| .ios .stepper-small-ios .stepper-button.active-state:after, | |
| .ios .stepper-small .stepper-button-minus.active-state:after, | |
| .ios .stepper-small-ios .stepper-button-minus.active-state:after, | |
| .ios .stepper-small .stepper-button-plus.active-state:after, | |
| .ios .stepper-small-ios .stepper-button-plus.active-state:after, | |
| .ios .stepper-small .stepper-button.active-state:before, | |
| .ios .stepper-small-ios .stepper-button.active-state:before, | |
| .ios .stepper-small .stepper-button-minus.active-state:before, | |
| .ios .stepper-small-ios .stepper-button-minus.active-state:before, | |
| .ios .stepper-small .stepper-button-plus.active-state:before, | |
| .ios .stepper-small-ios .stepper-button-plus.active-state:before { | |
| transition-duration: 200ms; | |
| background-color: var(--f7-theme-color); | |
| } | |
| .md .stepper-button, | |
| .md .stepper-button-minus, | |
| .md .stepper-button-plus { | |
| transition-duration: 300ms; | |
| transform: translate3d(0, 0, 0); | |
| overflow: hidden; | |
| } | |
| .md .stepper-fill, | |
| .md .stepper-fill-md { | |
| --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade)); | |
| } | |
| /* === Smart Select === */ | |
| .smart-select :root { | |
| /* | |
| --f7-smart-select-sheet-bg: var(--f7-list-bg-color); | |
| --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color); | |
| */ | |
| } | |
| .smart-select select { | |
| display: none; | |
| } | |
| .smart-select .item-after { | |
| max-width: 70%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| position: relative; | |
| display: block; | |
| } | |
| .smart-select-sheet .page, | |
| .smart-select-sheet .sheet-modal-inner, | |
| .smart-select-sheet .list ul { | |
| background: var(--f7-smart-select-sheet-bg, var(--f7-list-bg-color)); | |
| } | |
| .smart-select-sheet .toolbar:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-smart-select-sheet-toolbar-border-color, var(--f7-bars-border-color)); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .smart-select-sheet .toolbar:after { | |
| display: block; | |
| } | |
| .smart-select-sheet .list { | |
| margin: 0; | |
| } | |
| .smart-select-sheet .list ul:before { | |
| display: none !important; | |
| } | |
| .smart-select-sheet .list ul:after { | |
| display: none !important; | |
| } | |
| .smart-select-popover .popover-inner { | |
| max-height: 40vh; | |
| } | |
| /* === Grid === */ | |
| .ios { | |
| --f7-grid-gap: 15px; | |
| } | |
| .md { | |
| --f7-grid-gap: 16px; | |
| } | |
| .row { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| align-items: flex-start; | |
| --f7-cols-per-row: 1; | |
| } | |
| .row > [class*="col-"], | |
| .row > .col { | |
| box-sizing: border-box; | |
| width: calc((100% - var(--f7-grid-gap) * (var(--f7-cols-per-row) - 1)) / var(--f7-cols-per-row)); | |
| } | |
| .row.no-gap { | |
| --f7-grid-gap: 0px; | |
| } | |
| .row .col-5 { | |
| --f7-cols-per-row: 20; | |
| } | |
| .row .col-10 { | |
| --f7-cols-per-row: 10; | |
| } | |
| .row .col-15 { | |
| --f7-cols-per-row: 6.66666667; | |
| } | |
| .row .col-20 { | |
| --f7-cols-per-row: 5; | |
| } | |
| .row .col-25 { | |
| --f7-cols-per-row: 4; | |
| } | |
| .row .col-30 { | |
| --f7-cols-per-row: 3.33333333; | |
| } | |
| .row .col-33 { | |
| --f7-cols-per-row: 3; | |
| } | |
| .row .col-35 { | |
| --f7-cols-per-row: 2.85714286; | |
| } | |
| .row .col-40 { | |
| --f7-cols-per-row: 2.5; | |
| } | |
| .row .col-45 { | |
| --f7-cols-per-row: 2.22222222; | |
| } | |
| .row .col-50 { | |
| --f7-cols-per-row: 2; | |
| } | |
| .row .col-55 { | |
| --f7-cols-per-row: 1.81818182; | |
| } | |
| .row .col-60 { | |
| --f7-cols-per-row: 1.66666667; | |
| } | |
| .row .col-65 { | |
| --f7-cols-per-row: 1.53846154; | |
| } | |
| .row .col-66 { | |
| --f7-cols-per-row: 1.5; | |
| } | |
| .row .col-70 { | |
| --f7-cols-per-row: 1.42857143; | |
| } | |
| .row .col-75 { | |
| --f7-cols-per-row: 1.33333333; | |
| } | |
| .row .col-80 { | |
| --f7-cols-per-row: 1.25; | |
| } | |
| .row .col-85 { | |
| --f7-cols-per-row: 1.17647059; | |
| } | |
| .row .col-90 { | |
| --f7-cols-per-row: 1.11111111; | |
| } | |
| .row .col-95 { | |
| --f7-cols-per-row: 1.05263158; | |
| } | |
| .row .col-100 { | |
| --f7-cols-per-row: 1; | |
| } | |
| .row .col:nth-last-child(1), | |
| .row .col:nth-last-child(1) ~ .col { | |
| --f7-cols-per-row: 1; | |
| } | |
| .row .col:nth-last-child(2), | |
| .row .col:nth-last-child(2) ~ .col { | |
| --f7-cols-per-row: 2; | |
| } | |
| .row .col:nth-last-child(3), | |
| .row .col:nth-last-child(3) ~ .col { | |
| --f7-cols-per-row: 3; | |
| } | |
| .row .col:nth-last-child(4), | |
| .row .col:nth-last-child(4) ~ .col { | |
| --f7-cols-per-row: 4; | |
| } | |
| .row .col:nth-last-child(5), | |
| .row .col:nth-last-child(5) ~ .col { | |
| --f7-cols-per-row: 5; | |
| } | |
| .row .col:nth-last-child(6), | |
| .row .col:nth-last-child(6) ~ .col { | |
| --f7-cols-per-row: 6; | |
| } | |
| .row .col:nth-last-child(7), | |
| .row .col:nth-last-child(7) ~ .col { | |
| --f7-cols-per-row: 7; | |
| } | |
| .row .col:nth-last-child(8), | |
| .row .col:nth-last-child(8) ~ .col { | |
| --f7-cols-per-row: 8; | |
| } | |
| .row .col:nth-last-child(9), | |
| .row .col:nth-last-child(9) ~ .col { | |
| --f7-cols-per-row: 9; | |
| } | |
| .row .col:nth-last-child(10), | |
| .row .col:nth-last-child(10) ~ .col { | |
| --f7-cols-per-row: 10; | |
| } | |
| .row .col:nth-last-child(11), | |
| .row .col:nth-last-child(11) ~ .col { | |
| --f7-cols-per-row: 11; | |
| } | |
| .row .col:nth-last-child(12), | |
| .row .col:nth-last-child(12) ~ .col { | |
| --f7-cols-per-row: 12; | |
| } | |
| .row .col:nth-last-child(13), | |
| .row .col:nth-last-child(13) ~ .col { | |
| --f7-cols-per-row: 13; | |
| } | |
| .row .col:nth-last-child(14), | |
| .row .col:nth-last-child(14) ~ .col { | |
| --f7-cols-per-row: 14; | |
| } | |
| .row .col:nth-last-child(15), | |
| .row .col:nth-last-child(15) ~ .col { | |
| --f7-cols-per-row: 15; | |
| } | |
| .row .col:nth-last-child(16), | |
| .row .col:nth-last-child(16) ~ .col { | |
| --f7-cols-per-row: 16; | |
| } | |
| .row .col:nth-last-child(17), | |
| .row .col:nth-last-child(17) ~ .col { | |
| --f7-cols-per-row: 17; | |
| } | |
| .row .col:nth-last-child(18), | |
| .row .col:nth-last-child(18) ~ .col { | |
| --f7-cols-per-row: 18; | |
| } | |
| .row .col:nth-last-child(19), | |
| .row .col:nth-last-child(19) ~ .col { | |
| --f7-cols-per-row: 19; | |
| } | |
| .row .col:nth-last-child(20), | |
| .row .col:nth-last-child(20) ~ .col { | |
| --f7-cols-per-row: 20; | |
| } | |
| .row .col:nth-last-child(21), | |
| .row .col:nth-last-child(21) ~ .col { | |
| --f7-cols-per-row: 21; | |
| } | |
| .row .col:nth-last-child(22), | |
| .row .col:nth-last-child(22) ~ .col { | |
| --f7-cols-per-row: 22; | |
| } | |
| @media (min-width: 768px) { | |
| .row .tablet-5 { | |
| --f7-cols-per-row: 20; | |
| } | |
| .row .tablet-10 { | |
| --f7-cols-per-row: 10; | |
| } | |
| .row .tablet-15 { | |
| --f7-cols-per-row: 6.66666667; | |
| } | |
| .row .tablet-20 { | |
| --f7-cols-per-row: 5; | |
| } | |
| .row .tablet-25 { | |
| --f7-cols-per-row: 4; | |
| } | |
| .row .tablet-30 { | |
| --f7-cols-per-row: 3.33333333; | |
| } | |
| .row .tablet-33 { | |
| --f7-cols-per-row: 3; | |
| } | |
| .row .tablet-35 { | |
| --f7-cols-per-row: 2.85714286; | |
| } | |
| .row .tablet-40 { | |
| --f7-cols-per-row: 2.5; | |
| } | |
| .row .tablet-45 { | |
| --f7-cols-per-row: 2.22222222; | |
| } | |
| .row .tablet-50 { | |
| --f7-cols-per-row: 2; | |
| } | |
| .row .tablet-55 { | |
| --f7-cols-per-row: 1.81818182; | |
| } | |
| .row .tablet-60 { | |
| --f7-cols-per-row: 1.66666667; | |
| } | |
| .row .tablet-65 { | |
| --f7-cols-per-row: 1.53846154; | |
| } | |
| .row .tablet-66 { | |
| --f7-cols-per-row: 1.5; | |
| } | |
| .row .tablet-70 { | |
| --f7-cols-per-row: 1.42857143; | |
| } | |
| .row .tablet-75 { | |
| --f7-cols-per-row: 1.33333333; | |
| } | |
| .row .tablet-80 { | |
| --f7-cols-per-row: 1.25; | |
| } | |
| .row .tablet-85 { | |
| --f7-cols-per-row: 1.17647059; | |
| } | |
| .row .tablet-90 { | |
| --f7-cols-per-row: 1.11111111; | |
| } | |
| .row .tablet-95 { | |
| --f7-cols-per-row: 1.05263158; | |
| } | |
| .row .tablet-100 { | |
| --f7-cols-per-row: 1; | |
| } | |
| .row .tablet-auto:nth-last-child(1), | |
| .row .tablet-auto:nth-last-child(1) ~ .tablet-auto { | |
| --f7-cols-per-row: 1; | |
| } | |
| .row .tablet-auto:nth-last-child(2), | |
| .row .tablet-auto:nth-last-child(2) ~ .tablet-auto { | |
| --f7-cols-per-row: 2; | |
| } | |
| .row .tablet-auto:nth-last-child(3), | |
| .row .tablet-auto:nth-last-child(3) ~ .tablet-auto { | |
| --f7-cols-per-row: 3; | |
| } | |
| .row .tablet-auto:nth-last-child(4), | |
| .row .tablet-auto:nth-last-child(4) ~ .tablet-auto { | |
| --f7-cols-per-row: 4; | |
| } | |
| .row .tablet-auto:nth-last-child(5), | |
| .row .tablet-auto:nth-last-child(5) ~ .tablet-auto { | |
| --f7-cols-per-row: 5; | |
| } | |
| .row .tablet-auto:nth-last-child(6), | |
| .row .tablet-auto:nth-last-child(6) ~ .tablet-auto { | |
| --f7-cols-per-row: 6; | |
| } | |
| .row .tablet-auto:nth-last-child(7), | |
| .row .tablet-auto:nth-last-child(7) ~ .tablet-auto { | |
| --f7-cols-per-row: 7; | |
| } | |
| .row .tablet-auto:nth-last-child(8), | |
| .row .tablet-auto:nth-last-child(8) ~ .tablet-auto { | |
| --f7-cols-per-row: 8; | |
| } | |
| .row .tablet-auto:nth-last-child(9), | |
| .row .tablet-auto:nth-last-child(9) ~ .tablet-auto { | |
| --f7-cols-per-row: 9; | |
| } | |
| .row .tablet-auto:nth-last-child(10), | |
| .row .tablet-auto:nth-last-child(10) ~ .tablet-auto { | |
| --f7-cols-per-row: 10; | |
| } | |
| .row .tablet-auto:nth-last-child(11), | |
| .row .tablet-auto:nth-last-child(11) ~ .tablet-auto { | |
| --f7-cols-per-row: 11; | |
| } | |
| .row .tablet-auto:nth-last-child(12), | |
| .row .tablet-auto:nth-last-child(12) ~ .tablet-auto { | |
| --f7-cols-per-row: 12; | |
| } | |
| .row .tablet-auto:nth-last-child(13), | |
| .row .tablet-auto:nth-last-child(13) ~ .tablet-auto { | |
| --f7-cols-per-row: 13; | |
| } | |
| .row .tablet-auto:nth-last-child(14), | |
| .row .tablet-auto:nth-last-child(14) ~ .tablet-auto { | |
| --f7-cols-per-row: 14; | |
| } | |
| .row .tablet-auto:nth-last-child(15), | |
| .row .tablet-auto:nth-last-child(15) ~ .tablet-auto { | |
| --f7-cols-per-row: 15; | |
| } | |
| .row .tablet-auto:nth-last-child(16), | |
| .row .tablet-auto:nth-last-child(16) ~ .tablet-auto { | |
| --f7-cols-per-row: 16; | |
| } | |
| .row .tablet-auto:nth-last-child(17), | |
| .row .tablet-auto:nth-last-child(17) ~ .tablet-auto { | |
| --f7-cols-per-row: 17; | |
| } | |
| .row .tablet-auto:nth-last-child(18), | |
| .row .tablet-auto:nth-last-child(18) ~ .tablet-auto { | |
| --f7-cols-per-row: 18; | |
| } | |
| .row .tablet-auto:nth-last-child(19), | |
| .row .tablet-auto:nth-last-child(19) ~ .tablet-auto { | |
| --f7-cols-per-row: 19; | |
| } | |
| .row .tablet-auto:nth-last-child(20), | |
| .row .tablet-auto:nth-last-child(20) ~ .tablet-auto { | |
| --f7-cols-per-row: 20; | |
| } | |
| .row .tablet-auto:nth-last-child(21), | |
| .row .tablet-auto:nth-last-child(21) ~ .tablet-auto { | |
| --f7-cols-per-row: 21; | |
| } | |
| .row .tablet-auto:nth-last-child(22), | |
| .row .tablet-auto:nth-last-child(22) ~ .tablet-auto { | |
| --f7-cols-per-row: 22; | |
| } | |
| } | |
| @media (min-width: 1025px) { | |
| .row .desktop-5 { | |
| --f7-cols-per-row: 20; | |
| } | |
| .row .desktop-10 { | |
| --f7-cols-per-row: 10; | |
| } | |
| .row .desktop-15 { | |
| --f7-cols-per-row: 6.66666667; | |
| } | |
| .row .desktop-20 { | |
| --f7-cols-per-row: 5; | |
| } | |
| .row .desktop-25 { | |
| --f7-cols-per-row: 4; | |
| } | |
| .row .desktop-30 { | |
| --f7-cols-per-row: 3.33333333; | |
| } | |
| .row .desktop-33 { | |
| --f7-cols-per-row: 3; | |
| } | |
| .row .desktop-35 { | |
| --f7-cols-per-row: 2.85714286; | |
| } | |
| .row .desktop-40 { | |
| --f7-cols-per-row: 2.5; | |
| } | |
| .row .desktop-45 { | |
| --f7-cols-per-row: 2.22222222; | |
| } | |
| .row .desktop-50 { | |
| --f7-cols-per-row: 2; | |
| } | |
| .row .desktop-55 { | |
| --f7-cols-per-row: 1.81818182; | |
| } | |
| .row .desktop-60 { | |
| --f7-cols-per-row: 1.66666667; | |
| } | |
| .row .desktop-65 { | |
| --f7-cols-per-row: 1.53846154; | |
| } | |
| .row .desktop-66 { | |
| --f7-cols-per-row: 1.5; | |
| } | |
| .row .desktop-70 { | |
| --f7-cols-per-row: 1.42857143; | |
| } | |
| .row .desktop-75 { | |
| --f7-cols-per-row: 1.33333333; | |
| } | |
| .row .desktop-80 { | |
| --f7-cols-per-row: 1.25; | |
| } | |
| .row .desktop-85 { | |
| --f7-cols-per-row: 1.17647059; | |
| } | |
| .row .desktop-90 { | |
| --f7-cols-per-row: 1.11111111; | |
| } | |
| .row .desktop-95 { | |
| --f7-cols-per-row: 1.05263158; | |
| } | |
| .row .desktop-100 { | |
| --f7-cols-per-row: 1; | |
| } | |
| .row .desktop-auto:nth-last-child(1), | |
| .row .desktop-auto:nth-last-child(1) ~ .desktop-auto { | |
| --f7-cols-per-row: 1; | |
| } | |
| .row .desktop-auto:nth-last-child(2), | |
| .row .desktop-auto:nth-last-child(2) ~ .desktop-auto { | |
| --f7-cols-per-row: 2; | |
| } | |
| .row .desktop-auto:nth-last-child(3), | |
| .row .desktop-auto:nth-last-child(3) ~ .desktop-auto { | |
| --f7-cols-per-row: 3; | |
| } | |
| .row .desktop-auto:nth-last-child(4), | |
| .row .desktop-auto:nth-last-child(4) ~ .desktop-auto { | |
| --f7-cols-per-row: 4; | |
| } | |
| .row .desktop-auto:nth-last-child(5), | |
| .row .desktop-auto:nth-last-child(5) ~ .desktop-auto { | |
| --f7-cols-per-row: 5; | |
| } | |
| .row .desktop-auto:nth-last-child(6), | |
| .row .desktop-auto:nth-last-child(6) ~ .desktop-auto { | |
| --f7-cols-per-row: 6; | |
| } | |
| .row .desktop-auto:nth-last-child(7), | |
| .row .desktop-auto:nth-last-child(7) ~ .desktop-auto { | |
| --f7-cols-per-row: 7; | |
| } | |
| .row .desktop-auto:nth-last-child(8), | |
| .row .desktop-auto:nth-last-child(8) ~ .desktop-auto { | |
| --f7-cols-per-row: 8; | |
| } | |
| .row .desktop-auto:nth-last-child(9), | |
| .row .desktop-auto:nth-last-child(9) ~ .desktop-auto { | |
| --f7-cols-per-row: 9; | |
| } | |
| .row .desktop-auto:nth-last-child(10), | |
| .row .desktop-auto:nth-last-child(10) ~ .desktop-auto { | |
| --f7-cols-per-row: 10; | |
| } | |
| .row .desktop-auto:nth-last-child(11), | |
| .row .desktop-auto:nth-last-child(11) ~ .desktop-auto { | |
| --f7-cols-per-row: 11; | |
| } | |
| .row .desktop-auto:nth-last-child(12), | |
| .row .desktop-auto:nth-last-child(12) ~ .desktop-auto { | |
| --f7-cols-per-row: 12; | |
| } | |
| .row .desktop-auto:nth-last-child(13), | |
| .row .desktop-auto:nth-last-child(13) ~ .desktop-auto { | |
| --f7-cols-per-row: 13; | |
| } | |
| .row .desktop-auto:nth-last-child(14), | |
| .row .desktop-auto:nth-last-child(14) ~ .desktop-auto { | |
| --f7-cols-per-row: 14; | |
| } | |
| .row .desktop-auto:nth-last-child(15), | |
| .row .desktop-auto:nth-last-child(15) ~ .desktop-auto { | |
| --f7-cols-per-row: 15; | |
| } | |
| .row .desktop-auto:nth-last-child(16), | |
| .row .desktop-auto:nth-last-child(16) ~ .desktop-auto { | |
| --f7-cols-per-row: 16; | |
| } | |
| .row .desktop-auto:nth-last-child(17), | |
| .row .desktop-auto:nth-last-child(17) ~ .desktop-auto { | |
| --f7-cols-per-row: 17; | |
| } | |
| .row .desktop-auto:nth-last-child(18), | |
| .row .desktop-auto:nth-last-child(18) ~ .desktop-auto { | |
| --f7-cols-per-row: 18; | |
| } | |
| .row .desktop-auto:nth-last-child(19), | |
| .row .desktop-auto:nth-last-child(19) ~ .desktop-auto { | |
| --f7-cols-per-row: 19; | |
| } | |
| .row .desktop-auto:nth-last-child(20), | |
| .row .desktop-auto:nth-last-child(20) ~ .desktop-auto { | |
| --f7-cols-per-row: 20; | |
| } | |
| .row .desktop-auto:nth-last-child(21), | |
| .row .desktop-auto:nth-last-child(21) ~ .desktop-auto { | |
| --f7-cols-per-row: 21; | |
| } | |
| .row .desktop-auto:nth-last-child(22), | |
| .row .desktop-auto:nth-last-child(22) ~ .desktop-auto { | |
| --f7-cols-per-row: 22; | |
| } | |
| } | |
| /* === Calendar/Datepicker === */ | |
| :root { | |
| --f7-calendar-height: 320px; | |
| --f7-calendar-sheet-landscape-height: 220px; | |
| --f7-calendar-sheet-bg-color: #fff; | |
| --f7-calendar-popover-width: 320px; | |
| --f7-calendar-popover-height: 320px; | |
| --f7-calendar-modal-height: 420px; | |
| --f7-calendar-modal-max-width: 380px; | |
| --f7-calendar-modal-border-radius: 4px; | |
| --f7-calendar-modal-bg-color: #fff; | |
| /* | |
| --f7-calendar-header-bg-color: var(--f7-bars-bg-color); | |
| --f7-calendar-header-link-color: var(--f7-bars-link-color); | |
| --f7-calendar-header-text-color: var(--f7-bars-text-color); | |
| --f7-calendar-footer-bg-color: var(--f7-bars-bg-color); | |
| --f7-calendar-footer-border-color: var(--f7-bars-border-color); | |
| --f7-calendar-footer-link-color: var(--f7-bars-link-color); | |
| --f7-calendar-footer-text-color: var(--f7-bars-text-color); | |
| --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color); | |
| --f7-calendar-week-header-text-color: var(--f7-bars-text-color); | |
| */ | |
| --f7-calendar-prev-next-text-color: #b8b8b8; | |
| --f7-calendar-disabled-text-color: #d4d4d4; | |
| --f7-calendar-event-dot-size: 4px; | |
| /* | |
| --f7-calendar-event-bg-color: var(--f7-theme-color); | |
| */ | |
| } | |
| .ios { | |
| --f7-calendar-sheet-border-color: #929499; | |
| --f7-calendar-header-height: 44px; | |
| --f7-calendar-header-font-size: 17px; | |
| --f7-calendar-header-font-weight: 600; | |
| --f7-calendar-header-padding: 0 8px; | |
| --f7-calendar-footer-height: 44px; | |
| --f7-calendar-footer-font-size: 17px; | |
| --f7-calendar-footer-padding: 0 8px; | |
| --f7-calendar-week-header-height: 18px; | |
| --f7-calendar-week-header-font-size: 11px; | |
| --f7-calendar-row-border-color: #c4c4c4; | |
| --f7-calendar-day-font-size: 15px; | |
| --f7-calendar-day-text-color: #000; | |
| --f7-calendar-today-text-color: #000; | |
| --f7-calendar-today-bg-color: #e3e3e3; | |
| --f7-calendar-selected-text-color: #fff; | |
| /* | |
| --f7-calendar-selected-bg-color: var(--f7-theme-color); | |
| */ | |
| --f7-calendar-day-size: 30px; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-calendar-sheet-border-color: var(--f7-bars-border-color); | |
| --f7-calendar-row-border-color: var(--f7-bars-border-color); | |
| --f7-calendar-modal-bg-color: #171717; | |
| --f7-calendar-sheet-bg-color: #171717; | |
| --f7-calendar-day-text-color: #fff; | |
| --f7-calendar-today-text-color: #fff; | |
| --f7-calendar-today-bg-color: #333; | |
| } | |
| .md { | |
| --f7-calendar-sheet-border-color: #ccc; | |
| --f7-calendar-header-height: 56px; | |
| --f7-calendar-header-font-size: 20px; | |
| --f7-calendar-header-font-weight: 400; | |
| --f7-calendar-header-padding: 0 24px; | |
| --f7-calendar-footer-height: 48px; | |
| --f7-calendar-footer-font-size: 14px; | |
| --f7-calendar-footer-padding: 0 8px; | |
| --f7-calendar-week-header-height: 24px; | |
| --f7-calendar-week-header-font-size: 11px; | |
| --f7-calendar-row-border-color: transparent; | |
| --f7-calendar-day-font-size: 14px; | |
| --f7-calendar-day-text-color: #000; | |
| /* | |
| --f7-calendar-today-text-color: var(--f7-theme-color); | |
| */ | |
| --f7-calendar-today-bg-color: none; | |
| --f7-calendar-selected-text-color: #fff; | |
| /* | |
| --f7-calendar-selected-bg-color: var(--f7-theme-color); | |
| */ | |
| --f7-calendar-day-size: 32px; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-calendar-sheet-border-color: var(--f7-bars-border-color); | |
| --f7-calendar-modal-bg-color: #171717; | |
| --f7-calendar-sheet-bg-color: #171717; | |
| --f7-calendar-day-text-color: rgba(255, 255, 255, 0.87); | |
| } | |
| .calendar { | |
| overflow: hidden; | |
| height: var(--f7-calendar-height); | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .calendar.modal-in { | |
| display: flex; | |
| } | |
| @media (orientation: landscape) and (max-height: 415px) { | |
| .calendar.calendar-sheet { | |
| height: var(--f7-calendar-sheet-landscape-height); | |
| } | |
| .calendar.calendar-modal { | |
| height: calc(100vh - var(--f7-navbar-height)); | |
| } | |
| } | |
| .calendar.calendar-inline, | |
| .calendar.calendar-popover .calendar { | |
| position: relative; | |
| } | |
| .calendar-sheet { | |
| --f7-sheet-border-color: var(--f7-calendar-sheet-border-color); | |
| background: var(--f7-calendar-sheet-bg-color); | |
| } | |
| .calendar-sheet:before { | |
| z-index: 600; | |
| } | |
| .calendar-sheet .sheet-modal-inner { | |
| margin-bottom: var(--f7-safe-area-bottom); | |
| } | |
| .calendar-sheet .toolbar:before, | |
| .calendar-modal .toolbar:before, | |
| .calendar-popover .toolbar:before { | |
| display: none; | |
| } | |
| .calendar-popover { | |
| width: var(--f7-calendar-popover-width); | |
| } | |
| .calendar-popover .calendar { | |
| height: var(--f7-calendar-popover-height); | |
| border-radius: var(--f7-popover-border-radius); | |
| } | |
| .calendar-header { | |
| width: 100%; | |
| position: relative; | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| box-sizing: border-box; | |
| padding: var(--f7-calendar-header-padding); | |
| background-color: var(--f7-calendar-header-bg-color, var(--f7-bars-bg-color)); | |
| color: var(--f7-calendar-header-text-color, var(--f7-bars-text-color)); | |
| height: var(--f7-calendar-header-height); | |
| line-height: var(--f7-calendar-header-height); | |
| font-size: var(--f7-calendar-header-font-size); | |
| font-weight: var(--f7-calendar-header-font-weight); | |
| } | |
| .calendar-header a { | |
| color: var(--f7-calendar-header-link-color, var(--f7-bars-link-color, var(--f7-theme-color))); | |
| } | |
| .calendar-footer { | |
| width: 100%; | |
| flex-shrink: 0; | |
| padding: var(--f7-calendar-footer-padding); | |
| background-color: var(--f7-calendar-footer-bg-color, var(--f7-bars-bg-color)); | |
| color: var(--f7-calendar-footer-text-color, var(--f7-bars-text-color)); | |
| height: var(--f7-calendar-footer-height); | |
| font-size: var(--f7-calendar-header-font-size); | |
| display: flex; | |
| justify-content: flex-end; | |
| box-sizing: border-box; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .calendar-footer a { | |
| color: var(--f7-calendar-footer-link-color, var(--f7-bars-link-color, var(--f7-theme-color))); | |
| } | |
| .calendar-footer:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-calendar-footer-border-color, var(--f7-bars-border-color)); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .calendar-modal { | |
| position: absolute; | |
| height: var(--f7-calendar-modal-height); | |
| overflow: hidden; | |
| top: 50%; | |
| left: 50%; | |
| min-width: 300px; | |
| max-width: var(--f7-calendar-modal-max-width); | |
| transform: translate3d(-50%, 100%, 0); | |
| transition-property: transform; | |
| display: flex; | |
| z-index: 12000; | |
| background: var(--f7-calendar-modal-bg-color); | |
| width: 90%; | |
| border-radius: var(--f7-calendar-modal-border-radius); | |
| box-shadow: var(--f7-elevation-24); | |
| } | |
| .calendar-modal.modal-in, | |
| .calendar-modal.modal-out { | |
| transition-duration: 400ms; | |
| } | |
| .calendar-modal.modal-in { | |
| transform: translate3d(-50%, -50%, 0); | |
| } | |
| .calendar-modal.modal-out { | |
| transform: translate3d(-50%, 100%, 0); | |
| } | |
| .calendar-week-header { | |
| display: flex; | |
| box-sizing: border-box; | |
| position: relative; | |
| font-size: var(--f7-calendar-week-header-font-size); | |
| background-color: var(--f7-calendar-week-header-bg-color, var(--f7-bars-bg-color)); | |
| color: var(--f7-calendar-week-header-text-color, var(--f7-bars-text-color)); | |
| height: var(--f7-calendar-week-header-height); | |
| padding-left: var(--f7-safe-area-left); | |
| padding-right: var(--f7-safe-area-right); | |
| } | |
| .calendar-week-header .calendar-week-day { | |
| flex-shrink: 1; | |
| width: calc(100% / 7); | |
| text-align: center; | |
| line-height: var(--f7-calendar-week-header-height); | |
| } | |
| .calendar-months { | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| position: relative; | |
| flex-shrink: 10; | |
| } | |
| .calendar-months-wrapper { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transition: 300ms; | |
| } | |
| .calendar-month { | |
| display: flex; | |
| flex-direction: column; | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| } | |
| .calendar-row { | |
| height: 16.66666667%; | |
| height: calc(100% / 6); | |
| display: flex; | |
| flex-shrink: 1; | |
| width: 100%; | |
| position: relative; | |
| box-sizing: border-box; | |
| padding-left: var(--f7-safe-area-left); | |
| padding-right: var(--f7-safe-area-right); | |
| } | |
| .calendar-row:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-calendar-row-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .calendar-modal .calendar-months:first-child .calendar-row:first-child:before, | |
| .calendar-popover .calendar-months:first-child .calendar-row:first-child:before { | |
| display: none !important; | |
| } | |
| .calendar-day { | |
| flex-shrink: 1; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| box-sizing: border-box; | |
| width: 14.28571429%; | |
| width: calc(100% / 7); | |
| text-align: center; | |
| cursor: pointer; | |
| z-index: 20; | |
| color: var(--f7-calendar-day-text-color); | |
| height: 100%; | |
| font-size: var(--f7-calendar-day-font-size); | |
| } | |
| .calendar-day.calendar-day-today .calendar-day-number { | |
| color: var(--f7-calendar-today-text-color, var(--f7-theme-color)); | |
| background-color: var(--f7-calendar-today-bg-color); | |
| } | |
| .calendar-day.calendar-day-prev, | |
| .calendar-day.calendar-day-next { | |
| color: var(--f7-calendar-prev-next-text-color); | |
| } | |
| .calendar-day.calendar-day-disabled { | |
| color: var(--f7-calendar-disabled-text-color); | |
| cursor: auto; | |
| } | |
| .calendar-day.calendar-day-selected .calendar-day-number { | |
| color: var(--f7-calendar-selected-text-color); | |
| background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color)); | |
| } | |
| .calendar-day .calendar-day-number { | |
| display: inline-block; | |
| border-radius: 50%; | |
| position: relative; | |
| width: var(--f7-calendar-day-size); | |
| height: var(--f7-calendar-day-size); | |
| line-height: var(--f7-calendar-day-size); | |
| } | |
| .calendar-day .calendar-day-events { | |
| position: absolute; | |
| display: flex; | |
| left: 0; | |
| width: 100%; | |
| top: 100%; | |
| align-items: center; | |
| justify-content: center; | |
| margin-top: 1px; | |
| } | |
| .calendar-day .calendar-day-event { | |
| width: var(--f7-calendar-event-dot-size); | |
| height: var(--f7-calendar-event-dot-size); | |
| border-radius: calc(var(--f7-calendar-event-dot-size) / 2); | |
| background-color: var(--f7-calendar-event-bg-color); | |
| } | |
| .calendar-day .calendar-day-event + .calendar-day-event { | |
| margin-left: 2px; | |
| } | |
| .calendar-range .calendar-day.calendar-day-selected { | |
| align-items: stretch; | |
| align-content: stretch; | |
| } | |
| .calendar-range .calendar-day.calendar-day-selected .calendar-day-number { | |
| width: 100%; | |
| border-radius: 0; | |
| height: auto; | |
| text-align: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .calendar-month-selector, | |
| .calendar-year-selector { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| width: 50%; | |
| max-width: 200px; | |
| flex-shrink: 10; | |
| } | |
| .calendar-month-selector .calendar-day-number, | |
| .calendar-year-selector .calendar-day-number { | |
| flex-shrink: 1; | |
| position: relative; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .calendar-month-selector a.icon-only, | |
| .calendar-year-selector a.icon-only { | |
| min-width: 36px; | |
| } | |
| /* === Picker === */ | |
| :root { | |
| --f7-picker-height: 260px; | |
| --f7-picker-inline-height: 200px; | |
| --f7-picker-popover-height: 200px; | |
| --f7-picker-popover-width: 280px; | |
| --f7-picker-landscape-height: 200px; | |
| --f7-picker-item-height: 36px; | |
| } | |
| .ios { | |
| --f7-picker-column-font-size: 24px; | |
| --f7-picker-divider-text-color: #000; | |
| --f7-picker-item-text-color: #707274; | |
| --f7-picker-item-selected-text-color: #000; | |
| --f7-picker-item-selected-border-color: #a8abb0; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-picker-divider-text-color: #fff; | |
| --f7-picker-item-selected-text-color: #fff; | |
| --f7-picker-item-selected-border-color: #282829; | |
| } | |
| .md { | |
| --f7-picker-column-font-size: 20px; | |
| --f7-picker-divider-text-color: rgba(0, 0, 0, 0.87); | |
| --f7-picker-item-text-color: inherit; | |
| --f7-picker-item-selected-text-color: inherit; | |
| --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.15); | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-picker-divider-text-color: rgba(255, 255, 255, 0.87); | |
| --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.15); | |
| } | |
| .picker { | |
| width: 100%; | |
| height: var(--f7-picker-height); | |
| } | |
| .picker.picker-inline { | |
| height: var(--f7-picker-inline-height); | |
| } | |
| .popover .picker { | |
| height: var(--f7-picker-popover-height); | |
| } | |
| @media (orientation: landscape) and (max-height: 415px) { | |
| .picker:not(.picker-inline) { | |
| height: var(--f7-picker-landscape-height); | |
| } | |
| } | |
| .picker-popover { | |
| width: var(--f7-picker-popover-width); | |
| } | |
| .picker-popover .toolbar { | |
| background: none; | |
| border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0; | |
| } | |
| .picker-popover .toolbar:before { | |
| display: none !important; | |
| } | |
| .picker-popover .toolbar + .picker-columns { | |
| height: calc(100% - var(--f7-toolbar-height)); | |
| } | |
| .picker-columns { | |
| display: flex; | |
| overflow: hidden; | |
| justify-content: center; | |
| padding: 0; | |
| text-align: right; | |
| height: 100%; | |
| position: relative; | |
| -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); | |
| font-size: var(--f7-picker-column-font-size); | |
| } | |
| .picker-column { | |
| position: relative; | |
| max-height: 100%; | |
| } | |
| .picker-column.picker-column-first:before, | |
| .picker-column.picker-column-last:after { | |
| height: 100%; | |
| width: 100vw; | |
| position: absolute; | |
| content: ''; | |
| top: 0; | |
| } | |
| .picker-column.picker-column-first:before { | |
| right: 100%; | |
| } | |
| .picker-column.picker-column-last:after { | |
| left: 100%; | |
| } | |
| .picker-column.picker-column-left { | |
| text-align: left; | |
| } | |
| .picker-column.picker-column-center { | |
| text-align: center; | |
| } | |
| .picker-column.picker-column-right { | |
| text-align: right; | |
| } | |
| .picker-column.picker-column-divider { | |
| display: flex; | |
| align-items: center; | |
| color: var(--f7-picker-divider-text-color); | |
| } | |
| .picker-items { | |
| transition: 300ms; | |
| transition-timing-function: ease-out; | |
| } | |
| .picker-item { | |
| height: var(--f7-picker-item-height); | |
| line-height: var(--f7-picker-item-height); | |
| white-space: nowrap; | |
| position: relative; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| box-sizing: border-box; | |
| transition: 300ms; | |
| color: var(--f7-picker-item-text-color); | |
| } | |
| .picker-item span { | |
| padding: 0 10px; | |
| } | |
| .picker-column-absolute .picker-item { | |
| position: absolute; | |
| } | |
| .picker-item.picker-item-far { | |
| pointer-events: none; | |
| } | |
| .picker-item.picker-item-selected { | |
| color: var(--f7-picker-item-selected-text-color); | |
| transform: translate3d(0, 0, 0) rotateX(0deg); | |
| } | |
| .picker-center-highlight { | |
| height: var(--f7-picker-item-height); | |
| box-sizing: border-box; | |
| position: absolute; | |
| left: 0; | |
| width: 100%; | |
| top: 50%; | |
| margin-top: calc(-1 * var(--f7-picker-item-height) / 2); | |
| pointer-events: none; | |
| } | |
| .picker-center-highlight:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-picker-item-selected-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .picker-center-highlight:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-picker-item-selected-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .picker-3d .picker-columns { | |
| overflow: hidden; | |
| perspective: 1200px; | |
| } | |
| .picker-3d .picker-column, | |
| .picker-3d .picker-items, | |
| .picker-3d .picker-item { | |
| transform-style: preserve-3d; | |
| } | |
| .picker-3d .picker-column { | |
| overflow: visible; | |
| } | |
| .picker-3d .picker-item { | |
| transform-origin: center center -110px; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| transition-timing-function: ease-out; | |
| } | |
| /* === Infinite === */ | |
| .infinite-scroll-preloader { | |
| margin-left: auto; | |
| margin-right: auto; | |
| text-align: center; | |
| } | |
| .infinite-scroll-preloader.preloader { | |
| display: block; | |
| } | |
| .ios .infinite-scroll-preloader { | |
| margin-top: 35px; | |
| margin-bottom: 35px; | |
| } | |
| .ios .infinite-scroll-preloader .preloader, | |
| .ios .infinite-scroll-preloader.preloader { | |
| width: 27px; | |
| height: 27px; | |
| } | |
| .md .infinite-scroll-preloader { | |
| margin-top: 32px; | |
| margin-bottom: 32px; | |
| } | |
| /* === PTR === */ | |
| .ios { | |
| --f7-ptr-preloader-size: 20px; | |
| --f7-ptr-size: 44px; | |
| } | |
| .md { | |
| --f7-ptr-preloader-size: 22px; | |
| --f7-ptr-size: 40px; | |
| } | |
| .ptr-preloader { | |
| position: relative; | |
| top: var(--f7-ptr-top, 0); | |
| height: var(--f7-ptr-size); | |
| } | |
| .ptr-preloader .preloader { | |
| position: absolute; | |
| left: 50%; | |
| width: var(--f7-ptr-preloader-size); | |
| height: var(--f7-ptr-preloader-size); | |
| margin-left: calc(-1 * var(--f7-ptr-preloader-size) / 2); | |
| margin-top: calc(-1 * var(--f7-ptr-preloader-size) / 2); | |
| top: 50%; | |
| visibility: hidden; | |
| } | |
| .ptr-bottom .ptr-preloader { | |
| top: auto; | |
| bottom: 0; | |
| position: fixed; | |
| } | |
| .ios .ptr-preloader { | |
| margin-top: calc(-1 * var(--f7-ptr-size)); | |
| width: 100%; | |
| left: 0; | |
| } | |
| .ios .ptr-arrow { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| background: no-repeat center; | |
| z-index: 10; | |
| transform: rotate(0deg) translate3d(0, 0, 0); | |
| transition-duration: 300ms; | |
| transition-property: transform; | |
| width: 12px; | |
| height: 20px; | |
| margin-left: -6px; | |
| margin-top: -10px; | |
| visibility: visible; | |
| color: var(--f7-preloader-color); | |
| } | |
| .ios .ptr-arrow:after { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 20px; | |
| width: 12px; | |
| height: 20px; | |
| line-height: 20px; | |
| font-size: 10px; | |
| content: 'ptr_arrow_ios'; | |
| } | |
| .ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader { | |
| animation: none; | |
| } | |
| .ios .ptr-transitioning, | |
| .ios .ptr-refreshing { | |
| transition-duration: 300ms; | |
| transition-property: transform; | |
| } | |
| .ios .ptr-refreshing { | |
| transform: translate3d(0, var(--f7-ptr-size), 0); | |
| } | |
| .ios .ptr-refreshing .ptr-arrow { | |
| visibility: hidden; | |
| } | |
| .ios .ptr-refreshing .ptr-preloader .preloader { | |
| visibility: visible; | |
| } | |
| .ios .ptr-pull-up .ptr-arrow { | |
| transform: rotate(180deg) translate3d(0, 0, 0); | |
| } | |
| .ios .ptr-no-navbar { | |
| margin-top: calc(-1 * var(--f7-ptr-size)); | |
| height: calc(100% + var(--f7-ptr-size)); | |
| } | |
| .ios .ptr-no-navbar .ptr-preloader { | |
| margin-top: 0; | |
| } | |
| .ios .ptr-bottom .ptr-preloader { | |
| margin-top: 0; | |
| margin-bottom: calc(-1 * var(--f7-ptr-size)); | |
| } | |
| .ios .ptr-bottom.ptr-transitioning > *, | |
| .ios .ptr-bottom.ptr-refreshing > * { | |
| transition-duration: 300ms; | |
| transition-property: transform; | |
| } | |
| .ios .ptr-bottom.ptr-refreshing { | |
| transform: none; | |
| } | |
| .ios .ptr-bottom.ptr-refreshing > * { | |
| transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0); | |
| } | |
| .ios .ptr-bottom .ptr-arrow { | |
| transform: rotate(180deg) translate3d(0, 0, 0); | |
| } | |
| .ios .ptr-bottom.ptr-pull-up .ptr-arrow { | |
| transform: rotate(0deg) translate3d(0, 0, 0); | |
| } | |
| .md { | |
| --f7-ptr-top: -4px; | |
| } | |
| .md .ptr-preloader { | |
| left: 50%; | |
| width: var(--f7-ptr-size); | |
| border-radius: 50%; | |
| background: #fff; | |
| margin-left: calc(-1 * var(--f7-ptr-size) / 2); | |
| margin-top: calc(-1 * var(--f7-ptr-size)); | |
| z-index: 100; | |
| box-shadow: var(--f7-elevation-1); | |
| } | |
| .md .ptr-preloader .preloader .preloader-inner-gap, | |
| .md .ptr-preloader .preloader .preloader-inner-half-circle { | |
| border-width: 3px; | |
| } | |
| .md .ptr-arrow { | |
| width: 22px; | |
| height: 22px; | |
| box-sizing: border-box; | |
| border: 3px solid var(--f7-preloader-color); | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| margin-left: -11px; | |
| margin-top: -11px; | |
| border-left-color: transparent; | |
| border-radius: 50%; | |
| opacity: 1; | |
| transform: rotate(150deg); | |
| } | |
| .md .ptr-arrow:after { | |
| content: ''; | |
| width: 0px; | |
| height: 0px; | |
| position: absolute; | |
| left: -5px; | |
| bottom: 0px; | |
| border-bottom-width: 6px; | |
| border-bottom-style: solid; | |
| border-bottom-color: inherit; | |
| border-left: 5px solid transparent; | |
| border-right: 5px solid transparent; | |
| transform: rotate(-40deg); | |
| } | |
| .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader, | |
| .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader * { | |
| animation: none; | |
| } | |
| .md .ptr-refreshing .ptr-preloader .preloader, | |
| .md .ptr-pull-up .ptr-preloader .preloader { | |
| visibility: visible; | |
| } | |
| .md .ptr-refreshing .ptr-arrow, | |
| .md .ptr-pull-up .ptr-arrow { | |
| visibility: hidden; | |
| } | |
| .md .ptr-refreshing .ptr-preloader { | |
| transform: translate3d(0, 66px, 0); | |
| } | |
| .md .ptr-transitioning .ptr-arrow { | |
| transition: 300ms; | |
| } | |
| .md .ptr-pull-up .ptr-arrow { | |
| transition: 400ms; | |
| transform: rotate(620deg) !important; | |
| opacity: 0; | |
| } | |
| .md .ptr-transitioning .ptr-preloader, | |
| .md .ptr-refreshing .ptr-preloader { | |
| transition-duration: 300ms; | |
| transition-property: transform; | |
| } | |
| .md .ptr-bottom .ptr-preloader { | |
| margin-top: 0; | |
| margin-bottom: calc(-1 * var(--f7-ptr-size) - 4px); | |
| } | |
| .md .ptr-bottom.ptr-refreshing .ptr-preloader { | |
| transform: translate3d(0, -66px, 0); | |
| } | |
| /* === Images Lazy Loading === */ | |
| .lazy-loaded.lazy-fade-in { | |
| animation: lazyFadeIn 600ms; | |
| } | |
| @keyframes lazyFadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| /* === Data Table === */ | |
| :root { | |
| --f7-table-head-font-size: 12px; | |
| --f7-table-body-font-size: 14px; | |
| --f7-table-footer-font-size: 12px; | |
| --f7-table-input-height: 24px; | |
| --f7-table-input-font-size: 14px; | |
| --f7-table-collapsible-cell-padding: 15px; | |
| } | |
| .ios { | |
| --f7-table-head-font-weight: 600; | |
| --f7-table-head-text-color: #8e8e93; | |
| --f7-table-head-cell-height: 44px; | |
| --f7-table-head-icon-size: 18px; | |
| --f7-table-body-cell-height: 44px; | |
| --f7-table-cell-border-color: #c8c7cc; | |
| --f7-table-cell-padding-vertical: 0px; | |
| --f7-table-cell-padding-horizontal: 15px; | |
| --f7-table-edge-cell-padding-horizontal: 15px; | |
| --f7-table-label-cell-padding-horizontal: 15px; | |
| --f7-table-checkbox-cell-width: 22px; | |
| /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */ | |
| --f7-table-selected-row-bg-color: #f7f7f8; | |
| /* --f7-table-actions-link-color: var(--f7-theme-color); */ | |
| --f7-table-title-font-size: 17px; | |
| --f7-table-title-font-weight: 600; | |
| --f7-table-card-header-height: 64px; | |
| --f7-table-footer-height: 44px; | |
| --f7-table-footer-text-color: #8e8e93; | |
| --f7-table-sortable-icon-color: #000; | |
| --f7-table-input-text-color: #000; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-table-cell-border-color: #282829; | |
| --f7-table-selected-row-bg-color: #363636; | |
| --f7-table-sortable-icon-color: #fff; | |
| --f7-table-input-text-color: #fff; | |
| } | |
| .md { | |
| --f7-table-head-font-weight: 500; | |
| --f7-table-head-text-color: rgba(0, 0, 0, 0.54); | |
| --f7-table-head-cell-height: 56px; | |
| --f7-table-head-icon-size: 16px; | |
| --f7-table-body-cell-height: 48px; | |
| --f7-table-cell-border-color: rgba(0, 0, 0, 0.12); | |
| --f7-table-cell-padding-vertical: 0px; | |
| --f7-table-cell-padding-horizontal: 28px; | |
| --f7-table-edge-cell-padding-horizontal: 24px; | |
| --f7-table-label-cell-padding-horizontal: 24px; | |
| --f7-table-checkbox-cell-width: 18px; | |
| --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54); | |
| --f7-table-selected-row-bg-color: #f5f5f5; | |
| --f7-table-actions-link-color: rgba(0, 0, 0, 0.54); | |
| --f7-table-title-font-size: 20px; | |
| --f7-table-title-font-weight: 400; | |
| --f7-table-card-header-height: 64px; | |
| --f7-table-footer-height: 56px; | |
| --f7-table-footer-text-color: rgba(0, 0, 0, 0.54); | |
| --f7-table-sortable-icon-color: #000; | |
| --f7-table-input-text-color: #212121; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-table-head-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-table-footer-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-table-cell-border-color: #282829; | |
| --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05); | |
| --f7-table-sortable-icon-color: #fff; | |
| --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54); | |
| --f7-table-actions-link-color: rgba(255, 255, 255, 0.54); | |
| --f7-table-input-text-color: #fff; | |
| } | |
| .data-table { | |
| overflow-x: auto; | |
| } | |
| .data-table table { | |
| width: 100%; | |
| border: none; | |
| padding: 0; | |
| margin: 0; | |
| border-collapse: collapse; | |
| text-align: left; | |
| } | |
| .data-table thead th, | |
| .data-table thead td { | |
| font-size: var(--f7-table-head-font-size); | |
| font-weight: var(--f7-table-head-font-weight); | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| line-height: 16px; | |
| height: var(--f7-table-head-cell-height); | |
| } | |
| .data-table thead th:not(.sortable-cell-active), | |
| .data-table thead td:not(.sortable-cell-active) { | |
| color: var(--f7-table-head-text-color); | |
| } | |
| .data-table thead i.icon, | |
| .data-table thead i.f7-icons, | |
| .data-table thead i.material-icons { | |
| vertical-align: top; | |
| font-size: var(--f7-table-head-icon-size); | |
| width: var(--f7-table-head-icon-size); | |
| height: var(--f7-table-head-icon-size); | |
| } | |
| .data-table tbody { | |
| font-size: var(--f7-table-body-font-size); | |
| } | |
| .data-table tbody th, | |
| .data-table tbody td { | |
| height: var(--f7-table-body-cell-height); | |
| } | |
| .data-table tbody tr.data-table-row-selected, | |
| .device-desktop .data-table tbody tr:hover { | |
| background: var(--f7-table-selected-row-bg-color); | |
| } | |
| .data-table tbody td:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-table-cell-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .data-table th, | |
| .data-table td { | |
| --f7-table-cell-padding-left: var(--f7-table-cell-padding-horizontal); | |
| --f7-table-cell-padding-right: var(--f7-table-cell-padding-horizontal); | |
| padding-top: var(--f7-table-cell-padding-vertical); | |
| padding-bottom: var(--f7-table-cell-padding-vertical); | |
| padding-left: var(--f7-table-cell-padding-left); | |
| padding-right: var(--f7-table-cell-padding-right); | |
| position: relative; | |
| box-sizing: border-box; | |
| } | |
| .data-table th:first-child, | |
| .data-table td:first-child { | |
| --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal); | |
| } | |
| .data-table th:last-child, | |
| .data-table td:last-child { | |
| --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal); | |
| } | |
| .data-table th.label-cell, | |
| .data-table td.label-cell { | |
| --f7-table-cell-padding-left: var(--f7-table-label-cell-padding-horizontal); | |
| --f7-table-cell-padding-right: var(--f7-table-label-cell-padding-horizontal); | |
| } | |
| .data-table th.numeric-cell, | |
| .data-table td.numeric-cell { | |
| text-align: right; | |
| } | |
| .data-table th.checkbox-cell, | |
| .data-table td.checkbox-cell { | |
| overflow: visible; | |
| width: var(--f7-table-checkbox-cell-width); | |
| } | |
| .data-table th.checkbox-cell label + span, | |
| .data-table td.checkbox-cell label + span { | |
| margin-left: 8px; | |
| } | |
| .data-table th.checkbox-cell:first-child, | |
| .data-table td.checkbox-cell:first-child { | |
| padding-right: calc(var(--f7-table-cell-padding-right) / 2); | |
| } | |
| .data-table th.checkbox-cell:first-child + td, | |
| .data-table td.checkbox-cell:first-child + td, | |
| .data-table th.checkbox-cell:first-child + th, | |
| .data-table td.checkbox-cell:first-child + th { | |
| padding-left: calc(var(--f7-table-cell-padding-left) / 2); | |
| } | |
| .data-table th.checkbox-cell:last-child, | |
| .data-table td.checkbox-cell:last-child { | |
| padding-left: calc(var(--f7-table-cell-padding-left) / 2); | |
| } | |
| .data-table th.actions-cell, | |
| .data-table td.actions-cell { | |
| text-align: right; | |
| white-space: nowrap; | |
| } | |
| .data-table th.actions-cell a.link, | |
| .data-table td.actions-cell a.link { | |
| color: var(--f7-table-actions-cell-link-color, var(--f7-theme-color)); | |
| } | |
| .data-table th a.icon-only, | |
| .data-table td a.icon-only, | |
| .card .data-table th a.icon-only, | |
| .card .data-table td a.icon-only, | |
| .card.data-table th a.icon-only, | |
| .card.data-table td a.icon-only { | |
| display: inline-block; | |
| vertical-align: middle; | |
| text-align: center; | |
| font-size: 0; | |
| min-width: 0; | |
| } | |
| .data-table th a.icon-only i, | |
| .data-table td a.icon-only i, | |
| .card .data-table th a.icon-only i, | |
| .card .data-table td a.icon-only i, | |
| .card.data-table th a.icon-only i, | |
| .card.data-table td a.icon-only i { | |
| font-size: 20px; | |
| vertical-align: middle; | |
| } | |
| .data-table .sortable-cell:not(.input-cell) { | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .data-table .sortable-cell.input-cell .table-head-label { | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after, | |
| .data-table .sortable-cell.numeric-cell:not(.input-cell):before, | |
| .data-table .sortable-cell:not(.numeric-cell).input-cell > .table-head-label:after, | |
| .data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before { | |
| content: 'arrow_bottom_md'; | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 20px; | |
| display: inline-block; | |
| vertical-align: top; | |
| width: 16px; | |
| height: 16px; | |
| color: var(--f7-table-sortable-icon-color); | |
| font-size: 13px; | |
| line-height: 16px; | |
| transition-duration: 300ms; | |
| transform: rotate(0); | |
| opacity: 0; | |
| } | |
| .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after, | |
| .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after, | |
| .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before, | |
| .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before { | |
| opacity: 0.54; | |
| } | |
| .data-table .sortable-cell.sortable-cell-active:after, | |
| .data-table .sortable-cell.sortable-cell-active .table-head-label:after, | |
| .data-table .sortable-cell.sortable-cell-active:before, | |
| .data-table .sortable-cell.sortable-cell-active .table-head-label:before { | |
| opacity: 0.87 !important; | |
| } | |
| .data-table .sortable-cell.sortable-desc:after, | |
| .data-table .sortable-cell.sortable-desc:after, | |
| .data-table .table-head-label:after, | |
| .data-table .sortable-cell.sortable-desc:before, | |
| .data-table .sortable-cell.sortable-desc:before, | |
| .data-table .table-head-label:before { | |
| transform: rotate(180deg) !important; | |
| } | |
| .data-table.card .card-header, | |
| .card .data-table .card-header, | |
| .data-table.card .card-footer, | |
| .card .data-table .card-footer { | |
| padding-left: var(--f7-table-edge-cell-padding-horizontal); | |
| padding-right: var(--f7-table-edge-cell-padding-horizontal); | |
| } | |
| .data-table.card .card-header, | |
| .card .data-table .card-header { | |
| height: var(--f7-table-card-header-height); | |
| } | |
| .data-table.card .card-content, | |
| .card .data-table .card-content { | |
| overflow-x: auto; | |
| } | |
| .data-table.card .card-footer, | |
| .card .data-table .card-footer { | |
| height: var(--f7-table-footer-height); | |
| } | |
| .data-table .data-table-title { | |
| font-size: var(--f7-table-title-font-size); | |
| font-weight: var(--f7-table-title-font-weight); | |
| } | |
| .data-table .data-table-links, | |
| .data-table .data-table-actions { | |
| display: flex; | |
| } | |
| .data-table .data-table-links .button { | |
| min-width: 64px; | |
| } | |
| .data-table .data-table-actions { | |
| margin-left: auto; | |
| align-items: center; | |
| } | |
| .data-table .data-table-actions a.link { | |
| color: var(--f7-table-actions-link-color, var(--f7-theme-color)); | |
| min-width: 0; | |
| } | |
| .data-table .data-table-actions a.link.icon-only { | |
| line-height: 1; | |
| justify-content: center; | |
| padding: 0; | |
| } | |
| .data-table .data-table-header, | |
| .data-table .data-table-header-selected { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| width: 100%; | |
| } | |
| .data-table .card-header > .data-table-header, | |
| .data-table .card-header > .data-table-header-selected { | |
| padding-top: var(--f7-card-header-padding-vertical); | |
| padding-bottom: var(--f7-card-header-padding-vertical); | |
| height: 100%; | |
| padding-left: var(--f7-table-edge-cell-padding-horizontal); | |
| padding-right: var(--f7-table-edge-cell-padding-horizontal); | |
| margin-left: calc(-1 * var(--f7-table-edge-cell-padding-horizontal)); | |
| margin-right: calc(-1 * var(--f7-table-edge-cell-padding-horizontal)); | |
| } | |
| .data-table .data-table-header-selected { | |
| background: rgba(var(--f7-theme-color-rgb), 0.1); | |
| display: none; | |
| } | |
| .data-table.data-table-has-checked .data-table-header { | |
| display: none; | |
| } | |
| .data-table.data-table-has-checked .data-table-header-selected { | |
| display: flex; | |
| } | |
| .data-table .data-table-title-selected { | |
| font-size: 14px; | |
| color: var(--f7-theme-color); | |
| } | |
| .data-table .data-table-footer { | |
| display: flex; | |
| align-items: center; | |
| box-sizing: border-box; | |
| position: relative; | |
| font-size: var(--f7-table-footer-font-size); | |
| overflow: hidden; | |
| height: var(--f7-table-footer-height); | |
| color: var(--f7-table-footer-text-color); | |
| justify-content: flex-end; | |
| } | |
| .data-table .data-table-footer:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-table-cell-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .data-table .data-table-rows-select, | |
| .data-table .data-table-pagination { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .data-table .input-cell { | |
| padding-top: 8px; | |
| padding-bottom: 8px; | |
| height: auto; | |
| vertical-align: top; | |
| } | |
| .data-table .input-cell .table-head-label + .input { | |
| margin-top: 4px; | |
| } | |
| .data-table .input-cell .input { | |
| height: var(--f7-table-input-height); | |
| } | |
| .data-table .input-cell .input input, | |
| .data-table .input-cell .input textarea, | |
| .data-table .input-cell .input select { | |
| height: var(--f7-table-input-height); | |
| color: var(--f7-table-input-text-color); | |
| font-size: var(--f7-table-input-font-size); | |
| } | |
| @media (max-width: 480px) and (orientation: portrait) { | |
| .data-table.data-table-collapsible thead { | |
| display: none; | |
| } | |
| .data-table.data-table-collapsible tbody, | |
| .data-table.data-table-collapsible tr, | |
| .data-table.data-table-collapsible td { | |
| display: block; | |
| } | |
| .data-table.data-table-collapsible tr { | |
| position: relative; | |
| } | |
| .data-table.data-table-collapsible tr:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-table-cell-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .data-table.data-table-collapsible tr:hover { | |
| background-color: inherit; | |
| } | |
| .data-table.data-table-collapsible td { | |
| --f7-table-cell-padding-left: var(--f7-table-collapsible-cell-padding); | |
| --f7-table-cell-padding-right: var(--f7-table-collapsible-cell-padding); | |
| display: flex; | |
| align-content: center; | |
| align-items: center; | |
| justify-content: flex-start; | |
| text-align: left; | |
| } | |
| .data-table.data-table-collapsible td:before { | |
| display: none !important; | |
| } | |
| .data-table.data-table-collapsible td:not(.checkbox-cell):before { | |
| width: 40%; | |
| display: block !important; | |
| content: attr(data-collapsible-title); | |
| position: relative; | |
| height: auto; | |
| background: none !important; | |
| transform: none !important; | |
| font-size: var(--f7-table-head-font-size); | |
| font-weight: var(--f7-table-head-font-weight); | |
| color: var(--f7-table-head-text-color); | |
| margin-right: 16px; | |
| flex-shrink: 0; | |
| } | |
| .data-table.data-table-collapsible td.checkbox-cell { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .data-table.data-table-collapsible td.checkbox-cell + td { | |
| padding-left: 16px; | |
| } | |
| .data-table.data-table-collapsible td.checkbox-cell ~ td { | |
| margin-left: 32px; | |
| } | |
| } | |
| .data-table .tablet-only, | |
| .data-table .tablet-landscape-only { | |
| display: none; | |
| } | |
| @media (min-width: 768px) { | |
| .data-table .tablet-only { | |
| display: table-cell; | |
| } | |
| } | |
| @media (min-width: 768px) and (orientation: landscape) { | |
| .data-table .tablet-landscape-only { | |
| display: table-cell; | |
| } | |
| } | |
| .ios .data-table th.actions-cell a.link + a.link, | |
| .ios .data-table td.actions-cell a.link + a.link { | |
| margin-left: 15px; | |
| } | |
| .ios .sortable-cell:not(.numeric-cell):after { | |
| margin-left: 5px; | |
| } | |
| .ios .sortable-cell.numeric-cell:before { | |
| margin-right: 5px; | |
| } | |
| .ios .data-table-links a.link + a.link, | |
| .ios .data-table-actions a.link + a.link, | |
| .ios .data-table-links .button + .button, | |
| .ios .data-table-actions .button + .button { | |
| margin-left: 15px; | |
| } | |
| .ios .data-table-actions a.link.icon-only { | |
| width: 44px; | |
| height: 44px; | |
| } | |
| .ios .data-table-rows-select a.link, | |
| .ios .data-table-pagination a.link { | |
| width: 44px; | |
| height: 44px; | |
| } | |
| .ios .data-table-rows-select + .data-table-pagination { | |
| margin-left: 30px; | |
| } | |
| .ios .data-table-rows-select .input { | |
| margin-left: 20px; | |
| } | |
| .ios .data-table-pagination-label { | |
| margin-right: 15px; | |
| } | |
| .md .data-table th.actions-cell a.link + a.link, | |
| .md .data-table td.actions-cell a.link + a.link { | |
| margin-left: 24px; | |
| } | |
| .md .data-table th.actions-cell a.icon-only, | |
| .md .data-table td.actions-cell a.icon-only { | |
| width: 24px; | |
| height: 24px; | |
| line-height: 24px; | |
| } | |
| .md .sortable-cell:not(.numeric-cell):after { | |
| margin-left: 8px; | |
| } | |
| .md .sortable-cell.numeric-cell:before { | |
| margin-right: 8px; | |
| } | |
| .md .data-table-links a.link + a.link, | |
| .md .data-table-actions a.link + a.link, | |
| .md .data-table-links .button + .button, | |
| .md .data-table-actions .button + .button { | |
| margin-left: 24px; | |
| } | |
| .md .data-table-actions a.link.icon-only { | |
| width: 24px; | |
| height: 24px; | |
| overflow: visible; | |
| } | |
| .md .data-table-actions a.link.icon-only.active-state { | |
| background: none; | |
| } | |
| .md .data-table-rows-select a.link, | |
| .md .data-table-pagination a.link { | |
| width: 48px; | |
| height: 48px; | |
| } | |
| .md .data-table-rows-select a.link:before, | |
| .md .data-table-pagination a.link:before { | |
| content: ''; | |
| width: 152%; | |
| height: 152%; | |
| position: absolute; | |
| left: -26%; | |
| top: -26%; | |
| background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: 100% 100%; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition-duration: 600ms; | |
| } | |
| .md .data-table-rows-select a.link.active-state:before, | |
| .md .data-table-pagination a.link.active-state:before { | |
| opacity: 1; | |
| transition-duration: 150ms; | |
| } | |
| .md .data-table-rows-select + .data-table-pagination { | |
| margin-left: 32px; | |
| } | |
| .md .data-table-rows-select .input { | |
| margin-left: 24px; | |
| } | |
| .md .data-table-pagination-label { | |
| margin-right: 20px; | |
| } | |
| .md .input-cell .input-clear-button { | |
| transform: scale(0.8); | |
| } | |
| /* === FAB === */ | |
| :root { | |
| --f7-fab-text-color: #fff; | |
| --f7-fab-extended-text-font-size: 14px; | |
| --f7-fab-extended-text-padding: 0 20px; | |
| --f7-fab-label-bg-color: #fff; | |
| --f7-fab-label-text-color: #333; | |
| --f7-fab-label-border-radius: 4px; | |
| --f7-fab-label-padding: 4px 12px; | |
| --f7-fab-button-size: 40px; | |
| } | |
| .ios { | |
| --f7-fab-size: 50px; | |
| --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); | |
| --f7-fab-margin: 15px; | |
| --f7-fab-extended-size: 50px; | |
| --f7-fab-extended-text-font-weight: 400; | |
| --f7-fab-extended-text-letter-spacing: 0; | |
| --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); | |
| /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */ | |
| } | |
| .md { | |
| --f7-fab-size: 56px; | |
| --f7-fab-box-shadow: var(--f7-elevation-6); | |
| --f7-fab-margin: 16px; | |
| --f7-fab-extended-size: 48px; | |
| --f7-fab-extended-text-font-weight: 500; | |
| --f7-fab-extended-text-letter-spacing: 0.03em; | |
| --f7-fab-label-box-shadow: var(--f7-elevation-3); | |
| /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */ | |
| } | |
| .fab { | |
| position: absolute; | |
| z-index: 1500; | |
| } | |
| .fab a { | |
| --f7-touch-ripple-color: var(--f7-touch-ripple-white); | |
| } | |
| .fab[class*="fab-left"] { | |
| left: calc(var(--f7-fab-margin) + var(--f7-safe-area-left)); | |
| } | |
| .fab[class*="fab-right"] { | |
| right: calc(var(--f7-fab-margin) + var(--f7-safe-area-right)); | |
| } | |
| .fab[class*="-top"] { | |
| top: var(--f7-fab-margin); | |
| } | |
| .fab[class*="-bottom"] { | |
| bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom)); | |
| } | |
| .fab[class*="fab-center"] { | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .fab[class*="left-center"], | |
| .fab[class*="right-center"] { | |
| top: 50%; | |
| transform: translateY(-50%); | |
| } | |
| .fab[class*="center-center"] { | |
| top: 50%; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-50%); | |
| } | |
| .fab > a, | |
| .fab-buttons a { | |
| background-color: var(--f7-fab-bg-color, var(--f7-theme-color)); | |
| width: var(--f7-fab-size); | |
| height: var(--f7-fab-size); | |
| box-shadow: var(--f7-fab-box-shadow); | |
| border-radius: calc(var(--f7-fab-size) / 2); | |
| position: relative; | |
| transition-duration: 300ms; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| z-index: 1; | |
| color: var(--f7-fab-text-color); | |
| } | |
| .fab > a.active-state, | |
| .fab-buttons a.active-state { | |
| background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade)); | |
| } | |
| .fab > a i { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); | |
| transition: 300ms; | |
| } | |
| .fab > a i + i { | |
| transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5); | |
| opacity: 0; | |
| } | |
| .fab-buttons a { | |
| border-radius: calc(var(--f7-fab-button-size) / 2); | |
| width: var(--f7-fab-button-size); | |
| height: var(--f7-fab-button-size); | |
| } | |
| .fab-buttons { | |
| display: flex; | |
| visibility: hidden; | |
| pointer-events: none; | |
| position: absolute; | |
| } | |
| .fab-buttons a { | |
| opacity: 0; | |
| } | |
| .fab-opened:not(.fab-morph) > a i { | |
| transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5); | |
| opacity: 0; | |
| } | |
| .fab-opened:not(.fab-morph) > a i + i { | |
| transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); | |
| opacity: 1; | |
| } | |
| .fab-opened .fab-buttons { | |
| visibility: visible; | |
| pointer-events: auto; | |
| } | |
| .fab-opened .fab-buttons a { | |
| opacity: 1; | |
| transform: translate3d(0, 0px, 0) scale(1) !important; | |
| } | |
| .fab-opened .fab-buttons a:nth-child(2) { | |
| transition-delay: 50ms; | |
| } | |
| .fab-opened .fab-buttons a:nth-child(3) { | |
| transition-delay: 100ms; | |
| } | |
| .fab-opened .fab-buttons a:nth-child(4) { | |
| transition-delay: 150ms; | |
| } | |
| .fab-opened .fab-buttons a:nth-child(5) { | |
| transition-delay: 200ms; | |
| } | |
| .fab-opened .fab-buttons a:nth-child(6) { | |
| transition-delay: 250ms; | |
| } | |
| .fab-buttons-top, | |
| .fab-buttons-bottom { | |
| left: 50%; | |
| width: var(--f7-fab-button-size); | |
| margin-left: calc(-1 * var(--f7-fab-button-size) / 2); | |
| } | |
| .fab-buttons-top { | |
| bottom: 100%; | |
| margin-bottom: 16px; | |
| flex-direction: column-reverse; | |
| } | |
| .fab-buttons-top a { | |
| transform: translate3d(0, 8px, 0) scale(0.3); | |
| transform-origin: center bottom; | |
| } | |
| .fab-buttons-top a + a { | |
| margin-bottom: 16px; | |
| } | |
| .fab-buttons-bottom { | |
| top: 100%; | |
| margin-top: 16px; | |
| flex-direction: column; | |
| } | |
| .fab-buttons-bottom a { | |
| transform: translate3d(0, -8px, 0) scale(0.3); | |
| transform-origin: center top; | |
| } | |
| .fab-buttons-bottom a + a { | |
| margin-top: 16px; | |
| } | |
| .fab-buttons-left, | |
| .fab-buttons-right { | |
| top: 50%; | |
| height: var(--f7-fab-button-size); | |
| margin-top: calc(-1 * var(--f7-fab-button-size) / 2); | |
| } | |
| .fab-buttons-left { | |
| right: 100%; | |
| margin-right: 16px; | |
| flex-direction: row-reverse; | |
| } | |
| .fab-buttons-left a { | |
| transform: translate3d(8px, 0px, 0) scale(0.3); | |
| transform-origin: right center; | |
| } | |
| .fab-buttons-left a + a { | |
| margin-right: 16px; | |
| } | |
| .fab-buttons-right { | |
| left: 100%; | |
| margin-left: 16px; | |
| } | |
| .fab-buttons-right a { | |
| transform: translate3d(-8px, 0, 0) scale(0.3); | |
| transform-origin: left center; | |
| } | |
| .fab-buttons-right a + a { | |
| margin-left: 16px; | |
| } | |
| .fab-buttons-center { | |
| left: 0%; | |
| top: 0%; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .fab-buttons-center a { | |
| position: absolute; | |
| } | |
| .fab-buttons-center a:nth-child(1) { | |
| left: 50%; | |
| margin-left: calc(-1 * var(--f7-fab-button-size) / 2); | |
| bottom: 100%; | |
| margin-bottom: 16px; | |
| transform: translateY(-8px) scale(0.3); | |
| transform-origin: center bottom; | |
| } | |
| .fab-buttons-center a:nth-child(2) { | |
| left: 100%; | |
| margin-top: calc(-1 * var(--f7-fab-button-size) / 2); | |
| top: 50%; | |
| margin-left: 16px; | |
| transform: translateX(-8px) scale(0.3); | |
| transform-origin: left center; | |
| } | |
| .fab-buttons-center a:nth-child(3) { | |
| left: 50%; | |
| margin-left: calc(-1 * var(--f7-fab-button-size) / 2); | |
| top: 100%; | |
| margin-top: 16px; | |
| transform: translateY(8px) scale(0.3); | |
| transform-origin: center top; | |
| } | |
| .fab-buttons-center a:nth-child(4) { | |
| right: 100%; | |
| margin-top: calc(-1 * var(--f7-fab-button-size) / 2); | |
| top: 50%; | |
| margin-right: 16px; | |
| transform: translateX(8px) scale(0.3); | |
| transform-origin: right center; | |
| } | |
| .fab-morph { | |
| border-radius: calc(var(--f7-fab-size) / 2); | |
| background: var(--f7-fab-bg-color, var(--f7-theme-color)); | |
| box-shadow: var(--f7-fab-box-shadow); | |
| } | |
| .fab-morph > a { | |
| box-shadow: none; | |
| background: none !important; | |
| } | |
| .fab-opened.fab-morph > a i { | |
| opacity: 0; | |
| } | |
| .fab-morph, | |
| .fab-morph > a, | |
| .fab-morph-target { | |
| transition-duration: 250ms; | |
| } | |
| .fab-morph-target:not(.fab-morph-target-visible) { | |
| display: none; | |
| } | |
| .fab-extended { | |
| width: auto; | |
| min-width: var(--f7-fab-extended-size); | |
| } | |
| .fab-extended > a { | |
| width: 100%; | |
| height: var(--f7-fab-extended-size); | |
| } | |
| .fab-extended > a i { | |
| left: calc(var(--f7-fab-extended-size) / 2); | |
| } | |
| .fab-extended i ~ .fab-text { | |
| padding-left: var(--f7-fab-extended-size); | |
| } | |
| .fab-extended > a { | |
| width: 100% !important; | |
| } | |
| .fab-text { | |
| box-sizing: border-box; | |
| font-size: var(--f7-fab-extended-text-font-size); | |
| padding: var(--f7-fab-extended-text-padding); | |
| font-weight: var(--f7-fab-extended-text-font-weight); | |
| letter-spacing: var(--f7-fab-extended-text-letter-spacing); | |
| text-transform: uppercase; | |
| } | |
| .fab-label-button { | |
| overflow: visible !important; | |
| } | |
| .fab-label { | |
| position: absolute; | |
| top: 50%; | |
| padding: var(--f7-fab-label-padding); | |
| border-radius: var(--f7-fab-label-border-radius); | |
| background: var(--f7-fab-label-bg-color); | |
| color: var(--f7-fab-label-text-color); | |
| box-shadow: var(--f7-fab-label-box-shadow); | |
| white-space: nowrap; | |
| transform: translateY(-50%); | |
| pointer-events: none; | |
| } | |
| .fab[class*="fab-right-"] .fab-label { | |
| right: 100%; | |
| margin-right: 8px; | |
| } | |
| .fab[class*="fab-left-"] .fab-label { | |
| left: 100%; | |
| margin-left: 8px; | |
| } | |
| .navbar ~ * .fab[class*="-top"], | |
| .navbar ~ .fab[class*="-top"] { | |
| margin-top: var(--f7-navbar-height); | |
| } | |
| .toolbar-top ~ * .fab[class*="-top"], | |
| .toolbar-top ~ .fab[class*="-top"], | |
| .ios .toolbar-top-ios ~ * .fab[class*="-top"], | |
| .ios .toolbar-top-ios ~ .fab[class*="-top"], | |
| .md .toolbar-top-md ~ * .fab[class*="-top"], | |
| .md .toolbar-top-md ~ .fab[class*="-top"] { | |
| margin-top: var(--f7-toolbar-height); | |
| } | |
| .toolbar-bottom ~ * .fab[class*="-bottom"], | |
| .toolbar-bottom ~ .fab[class*="-bottom"], | |
| .ios .toolbar-bottom-ios ~ * .fab[class*="-bottom"], | |
| .ios .toolbar-bottom-ios ~ .fab[class*="-bottom"], | |
| .md .toolbar-bottom-md ~ * .fab[class*="-bottom"], | |
| .md .toolbar-bottom-md ~ .fab[class*="-bottom"] { | |
| margin-bottom: var(--f7-toolbar-height); | |
| } | |
| .tabbar-labels.toolbar-bottom ~ * .fab[class*="-bottom"], | |
| .tabbar-labels.toolbar-bottom ~ .fab[class*="-bottom"], | |
| .ios .tabbar-labels.toolbar-bottom-ios ~ * .fab[class*="-bottom"], | |
| .ios .tabbar-labels.toolbar-bottom-ios ~ .fab[class*="-bottom"], | |
| .md .tabbar-labels.toolbar-bottom-md ~ * .fab[class*="-bottom"], | |
| .md .tabbar-labels.toolbar-bottom-md ~ .fab[class*="-bottom"] { | |
| margin-bottom: var(--f7-tabbar-labels-height); | |
| } | |
| .tabbar-labels.toolbar-top ~ * .fab[class*="-bottom"], | |
| .tabbar-labels.toolbar-top ~ .fab[class*="-bottom"], | |
| .ios .tabbar-labels.toolbar-top-ios ~ * .fab[class*="-bottom"], | |
| .ios .tabbar-labels.toolbar-top-ios ~ .fab[class*="-bottom"], | |
| .md .tabbar-labels.toolbar-top-md ~ * .fab[class*="-bottom"], | |
| .md .tabbar-labels.toolbar-top-md ~ .fab[class*="-bottom"] { | |
| margin-top: var(--f7-tabbar-labels-height); | |
| } | |
| .messagebar ~ * .fab[class*="-bottom"], | |
| .messagebar ~ .fab[class*="-bottom"] { | |
| margin-bottom: var(--f7-messagebar-height); | |
| } | |
| .navbar + .toolbar-top ~ * .fab[class*="-top"], | |
| .ios .navbar + .toolbar-top-ios ~ * .fab[class*="-top"], | |
| .md .navbar + .toolbar-top-ios ~ * .fab[class*="-top"], | |
| .navbar + .toolbar-top ~ .fab[class*="-top"], | |
| .ios .navbar + .toolbar-top-ios ~ .fab[class*="-top"], | |
| .md .navbar + .toolbar-top-ios ~ .fab[class*="-top"] { | |
| margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height)); | |
| } | |
| .navbar + .toolbar-top.tabbar-labels ~ * .fab[class*="-top"], | |
| .ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"], | |
| .md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"], | |
| .navbar + .toolbar-top.tabbar-labels ~ .fab[class*="-top"], | |
| .ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"], | |
| .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"] { | |
| margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height)); | |
| } | |
| .ios .fab > a.active-state, | |
| .ios .fab-buttons a.active-state { | |
| transition-duration: 0ms; | |
| } | |
| /* === Searchbar === */ | |
| :root { | |
| /* | |
| --f7-searchbar-link-color: var(--f7-bars-link-color); | |
| */ | |
| } | |
| .ios { | |
| /* | |
| --f7-searchbar-bg-image: var(--f7-bars-bg-image); | |
| --f7-searchbar-bg-color: var(--f7-bars-bg-color); | |
| --f7-searchbar-border-color: var(--f7-bars-border-color); | |
| */ | |
| --f7-searchbar-height: 44px; | |
| /* | |
| --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color)); | |
| */ | |
| --f7-searchbar-search-icon-color: #939398; | |
| --f7-searchbar-placeholder-color: #939398; | |
| --f7-searchbar-input-text-color: #000; | |
| --f7-searchbar-input-font-size: 17px; | |
| --f7-searchbar-input-bg-color: #e8e8ea; | |
| --f7-searchbar-input-border-radius: 8px; | |
| --f7-searchbar-input-height: 32px; | |
| --f7-searchbar-input-padding-horizontal: 28px; | |
| /* | |
| --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color); | |
| */ | |
| --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4); | |
| --f7-searchbar-shadow-image: none; | |
| --f7-searchbar-in-page-content-margin: 0px; | |
| --f7-searchbar-in-page-content-box-shadow: none; | |
| --f7-searchbar-in-page-content-border-radius: 0; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-searchbar-bg-color: #303030; | |
| --f7-searchbar-input-bg-color: #171717; | |
| --f7-searchbar-input-text-color: #fff; | |
| } | |
| .md { | |
| --f7-searchbar-bg-color: #fff; | |
| --f7-searchbar-border-color: transparent; | |
| --f7-searchbar-height: 48px; | |
| --f7-searchbar-link-color: #737373; | |
| --f7-searchbar-search-icon-color: #737373; | |
| --f7-searchbar-placeholder-color: #939398; | |
| --f7-searchbar-input-text-color: #000; | |
| --f7-searchbar-input-font-size: 20px; | |
| --f7-searchbar-input-bg-color: #fff; | |
| --f7-searchbar-input-border-radius: 0px; | |
| --f7-searchbar-input-height: 100%; | |
| --f7-searchbar-input-padding-horizontal: 48px; | |
| --f7-searchbar-input-clear-button-color: #737373; | |
| --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25); | |
| --f7-searchbar-shadow-image: var(--f7-bars-shadow-bottom-image); | |
| --f7-searchbar-in-page-content-margin: 8px; | |
| --f7-searchbar-in-page-content-box-shadow: var(--f7-elevation-1); | |
| --f7-searchbar-in-page-content-border-radius: 4px; | |
| } | |
| .searchbar { | |
| width: 100%; | |
| position: relative; | |
| z-index: 200; | |
| height: var(--f7-searchbar-height); | |
| background-image: var(--f7-searchbar-bg-image, var(--f7-bars-bg-image)); | |
| background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color))); | |
| --f7-touch-ripple-color: var(--f7-touch-ripple-black); | |
| } | |
| .searchbar.no-hairline:after, | |
| .searchbar.no-border:after { | |
| display: none !important; | |
| } | |
| .searchbar.no-shadow:before { | |
| display: none !important; | |
| } | |
| .searchbar:after { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-searchbar-border-color, var(--f7-bars-border-color)); | |
| display: block; | |
| z-index: 15; | |
| top: auto; | |
| right: auto; | |
| bottom: 0; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 100%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .page > .searchbar { | |
| z-index: 510; | |
| } | |
| .page > .searchbar:before { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| width: 100%; | |
| top: 100%; | |
| bottom: auto; | |
| height: 8px; | |
| pointer-events: none; | |
| background: var(--f7-searchbar-shadow-image, var(--f7-bars-shadow-bottom-image)); | |
| } | |
| .searchbar input[type="text"], | |
| .searchbar input[type="search"] { | |
| box-sizing: border-box; | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| border: none; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| font-family: inherit; | |
| font-weight: normal; | |
| color: var(--f7-searchbar-input-text-color); | |
| font-size: var(--f7-searchbar-input-font-size); | |
| background-color: var(--f7-searchbar-input-bg-color); | |
| border-radius: var(--f7-searchbar-input-border-radius); | |
| position: relative; | |
| padding: 0; | |
| padding-left: var(--f7-searchbar-input-padding-left); | |
| padding-right: var(--f7-searchbar-input-padding-right); | |
| } | |
| .searchbar input[type="text"]::-webkit-input-placeholder, | |
| .searchbar input[type="search"]::-webkit-input-placeholder { | |
| color: var(--f7-searchbar-placeholder-color); | |
| opacity: 1; | |
| } | |
| .searchbar input[type="text"]::-moz-placeholder, | |
| .searchbar input[type="search"]::-moz-placeholder { | |
| color: var(--f7-searchbar-placeholder-color); | |
| opacity: 1; | |
| } | |
| .searchbar input[type="text"]::-ms-input-placeholder, | |
| .searchbar input[type="search"]::-ms-input-placeholder { | |
| color: var(--f7-searchbar-placeholder-color); | |
| opacity: 1; | |
| } | |
| .searchbar input[type="text"]::placeholder, | |
| .searchbar input[type="search"]::placeholder { | |
| color: var(--f7-searchbar-placeholder-color); | |
| opacity: 1; | |
| } | |
| .searchbar input::-webkit-search-cancel-button { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| } | |
| .searchbar .searchbar-input-wrap { | |
| flex-shrink: 1; | |
| width: 100%; | |
| height: var(--f7-searchbar-input-height); | |
| position: relative; | |
| } | |
| .searchbar a { | |
| color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color))); | |
| } | |
| .page > .searchbar { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| } | |
| .page-content .searchbar { | |
| border-radius: var(--f7-searchbar-in-page-content-border-radius); | |
| margin: var(--f7-searchbar-in-page-content-margin); | |
| width: auto; | |
| box-shadow: var(--f7-searchbar-in-page-content-box-shadow); | |
| } | |
| .page-content .searchbar .searchbar-inner, | |
| .page-content .searchbar input[type="text"], | |
| .page-content .searchbar input[type="search"] { | |
| border-radius: var(--f7-searchbar-in-page-content-border-radius); | |
| } | |
| .searchbar .input-clear-button { | |
| color: var(--f7-searchbar-input-clear-button-color, var(--f7-input-clear-button-color)); | |
| } | |
| .searchbar-expandable { | |
| position: absolute; | |
| transition-duration: 300ms; | |
| pointer-events: none; | |
| } | |
| .navbar-inner-large .searchbar-expandable:after { | |
| display: none !important; | |
| } | |
| .navbar .searchbar.searchbar-expandable { | |
| --f7-searchbar-expandable-size: var(--f7-navbar-height); | |
| } | |
| .toolbar .searchbar.searchbar-expandable { | |
| --f7-searchbar-expandable-size: var(--f7-toolbar-height); | |
| } | |
| .subnavbar .searchbar.searchbar-expandable { | |
| --f7-searchbar-expandable-size: var(--f7-subnavbar-height); | |
| } | |
| .tabbar-labels .searchbar.searchbar-expandable { | |
| --f7-searchbar-expandable-size: var(--f7-tabbar-labels-height); | |
| } | |
| .searchbar-inner { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| box-sizing: border-box; | |
| } | |
| .searchbar-disable-button { | |
| cursor: pointer; | |
| pointer-events: none; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| background: none; | |
| border: none; | |
| outline: 0; | |
| padding: 0; | |
| margin: 0; | |
| width: auto; | |
| opacity: 0; | |
| } | |
| .searchbar-icon { | |
| pointer-events: none; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| .searchbar-icon:after { | |
| color: var(--f7-searchbar-search-icon-color); | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 20px; | |
| } | |
| .searchbar-backdrop { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 100; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition-duration: 300ms; | |
| transform: translate3d(0, 0, 0); | |
| background: var(--f7-searchbar-backdrop-bg-color); | |
| } | |
| .searchbar-backdrop.searchbar-backdrop-in { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .page-content > .searchbar-backdrop { | |
| position: fixed; | |
| } | |
| .searchbar-not-found { | |
| display: none; | |
| } | |
| .hidden-by-searchbar, | |
| .list .hidden-by-searchbar, | |
| .list.li.hidden-by-searchbar, | |
| .list li.hidden-by-searchbar { | |
| display: none !important; | |
| } | |
| .navbar.with-searchbar-expandable-enabled, | |
| .navbar-inner.with-searchbar-expandable-enabled { | |
| --f7-navbar-large-collapse-progress: 1; | |
| } | |
| .navbar.with-searchbar-expandable-enabled .title-large, | |
| .navbar-inner.with-searchbar-expandable-enabled .title-large, | |
| .navbar.with-searchbar-expandable-enabled .title-large-text, | |
| .navbar-inner.with-searchbar-expandable-enabled .title-large-text, | |
| .navbar.with-searchbar-expandable-enabled .title-large-inner, | |
| .navbar-inner.with-searchbar-expandable-enabled .title-large-inner { | |
| transition-duration: 300ms; | |
| } | |
| .page-content.with-searchbar-expandable-enabled { | |
| height: calc(100% + var(--f7-navbar-large-title-height)); | |
| transform: translateY(calc(-1 * var(--f7-navbar-large-title-height))); | |
| transition-duration: 300ms; | |
| transition-property: transform; | |
| } | |
| .navbar ~ .page:not(.no-navbar) > .searchbar, | |
| .page > .navbar ~ .searchbar { | |
| top: var(--f7-navbar-height); | |
| } | |
| .page > .searchbar ~ * .page-content, | |
| .page > .searchbar ~ .page-content { | |
| padding-top: var(--f7-searchbar-height); | |
| } | |
| .page > .navbar ~ .searchbar ~ * .page-content, | |
| .page > .navbar ~ .searchbar ~ .page-content, | |
| .navbar ~ .page:not(.no-navbar) > .searchbar ~ .page-content, | |
| .navbar ~ .page:not(.no-navbar) > .searchbar ~ * .page-content { | |
| padding-top: calc(var(--f7-navbar-height) + var(--f7-searchbar-height)); | |
| } | |
| .page > .toolbar-top ~ .searchbar, | |
| .ios .page > .toolbar-top-ios ~ .searchbar, | |
| .md .page > .toolbar-top-md ~ .searchbar { | |
| top: var(--f7-toolbar-height); | |
| } | |
| .page > .toolbar-top ~ .searchbar ~ * .page-content, | |
| .ios .page > .toolbar-top-ios ~ .searchbar ~ * .page-content, | |
| .md .page > .toolbar-top-md ~ .searchbar ~ * .page-content, | |
| .page > .toolbar-top ~ .searchbar ~ .page-content, | |
| .ios .page > .toolbar-top-ios ~ .searchbar ~ .page-content, | |
| .md .page > .toolbar-top-md ~ .searchbar ~ .page-content { | |
| padding-top: calc(var(--f7-toolbar-height) + var(--f7-searchbar-height)); | |
| } | |
| .page > .tabbar-labels.toolbar-top ~ .searchbar, | |
| .ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar, | |
| .md .page > .tabbar-labels.toolbar-top-md ~ .searchbar { | |
| top: var(--f7-tabbar-labels-height); | |
| } | |
| .page > .tabbar-labels.toolbar-top ~ .searchbar ~ * .page-content, | |
| .ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar ~ * .page-content, | |
| .md .page > .tabbar-labels.toolbar-top-md ~ .searchbar ~ * .page-content, | |
| .page > .tabbar-labels.toolbar-top ~ .searchbar ~ .page-content, | |
| .ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar ~ .page-content, | |
| .md .page > .tabbar-labels.toolbar-top-md ~ .searchbar ~ .page-content { | |
| padding-top: calc(var(--f7-tabbar-labels-height) + var(--f7-searchbar-height)); | |
| } | |
| .page > .navbar ~ .toolbar-top ~ .searchbar, | |
| .ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar, | |
| .md .page > .navbar ~ .toolbar-top-md ~ .searchbar { | |
| top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height)); | |
| } | |
| .page > .navbar ~ .toolbar-top ~ .searchbar ~ * .page-content, | |
| .ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar ~ * .page-content, | |
| .md .page > .navbar ~ .toolbar-top-md ~ .searchbar ~ * .page-content, | |
| .page > .navbar ~ .toolbar-top ~ .searchbar ~ .page-content, | |
| .ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar ~ .page-content, | |
| .md .page > .navbar ~ .toolbar-top-md ~ .searchbar ~ .page-content { | |
| padding-top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-searchbar-height)); | |
| } | |
| .page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar, | |
| .ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar, | |
| .md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar { | |
| top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height)); | |
| } | |
| .page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar ~ * .page-content, | |
| .ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar ~ * .page-content, | |
| .md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar ~ * .page-content, | |
| .page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar ~ .page-content, | |
| .ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar ~ .page-content, | |
| .md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar ~ .page-content { | |
| padding-top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-searchbar-height)); | |
| } | |
| .ios { | |
| --f7-searchbar-input-padding-left: var(--f7-searchbar-input-padding-horizontal); | |
| --f7-searchbar-input-padding-right: var(--f7-searchbar-input-padding-horizontal); | |
| } | |
| .ios .searchbar input[type="search"], | |
| .ios .searchbar input[type="text"] { | |
| z-index: 30; | |
| } | |
| .ios .searchbar .input-clear-button { | |
| z-index: 40; | |
| right: 7px; | |
| } | |
| .ios .searchbar-inner { | |
| padding: 0 calc(8px + var(--f7-safe-area-right)) 0 calc(8px + var(--f7-safe-area-left)); | |
| } | |
| .ios .searchbar-icon { | |
| width: 13px; | |
| height: 13px; | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -6px; | |
| z-index: 40; | |
| left: 8px; | |
| } | |
| .ios .searchbar-icon:after { | |
| content: 'search_ios'; | |
| line-height: 13px; | |
| } | |
| .ios .searchbar-disable-button { | |
| font-size: 17px; | |
| flex-shrink: 0; | |
| transform: translate3d(0, 0, 0); | |
| transition-duration: 300ms; | |
| color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color))); | |
| display: none; | |
| } | |
| .ios .searchbar-disable-button.active-state { | |
| transition-duration: 0ms; | |
| opacity: 0.3 !important; | |
| } | |
| .ios .searchbar-enabled .searchbar-disable-button { | |
| pointer-events: auto; | |
| opacity: 1; | |
| margin-left: 8px; | |
| } | |
| .ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button { | |
| transition-duration: 300ms !important; | |
| } | |
| .ios .searchbar-expandable { | |
| --f7-searchbar-expandable-size: var(--f7-searchbar-height); | |
| left: 0; | |
| bottom: 0; | |
| opacity: 1; | |
| width: 100%; | |
| height: 0%; | |
| transform: translate3d(0, 0, 0); | |
| overflow: hidden; | |
| } | |
| .ios .searchbar-expandable .searchbar-disable-button { | |
| margin-left: 8px; | |
| opacity: 1; | |
| display: block; | |
| } | |
| .ios .searchbar-expandable .searchbar-inner { | |
| height: var(--f7-searchbar-expandable-size); | |
| } | |
| .ios .navbar-inner.with-searchbar-expandable-enabled .left, | |
| .ios .navbar-inner.with-searchbar-expandable-enabled .title, | |
| .ios .navbar-inner.with-searchbar-expandable-enabled .right { | |
| transform: translateY(calc(-1 * var(--f7-navbar-height))); | |
| transition: 300ms; | |
| opacity: 0; | |
| } | |
| .ios .searchbar-expandable.searchbar-enabled { | |
| opacity: 1; | |
| height: var(--f7-searchbar-expandable-size); | |
| pointer-events: auto; | |
| } | |
| .md { | |
| --f7-searchbar-input-padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + 17px); | |
| --f7-searchbar-input-padding-right: var(--f7-searchbar-input-padding-horizontal); | |
| } | |
| .md .searchbar-inner { | |
| padding: 0 var(--f7-safe-area-right) 0 var(--f7-safe-area-left); | |
| } | |
| .md .searchbar-icon, | |
| .md .searchbar-disable-button { | |
| position: absolute; | |
| left: calc(-4px + var(--f7-safe-area-left)); | |
| top: 50%; | |
| transition-duration: 300ms; | |
| } | |
| .md .searchbar-icon { | |
| width: 24px; | |
| height: 24px; | |
| margin-left: 12px; | |
| margin-top: -12px; | |
| } | |
| .md .searchbar-icon:after { | |
| content: 'search_md'; | |
| line-height: 1.2; | |
| } | |
| .md .searchbar-disable-button { | |
| width: 48px; | |
| height: 48px; | |
| transform: rotate(-90deg) scale(0.5); | |
| font-size: 0 !important; | |
| display: block; | |
| margin-top: -24px; | |
| color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color))); | |
| --f7-link-highlight-color: var(--f7-link-highlight-black); | |
| } | |
| .md .searchbar-disable-button:before { | |
| content: ''; | |
| width: 152%; | |
| height: 152%; | |
| position: absolute; | |
| left: -26%; | |
| top: -26%; | |
| background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: 100% 100%; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition-duration: 600ms; | |
| } | |
| .md .searchbar-disable-button.active-state:before { | |
| opacity: 1; | |
| transition-duration: 150ms; | |
| } | |
| .md .searchbar-disable-button:after { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 20px; | |
| line-height: 48px; | |
| content: "arrow_left_md"; | |
| } | |
| .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button { | |
| transform: rotate(0deg) scale(1); | |
| pointer-events: auto; | |
| opacity: 1; | |
| } | |
| .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon { | |
| opacity: 0; | |
| transform: rotate(90deg) scale(0.5); | |
| } | |
| .md .searchbar .input-clear-button { | |
| width: 48px; | |
| height: 48px; | |
| margin-top: -24px; | |
| right: 0; | |
| --f7-link-highlight-color: var(--f7-link-highlight-black); | |
| } | |
| .md .searchbar .input-clear-button:before { | |
| content: ''; | |
| width: 152%; | |
| height: 152%; | |
| position: absolute; | |
| left: -26%; | |
| top: -26%; | |
| background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: 100% 100%; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition-duration: 600ms; | |
| } | |
| .md .searchbar .input-clear-button.active-state:before { | |
| opacity: 1; | |
| transition-duration: 150ms; | |
| } | |
| .md .searchbar .input-clear-button:after { | |
| line-height: 48px; | |
| content: 'delete_md'; | |
| opacity: 1; | |
| } | |
| .md .searchbar .input-clear-button:before { | |
| margin-left: 0; | |
| margin-top: 0; | |
| } | |
| .md .page > .searchbar, | |
| .md .subnavbar .searchbar, | |
| .md .searchbar-expandable { | |
| --f7-searchbar-input-padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + 17px + 8px); | |
| } | |
| .md .page > .searchbar .searchbar-icon, | |
| .md .subnavbar .searchbar .searchbar-icon, | |
| .md .searchbar-expandable .searchbar-icon, | |
| .md .page > .searchbar .searchbar-disable-button, | |
| .md .subnavbar .searchbar .searchbar-disable-button, | |
| .md .searchbar-expandable .searchbar-disable-button { | |
| left: calc(-4px + 8px + var(--f7-safe-area-left)); | |
| } | |
| .md .searchbar-expandable { | |
| --f7-searchbar-expandable-size: var(--f7-searchbar-height); | |
| height: 100%; | |
| opacity: 0; | |
| top: 50%; | |
| border-radius: calc(var(--f7-searchbar-expandable-size)); | |
| width: calc(var(--f7-searchbar-expandable-size)); | |
| margin-top: calc(var(--f7-searchbar-expandable-size) * -1 / 2); | |
| transform: translate3d(0px, 0px, 0px); | |
| left: 100%; | |
| margin-left: calc(var(--f7-searchbar-expandable-size) * -1); | |
| } | |
| .md .searchbar-expandable.searchbar-enabled { | |
| width: 100%; | |
| border-radius: 0; | |
| opacity: 1; | |
| pointer-events: auto; | |
| top: 0; | |
| margin-top: 0; | |
| left: 0; | |
| margin-left: 0; | |
| } | |
| /* === Messages === */ | |
| :root { | |
| --f7-messages-content-bg-color: #fff; | |
| --f7-message-text-header-text-color: inherit; | |
| --f7-message-text-header-opacity: 0.65; | |
| --f7-message-text-header-font-size: 12px; | |
| --f7-message-text-footer-text-color: inherit; | |
| --f7-message-text-footer-opacity: 0.65; | |
| --f7-message-text-footer-font-size: 12px; | |
| --f7-message-bubble-line-height: 1.2; | |
| --f7-message-header-font-size: 12px; | |
| --f7-message-footer-font-size: 11px; | |
| --f7-message-name-font-size: 12px; | |
| --f7-message-typing-indicator-bg-color: #000; | |
| --f7-message-sent-bg-color: var(--f7-theme-color); | |
| --f7-message-sent-text-color: #fff; | |
| --f7-message-received-bg-color: #e5e5ea; | |
| --f7-message-received-text-color: #000; | |
| } | |
| .ios { | |
| --f7-messages-title-text-color: #8e8e93; | |
| --f7-messages-title-font-size: 11px; | |
| --f7-message-header-text-color: #8e8e93; | |
| --f7-message-footer-text-color: #8e8e93; | |
| --f7-message-name-text-color: #8e8e93; | |
| --f7-message-avatar-size: 29px; | |
| --f7-message-margin: 10px; | |
| --f7-message-bubble-font-size: 17px; | |
| --f7-message-bubble-border-radius: 16px; | |
| --f7-message-bubble-padding-vertical: 6px; | |
| --f7-message-bubble-padding-horizontal: 16px; | |
| --f7-message-typing-indicator-opacity: 0.35; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-messages-content-bg-color: transparent; | |
| --f7-message-received-bg-color: #333; | |
| --f7-message-received-text-color: #fff; | |
| --f7-message-typing-indicator-bg-color: #fff; | |
| } | |
| .md { | |
| --f7-messages-title-text-color: rgba(0, 0, 0, 0.51); | |
| --f7-messages-title-font-size: 12px; | |
| --f7-message-header-text-color: rgba(0, 0, 0, 0.51); | |
| --f7-message-footer-text-color: rgba(0, 0, 0, 0.51); | |
| --f7-message-name-text-color: rgba(0, 0, 0, 0.51); | |
| --f7-message-avatar-size: 32px; | |
| --f7-message-margin: 16px; | |
| --f7-message-bubble-font-size: 16px; | |
| --f7-message-bubble-border-radius: 4px; | |
| --f7-message-bubble-padding-vertical: 6px; | |
| --f7-message-bubble-padding-horizontal: 8px; | |
| --f7-message-typing-indicator-opacity: 0.6; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-messages-content-bg-color: transparent; | |
| --f7-messages-title-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-message-header-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-message-name-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-message-footer-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-message-received-bg-color: #333; | |
| --f7-message-received-text-color: #fff; | |
| --f7-message-typing-indicator-bg-color: #fff; | |
| } | |
| .messages-content, | |
| .messages { | |
| background: var(--f7-messages-content-bg-color); | |
| } | |
| .messages { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100%; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .messages-title, | |
| .message { | |
| margin-top: var(--f7-message-margin); | |
| } | |
| .messages-title:last-child, | |
| .message:last-child { | |
| margin-bottom: var(--f7-message-margin); | |
| } | |
| .messages-title { | |
| text-align: center; | |
| width: 100%; | |
| line-height: 1; | |
| color: var(--f7-messages-title-text-color); | |
| font-size: var(--f7-messages-title-font-size); | |
| } | |
| .message { | |
| max-width: 70%; | |
| box-sizing: border-box; | |
| display: flex; | |
| align-items: flex-end; | |
| position: relative; | |
| z-index: 1; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| .message-avatar { | |
| border-radius: 50%; | |
| position: relative; | |
| background-size: cover; | |
| align-self: flex-end; | |
| flex-shrink: 0; | |
| width: var(--f7-message-avatar-size); | |
| height: var(--f7-message-avatar-size); | |
| } | |
| .message-content { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .message-header, | |
| .message-footer, | |
| .message-name { | |
| line-height: 1; | |
| } | |
| .message-header { | |
| color: var(--f7-message-header-text-color); | |
| font-size: var(--f7-message-header-font-size); | |
| } | |
| .message-footer { | |
| color: var(--f7-message-footer-text-color); | |
| font-size: var(--f7-message-footer-font-size); | |
| margin-bottom: -1em; | |
| } | |
| .message-name { | |
| color: var(--f7-message-name-text-color); | |
| font-size: var(--f7-message-name-font-size); | |
| } | |
| .message-bubble { | |
| box-sizing: border-box; | |
| word-break: break-word; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| line-height: var(--f7-message-bubble-line-height); | |
| font-size: var(--f7-message-bubble-font-size); | |
| border-radius: var(--f7-message-bubble-border-radius); | |
| padding: var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal); | |
| min-height: 32px; | |
| } | |
| .message-image img { | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| width: auto; | |
| } | |
| .message-text-header, | |
| .message-text-footer { | |
| line-height: 1; | |
| } | |
| .message-text-header { | |
| color: var(--f7-message-text-header-text-color); | |
| opacity: var(--f7-message-text-header-opacity); | |
| font-size: var(--f7-message-text-header-font-size); | |
| } | |
| .message-text-footer { | |
| color: var(--f7-message-text-footer-text-color); | |
| opacity: var(--f7-message-text-footer-opacity); | |
| font-size: var(--f7-message-text-footer-font-size); | |
| } | |
| .message-text { | |
| text-align: left; | |
| } | |
| .message-sent { | |
| text-align: right; | |
| flex-direction: row-reverse; | |
| align-self: flex-end; | |
| } | |
| .message-sent .message-bubble { | |
| color: var(--f7-message-sent-text-color); | |
| background: var(--f7-message-sent-bg-color); | |
| } | |
| .message-sent .message-content { | |
| align-items: flex-end; | |
| } | |
| .message-sent.message-tail .message-bubble { | |
| border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius); | |
| } | |
| .message-received { | |
| flex-direction: row; | |
| } | |
| .message-received .message-bubble { | |
| color: var(--f7-message-received-text-color); | |
| background: var(--f7-message-received-bg-color); | |
| } | |
| .message-received .message-content { | |
| align-items: flex-start; | |
| } | |
| .message-received.message-tail .message-bubble { | |
| border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0; | |
| } | |
| .message:not(.message-last) .message-avatar { | |
| opacity: 0; | |
| } | |
| .message:not(.message-first) .message-name { | |
| display: none; | |
| } | |
| .message.message-same-name .message-name { | |
| display: none; | |
| } | |
| .message.message-same-header .message-header { | |
| display: none; | |
| } | |
| .message.message-same-footer .message-footer { | |
| display: none; | |
| } | |
| .message-appear-from-bottom { | |
| animation: message-appear-from-bottom 300ms; | |
| } | |
| .message-appear-from-top { | |
| animation: message-appear-from-top 300ms; | |
| } | |
| .message-typing-indicator { | |
| display: inline-block; | |
| font-size: 0; | |
| vertical-align: middle; | |
| } | |
| .message-typing-indicator > div { | |
| display: inline-block; | |
| position: relative; | |
| background: var(--f7-message-typing-indicator-bg-color); | |
| opacity: var(--f7-message-typing-indicator-opacity); | |
| vertical-align: middle; | |
| border-radius: 50%; | |
| } | |
| @keyframes message-appear-from-bottom { | |
| from { | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| to { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| @keyframes message-appear-from-top { | |
| from { | |
| transform: translate3d(0, -100%, 0); | |
| } | |
| to { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| .ios .messages-title b, | |
| .ios .message-header b, | |
| .ios .message-footer b, | |
| .ios .message-name b { | |
| font-weight: 600; | |
| } | |
| .ios .message-header, | |
| .ios .message-name { | |
| margin-bottom: 3px; | |
| } | |
| .ios .message-footer { | |
| margin-top: 3px; | |
| } | |
| .ios .message-bubble { | |
| min-width: 48px; | |
| } | |
| .ios .message-image { | |
| margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal)); | |
| } | |
| .ios .message-image:first-child { | |
| margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical)); | |
| } | |
| .ios .message-image:first-child img { | |
| border-top-left-radius: var(--f7-message-bubble-border-radius); | |
| border-top-right-radius: var(--f7-message-bubble-border-radius); | |
| } | |
| .ios .message-image:last-child { | |
| margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical)); | |
| } | |
| .ios .message-image:last-child img { | |
| border-bottom-left-radius: var(--f7-message-bubble-border-radius); | |
| border-bottom-right-radius: var(--f7-message-bubble-border-radius); | |
| } | |
| .ios .message-text-header { | |
| margin-bottom: 3px; | |
| } | |
| .ios .message-text-footer { | |
| margin-top: 3px; | |
| } | |
| .ios .message-received { | |
| margin-left: calc(10px + var(--f7-safe-area-left)); | |
| } | |
| .ios .message-received .message-header, | |
| .ios .message-received .message-footer, | |
| .ios .message-received .message-name { | |
| margin-left: var(--f7-message-bubble-padding-horizontal); | |
| } | |
| .ios .message-received .message-bubble { | |
| padding-left: calc(var(--f7-message-bubble-padding-horizontal) + 6px); | |
| -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%; | |
| } | |
| .ios .message-received .message-image { | |
| margin-left: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px)); | |
| } | |
| .ios .message-received.message-tail:not(.message-typing) .message-bubble { | |
| -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%; | |
| } | |
| .ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img { | |
| border-bottom-left-radius: 0px; | |
| } | |
| .ios .message-sent { | |
| margin-right: calc(10px + var(--f7-safe-area-right)); | |
| } | |
| .ios .message-sent .message-header, | |
| .ios .message-sent .message-footer, | |
| .ios .message-sent .message-name { | |
| margin-right: var(--f7-message-bubble-padding-horizontal); | |
| } | |
| .ios .message-sent .message-bubble { | |
| padding-right: calc(var(--f7-message-bubble-padding-horizontal) + 6px); | |
| -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%; | |
| } | |
| .ios .message-sent .message-image { | |
| margin-right: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px)); | |
| } | |
| .ios .message-sent.message-tail .message-bubble { | |
| -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%; | |
| } | |
| .ios .message-sent.message-tail .message-bubble .message-image:last-child img { | |
| border-bottom-right-radius: 0px; | |
| } | |
| .ios .message + .message:not(.message-first) { | |
| margin-top: 1px; | |
| } | |
| .ios .message-received.message-typing .message-content:after, | |
| .ios .message-received.message-typing .message-content:before { | |
| content: ''; | |
| position: absolute; | |
| background: var(--f7-message-received-bg-color); | |
| border-radius: 50%; | |
| } | |
| .ios .message-received.message-typing .message-content:after { | |
| width: 11px; | |
| height: 11px; | |
| left: 4px; | |
| bottom: 0px; | |
| } | |
| .ios .message-received.message-typing .message-content:before { | |
| width: 6px; | |
| height: 6px; | |
| left: -1px; | |
| bottom: -4px; | |
| } | |
| .ios .message-typing-indicator > div { | |
| width: 9px; | |
| height: 9px; | |
| } | |
| .ios .message-typing-indicator > div + div { | |
| margin-left: 4px; | |
| } | |
| .ios .message-typing-indicator > div:nth-child(1) { | |
| animation: ios-message-typing-indicator 900ms infinite; | |
| } | |
| .ios .message-typing-indicator > div:nth-child(2) { | |
| animation: ios-message-typing-indicator 900ms 150ms infinite; | |
| } | |
| .ios .message-typing-indicator > div:nth-child(3) { | |
| animation: ios-message-typing-indicator 900ms 300ms infinite; | |
| } | |
| @keyframes ios-message-typing-indicator { | |
| 0% { | |
| opacity: 0.35; | |
| } | |
| 25% { | |
| opacity: 0.2; | |
| } | |
| 50% { | |
| opacity: 0.2; | |
| } | |
| } | |
| .md .messages-title b, | |
| .md .message-header b, | |
| .md .message-footer b, | |
| .md .message-name b { | |
| font-weight: 500; | |
| } | |
| .md .message-header, | |
| .md .message-name { | |
| margin-bottom: 2px; | |
| } | |
| .md .message-footer { | |
| margin-top: 2px; | |
| } | |
| .md .message-text-header { | |
| margin-bottom: 4px; | |
| } | |
| .md .message-text-footer { | |
| margin-top: 4px; | |
| } | |
| .md .message-received.message-tail .message-bubble:before, | |
| .md .message-sent.message-tail .message-bubble:before { | |
| position: absolute; | |
| content: ''; | |
| bottom: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .md .message-received { | |
| margin-left: calc(8px + var(--f7-safe-area-left)); | |
| } | |
| .md .message-received .message-avatar + .message-content { | |
| margin-left: var(--f7-message-bubble-padding-horizontal); | |
| } | |
| .md .message-received.message-tail .message-bubble:before { | |
| border-left: 8px solid transparent; | |
| border-right: 0 solid transparent; | |
| border-bottom: 8px solid var(--f7-message-received-bg-color); | |
| right: 100%; | |
| } | |
| .md .message-sent { | |
| margin-right: calc(8px + var(--f7-safe-area-right)); | |
| } | |
| .md .message-sent .message-avatar + .message-content { | |
| margin-right: var(--f7-message-bubble-padding-horizontal); | |
| } | |
| .md .message-sent.message-tail .message-bubble:before { | |
| border-left: 0 solid transparent; | |
| border-right: 8px solid transparent; | |
| border-bottom: 8px solid var(--f7-message-sent-bg-color); | |
| left: 100%; | |
| } | |
| .md .message + .message:not(.message-first) { | |
| margin-top: 8px; | |
| } | |
| .md .message-typing-indicator > div { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .md .message-typing-indicator > div + div { | |
| margin-left: 6px; | |
| } | |
| .md .message-typing-indicator > div:nth-child(1) { | |
| animation: md-message-typing-indicator 900ms infinite; | |
| } | |
| .md .message-typing-indicator > div:nth-child(2) { | |
| animation: md-message-typing-indicator 900ms 150ms infinite; | |
| } | |
| .md .message-typing-indicator > div:nth-child(3) { | |
| animation: md-message-typing-indicator 900ms 300ms infinite; | |
| } | |
| @keyframes md-message-typing-indicator { | |
| 0% { | |
| transform: translateY(0%); | |
| } | |
| 25% { | |
| transform: translateY(-5px); | |
| } | |
| 50% { | |
| transform: translateY(0%); | |
| } | |
| } | |
| /* === Messagebar === */ | |
| :root { | |
| --f7-messagebar-bg-color: #fff; | |
| --f7-messagebar-textarea-bg-color: transparent; | |
| --f7-messagebar-attachments-height: 155px; | |
| --f7-messagebar-attachment-height: 155px; | |
| --f7-messagebar-attachment-landscape-height: 120px; | |
| --f7-messagebar-sheet-height: 252px; | |
| --f7-messagebar-sheet-landscape-height: 192px; | |
| } | |
| .ios { | |
| --f7-messagebar-height: 44px; | |
| --f7-messagebar-font-size: 17px; | |
| /* | |
| --f7-messagebar-link-color: var(--f7-theme-color); | |
| */ | |
| --f7-messagebar-border-color: transparent; | |
| --f7-messagebar-shadow-image: none; | |
| --f7-messagebar-textarea-border-radius: 17px; | |
| --f7-messagebar-textarea-padding: 6px 15px; | |
| --f7-messagebar-textarea-height: 34px; | |
| --f7-messagebar-textarea-text-color: #000; | |
| --f7-messagebar-textarea-font-size: 17px; | |
| --f7-messagebar-textarea-line-height: 20px; | |
| --f7-messagebar-textarea-border: 1px solid #c8c8cd; | |
| --f7-messagebar-sheet-bg-color: #d1d5da; | |
| --f7-messagebar-attachments-border-color: #c8c8cd; | |
| --f7-messagebar-attachment-border-radius: 12px; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-messagebar-bg-color: var(--f7-bars-bg-color); | |
| --f7-messagebar-textarea-text-color: #fff; | |
| --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color); | |
| --f7-messagebar-attachments-border-color: var(--f7-bars-border-color); | |
| } | |
| .md { | |
| --f7-messagebar-height: 48px; | |
| --f7-messagebar-font-size: 16px; | |
| --f7-messagebar-link-color: #333; | |
| --f7-messagebar-border-color: #d1d1d1; | |
| --f7-messagebar-shadow-image: none; | |
| --f7-messagebar-textarea-border-radius: 0px; | |
| --f7-messagebar-textarea-padding: 5px 8px; | |
| --f7-messagebar-textarea-height: 32px; | |
| --f7-messagebar-textarea-text-color: #333; | |
| --f7-messagebar-textarea-font-size: 16px; | |
| --f7-messagebar-textarea-line-height: 22px; | |
| --f7-messagebar-textarea-border: 1px solid transparent; | |
| --f7-messagebar-sheet-bg-color: #fff; | |
| --f7-messagebar-attachments-border-color: #ddd; | |
| --f7-messagebar-attachment-border-radius: 4px; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-messagebar-bg-color: var(--f7-bars-bg-color); | |
| --f7-messagebar-border-color: #282829; | |
| --f7-messagebar-link-color: rgba(255, 255, 255, 0.87); | |
| --f7-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87); | |
| --f7-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .messagebar { | |
| transform: translate3d(0, 0, 0); | |
| background: var(--f7-messagebar-bg-color); | |
| height: auto; | |
| min-height: var(--f7-messagebar-height); | |
| font-size: var(--f7-messagebar-font-size); | |
| padding-bottom: var(--f7-safe-area-bottom); | |
| bottom: 0; | |
| } | |
| .messagebar:before { | |
| content: ''; | |
| position: absolute; | |
| background-color: var(--f7-messagebar-border-color); | |
| display: block; | |
| z-index: 15; | |
| top: 0; | |
| right: auto; | |
| bottom: auto; | |
| left: 0; | |
| height: 1px; | |
| width: 100%; | |
| transform-origin: 50% 0%; | |
| transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); | |
| } | |
| .messagebar:after { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| width: 100%; | |
| bottom: 100%; | |
| height: 8px; | |
| top: auto; | |
| pointer-events: none; | |
| background: var(--f7-messagebar-shadow-image); | |
| } | |
| .messagebar.no-hairline:before, | |
| .messagebar.no-border:before { | |
| display: none !important; | |
| } | |
| .messagebar.no-shadow:after, | |
| .messagebar.toolbar-hidden:after { | |
| display: none !important; | |
| } | |
| .messagebar .toolbar-inner { | |
| top: auto; | |
| position: relative; | |
| height: auto; | |
| bottom: auto; | |
| } | |
| .messagebar.messagebar-sheet-visible > .toolbar-inner { | |
| bottom: 0; | |
| } | |
| .messagebar .messagebar-area { | |
| width: 100%; | |
| flex-shrink: 1; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .messagebar textarea { | |
| width: 100%; | |
| flex-shrink: 1; | |
| background-color: var(--f7-messagebar-textarea-bg-color); | |
| border-radius: var(--f7-messagebar-textarea-border-radius); | |
| padding: var(--f7-messagebar-textarea-padding); | |
| height: var(--f7-messagebar-textarea-height); | |
| color: var(--f7-messagebar-textarea-text-color); | |
| font-size: var(--f7-messagebar-textarea-font-size); | |
| line-height: var(--f7-messagebar-textarea-line-height); | |
| border: var(--f7-messagebar-textarea-border); | |
| } | |
| .messagebar a.link { | |
| align-self: flex-end; | |
| flex-shrink: 0; | |
| color: var(--f7-messagebar-link-color, var(--f7-theme-color)); | |
| } | |
| .messagebar-attachments { | |
| width: 100%; | |
| will-change: scroll-position; | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| font-size: 0; | |
| white-space: nowrap; | |
| box-sizing: border-box; | |
| position: relative; | |
| } | |
| .messagebar:not(.messagebar-attachments-visible) .messagebar-attachments { | |
| display: none; | |
| } | |
| .messagebar-attachment { | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| display: inline-block; | |
| vertical-align: middle; | |
| white-space: normal; | |
| height: var(--f7-messagebar-attachment-height); | |
| position: relative; | |
| border-radius: var(--f7-messagebar-attachment-border-radius); | |
| } | |
| @media (orientation: landscape) { | |
| .messagebar-attachment { | |
| height: var(--f7-messagebar-attachment-landscape-height); | |
| } | |
| } | |
| .messagebar-attachment img { | |
| display: block; | |
| width: auto; | |
| height: 100%; | |
| border-radius: var(--f7-messagebar-attachment-border-radius); | |
| } | |
| .messagebar-attachment + .messagebar-attachment { | |
| margin-left: 8px; | |
| } | |
| .messagebar-sheet { | |
| will-change: scroll-position; | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| display: flex; | |
| flex-wrap: wrap; | |
| flex-direction: column; | |
| align-content: flex-start; | |
| height: var(--f7-messagebar-sheet-height); | |
| background-color: var(--f7-messagebar-sheet-bg-color); | |
| padding-left: var(--f7-safe-area-left); | |
| padding-right: var(--f7-safe-area-right); | |
| } | |
| @media (orientation: landscape) { | |
| .messagebar-sheet { | |
| height: var(--f7-messagebar-sheet-landscape-height); | |
| } | |
| } | |
| .messagebar-sheet-image, | |
| .messagebar-sheet-item { | |
| box-sizing: border-box; | |
| flex-shrink: 0; | |
| margin-top: 1px; | |
| position: relative; | |
| overflow: hidden; | |
| height: calc((var(--f7-messagebar-sheet-height) - 2px) / 2); | |
| width: calc((var(--f7-messagebar-sheet-height) - 2px) / 2); | |
| margin-left: 1px; | |
| } | |
| @media (orientation: landscape) { | |
| .messagebar-sheet-image, | |
| .messagebar-sheet-item { | |
| width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2); | |
| height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2); | |
| } | |
| } | |
| .messagebar-sheet-image .icon-checkbox, | |
| .messagebar-sheet-item .icon-checkbox, | |
| .messagebar-sheet-image .icon-radio, | |
| .messagebar-sheet-item .icon-radio { | |
| position: absolute; | |
| right: 8px; | |
| bottom: 8px; | |
| } | |
| .messagebar-sheet-image { | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| .messagebar-attachment-delete { | |
| display: block; | |
| position: absolute; | |
| border-radius: 50%; | |
| box-sizing: border-box; | |
| cursor: pointer; | |
| box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .messagebar-attachment-delete:after, | |
| .messagebar-attachment-delete:before { | |
| position: absolute; | |
| content: ''; | |
| left: 50%; | |
| top: 50%; | |
| } | |
| .messagebar-attachment-delete:after { | |
| transform: rotate(45deg); | |
| } | |
| .messagebar-attachment-delete:before { | |
| transform: rotate(-45deg); | |
| } | |
| .messagebar:not(.messagebar-sheet-visible) .messagebar-sheet { | |
| display: none; | |
| } | |
| .messagebar ~ .page-content, | |
| .messagebar ~ * .page-content { | |
| padding-bottom: calc(var(--f7-messagebar-height) + var(--f7-safe-area-bottom)); | |
| } | |
| .ios .messagebar a.link.icon-only:first-child { | |
| margin-left: -8px; | |
| } | |
| .ios .messagebar a.link.icon-only:last-child { | |
| margin-right: -8px; | |
| } | |
| .ios .messagebar a.link:not(.icon-only) + .messagebar-area { | |
| margin-left: 8px; | |
| } | |
| .ios .messagebar .messagebar-area + a.link:not(.icon-only) { | |
| margin-left: 8px; | |
| } | |
| .ios .messagebar-area { | |
| margin-top: 5px; | |
| margin-bottom: 5px; | |
| } | |
| .ios .messagebar-attachments { | |
| padding: 5px; | |
| border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0; | |
| border: 1px solid var(--f7-messagebar-attachments-border-color); | |
| border-bottom: none; | |
| } | |
| .ios .messagebar-attachments-visible .messagebar-attachments + textarea { | |
| border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius); | |
| } | |
| .ios .messagebar-attachment { | |
| font-size: 14px; | |
| } | |
| .ios .messagebar-attachment-delete { | |
| right: 5px; | |
| top: 5px; | |
| width: 20px; | |
| height: 20px; | |
| background: #7d7e80; | |
| border: 2px solid #fff; | |
| } | |
| .ios .messagebar-attachment-delete:after, | |
| .ios .messagebar-attachment-delete:before { | |
| width: 10px; | |
| height: 2px; | |
| background: #fff; | |
| margin-left: -5px; | |
| margin-top: -1px; | |
| } | |
| .md .messagebar-attachments { | |
| padding: 8px; | |
| border-bottom: 1px solid var(--f7-messagebar-attachments-border-color); | |
| } | |
| .md .messagebar-area { | |
| margin-top: 8px; | |
| margin-bottom: 8px; | |
| } | |
| .md .messagebar-sheet-image .icon-checkbox, | |
| .md .messagebar-sheet-item .icon-checkbox { | |
| border-color: #fff; | |
| background: rgba(255, 255, 255, 0.25); | |
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); | |
| } | |
| .md .messagebar-attachment-delete { | |
| right: 8px; | |
| top: 8px; | |
| width: 24px; | |
| height: 24px; | |
| background-color: var(--f7-theme-color); | |
| border-radius: 4px; | |
| } | |
| .md .messagebar-attachment-delete:after, | |
| .md .messagebar-attachment-delete:before { | |
| width: 14px; | |
| height: 2px; | |
| background: #fff; | |
| margin-left: -7px; | |
| margin-top: -1px; | |
| } | |
| /* === Swiper === */ | |
| .swiper-container { | |
| margin: 0 auto; | |
| position: relative; | |
| overflow: hidden; | |
| list-style: none; | |
| padding: 0; | |
| /* Fix of Webkit flickering */ | |
| z-index: 1; | |
| } | |
| .swiper-container-no-flexbox .swiper-slide { | |
| float: left; | |
| } | |
| .swiper-container-vertical > .swiper-wrapper { | |
| flex-direction: column; | |
| } | |
| .swiper-wrapper { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| display: flex; | |
| transition-property: transform; | |
| box-sizing: content-box; | |
| } | |
| .swiper-container-android .swiper-slide, | |
| .swiper-wrapper { | |
| transform: translate3d(0px, 0, 0); | |
| } | |
| .swiper-container-multirow > .swiper-wrapper { | |
| flex-wrap: wrap; | |
| } | |
| .swiper-container-free-mode > .swiper-wrapper { | |
| transition-timing-function: ease-out; | |
| margin: 0 auto; | |
| } | |
| .swiper-slide { | |
| flex-shrink: 0; | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| transition-property: transform; | |
| } | |
| .swiper-slide-invisible-blank { | |
| visibility: hidden; | |
| } | |
| /* Auto Height */ | |
| .swiper-container-autoheight, | |
| .swiper-container-autoheight .swiper-slide { | |
| height: auto; | |
| } | |
| .swiper-container-autoheight .swiper-wrapper { | |
| align-items: flex-start; | |
| transition-property: transform, height; | |
| } | |
| /* 3D Effects */ | |
| .swiper-container-3d { | |
| perspective: 1200px; | |
| } | |
| .swiper-container-3d .swiper-wrapper, | |
| .swiper-container-3d .swiper-slide, | |
| .swiper-container-3d .swiper-slide-shadow-left, | |
| .swiper-container-3d .swiper-slide-shadow-right, | |
| .swiper-container-3d .swiper-slide-shadow-top, | |
| .swiper-container-3d .swiper-slide-shadow-bottom, | |
| .swiper-container-3d .swiper-cube-shadow { | |
| transform-style: preserve-3d; | |
| } | |
| .swiper-container-3d .swiper-slide-shadow-left, | |
| .swiper-container-3d .swiper-slide-shadow-right, | |
| .swiper-container-3d .swiper-slide-shadow-top, | |
| .swiper-container-3d .swiper-slide-shadow-bottom { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| .swiper-container-3d .swiper-slide-shadow-left { | |
| background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | |
| } | |
| .swiper-container-3d .swiper-slide-shadow-right { | |
| background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | |
| } | |
| .swiper-container-3d .swiper-slide-shadow-top { | |
| background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | |
| } | |
| .swiper-container-3d .swiper-slide-shadow-bottom { | |
| background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | |
| } | |
| /* IE10 Windows Phone 8 Fixes */ | |
| .swiper-container-wp8-horizontal, | |
| .swiper-container-wp8-horizontal > .swiper-wrapper { | |
| touch-action: pan-y; | |
| } | |
| .swiper-container-wp8-vertical, | |
| .swiper-container-wp8-vertical > .swiper-wrapper { | |
| touch-action: pan-x; | |
| } | |
| /* a11y */ | |
| .swiper-container .swiper-notification { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| pointer-events: none; | |
| opacity: 0; | |
| z-index: -1000; | |
| } | |
| .swiper-container-coverflow .swiper-wrapper { | |
| /* Windows 8 IE 10 fix */ | |
| -ms-perspective: 1200px; | |
| } | |
| .swiper-container-cube { | |
| overflow: visible; | |
| } | |
| .swiper-container-cube .swiper-slide { | |
| pointer-events: none; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| z-index: 1; | |
| visibility: hidden; | |
| transform-origin: 0 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .swiper-container-cube .swiper-slide .swiper-slide { | |
| pointer-events: none; | |
| } | |
| .swiper-container-cube.swiper-container-rtl .swiper-slide { | |
| transform-origin: 100% 0; | |
| } | |
| .swiper-container-cube .swiper-slide-active, | |
| .swiper-container-cube .swiper-slide-active .swiper-slide-active { | |
| pointer-events: auto; | |
| } | |
| .swiper-container-cube .swiper-slide-active, | |
| .swiper-container-cube .swiper-slide-next, | |
| .swiper-container-cube .swiper-slide-prev, | |
| .swiper-container-cube .swiper-slide-next + .swiper-slide { | |
| pointer-events: auto; | |
| visibility: visible; | |
| } | |
| .swiper-container-cube .swiper-slide-shadow-top, | |
| .swiper-container-cube .swiper-slide-shadow-bottom, | |
| .swiper-container-cube .swiper-slide-shadow-left, | |
| .swiper-container-cube .swiper-slide-shadow-right { | |
| z-index: 0; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| } | |
| .swiper-container-cube .swiper-cube-shadow { | |
| position: absolute; | |
| left: 0; | |
| bottom: 0px; | |
| width: 100%; | |
| height: 100%; | |
| background: #000; | |
| opacity: 0.6; | |
| -webkit-filter: blur(50px); | |
| filter: blur(50px); | |
| z-index: 0; | |
| } | |
| .swiper-container-fade.swiper-container-free-mode .swiper-slide { | |
| transition-timing-function: ease-out; | |
| } | |
| .swiper-container-fade .swiper-slide { | |
| pointer-events: none; | |
| transition-property: opacity; | |
| } | |
| .swiper-container-fade .swiper-slide .swiper-slide { | |
| pointer-events: none; | |
| } | |
| .swiper-container-fade .swiper-slide-active, | |
| .swiper-container-fade .swiper-slide-active .swiper-slide-active { | |
| pointer-events: auto; | |
| } | |
| .swiper-container-flip { | |
| overflow: visible; | |
| } | |
| .swiper-container-flip .swiper-slide { | |
| pointer-events: none; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| z-index: 1; | |
| } | |
| .swiper-container-flip .swiper-slide .swiper-slide { | |
| pointer-events: none; | |
| } | |
| .swiper-container-flip .swiper-slide-active, | |
| .swiper-container-flip .swiper-slide-active .swiper-slide-active { | |
| pointer-events: auto; | |
| } | |
| .swiper-container-flip .swiper-slide-shadow-top, | |
| .swiper-container-flip .swiper-slide-shadow-bottom, | |
| .swiper-container-flip .swiper-slide-shadow-left, | |
| .swiper-container-flip .swiper-slide-shadow-right { | |
| z-index: 0; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| } | |
| /* Scrollbar */ | |
| .swiper-scrollbar { | |
| border-radius: 10px; | |
| position: relative; | |
| -ms-touch-action: none; | |
| background: rgba(0, 0, 0, 0.1); | |
| } | |
| .swiper-container-horizontal > .swiper-scrollbar { | |
| position: absolute; | |
| left: 1%; | |
| bottom: 3px; | |
| z-index: 50; | |
| height: 5px; | |
| width: 98%; | |
| } | |
| .swiper-container-vertical > .swiper-scrollbar { | |
| position: absolute; | |
| right: 3px; | |
| top: 1%; | |
| z-index: 50; | |
| width: 5px; | |
| height: 98%; | |
| } | |
| .swiper-scrollbar-drag { | |
| height: 100%; | |
| width: 100%; | |
| position: relative; | |
| background: rgba(0, 0, 0, 0.5); | |
| border-radius: 10px; | |
| left: 0; | |
| top: 0; | |
| } | |
| .swiper-scrollbar-cursor-drag { | |
| cursor: move; | |
| } | |
| .swiper-scrollbar-lock { | |
| display: none; | |
| } | |
| .swiper-zoom-container { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .swiper-zoom-container > img, | |
| .swiper-zoom-container > svg, | |
| .swiper-zoom-container > canvas { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| } | |
| .swiper-slide-zoomed { | |
| cursor: move; | |
| } | |
| .swiper-button-prev, | |
| .swiper-button-next { | |
| position: absolute; | |
| top: 50%; | |
| width: 27px; | |
| height: 44px; | |
| line-height: 44px; | |
| text-align: center; | |
| margin-top: -22px; | |
| z-index: 10; | |
| cursor: pointer; | |
| color: var(--f7-theme-color); | |
| } | |
| .swiper-button-prev:after, | |
| .swiper-button-next:after { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| text-align: center; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 20px; | |
| font-size: 44px; | |
| } | |
| .swiper-button-prev.swiper-button-disabled, | |
| .swiper-button-next.swiper-button-disabled { | |
| opacity: 0.35; | |
| cursor: auto; | |
| pointer-events: none; | |
| } | |
| .swiper-button-prev, | |
| .swiper-container-rtl .swiper-button-next { | |
| left: 10px; | |
| right: auto; | |
| } | |
| .swiper-button-prev:after, | |
| .swiper-container-rtl .swiper-button-next:after { | |
| content: 'swiper_prev'; | |
| } | |
| .swiper-button-next, | |
| .swiper-container-rtl .swiper-button-prev { | |
| right: 10px; | |
| left: auto; | |
| } | |
| .swiper-button-next:after, | |
| .swiper-container-rtl .swiper-button-prev:after { | |
| content: 'swiper_next'; | |
| } | |
| .swiper-pagination { | |
| position: absolute; | |
| text-align: center; | |
| transition: 300ms opacity; | |
| transform: translate3d(0, 0, 0); | |
| z-index: 10; | |
| } | |
| .swiper-pagination.swiper-pagination-hidden { | |
| opacity: 0; | |
| } | |
| .swiper-pagination-fraction, | |
| .swiper-pagination-custom, | |
| .swiper-container-horizontal > .swiper-pagination-bullets { | |
| bottom: 10px; | |
| left: 0; | |
| width: 100%; | |
| } | |
| .swiper-pagination-bullets-dynamic { | |
| overflow: hidden; | |
| font-size: 0; | |
| } | |
| .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { | |
| transform: scale(0.33); | |
| position: relative; | |
| } | |
| .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { | |
| transform: scale(1); | |
| } | |
| .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { | |
| transform: scale(0.66); | |
| } | |
| .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { | |
| transform: scale(0.33); | |
| } | |
| .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { | |
| transform: scale(0.66); | |
| } | |
| .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { | |
| transform: scale(0.33); | |
| } | |
| .swiper-pagination-bullet { | |
| width: 8px; | |
| height: 8px; | |
| display: inline-block; | |
| border-radius: 100%; | |
| background: #000; | |
| opacity: 0.2; | |
| } | |
| button.swiper-pagination-bullet { | |
| border: none; | |
| margin: 0; | |
| padding: 0; | |
| box-shadow: none; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| } | |
| .swiper-pagination-clickable .swiper-pagination-bullet { | |
| cursor: pointer; | |
| } | |
| .swiper-pagination-bullet-active { | |
| opacity: 1; | |
| background: var(--f7-theme-color); | |
| } | |
| .swiper-container-vertical > .swiper-pagination-bullets { | |
| right: 10px; | |
| top: 50%; | |
| transform: translate3d(0px, -50%, 0); | |
| } | |
| .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { | |
| margin: 6px 0; | |
| display: block; | |
| } | |
| .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 8px; | |
| } | |
| .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { | |
| display: inline-block; | |
| transition: 200ms transform, 200ms top; | |
| } | |
| .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { | |
| margin: 0 4px; | |
| } | |
| .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { | |
| left: 50%; | |
| transform: translateX(-50%); | |
| white-space: nowrap; | |
| } | |
| .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { | |
| transition: 200ms transform, 200ms left; | |
| } | |
| .swiper-pagination-progressbar { | |
| background: rgba(0, 0, 0, 0.25); | |
| position: absolute; | |
| } | |
| .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { | |
| background: var(--f7-theme-color); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| transform: scale(0); | |
| transform-origin: left top; | |
| } | |
| .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { | |
| transform-origin: right top; | |
| } | |
| .swiper-container-horizontal > .swiper-pagination-progressbar, | |
| .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { | |
| width: 100%; | |
| height: 4px; | |
| left: 0; | |
| top: 0; | |
| } | |
| .swiper-container-vertical > .swiper-pagination-progressbar, | |
| .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { | |
| width: 4px; | |
| height: 100%; | |
| left: 0; | |
| top: 0; | |
| } | |
| .preloader.swiper-lazy-preloader { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| z-index: 10; | |
| width: 32px; | |
| height: 32px; | |
| margin-left: -16px; | |
| margin-top: -16px; | |
| } | |
| /* === Photo Browser === */ | |
| :root { | |
| --f7-photobrowser-bg-color: #fff; | |
| --f7-photobrowser-bars-bg-image: none; | |
| /* | |
| --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95); | |
| --f7-photobrowser-bars-text-color: var(--f7-bars-text-color); | |
| --f7-photobrowser-bars-link-color: var(--f7-bars-link-color); | |
| */ | |
| --f7-photobrowser-caption-font-size: 14px; | |
| --f7-photobrowser-caption-light-text-color: #000; | |
| --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8); | |
| --f7-photobrowser-caption-dark-text-color: #fff; | |
| --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8); | |
| --f7-photobrowser-exposed-bg-color: #000; | |
| --f7-photobrowser-dark-bg-color: #000; | |
| --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8); | |
| --f7-photobrowser-dark-bars-text-color: #fff; | |
| --f7-photobrowser-dark-bars-link-color: #fff; | |
| } | |
| .photo-browser { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 400; | |
| } | |
| .photo-browser-standalone.modal-in { | |
| transition-duration: 0ms; | |
| animation: photo-browser-in 400ms; | |
| } | |
| .photo-browser-standalone.modal-out { | |
| transition-duration: 0ms; | |
| animation: photo-browser-out 400ms; | |
| } | |
| .photo-browser-standalone.modal-out.swipe-close-to-bottom, | |
| .photo-browser-standalone.modal-out.swipe-close-to-top { | |
| animation: none; | |
| } | |
| .photo-browser-popup.modal-out.swipe-close-to-bottom, | |
| .photo-browser-popup.modal-out.swipe-close-to-top { | |
| transition-duration: 300ms; | |
| } | |
| .photo-browser-popup.modal-out.swipe-close-to-bottom { | |
| transform: translate3d(0, 100%, 0); | |
| } | |
| .photo-browser-popup.modal-out.swipe-close-to-top { | |
| transform: translate3d(0, -100vh, 0); | |
| } | |
| .photo-browser-page { | |
| background: none; | |
| } | |
| .photo-browser-page .toolbar { | |
| transform: none; | |
| } | |
| .photo-browser-popup { | |
| background: none; | |
| } | |
| .photo-browser-of { | |
| margin: 0 5px; | |
| } | |
| .photo-browser-captions { | |
| pointer-events: none; | |
| position: absolute; | |
| left: 0; | |
| width: 100%; | |
| bottom: var(--f7-safe-area-bottom); | |
| z-index: 10; | |
| opacity: 1; | |
| transition: 400ms; | |
| } | |
| .photo-browser-captions.photo-browser-captions-exposed { | |
| opacity: 0; | |
| } | |
| .toolbar ~ .photo-browser-captions { | |
| bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom)); | |
| transform: translate3d(0, 0px, 0); | |
| } | |
| .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed { | |
| transform: translate3d(0, 0px, 0); | |
| } | |
| .photo-browser-caption { | |
| box-sizing: border-box; | |
| transition: 300ms; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| opacity: 0; | |
| padding: 4px 5px; | |
| width: 100%; | |
| text-align: center; | |
| font-size: var(--f7-photobrowser-caption-font-size); | |
| } | |
| .photo-browser-caption:empty { | |
| display: none; | |
| } | |
| .photo-browser-caption.photo-browser-caption-active { | |
| opacity: 1; | |
| } | |
| .photo-browser-captions-light .photo-browser-caption { | |
| color: var(--f7-photobrowser-caption-light-text-color); | |
| background: var(--f7-photobrowser-caption-light-bg-color); | |
| } | |
| .photo-browser-captions-dark .photo-browser-caption { | |
| color: var(--f7-photobrowser-caption-dark-text-color); | |
| background: var(--f7-photobrowser-caption-dark-bg-color); | |
| } | |
| .photo-browser-swiper-container { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| background: var(--f7-photobrowser-bg-color); | |
| transition: 400ms; | |
| transition-property: background-color; | |
| } | |
| .photo-browser-prev.swiper-button-disabled, | |
| .photo-browser-next.swiper-button-disabled { | |
| opacity: 0.3; | |
| pointer-events: none; | |
| } | |
| .photo-browser-slide { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-shrink: 0; | |
| box-sizing: border-box; | |
| } | |
| .photo-browser-slide.photo-browser-transitioning { | |
| transition: 400ms; | |
| transition-property: transform; | |
| } | |
| .photo-browser-slide span.swiper-zoom-container { | |
| display: none; | |
| } | |
| .photo-browser-slide img { | |
| width: auto; | |
| height: auto; | |
| max-width: 100%; | |
| max-height: 100%; | |
| display: none; | |
| } | |
| .photo-browser-slide.swiper-slide-active span.swiper-zoom-container, | |
| .photo-browser-slide.swiper-slide-next span.swiper-zoom-container, | |
| .photo-browser-slide.swiper-slide-prev span.swiper-zoom-container { | |
| display: flex; | |
| } | |
| .photo-browser-slide.swiper-slide-active img, | |
| .photo-browser-slide.swiper-slide-next img, | |
| .photo-browser-slide.swiper-slide-prev img { | |
| display: inline; | |
| } | |
| .photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader, | |
| .photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader, | |
| .photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader { | |
| display: block; | |
| } | |
| .photo-browser-slide iframe { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .photo-browser-slide .preloader { | |
| display: none; | |
| position: absolute; | |
| width: 42px; | |
| height: 42px; | |
| margin-left: -21px; | |
| margin-top: -21px; | |
| left: 50%; | |
| top: 50%; | |
| } | |
| .photo-browser-page .navbar, | |
| .view.with-photo-browser-page .navbar, | |
| .photo-browser-page .toolbar, | |
| .view.with-photo-browser-page .toolbar { | |
| background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95)); | |
| background-image: var(--f7-photobrowser-bars-bg-image); | |
| transition: 400ms; | |
| color: var(--f7-photobrowser-bars-text-color, var(--f7-bars-text-color)); | |
| } | |
| .photo-browser-page .navbar a, | |
| .view.with-photo-browser-page .navbar a, | |
| .photo-browser-page .toolbar a, | |
| .view.with-photo-browser-page .toolbar a { | |
| color: var(--f7-photobrowser-bars-link-color, var(--f7-bars-link-color, var(--f7-theme-color))); | |
| } | |
| .photo-browser-exposed .navbar, | |
| .photo-browser-exposed .toolbar { | |
| opacity: 0; | |
| visibility: hidden; | |
| pointer-events: none; | |
| } | |
| .photo-browser-exposed .toolbar ~ .photo-browser-captions { | |
| transform: translate3d(0, var(--f7-toolbar-height), 0); | |
| } | |
| .photo-browser-exposed .photo-browser-swiper-container { | |
| background: var(--f7-photobrowser-exposed-bg-color); | |
| } | |
| .photo-browser-exposed .photo-browser-caption { | |
| color: var(--f7-photobrowser-caption-dark-text-color); | |
| background: var(--f7-photobrowser-caption-dark-bg-color); | |
| } | |
| .view.with-photo-browser-page-exposed .navbar { | |
| opacity: 0; | |
| } | |
| .photo-browser-dark .photo-browser-swiper-container, | |
| .photo-browser-page-dark .photo-browser-swiper-container, | |
| .view.with-photo-browser-page-dark .photo-browser-swiper-container { | |
| background: var(--f7-photobrowser-dark-bg-color); | |
| } | |
| .photo-browser-dark .navbar, | |
| .photo-browser-page-dark .navbar, | |
| .view.with-photo-browser-page-dark .navbar, | |
| .photo-browser-dark .toolbar, | |
| .photo-browser-page-dark .toolbar, | |
| .view.with-photo-browser-page-dark .toolbar { | |
| --f7-touch-ripple-color: var(--f7-touch-ripple-white); | |
| --f7-link-highlight-color: var(--f7-link-highlight-white); | |
| background: var(--f7-photobrowser-dark-bars-bg-color); | |
| color: var(--f7-photobrowser-dark-bars-text-color); | |
| } | |
| .photo-browser-dark .navbar:before, | |
| .photo-browser-page-dark .navbar:before, | |
| .view.with-photo-browser-page-dark .navbar:before, | |
| .photo-browser-dark .toolbar:before, | |
| .photo-browser-page-dark .toolbar:before, | |
| .view.with-photo-browser-page-dark .toolbar:before { | |
| display: none !important; | |
| } | |
| .photo-browser-dark .navbar:after, | |
| .photo-browser-page-dark .navbar:after, | |
| .view.with-photo-browser-page-dark .navbar:after, | |
| .photo-browser-dark .toolbar:after, | |
| .photo-browser-page-dark .toolbar:after, | |
| .view.with-photo-browser-page-dark .toolbar:after { | |
| display: none !important; | |
| } | |
| .photo-browser-dark .navbar a, | |
| .photo-browser-page-dark .navbar a, | |
| .view.with-photo-browser-page-dark .navbar a, | |
| .photo-browser-dark .toolbar a, | |
| .photo-browser-page-dark .toolbar a, | |
| .view.with-photo-browser-page-dark .toolbar a { | |
| color: var(--f7-photobrowser-dark-bars-link-color); | |
| } | |
| @keyframes photo-browser-in { | |
| 0% { | |
| transform: translate3d(0, 0, 0) scale(0.5); | |
| opacity: 0; | |
| } | |
| 50% { | |
| transform: translate3d(0, 0, 0) scale(1.05); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0) scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes photo-browser-out { | |
| 0% { | |
| transform: translate3d(0, 0, 0) scale(1); | |
| opacity: 1; | |
| } | |
| 50% { | |
| transform: translate3d(0, 0, 0) scale(1.05); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0) scale(0.5); | |
| opacity: 0; | |
| } | |
| } | |
| /* === Notifications === */ | |
| :root { | |
| --f7-notification-max-width: 568px; | |
| } | |
| .ios { | |
| --f7-notification-margin: 8px; | |
| --f7-notification-padding: 10px; | |
| --f7-notification-border-radius: 12px; | |
| --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7); | |
| --f7-notification-bg-color: rgba(250, 250, 250, 0.95); | |
| --f7-notification-translucent-bg-color-ios: rgba(255, 255, 255, 0.65); | |
| --f7-notification-icon-size: 20px; | |
| --f7-notification-title-color: #000; | |
| --f7-notification-title-font-size: 13px; | |
| --f7-notification-title-text-transform: uppercase; | |
| --f7-notification-title-line-height: 1.4; | |
| --f7-notification-title-font-weight: 400; | |
| --f7-notification-title-letter-spacing: 0.02em; | |
| --f7-notification-title-right-color: #444a51; | |
| --f7-notification-title-right-font-size: 13px; | |
| --f7-notification-subtitle-color: #000; | |
| --f7-notification-subtitle-font-size: 15px; | |
| --f7-notification-subtitle-text-transform: none; | |
| --f7-notification-subtitle-line-height: 1.35; | |
| --f7-notification-subtitle-font-weight: 600; | |
| --f7-notification-text-color: #000; | |
| --f7-notification-text-font-size: 15px; | |
| --f7-notification-text-text-transform: none; | |
| --f7-notification-text-line-height: 1.2; | |
| --f7-notification-text-font-weight: 400; | |
| } | |
| .md { | |
| --f7-notification-margin: 0px; | |
| --f7-notification-padding: 16px; | |
| --f7-notification-border-radius: 0px; | |
| --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24); | |
| --f7-notification-bg-color: #fff; | |
| --f7-notification-icon-size: 16px; | |
| --f7-notification-title-color: var(--f7-theme-color); | |
| --f7-notification-title-font-size: 12px; | |
| --f7-notification-title-text-transform: none; | |
| --f7-notification-title-line-height: 1; | |
| --f7-notification-title-font-weight: 400; | |
| --f7-notification-title-right-color: #757575; | |
| --f7-notification-title-right-font-size: 12px; | |
| --f7-notification-subtitle-color: #212121; | |
| --f7-notification-subtitle-font-size: 14px; | |
| --f7-notification-subtitle-text-transform: none; | |
| --f7-notification-subtitle-line-height: 1.35; | |
| --f7-notification-subtitle-font-weight: 400; | |
| --f7-notification-text-color: #757575; | |
| --f7-notification-text-font-size: 14px; | |
| --f7-notification-text-text-transform: none; | |
| --f7-notification-text-line-height: 1.35; | |
| --f7-notification-text-font-weight: 400; | |
| } | |
| .notification { | |
| position: absolute; | |
| left: var(--f7-notification-margin); | |
| top: var(--f7-notification-margin); | |
| width: calc(100% - var(--f7-notification-margin) * 2); | |
| z-index: 20000; | |
| font-size: 14px; | |
| margin: 0; | |
| border: none; | |
| display: none; | |
| box-sizing: border-box; | |
| transition-property: transform; | |
| direction: ltr; | |
| max-width: var(--f7-notification-max-width); | |
| padding: var(--f7-notification-padding); | |
| border-radius: var(--f7-notification-border-radius); | |
| box-shadow: var(--f7-notification-box-shadow); | |
| background: var(--f7-notification-bg-color); | |
| margin-top: var(--f7-statusbar-height); | |
| --f7-link-highlight-color: var(--f7-link-highlight-black); | |
| --f7-touch-ripple-color: var(--f7-touch-ripple-black); | |
| } | |
| @media (min-width: 568px) { | |
| .notification { | |
| left: 50%; | |
| width: var(--f7-notification-max-width); | |
| margin-left: calc(-1 * var(--f7-notification-max-width) / 2); | |
| } | |
| } | |
| .notification-title { | |
| color: var(--f7-notification-title-color, var(--f7-theme-color)); | |
| font-size: var(--f7-notification-title-font-size); | |
| text-transform: var(--f7-notification-title-text-transform); | |
| line-height: var(--f7-notification-title-line-height); | |
| font-weight: var(--f7-notification-title-font-weight); | |
| letter-spacing: var(--f7-notification-title-letter-spacing); | |
| } | |
| .notification-subtitle { | |
| color: var(--f7-notification-subtitle-color); | |
| font-size: var(--f7-notification-subtitle-font-size); | |
| text-transform: var(--f7-notification-subtitle-text-transform); | |
| line-height: var(--f7-notification-subtitle-line-height); | |
| font-weight: var(--f7-notification-subtitle-font-weight); | |
| } | |
| .notification-text { | |
| color: var(--f7-notification-text-color); | |
| font-size: var(--f7-notification-text-font-size); | |
| text-transform: var(--f7-notification-text-text-transform); | |
| line-height: var(--f7-notification-text-line-height); | |
| font-weight: var(--f7-notification-text-font-weight); | |
| } | |
| .notification-title-right-text { | |
| color: var(--f7-notification-title-right-color); | |
| font-size: var(--f7-notification-title-right-font-size); | |
| } | |
| .notification-icon { | |
| font-size: 0; | |
| line-height: var(--f7-notification-icon-size); | |
| } | |
| .notification-icon i, | |
| .notification-icon { | |
| width: var(--f7-notification-icon-size) !important; | |
| height: var(--f7-notification-icon-size) !important; | |
| } | |
| .notification-icon i { | |
| font-size: var(--f7-notification-icon-size); | |
| } | |
| .notification-header { | |
| display: flex; | |
| justify-content: flex-start; | |
| align-items: center; | |
| } | |
| .notification-close-button { | |
| margin-left: auto; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .notification-close-button:after { | |
| font-family: 'framework7-core-icons'; | |
| font-weight: normal; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| white-space: nowrap; | |
| word-wrap: normal; | |
| direction: ltr; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| -moz-osx-font-smoothing: grayscale; | |
| -moz-font-feature-settings: "liga"; | |
| font-feature-settings: "liga"; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| font-size: 20px; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| text-align: center; | |
| } | |
| .ios .notification { | |
| transition-duration: 450ms; | |
| transform: translate3d(0%, -200%, 0); | |
| } | |
| @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) { | |
| .ios .notification { | |
| background: var(--f7-notification-translucent-bg-color-ios); | |
| -webkit-backdrop-filter: blur(10px); | |
| backdrop-filter: blur(10px); | |
| } | |
| } | |
| .ios .notification.modal-in { | |
| transform: translate3d(0%, 0%, 0); | |
| opacity: 1; | |
| } | |
| .ios .notification.modal-out { | |
| transform: translate3d(0%, -200%, 0); | |
| } | |
| .ios .notification-icon { | |
| margin-right: 8px; | |
| } | |
| .ios .notification-header + .notification-content { | |
| margin-top: 10px; | |
| } | |
| .ios .notification-title-right-text { | |
| margin-right: 6px; | |
| margin-left: auto; | |
| } | |
| .ios .notification-title-right-text + .notification-close-button { | |
| margin-left: 10px; | |
| } | |
| .ios .notification-close-button { | |
| font-size: 14px; | |
| width: 20px; | |
| height: 20px; | |
| opacity: 0.3; | |
| transition-duration: 300ms; | |
| } | |
| .ios .notification-close-button.active-state { | |
| transition-duration: 0ms; | |
| opacity: 0.1; | |
| } | |
| .ios .notification-close-button:after { | |
| color: #000; | |
| content: 'notification_close_ios'; | |
| font-size: 0.65em; | |
| line-height: 44px; | |
| width: 44px; | |
| height: 44px; | |
| margin-left: -22px; | |
| margin-top: -22px; | |
| } | |
| .md .notification { | |
| transform: translate3d(0, -150%, 0); | |
| } | |
| .md .notification.modal-in { | |
| transition-duration: 0ms; | |
| animation: notification-md-in 400ms ease-out; | |
| transform: translate3d(0, 0%, 0); | |
| } | |
| .md .notification.modal-in.notification-transitioning { | |
| transition-duration: 200ms; | |
| } | |
| .md .notification.modal-out { | |
| animation: none; | |
| transition-duration: 200ms; | |
| transition-timing-function: ease-in; | |
| transform: translate3d(0, -150%, 0); | |
| } | |
| .md .notification-icon { | |
| margin-right: 8px; | |
| } | |
| .md .notification-subtitle + .notification-text { | |
| margin-top: 2px; | |
| } | |
| .md .notification-header + .notification-content { | |
| margin-top: 6px; | |
| } | |
| .md .notification-title-right-text { | |
| margin-left: 4px; | |
| } | |
| .md .notification-title-right-text:before { | |
| content: ''; | |
| width: 3px; | |
| height: 3px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin-right: 4px; | |
| background: var(--f7-notification-title-right-color); | |
| } | |
| .md .notification-close-button { | |
| width: 16px; | |
| height: 16px; | |
| transition-duration: 300ms; | |
| } | |
| .md .notification-close-button:before { | |
| content: ''; | |
| width: 152%; | |
| height: 152%; | |
| position: absolute; | |
| left: -26%; | |
| top: -26%; | |
| background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: 100% 100%; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition-duration: 600ms; | |
| } | |
| .md .notification-close-button.active-state:before { | |
| opacity: 1; | |
| transition-duration: 150ms; | |
| } | |
| .md .notification-close-button:before, | |
| .md .notification-close-button:after { | |
| width: 48px; | |
| height: 48px; | |
| left: 50%; | |
| top: 50%; | |
| margin-left: -24px; | |
| margin-top: -24px; | |
| } | |
| .md .notification-close-button:after { | |
| color: #737373; | |
| content: 'delete_md'; | |
| line-height: 48px; | |
| font-size: 14px; | |
| } | |
| @keyframes notification-md-in { | |
| 0% { | |
| transform: translate3d(0, -150%, 0); | |
| } | |
| 50% { | |
| transform: translate3d(0, 10%, 0); | |
| } | |
| 100% { | |
| transform: translate3d(0, 0%, 0); | |
| } | |
| } | |
| /* === Autocomplete === */ | |
| :root { | |
| --f7-autocomplete-dropdown-bg-color: #fff; | |
| --f7-autocomplete-dropdown-placeholder-color: #a9a9a9; | |
| --f7-autocomplete-dropdown-preloader-size: 20px; | |
| } | |
| .ios { | |
| --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); | |
| --f7-autocomplete-dropdown-text-color: #000; | |
| --f7-autocomplete-dropdown-text-matching-color: #000; | |
| --f7-autocomplete-dropdown-text-matching-font-weight: 600; | |
| } | |
| .ios .theme-dark, | |
| .ios.theme-dark { | |
| --f7-autocomplete-dropdown-bg-color: #1c1c1d; | |
| --f7-autocomplete-dropdown-text-color: #fff; | |
| --f7-autocomplete-dropdown-text-matching-color: #fff; | |
| } | |
| .md { | |
| --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); | |
| --f7-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54); | |
| --f7-autocomplete-dropdown-text-matching-color: #212121; | |
| --f7-autocomplete-dropdown-text-matching-font-weight: 400; | |
| } | |
| .md .theme-dark, | |
| .md.theme-dark { | |
| --f7-autocomplete-dropdown-bg-color: #1c1c1d; | |
| --f7-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54); | |
| --f7-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87); | |
| } | |
| .autocomplete-page .autocomplete-found { | |
| display: block; | |
| } | |
| .autocomplete-page .autocomplete-not-found { | |
| display: none; | |
| } | |
| .autocomplete-page .autocomplete-values { | |
| display: block; | |
| } | |
| .autocomplete-page .list ul:empty { | |
| display: none; | |
| } | |
| .autocomplete-preloader:not(.autocomplete-preloader-visible) { | |
| visibility: hidden; | |
| } | |
| .autocomplete-preloader:not(.autocomplete-preloader-visible), | |
| .autocomplete-preloader:not(.autocomplete-preloader-visible) * { | |
| animation: none; | |
| } | |
| .autocomplete-dropdown { | |
| background: var(--f7-autocomplete-dropdown-bg-color); | |
| box-shadow: var(--f7-autocomplete-dropdown-box-shadow); | |
| box-sizing: border-box; | |
| position: absolute; | |
| z-index: 500; | |
| width: 100%; | |
| left: 0; | |
| } | |
| .autocomplete-dropdown .autocomplete-dropdown-inner { | |
| position: relative; | |
| will-change: scroll-position; | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| .autocomplete-dropdown .autocomplete-preloader { | |
| display: none; | |
| position: absolute; | |
| bottom: 100%; | |
| width: var(--f7-autocomplete-dropdown-preloader-size); | |
| height: var(--f7-autocomplete-dropdown-preloader-size); | |
| } | |
| .autocomplete-dropdown .autocomplete-preloader-visible { | |
| display: block; | |
| } | |
| .autocomplete-dropdown .autocomplete-dropdown-placeholder { | |
| color: var(--f7-autocomplete-dropdown-placeholder-color); | |
| } | |
| .autocomplete-dropdown .list { | |
| margin: 0; | |
| color: var(--f7-autocomplete-dropdown-text-color); | |
| } | |
| .autocomplete-dropdown .list b { | |
| color: var(--f7-autocomplete-dropdown-text-matching-color); | |
| font-weight: var(--f7-autocomplete-dropdown-text-matching-font-weight); | |
| } | |
| .autocomplete-dropdown .list ul { | |
| background: none !important; | |
| } | |
| .autocomplete-dropdown .list ul:before { | |
| display: none !important; | |
| } | |
| .autocomplete-dropdown .list ul:after { | |
| display: none !important; | |
| } | |
| .searchbar-input-wrap .autocomplete-dropdown { | |
| background-color: var(--f7-searchbar-input-bg-color, var(--f7-searchbar-bg-color)); | |
| border-radius: var(--f7-searchbar-input-border-radius); | |
| } | |
| .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder { | |
| color: var(--f7-searchbar-placeholder-color); | |
| } | |
| .searchbar-input-wrap .autocomplete-dropdown li:last-child { | |
| border-radius: 0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .searchbar-input-wrap .autocomplete-dropdown .item-content { | |
| padding-left: var(--f7-searchbar-input-padding-left); | |
| } | |
| .list .item-content-dropdown-expanded .item-title.item-label { | |
| width: 0; | |
| flex-shrink: 10; | |
| overflow: hidden; | |
| } | |
| .list .item-content-dropdown-expanded .item-title.item-label + .item-input-wrap { | |
| margin-left: 0; | |
| } | |
| .list .item-content-dropdown-expanded .item-input-wrap { | |
| width: 100%; | |
| } | |
| .ios .autocomplete-dropdown .autocomplete-preloader { | |
| right: 15px; | |
| margin-bottom: 12px; | |
| } | |
| .ios .searchbar-input-wrap .autocomplete-dropdown { | |
| margin-top: calc(-1 * var(--f7-searchbar-input-height)); | |
| top: 100%; | |
| z-index: 20; | |
| } | |
| .ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner { | |
| padding-top: var(--f7-searchbar-input-height); | |
| } | |
| .md .autocomplete-page .navbar .autocomplete-preloader { | |
| margin-right: 8px; | |
| } | |
| .md .autocomplete-dropdown .autocomplete-preloader { | |
| right: 16px; | |
| margin-bottom: 8px; | |
| } | |
| .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-gap, | |
| .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-half-circle { | |
| border-width: 3px; | |
| } | |
| /* === Tooltip === */ | |
| :root { | |
| --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87); | |
| --f7-tooltip-text-color: #fff; | |
| --f7-tooltip-border-radius: 4px; | |
| --f7-tooltip-padding: 8px 16px; | |
| --f7-tooltip-font-size: 14px; | |
| --f7-tooltip-font-weight: 500; | |
| --f7-tooltip-desktop-padding: 6px 8px; | |
| --f7-tooltip-desktop-font-size: 12px; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| z-index: 20000; | |
| background: var(--f7-tooltip-bg-color); | |
| border-radius: var(--f7-tooltip-border-radius); | |
| padding: var(--f7-tooltip-padding); | |
| color: var(--f7-tooltip-text-color); | |
| font-size: var(--f7-tooltip-font-size); | |
| font-weight: var(--f7-tooltip-font-weight); | |
| box-sizing: border-box; | |
| line-height: 1.2; | |
| opacity: 0; | |
| transform: scale(0.9); | |
| transition-duration: 150ms; | |
| transition-property: opacity, transform; | |
| z-index: 99000; | |
| } | |
| .tooltip.tooltip-in { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| .tooltip.tooltip-out { | |
| opacity: 0; | |
| transform: scale(1); | |
| } | |
| .device-desktop .tooltip { | |
| font-size: var(--f7-tooltip-desktop-font-size); | |
| padding: var(--f7-tooltip-desktop-padding); | |
| } | |
| /* === Gauge === */ | |
| .gauge { | |
| position: relative; | |
| text-align: center; | |
| margin-left: auto; | |
| margin-right: auto; | |
| display: inline-block; | |
| } | |
| .gauge-svg, | |
| .gauge svg { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| .gauge-svg circle, | |
| .gauge svg circle, | |
| .gauge-svg path, | |
| .gauge svg path { | |
| transition-duration: 400ms; | |
| } | |
| /* === Skeleton === */ | |
| :root { | |
| --f7-skeleton-color: #ccc; | |
| } | |
| .theme-dark { | |
| --f7-skeleton-color: #515151; | |
| } | |
| .skeleton-text { | |
| font-family: 'framework7-skeleton' !important; | |
| } | |
| .skeleton-text, | |
| .skeleton-text * { | |
| color: var(--f7-skeleton-color) !important; | |
| font-weight: normal !important; | |
| font-style: normal !important; | |
| letter-spacing: -0.015em !important; | |
| } | |
| .skeleton-block { | |
| height: 1em; | |
| background: var(--f7-skeleton-color) !important; | |
| width: 100%; | |
| } | |
| .skeleton-effect-fade { | |
| animation: skeleton-effect-fade 1s infinite; | |
| } | |
| .skeleton-effect-blink { | |
| -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%); | |
| mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%); | |
| -webkit-mask-size: 200% 100%; | |
| mask-size: 200% 100%; | |
| -webkit-mask-repeat: repeat; | |
| mask-repeat: repeat; | |
| -webkit-mask-position: 50% top; | |
| mask-position: 50% top; | |
| animation: skeleton-effect-blink 1s infinite; | |
| } | |
| .skeleton-effect-pulse { | |
| animation: skeleton-effect-pulse 1s infinite; | |
| } | |
| @keyframes skeleton-effect-fade { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.2; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes skeleton-effect-blink { | |
| 0% { | |
| -webkit-mask-position: 50% top; | |
| mask-position: 50% top; | |
| } | |
| 100% { | |
| -webkit-mask-position: -150% top; | |
| mask-position: -150% top; | |
| } | |
| } | |
| @keyframes skeleton-effect-pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 40% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(0.975); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| /* === Menu === */ | |
| :root { | |
| --f7-menu-text-color: #fff; | |
| --f7-menu-font-size: 16px; | |
| --f7-menu-font-weight: 500; | |
| --f7-menu-line-height: 1.2; | |
| --f7-menu-bg-color: rgba(0, 0, 0, 0.9); | |
| --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9); | |
| --f7-menu-item-padding-horizontal: 12px; | |
| --f7-menu-item-spacing: 6px; | |
| --f7-menu-item-height: 40px; | |
| --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4); | |
| --f7-menu-item-border-radius: 8px; | |
| /* | |
| --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color); | |
| */ | |
| --f7-menu-dropdown-item-height: 28px; | |
| --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2); | |
| --f7-menu-dropdown-padding-vertical: 6px; | |
| /* | |
| --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius); | |
| */ | |
| } | |
| .menu { | |
| z-index: 1000; | |
| position: relative; | |
| --f7-touch-ripple-color: var(--f7-touch-ripple-white); | |
| } | |
| .menu-inner { | |
| display: flex; | |
| justify-content: flex-start; | |
| align-items: flex-start; | |
| padding-left: var(--f7-menu-item-spacing); | |
| padding-right: var(--f7-menu-item-spacing); | |
| } | |
| .menu-inner:after { | |
| content: ''; | |
| width: var(--f7-menu-item-spacing); | |
| height: 100%; | |
| flex-shrink: 0; | |
| } | |
| .menu-item { | |
| height: var(--f7-menu-item-height); | |
| min-width: var(--f7-menu-item-height); | |
| flex-shrink: 0; | |
| background: var(--f7-menu-bg-color); | |
| color: var(--f7-menu-text-color); | |
| border-radius: var(--f7-menu-item-border-radius); | |
| position: relative; | |
| box-sizing: border-box; | |
| font-size: var(--f7-menu-font-size); | |
| font-weight: var(--f7-menu-font-weight); | |
| cursor: pointer; | |
| margin-left: var(--f7-menu-item-spacing); | |
| } | |
| .menu-item:first-child { | |
| margin-left: 0; | |
| } | |
| .menu-item.active-state:not(.menu-item-dropdown-opened) { | |
| background-color: rgba(0, 0, 0, 0.7); | |
| } | |
| .menu-item.icon-only { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .menu-item-content { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 0 var(--f7-menu-item-padding-horizontal); | |
| height: 100%; | |
| box-sizing: border-box; | |
| width: 100%; | |
| overflow: hidden; | |
| border-radius: var(--f7-menu-item-border-radius); | |
| position: relative; | |
| } | |
| .menu-item-content.icon-only, | |
| .icon-only .menu-item-content { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .menu-item-dropdown .menu-item-content:after { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| height: 2px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| bottom: 4px; | |
| background: var(--f7-menu-item-dropdown-icon-color); | |
| border-radius: 4px; | |
| } | |
| .menu-dropdown { | |
| opacity: 0; | |
| visibility: hidden; | |
| pointer-events: none; | |
| cursor: auto; | |
| height: 10px; | |
| background: var(--f7-menu-bg-color); | |
| position: relative; | |
| } | |
| .menu-dropdown-content { | |
| position: absolute; | |
| top: 100%; | |
| border-radius: var(--f7-menu-dropdown-border-radius, var(--f7-menu-item-border-radius)); | |
| padding-top: var(--f7-menu-dropdown-padding-vertical); | |
| padding-bottom: var(--f7-menu-dropdown-padding-vertical); | |
| box-sizing: border-box; | |
| background: var(--f7-menu-bg-color); | |
| will-change: scroll-position; | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; | |
| min-width: calc(100% + 24px); | |
| } | |
| .menu-dropdown-link, | |
| .menu-dropdown-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-left: var(--f7-menu-item-padding-horizontal); | |
| padding-right: var(--f7-menu-item-padding-horizontal); | |
| min-height: var(--f7-menu-dropdown-item-height); | |
| line-height: var(--f7-menu-line-height); | |
| font-size: var(--f7-menu-font-size); | |
| color: var(--f7-menu-text-color); | |
| font-weight: var(--f7-menu-font-weight); | |
| white-space: nowrap; | |
| min-width: 100px; | |
| } | |
| .menu-dropdown-link i, | |
| .menu-dropdown-item i, | |
| .menu-dropdown-link i.icon, | |
| .menu-dropdown-item i.icon, | |
| .menu-dropdown-link i.f7-icons, | |
| .menu-dropdown-item i.f7-icons, | |
| .menu-dropdown-link i.material-icons, | |
| .menu-dropdown-item i.material-icons { | |
| font-size: 20px; | |
| } | |
| .menu-dropdown-link.active-state { | |
| background: var(--f7-menu-dropdown-pressed-bg-color, var(--f7-theme-color)); | |
| color: var(--f7-menu-text-color); | |
| } | |
| .menu-dropdown-divider { | |
| height: 1px; | |
| margin-top: 2px; | |
| margin-bottom: 2px; | |
| background: var(--f7-menu-dropdown-divider-color); | |
| } | |
| .menu-item-dropdown-opened { | |
| border-bottom-left-radius: 0px; | |
| border-bottom-right-radius: 0px; | |
| } | |
| .menu-item-dropdown-opened .menu-item-content:after { | |
| opacity: 0; | |
| } | |
| .menu-item-dropdown-opened .menu-dropdown { | |
| opacity: 1; | |
| visibility: visible; | |
| pointer-events: auto; | |
| } | |
| .menu-item-dropdown-left .menu-dropdown:after, | |
| .menu-item-dropdown-center .menu-dropdown:after, | |
| .menu-dropdown-left:after .menu-dropdown-center:after { | |
| content: ''; | |
| position: absolute; | |
| left: 100%; | |
| bottom: 0; | |
| width: 8px; | |
| height: 8px; | |
| background-image: radial-gradient(ellipse at 100% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%); | |
| } | |
| .menu-item-dropdown-right .menu-dropdown:before, | |
| .menu-item-dropdown-center .menu-dropdown:before, | |
| .menu-dropdown-right:before, | |
| .menu-dropdown-center:before { | |
| content: ''; | |
| position: absolute; | |
| right: 100%; | |
| bottom: 0; | |
| width: 8px; | |
| height: 8px; | |
| background-image: radial-gradient(ellipse at 0% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%); | |
| } | |
| .menu-item-dropdown-left .menu-dropdown-content, | |
| .menu-dropdown-left .menu-dropdown-content { | |
| left: 0; | |
| border-top-left-radius: 0px; | |
| } | |
| .menu-item-dropdown-right .menu-dropdown-content, | |
| .menu-dropdown-right .menu-dropdown-content { | |
| right: 0; | |
| border-top-right-radius: 0px; | |
| } | |
| .menu-item-dropdown-center .menu-dropdown-content, | |
| .menu-dropdown-center .menu-dropdown-content { | |
| left: 50%; | |
| min-width: calc(100% + 24px + 24px); | |
| transform: translateX(-50%); | |
| } | |
| iframe#viAd { | |
| z-index: 12900 !important; | |
| background: #000 !important; | |
| } | |
| .vi-overlay { | |
| background: rgba(0, 0, 0, 0.85); | |
| z-index: 13100; | |
| position: absolute; | |
| left: 0%; | |
| top: 0%; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 3px; | |
| display: flex; | |
| justify-content: center; | |
| flex-direction: column; | |
| align-items: center; | |
| align-content: center; | |
| text-align: center; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) { | |
| .vi-overlay { | |
| background: rgba(0, 0, 0, 0.65); | |
| -webkit-backdrop-filter: blur(10px); | |
| backdrop-filter: blur(10px); | |
| } | |
| } | |
| .vi-overlay .vi-overlay-text { | |
| text-align: center; | |
| color: #fff; | |
| max-width: 80%; | |
| } | |
| .vi-overlay .vi-overlay-text + .vi-overlay-play-button { | |
| margin-top: 15px; | |
| } | |
| .vi-overlay .vi-overlay-play-button { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 50%; | |
| border: 2px solid #fff; | |
| position: relative; | |
| } | |
| .vi-overlay .vi-overlay-play-button.active-state { | |
| opacity: 0.55; | |
| } | |
| .vi-overlay .vi-overlay-play-button:before { | |
| content: ''; | |
| width: 0; | |
| height: 0; | |
| border-top: 8px solid transparent; | |
| border-bottom: 8px solid transparent; | |
| border-left: 14px solid #fff; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| margin-left: 2px; | |
| transform: translate(-50%, -50%); | |
| } | |
| /* === Elevation === */ | |
| :root { | |
| --f7-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0); | |
| --f7-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), | |
| 0px 1px 1px 0px rgba(0, 0, 0, 0.14), | |
| 0px 1px 3px 0px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), | |
| 0px 2px 2px 0px rgba(0, 0, 0, 0.14), | |
| 0px 1px 5px 0px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), | |
| 0px 3px 4px 0px rgba(0, 0, 0, 0.14), | |
| 0px 1px 8px 0px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), | |
| 0px 4px 5px 0px rgba(0, 0, 0, 0.14), | |
| 0px 1px 10px 0px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), | |
| 0px 5px 8px 0px rgba(0, 0, 0, 0.14), | |
| 0px 1px 14px 0px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), | |
| 0px 6px 10px 0px rgba(0, 0, 0, 0.14), | |
| 0px 1px 18px 0px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), | |
| 0px 7px 10px 1px rgba(0, 0, 0, 0.14), | |
| 0px 2px 16px 1px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), | |
| 0px 8px 10px 1px rgba(0, 0, 0, 0.14), | |
| 0px 3px 14px 2px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), | |
| 0px 9px 12px 1px rgba(0, 0, 0, 0.14), | |
| 0px 3px 16px 2px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), | |
| 0px 10px 14px 1px rgba(0, 0, 0, 0.14), | |
| 0px 4px 18px 3px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), | |
| 0px 11px 15px 1px rgba(0, 0, 0, 0.14), | |
| 0px 4px 20px 3px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), | |
| 0px 12px 17px 2px rgba(0, 0, 0, 0.14), | |
| 0px 5px 22px 4px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), | |
| 0px 13px 19px 2px rgba(0, 0, 0, 0.14), | |
| 0px 5px 24px 4px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), | |
| 0px 14px 21px 2px rgba(0, 0, 0, 0.14), | |
| 0px 5px 26px 4px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), | |
| 0px 15px 22px 2px rgba(0, 0, 0, 0.14), | |
| 0px 6px 28px 5px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), | |
| 0px 16px 24px 2px rgba(0, 0, 0, 0.14), | |
| 0px 6px 30px 5px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), | |
| 0px 17px 26px 2px rgba(0, 0, 0, 0.14), | |
| 0px 6px 32px 5px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), | |
| 0px 18px 28px 2px rgba(0, 0, 0, 0.14), | |
| 0px 7px 34px 6px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), | |
| 0px 19px 29px 2px rgba(0, 0, 0, 0.14), | |
| 0px 7px 36px 6px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), | |
| 0px 20px 31px 3px rgba(0, 0, 0, 0.14), | |
| 0px 8px 38px 7px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), | |
| 0px 21px 33px 3px rgba(0, 0, 0, 0.14), | |
| 0px 8px 40px 7px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), | |
| 0px 22px 35px 3px rgba(0, 0, 0, 0.14), | |
| 0px 8px 42px 7px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), | |
| 0px 23px 36px 3px rgba(0, 0, 0, 0.14), | |
| 0px 9px 44px 8px rgba(0, 0, 0, 0.12); | |
| --f7-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), | |
| 0px 24px 38px 3px rgba(0, 0, 0, 0.14), | |
| 0px 9px 46px 8px rgba(0, 0, 0, 0.12); | |
| } | |
| .elevation-0 { | |
| box-shadow: var(--f7-elevation-0) !important; | |
| } | |
| .elevation-1 { | |
| box-shadow: var(--f7-elevation-1) !important; | |
| } | |
| .elevation-2 { | |
| box-shadow: var(--f7-elevation-2) !important; | |
| } | |
| .elevation-3 { | |
| box-shadow: var(--f7-elevation-3) !important; | |
| } | |
| .elevation-4 { | |
| box-shadow: var(--f7-elevation-4) !important; | |
| } | |
| .elevation-5 { | |
| box-shadow: var(--f7-elevation-5) !important; | |
| } | |
| .elevation-6 { | |
| box-shadow: var(--f7-elevation-6) !important; | |
| } | |
| .elevation-7 { | |
| box-shadow: var(--f7-elevation-7) !important; | |
| } | |
| .elevation-8 { | |
| box-shadow: var(--f7-elevation-8) !important; | |
| } | |
| .elevation-9 { | |
| box-shadow: var(--f7-elevation-9) !important; | |
| } | |
| .elevation-10 { | |
| box-shadow: var(--f7-elevation-10) !important; | |
| } | |
| .elevation-11 { | |
| box-shadow: var(--f7-elevation-11) !important; | |
| } | |
| .elevation-12 { | |
| box-shadow: var(--f7-elevation-12) !important; | |
| } | |
| .elevation-13 { | |
| box-shadow: var(--f7-elevation-13) !important; | |
| } | |
| .elevation-14 { | |
| box-shadow: var(--f7-elevation-14) !important; | |
| } | |
| .elevation-15 { | |
| box-shadow: var(--f7-elevation-15) !important; | |
| } | |
| .elevation-16 { | |
| box-shadow: var(--f7-elevation-16) !important; | |
| } | |
| .elevation-17 { | |
| box-shadow: var(--f7-elevation-17) !important; | |
| } | |
| .elevation-18 { | |
| box-shadow: var(--f7-elevation-18) !important; | |
| } | |
| .elevation-19 { | |
| box-shadow: var(--f7-elevation-19) !important; | |
| } | |
| .elevation-20 { | |
| box-shadow: var(--f7-elevation-20) !important; | |
| } | |
| .elevation-21 { | |
| box-shadow: var(--f7-elevation-21) !important; | |
| } | |
| .elevation-22 { | |
| box-shadow: var(--f7-elevation-22) !important; | |
| } | |
| .elevation-23 { | |
| box-shadow: var(--f7-elevation-23) !important; | |
| } | |
| .elevation-24 { | |
| box-shadow: var(--f7-elevation-24) !important; | |
| } | |
| .device-desktop .elevation-hover-0:hover { | |
| box-shadow: var(--f7-elevation-0) !important; | |
| } | |
| .device-desktop .elevation-hover-1:hover { | |
| box-shadow: var(--f7-elevation-1) !important; | |
| } | |
| .device-desktop .elevation-hover-2:hover { | |
| box-shadow: var(--f7-elevation-2) !important; | |
| } | |
| .device-desktop .elevation-hover-3:hover { | |
| box-shadow: var(--f7-elevation-3) !important; | |
| } | |
| .device-desktop .elevation-hover-4:hover { | |
| box-shadow: var(--f7-elevation-4) !important; | |
| } | |
| .device-desktop .elevation-hover-5:hover { | |
| box-shadow: var(--f7-elevation-5) !important; | |
| } | |
| .device-desktop .elevation-hover-6:hover { | |
| box-shadow: var(--f7-elevation-6) !important; | |
| } | |
| .device-desktop .elevation-hover-7:hover { | |
| box-shadow: var(--f7-elevation-7) !important; | |
| } | |
| .device-desktop .elevation-hover-8:hover { | |
| box-shadow: var(--f7-elevation-8) !important; | |
| } | |
| .device-desktop .elevation-hover-9:hover { | |
| box-shadow: var(--f7-elevation-9) !important; | |
| } | |
| .device-desktop .elevation-hover-10:hover { | |
| box-shadow: var(--f7-elevation-10) !important; | |
| } | |
| .device-desktop .elevation-hover-11:hover { | |
| box-shadow: var(--f7-elevation-11) !important; | |
| } | |
| .device-desktop .elevation-hover-12:hover { | |
| box-shadow: var(--f7-elevation-12) !important; | |
| } | |
| .device-desktop .elevation-hover-13:hover { | |
| box-shadow: var(--f7-elevation-13) !important; | |
| } | |
| .device-desktop .elevation-hover-14:hover { | |
| box-shadow: var(--f7-elevation-14) !important; | |
| } | |
| .device-desktop .elevation-hover-15:hover { | |
| box-shadow: var(--f7-elevation-15) !important; | |
| } | |
| .device-desktop .elevation-hover-16:hover { | |
| box-shadow: var(--f7-elevation-16) !important; | |
| } | |
| .device-desktop .elevation-hover-17:hover { | |
| box-shadow: var(--f7-elevation-17) !important; | |
| } | |
| .device-desktop .elevation-hover-18:hover { | |
| box-shadow: var(--f7-elevation-18) !important; | |
| } | |
| .device-desktop .elevation-hover-19:hover { | |
| box-shadow: var(--f7-elevation-19) !important; | |
| } | |
| .device-desktop .elevation-hover-20:hover { | |
| box-shadow: var(--f7-elevation-20) !important; | |
| } | |
| .device-desktop .elevation-hover-21:hover { | |
| box-shadow: var(--f7-elevation-21) !important; | |
| } | |
| .device-desktop .elevation-hover-22:hover { | |
| box-shadow: var(--f7-elevation-22) !important; | |
| } | |
| .device-desktop .elevation-hover-23:hover { | |
| box-shadow: var(--f7-elevation-23) !important; | |
| } | |
| .device-desktop .elevation-hover-24:hover { | |
| box-shadow: var(--f7-elevation-24) !important; | |
| } | |
| .active-state.elevation-pressed-0, | |
| .device-desktop .active-state.elevation-pressed-0 { | |
| box-shadow: var(--f7-elevation-0) !important; | |
| } | |
| .active-state.elevation-pressed-1, | |
| .device-desktop .active-state.elevation-pressed-1 { | |
| box-shadow: var(--f7-elevation-1) !important; | |
| } | |
| .active-state.elevation-pressed-2, | |
| .device-desktop .active-state.elevation-pressed-2 { | |
| box-shadow: var(--f7-elevation-2) !important; | |
| } | |
| .active-state.elevation-pressed-3, | |
| .device-desktop .active-state.elevation-pressed-3 { | |
| box-shadow: var(--f7-elevation-3) !important; | |
| } | |
| .active-state.elevation-pressed-4, | |
| .device-desktop .active-state.elevation-pressed-4 { | |
| box-shadow: var(--f7-elevation-4) !important; | |
| } | |
| .active-state.elevation-pressed-5, | |
| .device-desktop .active-state.elevation-pressed-5 { | |
| box-shadow: var(--f7-elevation-5) !important; | |
| } | |
| .active-state.elevation-pressed-6, | |
| .device-desktop .active-state.elevation-pressed-6 { | |
| box-shadow: var(--f7-elevation-6) !important; | |
| } | |
| .active-state.elevation-pressed-7, | |
| .device-desktop .active-state.elevation-pressed-7 { | |
| box-shadow: var(--f7-elevation-7) !important; | |
| } | |
| .active-state.elevation-pressed-8, | |
| .device-desktop .active-state.elevation-pressed-8 { | |
| box-shadow: var(--f7-elevation-8) !important; | |
| } | |
| .active-state.elevation-pressed-9, | |
| .device-desktop .active-state.elevation-pressed-9 { | |
| box-shadow: var(--f7-elevation-9) !important; | |
| } | |
| .active-state.elevation-pressed-10, | |
| .device-desktop .active-state.elevation-pressed-10 { | |
| box-shadow: var(--f7-elevation-10) !important; | |
| } | |
| .active-state.elevation-pressed-11, | |
| .device-desktop .active-state.elevation-pressed-11 { | |
| box-shadow: var(--f7-elevation-11) !important; | |
| } | |
| .active-state.elevation-pressed-12, | |
| .device-desktop .active-state.elevation-pressed-12 { | |
| box-shadow: var(--f7-elevation-12) !important; | |
| } | |
| .active-state.elevation-pressed-13, | |
| .device-desktop .active-state.elevation-pressed-13 { | |
| box-shadow: var(--f7-elevation-13) !important; | |
| } | |
| .active-state.elevation-pressed-14, | |
| .device-desktop .active-state.elevation-pressed-14 { | |
| box-shadow: var(--f7-elevation-14) !important; | |
| } | |
| .active-state.elevation-pressed-15, | |
| .device-desktop .active-state.elevation-pressed-15 { | |
| box-shadow: var(--f7-elevation-15) !important; | |
| } | |
| .active-state.elevation-pressed-16, | |
| .device-desktop .active-state.elevation-pressed-16 { | |
| box-shadow: var(--f7-elevation-16) !important; | |
| } | |
| .active-state.elevation-pressed-17, | |
| .device-desktop .active-state.elevation-pressed-17 { | |
| box-shadow: var(--f7-elevation-17) !important; | |
| } | |
| .active-state.elevation-pressed-18, | |
| .device-desktop .active-state.elevation-pressed-18 { | |
| box-shadow: var(--f7-elevation-18) !important; | |
| } | |
| .active-state.elevation-pressed-19, | |
| .device-desktop .active-state.elevation-pressed-19 { | |
| box-shadow: var(--f7-elevation-19) !important; | |
| } | |
| .active-state.elevation-pressed-20, | |
| .device-desktop .active-state.elevation-pressed-20 { | |
| box-shadow: var(--f7-elevation-20) !important; | |
| } | |
| .active-state.elevation-pressed-21, | |
| .device-desktop .active-state.elevation-pressed-21 { | |
| box-shadow: var(--f7-elevation-21) !important; | |
| } | |
| .active-state.elevation-pressed-22, | |
| .device-desktop .active-state.elevation-pressed-22 { | |
| box-shadow: var(--f7-elevation-22) !important; | |
| } | |
| .active-state.elevation-pressed-23, | |
| .device-desktop .active-state.elevation-pressed-23 { | |
| box-shadow: var(--f7-elevation-23) !important; | |
| } | |
| .active-state.elevation-pressed-24, | |
| .device-desktop .active-state.elevation-pressed-24 { | |
| box-shadow: var(--f7-elevation-24) !important; | |
| } | |
| .elevation-transition-100 { | |
| transition-duration: 100ms; | |
| transition-property: box-shadow; | |
| } | |
| .elevation-transition, | |
| .elevation-transition-200 { | |
| transition-duration: 200ms; | |
| transition-property: box-shadow; | |
| } | |
| .elevation-transition-300 { | |
| transition-duration: 300ms; | |
| transition-property: box-shadow; | |
| } | |
| .elevation-transition-400 { | |
| transition-duration: 400ms; | |
| transition-property: box-shadow; | |
| } | |
| .elevation-transition-500 { | |
| transition-duration: 500ms; | |
| transition-property: box-shadow; | |
| } | |
| /* === Typography === */ | |
| .ios { | |
| --f7-typography-padding: 15px; | |
| --f7-typography-margin: 15px; | |
| } | |
| .md { | |
| --f7-typography-padding: 16px; | |
| --f7-typography-margin: 16px; | |
| } | |
| .display-flex { | |
| display: flex !important; | |
| } | |
| .display-block { | |
| display: block !important; | |
| } | |
| .display-inline-flex { | |
| display: inline-flex !important; | |
| } | |
| .display-inline-block { | |
| display: inline-block !important; | |
| } | |
| .display-inline { | |
| display: inline !important; | |
| } | |
| .display-none { | |
| display: none !important; | |
| } | |
| .flex-shrink-0 { | |
| flex-shrink: 0 !important; | |
| } | |
| .flex-shrink-1 { | |
| flex-shrink: 1 !important; | |
| } | |
| .flex-shrink-2 { | |
| flex-shrink: 2 !important; | |
| } | |
| .flex-shrink-3 { | |
| flex-shrink: 3 !important; | |
| } | |
| .flex-shrink-4 { | |
| flex-shrink: 4 !important; | |
| } | |
| .flex-shrink-5 { | |
| flex-shrink: 5 !important; | |
| } | |
| .flex-shrink-6 { | |
| flex-shrink: 6 !important; | |
| } | |
| .flex-shrink-7 { | |
| flex-shrink: 7 !important; | |
| } | |
| .flex-shrink-8 { | |
| flex-shrink: 8 !important; | |
| } | |
| .flex-shrink-9 { | |
| flex-shrink: 9 !important; | |
| } | |
| .flex-shrink-10 { | |
| flex-shrink: 10 !important; | |
| } | |
| .justify-content-flex-start { | |
| justify-content: flex-start !important; | |
| } | |
| .justify-content-center { | |
| justify-content: center !important; | |
| } | |
| .justify-content-flex-end { | |
| justify-content: flex-end !important; | |
| } | |
| .justify-content-space-between { | |
| justify-content: space-between !important; | |
| } | |
| .justify-content-space-around { | |
| justify-content: space-around !important; | |
| } | |
| .justify-content-space-evenly { | |
| justify-content: space-evenly !important; | |
| } | |
| .justify-content-stretch { | |
| justify-content: stretch !important; | |
| } | |
| .justify-content-start { | |
| justify-content: start !important; | |
| } | |
| .justify-content-end { | |
| justify-content: end !important; | |
| } | |
| .justify-content-left { | |
| justify-content: left !important; | |
| } | |
| .justify-content-right { | |
| justify-content: right !important; | |
| } | |
| .align-content-flex-start { | |
| align-content: flex-start !important; | |
| } | |
| .align-content-flex-end { | |
| align-content: flex-end !important; | |
| } | |
| .align-content-center { | |
| align-content: center !important; | |
| } | |
| .align-content-space-between { | |
| align-content: space-between !important; | |
| } | |
| .align-content-space-around { | |
| align-content: space-around !important; | |
| } | |
| .align-content-stretch { | |
| align-content: stretch !important; | |
| } | |
| .align-items-flex-start { | |
| align-items: flex-start !important; | |
| } | |
| .align-items-flex-end { | |
| align-items: flex-end !important; | |
| } | |
| .align-items-center { | |
| align-items: center !important; | |
| } | |
| .align-items-stretch { | |
| align-items: stretch !important; | |
| } | |
| .align-self-flex-start { | |
| align-self: flex-start !important; | |
| } | |
| .align-self-flex-end { | |
| align-self: flex-end !important; | |
| } | |
| .align-self-center { | |
| align-self: center !important; | |
| } | |
| .align-self-stretch { | |
| align-self: stretch !important; | |
| } | |
| .text-align-left { | |
| text-align: left !important; | |
| } | |
| .text-align-center { | |
| text-align: center !important; | |
| } | |
| .text-align-right { | |
| text-align: right !important; | |
| } | |
| .text-align-justify { | |
| text-align: justify !important; | |
| } | |
| .float-left { | |
| float: left !important; | |
| } | |
| .float-right { | |
| float: right !important; | |
| } | |
| .float-none { | |
| float: none !important; | |
| } | |
| .vertical-align-bottom { | |
| vertical-align: bottom !important; | |
| } | |
| .vertical-align-middle { | |
| vertical-align: middle !important; | |
| } | |
| .vertical-align-top { | |
| vertical-align: top !important; | |
| } | |
| .no-padding { | |
| padding: 0 !important; | |
| } | |
| .no-padding-left { | |
| padding-left: 0 !important; | |
| } | |
| .no-padding-right { | |
| padding-right: 0 !important; | |
| } | |
| .no-padding-horizontal { | |
| padding-left: 0 !important; | |
| padding-right: 0 !important; | |
| } | |
| .no-padding-top { | |
| padding-top: 0 !important; | |
| } | |
| .no-padding-bottom { | |
| padding-bottom: 0 !important; | |
| } | |
| .no-padding-vertical { | |
| padding-top: 0 !important; | |
| padding-bottom: 0 !important; | |
| } | |
| .no-margin { | |
| margin: 0 !important; | |
| } | |
| .no-margin-left { | |
| margin-left: 0 !important; | |
| } | |
| .no-margin-right { | |
| margin-right: 0 !important; | |
| } | |
| .no-margin-horizontal { | |
| margin-left: 0 !important; | |
| margin-right: 0 !important; | |
| } | |
| .no-margin-top { | |
| margin-top: 0 !important; | |
| } | |
| .no-margin-bottom { | |
| margin-bottom: 0 !important; | |
| } | |
| .no-margin-vertical { | |
| margin-top: 0 !important; | |
| margin-bottom: 0 !important; | |
| } | |
| .width-auto { | |
| width: auto !important; | |
| } | |
| .width-100 { | |
| width: 100% !important; | |
| } | |
| .padding { | |
| padding: var(--f7-typography-padding) !important; | |
| } | |
| .padding-top { | |
| padding-top: var(--f7-typography-padding) !important; | |
| } | |
| .padding-bottom { | |
| padding-bottom: var(--f7-typography-padding) !important; | |
| } | |
| .padding-left { | |
| padding-left: var(--f7-typography-padding) !important; | |
| } | |
| .padding-right { | |
| padding-right: var(--f7-typography-padding) !important; | |
| } | |
| .padding-vertical { | |
| padding-top: var(--f7-typography-padding) !important; | |
| padding-bottom: var(--f7-typography-padding) !important; | |
| } | |
| .padding-horizontal { | |
| padding-left: var(--f7-typography-padding) !important; | |
| padding-right: var(--f7-typography-padding) !important; | |
| } | |
| .margin { | |
| margin: var(--f7-typography-margin) !important; | |
| } | |
| .margin-top { | |
| margin-top: var(--f7-typography-margin) !important; | |
| } | |
| .margin-bottom { | |
| margin-bottom: var(--f7-typography-margin) !important; | |
| } | |
| .margin-left { | |
| margin-left: var(--f7-typography-margin) !important; | |
| } | |
| .margin-right { | |
| margin-right: var(--f7-typography-margin) !important; | |
| } | |
| .margin-vertical { | |
| margin-top: var(--f7-typography-margin) !important; | |
| margin-bottom: var(--f7-typography-margin) !important; | |
| } | |
| .margin-horizontal { | |
| margin-left: var(--f7-typography-margin) !important; | |
| margin-right: var(--f7-typography-margin) !important; | |
| } | |
| [class*="text-color-"] { | |
| color: var(--f7-theme-color-text-color) !important; | |
| } | |
| [class*="bg-color-"] { | |
| background-color: var(--f7-theme-color-bg-color) !important; | |
| } | |
| [class*="border-color-"] { | |
| border-color: var(--f7-theme-color-border-color) !important; | |
| } |
This file has been truncated, but you can view the full file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Framework7 4.0.1 | |
| * Full featured mobile HTML framework for building iOS & Android apps | |
| * http://framework7.io/ | |
| * | |
| * Copyright 2014-2019 Vladimir Kharlampidi | |
| * | |
| * Released under the MIT License | |
| * | |
| * Released on: February 8, 2019 | |
| */ | |
| (function (global, factory) { | |
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | |
| typeof define === 'function' && define.amd ? define(factory) : | |
| (global = global || self, global.Framework7 = factory()); | |
| }(this, function () { 'use strict'; | |
| /** | |
| * Template7 1.4.1 | |
| * Mobile-first HTML template engine | |
| * | |
| * http://www.idangero.us/template7/ | |
| * | |
| * Copyright 2019, Vladimir Kharlampidi | |
| * The iDangero.us | |
| * http://www.idangero.us/ | |
| * | |
| * Licensed under MIT | |
| * | |
| * Released on: February 5, 2019 | |
| */ | |
| var t7ctx; | |
| if (typeof window !== 'undefined') { | |
| t7ctx = window; | |
| } else if (typeof global !== 'undefined') { | |
| t7ctx = global; | |
| } else { | |
| t7ctx = undefined; | |
| } | |
| var Template7Context = t7ctx; | |
| var Template7Utils = { | |
| quoteSingleRexExp: new RegExp('\'', 'g'), | |
| quoteDoubleRexExp: new RegExp('"', 'g'), | |
| isFunction: function isFunction(func) { | |
| return typeof func === 'function'; | |
| }, | |
| escape: function escape(string) { | |
| if ( string === void 0 ) string = ''; | |
| return string | |
| .replace(/&/g, '&') | |
| .replace(/</g, '<') | |
| .replace(/>/g, '>') | |
| .replace(/"/g, '"') | |
| .replace(/'/g, '''); | |
| }, | |
| helperToSlices: function helperToSlices(string) { | |
| var quoteDoubleRexExp = Template7Utils.quoteDoubleRexExp; | |
| var quoteSingleRexExp = Template7Utils.quoteSingleRexExp; | |
| var helperParts = string.replace(/[{}#}]/g, '').trim().split(' '); | |
| var slices = []; | |
| var shiftIndex; | |
| var i; | |
| var j; | |
| for (i = 0; i < helperParts.length; i += 1) { | |
| var part = helperParts[i]; | |
| var blockQuoteRegExp = (void 0); | |
| var openingQuote = (void 0); | |
| if (i === 0) { slices.push(part); } | |
| else if (part.indexOf('"') === 0 || part.indexOf('\'') === 0) { | |
| blockQuoteRegExp = part.indexOf('"') === 0 ? quoteDoubleRexExp : quoteSingleRexExp; | |
| openingQuote = part.indexOf('"') === 0 ? '"' : '\''; | |
| // Plain String | |
| if (part.match(blockQuoteRegExp).length === 2) { | |
| // One word string | |
| slices.push(part); | |
| } else { | |
| // Find closed Index | |
| shiftIndex = 0; | |
| for (j = i + 1; j < helperParts.length; j += 1) { | |
| part += " " + (helperParts[j]); | |
| if (helperParts[j].indexOf(openingQuote) >= 0) { | |
| shiftIndex = j; | |
| slices.push(part); | |
| break; | |
| } | |
| } | |
| if (shiftIndex) { i = shiftIndex; } | |
| } | |
| } else if (part.indexOf('=') > 0) { | |
| // Hash | |
| var hashParts = part.split('='); | |
| var hashName = hashParts[0]; | |
| var hashContent = hashParts[1]; | |
| if (!blockQuoteRegExp) { | |
| blockQuoteRegExp = hashContent.indexOf('"') === 0 ? quoteDoubleRexExp : quoteSingleRexExp; | |
| openingQuote = hashContent.indexOf('"') === 0 ? '"' : '\''; | |
| } | |
| if (hashContent.match(blockQuoteRegExp).length !== 2) { | |
| shiftIndex = 0; | |
| for (j = i + 1; j < helperParts.length; j += 1) { | |
| hashContent += " " + (helperParts[j]); | |
| if (helperParts[j].indexOf(openingQuote) >= 0) { | |
| shiftIndex = j; | |
| break; | |
| } | |
| } | |
| if (shiftIndex) { i = shiftIndex; } | |
| } | |
| var hash = [hashName, hashContent.replace(blockQuoteRegExp, '')]; | |
| slices.push(hash); | |
| } else { | |
| // Plain variable | |
| slices.push(part); | |
| } | |
| } | |
| return slices; | |
| }, | |
| stringToBlocks: function stringToBlocks(string) { | |
| var blocks = []; | |
| var i; | |
| var j; | |
| if (!string) { return []; } | |
| var stringBlocks = string.split(/({{[^{^}]*}})/); | |
| for (i = 0; i < stringBlocks.length; i += 1) { | |
| var block = stringBlocks[i]; | |
| if (block === '') { continue; } | |
| if (block.indexOf('{{') < 0) { | |
| blocks.push({ | |
| type: 'plain', | |
| content: block, | |
| }); | |
| } else { | |
| if (block.indexOf('{/') >= 0) { | |
| continue; | |
| } | |
| block = block | |
| .replace(/{{([#/])*([ ])*/, '{{$1') | |
| .replace(/([ ])*}}/, '}}'); | |
| if (block.indexOf('{#') < 0 && block.indexOf(' ') < 0 && block.indexOf('else') < 0) { | |
| // Simple variable | |
| blocks.push({ | |
| type: 'variable', | |
| contextName: block.replace(/[{}]/g, ''), | |
| }); | |
| continue; | |
| } | |
| // Helpers | |
| var helperSlices = Template7Utils.helperToSlices(block); | |
| var helperName = helperSlices[0]; | |
| var isPartial = helperName === '>'; | |
| var helperContext = []; | |
| var helperHash = {}; | |
| for (j = 1; j < helperSlices.length; j += 1) { | |
| var slice = helperSlices[j]; | |
| if (Array.isArray(slice)) { | |
| // Hash | |
| helperHash[slice[0]] = slice[1] === 'false' ? false : slice[1]; | |
| } else { | |
| helperContext.push(slice); | |
| } | |
| } | |
| if (block.indexOf('{#') >= 0) { | |
| // Condition/Helper | |
| var helperContent = ''; | |
| var elseContent = ''; | |
| var toSkip = 0; | |
| var shiftIndex = (void 0); | |
| var foundClosed = false; | |
| var foundElse = false; | |
| var depth = 0; | |
| for (j = i + 1; j < stringBlocks.length; j += 1) { | |
| if (stringBlocks[j].indexOf('{{#') >= 0) { | |
| depth += 1; | |
| } | |
| if (stringBlocks[j].indexOf('{{/') >= 0) { | |
| depth -= 1; | |
| } | |
| if (stringBlocks[j].indexOf(("{{#" + helperName)) >= 0) { | |
| helperContent += stringBlocks[j]; | |
| if (foundElse) { elseContent += stringBlocks[j]; } | |
| toSkip += 1; | |
| } else if (stringBlocks[j].indexOf(("{{/" + helperName)) >= 0) { | |
| if (toSkip > 0) { | |
| toSkip -= 1; | |
| helperContent += stringBlocks[j]; | |
| if (foundElse) { elseContent += stringBlocks[j]; } | |
| } else { | |
| shiftIndex = j; | |
| foundClosed = true; | |
| break; | |
| } | |
| } else if (stringBlocks[j].indexOf('else') >= 0 && depth === 0) { | |
| foundElse = true; | |
| } else { | |
| if (!foundElse) { helperContent += stringBlocks[j]; } | |
| if (foundElse) { elseContent += stringBlocks[j]; } | |
| } | |
| } | |
| if (foundClosed) { | |
| if (shiftIndex) { i = shiftIndex; } | |
| if (helperName === 'raw') { | |
| blocks.push({ | |
| type: 'plain', | |
| content: helperContent, | |
| }); | |
| } else { | |
| blocks.push({ | |
| type: 'helper', | |
| helperName: helperName, | |
| contextName: helperContext, | |
| content: helperContent, | |
| inverseContent: elseContent, | |
| hash: helperHash, | |
| }); | |
| } | |
| } | |
| } else if (block.indexOf(' ') > 0) { | |
| if (isPartial) { | |
| helperName = '_partial'; | |
| if (helperContext[0]) { | |
| if (helperContext[0].indexOf('[') === 0) { helperContext[0] = helperContext[0].replace(/[[\]]/g, ''); } | |
| else { helperContext[0] = "\"" + (helperContext[0].replace(/"|'/g, '')) + "\""; } | |
| } | |
| } | |
| blocks.push({ | |
| type: 'helper', | |
| helperName: helperName, | |
| contextName: helperContext, | |
| hash: helperHash, | |
| }); | |
| } | |
| } | |
| } | |
| return blocks; | |
| }, | |
| parseJsVariable: function parseJsVariable(expression, replace, object) { | |
| return expression.split(/([+ \-*/^()&=|<>!%:?])/g).reduce(function (arr, part) { | |
| if (!part) { | |
| return arr; | |
| } | |
| if (part.indexOf(replace) < 0) { | |
| arr.push(part); | |
| return arr; | |
| } | |
| if (!object) { | |
| arr.push(JSON.stringify('')); | |
| return arr; | |
| } | |
| var variable = object; | |
| if (part.indexOf((replace + ".")) >= 0) { | |
| part.split((replace + "."))[1].split('.').forEach(function (partName) { | |
| if (partName in variable) { variable = variable[partName]; } | |
| else { variable = undefined; } | |
| }); | |
| } | |
| if (typeof variable === 'string') { | |
| variable = JSON.stringify(variable); | |
| } | |
| if (variable === undefined) { variable = 'undefined'; } | |
| arr.push(variable); | |
| return arr; | |
| }, []).join(''); | |
| }, | |
| parseJsParents: function parseJsParents(expression, parents) { | |
| return expression.split(/([+ \-*^()&=|<>!%:?])/g).reduce(function (arr, part) { | |
| if (!part) { | |
| return arr; | |
| } | |
| if (part.indexOf('../') < 0) { | |
| arr.push(part); | |
| return arr; | |
| } | |
| if (!parents || parents.length === 0) { | |
| arr.push(JSON.stringify('')); | |
| return arr; | |
| } | |
| var levelsUp = part.split('../').length - 1; | |
| var parentData = levelsUp > parents.length ? parents[parents.length - 1] : parents[levelsUp - 1]; | |
| var variable = parentData; | |
| var parentPart = part.replace(/..\//g, ''); | |
| parentPart.split('.').forEach(function (partName) { | |
| if (typeof variable[partName] !== 'undefined') { variable = variable[partName]; } | |
| else { variable = 'undefined'; } | |
| }); | |
| if (variable === false || variable === true) { | |
| arr.push(JSON.stringify(variable)); | |
| return arr; | |
| } | |
| if (variable === null || variable === 'undefined') { | |
| arr.push(JSON.stringify('')); | |
| return arr; | |
| } | |
| arr.push(JSON.stringify(variable)); | |
| return arr; | |
| }, []).join(''); | |
| }, | |
| getCompileVar: function getCompileVar(name, ctx, data) { | |
| if ( data === void 0 ) data = 'data_1'; | |
| var variable = ctx; | |
| var parts; | |
| var levelsUp = 0; | |
| var newDepth; | |
| if (name.indexOf('../') === 0) { | |
| levelsUp = name.split('../').length - 1; | |
| newDepth = variable.split('_')[1] - levelsUp; | |
| variable = "ctx_" + (newDepth >= 1 ? newDepth : 1); | |
| parts = name.split('../')[levelsUp].split('.'); | |
| } else if (name.indexOf('@global') === 0) { | |
| variable = 'Template7.global'; | |
| parts = name.split('@global.')[1].split('.'); | |
| } else if (name.indexOf('@root') === 0) { | |
| variable = 'root'; | |
| parts = name.split('@root.')[1].split('.'); | |
| } else { | |
| parts = name.split('.'); | |
| } | |
| for (var i = 0; i < parts.length; i += 1) { | |
| var part = parts[i]; | |
| if (part.indexOf('@') === 0) { | |
| var dataLevel = data.split('_')[1]; | |
| if (levelsUp > 0) { | |
| dataLevel = newDepth; | |
| } | |
| if (i > 0) { | |
| variable += "[(data_" + dataLevel + " && data_" + dataLevel + "." + (part.replace('@', '')) + ")]"; | |
| } else { | |
| variable = "(data_" + dataLevel + " && data_" + dataLevel + "." + (part.replace('@', '')) + ")"; | |
| } | |
| } else if (Number.isFinite ? Number.isFinite(part) : Template7Context.isFinite(part)) { | |
| variable += "[" + part + "]"; | |
| } else if (part === 'this' || part.indexOf('this.') >= 0 || part.indexOf('this[') >= 0 || part.indexOf('this(') >= 0) { | |
| variable = part.replace('this', ctx); | |
| } else { | |
| variable += "." + part; | |
| } | |
| } | |
| return variable; | |
| }, | |
| getCompiledArguments: function getCompiledArguments(contextArray, ctx, data) { | |
| var arr = []; | |
| for (var i = 0; i < contextArray.length; i += 1) { | |
| if (/^['"]/.test(contextArray[i])) { arr.push(contextArray[i]); } | |
| else if (/^(true|false|\d+)$/.test(contextArray[i])) { arr.push(contextArray[i]); } | |
| else { | |
| arr.push(Template7Utils.getCompileVar(contextArray[i], ctx, data)); | |
| } | |
| } | |
| return arr.join(', '); | |
| }, | |
| }; | |
| /* eslint no-eval: "off" */ | |
| var Template7Helpers = { | |
| _partial: function _partial(partialName, options) { | |
| var ctx = this; | |
| var p = Template7Class.partials[partialName]; | |
| if (!p || (p && !p.template)) { return ''; } | |
| if (!p.compiled) { | |
| p.compiled = new Template7Class(p.template).compile(); | |
| } | |
| Object.keys(options.hash).forEach(function (hashName) { | |
| ctx[hashName] = options.hash[hashName]; | |
| }); | |
| return p.compiled(ctx, options.data, options.root); | |
| }, | |
| escape: function escape(context) { | |
| if (typeof context !== 'string') { | |
| throw new Error('Template7: Passed context to "escape" helper should be a string'); | |
| } | |
| return Template7Utils.escape(context); | |
| }, | |
| if: function if$1(context, options) { | |
| var ctx = context; | |
| if (Template7Utils.isFunction(ctx)) { ctx = ctx.call(this); } | |
| if (ctx) { | |
| return options.fn(this, options.data); | |
| } | |
| return options.inverse(this, options.data); | |
| }, | |
| unless: function unless(context, options) { | |
| var ctx = context; | |
| if (Template7Utils.isFunction(ctx)) { ctx = ctx.call(this); } | |
| if (!ctx) { | |
| return options.fn(this, options.data); | |
| } | |
| return options.inverse(this, options.data); | |
| }, | |
| each: function each(context, options) { | |
| var ctx = context; | |
| var ret = ''; | |
| var i = 0; | |
| if (Template7Utils.isFunction(ctx)) { ctx = ctx.call(this); } | |
| if (Array.isArray(ctx)) { | |
| if (options.hash.reverse) { | |
| ctx = ctx.reverse(); | |
| } | |
| for (i = 0; i < ctx.length; i += 1) { | |
| ret += options.fn(ctx[i], { first: i === 0, last: i === ctx.length - 1, index: i }); | |
| } | |
| if (options.hash.reverse) { | |
| ctx = ctx.reverse(); | |
| } | |
| } else { | |
| // eslint-disable-next-line | |
| for (var key in ctx) { | |
| i += 1; | |
| ret += options.fn(ctx[key], { key: key }); | |
| } | |
| } | |
| if (i > 0) { return ret; } | |
| return options.inverse(this); | |
| }, | |
| with: function with$1(context, options) { | |
| var ctx = context; | |
| if (Template7Utils.isFunction(ctx)) { ctx = context.call(this); } | |
| return options.fn(ctx); | |
| }, | |
| join: function join(context, options) { | |
| var ctx = context; | |
| if (Template7Utils.isFunction(ctx)) { ctx = ctx.call(this); } | |
| return ctx.join(options.hash.delimiter || options.hash.delimeter); | |
| }, | |
| js: function js(expression, options) { | |
| var data = options.data; | |
| var func; | |
| var execute = expression; | |
| ('index first last key').split(' ').forEach(function (prop) { | |
| if (typeof data[prop] !== 'undefined') { | |
| var re1 = new RegExp(("this.@" + prop), 'g'); | |
| var re2 = new RegExp(("@" + prop), 'g'); | |
| execute = execute | |
| .replace(re1, JSON.stringify(data[prop])) | |
| .replace(re2, JSON.stringify(data[prop])); | |
| } | |
| }); | |
| if (options.root && execute.indexOf('@root') >= 0) { | |
| execute = Template7Utils.parseJsVariable(execute, '@root', options.root); | |
| } | |
| if (execute.indexOf('@global') >= 0) { | |
| execute = Template7Utils.parseJsVariable(execute, '@global', Template7Context.Template7.global); | |
| } | |
| if (execute.indexOf('../') >= 0) { | |
| execute = Template7Utils.parseJsParents(execute, options.parents); | |
| } | |
| if (execute.indexOf('return') >= 0) { | |
| func = "(function(){" + execute + "})"; | |
| } else { | |
| func = "(function(){return (" + execute + ")})"; | |
| } | |
| return eval(func).call(this); | |
| }, | |
| js_if: function js_if(expression, options) { | |
| var data = options.data; | |
| var func; | |
| var execute = expression; | |
| ('index first last key').split(' ').forEach(function (prop) { | |
| if (typeof data[prop] !== 'undefined') { | |
| var re1 = new RegExp(("this.@" + prop), 'g'); | |
| var re2 = new RegExp(("@" + prop), 'g'); | |
| execute = execute | |
| .replace(re1, JSON.stringify(data[prop])) | |
| .replace(re2, JSON.stringify(data[prop])); | |
| } | |
| }); | |
| if (options.root && execute.indexOf('@root') >= 0) { | |
| execute = Template7Utils.parseJsVariable(execute, '@root', options.root); | |
| } | |
| if (execute.indexOf('@global') >= 0) { | |
| execute = Template7Utils.parseJsVariable(execute, '@global', Template7Context.Template7.global); | |
| } | |
| if (execute.indexOf('../') >= 0) { | |
| execute = Template7Utils.parseJsParents(execute, options.parents); | |
| } | |
| if (execute.indexOf('return') >= 0) { | |
| func = "(function(){" + execute + "})"; | |
| } else { | |
| func = "(function(){return (" + execute + ")})"; | |
| } | |
| var condition = eval(func).call(this); | |
| if (condition) { | |
| return options.fn(this, options.data); | |
| } | |
| return options.inverse(this, options.data); | |
| }, | |
| }; | |
| Template7Helpers.js_compare = Template7Helpers.js_if; | |
| var Template7Options = {}; | |
| var Template7Partials = {}; | |
| var Template7Class = function Template7Class(template) { | |
| var t = this; | |
| t.template = template; | |
| }; | |
| var staticAccessors = { options: { configurable: true },partials: { configurable: true },helpers: { configurable: true } }; | |
| Template7Class.prototype.compile = function compile (template, depth) { | |
| if ( template === void 0 ) template = this.template; | |
| if ( depth === void 0 ) depth = 1; | |
| var t = this; | |
| if (t.compiled) { return t.compiled; } | |
| if (typeof template !== 'string') { | |
| throw new Error('Template7: Template must be a string'); | |
| } | |
| var stringToBlocks = Template7Utils.stringToBlocks; | |
| var getCompileVar = Template7Utils.getCompileVar; | |
| var getCompiledArguments = Template7Utils.getCompiledArguments; | |
| var blocks = stringToBlocks(template); | |
| var ctx = "ctx_" + depth; | |
| var data = "data_" + depth; | |
| if (blocks.length === 0) { | |
| return function empty() { return ''; }; | |
| } | |
| function getCompileFn(block, newDepth) { | |
| if (block.content) { return t.compile(block.content, newDepth); } | |
| return function empty() { return ''; }; | |
| } | |
| function getCompileInverse(block, newDepth) { | |
| if (block.inverseContent) { return t.compile(block.inverseContent, newDepth); } | |
| return function empty() { return ''; }; | |
| } | |
| var resultString = ''; | |
| if (depth === 1) { | |
| resultString += "(function (" + ctx + ", " + data + ", root) {\n"; | |
| } else { | |
| resultString += "(function (" + ctx + ", " + data + ") {\n"; | |
| } | |
| if (depth === 1) { | |
| resultString += 'function isArray(arr){return Array.isArray(arr);}\n'; | |
| resultString += 'function isFunction(func){return (typeof func === \'function\');}\n'; | |
| resultString += 'function c(val, ctx) {if (typeof val !== "undefined" && val !== null) {if (isFunction(val)) {return val.call(ctx);} else return val;} else return "";}\n'; | |
| resultString += 'root = root || ctx_1 || {};\n'; | |
| } | |
| resultString += 'var r = \'\';\n'; | |
| var i; | |
| for (i = 0; i < blocks.length; i += 1) { | |
| var block = blocks[i]; | |
| // Plain block | |
| if (block.type === 'plain') { | |
| // eslint-disable-next-line | |
| resultString += "r +='" + ((block.content).replace(/\r/g, '\\r').replace(/\n/g, '\\n').replace(/'/g, '\\' + '\'')) + "';"; | |
| continue; | |
| } | |
| var variable = (void 0); | |
| var compiledArguments = (void 0); | |
| // Variable block | |
| if (block.type === 'variable') { | |
| variable = getCompileVar(block.contextName, ctx, data); | |
| resultString += "r += c(" + variable + ", " + ctx + ");"; | |
| } | |
| // Helpers block | |
| if (block.type === 'helper') { | |
| var parents = (void 0); | |
| if (ctx !== 'ctx_1') { | |
| var level = ctx.split('_')[1]; | |
| var parentsString = "ctx_" + (level - 1); | |
| for (var j = level - 2; j >= 1; j -= 1) { | |
| parentsString += ", ctx_" + j; | |
| } | |
| parents = "[" + parentsString + "]"; | |
| } else { | |
| parents = "[" + ctx + "]"; | |
| } | |
| var dynamicHelper = (void 0); | |
| if (block.helperName.indexOf('[') === 0) { | |
| block.helperName = getCompileVar(block.helperName.replace(/[[\]]/g, ''), ctx, data); | |
| dynamicHelper = true; | |
| } | |
| if (dynamicHelper || block.helperName in Template7Helpers) { | |
| compiledArguments = getCompiledArguments(block.contextName, ctx, data); | |
| resultString += "r += (Template7Helpers" + (dynamicHelper ? ("[" + (block.helperName) + "]") : ("." + (block.helperName))) + ").call(" + ctx + ", " + (compiledArguments && ((compiledArguments + ", "))) + "{hash:" + (JSON.stringify(block.hash)) + ", data: " + data + " || {}, fn: " + (getCompileFn(block, depth + 1)) + ", inverse: " + (getCompileInverse(block, depth + 1)) + ", root: root, parents: " + parents + "});"; | |
| } else if (block.contextName.length > 0) { | |
| throw new Error(("Template7: Missing helper: \"" + (block.helperName) + "\"")); | |
| } else { | |
| variable = getCompileVar(block.helperName, ctx, data); | |
| resultString += "if (" + variable + ") {"; | |
| resultString += "if (isArray(" + variable + ")) {"; | |
| resultString += "r += (Template7Helpers.each).call(" + ctx + ", " + variable + ", {hash:" + (JSON.stringify(block.hash)) + ", data: " + data + " || {}, fn: " + (getCompileFn(block, depth + 1)) + ", inverse: " + (getCompileInverse(block, depth + 1)) + ", root: root, parents: " + parents + "});"; | |
| resultString += '}else {'; | |
| resultString += "r += (Template7Helpers.with).call(" + ctx + ", " + variable + ", {hash:" + (JSON.stringify(block.hash)) + ", data: " + data + " || {}, fn: " + (getCompileFn(block, depth + 1)) + ", inverse: " + (getCompileInverse(block, depth + 1)) + ", root: root, parents: " + parents + "});"; | |
| resultString += '}}'; | |
| } | |
| } | |
| } | |
| resultString += '\nreturn r;})'; | |
| if (depth === 1) { | |
| // eslint-disable-next-line | |
| t.compiled = eval(resultString); | |
| return t.compiled; | |
| } | |
| return resultString; | |
| }; | |
| staticAccessors.options.get = function () { | |
| return Template7Options; | |
| }; | |
| staticAccessors.partials.get = function () { | |
| return Template7Partials; | |
| }; | |
| staticAccessors.helpers.get = function () { | |
| return Template7Helpers; | |
| }; | |
| Object.defineProperties( Template7Class, staticAccessors ); | |
| function Template7() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var template = args[0]; | |
| var data = args[1]; | |
| if (args.length === 2) { | |
| var instance = new Template7Class(template); | |
| var rendered = instance.compile()(data); | |
| instance = null; | |
| return (rendered); | |
| } | |
| return new Template7Class(template); | |
| } | |
| Template7.registerHelper = function registerHelper(name, fn) { | |
| Template7Class.helpers[name] = fn; | |
| }; | |
| Template7.unregisterHelper = function unregisterHelper(name) { | |
| Template7Class.helpers[name] = undefined; | |
| delete Template7Class.helpers[name]; | |
| }; | |
| Template7.registerPartial = function registerPartial(name, template) { | |
| Template7Class.partials[name] = { template: template }; | |
| }; | |
| Template7.unregisterPartial = function unregisterPartial(name) { | |
| if (Template7Class.partials[name]) { | |
| Template7Class.partials[name] = undefined; | |
| delete Template7Class.partials[name]; | |
| } | |
| }; | |
| Template7.compile = function compile(template, options) { | |
| var instance = new Template7Class(template, options); | |
| return instance.compile(); | |
| }; | |
| Template7.options = Template7Class.options; | |
| Template7.helpers = Template7Class.helpers; | |
| Template7.partials = Template7Class.partials; | |
| /** | |
| * SSR Window 1.0.1 | |
| * Better handling for window object in SSR environment | |
| * https://github.com/nolimits4web/ssr-window | |
| * | |
| * Copyright 2018, Vladimir Kharlampidi | |
| * | |
| * Licensed under MIT | |
| * | |
| * Released on: July 18, 2018 | |
| */ | |
| var doc = (typeof document === 'undefined') ? { | |
| body: {}, | |
| addEventListener: function addEventListener() {}, | |
| removeEventListener: function removeEventListener() {}, | |
| activeElement: { | |
| blur: function blur() {}, | |
| nodeName: '', | |
| }, | |
| querySelector: function querySelector() { | |
| return null; | |
| }, | |
| querySelectorAll: function querySelectorAll() { | |
| return []; | |
| }, | |
| getElementById: function getElementById() { | |
| return null; | |
| }, | |
| createEvent: function createEvent() { | |
| return { | |
| initEvent: function initEvent() {}, | |
| }; | |
| }, | |
| createElement: function createElement() { | |
| return { | |
| children: [], | |
| childNodes: [], | |
| style: {}, | |
| setAttribute: function setAttribute() {}, | |
| getElementsByTagName: function getElementsByTagName() { | |
| return []; | |
| }, | |
| }; | |
| }, | |
| location: { hash: '' }, | |
| } : document; // eslint-disable-line | |
| var win = (typeof window === 'undefined') ? { | |
| document: doc, | |
| navigator: { | |
| userAgent: '', | |
| }, | |
| location: {}, | |
| history: {}, | |
| CustomEvent: function CustomEvent() { | |
| return this; | |
| }, | |
| addEventListener: function addEventListener() {}, | |
| removeEventListener: function removeEventListener() {}, | |
| getComputedStyle: function getComputedStyle() { | |
| return { | |
| getPropertyValue: function getPropertyValue() { | |
| return ''; | |
| }, | |
| }; | |
| }, | |
| Image: function Image() {}, | |
| Date: function Date() {}, | |
| screen: {}, | |
| setTimeout: function setTimeout() {}, | |
| clearTimeout: function clearTimeout() {}, | |
| } : window; // eslint-disable-line | |
| /** | |
| * Dom7 2.1.2 | |
| * Minimalistic JavaScript library for DOM manipulation, with a jQuery-compatible API | |
| * http://framework7.io/docs/dom.html | |
| * | |
| * Copyright 2018, Vladimir Kharlampidi | |
| * The iDangero.us | |
| * http://www.idangero.us/ | |
| * | |
| * Licensed under MIT | |
| * | |
| * Released on: September 13, 2018 | |
| */ | |
| var Dom7 = function Dom7(arr) { | |
| var self = this; | |
| // Create array-like object | |
| for (var i = 0; i < arr.length; i += 1) { | |
| self[i] = arr[i]; | |
| } | |
| self.length = arr.length; | |
| // Return collection with methods | |
| return this; | |
| }; | |
| function $(selector, context) { | |
| var arr = []; | |
| var i = 0; | |
| if (selector && !context) { | |
| if (selector instanceof Dom7) { | |
| return selector; | |
| } | |
| } | |
| if (selector) { | |
| // String | |
| if (typeof selector === 'string') { | |
| var els; | |
| var tempParent; | |
| var html = selector.trim(); | |
| if (html.indexOf('<') >= 0 && html.indexOf('>') >= 0) { | |
| var toCreate = 'div'; | |
| if (html.indexOf('<li') === 0) { toCreate = 'ul'; } | |
| if (html.indexOf('<tr') === 0) { toCreate = 'tbody'; } | |
| if (html.indexOf('<td') === 0 || html.indexOf('<th') === 0) { toCreate = 'tr'; } | |
| if (html.indexOf('<tbody') === 0) { toCreate = 'table'; } | |
| if (html.indexOf('<option') === 0) { toCreate = 'select'; } | |
| tempParent = doc.createElement(toCreate); | |
| tempParent.innerHTML = html; | |
| for (i = 0; i < tempParent.childNodes.length; i += 1) { | |
| arr.push(tempParent.childNodes[i]); | |
| } | |
| } else { | |
| if (!context && selector[0] === '#' && !selector.match(/[ .<>:~]/)) { | |
| // Pure ID selector | |
| els = [doc.getElementById(selector.trim().split('#')[1])]; | |
| } else { | |
| // Other selectors | |
| els = (context || doc).querySelectorAll(selector.trim()); | |
| } | |
| for (i = 0; i < els.length; i += 1) { | |
| if (els[i]) { arr.push(els[i]); } | |
| } | |
| } | |
| } else if (selector.nodeType || selector === win || selector === doc) { | |
| // Node/element | |
| arr.push(selector); | |
| } else if (selector.length > 0 && selector[0].nodeType) { | |
| // Array of elements or instance of Dom | |
| for (i = 0; i < selector.length; i += 1) { | |
| arr.push(selector[i]); | |
| } | |
| } | |
| } | |
| return new Dom7(arr); | |
| } | |
| $.fn = Dom7.prototype; | |
| $.Class = Dom7; | |
| $.Dom7 = Dom7; | |
| function unique(arr) { | |
| var uniqueArray = []; | |
| for (var i = 0; i < arr.length; i += 1) { | |
| if (uniqueArray.indexOf(arr[i]) === -1) { uniqueArray.push(arr[i]); } | |
| } | |
| return uniqueArray; | |
| } | |
| function toCamelCase(string) { | |
| return string.toLowerCase().replace(/-(.)/g, function (match, group1) { return group1.toUpperCase(); }); | |
| } | |
| function requestAnimationFrame(callback) { | |
| if (win.requestAnimationFrame) { return win.requestAnimationFrame(callback); } | |
| else if (win.webkitRequestAnimationFrame) { return win.webkitRequestAnimationFrame(callback); } | |
| return win.setTimeout(callback, 1000 / 60); | |
| } | |
| function cancelAnimationFrame(id) { | |
| if (win.cancelAnimationFrame) { return win.cancelAnimationFrame(id); } | |
| else if (win.webkitCancelAnimationFrame) { return win.webkitCancelAnimationFrame(id); } | |
| return win.clearTimeout(id); | |
| } | |
| // Classes and attributes | |
| function addClass(className) { | |
| if (typeof className === 'undefined') { | |
| return this; | |
| } | |
| var classes = className.split(' '); | |
| for (var i = 0; i < classes.length; i += 1) { | |
| for (var j = 0; j < this.length; j += 1) { | |
| if (typeof this[j] !== 'undefined' && typeof this[j].classList !== 'undefined') { this[j].classList.add(classes[i]); } | |
| } | |
| } | |
| return this; | |
| } | |
| function removeClass(className) { | |
| var classes = className.split(' '); | |
| for (var i = 0; i < classes.length; i += 1) { | |
| for (var j = 0; j < this.length; j += 1) { | |
| if (typeof this[j] !== 'undefined' && typeof this[j].classList !== 'undefined') { this[j].classList.remove(classes[i]); } | |
| } | |
| } | |
| return this; | |
| } | |
| function hasClass(className) { | |
| if (!this[0]) { return false; } | |
| return this[0].classList.contains(className); | |
| } | |
| function toggleClass(className) { | |
| var classes = className.split(' '); | |
| for (var i = 0; i < classes.length; i += 1) { | |
| for (var j = 0; j < this.length; j += 1) { | |
| if (typeof this[j] !== 'undefined' && typeof this[j].classList !== 'undefined') { this[j].classList.toggle(classes[i]); } | |
| } | |
| } | |
| return this; | |
| } | |
| function attr(attrs, value) { | |
| var arguments$1 = arguments; | |
| if (arguments.length === 1 && typeof attrs === 'string') { | |
| // Get attr | |
| if (this[0]) { return this[0].getAttribute(attrs); } | |
| return undefined; | |
| } | |
| // Set attrs | |
| for (var i = 0; i < this.length; i += 1) { | |
| if (arguments$1.length === 2) { | |
| // String | |
| this[i].setAttribute(attrs, value); | |
| } else { | |
| // Object | |
| // eslint-disable-next-line | |
| for (var attrName in attrs) { | |
| this[i][attrName] = attrs[attrName]; | |
| this[i].setAttribute(attrName, attrs[attrName]); | |
| } | |
| } | |
| } | |
| return this; | |
| } | |
| // eslint-disable-next-line | |
| function removeAttr(attr) { | |
| for (var i = 0; i < this.length; i += 1) { | |
| this[i].removeAttribute(attr); | |
| } | |
| return this; | |
| } | |
| // eslint-disable-next-line | |
| function prop(props, value) { | |
| var arguments$1 = arguments; | |
| if (arguments.length === 1 && typeof props === 'string') { | |
| // Get prop | |
| if (this[0]) { return this[0][props]; } | |
| } else { | |
| // Set props | |
| for (var i = 0; i < this.length; i += 1) { | |
| if (arguments$1.length === 2) { | |
| // String | |
| this[i][props] = value; | |
| } else { | |
| // Object | |
| // eslint-disable-next-line | |
| for (var propName in props) { | |
| this[i][propName] = props[propName]; | |
| } | |
| } | |
| } | |
| return this; | |
| } | |
| } | |
| function data(key, value) { | |
| var el; | |
| if (typeof value === 'undefined') { | |
| el = this[0]; | |
| // Get value | |
| if (el) { | |
| if (el.dom7ElementDataStorage && (key in el.dom7ElementDataStorage)) { | |
| return el.dom7ElementDataStorage[key]; | |
| } | |
| var dataKey = el.getAttribute(("data-" + key)); | |
| if (dataKey) { | |
| return dataKey; | |
| } | |
| return undefined; | |
| } | |
| return undefined; | |
| } | |
| // Set value | |
| for (var i = 0; i < this.length; i += 1) { | |
| el = this[i]; | |
| if (!el.dom7ElementDataStorage) { el.dom7ElementDataStorage = {}; } | |
| el.dom7ElementDataStorage[key] = value; | |
| } | |
| return this; | |
| } | |
| function removeData(key) { | |
| for (var i = 0; i < this.length; i += 1) { | |
| var el = this[i]; | |
| if (el.dom7ElementDataStorage && el.dom7ElementDataStorage[key]) { | |
| el.dom7ElementDataStorage[key] = null; | |
| delete el.dom7ElementDataStorage[key]; | |
| } | |
| } | |
| } | |
| function dataset() { | |
| var el = this[0]; | |
| if (!el) { return undefined; } | |
| var dataset = {}; // eslint-disable-line | |
| if (el.dataset) { | |
| // eslint-disable-next-line | |
| for (var dataKey in el.dataset) { | |
| dataset[dataKey] = el.dataset[dataKey]; | |
| } | |
| } else { | |
| for (var i = 0; i < el.attributes.length; i += 1) { | |
| // eslint-disable-next-line | |
| var attr = el.attributes[i]; | |
| if (attr.name.indexOf('data-') >= 0) { | |
| dataset[toCamelCase(attr.name.split('data-')[1])] = attr.value; | |
| } | |
| } | |
| } | |
| // eslint-disable-next-line | |
| for (var key in dataset) { | |
| if (dataset[key] === 'false') { dataset[key] = false; } | |
| else if (dataset[key] === 'true') { dataset[key] = true; } | |
| else if (parseFloat(dataset[key]) === dataset[key] * 1) { dataset[key] *= 1; } | |
| } | |
| return dataset; | |
| } | |
| function val(value) { | |
| var dom = this; | |
| if (typeof value === 'undefined') { | |
| if (dom[0]) { | |
| if (dom[0].multiple && dom[0].nodeName.toLowerCase() === 'select') { | |
| var values = []; | |
| for (var i = 0; i < dom[0].selectedOptions.length; i += 1) { | |
| values.push(dom[0].selectedOptions[i].value); | |
| } | |
| return values; | |
| } | |
| return dom[0].value; | |
| } | |
| return undefined; | |
| } | |
| for (var i$1 = 0; i$1 < dom.length; i$1 += 1) { | |
| var el = dom[i$1]; | |
| if (Array.isArray(value) && el.multiple && el.nodeName.toLowerCase() === 'select') { | |
| for (var j = 0; j < el.options.length; j += 1) { | |
| el.options[j].selected = value.indexOf(el.options[j].value) >= 0; | |
| } | |
| } else { | |
| el.value = value; | |
| } | |
| } | |
| return dom; | |
| } | |
| // Transforms | |
| // eslint-disable-next-line | |
| function transform(transform) { | |
| for (var i = 0; i < this.length; i += 1) { | |
| var elStyle = this[i].style; | |
| elStyle.webkitTransform = transform; | |
| elStyle.transform = transform; | |
| } | |
| return this; | |
| } | |
| function transition(duration) { | |
| if (typeof duration !== 'string') { | |
| duration = duration + "ms"; // eslint-disable-line | |
| } | |
| for (var i = 0; i < this.length; i += 1) { | |
| var elStyle = this[i].style; | |
| elStyle.webkitTransitionDuration = duration; | |
| elStyle.transitionDuration = duration; | |
| } | |
| return this; | |
| } | |
| // Events | |
| function on() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var eventType = args[0]; | |
| var targetSelector = args[1]; | |
| var listener = args[2]; | |
| var capture = args[3]; | |
| if (typeof args[1] === 'function') { | |
| (assign = args, eventType = assign[0], listener = assign[1], capture = assign[2]); | |
| targetSelector = undefined; | |
| } | |
| if (!capture) { capture = false; } | |
| function handleLiveEvent(e) { | |
| var target = e.target; | |
| if (!target) { return; } | |
| var eventData = e.target.dom7EventData || []; | |
| if (eventData.indexOf(e) < 0) { | |
| eventData.unshift(e); | |
| } | |
| if ($(target).is(targetSelector)) { listener.apply(target, eventData); } | |
| else { | |
| var parents = $(target).parents(); // eslint-disable-line | |
| for (var k = 0; k < parents.length; k += 1) { | |
| if ($(parents[k]).is(targetSelector)) { listener.apply(parents[k], eventData); } | |
| } | |
| } | |
| } | |
| function handleEvent(e) { | |
| var eventData = e && e.target ? e.target.dom7EventData || [] : []; | |
| if (eventData.indexOf(e) < 0) { | |
| eventData.unshift(e); | |
| } | |
| listener.apply(this, eventData); | |
| } | |
| var events = eventType.split(' '); | |
| var j; | |
| for (var i = 0; i < this.length; i += 1) { | |
| var el = this[i]; | |
| if (!targetSelector) { | |
| for (j = 0; j < events.length; j += 1) { | |
| var event = events[j]; | |
| if (!el.dom7Listeners) { el.dom7Listeners = {}; } | |
| if (!el.dom7Listeners[event]) { el.dom7Listeners[event] = []; } | |
| el.dom7Listeners[event].push({ | |
| listener: listener, | |
| proxyListener: handleEvent, | |
| }); | |
| el.addEventListener(event, handleEvent, capture); | |
| } | |
| } else { | |
| // Live events | |
| for (j = 0; j < events.length; j += 1) { | |
| var event$1 = events[j]; | |
| if (!el.dom7LiveListeners) { el.dom7LiveListeners = {}; } | |
| if (!el.dom7LiveListeners[event$1]) { el.dom7LiveListeners[event$1] = []; } | |
| el.dom7LiveListeners[event$1].push({ | |
| listener: listener, | |
| proxyListener: handleLiveEvent, | |
| }); | |
| el.addEventListener(event$1, handleLiveEvent, capture); | |
| } | |
| } | |
| } | |
| return this; | |
| } | |
| function off() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var eventType = args[0]; | |
| var targetSelector = args[1]; | |
| var listener = args[2]; | |
| var capture = args[3]; | |
| if (typeof args[1] === 'function') { | |
| (assign = args, eventType = assign[0], listener = assign[1], capture = assign[2]); | |
| targetSelector = undefined; | |
| } | |
| if (!capture) { capture = false; } | |
| var events = eventType.split(' '); | |
| for (var i = 0; i < events.length; i += 1) { | |
| var event = events[i]; | |
| for (var j = 0; j < this.length; j += 1) { | |
| var el = this[j]; | |
| var handlers = (void 0); | |
| if (!targetSelector && el.dom7Listeners) { | |
| handlers = el.dom7Listeners[event]; | |
| } else if (targetSelector && el.dom7LiveListeners) { | |
| handlers = el.dom7LiveListeners[event]; | |
| } | |
| if (handlers && handlers.length) { | |
| for (var k = handlers.length - 1; k >= 0; k -= 1) { | |
| var handler = handlers[k]; | |
| if (listener && handler.listener === listener) { | |
| el.removeEventListener(event, handler.proxyListener, capture); | |
| handlers.splice(k, 1); | |
| } else if (!listener) { | |
| el.removeEventListener(event, handler.proxyListener, capture); | |
| handlers.splice(k, 1); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| return this; | |
| } | |
| function once() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var dom = this; | |
| var eventName = args[0]; | |
| var targetSelector = args[1]; | |
| var listener = args[2]; | |
| var capture = args[3]; | |
| if (typeof args[1] === 'function') { | |
| (assign = args, eventName = assign[0], listener = assign[1], capture = assign[2]); | |
| targetSelector = undefined; | |
| } | |
| function proxy() { | |
| var eventArgs = [], len = arguments.length; | |
| while ( len-- ) eventArgs[ len ] = arguments[ len ]; | |
| listener.apply(this, eventArgs); | |
| dom.off(eventName, targetSelector, proxy, capture); | |
| } | |
| return dom.on(eventName, targetSelector, proxy, capture); | |
| } | |
| function trigger() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var events = args[0].split(' '); | |
| var eventData = args[1]; | |
| for (var i = 0; i < events.length; i += 1) { | |
| var event = events[i]; | |
| for (var j = 0; j < this.length; j += 1) { | |
| var el = this[j]; | |
| var evt = (void 0); | |
| try { | |
| evt = new win.CustomEvent(event, { | |
| detail: eventData, | |
| bubbles: true, | |
| cancelable: true, | |
| }); | |
| } catch (e) { | |
| evt = doc.createEvent('Event'); | |
| evt.initEvent(event, true, true); | |
| evt.detail = eventData; | |
| } | |
| // eslint-disable-next-line | |
| el.dom7EventData = args.filter(function (data, dataIndex) { return dataIndex > 0; }); | |
| el.dispatchEvent(evt); | |
| el.dom7EventData = []; | |
| delete el.dom7EventData; | |
| } | |
| } | |
| return this; | |
| } | |
| function transitionEnd(callback) { | |
| var events = ['webkitTransitionEnd', 'transitionend']; | |
| var dom = this; | |
| var i; | |
| function fireCallBack(e) { | |
| /* jshint validthis:true */ | |
| if (e.target !== this) { return; } | |
| callback.call(this, e); | |
| for (i = 0; i < events.length; i += 1) { | |
| dom.off(events[i], fireCallBack); | |
| } | |
| } | |
| if (callback) { | |
| for (i = 0; i < events.length; i += 1) { | |
| dom.on(events[i], fireCallBack); | |
| } | |
| } | |
| return this; | |
| } | |
| function animationEnd(callback) { | |
| var events = ['webkitAnimationEnd', 'animationend']; | |
| var dom = this; | |
| var i; | |
| function fireCallBack(e) { | |
| if (e.target !== this) { return; } | |
| callback.call(this, e); | |
| for (i = 0; i < events.length; i += 1) { | |
| dom.off(events[i], fireCallBack); | |
| } | |
| } | |
| if (callback) { | |
| for (i = 0; i < events.length; i += 1) { | |
| dom.on(events[i], fireCallBack); | |
| } | |
| } | |
| return this; | |
| } | |
| // Sizing/Styles | |
| function width() { | |
| if (this[0] === win) { | |
| return win.innerWidth; | |
| } | |
| if (this.length > 0) { | |
| return parseFloat(this.css('width')); | |
| } | |
| return null; | |
| } | |
| function outerWidth(includeMargins) { | |
| if (this.length > 0) { | |
| if (includeMargins) { | |
| // eslint-disable-next-line | |
| var styles = this.styles(); | |
| return this[0].offsetWidth + parseFloat(styles.getPropertyValue('margin-right')) + parseFloat(styles.getPropertyValue('margin-left')); | |
| } | |
| return this[0].offsetWidth; | |
| } | |
| return null; | |
| } | |
| function height() { | |
| if (this[0] === win) { | |
| return win.innerHeight; | |
| } | |
| if (this.length > 0) { | |
| return parseFloat(this.css('height')); | |
| } | |
| return null; | |
| } | |
| function outerHeight(includeMargins) { | |
| if (this.length > 0) { | |
| if (includeMargins) { | |
| // eslint-disable-next-line | |
| var styles = this.styles(); | |
| return this[0].offsetHeight + parseFloat(styles.getPropertyValue('margin-top')) + parseFloat(styles.getPropertyValue('margin-bottom')); | |
| } | |
| return this[0].offsetHeight; | |
| } | |
| return null; | |
| } | |
| function offset() { | |
| if (this.length > 0) { | |
| var el = this[0]; | |
| var box = el.getBoundingClientRect(); | |
| var body = doc.body; | |
| var clientTop = el.clientTop || body.clientTop || 0; | |
| var clientLeft = el.clientLeft || body.clientLeft || 0; | |
| var scrollTop = el === win ? win.scrollY : el.scrollTop; | |
| var scrollLeft = el === win ? win.scrollX : el.scrollLeft; | |
| return { | |
| top: (box.top + scrollTop) - clientTop, | |
| left: (box.left + scrollLeft) - clientLeft, | |
| }; | |
| } | |
| return null; | |
| } | |
| function hide() { | |
| for (var i = 0; i < this.length; i += 1) { | |
| this[i].style.display = 'none'; | |
| } | |
| return this; | |
| } | |
| function show() { | |
| for (var i = 0; i < this.length; i += 1) { | |
| var el = this[i]; | |
| if (el.style.display === 'none') { | |
| el.style.display = ''; | |
| } | |
| if (win.getComputedStyle(el, null).getPropertyValue('display') === 'none') { | |
| // Still not visible | |
| el.style.display = 'block'; | |
| } | |
| } | |
| return this; | |
| } | |
| function styles() { | |
| if (this[0]) { return win.getComputedStyle(this[0], null); } | |
| return {}; | |
| } | |
| function css(props, value) { | |
| var i; | |
| if (arguments.length === 1) { | |
| if (typeof props === 'string') { | |
| if (this[0]) { return win.getComputedStyle(this[0], null).getPropertyValue(props); } | |
| } else { | |
| for (i = 0; i < this.length; i += 1) { | |
| // eslint-disable-next-line | |
| for (var prop in props) { | |
| this[i].style[prop] = props[prop]; | |
| } | |
| } | |
| return this; | |
| } | |
| } | |
| if (arguments.length === 2 && typeof props === 'string') { | |
| for (i = 0; i < this.length; i += 1) { | |
| this[i].style[props] = value; | |
| } | |
| return this; | |
| } | |
| return this; | |
| } | |
| // Dom manipulation | |
| function toArray() { | |
| var arr = []; | |
| for (var i = 0; i < this.length; i += 1) { | |
| arr.push(this[i]); | |
| } | |
| return arr; | |
| } | |
| // Iterate over the collection passing elements to `callback` | |
| function each(callback) { | |
| // Don't bother continuing without a callback | |
| if (!callback) { return this; } | |
| // Iterate over the current collection | |
| for (var i = 0; i < this.length; i += 1) { | |
| // If the callback returns false | |
| if (callback.call(this[i], i, this[i]) === false) { | |
| // End the loop early | |
| return this; | |
| } | |
| } | |
| // Return `this` to allow chained DOM operations | |
| return this; | |
| } | |
| function forEach(callback) { | |
| // Don't bother continuing without a callback | |
| if (!callback) { return this; } | |
| // Iterate over the current collection | |
| for (var i = 0; i < this.length; i += 1) { | |
| // If the callback returns false | |
| if (callback.call(this[i], this[i], i) === false) { | |
| // End the loop early | |
| return this; | |
| } | |
| } | |
| // Return `this` to allow chained DOM operations | |
| return this; | |
| } | |
| function filter(callback) { | |
| var matchedItems = []; | |
| var dom = this; | |
| for (var i = 0; i < dom.length; i += 1) { | |
| if (callback.call(dom[i], i, dom[i])) { matchedItems.push(dom[i]); } | |
| } | |
| return new Dom7(matchedItems); | |
| } | |
| function map(callback) { | |
| var modifiedItems = []; | |
| var dom = this; | |
| for (var i = 0; i < dom.length; i += 1) { | |
| modifiedItems.push(callback.call(dom[i], i, dom[i])); | |
| } | |
| return new Dom7(modifiedItems); | |
| } | |
| // eslint-disable-next-line | |
| function html(html) { | |
| if (typeof html === 'undefined') { | |
| return this[0] ? this[0].innerHTML : undefined; | |
| } | |
| for (var i = 0; i < this.length; i += 1) { | |
| this[i].innerHTML = html; | |
| } | |
| return this; | |
| } | |
| // eslint-disable-next-line | |
| function text(text) { | |
| if (typeof text === 'undefined') { | |
| if (this[0]) { | |
| return this[0].textContent.trim(); | |
| } | |
| return null; | |
| } | |
| for (var i = 0; i < this.length; i += 1) { | |
| this[i].textContent = text; | |
| } | |
| return this; | |
| } | |
| function is(selector) { | |
| var el = this[0]; | |
| var compareWith; | |
| var i; | |
| if (!el || typeof selector === 'undefined') { return false; } | |
| if (typeof selector === 'string') { | |
| if (el.matches) { return el.matches(selector); } | |
| else if (el.webkitMatchesSelector) { return el.webkitMatchesSelector(selector); } | |
| else if (el.msMatchesSelector) { return el.msMatchesSelector(selector); } | |
| compareWith = $(selector); | |
| for (i = 0; i < compareWith.length; i += 1) { | |
| if (compareWith[i] === el) { return true; } | |
| } | |
| return false; | |
| } else if (selector === doc) { return el === doc; } | |
| else if (selector === win) { return el === win; } | |
| if (selector.nodeType || selector instanceof Dom7) { | |
| compareWith = selector.nodeType ? [selector] : selector; | |
| for (i = 0; i < compareWith.length; i += 1) { | |
| if (compareWith[i] === el) { return true; } | |
| } | |
| return false; | |
| } | |
| return false; | |
| } | |
| function indexOf(el) { | |
| for (var i = 0; i < this.length; i += 1) { | |
| if (this[i] === el) { return i; } | |
| } | |
| return -1; | |
| } | |
| function index() { | |
| var child = this[0]; | |
| var i; | |
| if (child) { | |
| i = 0; | |
| // eslint-disable-next-line | |
| while ((child = child.previousSibling) !== null) { | |
| if (child.nodeType === 1) { i += 1; } | |
| } | |
| return i; | |
| } | |
| return undefined; | |
| } | |
| // eslint-disable-next-line | |
| function eq(index) { | |
| if (typeof index === 'undefined') { return this; } | |
| var length = this.length; | |
| var returnIndex; | |
| if (index > length - 1) { | |
| return new Dom7([]); | |
| } | |
| if (index < 0) { | |
| returnIndex = length + index; | |
| if (returnIndex < 0) { return new Dom7([]); } | |
| return new Dom7([this[returnIndex]]); | |
| } | |
| return new Dom7([this[index]]); | |
| } | |
| function append() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var newChild; | |
| for (var k = 0; k < args.length; k += 1) { | |
| newChild = args[k]; | |
| for (var i = 0; i < this.length; i += 1) { | |
| if (typeof newChild === 'string') { | |
| var tempDiv = doc.createElement('div'); | |
| tempDiv.innerHTML = newChild; | |
| while (tempDiv.firstChild) { | |
| this[i].appendChild(tempDiv.firstChild); | |
| } | |
| } else if (newChild instanceof Dom7) { | |
| for (var j = 0; j < newChild.length; j += 1) { | |
| this[i].appendChild(newChild[j]); | |
| } | |
| } else { | |
| this[i].appendChild(newChild); | |
| } | |
| } | |
| } | |
| return this; | |
| } | |
| // eslint-disable-next-line | |
| function appendTo(parent) { | |
| $(parent).append(this); | |
| return this; | |
| } | |
| function prepend(newChild) { | |
| var i; | |
| var j; | |
| for (i = 0; i < this.length; i += 1) { | |
| if (typeof newChild === 'string') { | |
| var tempDiv = doc.createElement('div'); | |
| tempDiv.innerHTML = newChild; | |
| for (j = tempDiv.childNodes.length - 1; j >= 0; j -= 1) { | |
| this[i].insertBefore(tempDiv.childNodes[j], this[i].childNodes[0]); | |
| } | |
| } else if (newChild instanceof Dom7) { | |
| for (j = 0; j < newChild.length; j += 1) { | |
| this[i].insertBefore(newChild[j], this[i].childNodes[0]); | |
| } | |
| } else { | |
| this[i].insertBefore(newChild, this[i].childNodes[0]); | |
| } | |
| } | |
| return this; | |
| } | |
| // eslint-disable-next-line | |
| function prependTo(parent) { | |
| $(parent).prepend(this); | |
| return this; | |
| } | |
| function insertBefore(selector) { | |
| var before = $(selector); | |
| for (var i = 0; i < this.length; i += 1) { | |
| if (before.length === 1) { | |
| before[0].parentNode.insertBefore(this[i], before[0]); | |
| } else if (before.length > 1) { | |
| for (var j = 0; j < before.length; j += 1) { | |
| before[j].parentNode.insertBefore(this[i].cloneNode(true), before[j]); | |
| } | |
| } | |
| } | |
| } | |
| function insertAfter(selector) { | |
| var after = $(selector); | |
| for (var i = 0; i < this.length; i += 1) { | |
| if (after.length === 1) { | |
| after[0].parentNode.insertBefore(this[i], after[0].nextSibling); | |
| } else if (after.length > 1) { | |
| for (var j = 0; j < after.length; j += 1) { | |
| after[j].parentNode.insertBefore(this[i].cloneNode(true), after[j].nextSibling); | |
| } | |
| } | |
| } | |
| } | |
| function next(selector) { | |
| if (this.length > 0) { | |
| if (selector) { | |
| if (this[0].nextElementSibling && $(this[0].nextElementSibling).is(selector)) { | |
| return new Dom7([this[0].nextElementSibling]); | |
| } | |
| return new Dom7([]); | |
| } | |
| if (this[0].nextElementSibling) { return new Dom7([this[0].nextElementSibling]); } | |
| return new Dom7([]); | |
| } | |
| return new Dom7([]); | |
| } | |
| function nextAll(selector) { | |
| var nextEls = []; | |
| var el = this[0]; | |
| if (!el) { return new Dom7([]); } | |
| while (el.nextElementSibling) { | |
| var next = el.nextElementSibling; // eslint-disable-line | |
| if (selector) { | |
| if ($(next).is(selector)) { nextEls.push(next); } | |
| } else { nextEls.push(next); } | |
| el = next; | |
| } | |
| return new Dom7(nextEls); | |
| } | |
| function prev(selector) { | |
| if (this.length > 0) { | |
| var el = this[0]; | |
| if (selector) { | |
| if (el.previousElementSibling && $(el.previousElementSibling).is(selector)) { | |
| return new Dom7([el.previousElementSibling]); | |
| } | |
| return new Dom7([]); | |
| } | |
| if (el.previousElementSibling) { return new Dom7([el.previousElementSibling]); } | |
| return new Dom7([]); | |
| } | |
| return new Dom7([]); | |
| } | |
| function prevAll(selector) { | |
| var prevEls = []; | |
| var el = this[0]; | |
| if (!el) { return new Dom7([]); } | |
| while (el.previousElementSibling) { | |
| var prev = el.previousElementSibling; // eslint-disable-line | |
| if (selector) { | |
| if ($(prev).is(selector)) { prevEls.push(prev); } | |
| } else { prevEls.push(prev); } | |
| el = prev; | |
| } | |
| return new Dom7(prevEls); | |
| } | |
| function siblings(selector) { | |
| return this.nextAll(selector).add(this.prevAll(selector)); | |
| } | |
| function parent(selector) { | |
| var parents = []; // eslint-disable-line | |
| for (var i = 0; i < this.length; i += 1) { | |
| if (this[i].parentNode !== null) { | |
| if (selector) { | |
| if ($(this[i].parentNode).is(selector)) { parents.push(this[i].parentNode); } | |
| } else { | |
| parents.push(this[i].parentNode); | |
| } | |
| } | |
| } | |
| return $(unique(parents)); | |
| } | |
| function parents(selector) { | |
| var parents = []; // eslint-disable-line | |
| for (var i = 0; i < this.length; i += 1) { | |
| var parent = this[i].parentNode; // eslint-disable-line | |
| while (parent) { | |
| if (selector) { | |
| if ($(parent).is(selector)) { parents.push(parent); } | |
| } else { | |
| parents.push(parent); | |
| } | |
| parent = parent.parentNode; | |
| } | |
| } | |
| return $(unique(parents)); | |
| } | |
| function closest(selector) { | |
| var closest = this; // eslint-disable-line | |
| if (typeof selector === 'undefined') { | |
| return new Dom7([]); | |
| } | |
| if (!closest.is(selector)) { | |
| closest = closest.parents(selector).eq(0); | |
| } | |
| return closest; | |
| } | |
| function find(selector) { | |
| var foundElements = []; | |
| for (var i = 0; i < this.length; i += 1) { | |
| var found = this[i].querySelectorAll(selector); | |
| for (var j = 0; j < found.length; j += 1) { | |
| foundElements.push(found[j]); | |
| } | |
| } | |
| return new Dom7(foundElements); | |
| } | |
| function children(selector) { | |
| var children = []; // eslint-disable-line | |
| for (var i = 0; i < this.length; i += 1) { | |
| var childNodes = this[i].childNodes; | |
| for (var j = 0; j < childNodes.length; j += 1) { | |
| if (!selector) { | |
| if (childNodes[j].nodeType === 1) { children.push(childNodes[j]); } | |
| } else if (childNodes[j].nodeType === 1 && $(childNodes[j]).is(selector)) { | |
| children.push(childNodes[j]); | |
| } | |
| } | |
| } | |
| return new Dom7(unique(children)); | |
| } | |
| function remove() { | |
| for (var i = 0; i < this.length; i += 1) { | |
| if (this[i].parentNode) { this[i].parentNode.removeChild(this[i]); } | |
| } | |
| return this; | |
| } | |
| function detach() { | |
| return this.remove(); | |
| } | |
| function add() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var dom = this; | |
| var i; | |
| var j; | |
| for (i = 0; i < args.length; i += 1) { | |
| var toAdd = $(args[i]); | |
| for (j = 0; j < toAdd.length; j += 1) { | |
| dom[dom.length] = toAdd[j]; | |
| dom.length += 1; | |
| } | |
| } | |
| return dom; | |
| } | |
| function empty() { | |
| for (var i = 0; i < this.length; i += 1) { | |
| var el = this[i]; | |
| if (el.nodeType === 1) { | |
| for (var j = 0; j < el.childNodes.length; j += 1) { | |
| if (el.childNodes[j].parentNode) { | |
| el.childNodes[j].parentNode.removeChild(el.childNodes[j]); | |
| } | |
| } | |
| el.textContent = ''; | |
| } | |
| } | |
| return this; | |
| } | |
| var Methods = /*#__PURE__*/Object.freeze({ | |
| addClass: addClass, | |
| removeClass: removeClass, | |
| hasClass: hasClass, | |
| toggleClass: toggleClass, | |
| attr: attr, | |
| removeAttr: removeAttr, | |
| prop: prop, | |
| data: data, | |
| removeData: removeData, | |
| dataset: dataset, | |
| val: val, | |
| transform: transform, | |
| transition: transition, | |
| on: on, | |
| off: off, | |
| once: once, | |
| trigger: trigger, | |
| transitionEnd: transitionEnd, | |
| animationEnd: animationEnd, | |
| width: width, | |
| outerWidth: outerWidth, | |
| height: height, | |
| outerHeight: outerHeight, | |
| offset: offset, | |
| hide: hide, | |
| show: show, | |
| styles: styles, | |
| css: css, | |
| toArray: toArray, | |
| each: each, | |
| forEach: forEach, | |
| filter: filter, | |
| map: map, | |
| html: html, | |
| text: text, | |
| is: is, | |
| indexOf: indexOf, | |
| index: index, | |
| eq: eq, | |
| append: append, | |
| appendTo: appendTo, | |
| prepend: prepend, | |
| prependTo: prependTo, | |
| insertBefore: insertBefore, | |
| insertAfter: insertAfter, | |
| next: next, | |
| nextAll: nextAll, | |
| prev: prev, | |
| prevAll: prevAll, | |
| siblings: siblings, | |
| parent: parent, | |
| parents: parents, | |
| closest: closest, | |
| find: find, | |
| children: children, | |
| remove: remove, | |
| detach: detach, | |
| add: add, | |
| empty: empty | |
| }); | |
| function scrollTo() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var left = args[0]; | |
| var top = args[1]; | |
| var duration = args[2]; | |
| var easing = args[3]; | |
| var callback = args[4]; | |
| if (args.length === 4 && typeof easing === 'function') { | |
| callback = easing; | |
| (assign = args, left = assign[0], top = assign[1], duration = assign[2], callback = assign[3], easing = assign[4]); | |
| } | |
| if (typeof easing === 'undefined') { easing = 'swing'; } | |
| return this.each(function animate() { | |
| var el = this; | |
| var currentTop; | |
| var currentLeft; | |
| var maxTop; | |
| var maxLeft; | |
| var newTop; | |
| var newLeft; | |
| var scrollTop; // eslint-disable-line | |
| var scrollLeft; // eslint-disable-line | |
| var animateTop = top > 0 || top === 0; | |
| var animateLeft = left > 0 || left === 0; | |
| if (typeof easing === 'undefined') { | |
| easing = 'swing'; | |
| } | |
| if (animateTop) { | |
| currentTop = el.scrollTop; | |
| if (!duration) { | |
| el.scrollTop = top; | |
| } | |
| } | |
| if (animateLeft) { | |
| currentLeft = el.scrollLeft; | |
| if (!duration) { | |
| el.scrollLeft = left; | |
| } | |
| } | |
| if (!duration) { return; } | |
| if (animateTop) { | |
| maxTop = el.scrollHeight - el.offsetHeight; | |
| newTop = Math.max(Math.min(top, maxTop), 0); | |
| } | |
| if (animateLeft) { | |
| maxLeft = el.scrollWidth - el.offsetWidth; | |
| newLeft = Math.max(Math.min(left, maxLeft), 0); | |
| } | |
| var startTime = null; | |
| if (animateTop && newTop === currentTop) { animateTop = false; } | |
| if (animateLeft && newLeft === currentLeft) { animateLeft = false; } | |
| function render(time) { | |
| if ( time === void 0 ) time = new Date().getTime(); | |
| if (startTime === null) { | |
| startTime = time; | |
| } | |
| var progress = Math.max(Math.min((time - startTime) / duration, 1), 0); | |
| var easeProgress = easing === 'linear' ? progress : (0.5 - (Math.cos(progress * Math.PI) / 2)); | |
| var done; | |
| if (animateTop) { scrollTop = currentTop + (easeProgress * (newTop - currentTop)); } | |
| if (animateLeft) { scrollLeft = currentLeft + (easeProgress * (newLeft - currentLeft)); } | |
| if (animateTop && newTop > currentTop && scrollTop >= newTop) { | |
| el.scrollTop = newTop; | |
| done = true; | |
| } | |
| if (animateTop && newTop < currentTop && scrollTop <= newTop) { | |
| el.scrollTop = newTop; | |
| done = true; | |
| } | |
| if (animateLeft && newLeft > currentLeft && scrollLeft >= newLeft) { | |
| el.scrollLeft = newLeft; | |
| done = true; | |
| } | |
| if (animateLeft && newLeft < currentLeft && scrollLeft <= newLeft) { | |
| el.scrollLeft = newLeft; | |
| done = true; | |
| } | |
| if (done) { | |
| if (callback) { callback(); } | |
| return; | |
| } | |
| if (animateTop) { el.scrollTop = scrollTop; } | |
| if (animateLeft) { el.scrollLeft = scrollLeft; } | |
| requestAnimationFrame(render); | |
| } | |
| requestAnimationFrame(render); | |
| }); | |
| } | |
| // scrollTop(top, duration, easing, callback) { | |
| function scrollTop() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var top = args[0]; | |
| var duration = args[1]; | |
| var easing = args[2]; | |
| var callback = args[3]; | |
| if (args.length === 3 && typeof easing === 'function') { | |
| (assign = args, top = assign[0], duration = assign[1], callback = assign[2], easing = assign[3]); | |
| } | |
| var dom = this; | |
| if (typeof top === 'undefined') { | |
| if (dom.length > 0) { return dom[0].scrollTop; } | |
| return null; | |
| } | |
| return dom.scrollTo(undefined, top, duration, easing, callback); | |
| } | |
| function scrollLeft() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var left = args[0]; | |
| var duration = args[1]; | |
| var easing = args[2]; | |
| var callback = args[3]; | |
| if (args.length === 3 && typeof easing === 'function') { | |
| (assign = args, left = assign[0], duration = assign[1], callback = assign[2], easing = assign[3]); | |
| } | |
| var dom = this; | |
| if (typeof left === 'undefined') { | |
| if (dom.length > 0) { return dom[0].scrollLeft; } | |
| return null; | |
| } | |
| return dom.scrollTo(left, undefined, duration, easing, callback); | |
| } | |
| var Scroll = /*#__PURE__*/Object.freeze({ | |
| scrollTo: scrollTo, | |
| scrollTop: scrollTop, | |
| scrollLeft: scrollLeft | |
| }); | |
| function animate(initialProps, initialParams) { | |
| var els = this; | |
| var a = { | |
| props: Object.assign({}, initialProps), | |
| params: Object.assign({ | |
| duration: 300, | |
| easing: 'swing', // or 'linear' | |
| /* Callbacks | |
| begin(elements) | |
| complete(elements) | |
| progress(elements, complete, remaining, start, tweenValue) | |
| */ | |
| }, initialParams), | |
| elements: els, | |
| animating: false, | |
| que: [], | |
| easingProgress: function easingProgress(easing, progress) { | |
| if (easing === 'swing') { | |
| return 0.5 - (Math.cos(progress * Math.PI) / 2); | |
| } | |
| if (typeof easing === 'function') { | |
| return easing(progress); | |
| } | |
| return progress; | |
| }, | |
| stop: function stop() { | |
| if (a.frameId) { | |
| cancelAnimationFrame(a.frameId); | |
| } | |
| a.animating = false; | |
| a.elements.each(function (index, el) { | |
| var element = el; | |
| delete element.dom7AnimateInstance; | |
| }); | |
| a.que = []; | |
| }, | |
| done: function done(complete) { | |
| a.animating = false; | |
| a.elements.each(function (index, el) { | |
| var element = el; | |
| delete element.dom7AnimateInstance; | |
| }); | |
| if (complete) { complete(els); } | |
| if (a.que.length > 0) { | |
| var que = a.que.shift(); | |
| a.animate(que[0], que[1]); | |
| } | |
| }, | |
| animate: function animate(props, params) { | |
| if (a.animating) { | |
| a.que.push([props, params]); | |
| return a; | |
| } | |
| var elements = []; | |
| // Define & Cache Initials & Units | |
| a.elements.each(function (index, el) { | |
| var initialFullValue; | |
| var initialValue; | |
| var unit; | |
| var finalValue; | |
| var finalFullValue; | |
| if (!el.dom7AnimateInstance) { a.elements[index].dom7AnimateInstance = a; } | |
| elements[index] = { | |
| container: el, | |
| }; | |
| Object.keys(props).forEach(function (prop) { | |
| initialFullValue = win.getComputedStyle(el, null).getPropertyValue(prop).replace(',', '.'); | |
| initialValue = parseFloat(initialFullValue); | |
| unit = initialFullValue.replace(initialValue, ''); | |
| finalValue = parseFloat(props[prop]); | |
| finalFullValue = props[prop] + unit; | |
| elements[index][prop] = { | |
| initialFullValue: initialFullValue, | |
| initialValue: initialValue, | |
| unit: unit, | |
| finalValue: finalValue, | |
| finalFullValue: finalFullValue, | |
| currentValue: initialValue, | |
| }; | |
| }); | |
| }); | |
| var startTime = null; | |
| var time; | |
| var elementsDone = 0; | |
| var propsDone = 0; | |
| var done; | |
| var began = false; | |
| a.animating = true; | |
| function render() { | |
| time = new Date().getTime(); | |
| var progress; | |
| var easeProgress; | |
| // let el; | |
| if (!began) { | |
| began = true; | |
| if (params.begin) { params.begin(els); } | |
| } | |
| if (startTime === null) { | |
| startTime = time; | |
| } | |
| if (params.progress) { | |
| // eslint-disable-next-line | |
| params.progress(els, Math.max(Math.min((time - startTime) / params.duration, 1), 0), ((startTime + params.duration) - time < 0 ? 0 : (startTime + params.duration) - time), startTime); | |
| } | |
| elements.forEach(function (element) { | |
| var el = element; | |
| if (done || el.done) { return; } | |
| Object.keys(props).forEach(function (prop) { | |
| if (done || el.done) { return; } | |
| progress = Math.max(Math.min((time - startTime) / params.duration, 1), 0); | |
| easeProgress = a.easingProgress(params.easing, progress); | |
| var ref = el[prop]; | |
| var initialValue = ref.initialValue; | |
| var finalValue = ref.finalValue; | |
| var unit = ref.unit; | |
| el[prop].currentValue = initialValue + (easeProgress * (finalValue - initialValue)); | |
| var currentValue = el[prop].currentValue; | |
| if ( | |
| (finalValue > initialValue && currentValue >= finalValue) || | |
| (finalValue < initialValue && currentValue <= finalValue)) { | |
| el.container.style[prop] = finalValue + unit; | |
| propsDone += 1; | |
| if (propsDone === Object.keys(props).length) { | |
| el.done = true; | |
| elementsDone += 1; | |
| } | |
| if (elementsDone === elements.length) { | |
| done = true; | |
| } | |
| } | |
| if (done) { | |
| a.done(params.complete); | |
| return; | |
| } | |
| el.container.style[prop] = currentValue + unit; | |
| }); | |
| }); | |
| if (done) { return; } | |
| // Then call | |
| a.frameId = requestAnimationFrame(render); | |
| } | |
| a.frameId = requestAnimationFrame(render); | |
| return a; | |
| }, | |
| }; | |
| if (a.elements.length === 0) { | |
| return els; | |
| } | |
| var animateInstance; | |
| for (var i = 0; i < a.elements.length; i += 1) { | |
| if (a.elements[i].dom7AnimateInstance) { | |
| animateInstance = a.elements[i].dom7AnimateInstance; | |
| } else { a.elements[i].dom7AnimateInstance = a; } | |
| } | |
| if (!animateInstance) { | |
| animateInstance = a; | |
| } | |
| if (initialProps === 'stop') { | |
| animateInstance.stop(); | |
| } else { | |
| animateInstance.animate(a.props, a.params); | |
| } | |
| return els; | |
| } | |
| function stop() { | |
| var els = this; | |
| for (var i = 0; i < els.length; i += 1) { | |
| if (els[i].dom7AnimateInstance) { | |
| els[i].dom7AnimateInstance.stop(); | |
| } | |
| } | |
| } | |
| var Animate = /*#__PURE__*/Object.freeze({ | |
| animate: animate, | |
| stop: stop | |
| }); | |
| var noTrigger = ('resize scroll').split(' '); | |
| function eventShortcut(name) { | |
| var ref; | |
| var args = [], len = arguments.length - 1; | |
| while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | |
| if (typeof args[0] === 'undefined') { | |
| for (var i = 0; i < this.length; i += 1) { | |
| if (noTrigger.indexOf(name) < 0) { | |
| if (name in this[i]) { this[i][name](); } | |
| else { | |
| $(this[i]).trigger(name); | |
| } | |
| } | |
| } | |
| return this; | |
| } | |
| return (ref = this).on.apply(ref, [ name ].concat( args )); | |
| } | |
| function click() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'click' ].concat( args )); | |
| } | |
| function blur() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'blur' ].concat( args )); | |
| } | |
| function focus() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'focus' ].concat( args )); | |
| } | |
| function focusin() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'focusin' ].concat( args )); | |
| } | |
| function focusout() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'focusout' ].concat( args )); | |
| } | |
| function keyup() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'keyup' ].concat( args )); | |
| } | |
| function keydown() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'keydown' ].concat( args )); | |
| } | |
| function keypress() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'keypress' ].concat( args )); | |
| } | |
| function submit() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'submit' ].concat( args )); | |
| } | |
| function change() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'change' ].concat( args )); | |
| } | |
| function mousedown() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'mousedown' ].concat( args )); | |
| } | |
| function mousemove() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'mousemove' ].concat( args )); | |
| } | |
| function mouseup() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'mouseup' ].concat( args )); | |
| } | |
| function mouseenter() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'mouseenter' ].concat( args )); | |
| } | |
| function mouseleave() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'mouseleave' ].concat( args )); | |
| } | |
| function mouseout() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'mouseout' ].concat( args )); | |
| } | |
| function mouseover() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'mouseover' ].concat( args )); | |
| } | |
| function touchstart() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'touchstart' ].concat( args )); | |
| } | |
| function touchend() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'touchend' ].concat( args )); | |
| } | |
| function touchmove() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'touchmove' ].concat( args )); | |
| } | |
| function resize() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'resize' ].concat( args )); | |
| } | |
| function scroll() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return eventShortcut.bind(this).apply(void 0, [ 'scroll' ].concat( args )); | |
| } | |
| var eventShortcuts = /*#__PURE__*/Object.freeze({ | |
| click: click, | |
| blur: blur, | |
| focus: focus, | |
| focusin: focusin, | |
| focusout: focusout, | |
| keyup: keyup, | |
| keydown: keydown, | |
| keypress: keypress, | |
| submit: submit, | |
| change: change, | |
| mousedown: mousedown, | |
| mousemove: mousemove, | |
| mouseup: mouseup, | |
| mouseenter: mouseenter, | |
| mouseleave: mouseleave, | |
| mouseout: mouseout, | |
| mouseover: mouseover, | |
| touchstart: touchstart, | |
| touchend: touchend, | |
| touchmove: touchmove, | |
| resize: resize, | |
| scroll: scroll | |
| }); | |
| [Methods, Scroll, Animate, eventShortcuts].forEach(function (group) { | |
| Object.keys(group).forEach(function (methodName) { | |
| $.fn[methodName] = group[methodName]; | |
| }); | |
| }); | |
| /** | |
| * https://github.com/gre/bezier-easing | |
| * BezierEasing - use bezier curve for transition easing function | |
| * by Gaëtan Renaudeau 2014 - 2015 – MIT License | |
| */ | |
| /* eslint-disable */ | |
| // These values are established by empiricism with tests (tradeoff: performance VS precision) | |
| var NEWTON_ITERATIONS = 4; | |
| var NEWTON_MIN_SLOPE = 0.001; | |
| var SUBDIVISION_PRECISION = 0.0000001; | |
| var SUBDIVISION_MAX_ITERATIONS = 10; | |
| var kSplineTableSize = 11; | |
| var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); | |
| var float32ArraySupported = typeof Float32Array === 'function'; | |
| function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; } | |
| function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; } | |
| function C (aA1) { return 3.0 * aA1; } | |
| // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. | |
| function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; } | |
| // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. | |
| function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); } | |
| function binarySubdivide (aX, aA, aB, mX1, mX2) { | |
| var currentX, currentT, i = 0; | |
| do { | |
| currentT = aA + (aB - aA) / 2.0; | |
| currentX = calcBezier(currentT, mX1, mX2) - aX; | |
| if (currentX > 0.0) { | |
| aB = currentT; | |
| } else { | |
| aA = currentT; | |
| } | |
| } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS); | |
| return currentT; | |
| } | |
| function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { | |
| for (var i = 0; i < NEWTON_ITERATIONS; ++i) { | |
| var currentSlope = getSlope(aGuessT, mX1, mX2); | |
| if (currentSlope === 0.0) { | |
| return aGuessT; | |
| } | |
| var currentX = calcBezier(aGuessT, mX1, mX2) - aX; | |
| aGuessT -= currentX / currentSlope; | |
| } | |
| return aGuessT; | |
| } | |
| function bezier (mX1, mY1, mX2, mY2) { | |
| if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { | |
| throw new Error('bezier x values must be in [0, 1] range'); | |
| } | |
| // Precompute samples table | |
| var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize); | |
| if (mX1 !== mY1 || mX2 !== mY2) { | |
| for (var i = 0; i < kSplineTableSize; ++i) { | |
| sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); | |
| } | |
| } | |
| function getTForX (aX) { | |
| var intervalStart = 0.0; | |
| var currentSample = 1; | |
| var lastSample = kSplineTableSize - 1; | |
| for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { | |
| intervalStart += kSampleStepSize; | |
| } | |
| --currentSample; | |
| // Interpolate to provide an initial guess for t | |
| var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); | |
| var guessForT = intervalStart + dist * kSampleStepSize; | |
| var initialSlope = getSlope(guessForT, mX1, mX2); | |
| if (initialSlope >= NEWTON_MIN_SLOPE) { | |
| return newtonRaphsonIterate(aX, guessForT, mX1, mX2); | |
| } else if (initialSlope === 0.0) { | |
| return guessForT; | |
| } else { | |
| return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); | |
| } | |
| } | |
| return function BezierEasing (x) { | |
| if (mX1 === mY1 && mX2 === mY2) { | |
| return x; // linear | |
| } | |
| // Because JavaScript number are imprecise, we should guarantee the extremes are right. | |
| if (x === 0) { | |
| return 0; | |
| } | |
| if (x === 1) { | |
| return 1; | |
| } | |
| return calcBezier(getTForX(x), mY1, mY2); | |
| }; | |
| } | |
| /* eslint no-control-regex: "off" */ | |
| // Remove Diacritics | |
| var defaultDiacriticsRemovalap = [ | |
| { base: 'A', letters: '\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F' }, | |
| { base: 'AA', letters: '\uA732' }, | |
| { base: 'AE', letters: '\u00C6\u01FC\u01E2' }, | |
| { base: 'AO', letters: '\uA734' }, | |
| { base: 'AU', letters: '\uA736' }, | |
| { base: 'AV', letters: '\uA738\uA73A' }, | |
| { base: 'AY', letters: '\uA73C' }, | |
| { base: 'B', letters: '\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181' }, | |
| { base: 'C', letters: '\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E' }, | |
| { base: 'D', letters: '\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779' }, | |
| { base: 'DZ', letters: '\u01F1\u01C4' }, | |
| { base: 'Dz', letters: '\u01F2\u01C5' }, | |
| { base: 'E', letters: '\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E' }, | |
| { base: 'F', letters: '\u0046\u24BB\uFF26\u1E1E\u0191\uA77B' }, | |
| { base: 'G', letters: '\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E' }, | |
| { base: 'H', letters: '\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D' }, | |
| { base: 'I', letters: '\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197' }, | |
| { base: 'J', letters: '\u004A\u24BF\uFF2A\u0134\u0248' }, | |
| { base: 'K', letters: '\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2' }, | |
| { base: 'L', letters: '\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780' }, | |
| { base: 'LJ', letters: '\u01C7' }, | |
| { base: 'Lj', letters: '\u01C8' }, | |
| { base: 'M', letters: '\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C' }, | |
| { base: 'N', letters: '\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4' }, | |
| { base: 'NJ', letters: '\u01CA' }, | |
| { base: 'Nj', letters: '\u01CB' }, | |
| { base: 'O', letters: '\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C' }, | |
| { base: 'OI', letters: '\u01A2' }, | |
| { base: 'OO', letters: '\uA74E' }, | |
| { base: 'OU', letters: '\u0222' }, | |
| { base: 'OE', letters: '\u008C\u0152' }, | |
| { base: 'oe', letters: '\u009C\u0153' }, | |
| { base: 'P', letters: '\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754' }, | |
| { base: 'Q', letters: '\u0051\u24C6\uFF31\uA756\uA758\u024A' }, | |
| { base: 'R', letters: '\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782' }, | |
| { base: 'S', letters: '\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784' }, | |
| { base: 'T', letters: '\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786' }, | |
| { base: 'TZ', letters: '\uA728' }, | |
| { base: 'U', letters: '\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244' }, | |
| { base: 'V', letters: '\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245' }, | |
| { base: 'VY', letters: '\uA760' }, | |
| { base: 'W', letters: '\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72' }, | |
| { base: 'X', letters: '\u0058\u24CD\uFF38\u1E8A\u1E8C' }, | |
| { base: 'Y', letters: '\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE' }, | |
| { base: 'Z', letters: '\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762' }, | |
| { base: 'a', letters: '\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250' }, | |
| { base: 'aa', letters: '\uA733' }, | |
| { base: 'ae', letters: '\u00E6\u01FD\u01E3' }, | |
| { base: 'ao', letters: '\uA735' }, | |
| { base: 'au', letters: '\uA737' }, | |
| { base: 'av', letters: '\uA739\uA73B' }, | |
| { base: 'ay', letters: '\uA73D' }, | |
| { base: 'b', letters: '\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253' }, | |
| { base: 'c', letters: '\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184' }, | |
| { base: 'd', letters: '\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A' }, | |
| { base: 'dz', letters: '\u01F3\u01C6' }, | |
| { base: 'e', letters: '\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD' }, | |
| { base: 'f', letters: '\u0066\u24D5\uFF46\u1E1F\u0192\uA77C' }, | |
| { base: 'g', letters: '\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F' }, | |
| { base: 'h', letters: '\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265' }, | |
| { base: 'hv', letters: '\u0195' }, | |
| { base: 'i', letters: '\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131' }, | |
| { base: 'j', letters: '\u006A\u24D9\uFF4A\u0135\u01F0\u0249' }, | |
| { base: 'k', letters: '\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3' }, | |
| { base: 'l', letters: '\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747' }, | |
| { base: 'lj', letters: '\u01C9' }, | |
| { base: 'm', letters: '\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F' }, | |
| { base: 'n', letters: '\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5' }, | |
| { base: 'nj', letters: '\u01CC' }, | |
| { base: 'o', letters: '\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275' }, | |
| { base: 'oi', letters: '\u01A3' }, | |
| { base: 'ou', letters: '\u0223' }, | |
| { base: 'oo', letters: '\uA74F' }, | |
| { base: 'p', letters: '\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755' }, | |
| { base: 'q', letters: '\u0071\u24E0\uFF51\u024B\uA757\uA759' }, | |
| { base: 'r', letters: '\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783' }, | |
| { base: 's', letters: '\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B' }, | |
| { base: 't', letters: '\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787' }, | |
| { base: 'tz', letters: '\uA729' }, | |
| { base: 'u', letters: '\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289' }, | |
| { base: 'v', letters: '\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C' }, | |
| { base: 'vy', letters: '\uA761' }, | |
| { base: 'w', letters: '\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73' }, | |
| { base: 'x', letters: '\u0078\u24E7\uFF58\u1E8B\u1E8D' }, | |
| { base: 'y', letters: '\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF' }, | |
| { base: 'z', letters: '\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763' } ]; | |
| var diacriticsMap = {}; | |
| for (var i = 0; i < defaultDiacriticsRemovalap.length; i += 1) { | |
| var letters = defaultDiacriticsRemovalap[i].letters; | |
| for (var j = 0; j < letters.length; j += 1) { | |
| diacriticsMap[letters[j]] = defaultDiacriticsRemovalap[i].base; | |
| } | |
| } | |
| var uniqueNumber = 1; | |
| var Utils = { | |
| uniqueNumber: function uniqueNumber$1() { | |
| uniqueNumber += 1; | |
| return uniqueNumber; | |
| }, | |
| id: function id(mask, map) { | |
| if ( mask === void 0 ) mask = 'xxxxxxxxxx'; | |
| if ( map === void 0 ) map = '0123456789abcdef'; | |
| var length = map.length; | |
| return mask.replace(/x/g, function () { return map[Math.floor((Math.random() * length))]; }); | |
| }, | |
| mdPreloaderContent: "\n <span class=\"preloader-inner\">\n <span class=\"preloader-inner-gap\"></span>\n <span class=\"preloader-inner-left\">\n <span class=\"preloader-inner-half-circle\"></span>\n </span>\n <span class=\"preloader-inner-right\">\n <span class=\"preloader-inner-half-circle\"></span>\n </span>\n </span>\n ".trim(), | |
| iosPreloaderContent: ("\n <span class=\"preloader-inner\">\n " + (Array.from({ length: 12 }).map(function () { return '<span class="preloader-inner-line"></span>'; }).join('')) + "\n </span>\n ").trim(), | |
| eventNameToColonCase: function eventNameToColonCase(eventName) { | |
| var hasColon; | |
| return eventName.split('').map(function (char, index) { | |
| if (char.match(/[A-Z]/) && index !== 0 && !hasColon) { | |
| hasColon = true; | |
| return (":" + (char.toLowerCase())); | |
| } | |
| return char.toLowerCase(); | |
| }).join(''); | |
| }, | |
| deleteProps: function deleteProps(obj) { | |
| var object = obj; | |
| Object.keys(object).forEach(function (key) { | |
| try { | |
| object[key] = null; | |
| } catch (e) { | |
| // no setter for object | |
| } | |
| try { | |
| delete object[key]; | |
| } catch (e) { | |
| // something got wrong | |
| } | |
| }); | |
| }, | |
| bezier: function bezier$1() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return bezier.apply(void 0, args); | |
| }, | |
| nextTick: function nextTick(callback, delay) { | |
| if ( delay === void 0 ) delay = 0; | |
| return setTimeout(callback, delay); | |
| }, | |
| nextFrame: function nextFrame(callback) { | |
| return Utils.requestAnimationFrame(function () { | |
| Utils.requestAnimationFrame(callback); | |
| }); | |
| }, | |
| now: function now() { | |
| return Date.now(); | |
| }, | |
| requestAnimationFrame: function requestAnimationFrame(callback) { | |
| return win.requestAnimationFrame(callback); | |
| }, | |
| cancelAnimationFrame: function cancelAnimationFrame(id) { | |
| return win.cancelAnimationFrame(id); | |
| }, | |
| removeDiacritics: function removeDiacritics(str) { | |
| return str.replace(/[^\u0000-\u007E]/g, function (a) { return diacriticsMap[a] || a; }); | |
| }, | |
| parseUrlQuery: function parseUrlQuery(url) { | |
| var query = {}; | |
| var urlToParse = url || win.location.href; | |
| var i; | |
| var params; | |
| var param; | |
| var length; | |
| if (typeof urlToParse === 'string' && urlToParse.length) { | |
| urlToParse = urlToParse.indexOf('?') > -1 ? urlToParse.replace(/\S*\?/, '') : ''; | |
| params = urlToParse.split('&').filter(function (paramsPart) { return paramsPart !== ''; }); | |
| length = params.length; | |
| for (i = 0; i < length; i += 1) { | |
| param = params[i].replace(/#\S+/g, '').split('='); | |
| query[decodeURIComponent(param[0])] = typeof param[1] === 'undefined' ? undefined : decodeURIComponent(param.slice(1).join('=')) || ''; | |
| } | |
| } | |
| return query; | |
| }, | |
| getTranslate: function getTranslate(el, axis) { | |
| if ( axis === void 0 ) axis = 'x'; | |
| var matrix; | |
| var curTransform; | |
| var transformMatrix; | |
| var curStyle = win.getComputedStyle(el, null); | |
| if (win.WebKitCSSMatrix) { | |
| curTransform = curStyle.transform || curStyle.webkitTransform; | |
| if (curTransform.split(',').length > 6) { | |
| curTransform = curTransform.split(', ').map(function (a) { return a.replace(',', '.'); }).join(', '); | |
| } | |
| // Some old versions of Webkit choke when 'none' is passed; pass | |
| // empty string instead in this case | |
| transformMatrix = new win.WebKitCSSMatrix(curTransform === 'none' ? '' : curTransform); | |
| } else { | |
| transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,'); | |
| matrix = transformMatrix.toString().split(','); | |
| } | |
| if (axis === 'x') { | |
| // Latest Chrome and webkits Fix | |
| if (win.WebKitCSSMatrix) { curTransform = transformMatrix.m41; } | |
| // Crazy IE10 Matrix | |
| else if (matrix.length === 16) { curTransform = parseFloat(matrix[12]); } | |
| // Normal Browsers | |
| else { curTransform = parseFloat(matrix[4]); } | |
| } | |
| if (axis === 'y') { | |
| // Latest Chrome and webkits Fix | |
| if (win.WebKitCSSMatrix) { curTransform = transformMatrix.m42; } | |
| // Crazy IE10 Matrix | |
| else if (matrix.length === 16) { curTransform = parseFloat(matrix[13]); } | |
| // Normal Browsers | |
| else { curTransform = parseFloat(matrix[5]); } | |
| } | |
| return curTransform || 0; | |
| }, | |
| serializeObject: function serializeObject(obj, parents) { | |
| if ( parents === void 0 ) parents = []; | |
| if (typeof obj === 'string') { return obj; } | |
| var resultArray = []; | |
| var separator = '&'; | |
| var newParents; | |
| function varName(name) { | |
| if (parents.length > 0) { | |
| var parentParts = ''; | |
| for (var j = 0; j < parents.length; j += 1) { | |
| if (j === 0) { parentParts += parents[j]; } | |
| else { parentParts += "[" + (encodeURIComponent(parents[j])) + "]"; } | |
| } | |
| return (parentParts + "[" + (encodeURIComponent(name)) + "]"); | |
| } | |
| return encodeURIComponent(name); | |
| } | |
| function varValue(value) { | |
| return encodeURIComponent(value); | |
| } | |
| Object.keys(obj).forEach(function (prop) { | |
| var toPush; | |
| if (Array.isArray(obj[prop])) { | |
| toPush = []; | |
| for (var i = 0; i < obj[prop].length; i += 1) { | |
| if (!Array.isArray(obj[prop][i]) && typeof obj[prop][i] === 'object') { | |
| newParents = parents.slice(); | |
| newParents.push(prop); | |
| newParents.push(String(i)); | |
| toPush.push(Utils.serializeObject(obj[prop][i], newParents)); | |
| } else { | |
| toPush.push(((varName(prop)) + "[]=" + (varValue(obj[prop][i])))); | |
| } | |
| } | |
| if (toPush.length > 0) { resultArray.push(toPush.join(separator)); } | |
| } else if (obj[prop] === null || obj[prop] === '') { | |
| resultArray.push(((varName(prop)) + "=")); | |
| } else if (typeof obj[prop] === 'object') { | |
| // Object, convert to named array | |
| newParents = parents.slice(); | |
| newParents.push(prop); | |
| toPush = Utils.serializeObject(obj[prop], newParents); | |
| if (toPush !== '') { resultArray.push(toPush); } | |
| } else if (typeof obj[prop] !== 'undefined' && obj[prop] !== '') { | |
| // Should be string or plain value | |
| resultArray.push(((varName(prop)) + "=" + (varValue(obj[prop])))); | |
| } else if (obj[prop] === '') { resultArray.push(varName(prop)); } | |
| }); | |
| return resultArray.join(separator); | |
| }, | |
| isObject: function isObject(o) { | |
| return typeof o === 'object' && o !== null && o.constructor && o.constructor === Object; | |
| }, | |
| merge: function merge() { | |
| var args = [], len$1 = arguments.length; | |
| while ( len$1-- ) args[ len$1 ] = arguments[ len$1 ]; | |
| var to = args[0]; | |
| args.splice(0, 1); | |
| var from = args; | |
| for (var i = 0; i < from.length; i += 1) { | |
| var nextSource = args[i]; | |
| if (nextSource !== undefined && nextSource !== null) { | |
| var keysArray = Object.keys(Object(nextSource)); | |
| for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) { | |
| var nextKey = keysArray[nextIndex]; | |
| var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey); | |
| if (desc !== undefined && desc.enumerable) { | |
| to[nextKey] = nextSource[nextKey]; | |
| } | |
| } | |
| } | |
| } | |
| return to; | |
| }, | |
| extend: function extend() { | |
| var args = [], len$1 = arguments.length; | |
| while ( len$1-- ) args[ len$1 ] = arguments[ len$1 ]; | |
| var deep = true; | |
| var to; | |
| var from; | |
| if (typeof args[0] === 'boolean') { | |
| deep = args[0]; | |
| to = args[1]; | |
| args.splice(0, 2); | |
| from = args; | |
| } else { | |
| to = args[0]; | |
| args.splice(0, 1); | |
| from = args; | |
| } | |
| for (var i = 0; i < from.length; i += 1) { | |
| var nextSource = args[i]; | |
| if (nextSource !== undefined && nextSource !== null) { | |
| var keysArray = Object.keys(Object(nextSource)); | |
| for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) { | |
| var nextKey = keysArray[nextIndex]; | |
| var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey); | |
| if (desc !== undefined && desc.enumerable) { | |
| if (!deep) { | |
| to[nextKey] = nextSource[nextKey]; | |
| } else if (Utils.isObject(to[nextKey]) && Utils.isObject(nextSource[nextKey])) { | |
| Utils.extend(to[nextKey], nextSource[nextKey]); | |
| } else if (!Utils.isObject(to[nextKey]) && Utils.isObject(nextSource[nextKey])) { | |
| to[nextKey] = {}; | |
| Utils.extend(to[nextKey], nextSource[nextKey]); | |
| } else { | |
| to[nextKey] = nextSource[nextKey]; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| return to; | |
| }, | |
| colorHexToRgb: function colorHexToRgb(hex) { | |
| var h = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function (m, r, g, b) { return r + r + g + g + b + b; }); | |
| var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h); | |
| return result | |
| ? result.slice(1).map(function (n) { return parseInt(n, 16); }) | |
| : null; | |
| }, | |
| colorRgbToHex: function colorRgbToHex(r, g, b) { | |
| var result = [r, g, b].map(function (n) { | |
| var hex = n.toString(16); | |
| return hex.length === 1 ? ("0" + hex) : hex; | |
| }).join(''); | |
| return ("#" + result); | |
| }, | |
| colorRgbToHsl: function colorRgbToHsl(r, g, b) { | |
| r /= 255; // eslint-disable-line | |
| g /= 255; // eslint-disable-line | |
| b /= 255; // eslint-disable-line | |
| var max = Math.max(r, g, b); | |
| var min = Math.min(r, g, b); | |
| var d = max - min; | |
| var h; | |
| if (d === 0) { h = 0; } | |
| else if (max === r) { h = ((g - b) / d) % 6; } | |
| else if (max === g) { h = (b - r) / d + 2; } | |
| else if (max === b) { h = (r - g) / d + 4; } | |
| var l = (min + max) / 2; | |
| var s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1)); | |
| return [h * 60, s, l]; | |
| }, | |
| colorHslToRgb: function colorHslToRgb(h, s, l) { | |
| var c = (1 - Math.abs(2 * l - 1)) * s; | |
| var hp = h / 60; | |
| var x = c * (1 - Math.abs((hp % 2) - 1)); | |
| var rgb1; | |
| if (Number.isNaN(h) || typeof h === 'undefined') { | |
| rgb1 = [0, 0, 0]; | |
| } else if (hp <= 1) { rgb1 = [c, x, 0]; } | |
| else if (hp <= 2) { rgb1 = [x, c, 0]; } | |
| else if (hp <= 3) { rgb1 = [0, c, x]; } | |
| else if (hp <= 4) { rgb1 = [0, x, c]; } | |
| else if (hp <= 5) { rgb1 = [x, 0, c]; } | |
| else if (hp <= 6) { rgb1 = [c, 0, x]; } | |
| var m = l - (c / 2); | |
| return rgb1.map(function (n) { return Math.max(0, Math.min(255, Math.round(255 * (n + m)))); }); | |
| }, | |
| colorThemeCSSProperties: function colorThemeCSSProperties() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var hex; | |
| var rgb; | |
| if (args.length === 1) { | |
| hex = args[0]; | |
| rgb = Utils.colorHexToRgb(hex); | |
| } else if (args.length === 3) { | |
| rgb = args; | |
| hex = Utils.colorRgbToHex.apply(Utils, rgb); | |
| } | |
| if (!rgb) { return {}; } | |
| var hsl = Utils.colorRgbToHsl.apply(Utils, rgb); | |
| var hslShade = [hsl[0], hsl[1], Math.max(0, (hsl[2] - 0.08))]; | |
| var hslTint = [hsl[0], hsl[1], Math.max(0, (hsl[2] + 0.08))]; | |
| var shade = Utils.colorRgbToHex.apply(Utils, Utils.colorHslToRgb.apply(Utils, hslShade)); | |
| var tint = Utils.colorRgbToHex.apply(Utils, Utils.colorHslToRgb.apply(Utils, hslTint)); | |
| return { | |
| '--f7-theme-color': hex, | |
| '--f7-theme-color-rgb': rgb.join(', '), | |
| '--f7-theme-color-shade': shade, | |
| '--f7-theme-color-tint': tint, | |
| }; | |
| }, | |
| }; | |
| var Device = (function Device() { | |
| var platform = win.navigator.platform; | |
| var ua = win.navigator.userAgent; | |
| var device = { | |
| ios: false, | |
| android: false, | |
| androidChrome: false, | |
| desktop: false, | |
| windowsPhone: false, | |
| iphone: false, | |
| iphoneX: false, | |
| ipod: false, | |
| ipad: false, | |
| edge: false, | |
| ie: false, | |
| firefox: false, | |
| macos: false, | |
| windows: false, | |
| cordova: !!(win.cordova || win.phonegap), | |
| phonegap: !!(win.cordova || win.phonegap), | |
| }; | |
| var screenWidth = win.screen.width; | |
| var screenHeight = win.screen.height; | |
| var windowsPhone = ua.match(/(Windows Phone);?[\s\/]+([\d.]+)?/); // eslint-disable-line | |
| var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); // eslint-disable-line | |
| var ipad = ua.match(/(iPad).*OS\s([\d_]+)/); | |
| var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/); | |
| var iphone = !ipad && ua.match(/(iPhone\sOS|iOS)\s([\d_]+)/); | |
| var iphoneX = iphone && ( | |
| (screenWidth === 375 && screenHeight === 812) // X/XS | |
| || (screenWidth === 414 && screenHeight === 896) // XR / XS Max | |
| ); | |
| var ie = ua.indexOf('MSIE ') >= 0 || ua.indexOf('Trident/') >= 0; | |
| var edge = ua.indexOf('Edge/') >= 0; | |
| var firefox = ua.indexOf('Gecko/') >= 0 && ua.indexOf('Firefox/') >= 0; | |
| var macos = platform === 'MacIntel'; | |
| var windows = platform === 'Win32'; | |
| device.ie = ie; | |
| device.edge = edge; | |
| device.firefox = firefox; | |
| // Windows | |
| if (windowsPhone) { | |
| device.os = 'windows'; | |
| device.osVersion = windowsPhone[2]; | |
| device.windowsPhone = true; | |
| } | |
| // Android | |
| if (android && !windows) { | |
| device.os = 'android'; | |
| device.osVersion = android[2]; | |
| device.android = true; | |
| device.androidChrome = ua.toLowerCase().indexOf('chrome') >= 0; | |
| } | |
| if (ipad || iphone || ipod) { | |
| device.os = 'ios'; | |
| device.ios = true; | |
| } | |
| // iOS | |
| if (iphone && !ipod) { | |
| device.osVersion = iphone[2].replace(/_/g, '.'); | |
| device.iphone = true; | |
| device.iphoneX = iphoneX; | |
| } | |
| if (ipad) { | |
| device.osVersion = ipad[2].replace(/_/g, '.'); | |
| device.ipad = true; | |
| } | |
| if (ipod) { | |
| device.osVersion = ipod[3] ? ipod[3].replace(/_/g, '.') : null; | |
| device.iphone = true; | |
| } | |
| // iOS 8+ changed UA | |
| if (device.ios && device.osVersion && ua.indexOf('Version/') >= 0) { | |
| if (device.osVersion.split('.')[0] === '10') { | |
| device.osVersion = ua.toLowerCase().split('version/')[1].split(' ')[0]; | |
| } | |
| } | |
| // Webview | |
| device.webView = !!((iphone || ipad || ipod) && (ua.match(/.*AppleWebKit(?!.*Safari)/i) || win.navigator.standalone)) | |
| || (win.matchMedia && win.matchMedia('(display-mode: standalone)').matches); | |
| device.webview = device.webView; | |
| device.standalone = device.webView; | |
| // Desktop | |
| device.desktop = !(device.os || device.android || device.webView); | |
| if (device.desktop) { | |
| device.macos = macos; | |
| device.windows = windows; | |
| } | |
| // Minimal UI | |
| if (device.os && device.os === 'ios') { | |
| var osVersionArr = device.osVersion.split('.'); | |
| var metaViewport = doc.querySelector('meta[name="viewport"]'); | |
| device.minimalUi = !device.webView | |
| && (ipod || iphone) | |
| && (osVersionArr[0] * 1 === 7 ? osVersionArr[1] * 1 >= 1 : osVersionArr[0] * 1 > 7) | |
| && metaViewport && metaViewport.getAttribute('content').indexOf('minimal-ui') >= 0; | |
| } | |
| // Meta statusbar | |
| var metaStatusbar = doc.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]'); | |
| // Check for status bar and fullscreen app mode | |
| device.needsStatusbarOverlay = function needsStatusbarOverlay() { | |
| if (device.standalone && device.ios && metaStatusbar && metaStatusbar.content === 'black-translucent') { | |
| return true; | |
| } | |
| if ((device.webView || (device.android && device.cordova)) && (win.innerWidth * win.innerHeight === win.screen.width * win.screen.height)) { | |
| if (device.iphoneX && (win.orientation === 90 || win.orientation === -90)) { | |
| return false; | |
| } | |
| return true; | |
| } | |
| return false; | |
| }; | |
| device.statusbar = device.needsStatusbarOverlay(); | |
| // Pixel Ratio | |
| device.pixelRatio = win.devicePixelRatio || 1; | |
| // Export object | |
| return device; | |
| }()); | |
| var EventsClass = function EventsClass(parents) { | |
| if ( parents === void 0 ) parents = []; | |
| var self = this; | |
| self.eventsParents = parents; | |
| self.eventsListeners = {}; | |
| }; | |
| EventsClass.prototype.on = function on (events, handler, priority) { | |
| var self = this; | |
| if (typeof handler !== 'function') { return self; } | |
| var method = priority ? 'unshift' : 'push'; | |
| events.split(' ').forEach(function (event) { | |
| if (!self.eventsListeners[event]) { self.eventsListeners[event] = []; } | |
| self.eventsListeners[event][method](handler); | |
| }); | |
| return self; | |
| }; | |
| EventsClass.prototype.once = function once (events, handler, priority) { | |
| var self = this; | |
| if (typeof handler !== 'function') { return self; } | |
| function onceHandler() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| handler.apply(self, args); | |
| self.off(events, onceHandler); | |
| } | |
| return self.on(events, onceHandler, priority); | |
| }; | |
| EventsClass.prototype.off = function off (events, handler) { | |
| var self = this; | |
| if (!self.eventsListeners) { return self; } | |
| events.split(' ').forEach(function (event) { | |
| if (typeof handler === 'undefined') { | |
| self.eventsListeners[event] = []; | |
| } else if (self.eventsListeners[event]) { | |
| self.eventsListeners[event].forEach(function (eventHandler, index) { | |
| if (eventHandler === handler) { | |
| self.eventsListeners[event].splice(index, 1); | |
| } | |
| }); | |
| } | |
| }); | |
| return self; | |
| }; | |
| EventsClass.prototype.emit = function emit () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var self = this; | |
| if (!self.eventsListeners) { return self; } | |
| var events; | |
| var data; | |
| var context; | |
| var eventsParents; | |
| if (typeof args[0] === 'string' || Array.isArray(args[0])) { | |
| events = args[0]; | |
| data = args.slice(1, args.length); | |
| context = self; | |
| eventsParents = self.eventsParents; | |
| } else { | |
| events = args[0].events; | |
| data = args[0].data; | |
| context = args[0].context || self; | |
| eventsParents = args[0].local ? [] : args[0].parents || self.eventsParents; | |
| } | |
| var eventsArray = Array.isArray(events) ? events : events.split(' '); | |
| var localEvents = eventsArray.map(function (eventName) { return eventName.replace('local::', ''); }); | |
| var parentEvents = eventsArray.filter(function (eventName) { return eventName.indexOf('local::') < 0; }); | |
| localEvents.forEach(function (event) { | |
| if (self.eventsListeners && self.eventsListeners[event]) { | |
| var handlers = []; | |
| self.eventsListeners[event].forEach(function (eventHandler) { | |
| handlers.push(eventHandler); | |
| }); | |
| handlers.forEach(function (eventHandler) { | |
| eventHandler.apply(context, data); | |
| }); | |
| } | |
| }); | |
| if (eventsParents && eventsParents.length > 0) { | |
| eventsParents.forEach(function (eventsParent) { | |
| eventsParent.emit.apply(eventsParent, [ parentEvents ].concat( data )); | |
| }); | |
| } | |
| return self; | |
| }; | |
| var Framework7Class = /*@__PURE__*/(function (EventsClass$$1) { | |
| function Framework7Class(params, parents) { | |
| if ( params === void 0 ) params = {}; | |
| if ( parents === void 0 ) parents = []; | |
| EventsClass$$1.call(this, parents); | |
| var self = this; | |
| self.params = params; | |
| if (self.params && self.params.on) { | |
| Object.keys(self.params.on).forEach(function (eventName) { | |
| self.on(eventName, self.params.on[eventName]); | |
| }); | |
| } | |
| } | |
| if ( EventsClass$$1 ) Framework7Class.__proto__ = EventsClass$$1; | |
| Framework7Class.prototype = Object.create( EventsClass$$1 && EventsClass$$1.prototype ); | |
| Framework7Class.prototype.constructor = Framework7Class; | |
| var staticAccessors = { components: { configurable: true } }; | |
| // eslint-disable-next-line | |
| Framework7Class.prototype.useModuleParams = function useModuleParams (module, instanceParams) { | |
| if (module.params) { | |
| var originalParams = {}; | |
| Object.keys(module.params).forEach(function (paramKey) { | |
| if (typeof instanceParams[paramKey] === 'undefined') { return; } | |
| originalParams[paramKey] = Utils.extend({}, instanceParams[paramKey]); | |
| }); | |
| Utils.extend(instanceParams, module.params); | |
| Object.keys(originalParams).forEach(function (paramKey) { | |
| Utils.extend(instanceParams[paramKey], originalParams[paramKey]); | |
| }); | |
| } | |
| }; | |
| Framework7Class.prototype.useModulesParams = function useModulesParams (instanceParams) { | |
| var instance = this; | |
| if (!instance.modules) { return; } | |
| Object.keys(instance.modules).forEach(function (moduleName) { | |
| var module = instance.modules[moduleName]; | |
| // Extend params | |
| if (module.params) { | |
| Utils.extend(instanceParams, module.params); | |
| } | |
| }); | |
| }; | |
| Framework7Class.prototype.useModule = function useModule (moduleName, moduleParams) { | |
| if ( moduleName === void 0 ) moduleName = ''; | |
| if ( moduleParams === void 0 ) moduleParams = {}; | |
| var instance = this; | |
| if (!instance.modules) { return; } | |
| var module = typeof moduleName === 'string' ? instance.modules[moduleName] : moduleName; | |
| if (!module) { return; } | |
| // Extend instance methods and props | |
| if (module.instance) { | |
| Object.keys(module.instance).forEach(function (modulePropName) { | |
| var moduleProp = module.instance[modulePropName]; | |
| if (typeof moduleProp === 'function') { | |
| instance[modulePropName] = moduleProp.bind(instance); | |
| } else { | |
| instance[modulePropName] = moduleProp; | |
| } | |
| }); | |
| } | |
| // Add event listeners | |
| if (module.on && instance.on) { | |
| Object.keys(module.on).forEach(function (moduleEventName) { | |
| instance.on(moduleEventName, module.on[moduleEventName]); | |
| }); | |
| } | |
| // Add vnode hooks | |
| if (module.vnode) { | |
| if (!instance.vnodeHooks) { instance.vnodeHooks = {}; } | |
| Object.keys(module.vnode).forEach(function (vnodeId) { | |
| Object.keys(module.vnode[vnodeId]).forEach(function (hookName) { | |
| var handler = module.vnode[vnodeId][hookName]; | |
| if (!instance.vnodeHooks[hookName]) { instance.vnodeHooks[hookName] = {}; } | |
| if (!instance.vnodeHooks[hookName][vnodeId]) { instance.vnodeHooks[hookName][vnodeId] = []; } | |
| instance.vnodeHooks[hookName][vnodeId].push(handler.bind(instance)); | |
| }); | |
| }); | |
| } | |
| // Module create callback | |
| if (module.create) { | |
| module.create.bind(instance)(moduleParams); | |
| } | |
| }; | |
| Framework7Class.prototype.useModules = function useModules (modulesParams) { | |
| if ( modulesParams === void 0 ) modulesParams = {}; | |
| var instance = this; | |
| if (!instance.modules) { return; } | |
| Object.keys(instance.modules).forEach(function (moduleName) { | |
| var moduleParams = modulesParams[moduleName] || {}; | |
| instance.useModule(moduleName, moduleParams); | |
| }); | |
| }; | |
| staticAccessors.components.set = function (components) { | |
| var Class = this; | |
| if (!Class.use) { return; } | |
| Class.use(components); | |
| }; | |
| Framework7Class.installModule = function installModule (module) { | |
| var params = [], len = arguments.length - 1; | |
| while ( len-- > 0 ) params[ len ] = arguments[ len + 1 ]; | |
| var Class = this; | |
| if (!Class.prototype.modules) { Class.prototype.modules = {}; } | |
| var name = module.name || (((Object.keys(Class.prototype.modules).length) + "_" + (Utils.now()))); | |
| Class.prototype.modules[name] = module; | |
| // Prototype | |
| if (module.proto) { | |
| Object.keys(module.proto).forEach(function (key) { | |
| Class.prototype[key] = module.proto[key]; | |
| }); | |
| } | |
| // Class | |
| if (module.static) { | |
| Object.keys(module.static).forEach(function (key) { | |
| Class[key] = module.static[key]; | |
| }); | |
| } | |
| // Callback | |
| if (module.install) { | |
| module.install.apply(Class, params); | |
| } | |
| return Class; | |
| }; | |
| Framework7Class.use = function use (module) { | |
| var params = [], len = arguments.length - 1; | |
| while ( len-- > 0 ) params[ len ] = arguments[ len + 1 ]; | |
| var Class = this; | |
| if (Array.isArray(module)) { | |
| module.forEach(function (m) { return Class.installModule(m); }); | |
| return Class; | |
| } | |
| return Class.installModule.apply(Class, [ module ].concat( params )); | |
| }; | |
| Object.defineProperties( Framework7Class, staticAccessors ); | |
| return Framework7Class; | |
| }(EventsClass)); | |
| function ConstructorMethods (parameters) { | |
| if ( parameters === void 0 ) parameters = {}; | |
| var defaultSelector = parameters.defaultSelector; | |
| var constructor = parameters.constructor; | |
| var domProp = parameters.domProp; | |
| var app = parameters.app; | |
| var addMethods = parameters.addMethods; | |
| var methods = { | |
| create: function create() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| if (app) { return new (Function.prototype.bind.apply( constructor, [ null ].concat( [app], args) )); } | |
| return new (Function.prototype.bind.apply( constructor, [ null ].concat( args) )); | |
| }, | |
| get: function get(el) { | |
| if ( el === void 0 ) el = defaultSelector; | |
| if (el instanceof constructor) { return el; } | |
| var $el = $(el); | |
| if ($el.length === 0) { return undefined; } | |
| return $el[0][domProp]; | |
| }, | |
| destroy: function destroy(el) { | |
| var instance = methods.get(el); | |
| if (instance && instance.destroy) { return instance.destroy(); } | |
| return undefined; | |
| }, | |
| }; | |
| if (addMethods && Array.isArray(addMethods)) { | |
| addMethods.forEach(function (methodName) { | |
| methods[methodName] = function (el) { | |
| if ( el === void 0 ) el = defaultSelector; | |
| var args = [], len = arguments.length - 1; | |
| while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | |
| var instance = methods.get(el); | |
| if (instance && instance[methodName]) { return instance[methodName].apply(instance, args); } | |
| return undefined; | |
| }; | |
| }); | |
| } | |
| return methods; | |
| } | |
| function ModalMethods (parameters) { | |
| if ( parameters === void 0 ) parameters = {}; | |
| var defaultSelector = parameters.defaultSelector; | |
| var constructor = parameters.constructor; | |
| var app = parameters.app; | |
| var methods = Utils.extend( | |
| ConstructorMethods({ | |
| defaultSelector: defaultSelector, | |
| constructor: constructor, | |
| app: app, | |
| domProp: 'f7Modal', | |
| }), | |
| { | |
| open: function open(el, animate) { | |
| var $el = $(el); | |
| var instance = $el[0].f7Modal; | |
| if (!instance) { instance = new constructor(app, { el: $el }); } | |
| return instance.open(animate); | |
| }, | |
| close: function close(el, animate) { | |
| if ( el === void 0 ) el = defaultSelector; | |
| var $el = $(el); | |
| if ($el.length === 0) { return undefined; } | |
| var instance = $el[0].f7Modal; | |
| if (!instance) { instance = new constructor(app, { el: $el }); } | |
| return instance.close(animate); | |
| }, | |
| } | |
| ); | |
| return methods; | |
| } | |
| var fetchedModules = []; | |
| function loadModule(moduleToLoad) { | |
| var Framework7 = this; | |
| return new Promise(function (resolve, reject) { | |
| var app = Framework7.instance; | |
| var modulePath; | |
| var moduleObj; | |
| var moduleFunc; | |
| if (!moduleToLoad) { | |
| reject(new Error('Framework7: Lazy module must be specified')); | |
| return; | |
| } | |
| function install(module) { | |
| Framework7.use(module); | |
| if (app) { | |
| app.useModuleParams(module, app.params); | |
| app.useModule(module); | |
| } | |
| } | |
| if (typeof moduleToLoad === 'string') { | |
| var matchNamePattern = moduleToLoad.match(/([a-z0-9-]*)/i); | |
| if (moduleToLoad.indexOf('.') < 0 && matchNamePattern && matchNamePattern[0].length === moduleToLoad.length) { | |
| if (!app || (app && !app.params.lazyModulesPath)) { | |
| reject(new Error('Framework7: "lazyModulesPath" app parameter must be specified to fetch module by name')); | |
| return; | |
| } | |
| modulePath = (app.params.lazyModulesPath) + "/" + moduleToLoad + ".js"; | |
| } else { | |
| modulePath = moduleToLoad; | |
| } | |
| } else if (typeof moduleToLoad === 'function') { | |
| moduleFunc = moduleToLoad; | |
| } else { | |
| // considering F7-Plugin object | |
| moduleObj = moduleToLoad; | |
| } | |
| if (moduleFunc) { | |
| var module = moduleFunc(Framework7, false); | |
| if (!module) { | |
| reject(new Error('Framework7: Can\'t find Framework7 component in specified component function')); | |
| return; | |
| } | |
| // Check if it was added | |
| if (Framework7.prototype.modules && Framework7.prototype.modules[module.name]) { | |
| resolve(); | |
| return; | |
| } | |
| // Install It | |
| install(module); | |
| resolve(); | |
| } | |
| if (moduleObj) { | |
| var module$1 = moduleObj; | |
| if (!module$1) { | |
| reject(new Error('Framework7: Can\'t find Framework7 component in specified component')); | |
| return; | |
| } | |
| // Check if it was added | |
| if (Framework7.prototype.modules && Framework7.prototype.modules[module$1.name]) { | |
| resolve(); | |
| return; | |
| } | |
| // Install It | |
| install(module$1); | |
| resolve(); | |
| } | |
| if (modulePath) { | |
| if (fetchedModules.indexOf(modulePath) >= 0) { | |
| resolve(); | |
| return; | |
| } | |
| fetchedModules.push(modulePath); | |
| var scriptLoad = new Promise(function (resolveScript, rejectScript) { | |
| Framework7.request.get( | |
| modulePath, | |
| function (scriptContent) { | |
| var id = Utils.id(); | |
| var callbackLoadName = "f7_component_loader_callback_" + id; | |
| var scriptEl = document.createElement('script'); | |
| scriptEl.innerHTML = "window." + callbackLoadName + " = function (Framework7, Framework7AutoInstallComponent) {return " + (scriptContent.trim()) + "}"; | |
| $('head').append(scriptEl); | |
| var componentLoader = window[callbackLoadName]; | |
| delete window[callbackLoadName]; | |
| $(scriptEl).remove(); | |
| var module = componentLoader(Framework7, false); | |
| if (!module) { | |
| rejectScript(new Error(("Framework7: Can't find Framework7 component in " + modulePath + " file"))); | |
| return; | |
| } | |
| // Check if it was added | |
| if (Framework7.prototype.modules && Framework7.prototype.modules[module.name]) { | |
| resolveScript(); | |
| return; | |
| } | |
| // Install It | |
| install(module); | |
| resolveScript(); | |
| }, | |
| function (xhr, status) { | |
| rejectScript(xhr, status); | |
| } | |
| ); | |
| }); | |
| var styleLoad = new Promise(function (resolveStyle) { | |
| Framework7.request.get( | |
| modulePath.replace('.js', app.rtl ? '.rtl.css' : '.css'), | |
| function (styleContent) { | |
| var styleEl = document.createElement('style'); | |
| styleEl.innerHTML = styleContent; | |
| $('head').append(styleEl); | |
| resolveStyle(); | |
| }, | |
| function () { | |
| resolveStyle(); | |
| } | |
| ); | |
| }); | |
| Promise.all([scriptLoad, styleLoad]).then(function () { | |
| resolve(); | |
| }).catch(function (err) { | |
| reject(err); | |
| }); | |
| } | |
| }); | |
| } | |
| var Framework7 = /*@__PURE__*/(function (Framework7Class$$1) { | |
| function Framework7(params) { | |
| Framework7Class$$1.call(this, params); | |
| if (Framework7.instance) { | |
| throw new Error('Framework7 is already initialized and can\'t be initialized more than once'); | |
| } | |
| var passedParams = Utils.extend({}, params); | |
| // App Instance | |
| var app = this; | |
| Framework7.instance = app; | |
| // Default | |
| var defaults = { | |
| version: '1.0.0', | |
| id: 'io.framework7.testapp', | |
| root: 'body', | |
| theme: 'auto', | |
| language: win.navigator.language, | |
| routes: [], | |
| name: 'Framework7', | |
| lazyModulesPath: null, | |
| initOnDeviceReady: true, | |
| init: true, | |
| }; | |
| // Extend defaults with modules params | |
| app.useModulesParams(defaults); | |
| // Extend defaults with passed params | |
| app.params = Utils.extend(defaults, params); | |
| var $rootEl = $(app.params.root); | |
| Utils.extend(app, { | |
| // App Id | |
| id: app.params.id, | |
| // App Name | |
| name: app.params.name, | |
| // App version | |
| version: app.params.version, | |
| // Routes | |
| routes: app.params.routes, | |
| // Lang | |
| language: app.params.language, | |
| // Root | |
| root: $rootEl, | |
| // RTL | |
| rtl: $rootEl.css('direction') === 'rtl', | |
| // Theme | |
| theme: (function getTheme() { | |
| if (app.params.theme === 'auto') { | |
| return Device.ios ? 'ios' : 'md'; | |
| } | |
| return app.params.theme; | |
| }()), | |
| // Initially passed parameters | |
| passedParams: passedParams, | |
| }); | |
| // Save Root | |
| if (app.root && app.root[0]) { | |
| app.root[0].f7 = app; | |
| } | |
| // Install Modules | |
| app.useModules(); | |
| // Init Data & Methods | |
| app.initData(); | |
| // Init | |
| if (app.params.init) { | |
| if (Device.cordova && app.params.initOnDeviceReady) { | |
| $(doc).on('deviceready', function () { | |
| app.init(); | |
| }); | |
| } else { | |
| app.init(); | |
| } | |
| } | |
| // Return app instance | |
| return app; | |
| } | |
| if ( Framework7Class$$1 ) Framework7.__proto__ = Framework7Class$$1; | |
| Framework7.prototype = Object.create( Framework7Class$$1 && Framework7Class$$1.prototype ); | |
| Framework7.prototype.constructor = Framework7; | |
| var prototypeAccessors = { $: { configurable: true },t7: { configurable: true } }; | |
| var staticAccessors = { Dom7: { configurable: true },$: { configurable: true },Template7: { configurable: true },Class: { configurable: true },Events: { configurable: true } }; | |
| Framework7.prototype.initData = function initData () { | |
| var app = this; | |
| // Data | |
| app.data = {}; | |
| if (app.params.data && typeof app.params.data === 'function') { | |
| Utils.extend(app.data, app.params.data.bind(app)()); | |
| } else if (app.params.data) { | |
| Utils.extend(app.data, app.params.data); | |
| } | |
| // Methods | |
| app.methods = {}; | |
| if (app.params.methods) { | |
| Object.keys(app.params.methods).forEach(function (methodName) { | |
| if (typeof app.params.methods[methodName] === 'function') { | |
| app.methods[methodName] = app.params.methods[methodName].bind(app); | |
| } else { | |
| app.methods[methodName] = app.params.methods[methodName]; | |
| } | |
| }); | |
| } | |
| }; | |
| Framework7.prototype.init = function init () { | |
| var app = this; | |
| if (app.initialized) { return app; } | |
| app.root.addClass('framework7-initializing'); | |
| // RTL attr | |
| if (app.rtl) { | |
| $('html').attr('dir', 'rtl'); | |
| } | |
| // Root class | |
| app.root.addClass('framework7-root'); | |
| // Theme class | |
| $('html').removeClass('ios md').addClass(app.theme); | |
| // Init class | |
| Utils.nextFrame(function () { | |
| app.root.removeClass('framework7-initializing'); | |
| }); | |
| // Emit, init other modules | |
| app.initialized = true; | |
| app.emit('init'); | |
| return app; | |
| }; | |
| // eslint-disable-next-line | |
| Framework7.prototype.loadModule = function loadModule$$1 () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return Framework7.loadModule.apply(Framework7, args); | |
| }; | |
| // eslint-disable-next-line | |
| Framework7.prototype.loadModules = function loadModules () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return Framework7.loadModules.apply(Framework7, args); | |
| }; | |
| Framework7.prototype.getVnodeHooks = function getVnodeHooks (hook, id) { | |
| var app = this; | |
| if (!app.vnodeHooks || !app.vnodeHooks[hook]) { return []; } | |
| return app.vnodeHooks[hook][id] || []; | |
| }; | |
| // eslint-disable-next-line | |
| prototypeAccessors.$.get = function () { | |
| return $; | |
| }; | |
| // eslint-disable-next-line | |
| prototypeAccessors.t7.get = function () { | |
| return Template7; | |
| }; | |
| staticAccessors.Dom7.get = function () { | |
| return $; | |
| }; | |
| staticAccessors.$.get = function () { | |
| return $; | |
| }; | |
| staticAccessors.Template7.get = function () { | |
| return Template7; | |
| }; | |
| staticAccessors.Class.get = function () { | |
| return Framework7Class$$1; | |
| }; | |
| staticAccessors.Events.get = function () { | |
| return EventsClass; | |
| }; | |
| Object.defineProperties( Framework7.prototype, prototypeAccessors ); | |
| Object.defineProperties( Framework7, staticAccessors ); | |
| return Framework7; | |
| }(Framework7Class)); | |
| Framework7.ModalMethods = ModalMethods; | |
| Framework7.ConstructorMethods = ConstructorMethods; | |
| Framework7.loadModule = loadModule; | |
| Framework7.loadModules = function loadModules(modules) { | |
| return Promise.all(modules.map(function (module) { return Framework7.loadModule(module); })); | |
| }; | |
| var DeviceModule = { | |
| name: 'device', | |
| proto: { | |
| device: Device, | |
| }, | |
| static: { | |
| device: Device, | |
| }, | |
| on: { | |
| init: function init() { | |
| var classNames = []; | |
| var html = doc.querySelector('html'); | |
| var metaStatusbar = doc.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]'); | |
| if (!html) { return; } | |
| if (Device.standalone && Device.ios && metaStatusbar && metaStatusbar.content === 'black-translucent') { | |
| classNames.push('device-full-viewport'); | |
| } | |
| // Pixel Ratio | |
| classNames.push(("device-pixel-ratio-" + (Math.floor(Device.pixelRatio)))); | |
| if (Device.pixelRatio >= 2) { | |
| classNames.push('device-retina'); | |
| } | |
| // OS classes | |
| if (Device.os) { | |
| classNames.push( | |
| ("device-" + (Device.os)), | |
| ("device-" + (Device.os) + "-" + (Device.osVersion.split('.')[0])), | |
| ("device-" + (Device.os) + "-" + (Device.osVersion.replace(/\./g, '-'))) | |
| ); | |
| if (Device.os === 'ios') { | |
| var major = parseInt(Device.osVersion.split('.')[0], 10); | |
| for (var i = major - 1; i >= 6; i -= 1) { | |
| classNames.push(("device-ios-gt-" + i)); | |
| } | |
| if (Device.iphoneX) { | |
| classNames.push('device-iphone-x'); | |
| } | |
| } | |
| } else if (Device.desktop) { | |
| classNames.push('device-desktop'); | |
| if (Device.macos) { classNames.push('device-macos'); } | |
| else if (Device.windows) { classNames.push('device-windows'); } | |
| } | |
| if (Device.cordova || Device.phonegap) { | |
| classNames.push('device-cordova'); | |
| } | |
| // Add html classes | |
| classNames.forEach(function (className) { | |
| html.classList.add(className); | |
| }); | |
| }, | |
| }, | |
| }; | |
| var Support = (function Support() { | |
| var testDiv = doc.createElement('div'); | |
| return { | |
| touch: (function checkTouch() { | |
| return !!((win.navigator.maxTouchPoints > 0) || ('ontouchstart' in win) || (win.DocumentTouch && doc instanceof win.DocumentTouch)); | |
| }()), | |
| pointerEvents: !!(win.navigator.pointerEnabled || win.PointerEvent || ('maxTouchPoints' in win.navigator)), | |
| prefixedPointerEvents: !!win.navigator.msPointerEnabled, | |
| transition: (function checkTransition() { | |
| var style = testDiv.style; | |
| return ('transition' in style || 'webkitTransition' in style || 'MozTransition' in style); | |
| }()), | |
| transforms3d: (win.Modernizr && win.Modernizr.csstransforms3d === true) || (function checkTransforms3d() { | |
| var style = testDiv.style; | |
| return ('webkitPerspective' in style || 'MozPerspective' in style || 'OPerspective' in style || 'MsPerspective' in style || 'perspective' in style); | |
| }()), | |
| flexbox: (function checkFlexbox() { | |
| var div = doc.createElement('div').style; | |
| var styles = ('alignItems webkitAlignItems webkitBoxAlign msFlexAlign mozBoxAlign webkitFlexDirection msFlexDirection mozBoxDirection mozBoxOrient webkitBoxDirection webkitBoxOrient').split(' '); | |
| for (var i = 0; i < styles.length; i += 1) { | |
| if (styles[i] in div) { return true; } | |
| } | |
| return false; | |
| }()), | |
| observer: (function checkObserver() { | |
| return ('MutationObserver' in win || 'WebkitMutationObserver' in win); | |
| }()), | |
| passiveListener: (function checkPassiveListener() { | |
| var supportsPassive = false; | |
| try { | |
| var opts = Object.defineProperty({}, 'passive', { | |
| // eslint-disable-next-line | |
| get: function get() { | |
| supportsPassive = true; | |
| }, | |
| }); | |
| win.addEventListener('testPassiveListener', null, opts); | |
| } catch (e) { | |
| // No support | |
| } | |
| return supportsPassive; | |
| }()), | |
| gestures: (function checkGestures() { | |
| return 'ongesturestart' in win; | |
| }()), | |
| intersectionObserver: (function checkObserver() { | |
| return ('IntersectionObserver' in win); | |
| }()), | |
| }; | |
| }()); | |
| var SupportModule = { | |
| name: 'support', | |
| proto: { | |
| support: Support, | |
| }, | |
| static: { | |
| support: Support, | |
| }, | |
| on: { | |
| init: function init() { | |
| var html = doc.querySelector('html'); | |
| if (!html) { return; } | |
| var classNames = []; | |
| // Add html classes | |
| classNames.forEach(function (className) { | |
| html.classList.add(className); | |
| }); | |
| }, | |
| }, | |
| }; | |
| var UtilsModule = { | |
| name: 'utils', | |
| proto: { | |
| utils: Utils, | |
| }, | |
| static: { | |
| utils: Utils, | |
| }, | |
| }; | |
| var ResizeModule = { | |
| name: 'resize', | |
| instance: { | |
| getSize: function getSize() { | |
| var app = this; | |
| if (!app.root[0]) { return { width: 0, height: 0, left: 0, top: 0 }; } | |
| var offset = app.root.offset(); | |
| var ref = [app.root[0].offsetWidth, app.root[0].offsetHeight, offset.left, offset.top]; | |
| var width = ref[0]; | |
| var height = ref[1]; | |
| var left = ref[2]; | |
| var top = ref[3]; | |
| app.width = width; | |
| app.height = height; | |
| app.left = left; | |
| app.top = top; | |
| return { width: width, height: height, left: left, top: top }; | |
| }, | |
| }, | |
| on: { | |
| init: function init() { | |
| var app = this; | |
| // Get Size | |
| app.getSize(); | |
| // Emit resize | |
| win.addEventListener('resize', function () { | |
| app.emit('resize'); | |
| }, false); | |
| // Emit orientationchange | |
| win.addEventListener('orientationchange', function () { | |
| app.emit('orientationchange'); | |
| }); | |
| }, | |
| orientationchange: function orientationchange() { | |
| var app = this; | |
| if (app.device && app.device.minimalUi) { | |
| if (win.orientation === 90 || win.orientation === -90) { | |
| doc.body.scrollTop = 0; | |
| } | |
| } | |
| // Fix iPad weird body scroll | |
| if (app.device.ipad) { | |
| doc.body.scrollLeft = 0; | |
| setTimeout(function () { | |
| doc.body.scrollLeft = 0; | |
| }, 0); | |
| } | |
| }, | |
| resize: function resize() { | |
| var app = this; | |
| app.getSize(); | |
| }, | |
| }, | |
| }; | |
| var globals = {}; | |
| var jsonpRequests = 0; | |
| function Request(requestOptions) { | |
| var globalsNoCallbacks = Utils.extend({}, globals); | |
| ('beforeCreate beforeOpen beforeSend error complete success statusCode').split(' ').forEach(function (callbackName) { | |
| delete globalsNoCallbacks[callbackName]; | |
| }); | |
| var defaults = Utils.extend({ | |
| url: win.location.toString(), | |
| method: 'GET', | |
| data: false, | |
| async: true, | |
| cache: true, | |
| user: '', | |
| password: '', | |
| headers: {}, | |
| xhrFields: {}, | |
| statusCode: {}, | |
| processData: true, | |
| dataType: 'text', | |
| contentType: 'application/x-www-form-urlencoded', | |
| timeout: 0, | |
| }, globalsNoCallbacks); | |
| var options = Utils.extend({}, defaults, requestOptions); | |
| var proceedRequest; | |
| // Function to run XHR callbacks and events | |
| function fireCallback(callbackName) { | |
| var data = [], len = arguments.length - 1; | |
| while ( len-- > 0 ) data[ len ] = arguments[ len + 1 ]; | |
| /* | |
| Callbacks: | |
| beforeCreate (options), | |
| beforeOpen (xhr, options), | |
| beforeSend (xhr, options), | |
| error (xhr, status), | |
| complete (xhr, stautus), | |
| success (response, status, xhr), | |
| statusCode () | |
| */ | |
| var globalCallbackValue; | |
| var optionCallbackValue; | |
| if (globals[callbackName]) { | |
| globalCallbackValue = globals[callbackName].apply(globals, data); | |
| } | |
| if (options[callbackName]) { | |
| optionCallbackValue = options[callbackName].apply(options, data); | |
| } | |
| if (typeof globalCallbackValue !== 'boolean') { globalCallbackValue = true; } | |
| if (typeof optionCallbackValue !== 'boolean') { optionCallbackValue = true; } | |
| return (globalCallbackValue && optionCallbackValue); | |
| } | |
| // Before create callback | |
| proceedRequest = fireCallback('beforeCreate', options); | |
| if (proceedRequest === false) { return undefined; } | |
| // For jQuery guys | |
| if (options.type) { options.method = options.type; } | |
| // Parameters Prefix | |
| var paramsPrefix = options.url.indexOf('?') >= 0 ? '&' : '?'; | |
| // UC method | |
| var method = options.method.toUpperCase(); | |
| // Data to modify GET URL | |
| if ((method === 'GET' || method === 'HEAD' || method === 'OPTIONS' || method === 'DELETE') && options.data) { | |
| var stringData; | |
| if (typeof options.data === 'string') { | |
| // Should be key=value string | |
| if (options.data.indexOf('?') >= 0) { stringData = options.data.split('?')[1]; } | |
| else { stringData = options.data; } | |
| } else { | |
| // Should be key=value object | |
| stringData = Utils.serializeObject(options.data); | |
| } | |
| if (stringData.length) { | |
| options.url += paramsPrefix + stringData; | |
| if (paramsPrefix === '?') { paramsPrefix = '&'; } | |
| } | |
| } | |
| // JSONP | |
| if (options.dataType === 'json' && options.url.indexOf('callback=') >= 0) { | |
| var callbackName = "f7jsonp_" + (Date.now() + ((jsonpRequests += 1))); | |
| var abortTimeout; | |
| var callbackSplit = options.url.split('callback='); | |
| var requestUrl = (callbackSplit[0]) + "callback=" + callbackName; | |
| if (callbackSplit[1].indexOf('&') >= 0) { | |
| var addVars = callbackSplit[1].split('&').filter(function (el) { return el.indexOf('=') > 0; }).join('&'); | |
| if (addVars.length > 0) { requestUrl += "&" + addVars; } | |
| } | |
| // Create script | |
| var script = doc.createElement('script'); | |
| script.type = 'text/javascript'; | |
| script.onerror = function onerror() { | |
| clearTimeout(abortTimeout); | |
| fireCallback('error', null, 'scripterror'); | |
| fireCallback('complete', null, 'scripterror'); | |
| }; | |
| script.src = requestUrl; | |
| // Handler | |
| win[callbackName] = function jsonpCallback(data) { | |
| clearTimeout(abortTimeout); | |
| fireCallback('success', data); | |
| script.parentNode.removeChild(script); | |
| script = null; | |
| delete win[callbackName]; | |
| }; | |
| doc.querySelector('head').appendChild(script); | |
| if (options.timeout > 0) { | |
| abortTimeout = setTimeout(function () { | |
| script.parentNode.removeChild(script); | |
| script = null; | |
| fireCallback('error', null, 'timeout'); | |
| }, options.timeout); | |
| } | |
| return undefined; | |
| } | |
| // Cache for GET/HEAD requests | |
| if (method === 'GET' || method === 'HEAD' || method === 'OPTIONS' || method === 'DELETE') { | |
| if (options.cache === false) { | |
| options.url += paramsPrefix + "_nocache" + (Date.now()); | |
| } | |
| } | |
| // Create XHR | |
| var xhr = new XMLHttpRequest(); | |
| // Save Request URL | |
| xhr.requestUrl = options.url; | |
| xhr.requestParameters = options; | |
| // Before open callback | |
| proceedRequest = fireCallback('beforeOpen', xhr, options); | |
| if (proceedRequest === false) { return xhr; } | |
| // Open XHR | |
| xhr.open(method, options.url, options.async, options.user, options.password); | |
| // Create POST Data | |
| var postData = null; | |
| if ((method === 'POST' || method === 'PUT' || method === 'PATCH') && options.data) { | |
| if (options.processData) { | |
| var postDataInstances = [ArrayBuffer, Blob, Document, FormData]; | |
| // Post Data | |
| if (postDataInstances.indexOf(options.data.constructor) >= 0) { | |
| postData = options.data; | |
| } else { | |
| // POST Headers | |
| var boundary = "---------------------------" + (Date.now().toString(16)); | |
| if (options.contentType === 'multipart/form-data') { | |
| xhr.setRequestHeader('Content-Type', ("multipart/form-data; boundary=" + boundary)); | |
| } else { | |
| xhr.setRequestHeader('Content-Type', options.contentType); | |
| } | |
| postData = ''; | |
| var data$1 = Utils.serializeObject(options.data); | |
| if (options.contentType === 'multipart/form-data') { | |
| data$1 = data$1.split('&'); | |
| var newData = []; | |
| for (var i = 0; i < data$1.length; i += 1) { | |
| newData.push(("Content-Disposition: form-data; name=\"" + (data$1[i].split('=')[0]) + "\"\r\n\r\n" + (data$1[i].split('=')[1]) + "\r\n")); | |
| } | |
| postData = "--" + boundary + "\r\n" + (newData.join(("--" + boundary + "\r\n"))) + "--" + boundary + "--\r\n"; | |
| } else if (options.contentType === 'application/json') { | |
| postData = JSON.stringify(options.data); | |
| } else { | |
| postData = data$1; | |
| } | |
| } | |
| } else { | |
| postData = options.data; | |
| xhr.setRequestHeader('Content-Type', options.contentType); | |
| } | |
| } | |
| // Additional headers | |
| if (options.headers) { | |
| Object.keys(options.headers).forEach(function (headerName) { | |
| xhr.setRequestHeader(headerName, options.headers[headerName]); | |
| }); | |
| } | |
| // Check for crossDomain | |
| if (typeof options.crossDomain === 'undefined') { | |
| // eslint-disable-next-line | |
| options.crossDomain = /^([\w-]+:)?\/\/([^\/]+)/.test(options.url) && RegExp.$2 !== win.location.host; | |
| } | |
| if (!options.crossDomain) { | |
| xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); | |
| } | |
| if (options.xhrFields) { | |
| Utils.extend(xhr, options.xhrFields); | |
| } | |
| var xhrTimeout; | |
| // Handle XHR | |
| xhr.onload = function onload() { | |
| if (xhrTimeout) { clearTimeout(xhrTimeout); } | |
| if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 0) { | |
| var responseData; | |
| if (options.dataType === 'json') { | |
| var parseError; | |
| try { | |
| responseData = JSON.parse(xhr.responseText); | |
| } catch (err) { | |
| parseError = true; | |
| } | |
| if (!parseError) { | |
| fireCallback('success', responseData, xhr.status, xhr); | |
| } else { | |
| fireCallback('error', xhr, 'parseerror'); | |
| } | |
| } else { | |
| responseData = xhr.responseType === 'text' || xhr.responseType === '' ? xhr.responseText : xhr.response; | |
| fireCallback('success', responseData, xhr.status, xhr); | |
| } | |
| } else { | |
| fireCallback('error', xhr, xhr.status); | |
| } | |
| if (options.statusCode) { | |
| if (globals.statusCode && globals.statusCode[xhr.status]) { globals.statusCode[xhr.status](xhr); } | |
| if (options.statusCode[xhr.status]) { options.statusCode[xhr.status](xhr); } | |
| } | |
| fireCallback('complete', xhr, xhr.status); | |
| }; | |
| xhr.onerror = function onerror() { | |
| if (xhrTimeout) { clearTimeout(xhrTimeout); } | |
| fireCallback('error', xhr, xhr.status); | |
| fireCallback('complete', xhr, 'error'); | |
| }; | |
| // Timeout | |
| if (options.timeout > 0) { | |
| xhr.onabort = function onabort() { | |
| if (xhrTimeout) { clearTimeout(xhrTimeout); } | |
| }; | |
| xhrTimeout = setTimeout(function () { | |
| xhr.abort(); | |
| fireCallback('error', xhr, 'timeout'); | |
| fireCallback('complete', xhr, 'timeout'); | |
| }, options.timeout); | |
| } | |
| // Ajax start callback | |
| proceedRequest = fireCallback('beforeSend', xhr, options); | |
| if (proceedRequest === false) { return xhr; } | |
| // Send XHR | |
| xhr.send(postData); | |
| // Return XHR object | |
| return xhr; | |
| } | |
| function RequestShortcut(method) { | |
| var assign, assign$1; | |
| var args = [], len = arguments.length - 1; | |
| while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | |
| var ref = []; | |
| var url = ref[0]; | |
| var data = ref[1]; | |
| var success = ref[2]; | |
| var error = ref[3]; | |
| var dataType = ref[4]; | |
| if (typeof args[1] === 'function') { | |
| (assign = args, url = assign[0], success = assign[1], error = assign[2], dataType = assign[3]); | |
| } else { | |
| (assign$1 = args, url = assign$1[0], data = assign$1[1], success = assign$1[2], error = assign$1[3], dataType = assign$1[4]); | |
| } | |
| [success, error].forEach(function (callback) { | |
| if (typeof callback === 'string') { | |
| dataType = callback; | |
| if (callback === success) { success = undefined; } | |
| else { error = undefined; } | |
| } | |
| }); | |
| dataType = dataType || (method === 'json' || method === 'postJSON' ? 'json' : undefined); | |
| var requestOptions = { | |
| url: url, | |
| method: method === 'post' || method === 'postJSON' ? 'POST' : 'GET', | |
| data: data, | |
| success: success, | |
| error: error, | |
| dataType: dataType, | |
| }; | |
| if (method === 'postJSON') { | |
| Utils.extend(requestOptions, { | |
| contentType: 'application/json', | |
| processData: false, | |
| crossDomain: true, | |
| data: typeof data === 'string' ? data : JSON.stringify(data), | |
| }); | |
| } | |
| return Request(requestOptions); | |
| } | |
| function RequestShortcutPromise(method) { | |
| var args = [], len = arguments.length - 1; | |
| while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | |
| var url = args[0]; | |
| var data = args[1]; | |
| var dataType = args[2]; | |
| return new Promise(function (resolve, reject) { | |
| RequestShortcut( | |
| method, | |
| url, | |
| data, | |
| function (response) { | |
| resolve(response); | |
| }, | |
| function (xhr, status) { | |
| reject(status); | |
| }, | |
| dataType | |
| ); | |
| }); | |
| } | |
| Object.assign(Request, { | |
| get: function () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return RequestShortcut.apply(void 0, [ 'get' ].concat( args )); | |
| }, | |
| post: function () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return RequestShortcut.apply(void 0, [ 'post' ].concat( args )); | |
| }, | |
| json: function () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return RequestShortcut.apply(void 0, [ 'json' ].concat( args )); | |
| }, | |
| getJSON: function () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return RequestShortcut.apply(void 0, [ 'json' ].concat( args )); | |
| }, | |
| postJSON: function () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return RequestShortcut.apply(void 0, [ 'postJSON' ].concat( args )); | |
| }, | |
| }); | |
| Request.promise = function requestPromise(requestOptions) { | |
| return new Promise(function (resolve, reject) { | |
| Request(Object.assign(requestOptions, { | |
| success: function success(data) { | |
| resolve(data); | |
| }, | |
| error: function error(xhr, status) { | |
| reject(status); | |
| }, | |
| })); | |
| }); | |
| }; | |
| Object.assign(Request.promise, { | |
| get: function () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return RequestShortcutPromise.apply(void 0, [ 'get' ].concat( args )); | |
| }, | |
| post: function () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return RequestShortcutPromise.apply(void 0, [ 'post' ].concat( args )); | |
| }, | |
| json: function () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return RequestShortcutPromise.apply(void 0, [ 'json' ].concat( args )); | |
| }, | |
| getJSON: function () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return RequestShortcutPromise.apply(void 0, [ 'json' ].concat( args )); | |
| }, | |
| postJSON: function () { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return RequestShortcutPromise.apply(void 0, [ 'postJSON' ].concat( args )); | |
| }, | |
| }); | |
| Request.setup = function setup(options) { | |
| if (options.type && !options.method) { | |
| Utils.extend(options, { method: options.type }); | |
| } | |
| Utils.extend(globals, options); | |
| }; | |
| /* eslint no-param-reassign: "off" */ | |
| var RequestModule = { | |
| name: 'request', | |
| proto: { | |
| request: Request, | |
| }, | |
| static: { | |
| request: Request, | |
| }, | |
| }; | |
| function initTouch() { | |
| var app = this; | |
| var params = app.params.touch; | |
| var useRipple = params[((app.theme) + "TouchRipple")]; | |
| if (Device.ios && Device.webView) { | |
| // Strange hack required for iOS 8 webview to work on inputs | |
| win.addEventListener('touchstart', function () {}); | |
| } | |
| var touchStartX; | |
| var touchStartY; | |
| var touchStartTime; | |
| var targetElement; | |
| var trackClick; | |
| var activeSelection; | |
| var scrollParent; | |
| var lastClickTime; | |
| var isMoved; | |
| var tapHoldFired; | |
| var tapHoldTimeout; | |
| var preventClick; | |
| var activableElement; | |
| var activeTimeout; | |
| var needsFastClick; | |
| var needsFastClickTimeOut; | |
| var rippleWave; | |
| var rippleTarget; | |
| var rippleTimeout; | |
| function findActivableElement(el) { | |
| var target = $(el); | |
| var parents = target.parents(params.activeStateElements); | |
| var activable; | |
| if (target.is(params.activeStateElements)) { | |
| activable = target; | |
| } | |
| if (parents.length > 0) { | |
| activable = activable ? activable.add(parents) : parents; | |
| } | |
| return activable || target; | |
| } | |
| function isInsideScrollableViewLight(el) { | |
| var pageContent = el.parents('.page-content'); | |
| return pageContent.length > 0; | |
| } | |
| function isInsideScrollableView(el) { | |
| var pageContent = el.parents('.page-content'); | |
| if (pageContent.length === 0) { | |
| return false; | |
| } | |
| // This event handler covers the "tap to stop scrolling". | |
| if (pageContent.prop('scrollHandlerSet') !== 'yes') { | |
| pageContent.on('scroll', function () { | |
| clearTimeout(activeTimeout); | |
| clearTimeout(rippleTimeout); | |
| }); | |
| pageContent.prop('scrollHandlerSet', 'yes'); | |
| } | |
| return true; | |
| } | |
| function addActive() { | |
| if (!activableElement) { return; } | |
| activableElement.addClass('active-state'); | |
| } | |
| function removeActive() { | |
| if (!activableElement) { return; } | |
| activableElement.removeClass('active-state'); | |
| activableElement = null; | |
| } | |
| function isFormElement(el) { | |
| var nodes = ('input select textarea label').split(' '); | |
| if (el.nodeName && nodes.indexOf(el.nodeName.toLowerCase()) >= 0) { return true; } | |
| return false; | |
| } | |
| function androidNeedsBlur(el) { | |
| var noBlur = ('button input textarea select').split(' '); | |
| if (doc.activeElement && el !== doc.activeElement && doc.activeElement !== doc.body) { | |
| if (noBlur.indexOf(el.nodeName.toLowerCase()) >= 0) { | |
| return false; | |
| } | |
| return true; | |
| } | |
| return false; | |
| } | |
| function targetNeedsFastClick(el) { | |
| /* | |
| if ( | |
| Device.ios | |
| && | |
| ( | |
| Device.osVersion.split('.')[0] > 9 | |
| || | |
| (Device.osVersion.split('.')[0] * 1 === 9 && Device.osVersion.split('.')[1] >= 1) | |
| ) | |
| ) { | |
| return false; | |
| } | |
| */ | |
| var $el = $(el); | |
| if (el.nodeName.toLowerCase() === 'input' && (el.type === 'file' || el.type === 'range')) { return false; } | |
| if (el.nodeName.toLowerCase() === 'select' && Device.android) { return false; } | |
| if ($el.hasClass('no-fastclick') || $el.parents('.no-fastclick').length > 0) { return false; } | |
| if (params.fastClicksExclude && $el.closest(params.fastClicksExclude).length > 0) { return false; } | |
| return true; | |
| } | |
| function targetNeedsFocus(el) { | |
| if (doc.activeElement === el) { | |
| return false; | |
| } | |
| var tag = el.nodeName.toLowerCase(); | |
| var skipInputs = ('button checkbox file image radio submit').split(' '); | |
| if (el.disabled || el.readOnly) { return false; } | |
| if (tag === 'textarea') { return true; } | |
| if (tag === 'select') { | |
| if (Device.android) { return false; } | |
| return true; | |
| } | |
| if (tag === 'input' && skipInputs.indexOf(el.type) < 0) { return true; } | |
| return false; | |
| } | |
| function targetNeedsPrevent(el) { | |
| var $el = $(el); | |
| var prevent = true; | |
| if ($el.is('label') || $el.parents('label').length > 0) { | |
| if (Device.android) { | |
| prevent = false; | |
| } else if (Device.ios && $el.is('input')) { | |
| prevent = true; | |
| } else { prevent = false; } | |
| } | |
| return prevent; | |
| } | |
| // Ripple handlers | |
| function findRippleElement(el) { | |
| var rippleElements = params.touchRippleElements; | |
| var $el = $(el); | |
| if ($el.is(rippleElements)) { | |
| if ($el.hasClass('no-ripple')) { | |
| return false; | |
| } | |
| return $el; | |
| } | |
| if ($el.parents(rippleElements).length > 0) { | |
| var rippleParent = $el.parents(rippleElements).eq(0); | |
| if (rippleParent.hasClass('no-ripple')) { | |
| return false; | |
| } | |
| return rippleParent; | |
| } | |
| return false; | |
| } | |
| function createRipple($el, x, y) { | |
| if (!$el) { return; } | |
| rippleWave = app.touchRipple.create($el, x, y); | |
| } | |
| function removeRipple() { | |
| if (!rippleWave) { return; } | |
| rippleWave.remove(); | |
| rippleWave = undefined; | |
| rippleTarget = undefined; | |
| } | |
| function rippleTouchStart(el) { | |
| rippleTarget = findRippleElement(el); | |
| if (!rippleTarget || rippleTarget.length === 0) { | |
| rippleTarget = undefined; | |
| return; | |
| } | |
| var inScrollable = params.fastClicks | |
| ? isInsideScrollableView(rippleTarget) | |
| : isInsideScrollableViewLight(rippleTarget); | |
| if (!inScrollable) { | |
| createRipple(rippleTarget, touchStartX, touchStartY); | |
| } else { | |
| rippleTimeout = setTimeout(function () { | |
| createRipple(rippleTarget, touchStartX, touchStartY); | |
| }, 80); | |
| } | |
| } | |
| function rippleTouchMove() { | |
| clearTimeout(rippleTimeout); | |
| removeRipple(); | |
| } | |
| function rippleTouchEnd() { | |
| if (rippleWave) { | |
| removeRipple(); | |
| } else if (rippleTarget && !isMoved) { | |
| clearTimeout(rippleTimeout); | |
| createRipple(rippleTarget, touchStartX, touchStartY); | |
| setTimeout(removeRipple, 0); | |
| } else { | |
| removeRipple(); | |
| } | |
| } | |
| // Mouse Handlers | |
| function handleMouseDown(e) { | |
| findActivableElement(e.target).addClass('active-state'); | |
| if ('which' in e && e.which === 3) { | |
| setTimeout(function () { | |
| $('.active-state').removeClass('active-state'); | |
| }, 0); | |
| } | |
| if (useRipple) { | |
| touchStartX = e.pageX; | |
| touchStartY = e.pageY; | |
| rippleTouchStart(e.target, e.pageX, e.pageY); | |
| } | |
| } | |
| function handleMouseMove() { | |
| $('.active-state').removeClass('active-state'); | |
| if (useRipple) { | |
| rippleTouchMove(); | |
| } | |
| } | |
| function handleMouseUp() { | |
| $('.active-state').removeClass('active-state'); | |
| if (useRipple) { | |
| rippleTouchEnd(); | |
| } | |
| } | |
| // Send Click | |
| function sendClick(e) { | |
| var touch = e.changedTouches[0]; | |
| var evt = doc.createEvent('MouseEvents'); | |
| var eventType = 'click'; | |
| if (Device.android && targetElement.nodeName.toLowerCase() === 'select') { | |
| eventType = 'mousedown'; | |
| } | |
| evt.initMouseEvent(eventType, true, true, win, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); | |
| evt.forwardedTouchEvent = true; | |
| if (app.device.ios && win.navigator.standalone) { | |
| // Fix the issue happens in iOS home screen apps where the wrong element is selected during a momentum scroll. | |
| // Upon tapping, we give the scrolling time to stop, then we grab the element based where the user tapped. | |
| setTimeout(function () { | |
| targetElement = doc.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY); | |
| targetElement.dispatchEvent(evt); | |
| }, 10); | |
| } else { | |
| targetElement.dispatchEvent(evt); | |
| } | |
| } | |
| // Touch Handlers | |
| function handleTouchStart(e) { | |
| var this$1 = this; | |
| isMoved = false; | |
| tapHoldFired = false; | |
| if (e.targetTouches.length > 1) { | |
| if (activableElement) { removeActive(); } | |
| return true; | |
| } | |
| if (e.touches.length > 1 && activableElement) { | |
| removeActive(); | |
| } | |
| if (params.tapHold) { | |
| if (tapHoldTimeout) { clearTimeout(tapHoldTimeout); } | |
| tapHoldTimeout = setTimeout(function () { | |
| if (e && e.touches && e.touches.length > 1) { return; } | |
| tapHoldFired = true; | |
| e.preventDefault(); | |
| $(e.target).trigger('taphold'); | |
| }, params.tapHoldDelay); | |
| } | |
| if (needsFastClickTimeOut) { clearTimeout(needsFastClickTimeOut); } | |
| needsFastClick = targetNeedsFastClick(e.target); | |
| if (!needsFastClick) { | |
| trackClick = false; | |
| return true; | |
| } | |
| if (Device.ios || (Device.android && 'getSelection' in win)) { | |
| var selection = win.getSelection(); | |
| if ( | |
| selection.rangeCount | |
| && selection.focusNode !== doc.body | |
| && (!selection.isCollapsed || doc.activeElement === selection.focusNode) | |
| ) { | |
| activeSelection = true; | |
| return true; | |
| } | |
| activeSelection = false; | |
| } | |
| if (Device.android) { | |
| if (androidNeedsBlur(e.target)) { | |
| doc.activeElement.blur(); | |
| } | |
| } | |
| trackClick = true; | |
| targetElement = e.target; | |
| touchStartTime = (new Date()).getTime(); | |
| touchStartX = e.targetTouches[0].pageX; | |
| touchStartY = e.targetTouches[0].pageY; | |
| // Detect scroll parent | |
| if (Device.ios) { | |
| scrollParent = undefined; | |
| $(targetElement).parents().each(function () { | |
| var parent = this$1; | |
| if (parent.scrollHeight > parent.offsetHeight && !scrollParent) { | |
| scrollParent = parent; | |
| scrollParent.f7ScrollTop = scrollParent.scrollTop; | |
| } | |
| }); | |
| } | |
| if ((touchStartTime - lastClickTime) < params.fastClicksDelayBetweenClicks) { | |
| e.preventDefault(); | |
| } | |
| if (params.activeState) { | |
| activableElement = findActivableElement(targetElement); | |
| activeTimeout = setTimeout(addActive, 0); | |
| } | |
| if (useRipple) { | |
| rippleTouchStart(targetElement, touchStartX, touchStartY); | |
| } | |
| return true; | |
| } | |
| function handleTouchMove(e) { | |
| if (!trackClick) { return; } | |
| var distance = params.fastClicksDistanceThreshold; | |
| if (distance) { | |
| var pageX = e.targetTouches[0].pageX; | |
| var pageY = e.targetTouches[0].pageY; | |
| if (Math.abs(pageX - touchStartX) > distance || Math.abs(pageY - touchStartY) > distance) { | |
| isMoved = true; | |
| } | |
| } else { | |
| isMoved = true; | |
| } | |
| if (isMoved) { | |
| trackClick = false; | |
| targetElement = null; | |
| isMoved = true; | |
| if (params.tapHold) { | |
| clearTimeout(tapHoldTimeout); | |
| } | |
| if (params.activeState) { | |
| clearTimeout(activeTimeout); | |
| removeActive(); | |
| } | |
| if (useRipple) { | |
| rippleTouchMove(); | |
| } | |
| } | |
| } | |
| function handleTouchEnd(e) { | |
| clearTimeout(activeTimeout); | |
| clearTimeout(tapHoldTimeout); | |
| var touchEndTime = (new Date()).getTime(); | |
| if (!trackClick) { | |
| if (!activeSelection && needsFastClick) { | |
| if (!(Device.android && !e.cancelable) && e.cancelable) { | |
| e.preventDefault(); | |
| } | |
| } | |
| if (params.activeState) { removeActive(); } | |
| if (useRipple) { | |
| rippleTouchEnd(); | |
| } | |
| return true; | |
| } | |
| if (doc.activeElement === e.target) { | |
| if (params.activeState) { removeActive(); } | |
| if (useRipple) { | |
| rippleTouchEnd(); | |
| } | |
| return true; | |
| } | |
| if (!activeSelection) { | |
| e.preventDefault(); | |
| } | |
| if ((touchEndTime - lastClickTime) < params.fastClicksDelayBetweenClicks) { | |
| setTimeout(removeActive, 0); | |
| if (useRipple) { | |
| rippleTouchEnd(); | |
| } | |
| return true; | |
| } | |
| lastClickTime = touchEndTime; | |
| trackClick = false; | |
| if (Device.ios && scrollParent) { | |
| if (scrollParent.scrollTop !== scrollParent.f7ScrollTop) { | |
| return false; | |
| } | |
| } | |
| // Add active-state here because, in a very fast tap, the timeout didn't | |
| // have the chance to execute. Removing active-state in a timeout gives | |
| // the chance to the animation execute. | |
| if (params.activeState) { | |
| addActive(); | |
| setTimeout(removeActive, 0); | |
| } | |
| // Remove Ripple | |
| if (useRipple) { | |
| rippleTouchEnd(); | |
| } | |
| // Trigger focus when required | |
| if (targetNeedsFocus(targetElement)) { | |
| if (Device.ios && Device.webView) { | |
| targetElement.focus(); | |
| return false; | |
| } | |
| targetElement.focus(); | |
| } | |
| // Blur active elements | |
| if (doc.activeElement && targetElement !== doc.activeElement && doc.activeElement !== doc.body && targetElement.nodeName.toLowerCase() !== 'label') { | |
| doc.activeElement.blur(); | |
| } | |
| // Send click | |
| e.preventDefault(); | |
| if (params.tapHoldPreventClicks && tapHoldFired) { | |
| return false; | |
| } | |
| sendClick(e); | |
| return false; | |
| } | |
| function handleTouchCancel() { | |
| trackClick = false; | |
| targetElement = null; | |
| // Remove Active State | |
| clearTimeout(activeTimeout); | |
| clearTimeout(tapHoldTimeout); | |
| if (params.activeState) { | |
| removeActive(); | |
| } | |
| // Remove Ripple | |
| if (useRipple) { | |
| rippleTouchEnd(); | |
| } | |
| } | |
| function handleClick(e) { | |
| var allowClick = false; | |
| if (trackClick) { | |
| targetElement = null; | |
| trackClick = false; | |
| return true; | |
| } | |
| if ((e.target.type === 'submit' && e.detail === 0) || e.target.type === 'file') { | |
| return true; | |
| } | |
| if (!targetElement) { | |
| if (!isFormElement(e.target)) { | |
| allowClick = true; | |
| } | |
| } | |
| if (!needsFastClick) { | |
| allowClick = true; | |
| } | |
| if (doc.activeElement === targetElement) { | |
| allowClick = true; | |
| } | |
| if (e.forwardedTouchEvent) { | |
| allowClick = true; | |
| } | |
| if (!e.cancelable) { | |
| allowClick = true; | |
| } | |
| if (params.tapHold && params.tapHoldPreventClicks && tapHoldFired) { | |
| allowClick = false; | |
| } | |
| if (!allowClick) { | |
| e.stopImmediatePropagation(); | |
| e.stopPropagation(); | |
| if (targetElement) { | |
| if (targetNeedsPrevent(targetElement) || isMoved) { | |
| e.preventDefault(); | |
| } | |
| } else { | |
| e.preventDefault(); | |
| } | |
| targetElement = null; | |
| } | |
| needsFastClickTimeOut = setTimeout(function () { | |
| needsFastClick = false; | |
| }, (Device.ios || Device.androidChrome ? 100 : 400)); | |
| if (params.tapHold) { | |
| tapHoldTimeout = setTimeout(function () { | |
| tapHoldFired = false; | |
| }, (Device.ios || Device.androidChrome ? 100 : 400)); | |
| } | |
| return allowClick; | |
| } | |
| function handleTouchStartLight(e) { | |
| isMoved = false; | |
| tapHoldFired = false; | |
| preventClick = false; | |
| if (e.targetTouches.length > 1) { | |
| if (activableElement) { removeActive(); } | |
| return true; | |
| } | |
| if (e.touches.length > 1 && activableElement) { | |
| removeActive(); | |
| } | |
| if (params.tapHold) { | |
| if (tapHoldTimeout) { clearTimeout(tapHoldTimeout); } | |
| tapHoldTimeout = setTimeout(function () { | |
| if (e && e.touches && e.touches.length > 1) { return; } | |
| tapHoldFired = true; | |
| e.preventDefault(); | |
| preventClick = true; | |
| $(e.target).trigger('taphold'); | |
| }, params.tapHoldDelay); | |
| } | |
| targetElement = e.target; | |
| touchStartX = e.targetTouches[0].pageX; | |
| touchStartY = e.targetTouches[0].pageY; | |
| if (params.activeState) { | |
| activableElement = findActivableElement(targetElement); | |
| if (!isInsideScrollableViewLight(activableElement)) { | |
| addActive(); | |
| } else { | |
| activeTimeout = setTimeout(addActive, 80); | |
| } | |
| } | |
| if (useRipple) { | |
| rippleTouchStart(targetElement, touchStartX, touchStartY); | |
| } | |
| return true; | |
| } | |
| function handleTouchMoveLight(e) { | |
| var distance = params.fastClicks ? params.fastClicksDistanceThreshold : 0; | |
| if (distance) { | |
| var pageX = e.targetTouches[0].pageX; | |
| var pageY = e.targetTouches[0].pageY; | |
| if (Math.abs(pageX - touchStartX) > distance || Math.abs(pageY - touchStartY) > distance) { | |
| isMoved = true; | |
| } | |
| } else { | |
| isMoved = true; | |
| } | |
| if (isMoved) { | |
| preventClick = true; | |
| if (params.tapHold) { | |
| clearTimeout(tapHoldTimeout); | |
| } | |
| if (params.activeState) { | |
| clearTimeout(activeTimeout); | |
| removeActive(); | |
| } | |
| if (useRipple) { | |
| rippleTouchMove(); | |
| } | |
| } | |
| } | |
| function handleTouchEndLight(e) { | |
| clearTimeout(activeTimeout); | |
| clearTimeout(tapHoldTimeout); | |
| if (doc.activeElement === e.target) { | |
| if (params.activeState) { removeActive(); } | |
| if (useRipple) { | |
| rippleTouchEnd(); | |
| } | |
| return true; | |
| } | |
| if (params.activeState) { | |
| addActive(); | |
| setTimeout(removeActive, 0); | |
| } | |
| if (useRipple) { | |
| rippleTouchEnd(); | |
| } | |
| if ((params.tapHoldPreventClicks && tapHoldFired) || preventClick) { | |
| if (e.cancelable) { e.preventDefault(); } | |
| preventClick = true; | |
| return false; | |
| } | |
| return true; | |
| } | |
| function handleClickLight(e) { | |
| var localPreventClick = preventClick; | |
| if (targetElement && e.target !== targetElement) { | |
| localPreventClick = true; | |
| } | |
| if (params.tapHold && params.tapHoldPreventClicks && tapHoldFired) { | |
| localPreventClick = true; | |
| } | |
| if (localPreventClick) { | |
| e.stopImmediatePropagation(); | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| } | |
| if (params.tapHold) { | |
| tapHoldTimeout = setTimeout( | |
| function () { | |
| tapHoldFired = false; | |
| }, | |
| (Device.ios || Device.androidChrome ? 100 : 400) | |
| ); | |
| } | |
| preventClick = false; | |
| targetElement = null; | |
| return !localPreventClick; | |
| } | |
| function emitAppTouchEvent(name, e) { | |
| app.emit({ | |
| events: name, | |
| data: [e], | |
| }); | |
| } | |
| function appClick(e) { | |
| emitAppTouchEvent('click', e); | |
| } | |
| function appTouchStartActive(e) { | |
| emitAppTouchEvent('touchstart touchstart:active', e); | |
| } | |
| function appTouchMoveActive(e) { | |
| emitAppTouchEvent('touchmove touchmove:active', e); | |
| } | |
| function appTouchEndActive(e) { | |
| emitAppTouchEvent('touchend touchend:active', e); | |
| } | |
| function appTouchStartPassive(e) { | |
| emitAppTouchEvent('touchstart:passive', e); | |
| } | |
| function appTouchMovePassive(e) { | |
| emitAppTouchEvent('touchmove:passive', e); | |
| } | |
| function appTouchEndPassive(e) { | |
| emitAppTouchEvent('touchend:passive', e); | |
| } | |
| var passiveListener = Support.passiveListener ? { passive: true } : false; | |
| var activeListener = Support.passiveListener ? { passive: false } : false; | |
| doc.addEventListener('click', appClick, true); | |
| if (Support.passiveListener) { | |
| doc.addEventListener(app.touchEvents.start, appTouchStartActive, activeListener); | |
| doc.addEventListener(app.touchEvents.move, appTouchMoveActive, activeListener); | |
| doc.addEventListener(app.touchEvents.end, appTouchEndActive, activeListener); | |
| doc.addEventListener(app.touchEvents.start, appTouchStartPassive, passiveListener); | |
| doc.addEventListener(app.touchEvents.move, appTouchMovePassive, passiveListener); | |
| doc.addEventListener(app.touchEvents.end, appTouchEndPassive, passiveListener); | |
| } else { | |
| doc.addEventListener(app.touchEvents.start, function (e) { | |
| appTouchStartActive(e); | |
| appTouchStartPassive(e); | |
| }, false); | |
| doc.addEventListener(app.touchEvents.move, function (e) { | |
| appTouchMoveActive(e); | |
| appTouchMovePassive(e); | |
| }, false); | |
| doc.addEventListener(app.touchEvents.end, function (e) { | |
| appTouchEndActive(e); | |
| appTouchEndPassive(e); | |
| }, false); | |
| } | |
| if (Support.touch) { | |
| if (params.fastClicks) { | |
| app.on('click', handleClick); | |
| app.on('touchstart', handleTouchStart); | |
| app.on('touchmove', handleTouchMove); | |
| app.on('touchend', handleTouchEnd); | |
| } else { | |
| app.on('click', handleClickLight); | |
| app.on('touchstart', handleTouchStartLight); | |
| app.on('touchmove', handleTouchMoveLight); | |
| app.on('touchend', handleTouchEndLight); | |
| } | |
| doc.addEventListener('touchcancel', handleTouchCancel, { passive: true }); | |
| } else if (params.activeState) { | |
| app.on('touchstart', handleMouseDown); | |
| app.on('touchmove', handleMouseMove); | |
| app.on('touchend', handleMouseUp); | |
| } | |
| doc.addEventListener('contextmenu', function (e) { | |
| if (params.disableContextMenu && (Device.ios || Device.android || Device.cordova)) { | |
| e.preventDefault(); | |
| } | |
| if (useRipple) { | |
| if (activableElement) { removeActive(); } | |
| rippleTouchEnd(); | |
| } | |
| }); | |
| } | |
| var TouchModule = { | |
| name: 'touch', | |
| params: { | |
| touch: { | |
| // Fast clicks | |
| fastClicks: false, | |
| fastClicksDistanceThreshold: 10, | |
| fastClicksDelayBetweenClicks: 50, | |
| fastClicksExclude: '', // CSS selector | |
| // ContextMenu | |
| disableContextMenu: false, | |
| // Tap Hold | |
| tapHold: false, | |
| tapHoldDelay: 750, | |
| tapHoldPreventClicks: true, | |
| // Active State | |
| activeState: true, | |
| activeStateElements: 'a, button, label, span, .actions-button, .stepper-button, .stepper-button-plus, .stepper-button-minus, .card-expandable, .menu-item', | |
| mdTouchRipple: true, | |
| iosTouchRipple: false, | |
| touchRippleElements: '.ripple, .link, .item-link, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus, .menu-item-content', | |
| }, | |
| }, | |
| instance: { | |
| touchEvents: { | |
| start: Support.touch ? 'touchstart' : 'mousedown', | |
| move: Support.touch ? 'touchmove' : 'mousemove', | |
| end: Support.touch ? 'touchend' : 'mouseup', | |
| }, | |
| }, | |
| on: { | |
| init: initTouch, | |
| }, | |
| }; | |
| /** | |
| * Expose `pathToRegexp`. | |
| */ | |
| var pathToRegexp_1 = pathToRegexp; | |
| var parse_1 = parse; | |
| var compile_1 = compile; | |
| var tokensToFunction_1 = tokensToFunction; | |
| var tokensToRegExp_1 = tokensToRegExp; | |
| /** | |
| * Default configs. | |
| */ | |
| var DEFAULT_DELIMITER = '/'; | |
| /** | |
| * The main path matching regexp utility. | |
| * | |
| * @type {RegExp} | |
| */ | |
| var PATH_REGEXP = new RegExp([ | |
| // Match escaped characters that would otherwise appear in future matches. | |
| // This allows the user to escape special characters that won't transform. | |
| '(\\\\.)', | |
| // Match Express-style parameters and un-named parameters with a prefix | |
| // and optional suffixes. Matches appear as: | |
| // | |
| // ":test(\\d+)?" => ["test", "\d+", undefined, "?"] | |
| // "(\\d+)" => [undefined, undefined, "\d+", undefined] | |
| '(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?' | |
| ].join('|'), 'g'); | |
| /** | |
| * Parse a string for the raw tokens. | |
| * | |
| * @param {string} str | |
| * @param {Object=} options | |
| * @return {!Array} | |
| */ | |
| function parse (str, options) { | |
| var tokens = []; | |
| var key = 0; | |
| var index = 0; | |
| var path = ''; | |
| var defaultDelimiter = (options && options.delimiter) || DEFAULT_DELIMITER; | |
| var whitelist = (options && options.whitelist) || undefined; | |
| var pathEscaped = false; | |
| var res; | |
| while ((res = PATH_REGEXP.exec(str)) !== null) { | |
| var m = res[0]; | |
| var escaped = res[1]; | |
| var offset = res.index; | |
| path += str.slice(index, offset); | |
| index = offset + m.length; | |
| // Ignore already escaped sequences. | |
| if (escaped) { | |
| path += escaped[1]; | |
| pathEscaped = true; | |
| continue | |
| } | |
| var prev = ''; | |
| var name = res[2]; | |
| var capture = res[3]; | |
| var group = res[4]; | |
| var modifier = res[5]; | |
| if (!pathEscaped && path.length) { | |
| var k = path.length - 1; | |
| var c = path[k]; | |
| var matches = whitelist ? whitelist.indexOf(c) > -1 : true; | |
| if (matches) { | |
| prev = c; | |
| path = path.slice(0, k); | |
| } | |
| } | |
| // Push the current path onto the tokens. | |
| if (path) { | |
| tokens.push(path); | |
| path = ''; | |
| pathEscaped = false; | |
| } | |
| var repeat = modifier === '+' || modifier === '*'; | |
| var optional = modifier === '?' || modifier === '*'; | |
| var pattern = capture || group; | |
| var delimiter = prev || defaultDelimiter; | |
| tokens.push({ | |
| name: name || key++, | |
| prefix: prev, | |
| delimiter: delimiter, | |
| optional: optional, | |
| repeat: repeat, | |
| pattern: pattern | |
| ? escapeGroup(pattern) | |
| : '[^' + escapeString(delimiter === defaultDelimiter ? delimiter : (delimiter + defaultDelimiter)) + ']+?' | |
| }); | |
| } | |
| // Push any remaining characters. | |
| if (path || index < str.length) { | |
| tokens.push(path + str.substr(index)); | |
| } | |
| return tokens | |
| } | |
| /** | |
| * Compile a string to a template function for the path. | |
| * | |
| * @param {string} str | |
| * @param {Object=} options | |
| * @return {!function(Object=, Object=)} | |
| */ | |
| function compile (str, options) { | |
| return tokensToFunction(parse(str, options)) | |
| } | |
| /** | |
| * Expose a method for transforming tokens into the path function. | |
| */ | |
| function tokensToFunction (tokens) { | |
| // Compile all the tokens into regexps. | |
| var matches = new Array(tokens.length); | |
| // Compile all the patterns before compilation. | |
| for (var i = 0; i < tokens.length; i++) { | |
| if (typeof tokens[i] === 'object') { | |
| matches[i] = new RegExp('^(?:' + tokens[i].pattern + ')$'); | |
| } | |
| } | |
| return function (data, options) { | |
| var path = ''; | |
| var encode = (options && options.encode) || encodeURIComponent; | |
| for (var i = 0; i < tokens.length; i++) { | |
| var token = tokens[i]; | |
| if (typeof token === 'string') { | |
| path += token; | |
| continue | |
| } | |
| var value = data ? data[token.name] : undefined; | |
| var segment; | |
| if (Array.isArray(value)) { | |
| if (!token.repeat) { | |
| throw new TypeError('Expected "' + token.name + '" to not repeat, but got array') | |
| } | |
| if (value.length === 0) { | |
| if (token.optional) { continue } | |
| throw new TypeError('Expected "' + token.name + '" to not be empty') | |
| } | |
| for (var j = 0; j < value.length; j++) { | |
| segment = encode(value[j], token); | |
| if (!matches[i].test(segment)) { | |
| throw new TypeError('Expected all "' + token.name + '" to match "' + token.pattern + '"') | |
| } | |
| path += (j === 0 ? token.prefix : token.delimiter) + segment; | |
| } | |
| continue | |
| } | |
| if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') { | |
| segment = encode(String(value), token); | |
| if (!matches[i].test(segment)) { | |
| throw new TypeError('Expected "' + token.name + '" to match "' + token.pattern + '", but got "' + segment + '"') | |
| } | |
| path += token.prefix + segment; | |
| continue | |
| } | |
| if (token.optional) { continue } | |
| throw new TypeError('Expected "' + token.name + '" to be ' + (token.repeat ? 'an array' : 'a string')) | |
| } | |
| return path | |
| } | |
| } | |
| /** | |
| * Escape a regular expression string. | |
| * | |
| * @param {string} str | |
| * @return {string} | |
| */ | |
| function escapeString (str) { | |
| return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, '\\$1') | |
| } | |
| /** | |
| * Escape the capturing group by escaping special characters and meaning. | |
| * | |
| * @param {string} group | |
| * @return {string} | |
| */ | |
| function escapeGroup (group) { | |
| return group.replace(/([=!:$/()])/g, '\\$1') | |
| } | |
| /** | |
| * Get the flags for a regexp from the options. | |
| * | |
| * @param {Object} options | |
| * @return {string} | |
| */ | |
| function flags (options) { | |
| return options && options.sensitive ? '' : 'i' | |
| } | |
| /** | |
| * Pull out keys from a regexp. | |
| * | |
| * @param {!RegExp} path | |
| * @param {Array=} keys | |
| * @return {!RegExp} | |
| */ | |
| function regexpToRegexp (path, keys) { | |
| if (!keys) { return path } | |
| // Use a negative lookahead to match only capturing groups. | |
| var groups = path.source.match(/\((?!\?)/g); | |
| if (groups) { | |
| for (var i = 0; i < groups.length; i++) { | |
| keys.push({ | |
| name: i, | |
| prefix: null, | |
| delimiter: null, | |
| optional: false, | |
| repeat: false, | |
| pattern: null | |
| }); | |
| } | |
| } | |
| return path | |
| } | |
| /** | |
| * Transform an array into a regexp. | |
| * | |
| * @param {!Array} path | |
| * @param {Array=} keys | |
| * @param {Object=} options | |
| * @return {!RegExp} | |
| */ | |
| function arrayToRegexp (path, keys, options) { | |
| var parts = []; | |
| for (var i = 0; i < path.length; i++) { | |
| parts.push(pathToRegexp(path[i], keys, options).source); | |
| } | |
| return new RegExp('(?:' + parts.join('|') + ')', flags(options)) | |
| } | |
| /** | |
| * Create a path regexp from string input. | |
| * | |
| * @param {string} path | |
| * @param {Array=} keys | |
| * @param {Object=} options | |
| * @return {!RegExp} | |
| */ | |
| function stringToRegexp (path, keys, options) { | |
| return tokensToRegExp(parse(path, options), keys, options) | |
| } | |
| /** | |
| * Expose a function for taking tokens and returning a RegExp. | |
| * | |
| * @param {!Array} tokens | |
| * @param {Array=} keys | |
| * @param {Object=} options | |
| * @return {!RegExp} | |
| */ | |
| function tokensToRegExp (tokens, keys, options) { | |
| options = options || {}; | |
| var strict = options.strict; | |
| var start = options.start !== false; | |
| var end = options.end !== false; | |
| var delimiter = options.delimiter || DEFAULT_DELIMITER; | |
| var endsWith = [].concat(options.endsWith || []).map(escapeString).concat('$').join('|'); | |
| var route = start ? '^' : ''; | |
| // Iterate over the tokens and create our regexp string. | |
| for (var i = 0; i < tokens.length; i++) { | |
| var token = tokens[i]; | |
| if (typeof token === 'string') { | |
| route += escapeString(token); | |
| } else { | |
| var capture = token.repeat | |
| ? '(?:' + token.pattern + ')(?:' + escapeString(token.delimiter) + '(?:' + token.pattern + '))*' | |
| : token.pattern; | |
| if (keys) { keys.push(token); } | |
| if (token.optional) { | |
| if (!token.prefix) { | |
| route += '(' + capture + ')?'; | |
| } else { | |
| route += '(?:' + escapeString(token.prefix) + '(' + capture + '))?'; | |
| } | |
| } else { | |
| route += escapeString(token.prefix) + '(' + capture + ')'; | |
| } | |
| } | |
| } | |
| if (end) { | |
| if (!strict) { route += '(?:' + escapeString(delimiter) + ')?'; } | |
| route += endsWith === '$' ? '$' : '(?=' + endsWith + ')'; | |
| } else { | |
| var endToken = tokens[tokens.length - 1]; | |
| var isEndDelimited = typeof endToken === 'string' | |
| ? endToken[endToken.length - 1] === delimiter | |
| : endToken === undefined; | |
| if (!strict) { route += '(?:' + escapeString(delimiter) + '(?=' + endsWith + '))?'; } | |
| if (!isEndDelimited) { route += '(?=' + escapeString(delimiter) + '|' + endsWith + ')'; } | |
| } | |
| return new RegExp(route, flags(options)) | |
| } | |
| /** | |
| * Normalize the given path string, returning a regular expression. | |
| * | |
| * An empty array can be passed in for the keys, which will hold the | |
| * placeholder key descriptions. For example, using `/user/:id`, `keys` will | |
| * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`. | |
| * | |
| * @param {(string|RegExp|Array)} path | |
| * @param {Array=} keys | |
| * @param {Object=} options | |
| * @return {!RegExp} | |
| */ | |
| function pathToRegexp (path, keys, options) { | |
| if (path instanceof RegExp) { | |
| return regexpToRegexp(path, keys) | |
| } | |
| if (Array.isArray(path)) { | |
| return arrayToRegexp(/** @type {!Array} */ (path), keys, options) | |
| } | |
| return stringToRegexp(/** @type {string} */ (path), keys, options) | |
| } | |
| pathToRegexp_1.parse = parse_1; | |
| pathToRegexp_1.compile = compile_1; | |
| pathToRegexp_1.tokensToFunction = tokensToFunction_1; | |
| pathToRegexp_1.tokensToRegExp = tokensToRegExp_1; | |
| var History = { | |
| queue: [], | |
| clearQueue: function clearQueue() { | |
| if (History.queue.length === 0) { return; } | |
| var currentQueue = History.queue.shift(); | |
| currentQueue(); | |
| }, | |
| routerQueue: [], | |
| clearRouterQueue: function clearRouterQueue() { | |
| if (History.routerQueue.length === 0) { return; } | |
| var currentQueue = History.routerQueue.pop(); | |
| var router = currentQueue.router; | |
| var stateUrl = currentQueue.stateUrl; | |
| var action = currentQueue.action; | |
| var animate = router.params.animate; | |
| if (router.params.pushStateAnimate === false) { animate = false; } | |
| if (action === 'back') { | |
| router.back({ animate: animate, pushState: false }); | |
| } | |
| if (action === 'load') { | |
| router.navigate(stateUrl, { animate: animate, pushState: false }); | |
| } | |
| }, | |
| handle: function handle(e) { | |
| if (History.blockPopstate) { return; } | |
| var app = this; | |
| // const mainView = app.views.main; | |
| var state = e.state; | |
| History.previousState = History.state; | |
| History.state = state; | |
| History.allowChange = true; | |
| History.clearQueue(); | |
| state = History.state; | |
| if (!state) { state = {}; } | |
| app.views.forEach(function (view) { | |
| var router = view.router; | |
| var viewState = state[view.id]; | |
| if (!viewState && view.params.pushState) { | |
| viewState = { | |
| url: view.router.history[0], | |
| }; | |
| } | |
| if (!viewState) { return; } | |
| var stateUrl = viewState.url || undefined; | |
| var animate = router.params.animate; | |
| if (router.params.pushStateAnimate === false) { animate = false; } | |
| if (stateUrl !== router.url) { | |
| if (router.history.indexOf(stateUrl) >= 0) { | |
| // Go Back | |
| if (router.allowPageChange) { | |
| router.back({ animate: animate, pushState: false }); | |
| } else { | |
| History.routerQueue.push({ | |
| action: 'back', | |
| router: router, | |
| }); | |
| } | |
| } else if (router.allowPageChange) { | |
| // Load page | |
| router.navigate(stateUrl, { animate: animate, pushState: false }); | |
| } else { | |
| History.routerQueue.unshift({ | |
| action: 'load', | |
| stateUrl: stateUrl, | |
| router: router, | |
| }); | |
| } | |
| } | |
| }); | |
| }, | |
| initViewState: function initViewState(viewId, viewState) { | |
| var obj; | |
| var newState = Utils.extend({}, (History.state || {}), ( obj = {}, obj[viewId] = viewState, obj )); | |
| History.state = newState; | |
| win.history.replaceState(newState, ''); | |
| }, | |
| push: function push(viewId, viewState, url) { | |
| var obj; | |
| if (!History.allowChange) { | |
| History.queue.push(function () { | |
| History.push(viewId, viewState, url); | |
| }); | |
| return; | |
| } | |
| History.previousState = History.state; | |
| var newState = Utils.extend({}, (History.previousState || {}), ( obj = {}, obj[viewId] = viewState, obj )); | |
| History.state = newState; | |
| win.history.pushState(newState, '', url); | |
| }, | |
| replace: function replace(viewId, viewState, url) { | |
| var obj; | |
| if (!History.allowChange) { | |
| History.queue.push(function () { | |
| History.replace(viewId, viewState, url); | |
| }); | |
| return; | |
| } | |
| History.previousState = History.state; | |
| var newState = Utils.extend({}, (History.previousState || {}), ( obj = {}, obj[viewId] = viewState, obj )); | |
| History.state = newState; | |
| win.history.replaceState(newState, '', url); | |
| }, | |
| go: function go(index) { | |
| History.allowChange = false; | |
| win.history.go(index); | |
| }, | |
| back: function back() { | |
| History.allowChange = false; | |
| win.history.back(); | |
| }, | |
| allowChange: true, | |
| previousState: {}, | |
| state: win.history.state, | |
| blockPopstate: true, | |
| init: function init(app) { | |
| $(win).on('load', function () { | |
| setTimeout(function () { | |
| History.blockPopstate = false; | |
| }, 0); | |
| }); | |
| if (doc.readyState && doc.readyState === 'complete') { | |
| History.blockPopstate = false; | |
| } | |
| $(win).on('popstate', History.handle.bind(app)); | |
| }, | |
| }; | |
| function SwipeBack(r) { | |
| var router = r; | |
| var $el = router.$el; | |
| var $navbarEl = router.$navbarEl; | |
| var app = router.app; | |
| var params = router.params; | |
| var isTouched = false; | |
| var isMoved = false; | |
| var touchesStart = {}; | |
| var isScrolling; | |
| var currentPage = []; | |
| var previousPage = []; | |
| var viewContainerWidth; | |
| var touchesDiff; | |
| var allowViewTouchMove = true; | |
| var touchStartTime; | |
| var $currentNavbarInner = []; | |
| var $previousNavbarInner = []; | |
| var dynamicNavbar; | |
| var separateNavbar; | |
| var pageShadow; | |
| var pageOpacity; | |
| var animatableNavEls; | |
| var paramsSwipeBackAnimateShadow = params[((app.theme) + "SwipeBackAnimateShadow")]; | |
| var paramsSwipeBackAnimateOpacity = params[((app.theme) + "SwipeBackAnimateOpacity")]; | |
| var paramsSwipeBackActiveArea = params[((app.theme) + "SwipeBackActiveArea")]; | |
| var paramsSwipeBackThreshold = params[((app.theme) + "SwipeBackThreshold")]; | |
| var transformOrigin = app.rtl ? 'right center' : 'left center'; | |
| function animatableNavElements() { | |
| var els = []; | |
| var inverter = app.rtl ? -1 : 1; | |
| var currentNavIsLarge = $currentNavbarInner.hasClass('navbar-inner-large'); | |
| var previousNavIsLarge = $previousNavbarInner.hasClass('navbar-inner-large'); | |
| var fromLarge = currentNavIsLarge && !$currentNavbarInner.hasClass('navbar-inner-large-collapsed'); | |
| var toLarge = previousNavIsLarge && !$previousNavbarInner.hasClass('navbar-inner-large-collapsed'); | |
| var $currentNavElements = $currentNavbarInner.children('.left, .title, .right, .subnavbar, .fading, .title-large'); | |
| var $previousNavElements = $previousNavbarInner.children('.left, .title, .right, .subnavbar, .fading, .title-large'); | |
| var activeNavBackIconText; | |
| var previousNavBackIconText; | |
| if (params.iosAnimateNavbarBackIcon) { | |
| if ($currentNavbarInner.hasClass('sliding')) { | |
| activeNavBackIconText = $currentNavbarInner.children('.left').find('.back .icon + span').eq(0); | |
| } else { | |
| activeNavBackIconText = $currentNavbarInner.children('.left.sliding').find('.back .icon + span').eq(0); | |
| } | |
| if ($previousNavbarInner.hasClass('sliding')) { | |
| previousNavBackIconText = $previousNavbarInner.children('.left').find('.back .icon + span').eq(0); | |
| } else { | |
| previousNavBackIconText = $previousNavbarInner.children('.left.sliding').find('.back .icon + span').eq(0); | |
| } | |
| if (activeNavBackIconText.length) { | |
| $previousNavElements.each(function (index, el) { | |
| if (!$(el).hasClass('title')) { return; } | |
| el.f7NavbarLeftOffset += activeNavBackIconText.prev('.icon')[0].offsetWidth; | |
| }); | |
| } | |
| } | |
| $currentNavElements | |
| .each(function (index, navEl) { | |
| var $navEl = $(navEl); | |
| var isSubnavbar = $navEl.hasClass('subnavbar'); | |
| var isLeft = $navEl.hasClass('left'); | |
| var isTitle = $navEl.hasClass('title'); | |
| if (!fromLarge && $navEl.hasClass('.title-large')) { return; } | |
| var el = { | |
| el: navEl, | |
| }; | |
| if (fromLarge) { | |
| if (isTitle) { return; } | |
| if ($navEl.hasClass('title-large')) { | |
| if (!separateNavbar) { return; } | |
| if (toLarge) { | |
| if (els.indexOf(el) < 0) { els.push(el); } | |
| el.overflow = 'visible'; | |
| el.transform = 'translateX(100%)'; | |
| $navEl.find('.title-large-text, .title-large-inner').each(function (subIndex, subNavEl) { | |
| els.push({ | |
| el: subNavEl, | |
| transform: function (progress) { return ("translateX(" + (-100 + progress * 100 * inverter) + "%)"); }, | |
| }); | |
| }); | |
| } else { | |
| if (els.indexOf(el) < 0) { els.push(el); } | |
| el.overflow = 'hidden'; | |
| el.transform = function (progress) { return ("translateY(calc(" + (-progress) + " * var(--f7-navbar-large-title-height)))"); }; | |
| $navEl.find('.title-large-text, .title-large-inner').each(function (subIndex, subNavEl) { | |
| els.push({ | |
| el: subNavEl, | |
| transform: function (progress) { return ("translateX(" + (progress * 100 * inverter) + "%) translateY(calc(" + progress + " * var(--f7-navbar-large-title-height)))"); }, | |
| }); | |
| }); | |
| } | |
| return; | |
| } | |
| } | |
| if (toLarge) { | |
| if (!fromLarge) { | |
| if ($navEl.hasClass('title-large')) { | |
| if (!separateNavbar) { return; } | |
| if (els.indexOf(el) < 0) { els.push(el); } | |
| el.opacity = 0; | |
| } | |
| } | |
| if (isLeft && separateNavbar) { | |
| if (els.indexOf(el) < 0) { els.push(el); } | |
| el.opacity = function (progress) { return (1 - (Math.pow( progress, 0.33 ))); }; | |
| $navEl.find('.back span').each(function (subIndex, subNavEl) { | |
| els.push({ | |
| el: subNavEl, | |
| 'transform-origin': transformOrigin, | |
| transform: function (progress) { return ("translateY(calc(var(--f7-navbar-height) * " + progress + ")) scale(" + (1 + (1 * progress)) + ")"); }, | |
| }); | |
| }); | |
| return; | |
| } | |
| } | |
| if ($navEl.hasClass('title-large')) { return; } | |
| var isSliding = $navEl.hasClass('sliding') || $currentNavbarInner.hasClass('sliding'); | |
| if (els.indexOf(el) < 0) { els.push(el); } | |
| if (!isSubnavbar || (isSubnavbar && !isSliding)) { | |
| el.opacity = function (progress) { return (1 - (Math.pow( progress, 0.33 ))); }; | |
| } | |
| if (isSliding) { | |
| var transformTarget = el; | |
| if (isLeft && activeNavBackIconText.length && params.iosAnimateNavbarBackIcon) { | |
| var textEl = { el: activeNavBackIconText[0] }; | |
| transformTarget = textEl; | |
| els.push(textEl); | |
| } | |
| transformTarget.transform = function (progress) { | |
| var activeNavTranslate = progress * transformTarget.el.f7NavbarRightOffset; | |
| if (Device.pixelRatio === 1) { activeNavTranslate = Math.round(activeNavTranslate); } | |
| if (isSubnavbar && currentNavIsLarge && separateNavbar) { | |
| return ("translate3d(" + activeNavTranslate + "px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)"); | |
| } | |
| return ("translate3d(" + activeNavTranslate + "px,0,0)"); | |
| }; | |
| } | |
| }); | |
| $previousNavElements | |
| .each(function (index, navEl) { | |
| var $navEl = $(navEl); | |
| var isSubnavbar = $navEl.hasClass('subnavbar'); | |
| var isLeft = $navEl.hasClass('left'); | |
| var isTitle = $navEl.hasClass('title'); | |
| var el = { | |
| el: navEl, | |
| }; | |
| if (toLarge) { | |
| if (isTitle) { return; } | |
| if (els.indexOf(el) < 0) { els.push(el); } | |
| if ($navEl.hasClass('title-large')) { | |
| if (!separateNavbar) { return; } | |
| if (fromLarge) { | |
| el.opacity = 1; | |
| el.overflow = 'visible'; | |
| el.transform = 'translateY(0)'; | |
| $navEl.find('.title-large-text').each(function (subIndex, subNavEl) { | |
| els.push({ | |
| el: subNavEl, | |
| 'transform-origin': transformOrigin, | |
| opacity: function (progress) { return (Math.pow( progress, 3 )); }, | |
| transform: function (progress) { return ("translateY(calc(" + (-1 + progress * 1) + " * var(--f7-navbar-large-title-height))) scale(" + (0.5 + progress * 0.5) + ")"); }, | |
| }); | |
| }); | |
| } else { | |
| el.transform = function (progress) { return ("translateY(calc(" + (progress - 1) + " * var(--f7-navbar-large-title-height)))"); }; | |
| el.opacity = 1; | |
| el.overflow = 'hidden'; | |
| $navEl.find('.title-large-text').each(function (subIndex, subNavEl) { | |
| els.push({ | |
| el: subNavEl, | |
| 'transform-origin': transformOrigin, | |
| opacity: function (progress) { return (Math.pow( progress, 3 )); }, | |
| transform: function (progress) { return ("scale(" + (0.5 + progress * 0.5) + ")"); }, | |
| }); | |
| }); | |
| } | |
| $navEl.find('.title-large-inner').each(function (subIndex, subNavEl) { | |
| els.push({ | |
| el: subNavEl, | |
| 'transform-origin': transformOrigin, | |
| opacity: function (progress) { return (Math.pow( progress, 3 )); }, | |
| transform: function (progress) { return ("translateX(" + (-100 * (1 - progress) * inverter) + "%)"); }, | |
| }); | |
| }); | |
| return; | |
| } | |
| } | |
| if ($navEl.hasClass('title-large')) { return; } | |
| var isSliding = $navEl.hasClass('sliding') || $previousNavbarInner.hasClass('sliding'); | |
| if (els.indexOf(el) < 0) { els.push(el); } | |
| if (!isSubnavbar || (isSubnavbar && !isSliding)) { | |
| el.opacity = function (progress) { return (Math.pow( progress, 3 )); }; | |
| } | |
| if (isSliding) { | |
| var transformTarget = el; | |
| if (isLeft && previousNavBackIconText.length && params.iosAnimateNavbarBackIcon) { | |
| var textEl = { el: activeNavBackIconText[0] }; | |
| transformTarget = textEl; | |
| els.push(textEl); | |
| } | |
| transformTarget.transform = function (progress) { | |
| var previousNavTranslate = transformTarget.el.f7NavbarLeftOffset * (1 - progress); | |
| if (Device.pixelRatio === 1) { previousNavTranslate = Math.round(previousNavTranslate); } | |
| if (isSubnavbar && previousNavIsLarge && separateNavbar) { | |
| return ("translate3d(" + previousNavTranslate + "px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)"); | |
| } | |
| return ("translate3d(" + previousNavTranslate + "px,0,0)"); | |
| }; | |
| } | |
| }); | |
| return els; | |
| } | |
| function setAnimatableNavElements(ref) { | |
| if ( ref === void 0 ) ref = {}; | |
| var progress = ref.progress; | |
| var reset = ref.reset; | |
| var transition = ref.transition; | |
| var styles = ['overflow', 'transform', 'transform-origin', 'opacity']; | |
| for (var i = 0; i < animatableNavEls.length; i += 1) { | |
| var el = animatableNavEls[i]; | |
| if (el && el.el) { | |
| if (transition === true) { el.el.classList.add('navbar-page-transitioning'); } | |
| if (transition === false) { el.el.classList.remove('navbar-page-transitioning'); } | |
| for (var j = 0; j < styles.length; j += 1) { | |
| var styleProp = styles[j]; | |
| if (el[styleProp]) { | |
| if (reset) { | |
| el.el.style[styleProp] = ''; | |
| } else if (typeof el[styleProp] === 'function') { | |
| el.el.style[styleProp] = el[styleProp](progress); | |
| } else { | |
| el.el.style[styleProp] = el[styleProp]; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| function handleTouchStart(e) { | |
| var swipeBackEnabled = params[((app.theme) + "SwipeBack")]; | |
| if (!allowViewTouchMove || !swipeBackEnabled || isTouched || (app.swipeout && app.swipeout.el) || !router.allowPageChange) { return; } | |
| if ($(e.target).closest('.range-slider, .calendar-months').length > 0) { return; } | |
| if ($(e.target).closest('.page-master, .page-master-detail').length > 0 && params.masterDetailBreakpoint > 0 && app.width >= params.masterDetailBreakpoint) { return; } | |
| isMoved = false; | |
| isTouched = true; | |
| isScrolling = undefined; | |
| touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX; | |
| touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY; | |
| touchStartTime = Utils.now(); | |
| dynamicNavbar = router.dynamicNavbar; | |
| separateNavbar = router.separateNavbar; | |
| } | |
| function handleTouchMove(e) { | |
| if (!isTouched) { return; } | |
| var pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX; | |
| var pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY; | |
| if (typeof isScrolling === 'undefined') { | |
| isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x)) || (pageX < touchesStart.x && !app.rtl) || (pageX > touchesStart.x && app.rtl); | |
| } | |
| if (isScrolling || e.f7PreventSwipeBack || app.preventSwipeBack) { | |
| isTouched = false; | |
| return; | |
| } | |
| if (!isMoved) { | |
| // Calc values during first move fired | |
| var cancel = false; | |
| var target = $(e.target); | |
| var swipeout = target.closest('.swipeout'); | |
| if (swipeout.length > 0) { | |
| if (!app.rtl && swipeout.find('.swipeout-actions-left').length > 0) { cancel = true; } | |
| if (app.rtl && swipeout.find('.swipeout-actions-right').length > 0) { cancel = true; } | |
| } | |
| currentPage = target.closest('.page'); | |
| if (currentPage.hasClass('no-swipeback') || target.closest('.no-swipeback, .card-opened').length > 0) { cancel = true; } | |
| previousPage = $el.find('.page-previous:not(.stacked)'); | |
| var notFromBorder = touchesStart.x - $el.offset().left > paramsSwipeBackActiveArea; | |
| viewContainerWidth = $el.width(); | |
| if (app.rtl) { | |
| notFromBorder = touchesStart.x < ($el.offset().left - $el[0].scrollLeft) + (viewContainerWidth - paramsSwipeBackActiveArea); | |
| } else { | |
| notFromBorder = touchesStart.x - $el.offset().left > paramsSwipeBackActiveArea; | |
| } | |
| if (notFromBorder) { cancel = true; } | |
| if (previousPage.length === 0 || currentPage.length === 0) { cancel = true; } | |
| if (cancel) { | |
| isTouched = false; | |
| return; | |
| } | |
| if (paramsSwipeBackAnimateShadow) { | |
| pageShadow = currentPage.find('.page-shadow-effect'); | |
| if (pageShadow.length === 0) { | |
| pageShadow = $('<div class="page-shadow-effect"></div>'); | |
| currentPage.append(pageShadow); | |
| } | |
| } | |
| if (paramsSwipeBackAnimateOpacity) { | |
| pageOpacity = previousPage.find('.page-opacity-effect'); | |
| if (pageOpacity.length === 0) { | |
| pageOpacity = $('<div class="page-opacity-effect"></div>'); | |
| previousPage.append(pageOpacity); | |
| } | |
| } | |
| if (dynamicNavbar) { | |
| if (separateNavbar) { | |
| $currentNavbarInner = $navbarEl.find('.navbar-current:not(.stacked)'); | |
| $previousNavbarInner = $navbarEl.find('.navbar-previous:not(.stacked)'); | |
| } else { | |
| $currentNavbarInner = currentPage.children('.navbar').children('.navbar-inner'); | |
| $previousNavbarInner = previousPage.children('.navbar').children('.navbar-inner'); | |
| } | |
| animatableNavEls = animatableNavElements($previousNavbarInner, $currentNavbarInner); | |
| } | |
| // Close/Hide Any Picker | |
| if ($('.sheet.modal-in').length > 0 && app.sheet) { | |
| app.sheet.close($('.sheet.modal-in')); | |
| } | |
| } | |
| e.f7PreventPanelSwipe = true; | |
| isMoved = true; | |
| app.preventSwipePanelBySwipeBack = true; | |
| e.preventDefault(); | |
| // RTL inverter | |
| var inverter = app.rtl ? -1 : 1; | |
| // Touches diff | |
| touchesDiff = (pageX - touchesStart.x - paramsSwipeBackThreshold) * inverter; | |
| if (touchesDiff < 0) { touchesDiff = 0; } | |
| var percentage = Math.min(Math.max(touchesDiff / viewContainerWidth, 0), 1); | |
| // Swipe Back Callback | |
| var callbackData = { | |
| percentage: percentage, | |
| progress: percentage, | |
| currentPageEl: currentPage[0], | |
| previousPageEl: previousPage[0], | |
| currentNavbarEl: $currentNavbarInner[0], | |
| previousNavbarEl: $previousNavbarInner[0], | |
| }; | |
| $el.trigger('swipeback:move', callbackData); | |
| router.emit('swipebackMove', callbackData); | |
| // Transform pages | |
| var currentPageTranslate = touchesDiff * inverter; | |
| var previousPageTranslate = ((touchesDiff / 5) - (viewContainerWidth / 5)) * inverter; | |
| if (!app.rtl) { | |
| currentPageTranslate = Math.min(currentPageTranslate, viewContainerWidth); | |
| previousPageTranslate = Math.min(previousPageTranslate, 0); | |
| } else { | |
| currentPageTranslate = Math.max(currentPageTranslate, -viewContainerWidth); | |
| previousPageTranslate = Math.max(previousPageTranslate, 0); | |
| } | |
| if (Device.pixelRatio === 1) { | |
| currentPageTranslate = Math.round(currentPageTranslate); | |
| previousPageTranslate = Math.round(previousPageTranslate); | |
| } | |
| router.swipeBackActive = true; | |
| $([currentPage[0], previousPage[0]]).addClass('page-swipeback-active'); | |
| currentPage.transform(("translate3d(" + currentPageTranslate + "px,0,0)")); | |
| if (paramsSwipeBackAnimateShadow) { pageShadow[0].style.opacity = 1 - (1 * percentage); } | |
| if (app.theme !== 'md') { | |
| previousPage.transform(("translate3d(" + previousPageTranslate + "px,0,0)")); | |
| } | |
| if (paramsSwipeBackAnimateOpacity) { pageOpacity[0].style.opacity = 1 - (1 * percentage); } | |
| // Dynamic Navbars Animation | |
| if (!dynamicNavbar) { return; } | |
| setAnimatableNavElements({ progress: percentage }); | |
| } | |
| function handleTouchEnd() { | |
| app.preventSwipePanelBySwipeBack = false; | |
| if (!isTouched || !isMoved) { | |
| isTouched = false; | |
| isMoved = false; | |
| return; | |
| } | |
| isTouched = false; | |
| isMoved = false; | |
| router.swipeBackActive = false; | |
| $([currentPage[0], previousPage[0]]).removeClass('page-swipeback-active'); | |
| if (touchesDiff === 0) { | |
| $([currentPage[0], previousPage[0]]).transform(''); | |
| if (pageShadow && pageShadow.length > 0) { pageShadow.remove(); } | |
| if (pageOpacity && pageOpacity.length > 0) { pageOpacity.remove(); } | |
| if (dynamicNavbar) { | |
| setAnimatableNavElements({ reset: true }); | |
| } | |
| return; | |
| } | |
| var timeDiff = Utils.now() - touchStartTime; | |
| var pageChanged = false; | |
| // Swipe back to previous page | |
| if ( | |
| (timeDiff < 300 && touchesDiff > 10) | |
| || (timeDiff >= 300 && touchesDiff > viewContainerWidth / 2) | |
| ) { | |
| currentPage.removeClass('page-current').addClass(("page-next" + (app.theme === 'md' ? ' page-next-on-right' : ''))); | |
| previousPage.removeClass('page-previous').addClass('page-current').removeAttr('aria-hidden'); | |
| if (pageShadow) { pageShadow[0].style.opacity = ''; } | |
| if (pageOpacity) { pageOpacity[0].style.opacity = ''; } | |
| if (dynamicNavbar) { | |
| $currentNavbarInner.removeClass('navbar-current').addClass('navbar-next'); | |
| $previousNavbarInner.removeClass('navbar-previous').addClass('navbar-current').removeAttr('aria-hidden'); | |
| } | |
| pageChanged = true; | |
| } | |
| // Reset custom styles | |
| // Add transitioning class for transition-duration | |
| $([currentPage[0], previousPage[0]]).addClass('page-transitioning page-transitioning-swipeback').transform(''); | |
| if (dynamicNavbar) { | |
| setAnimatableNavElements({ progress: pageChanged ? 1 : 0, transition: true }); | |
| } | |
| allowViewTouchMove = false; | |
| router.allowPageChange = false; | |
| // Swipe Back Callback | |
| var callbackData = { | |
| currentPageEl: currentPage[0], | |
| previousPageEl: previousPage[0], | |
| currentNavbarEl: $currentNavbarInner[0], | |
| previousNavbarEl: $previousNavbarInner[0], | |
| }; | |
| if (pageChanged) { | |
| // Update Route | |
| router.currentRoute = previousPage[0].f7Page.route; | |
| router.currentPage = previousPage[0]; | |
| // Page before animation callback | |
| router.pageCallback('beforeOut', currentPage, $currentNavbarInner, 'current', 'next', { route: currentPage[0].f7Page.route, swipeBack: true }); | |
| router.pageCallback('beforeIn', previousPage, $previousNavbarInner, 'previous', 'current', { route: previousPage[0].f7Page.route, swipeBack: true }); | |
| $el.trigger('swipeback:beforechange', callbackData); | |
| router.emit('swipebackBeforeChange', callbackData); | |
| } else { | |
| $el.trigger('swipeback:beforereset', callbackData); | |
| router.emit('swipebackBeforeReset', callbackData); | |
| } | |
| currentPage.transitionEnd(function () { | |
| $([currentPage[0], previousPage[0]]).removeClass('page-transitioning page-transitioning-swipeback'); | |
| if (dynamicNavbar) { | |
| setAnimatableNavElements({ reset: true, transition: false }); | |
| } | |
| allowViewTouchMove = true; | |
| router.allowPageChange = true; | |
| if (pageChanged) { | |
| // Update History | |
| if (router.history.length === 1) { | |
| router.history.unshift(router.url); | |
| } | |
| router.history.pop(); | |
| router.saveHistory(); | |
| // Update push state | |
| if (params.pushState) { | |
| History.back(); | |
| } | |
| // Page after animation callback | |
| router.pageCallback('afterOut', currentPage, $currentNavbarInner, 'current', 'next', { route: currentPage[0].f7Page.route, swipeBack: true }); | |
| router.pageCallback('afterIn', previousPage, $previousNavbarInner, 'previous', 'current', { route: previousPage[0].f7Page.route, swipeBack: true }); | |
| // Remove Old Page | |
| if (params.stackPages && router.initialPages.indexOf(currentPage[0]) >= 0) { | |
| currentPage.addClass('stacked'); | |
| if (separateNavbar) { | |
| $currentNavbarInner.addClass('stacked'); | |
| } | |
| } else { | |
| router.pageCallback('beforeRemove', currentPage, $currentNavbarInner, 'next', { swipeBack: true }); | |
| router.removePage(currentPage); | |
| if (separateNavbar) { | |
| router.removeNavbar($currentNavbarInner); | |
| } | |
| } | |
| $el.trigger('swipeback:afterchange', callbackData); | |
| router.emit('swipebackAfterChange', callbackData); | |
| router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| if (params.preloadPreviousPage) { | |
| router.back(router.history[router.history.length - 2], { preload: true }); | |
| } | |
| } else { | |
| $el.trigger('swipeback:afterreset', callbackData); | |
| router.emit('swipebackAfterReset', callbackData); | |
| } | |
| if (pageShadow && pageShadow.length > 0) { pageShadow.remove(); } | |
| if (pageOpacity && pageOpacity.length > 0) { pageOpacity.remove(); } | |
| }); | |
| } | |
| function attachEvents() { | |
| var passiveListener = (app.touchEvents.start === 'touchstart' && Support.passiveListener) ? { passive: true, capture: false } : false; | |
| $el.on(app.touchEvents.start, handleTouchStart, passiveListener); | |
| app.on('touchmove:active', handleTouchMove); | |
| app.on('touchend:passive', handleTouchEnd); | |
| } | |
| function detachEvents() { | |
| var passiveListener = (app.touchEvents.start === 'touchstart' && Support.passiveListener) ? { passive: true, capture: false } : false; | |
| $el.off(app.touchEvents.start, handleTouchStart, passiveListener); | |
| app.off('touchmove:active', handleTouchMove); | |
| app.off('touchend:passive', handleTouchEnd); | |
| } | |
| attachEvents(); | |
| router.on('routerDestroy', detachEvents); | |
| } | |
| function redirect (direction, route, options) { | |
| var router = this; | |
| var redirect = route.route.redirect; | |
| if (options.initial && router.params.pushState) { | |
| options.replaceState = true; // eslint-disable-line | |
| options.history = true; // eslint-disable-line | |
| } | |
| function redirectResolve(redirectUrl, redirectOptions) { | |
| if ( redirectOptions === void 0 ) redirectOptions = {}; | |
| router.allowPageChange = true; | |
| router[direction](redirectUrl, Utils.extend({}, options, redirectOptions)); | |
| } | |
| function redirectReject() { | |
| router.allowPageChange = true; | |
| } | |
| if (typeof redirect === 'function') { | |
| router.allowPageChange = false; | |
| var redirectUrl = redirect.call(router, route, redirectResolve, redirectReject); | |
| if (redirectUrl && typeof redirectUrl === 'string') { | |
| router.allowPageChange = true; | |
| return router[direction](redirectUrl, options); | |
| } | |
| return router; | |
| } | |
| return router[direction](redirect, options); | |
| } | |
| function processQueue(router, routerQueue, routeQueue, to, from, resolve, reject) { | |
| var queue = []; | |
| if (Array.isArray(routeQueue)) { | |
| queue.push.apply(queue, routeQueue); | |
| } else if (routeQueue && typeof routeQueue === 'function') { | |
| queue.push(routeQueue); | |
| } | |
| if (routerQueue) { | |
| if (Array.isArray(routerQueue)) { | |
| queue.push.apply(queue, routerQueue); | |
| } else { | |
| queue.push(routerQueue); | |
| } | |
| } | |
| function next() { | |
| if (queue.length === 0) { | |
| resolve(); | |
| return; | |
| } | |
| var queueItem = queue.shift(); | |
| queueItem.call( | |
| router, | |
| to, | |
| from, | |
| function () { | |
| next(); | |
| }, | |
| function () { | |
| reject(); | |
| } | |
| ); | |
| } | |
| next(); | |
| } | |
| function processRouteQueue (to, from, resolve, reject) { | |
| var router = this; | |
| function enterNextRoute() { | |
| if (to && to.route && (router.params.routesBeforeEnter || to.route.beforeEnter)) { | |
| router.allowPageChange = false; | |
| processQueue( | |
| router, | |
| router.params.routesBeforeEnter, | |
| to.route.beforeEnter, | |
| to, | |
| from, | |
| function () { | |
| router.allowPageChange = true; | |
| resolve(); | |
| }, | |
| function () { | |
| reject(); | |
| } | |
| ); | |
| } else { | |
| resolve(); | |
| } | |
| } | |
| function leaveCurrentRoute() { | |
| if (from && from.route && (router.params.routesBeforeLeave || from.route.beforeLeave)) { | |
| router.allowPageChange = false; | |
| processQueue( | |
| router, | |
| router.params.routesBeforeLeave, | |
| from.route.beforeLeave, | |
| to, | |
| from, | |
| function () { | |
| router.allowPageChange = true; | |
| enterNextRoute(); | |
| }, | |
| function () { | |
| reject(); | |
| } | |
| ); | |
| } else { | |
| enterNextRoute(); | |
| } | |
| } | |
| leaveCurrentRoute(); | |
| } | |
| function appRouterCheck (router, method) { | |
| if (!router.view) { | |
| throw new Error(("Framework7: it is not allowed to use router methods on global app router. Use router methods only on related View, e.g. app.views.main.router." + method + "(...)")); | |
| } | |
| } | |
| function refreshPage() { | |
| var router = this; | |
| appRouterCheck(router, 'refreshPage'); | |
| return router.navigate(router.currentRoute.url, { | |
| ignoreCache: true, | |
| reloadCurrent: true, | |
| }); | |
| } | |
| function forward(el, forwardOptions) { | |
| if ( forwardOptions === void 0 ) forwardOptions = {}; | |
| var router = this; | |
| var $el = $(el); | |
| var app = router.app; | |
| var view = router.view; | |
| var options = Utils.extend(false, { | |
| animate: router.params.animate, | |
| pushState: true, | |
| replaceState: false, | |
| history: true, | |
| reloadCurrent: router.params.reloadPages, | |
| reloadPrevious: false, | |
| reloadAll: false, | |
| clearPreviousHistory: false, | |
| reloadDetail: router.params.reloadDetail, | |
| on: {}, | |
| }, forwardOptions); | |
| var masterDetailEnabled = router.params.masterDetailBreakpoint > 0; | |
| var isMaster = masterDetailEnabled && options.route && options.route.route && options.route.route.master === true; | |
| var masterPageEl; | |
| var otherDetailPageEl; | |
| var currentRouteIsModal = router.currentRoute.modal; | |
| var modalType; | |
| if (!currentRouteIsModal) { | |
| ('popup popover sheet loginScreen actions customModal panel').split(' ').forEach(function (modalLoadProp) { | |
| if (router.currentRoute && router.currentRoute.route && router.currentRoute.route[modalLoadProp]) { | |
| currentRouteIsModal = true; | |
| modalType = modalLoadProp; | |
| } | |
| }); | |
| } | |
| if (currentRouteIsModal) { | |
| var modalToClose = router.currentRoute.modal | |
| || router.currentRoute.route.modalInstance | |
| || app[modalType].get(); | |
| var previousUrl = router.history[router.history.length - 2]; | |
| var previousRoute = router.findMatchingRoute(previousUrl); | |
| if (!previousRoute && previousUrl) { | |
| previousRoute = { | |
| url: previousUrl, | |
| path: previousUrl.split('?')[0], | |
| query: Utils.parseUrlQuery(previousUrl), | |
| route: { | |
| path: previousUrl.split('?')[0], | |
| url: previousUrl, | |
| }, | |
| }; | |
| } | |
| router.modalRemove(modalToClose); | |
| } | |
| var dynamicNavbar = router.dynamicNavbar; | |
| var separateNavbar = router.separateNavbar; | |
| var $viewEl = router.$el; | |
| var $newPage = $el; | |
| var reload = options.reloadPrevious || options.reloadCurrent || options.reloadAll; | |
| var $oldPage; | |
| var $navbarEl; | |
| var $newNavbarInner; | |
| var $oldNavbarInner; | |
| router.allowPageChange = false; | |
| if ($newPage.length === 0) { | |
| router.allowPageChange = true; | |
| return router; | |
| } | |
| if ($newPage.length) { | |
| // Remove theme elements | |
| router.removeThemeElements($newPage); | |
| } | |
| if (dynamicNavbar) { | |
| $newNavbarInner = $newPage.children('.navbar').children('.navbar-inner'); | |
| if (separateNavbar) { | |
| $navbarEl = router.$navbarEl; | |
| if ($newNavbarInner.length > 0) { | |
| $newPage.children('.navbar').remove(); | |
| } | |
| if ($newNavbarInner.length === 0 && $newPage[0] && $newPage[0].f7Page) { | |
| // Try from pageData | |
| $newNavbarInner = $newPage[0].f7Page.$navbarEl; | |
| } | |
| } | |
| } | |
| // Save Keep Alive Cache | |
| if (options.route && options.route.route && options.route.route.keepAlive && !options.route.route.keepAliveData) { | |
| options.route.route.keepAliveData = { | |
| pageEl: $el[0], | |
| }; | |
| } | |
| // Pages In View | |
| var $pagesInView = $viewEl | |
| .children('.page:not(.stacked)') | |
| .filter(function (index, pageInView) { return pageInView !== $newPage[0]; }); | |
| // Navbars In View | |
| var $navbarsInView; | |
| if (separateNavbar) { | |
| $navbarsInView = $navbarEl | |
| .children('.navbar-inner:not(.stacked)') | |
| .filter(function (index, navbarInView) { return navbarInView !== $newNavbarInner[0]; }); | |
| } | |
| // Exit when reload previous and only 1 page in view so nothing ro reload | |
| if (options.reloadPrevious && $pagesInView.length < 2) { | |
| router.allowPageChange = true; | |
| return router; | |
| } | |
| // Find Detail' master page | |
| var isDetail; | |
| var reloadDetail; | |
| if (masterDetailEnabled && !options.reloadAll) { | |
| for (var i = 0; i < $pagesInView.length; i += 1) { | |
| if (!masterPageEl | |
| && $pagesInView[i].classList.contains('page-master') | |
| ) { | |
| masterPageEl = $pagesInView[i]; | |
| continue; // eslint-disable-line | |
| } | |
| } | |
| isDetail = !isMaster && masterPageEl; | |
| if (isDetail) { | |
| // Find Other Detail | |
| if (masterPageEl) { | |
| for (var i$1 = 0; i$1 < $pagesInView.length; i$1 += 1) { | |
| if ($pagesInView[i$1].classList.contains('page-master-detail') | |
| ) { | |
| otherDetailPageEl = $pagesInView[i$1]; | |
| continue; // eslint-disable-line | |
| } | |
| } | |
| } | |
| } | |
| reloadDetail = isDetail && options.reloadDetail && app.width >= router.params.masterDetailBreakpoint && masterPageEl; | |
| } | |
| // New Page | |
| var newPagePosition = 'next'; | |
| if (options.reloadCurrent || options.reloadAll || reloadDetail) { | |
| newPagePosition = 'current'; | |
| } else if (options.reloadPrevious) { | |
| newPagePosition = 'previous'; | |
| } | |
| $newPage | |
| .addClass(("page-" + newPagePosition + (isMaster ? ' page-master' : '') + (isDetail ? ' page-master-detail' : ''))) | |
| .removeClass('stacked') | |
| .trigger('page:unstack') | |
| .trigger('page:position', { position: newPagePosition }); | |
| if (isMaster || isDetail) { | |
| $newPage.trigger('page:role', { role: isMaster ? 'master' : 'detail' }); | |
| } | |
| if (dynamicNavbar && $newNavbarInner.length) { | |
| $newNavbarInner | |
| .addClass(("navbar-" + newPagePosition + (isMaster ? ' navbar-master' : '') + (isDetail ? ' navbar-master-detail' : ''))) | |
| .removeClass('stacked'); | |
| } | |
| // Find Old Page | |
| if (options.reloadCurrent || reloadDetail) { | |
| $oldPage = $pagesInView.eq($pagesInView.length - 1); | |
| if (separateNavbar) { | |
| // $oldNavbarInner = $navbarsInView.eq($pagesInView.length - 1); | |
| $oldNavbarInner = $(app.navbar.getElByPage($oldPage)); | |
| } | |
| } else if (options.reloadPrevious) { | |
| $oldPage = $pagesInView.eq($pagesInView.length - 2); | |
| if (separateNavbar) { | |
| // $oldNavbarInner = $navbarsInView.eq($pagesInView.length - 2); | |
| $oldNavbarInner = $(app.navbar.getElByPage($oldPage)); | |
| } | |
| } else if (options.reloadAll) { | |
| $oldPage = $pagesInView.filter(function (index, pageEl) { return pageEl !== $newPage[0]; }); | |
| if (separateNavbar) { | |
| $oldNavbarInner = $navbarsInView.filter(function (index, navbarEl) { return navbarEl !== $newNavbarInner[0]; }); | |
| } | |
| } else { | |
| if ($pagesInView.length > 1) { | |
| var i$2 = 0; | |
| for (i$2 = 0; i$2 < $pagesInView.length - 1; i$2 += 1) { | |
| if (masterPageEl | |
| && $pagesInView[i$2] === masterPageEl | |
| ) { | |
| $pagesInView.eq(i$2).addClass('page-master-stacked'); | |
| $pagesInView.eq(i$2).trigger('page:masterstack'); | |
| if (separateNavbar) { | |
| $(app.navbar.getElByPage(masterPageEl)).addClass('navbar-master-stacked'); | |
| } | |
| continue; // eslint-disable-line | |
| } | |
| var oldNavbarInnerEl = app.navbar.getElByPage($pagesInView.eq(i$2)); | |
| if (router.params.stackPages) { | |
| $pagesInView.eq(i$2).addClass('stacked'); | |
| $pagesInView.eq(i$2).trigger('page:stack'); | |
| if (separateNavbar) { | |
| $(oldNavbarInnerEl).addClass('stacked'); | |
| } | |
| } else { | |
| // Page remove event | |
| router.pageCallback('beforeRemove', $pagesInView[i$2], $navbarsInView && $navbarsInView[i$2], 'previous', undefined, options); | |
| router.removePage($pagesInView[i$2]); | |
| if (separateNavbar && oldNavbarInnerEl) { | |
| router.removeNavbar(oldNavbarInnerEl); | |
| } | |
| } | |
| } | |
| } | |
| $oldPage = $viewEl | |
| .children('.page:not(.stacked)') | |
| .filter(function (index, page) { return page !== $newPage[0]; }); | |
| if (separateNavbar) { | |
| $oldNavbarInner = $navbarEl | |
| .children('.navbar-inner:not(.stacked)') | |
| .filter(function (index, navbarInner) { return navbarInner !== $newNavbarInner[0]; }); | |
| } | |
| } | |
| if (dynamicNavbar && !separateNavbar) { | |
| $oldNavbarInner = $oldPage.children('.navbar').children('.navbar-inner'); | |
| } | |
| if (isDetail && !options.reloadAll) { | |
| if ($oldPage.length > 1 || reloadDetail) { | |
| $oldPage = $oldPage.filter(function (pageIndex, pageEl) { return !pageEl.classList.contains('page-master'); }); | |
| } | |
| if ($oldNavbarInner && ($oldNavbarInner.length > 1 || reloadDetail)) { | |
| $oldNavbarInner = $oldNavbarInner.filter(function (navbarIndex, navbarEl) { return !navbarEl.classList.contains('navbar-master'); }); | |
| } | |
| } | |
| // Push State | |
| if (router.params.pushState && (options.pushState || options.replaceState) && !options.reloadPrevious) { | |
| var pushStateRoot = router.params.pushStateRoot || ''; | |
| History[options.reloadCurrent || (reloadDetail && otherDetailPageEl) || options.reloadAll || options.replaceState ? 'replace' : 'push']( | |
| view.id, | |
| { | |
| url: options.route.url, | |
| }, | |
| pushStateRoot + router.params.pushStateSeparator + options.route.url | |
| ); | |
| } | |
| if (!options.reloadPrevious) { | |
| // Current Page & Navbar | |
| router.currentPageEl = $newPage[0]; | |
| if (dynamicNavbar && $newNavbarInner.length) { | |
| router.currentNavbarEl = $newNavbarInner[0]; | |
| } else { | |
| delete router.currentNavbarEl; | |
| } | |
| // Current Route | |
| router.currentRoute = options.route; | |
| } | |
| // Update router history | |
| var url = options.route.url; | |
| if (options.history) { | |
| if (((options.reloadCurrent || (reloadDetail && otherDetailPageEl)) && router.history.length) > 0 || options.replaceState) { | |
| router.history[router.history.length - (options.reloadPrevious ? 2 : 1)] = url; | |
| } else if (options.reloadPrevious) { | |
| router.history[router.history.length - 2] = url; | |
| } else if (options.reloadAll) { | |
| router.history = [url]; | |
| } else { | |
| router.history.push(url); | |
| } | |
| } | |
| router.saveHistory(); | |
| // Insert new page and navbar | |
| var newPageInDom = $newPage.parents(doc).length > 0; | |
| var f7Component = $newPage[0].f7Component; | |
| if (options.reloadPrevious) { | |
| if (f7Component && !newPageInDom) { | |
| f7Component.$mount(function (componentEl) { | |
| $(componentEl).insertBefore($oldPage); | |
| }); | |
| } else { | |
| $newPage.insertBefore($oldPage); | |
| } | |
| if (separateNavbar && $newNavbarInner.length) { | |
| if ($newNavbarInner.children('.title-large').length) { | |
| $newNavbarInner.addClass('navbar-inner-large'); | |
| } | |
| if ($oldNavbarInner.length) { | |
| $newNavbarInner.insertBefore($oldNavbarInner); | |
| } else { | |
| if (!router.$navbarEl.parents(doc).length) { | |
| router.$el.prepend(router.$navbarEl); | |
| } | |
| $navbarEl.append($newNavbarInner); | |
| } | |
| } | |
| } else { | |
| if ($oldPage.next('.page')[0] !== $newPage[0]) { | |
| if (f7Component && !newPageInDom) { | |
| f7Component.$mount(function (componentEl) { | |
| $viewEl.append(componentEl); | |
| }); | |
| } else { | |
| $viewEl.append($newPage[0]); | |
| } | |
| } | |
| if (separateNavbar && $newNavbarInner.length) { | |
| if ($newNavbarInner.children('.title-large').length) { | |
| $newNavbarInner.addClass('navbar-inner-large'); | |
| } | |
| if (!router.$navbarEl.parents(doc).length) { | |
| router.$el.prepend(router.$navbarEl); | |
| } | |
| $navbarEl.append($newNavbarInner[0]); | |
| } | |
| } | |
| if (!newPageInDom) { | |
| router.pageCallback('mounted', $newPage, $newNavbarInner, newPagePosition, reload ? newPagePosition : 'current', options, $oldPage); | |
| } else if (options.route && options.route.route && options.route.route.keepAlive && !$newPage[0].f7PageMounted) { | |
| $newPage[0].f7PageMounted = true; | |
| router.pageCallback('mounted', $newPage, $newNavbarInner, newPagePosition, reload ? newPagePosition : 'current', options, $oldPage); | |
| } | |
| // Remove old page | |
| if ((options.reloadCurrent || reloadDetail) && $oldPage.length > 0) { | |
| if (router.params.stackPages && router.initialPages.indexOf($oldPage[0]) >= 0) { | |
| $oldPage.addClass('stacked'); | |
| $oldPage.trigger('page:stack'); | |
| if (separateNavbar) { | |
| $oldNavbarInner.addClass('stacked'); | |
| } | |
| } else { | |
| // Page remove event | |
| router.pageCallback('beforeRemove', $oldPage, $oldNavbarInner, 'previous', undefined, options); | |
| router.removePage($oldPage); | |
| if (separateNavbar && $oldNavbarInner && $oldNavbarInner.length) { | |
| router.removeNavbar($oldNavbarInner); | |
| } | |
| } | |
| } else if (options.reloadAll) { | |
| $oldPage.each(function (index, pageEl) { | |
| var $oldPageEl = $(pageEl); | |
| var $oldNavbarInnerEl = $(app.navbar.getElByPage($oldPageEl)); | |
| if (router.params.stackPages && router.initialPages.indexOf($oldPageEl[0]) >= 0) { | |
| $oldPageEl.addClass('stacked'); | |
| $oldPageEl.trigger('page:stack'); | |
| if (separateNavbar) { | |
| $oldNavbarInnerEl.addClass('stacked'); | |
| } | |
| } else { | |
| // Page remove event | |
| router.pageCallback('beforeRemove', $oldPageEl, $oldNavbarInner && $oldNavbarInner.eq(index), 'previous', undefined, options); | |
| router.removePage($oldPageEl); | |
| if (separateNavbar && $oldNavbarInnerEl.length) { | |
| router.removeNavbar($oldNavbarInnerEl); | |
| } | |
| } | |
| }); | |
| } else if (options.reloadPrevious) { | |
| if (router.params.stackPages && router.initialPages.indexOf($oldPage[0]) >= 0) { | |
| $oldPage.addClass('stacked'); | |
| $oldPage.trigger('page:stack'); | |
| if (separateNavbar) { | |
| $oldNavbarInner.addClass('stacked'); | |
| } | |
| } else { | |
| // Page remove event | |
| router.pageCallback('beforeRemove', $oldPage, $oldNavbarInner, 'previous', undefined, options); | |
| router.removePage($oldPage); | |
| if (separateNavbar && $oldNavbarInner && $oldNavbarInner.length) { | |
| router.removeNavbar($oldNavbarInner); | |
| } | |
| } | |
| } | |
| // Load Tab | |
| if (options.route.route.tab) { | |
| router.tabLoad(options.route.route.tab, Utils.extend({}, options, { | |
| history: false, | |
| pushState: false, | |
| })); | |
| } | |
| // Page init and before init events | |
| router.pageCallback('init', $newPage, $newNavbarInner, newPagePosition, reload ? newPagePosition : 'current', options, $oldPage); | |
| if (options.reloadCurrent || options.reloadAll || reloadDetail) { | |
| router.allowPageChange = true; | |
| router.pageCallback('beforeIn', $newPage, $newNavbarInner, newPagePosition, 'current', options); | |
| router.pageCallback('afterIn', $newPage, $newNavbarInner, newPagePosition, 'current', options); | |
| if (options.reloadCurrent && options.clearPreviousHistory) { router.clearPreviousHistory(); } | |
| if (reloadDetail) { | |
| masterPageEl.classList.add('page-previous'); | |
| masterPageEl.classList.remove('page-current'); | |
| $(masterPageEl).trigger('page:position', { position: 'previous' }); | |
| if (masterPageEl.f7Page && masterPageEl.f7Page.navbarEl) { | |
| masterPageEl.f7Page.navbarEl.classList.add('navbar-previous'); | |
| masterPageEl.f7Page.navbarEl.classList.remove('navbar-current'); | |
| } | |
| } | |
| return router; | |
| } | |
| if (options.reloadPrevious) { | |
| router.allowPageChange = true; | |
| return router; | |
| } | |
| // Before animation event | |
| router.pageCallback('beforeIn', $newPage, $newNavbarInner, 'next', 'current', options); | |
| router.pageCallback('beforeOut', $oldPage, $oldNavbarInner, 'current', 'previous', options); | |
| // Animation | |
| function afterAnimation() { | |
| var pageClasses = 'page-previous page-current page-next'; | |
| var navbarClasses = 'navbar-previous navbar-current navbar-next'; | |
| $newPage.removeClass(pageClasses).addClass('page-current').removeAttr('aria-hidden').trigger('page:position', { position: 'current' }); | |
| $oldPage.removeClass(pageClasses).addClass('page-previous').trigger('page:position', { position: 'previous' }); | |
| if (!$oldPage.hasClass('page-master')) { | |
| $oldPage.attr('aria-hidden', 'true'); | |
| } | |
| if (dynamicNavbar) { | |
| $newNavbarInner.removeClass(navbarClasses).addClass('navbar-current').removeAttr('aria-hidden'); | |
| $oldNavbarInner.removeClass(navbarClasses).addClass('navbar-previous'); | |
| if (!$oldNavbarInner.hasClass('navbar-master')) { | |
| $oldNavbarInner.attr('aria-hidden', 'true'); | |
| } | |
| } | |
| // After animation event | |
| router.allowPageChange = true; | |
| router.pageCallback('afterIn', $newPage, $newNavbarInner, 'next', 'current', options); | |
| router.pageCallback('afterOut', $oldPage, $oldNavbarInner, 'current', 'previous', options); | |
| var keepOldPage = (router.params.preloadPreviousPage || (app.theme === 'ios' ? router.params.iosSwipeBack : router.params.mdSwipeBack)) && !isMaster; | |
| if (!keepOldPage) { | |
| if ($newPage.hasClass('smart-select-page') || $newPage.hasClass('photo-browser-page') || $newPage.hasClass('autocomplete-page')) { | |
| keepOldPage = true; | |
| } | |
| } | |
| if (!keepOldPage) { | |
| if (router.params.stackPages) { | |
| $oldPage.addClass('stacked'); | |
| $oldPage.trigger('page:stack'); | |
| if (separateNavbar) { | |
| $oldNavbarInner.addClass('stacked'); | |
| } | |
| } else if (!($newPage.attr('data-name') && $newPage.attr('data-name') === 'smart-select-page')) { | |
| // Remove event | |
| router.pageCallback('beforeRemove', $oldPage, $oldNavbarInner, 'previous', undefined, options); | |
| router.removePage($oldPage); | |
| if (separateNavbar && $oldNavbarInner.length) { | |
| router.removeNavbar($oldNavbarInner); | |
| } | |
| } | |
| } | |
| if (options.clearPreviousHistory) { router.clearPreviousHistory(); } | |
| router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| if (router.params.pushState) { | |
| History.clearRouterQueue(); | |
| } | |
| } | |
| function setPositionClasses() { | |
| var pageClasses = 'page-previous page-current page-next'; | |
| var navbarClasses = 'navbar-previous navbar-current navbar-next'; | |
| $oldPage.removeClass(pageClasses).addClass('page-current').removeAttr('aria-hidden').trigger('page:position', { position: 'current' }); | |
| $newPage.removeClass(pageClasses).addClass('page-next').removeAttr('aria-hidden').trigger('page:position', { position: 'next' }); | |
| if (dynamicNavbar) { | |
| $oldNavbarInner.removeClass(navbarClasses).addClass('navbar-current').removeAttr('aria-hidden'); | |
| $newNavbarInner.removeClass(navbarClasses).addClass('navbar-next').removeAttr('aria-hidden'); | |
| } | |
| } | |
| if (options.animate && !(isMaster && app.width >= router.params.masterDetailBreakpoint)) { | |
| var delay = router.app.theme === 'md' ? router.params.mdPageLoadDelay : router.params.iosPageLoadDelay; | |
| if (delay) { | |
| setTimeout(function () { | |
| setPositionClasses(); | |
| router.animate($oldPage, $newPage, $oldNavbarInner, $newNavbarInner, 'forward', function () { | |
| afterAnimation(); | |
| }); | |
| }, delay); | |
| } else { | |
| setPositionClasses(); | |
| router.animate($oldPage, $newPage, $oldNavbarInner, $newNavbarInner, 'forward', function () { | |
| afterAnimation(); | |
| }); | |
| } | |
| } else { | |
| afterAnimation(); | |
| } | |
| return router; | |
| } | |
| function load(loadParams, loadOptions, ignorePageChange) { | |
| if ( loadParams === void 0 ) loadParams = {}; | |
| if ( loadOptions === void 0 ) loadOptions = {}; | |
| var router = this; | |
| if (!router.allowPageChange && !ignorePageChange) { return router; } | |
| var params = loadParams; | |
| var options = loadOptions; | |
| var url = params.url; | |
| var content = params.content; | |
| var el = params.el; | |
| var pageName = params.pageName; | |
| var template = params.template; | |
| var templateUrl = params.templateUrl; | |
| var component = params.component; | |
| var componentUrl = params.componentUrl; | |
| if (!options.reloadCurrent | |
| && options.route | |
| && options.route.route | |
| && options.route.route.parentPath | |
| && router.currentRoute.route | |
| && router.currentRoute.route.parentPath === options.route.route.parentPath) { | |
| // Do something nested | |
| if (options.route.url === router.url) { | |
| router.allowPageChange = true; | |
| return false; | |
| } | |
| // Check for same params | |
| var sameParams = Object.keys(options.route.params).length === Object.keys(router.currentRoute.params).length; | |
| if (sameParams) { | |
| // Check for equal params name | |
| Object.keys(options.route.params).forEach(function (paramName) { | |
| if ( | |
| !(paramName in router.currentRoute.params) | |
| || (router.currentRoute.params[paramName] !== options.route.params[paramName]) | |
| ) { | |
| sameParams = false; | |
| } | |
| }); | |
| } | |
| if (sameParams) { | |
| if (options.route.route.tab) { | |
| return router.tabLoad(options.route.route.tab, options); | |
| } | |
| return false; | |
| } | |
| } | |
| if ( | |
| options.route | |
| && options.route.url | |
| && router.url === options.route.url | |
| && !(options.reloadCurrent || options.reloadPrevious) | |
| && !router.params.allowDuplicateUrls | |
| ) { | |
| router.allowPageChange = true; | |
| return false; | |
| } | |
| if (!options.route && url) { | |
| options.route = router.parseRouteUrl(url); | |
| Utils.extend(options.route, { route: { url: url, path: url } }); | |
| } | |
| // Component Callbacks | |
| function resolve(pageEl, newOptions) { | |
| return router.forward(pageEl, Utils.extend(options, newOptions)); | |
| } | |
| function reject() { | |
| router.allowPageChange = true; | |
| return router; | |
| } | |
| if (url || templateUrl || componentUrl) { | |
| router.allowPageChange = false; | |
| } | |
| // Proceed | |
| if (content) { | |
| router.forward(router.getPageEl(content), options); | |
| } else if (template || templateUrl) { | |
| // Parse template and send page element | |
| try { | |
| router.pageTemplateLoader(template, templateUrl, options, resolve, reject); | |
| } catch (err) { | |
| router.allowPageChange = true; | |
| throw err; | |
| } | |
| } else if (el) { | |
| // Load page from specified HTMLElement or by page name in pages container | |
| router.forward(router.getPageEl(el), options); | |
| } else if (pageName) { | |
| // Load page by page name in pages container | |
| router.forward(router.$el.children((".page[data-name=\"" + pageName + "\"]")).eq(0), options); | |
| } else if (component || componentUrl) { | |
| // Load from component (F7/Vue/React/...) | |
| try { | |
| router.pageComponentLoader(router.el, component, componentUrl, options, resolve, reject); | |
| } catch (err) { | |
| router.allowPageChange = true; | |
| throw err; | |
| } | |
| } else if (url) { | |
| // Load using XHR | |
| if (router.xhr) { | |
| router.xhr.abort(); | |
| router.xhr = false; | |
| } | |
| router.xhrRequest(url, options) | |
| .then(function (pageContent) { | |
| router.forward(router.getPageEl(pageContent), options); | |
| }) | |
| .catch(function () { | |
| router.allowPageChange = true; | |
| }); | |
| } | |
| return router; | |
| } | |
| function navigate(navigateParams, navigateOptions) { | |
| if ( navigateOptions === void 0 ) navigateOptions = {}; | |
| var router = this; | |
| if (router.swipeBackActive) { return router; } | |
| var url; | |
| var createRoute; | |
| var name; | |
| var query; | |
| var params; | |
| var route; | |
| if (typeof navigateParams === 'string') { | |
| url = navigateParams; | |
| } else { | |
| url = navigateParams.url; | |
| createRoute = navigateParams.route; | |
| name = navigateParams.name; | |
| query = navigateParams.query; | |
| params = navigateParams.params; | |
| } | |
| if (name) { | |
| // find route by name | |
| route = router.findRouteByKey('name', name); | |
| if (!route) { | |
| throw new Error(("Framework7: route with name \"" + name + "\" not found")); | |
| } | |
| url = router.constructRouteUrl(route, { params: params, query: query }); | |
| if (url) { | |
| return router.navigate(url, navigateOptions); | |
| } | |
| throw new Error(("Framework7: can't construct URL for route with name \"" + name + "\"")); | |
| } | |
| var app = router.app; | |
| appRouterCheck(router, 'navigate'); | |
| if (url === '#' || url === '') { | |
| return router; | |
| } | |
| var navigateUrl = url.replace('./', ''); | |
| if (navigateUrl[0] !== '/' && navigateUrl.indexOf('#') !== 0) { | |
| var currentPath = router.currentRoute.parentPath || router.currentRoute.path; | |
| navigateUrl = ((currentPath ? (currentPath + "/") : '/') + navigateUrl) | |
| .replace('///', '/') | |
| .replace('//', '/'); | |
| } | |
| if (createRoute) { | |
| route = Utils.extend(router.parseRouteUrl(navigateUrl), { | |
| route: Utils.extend({}, createRoute), | |
| }); | |
| } else { | |
| route = router.findMatchingRoute(navigateUrl); | |
| } | |
| if (!route) { | |
| return router; | |
| } | |
| if (route.route.redirect) { | |
| return redirect.call(router, 'navigate', route, navigateOptions); | |
| } | |
| var options = {}; | |
| if (route.route.options) { | |
| Utils.extend(options, route.route.options, navigateOptions); | |
| } else { | |
| Utils.extend(options, navigateOptions); | |
| } | |
| options.route = route; | |
| if (options && options.context) { | |
| route.context = options.context; | |
| options.route.context = options.context; | |
| } | |
| function resolve() { | |
| var routerLoaded = false; | |
| ('popup popover sheet loginScreen actions customModal panel').split(' ').forEach(function (modalLoadProp) { | |
| if (route.route[modalLoadProp] && !routerLoaded) { | |
| routerLoaded = true; | |
| router.modalLoad(modalLoadProp, route, options); | |
| } | |
| }); | |
| if (route.route.keepAlive && route.route.keepAliveData) { | |
| router.load({ el: route.route.keepAliveData.pageEl }, options, false); | |
| routerLoaded = true; | |
| } | |
| ('url content component pageName el componentUrl template templateUrl').split(' ').forEach(function (pageLoadProp) { | |
| var obj; | |
| if (route.route[pageLoadProp] && !routerLoaded) { | |
| routerLoaded = true; | |
| router.load(( obj = {}, obj[pageLoadProp] = route.route[pageLoadProp], obj ), options, false); | |
| } | |
| }); | |
| if (routerLoaded) { return; } | |
| // Async | |
| function asyncResolve(resolveParams, resolveOptions) { | |
| router.allowPageChange = false; | |
| var resolvedAsModal = false; | |
| if (resolveOptions && resolveOptions.context) { | |
| if (!route.context) { route.context = resolveOptions.context; } | |
| else { route.context = Utils.extend({}, route.context, resolveOptions.context); } | |
| options.route.context = route.context; | |
| } | |
| ('popup popover sheet loginScreen actions customModal panel').split(' ').forEach(function (modalLoadProp) { | |
| if (resolveParams[modalLoadProp]) { | |
| resolvedAsModal = true; | |
| var modalRoute = Utils.extend({}, route, { route: resolveParams }); | |
| router.allowPageChange = true; | |
| router.modalLoad(modalLoadProp, modalRoute, Utils.extend(options, resolveOptions)); | |
| } | |
| }); | |
| if (resolvedAsModal) { return; } | |
| router.load(resolveParams, Utils.extend(options, resolveOptions), true); | |
| } | |
| function asyncReject() { | |
| router.allowPageChange = true; | |
| } | |
| if (route.route.async) { | |
| router.allowPageChange = false; | |
| route.route.async.call(router, options.route, router.currentRoute, asyncResolve, asyncReject); | |
| } | |
| } | |
| function reject() { | |
| router.allowPageChange = true; | |
| } | |
| if (router.params.masterDetailBreakpoint > 0 && route.route.masterRoute) { | |
| // load detail route | |
| var preloadMaster = true; | |
| if (router.currentRoute && router.currentRoute.route) { | |
| if (router.currentRoute.route.master && (router.currentRoute.route === route.route.masterRoute || router.currentRoute.route.path === route.route.masterRoute.path)) { | |
| preloadMaster = false; | |
| } | |
| if (router.currentRoute.route.masterRoute && ((router.currentRoute.route.masterRoute === route.route.masterRoute) || (router.currentRoute.route.masterRoute.path === route.route.masterRoute.path))) { | |
| preloadMaster = false; | |
| } | |
| } | |
| if (preloadMaster) { | |
| router.navigate(route.route.masterRoute.path, { | |
| animate: false, | |
| reloadAll: navigateOptions.reloadAll, | |
| reloadCurrent: navigateOptions.reloadCurrent, | |
| reloadPrevious: navigateOptions.reloadPrevious, | |
| once: { | |
| pageAfterIn: function pageAfterIn() { | |
| router.navigate(navigateParams, Utils.extend({}, navigateOptions, { | |
| animate: false, | |
| reloadAll: false, | |
| reloadCurrent: false, | |
| reloadPrevious: false, | |
| })); | |
| }, | |
| }, | |
| }); | |
| return router; | |
| } | |
| } | |
| processRouteQueue.call( | |
| router, | |
| route, | |
| router.currentRoute, | |
| function () { | |
| if (route.route.modules) { | |
| app | |
| .loadModules(Array.isArray(route.route.modules) ? route.route.modules : [route.route.modules]) | |
| .then(function () { | |
| resolve(); | |
| }) | |
| .catch(function () { | |
| reject(); | |
| }); | |
| } else { | |
| resolve(); | |
| } | |
| }, | |
| function () { | |
| reject(); | |
| } | |
| ); | |
| // Return Router | |
| return router; | |
| } | |
| function tabLoad(tabRoute, loadOptions) { | |
| if ( loadOptions === void 0 ) loadOptions = {}; | |
| var router = this; | |
| var options = Utils.extend({ | |
| animate: router.params.animate, | |
| pushState: true, | |
| history: true, | |
| parentPageEl: null, | |
| preload: false, | |
| on: {}, | |
| }, loadOptions); | |
| var currentRoute; | |
| var previousRoute; | |
| if (options.route) { | |
| // Set Route | |
| if (!options.preload && options.route !== router.currentRoute) { | |
| previousRoute = router.previousRoute; | |
| router.currentRoute = options.route; | |
| } | |
| if (options.preload) { | |
| currentRoute = options.route; | |
| previousRoute = router.currentRoute; | |
| } else { | |
| currentRoute = router.currentRoute; | |
| if (!previousRoute) { previousRoute = router.previousRoute; } | |
| } | |
| // Update Browser History | |
| if (router.params.pushState && options.pushState && !options.reloadPrevious) { | |
| History.replace( | |
| router.view.id, | |
| { | |
| url: options.route.url, | |
| }, | |
| (router.params.pushStateRoot || '') + router.params.pushStateSeparator + options.route.url | |
| ); | |
| } | |
| // Update Router History | |
| if (options.history) { | |
| router.history[Math.max(router.history.length - 1, 0)] = options.route.url; | |
| router.saveHistory(); | |
| } | |
| } | |
| // Show Tab | |
| var $parentPageEl = $(options.parentPageEl || router.currentPageEl); | |
| var tabEl; | |
| if ($parentPageEl.length && $parentPageEl.find(("#" + (tabRoute.id))).length) { | |
| tabEl = $parentPageEl.find(("#" + (tabRoute.id))).eq(0); | |
| } else if (router.view.selector) { | |
| tabEl = (router.view.selector) + " #" + (tabRoute.id); | |
| } else { | |
| tabEl = "#" + (tabRoute.id); | |
| } | |
| var tabShowResult = router.app.tab.show({ | |
| tabEl: tabEl, | |
| animate: options.animate, | |
| tabRoute: options.route, | |
| }); | |
| var $newTabEl = tabShowResult.$newTabEl; | |
| var $oldTabEl = tabShowResult.$oldTabEl; | |
| var animated = tabShowResult.animated; | |
| var onTabsChanged = tabShowResult.onTabsChanged; | |
| if ($newTabEl && $newTabEl.parents('.page').length > 0 && options.route) { | |
| var tabParentPageData = $newTabEl.parents('.page')[0].f7Page; | |
| if (tabParentPageData && options.route) { | |
| tabParentPageData.route = options.route; | |
| } | |
| } | |
| // Tab Content Loaded | |
| function onTabLoaded(contentEl) { | |
| // Remove theme elements | |
| router.removeThemeElements($newTabEl); | |
| var tabEventTarget = $newTabEl; | |
| if (typeof contentEl !== 'string') { tabEventTarget = $(contentEl); } | |
| tabEventTarget.trigger('tab:init tab:mounted', tabRoute); | |
| router.emit('tabInit tabMounted', $newTabEl[0], tabRoute); | |
| if ($oldTabEl && $oldTabEl.length) { | |
| if (animated) { | |
| onTabsChanged(function () { | |
| router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| if (router.params.unloadTabContent) { | |
| router.tabRemove($oldTabEl, $newTabEl, tabRoute); | |
| } | |
| }); | |
| } else { | |
| router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| if (router.params.unloadTabContent) { | |
| router.tabRemove($oldTabEl, $newTabEl, tabRoute); | |
| } | |
| } | |
| } | |
| } | |
| if ($newTabEl[0].f7RouterTabLoaded) { | |
| if (!$oldTabEl || !$oldTabEl.length) { return router; } | |
| if (animated) { | |
| onTabsChanged(function () { | |
| router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| }); | |
| } else { | |
| router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| } | |
| return router; | |
| } | |
| // Load Tab Content | |
| function loadTab(loadTabParams, loadTabOptions) { | |
| // Load Tab Props | |
| var url = loadTabParams.url; | |
| var content = loadTabParams.content; | |
| var el = loadTabParams.el; | |
| var template = loadTabParams.template; | |
| var templateUrl = loadTabParams.templateUrl; | |
| var component = loadTabParams.component; | |
| var componentUrl = loadTabParams.componentUrl; | |
| // Component/Template Callbacks | |
| function resolve(contentEl) { | |
| router.allowPageChange = true; | |
| if (!contentEl) { return; } | |
| if (typeof contentEl === 'string') { | |
| $newTabEl.html(contentEl); | |
| } else { | |
| $newTabEl.html(''); | |
| if (contentEl.f7Component) { | |
| contentEl.f7Component.$mount(function (componentEl) { | |
| $newTabEl.append(componentEl); | |
| }); | |
| } else { | |
| $newTabEl.append(contentEl); | |
| } | |
| } | |
| $newTabEl[0].f7RouterTabLoaded = true; | |
| onTabLoaded(contentEl); | |
| } | |
| function reject() { | |
| router.allowPageChange = true; | |
| return router; | |
| } | |
| if (content) { | |
| resolve(content); | |
| } else if (template || templateUrl) { | |
| try { | |
| router.tabTemplateLoader(template, templateUrl, loadTabOptions, resolve, reject); | |
| } catch (err) { | |
| router.allowPageChange = true; | |
| throw err; | |
| } | |
| } else if (el) { | |
| resolve(el); | |
| } else if (component || componentUrl) { | |
| // Load from component (F7/Vue/React/...) | |
| try { | |
| router.tabComponentLoader($newTabEl[0], component, componentUrl, loadTabOptions, resolve, reject); | |
| } catch (err) { | |
| router.allowPageChange = true; | |
| throw err; | |
| } | |
| } else if (url) { | |
| // Load using XHR | |
| if (router.xhr) { | |
| router.xhr.abort(); | |
| router.xhr = false; | |
| } | |
| router.xhrRequest(url, loadTabOptions) | |
| .then(function (tabContent) { | |
| resolve(tabContent); | |
| }) | |
| .catch(function () { | |
| router.allowPageChange = true; | |
| }); | |
| } | |
| } | |
| var hasContentLoadProp; | |
| ('url content component el componentUrl template templateUrl').split(' ').forEach(function (tabLoadProp) { | |
| var obj; | |
| if (tabRoute[tabLoadProp]) { | |
| hasContentLoadProp = true; | |
| loadTab(( obj = {}, obj[tabLoadProp] = tabRoute[tabLoadProp], obj ), options); | |
| } | |
| }); | |
| // Async | |
| function asyncResolve(resolveParams, resolveOptions) { | |
| loadTab(resolveParams, Utils.extend(options, resolveOptions)); | |
| } | |
| function asyncReject() { | |
| router.allowPageChange = true; | |
| } | |
| if (tabRoute.async) { | |
| tabRoute.async.call(router, currentRoute, previousRoute, asyncResolve, asyncReject); | |
| } else if (!hasContentLoadProp) { | |
| router.allowPageChange = true; | |
| } | |
| return router; | |
| } | |
| function tabRemove($oldTabEl, $newTabEl, tabRoute) { | |
| var router = this; | |
| var hasTabComponentChild; | |
| if ($oldTabEl[0]) { | |
| $oldTabEl[0].f7RouterTabLoaded = false; | |
| delete $oldTabEl[0].f7RouterTabLoaded; | |
| } | |
| $oldTabEl.children().each(function (index, tabChild) { | |
| if (tabChild.f7Component) { | |
| hasTabComponentChild = true; | |
| $(tabChild).trigger('tab:beforeremove', tabRoute); | |
| tabChild.f7Component.$destroy(); | |
| } | |
| }); | |
| if (!hasTabComponentChild) { | |
| $oldTabEl.trigger('tab:beforeremove', tabRoute); | |
| } | |
| router.emit('tabBeforeRemove', $oldTabEl[0], $newTabEl[0], tabRoute); | |
| router.removeTabContent($oldTabEl[0], tabRoute); | |
| } | |
| function modalLoad(modalType, route, loadOptions) { | |
| if ( loadOptions === void 0 ) loadOptions = {}; | |
| var router = this; | |
| var app = router.app; | |
| var isPanel = modalType === 'panel'; | |
| var modalOrPanel = isPanel ? 'panel' : 'modal'; | |
| var options = Utils.extend({ | |
| animate: router.params.animate, | |
| pushState: true, | |
| history: true, | |
| on: {}, | |
| }, loadOptions); | |
| var modalParams = Utils.extend({}, route.route[modalType]); | |
| var modalRoute = route.route; | |
| function onModalLoaded() { | |
| // Create Modal | |
| var modal = app[modalType].create(modalParams); | |
| modalRoute.modalInstance = modal; | |
| var hasEl = modal.el; | |
| function closeOnSwipeBack() { | |
| modal.close(); | |
| } | |
| modal.on((modalOrPanel + "Open"), function () { | |
| if (!hasEl) { | |
| // Remove theme elements | |
| router.removeThemeElements(modal.el); | |
| // Emit events | |
| modal.$el.trigger(((modalType.toLowerCase()) + ":init " + (modalType.toLowerCase()) + ":mounted"), route, modal); | |
| router.emit(((!isPanel ? 'modalInit' : '') + " " + modalType + "Init " + modalType + "Mounted"), modal.el, route, modal); | |
| } | |
| router.once('swipeBackMove', closeOnSwipeBack); | |
| }); | |
| modal.on((modalOrPanel + "Close"), function () { | |
| router.off('swipeBackMove', closeOnSwipeBack); | |
| if (!modal.closeByRouter) { | |
| router.back(); | |
| } | |
| }); | |
| modal.on((modalOrPanel + "Closed"), function () { | |
| modal.$el.trigger(((modalType.toLowerCase()) + ":beforeremove"), route, modal); | |
| modal.emit(("" + (!isPanel ? 'modalBeforeRemove ' : '') + modalType + "BeforeRemove"), modal.el, route, modal); | |
| var modalComponent = modal.el.f7Component; | |
| if (modalComponent) { | |
| modalComponent.$destroy(); | |
| } | |
| Utils.nextTick(function () { | |
| if (modalComponent || modalParams.component) { | |
| router.removeModal(modal.el); | |
| } | |
| modal.destroy(); | |
| delete modal.route; | |
| delete modalRoute.modalInstance; | |
| }); | |
| }); | |
| if (options.route) { | |
| // Update Browser History | |
| if (router.params.pushState && options.pushState) { | |
| History.push( | |
| router.view.id, | |
| { | |
| url: options.route.url, | |
| modal: modalType, | |
| }, | |
| (router.params.pushStateRoot || '') + router.params.pushStateSeparator + options.route.url | |
| ); | |
| } | |
| // Set Route | |
| if (options.route !== router.currentRoute) { | |
| modal.route = Utils.extend(options.route, { modal: modal }); | |
| router.currentRoute = modal.route; | |
| } | |
| // Update Router History | |
| if (options.history) { | |
| router.history.push(options.route.url); | |
| router.saveHistory(); | |
| } | |
| } | |
| if (hasEl) { | |
| // Remove theme elements | |
| router.removeThemeElements(modal.el); | |
| // Emit events | |
| modal.$el.trigger(((modalType.toLowerCase()) + ":init " + (modalType.toLowerCase()) + ":mounted"), route, modal); | |
| router.emit((modalOrPanel + "Init " + modalType + "Init " + modalType + "Mounted"), modal.el, route, modal); | |
| } | |
| // Open | |
| modal.open(); | |
| } | |
| // Load Modal Content | |
| function loadModal(loadModalParams, loadModalOptions) { | |
| // Load Modal Props | |
| var url = loadModalParams.url; | |
| var content = loadModalParams.content; | |
| var template = loadModalParams.template; | |
| var templateUrl = loadModalParams.templateUrl; | |
| var component = loadModalParams.component; | |
| var componentUrl = loadModalParams.componentUrl; | |
| // Component/Template Callbacks | |
| function resolve(contentEl) { | |
| if (contentEl) { | |
| if (typeof contentEl === 'string') { | |
| modalParams.content = contentEl; | |
| } else if (contentEl.f7Component) { | |
| contentEl.f7Component.$mount(function (componentEl) { | |
| modalParams.el = componentEl; | |
| app.root.append(componentEl); | |
| }); | |
| } else { | |
| modalParams.el = contentEl; | |
| } | |
| onModalLoaded(); | |
| } | |
| } | |
| function reject() { | |
| router.allowPageChange = true; | |
| return router; | |
| } | |
| if (content) { | |
| resolve(content); | |
| } else if (template || templateUrl) { | |
| try { | |
| router.modalTemplateLoader(template, templateUrl, loadModalOptions, resolve, reject); | |
| } catch (err) { | |
| router.allowPageChange = true; | |
| throw err; | |
| } | |
| } else if (component || componentUrl) { | |
| // Load from component (F7/Vue/React/...) | |
| try { | |
| router.modalComponentLoader(app.root[0], component, componentUrl, loadModalOptions, resolve, reject); | |
| } catch (err) { | |
| router.allowPageChange = true; | |
| throw err; | |
| } | |
| } else if (url) { | |
| // Load using XHR | |
| if (router.xhr) { | |
| router.xhr.abort(); | |
| router.xhr = false; | |
| } | |
| router.xhrRequest(url, loadModalOptions) | |
| .then(function (modalContent) { | |
| modalParams.content = modalContent; | |
| onModalLoaded(); | |
| }) | |
| .catch(function () { | |
| router.allowPageChange = true; | |
| }); | |
| } else { | |
| onModalLoaded(); | |
| } | |
| } | |
| var foundLoadProp; | |
| ('url content component el componentUrl template templateUrl').split(' ').forEach(function (modalLoadProp) { | |
| var obj; | |
| if (modalParams[modalLoadProp] && !foundLoadProp) { | |
| foundLoadProp = true; | |
| loadModal(( obj = {}, obj[modalLoadProp] = modalParams[modalLoadProp], obj ), options); | |
| } | |
| }); | |
| if (!foundLoadProp && modalType === 'actions') { | |
| onModalLoaded(); | |
| } | |
| // Async | |
| function asyncResolve(resolveParams, resolveOptions) { | |
| loadModal(resolveParams, Utils.extend(options, resolveOptions)); | |
| } | |
| function asyncReject() { | |
| router.allowPageChange = true; | |
| } | |
| if (modalParams.async) { | |
| modalParams.async.call(router, options.route, router.currentRoute, asyncResolve, asyncReject); | |
| } | |
| return router; | |
| } | |
| function modalRemove(modal) { | |
| Utils.extend(modal, { closeByRouter: true }); | |
| modal.close(); | |
| } | |
| function backward(el, backwardOptions) { | |
| var router = this; | |
| var $el = $(el); | |
| var app = router.app; | |
| var view = router.view; | |
| var options = Utils.extend({ | |
| animate: router.params.animate, | |
| pushState: true, | |
| }, backwardOptions); | |
| var masterDetailEnabled = router.params.masterDetailBreakpoint > 0; | |
| var isMaster = masterDetailEnabled && options.route && options.route.route && options.route.route.master === true; | |
| var masterPageEl; | |
| var dynamicNavbar = router.dynamicNavbar; | |
| var separateNavbar = router.separateNavbar; | |
| var $newPage = $el; | |
| var $oldPage = router.$el.children('.page-current'); | |
| var currentIsMaster = masterDetailEnabled && $oldPage.hasClass('page-master'); | |
| if ($newPage.length) { | |
| // Remove theme elements | |
| router.removeThemeElements($newPage); | |
| } | |
| var $navbarEl; | |
| var $newNavbarInner; | |
| var $oldNavbarInner; | |
| if (dynamicNavbar) { | |
| $newNavbarInner = $newPage.children('.navbar').children('.navbar-inner'); | |
| if (separateNavbar) { | |
| $navbarEl = router.$navbarEl; | |
| if ($newNavbarInner.length > 0) { | |
| $newPage.children('.navbar').remove(); | |
| } | |
| if ($newNavbarInner.length === 0 && $newPage[0] && $newPage[0].f7Page) { | |
| // Try from pageData | |
| $newNavbarInner = $newPage[0].f7Page.$navbarEl; | |
| } | |
| $oldNavbarInner = $navbarEl.find('.navbar-current'); | |
| } else { | |
| $oldNavbarInner = $oldPage.children('.navbar').children('.navbar-inner'); | |
| } | |
| } | |
| router.allowPageChange = false; | |
| if ($newPage.length === 0 || $oldPage.length === 0) { | |
| router.allowPageChange = true; | |
| return router; | |
| } | |
| // Remove theme elements | |
| router.removeThemeElements($newPage); | |
| // Save Keep Alive Cache | |
| if (options.route && options.route.route && options.route.route.keepAlive && !options.route.route.keepAliveData) { | |
| options.route.route.keepAliveData = { | |
| pageEl: $el[0], | |
| }; | |
| } | |
| // Pages In View | |
| var isDetail; | |
| if (masterDetailEnabled) { | |
| var $pagesInView = router.$el | |
| .children('.page:not(.stacked)') | |
| .filter(function (index, pageInView) { return pageInView !== $newPage[0]; }); | |
| // Find Detail' master page | |
| for (var i = 0; i < $pagesInView.length; i += 1) { | |
| if (!masterPageEl | |
| && $pagesInView[i].classList.contains('page-master') | |
| ) { | |
| masterPageEl = $pagesInView[i]; | |
| continue; // eslint-disable-line | |
| } | |
| } | |
| isDetail = !isMaster | |
| && masterPageEl | |
| && (router.history.indexOf(options.route.url) > router.history.indexOf(masterPageEl.f7Page.route.url)); | |
| } | |
| // New Page | |
| $newPage | |
| .addClass(("page-previous" + (isMaster ? ' page-master' : '') + (isDetail ? ' page-master-detail' : ''))) | |
| .removeClass('stacked') | |
| .removeAttr('aria-hidden') | |
| .trigger('page:unstack') | |
| .trigger('page:position', { position: 'previous' }); | |
| if (isMaster || isDetail) { | |
| $newPage.trigger('page:role', { role: isMaster ? 'master' : 'detail' }); | |
| } | |
| if (dynamicNavbar && $newNavbarInner.length > 0) { | |
| $newNavbarInner | |
| .addClass(("navbar-previous" + (isMaster ? ' navbar-master' : '') + (isDetail ? ' navbar-master-detail' : ''))) | |
| .removeClass('stacked') | |
| .removeAttr('aria-hidden'); | |
| } | |
| // Remove previous page in case of "forced" | |
| var backIndex; | |
| if (options.force) { | |
| if ($oldPage.prev('.page-previous:not(.stacked)').length > 0 || $oldPage.prev('.page-previous').length === 0) { | |
| if (router.history.indexOf(options.route.url) >= 0) { | |
| backIndex = router.history.length - router.history.indexOf(options.route.url) - 1; | |
| router.history = router.history.slice(0, router.history.indexOf(options.route.url) + 2); | |
| view.history = router.history; | |
| } else if (router.history[[router.history.length - 2]]) { | |
| router.history[router.history.length - 2] = options.route.url; | |
| } else { | |
| router.history.unshift(router.url); | |
| } | |
| if (backIndex && router.params.stackPages) { | |
| $oldPage.prevAll('.page-previous').each(function (index, pageToRemove) { | |
| var $pageToRemove = $(pageToRemove); | |
| var $navbarToRemove; | |
| if (separateNavbar) { | |
| // $navbarToRemove = $oldNavbarInner.prevAll('.navbar-previous').eq(index); | |
| $navbarToRemove = $(app.navbar.getElByPage($pageToRemove)); | |
| } | |
| if ($pageToRemove[0] !== $newPage[0] && $pageToRemove.index() > $newPage.index()) { | |
| if (router.initialPages.indexOf($pageToRemove[0]) >= 0) { | |
| $pageToRemove.addClass('stacked'); | |
| $pageToRemove.trigger('page:stack'); | |
| if (separateNavbar) { | |
| $navbarToRemove.addClass('stacked'); | |
| } | |
| } else { | |
| router.pageCallback('beforeRemove', $pageToRemove, $navbarToRemove, 'previous', undefined, options); | |
| router.removePage($pageToRemove); | |
| if (separateNavbar && $navbarToRemove.length > 0) { | |
| router.removeNavbar($navbarToRemove); | |
| } | |
| } | |
| } | |
| }); | |
| } else { | |
| var $pageToRemove = $oldPage.prev('.page-previous:not(.stacked)'); | |
| var $navbarToRemove; | |
| if (separateNavbar) { | |
| // $navbarToRemove = $oldNavbarInner.prev('.navbar-inner:not(.stacked)'); | |
| $navbarToRemove = $(app.navbar.getElByPage($pageToRemove)); | |
| } | |
| if (router.params.stackPages && router.initialPages.indexOf($pageToRemove[0]) >= 0) { | |
| $pageToRemove.addClass('stacked'); | |
| $pageToRemove.trigger('page:stack'); | |
| $navbarToRemove.addClass('stacked'); | |
| } else if ($pageToRemove.length > 0) { | |
| router.pageCallback('beforeRemove', $pageToRemove, $navbarToRemove, 'previous', undefined, options); | |
| router.removePage($pageToRemove); | |
| if (separateNavbar && $navbarToRemove.length) { | |
| router.removeNavbar($navbarToRemove); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Insert new page | |
| var newPageInDom = $newPage.parents(doc).length > 0; | |
| var f7Component = $newPage[0].f7Component; | |
| function insertPage() { | |
| if ($newPage.next($oldPage).length === 0) { | |
| if (!newPageInDom && f7Component) { | |
| f7Component.$mount(function (componentEl) { | |
| $(componentEl).insertBefore($oldPage); | |
| }); | |
| } else { | |
| $newPage.insertBefore($oldPage); | |
| } | |
| } | |
| if (separateNavbar && $newNavbarInner.length) { | |
| if ($newNavbarInner.children('.title-large').length) { | |
| $newNavbarInner.addClass('navbar-inner-large'); | |
| } | |
| $newNavbarInner.insertBefore($oldNavbarInner); | |
| if ($oldNavbarInner.length > 0) { | |
| $newNavbarInner.insertBefore($oldNavbarInner); | |
| } else { | |
| if (!router.$navbarEl.parents(doc).length) { | |
| router.$el.prepend(router.$navbarEl); | |
| } | |
| $navbarEl.append($newNavbarInner); | |
| } | |
| } | |
| if (!newPageInDom) { | |
| router.pageCallback('mounted', $newPage, $newNavbarInner, 'previous', 'current', options, $oldPage); | |
| } else if (options.route && options.route.route && options.route.route.keepAlive && !$newPage[0].f7PageMounted) { | |
| $newPage[0].f7PageMounted = true; | |
| router.pageCallback('mounted', $newPage, $newNavbarInner, 'previous', 'current', options, $oldPage); | |
| } | |
| } | |
| if (options.preload) { | |
| // Insert Page | |
| insertPage(); | |
| // Tab route | |
| if (options.route.route.tab) { | |
| router.tabLoad(options.route.route.tab, Utils.extend({}, options, { | |
| history: false, | |
| pushState: false, | |
| preload: true, | |
| })); | |
| } | |
| if (isMaster) { | |
| $newPage | |
| .removeClass('page-master-stacked') | |
| .trigger('page:masterunstack'); | |
| if (separateNavbar) { | |
| $(app.navbar.getElByPage($newPage)).removeClass('navbar-master-stacked'); | |
| } | |
| } | |
| // Page init and before init events | |
| router.pageCallback('init', $newPage, $newNavbarInner, 'previous', 'current', options, $oldPage); | |
| var $previousPages = $newPage.prevAll('.page-previous:not(.stacked):not(.page-master)'); | |
| if ($previousPages.length > 0) { | |
| $previousPages.each(function (index, pageToRemove) { | |
| var $pageToRemove = $(pageToRemove); | |
| var $navbarToRemove; | |
| if (separateNavbar) { | |
| // $navbarToRemove = $newNavbarInner.prevAll('.navbar-previous:not(.stacked)').eq(index); | |
| $navbarToRemove = $(app.navbar.getElByPage($pageToRemove)); | |
| } | |
| if (router.params.stackPages && router.initialPages.indexOf(pageToRemove) >= 0) { | |
| $pageToRemove.addClass('stacked'); | |
| $pageToRemove.trigger('page:stack'); | |
| if (separateNavbar) { | |
| $navbarToRemove.addClass('stacked'); | |
| } | |
| } else { | |
| router.pageCallback('beforeRemove', $pageToRemove, $navbarToRemove, 'previous', undefined); | |
| router.removePage($pageToRemove); | |
| if (separateNavbar && $navbarToRemove.length) { | |
| router.removeNavbar($navbarToRemove); | |
| } | |
| } | |
| }); | |
| } | |
| router.allowPageChange = true; | |
| return router; | |
| } | |
| // History State | |
| if (!(Device.ie || Device.edge || (Device.firefox && !Device.ios))) { | |
| if (router.params.pushState && options.pushState) { | |
| if (backIndex) { History.go(-backIndex); } | |
| else { History.back(); } | |
| } | |
| } | |
| // Update History | |
| if (router.history.length === 1) { | |
| router.history.unshift(router.url); | |
| } | |
| router.history.pop(); | |
| router.saveHistory(); | |
| // Current Page & Navbar | |
| router.currentPageEl = $newPage[0]; | |
| if (dynamicNavbar && $newNavbarInner.length) { | |
| router.currentNavbarEl = $newNavbarInner[0]; | |
| } else { | |
| delete router.currentNavbarEl; | |
| } | |
| // Current Route | |
| router.currentRoute = options.route; | |
| // History State | |
| if (Device.ie || Device.edge || (Device.firefox && !Device.ios)) { | |
| if (router.params.pushState && options.pushState) { | |
| if (backIndex) { History.go(-backIndex); } | |
| else { History.back(); } | |
| } | |
| } | |
| // Insert Page | |
| insertPage(); | |
| // Load Tab | |
| if (options.route.route.tab) { | |
| router.tabLoad(options.route.route.tab, Utils.extend({}, options, { | |
| history: false, | |
| pushState: false, | |
| })); | |
| } | |
| // Page init and before init events | |
| router.pageCallback('init', $newPage, $newNavbarInner, 'previous', 'current', options, $oldPage); | |
| // Before animation callback | |
| router.pageCallback('beforeIn', $newPage, $newNavbarInner, 'previous', 'current', options); | |
| router.pageCallback('beforeOut', $oldPage, $oldNavbarInner, 'current', 'next', options); | |
| // Animation | |
| function afterAnimation() { | |
| // Set classes | |
| var pageClasses = 'page-previous page-current page-next'; | |
| var navbarClasses = 'navbar-previous navbar-current navbar-next'; | |
| $newPage.removeClass(pageClasses).addClass('page-current').removeAttr('aria-hidden').trigger('page:position', { position: 'current' }); | |
| $oldPage.removeClass(pageClasses).addClass('page-next').attr('aria-hidden', 'true').trigger('page:position', { position: 'next' }); | |
| if (dynamicNavbar) { | |
| $newNavbarInner.removeClass(navbarClasses).addClass('navbar-current').removeAttr('aria-hidden'); | |
| $oldNavbarInner.removeClass(navbarClasses).addClass('navbar-next').attr('aria-hidden', 'true'); | |
| } | |
| // After animation event | |
| router.pageCallback('afterIn', $newPage, $newNavbarInner, 'previous', 'current', options); | |
| router.pageCallback('afterOut', $oldPage, $oldNavbarInner, 'current', 'next', options); | |
| // Remove Old Page | |
| if (router.params.stackPages && router.initialPages.indexOf($oldPage[0]) >= 0) { | |
| $oldPage.addClass('stacked'); | |
| $oldPage.trigger('page:stack'); | |
| if (separateNavbar) { | |
| $oldNavbarInner.addClass('stacked'); | |
| } | |
| } else { | |
| router.pageCallback('beforeRemove', $oldPage, $oldNavbarInner, 'next', undefined, options); | |
| router.removePage($oldPage); | |
| if (separateNavbar && $oldNavbarInner.length) { | |
| router.removeNavbar($oldNavbarInner); | |
| } | |
| } | |
| router.allowPageChange = true; | |
| router.emit('routeChanged', router.currentRoute, router.previousRoute, router); | |
| // Preload previous page | |
| var preloadPreviousPage = router.params.preloadPreviousPage || (app.theme.ios ? router.params.iosSwipeBack : router.params.mdSwipeBack); | |
| if (preloadPreviousPage && router.history[router.history.length - 2] && !isMaster) { | |
| router.back(router.history[router.history.length - 2], { preload: true }); | |
| } | |
| if (router.params.pushState) { | |
| History.clearRouterQueue(); | |
| } | |
| } | |
| function setPositionClasses() { | |
| var pageClasses = 'page-previous page-current page-next'; | |
| var navbarClasses = 'navbar-previous navbar-current navbar-next'; | |
| $oldPage.removeClass(pageClasses).addClass('page-current').trigger('page:position', { position: 'current' }); | |
| $newPage.removeClass(pageClasses).addClass('page-previous').removeAttr('aria-hidden').trigger('page:position', { position: 'previous' }); | |
| if (dynamicNavbar) { | |
| $oldNavbarInner.removeClass(navbarClasses).addClass('navbar-current'); | |
| $newNavbarInner.removeClass(navbarClasses).addClass('navbar-previous').removeAttr('aria-hidden'); | |
| } | |
| } | |
| if (options.animate && !(currentIsMaster && app.width >= router.params.masterDetailBreakpoint)) { | |
| setPositionClasses(); | |
| router.animate($oldPage, $newPage, $oldNavbarInner, $newNavbarInner, 'backward', function () { | |
| afterAnimation(); | |
| }); | |
| } else { | |
| afterAnimation(); | |
| } | |
| return router; | |
| } | |
| function loadBack(backParams, backOptions, ignorePageChange) { | |
| var router = this; | |
| if (!router.allowPageChange && !ignorePageChange) { return router; } | |
| var params = backParams; | |
| var options = backOptions; | |
| var url = params.url; | |
| var content = params.content; | |
| var el = params.el; | |
| var pageName = params.pageName; | |
| var template = params.template; | |
| var templateUrl = params.templateUrl; | |
| var component = params.component; | |
| var componentUrl = params.componentUrl; | |
| if ( | |
| options.route.url | |
| && router.url === options.route.url | |
| && !(options.reloadCurrent || options.reloadPrevious) | |
| && !router.params.allowDuplicateUrls | |
| ) { | |
| return false; | |
| } | |
| if (!options.route && url) { | |
| options.route = router.parseRouteUrl(url); | |
| } | |
| // Component Callbacks | |
| function resolve(pageEl, newOptions) { | |
| return router.backward(pageEl, Utils.extend(options, newOptions)); | |
| } | |
| function reject() { | |
| router.allowPageChange = true; | |
| return router; | |
| } | |
| if (url || templateUrl || componentUrl) { | |
| router.allowPageChange = false; | |
| } | |
| // Proceed | |
| if (content) { | |
| router.backward(router.getPageEl(content), options); | |
| } else if (template || templateUrl) { | |
| // Parse template and send page element | |
| try { | |
| router.pageTemplateLoader(template, templateUrl, options, resolve, reject); | |
| } catch (err) { | |
| router.allowPageChange = true; | |
| throw err; | |
| } | |
| } else if (el) { | |
| // Load page from specified HTMLElement or by page name in pages container | |
| router.backward(router.getPageEl(el), options); | |
| } else if (pageName) { | |
| // Load page by page name in pages container | |
| router.backward(router.$el.children((".page[data-name=\"" + pageName + "\"]")).eq(0), options); | |
| } else if (component || componentUrl) { | |
| // Load from component (F7/Vue/React/...) | |
| try { | |
| router.pageComponentLoader(router.el, component, componentUrl, options, resolve, reject); | |
| } catch (err) { | |
| router.allowPageChange = true; | |
| throw err; | |
| } | |
| } else if (url) { | |
| // Load using XHR | |
| if (router.xhr) { | |
| router.xhr.abort(); | |
| router.xhr = false; | |
| } | |
| router.xhrRequest(url, options) | |
| .then(function (pageContent) { | |
| router.backward(router.getPageEl(pageContent), options); | |
| }) | |
| .catch(function () { | |
| router.allowPageChange = true; | |
| }); | |
| } | |
| return router; | |
| } | |
| function back() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var router = this; | |
| if (router.swipeBackActive) { return router; } | |
| var navigateUrl; | |
| var navigateOptions; | |
| var route; | |
| if (typeof args[0] === 'object') { | |
| navigateOptions = args[0] || {}; | |
| } else { | |
| navigateUrl = args[0]; | |
| navigateOptions = args[1] || {}; | |
| } | |
| var name = navigateOptions.name; | |
| var params = navigateOptions.params; | |
| var query = navigateOptions.query; | |
| if (name) { | |
| // find route by name | |
| route = router.findRouteByKey('name', name); | |
| if (!route) { | |
| throw new Error(("Framework7: route with name \"" + name + "\" not found")); | |
| } | |
| navigateUrl = router.constructRouteUrl(route, { params: params, query: query }); | |
| if (navigateUrl) { | |
| return router.back(navigateUrl, Utils.extend({}, navigateOptions, { | |
| name: null, | |
| params: null, | |
| query: null, | |
| })); | |
| } | |
| throw new Error(("Framework7: can't construct URL for route with name \"" + name + "\"")); | |
| } | |
| var app = router.app; | |
| appRouterCheck(router, 'back'); | |
| var currentRouteIsModal = router.currentRoute.modal; | |
| var modalType; | |
| if (!currentRouteIsModal) { | |
| ('popup popover sheet loginScreen actions customModal panel').split(' ').forEach(function (modalLoadProp) { | |
| if (router.currentRoute.route[modalLoadProp]) { | |
| currentRouteIsModal = true; | |
| modalType = modalLoadProp; | |
| } | |
| }); | |
| } | |
| if (currentRouteIsModal) { | |
| var modalToClose = router.currentRoute.modal | |
| || router.currentRoute.route.modalInstance | |
| || app[modalType].get(); | |
| var previousUrl = router.history[router.history.length - 2]; | |
| var previousRoute; | |
| // check if previous route is modal too | |
| if (modalToClose && modalToClose.$el) { | |
| var prevOpenedModals = modalToClose.$el.prevAll('.modal-in'); | |
| if (prevOpenedModals.length && prevOpenedModals[0].f7Modal) { | |
| previousRoute = prevOpenedModals[0].f7Modal.route; | |
| } | |
| } | |
| if (!previousRoute) { | |
| previousRoute = router.findMatchingRoute(previousUrl); | |
| } | |
| if (!previousRoute && previousUrl) { | |
| previousRoute = { | |
| url: previousUrl, | |
| path: previousUrl.split('?')[0], | |
| query: Utils.parseUrlQuery(previousUrl), | |
| route: { | |
| path: previousUrl.split('?')[0], | |
| url: previousUrl, | |
| }, | |
| }; | |
| } | |
| if (!navigateUrl || navigateUrl.replace(/[# ]/g, '').trim().length === 0) { | |
| if (!previousRoute || !modalToClose) { | |
| return router; | |
| } | |
| } | |
| var forceOtherUrl = navigateOptions.force && previousRoute && navigateUrl; | |
| if (previousRoute && modalToClose) { | |
| if (router.params.pushState && navigateOptions.pushState !== false) { | |
| History.back(); | |
| } | |
| router.currentRoute = previousRoute; | |
| router.history.pop(); | |
| router.saveHistory(); | |
| router.modalRemove(modalToClose); | |
| if (forceOtherUrl) { | |
| router.navigate(navigateUrl, { reloadCurrent: true }); | |
| } | |
| } else if (modalToClose) { | |
| router.modalRemove(modalToClose); | |
| if (navigateUrl) { | |
| router.navigate(navigateUrl, { reloadCurrent: true }); | |
| } | |
| } | |
| return router; | |
| } | |
| var $previousPage = router.$el.children('.page-current').prevAll('.page-previous:not(.page-master)').eq(0); | |
| var skipMaster; | |
| if (router.params.masterDetailBreakpoint > 0) { | |
| var $previousMaster = router.$el.children('.page-current').prevAll('.page-master').eq(0); | |
| if ($previousMaster.length) { | |
| var expectedPreviousPageUrl = router.history[router.history.length - 2]; | |
| var expectedPreviousPageRoute = router.findMatchingRoute(expectedPreviousPageUrl); | |
| if (expectedPreviousPageRoute && expectedPreviousPageRoute.route === $previousMaster[0].f7Page.route.route) { | |
| $previousPage = $previousMaster; | |
| if (!navigateOptions.preload) { | |
| skipMaster = app.width >= router.params.masterDetailBreakpoint; | |
| } | |
| } | |
| } | |
| } | |
| if (!navigateOptions.force && $previousPage.length && !skipMaster) { | |
| if (router.params.pushState | |
| && $previousPage[0].f7Page | |
| && router.history[router.history.length - 2] !== $previousPage[0].f7Page.route.url | |
| ) { | |
| router.back( | |
| router.history[router.history.length - 2], | |
| Utils.extend(navigateOptions, { force: true }) | |
| ); | |
| return router; | |
| } | |
| var previousPageRoute = $previousPage[0].f7Page.route; | |
| processRouteQueue.call( | |
| router, | |
| previousPageRoute, | |
| router.currentRoute, | |
| function () { | |
| router.loadBack({ el: $previousPage }, Utils.extend(navigateOptions, { | |
| route: previousPageRoute, | |
| })); | |
| }, | |
| function () {} | |
| ); | |
| return router; | |
| } | |
| // Navigate URL | |
| if (navigateUrl === '#') { | |
| navigateUrl = undefined; | |
| } | |
| if (navigateUrl && navigateUrl[0] !== '/' && navigateUrl.indexOf('#') !== 0) { | |
| navigateUrl = ((router.path || '/') + navigateUrl).replace('//', '/'); | |
| } | |
| if (!navigateUrl && router.history.length > 1) { | |
| navigateUrl = router.history[router.history.length - 2]; | |
| } | |
| if (skipMaster && !navigateOptions.force && router.history[router.history.length - 3]) { | |
| return router.back(router.history[router.history.length - 3], Utils.extend({}, navigateOptions || {}, { | |
| force: true, | |
| animate: false, | |
| })); | |
| } | |
| if (skipMaster && !navigateOptions.force) { | |
| return router; | |
| } | |
| // Find route to load | |
| route = router.findMatchingRoute(navigateUrl); | |
| if (!route) { | |
| if (navigateUrl) { | |
| route = { | |
| url: navigateUrl, | |
| path: navigateUrl.split('?')[0], | |
| query: Utils.parseUrlQuery(navigateUrl), | |
| route: { | |
| path: navigateUrl.split('?')[0], | |
| url: navigateUrl, | |
| }, | |
| }; | |
| } | |
| } | |
| if (!route) { | |
| return router; | |
| } | |
| if (route.route.redirect) { | |
| return redirect.call(router, 'back', route, navigateOptions); | |
| } | |
| var options = {}; | |
| if (route.route.options) { | |
| Utils.extend(options, route.route.options, navigateOptions); | |
| } else { | |
| Utils.extend(options, navigateOptions); | |
| } | |
| options.route = route; | |
| if (options && options.context) { | |
| route.context = options.context; | |
| options.route.context = options.context; | |
| } | |
| var backForceLoaded; | |
| if (options.force && router.params.stackPages) { | |
| router.$el.children('.page-previous.stacked').each(function (index, pageEl) { | |
| if (pageEl.f7Page && pageEl.f7Page.route && pageEl.f7Page.route.url === route.url) { | |
| backForceLoaded = true; | |
| router.loadBack({ el: pageEl }, options); | |
| } | |
| }); | |
| if (backForceLoaded) { | |
| return router; | |
| } | |
| } | |
| function resolve() { | |
| var routerLoaded = false; | |
| if (route.route.keepAlive && route.route.keepAliveData) { | |
| router.loadBack({ el: route.route.keepAliveData.pageEl }, options); | |
| routerLoaded = true; | |
| } | |
| ('url content component pageName el componentUrl template templateUrl').split(' ').forEach(function (pageLoadProp) { | |
| var obj; | |
| if (route.route[pageLoadProp] && !routerLoaded) { | |
| routerLoaded = true; | |
| router.loadBack(( obj = {}, obj[pageLoadProp] = route.route[pageLoadProp], obj ), options); | |
| } | |
| }); | |
| if (routerLoaded) { return; } | |
| // Async | |
| function asyncResolve(resolveParams, resolveOptions) { | |
| router.allowPageChange = false; | |
| if (resolveOptions && resolveOptions.context) { | |
| if (!route.context) { route.context = resolveOptions.context; } | |
| else { route.context = Utils.extend({}, route.context, resolveOptions.context); } | |
| options.route.context = route.context; | |
| } | |
| router.loadBack(resolveParams, Utils.extend(options, resolveOptions), true); | |
| } | |
| function asyncReject() { | |
| router.allowPageChange = true; | |
| } | |
| if (route.route.async) { | |
| router.allowPageChange = false; | |
| route.route.async.call(router, route, router.currentRoute, asyncResolve, asyncReject); | |
| } | |
| } | |
| function reject() { | |
| router.allowPageChange = true; | |
| } | |
| if (options.preload) { | |
| resolve(); | |
| } else { | |
| processRouteQueue.call( | |
| router, | |
| route, | |
| router.currentRoute, | |
| function () { | |
| if (route.route.modules) { | |
| app | |
| .loadModules(Array.isArray(route.route.modules) ? route.route.modules : [route.route.modules]) | |
| .then(function () { | |
| resolve(); | |
| }) | |
| .catch(function () { | |
| reject(); | |
| }); | |
| } else { | |
| resolve(); | |
| } | |
| }, | |
| function () { | |
| reject(); | |
| } | |
| ); | |
| } | |
| // Return Router | |
| return router; | |
| } | |
| function clearPreviousPages() { | |
| var router = this; | |
| appRouterCheck(router, 'clearPreviousPages'); | |
| var app = router.app; | |
| var separateNavbar = router.separateNavbar; | |
| var $pagesToRemove = router.$el | |
| .children('.page') | |
| .filter(function (index, pageInView) { | |
| if (router.currentRoute && (router.currentRoute.modal || router.currentRoute.panel)) { return true; } | |
| return pageInView !== router.currentPageEl; | |
| }); | |
| $pagesToRemove.each(function (index, pageEl) { | |
| var $oldPageEl = $(pageEl); | |
| var $oldNavbarInnerEl = $(app.navbar.getElByPage($oldPageEl)); | |
| if (router.params.stackPages && router.initialPages.indexOf($oldPageEl[0]) >= 0) { | |
| $oldPageEl.addClass('stacked'); | |
| if (separateNavbar) { | |
| $oldNavbarInnerEl.addClass('stacked'); | |
| } | |
| } else { | |
| // Page remove event | |
| router.pageCallback('beforeRemove', $oldPageEl, $oldNavbarInnerEl, 'previous', undefined, {}); | |
| router.removePage($oldPageEl); | |
| if (separateNavbar && $oldNavbarInnerEl.length) { | |
| router.removeNavbar($oldNavbarInnerEl); | |
| } | |
| } | |
| }); | |
| } | |
| function clearPreviousHistory() { | |
| var router = this; | |
| appRouterCheck(router, 'clearPreviousHistory'); | |
| var url = router.history[router.history.length - 1]; | |
| router.clearPreviousPages(); | |
| router.history = [url]; | |
| router.view.history = [url]; | |
| router.saveHistory(); | |
| } | |
| var Router = /*@__PURE__*/(function (Framework7Class$$1) { | |
| function Router(app, view) { | |
| Framework7Class$$1.call(this, {}, [typeof view === 'undefined' ? app : view]); | |
| var router = this; | |
| // Is App Router | |
| router.isAppRouter = typeof view === 'undefined'; | |
| if (router.isAppRouter) { | |
| // App Router | |
| Utils.extend(false, router, { | |
| app: app, | |
| params: app.params.view, | |
| routes: app.routes || [], | |
| cache: app.cache, | |
| }); | |
| } else { | |
| // View Router | |
| Utils.extend(false, router, { | |
| app: app, | |
| view: view, | |
| viewId: view.id, | |
| params: view.params, | |
| routes: view.routes, | |
| $el: view.$el, | |
| el: view.el, | |
| $navbarEl: view.$navbarEl, | |
| navbarEl: view.navbarEl, | |
| history: view.history, | |
| scrollHistory: view.scrollHistory, | |
| cache: app.cache, | |
| dynamicNavbar: app.theme === 'ios' && view.params.iosDynamicNavbar, | |
| separateNavbar: app.theme === 'ios' && view.params.iosDynamicNavbar && view.params.iosSeparateDynamicNavbar, | |
| initialPages: [], | |
| initialNavbars: [], | |
| }); | |
| } | |
| // Install Modules | |
| router.useModules(); | |
| // Temporary Dom | |
| router.tempDom = doc.createElement('div'); | |
| // AllowPageChage | |
| router.allowPageChange = true; | |
| // Current Route | |
| var currentRoute = {}; | |
| var previousRoute = {}; | |
| Object.defineProperty(router, 'currentRoute', { | |
| enumerable: true, | |
| configurable: true, | |
| set: function set(newRoute) { | |
| if ( newRoute === void 0 ) newRoute = {}; | |
| previousRoute = Utils.extend({}, currentRoute); | |
| currentRoute = newRoute; | |
| if (!currentRoute) { return; } | |
| router.url = currentRoute.url; | |
| router.emit('routeChange', newRoute, previousRoute, router); | |
| }, | |
| get: function get() { | |
| return currentRoute; | |
| }, | |
| }); | |
| Object.defineProperty(router, 'previousRoute', { | |
| enumerable: true, | |
| configurable: true, | |
| get: function get() { | |
| return previousRoute; | |
| }, | |
| set: function set(newRoute) { | |
| previousRoute = newRoute; | |
| }, | |
| }); | |
| return router; | |
| } | |
| if ( Framework7Class$$1 ) Router.__proto__ = Framework7Class$$1; | |
| Router.prototype = Object.create( Framework7Class$$1 && Framework7Class$$1.prototype ); | |
| Router.prototype.constructor = Router; | |
| Router.prototype.animatableNavElements = function animatableNavElements (newNavbarInner, oldNavbarInner, toLarge, fromLarge, direction) { | |
| var router = this; | |
| var dynamicNavbar = router.dynamicNavbar; | |
| var separateNavbar = router.separateNavbar; | |
| var animateIcon = router.params.iosAnimateNavbarBackIcon; | |
| var newNavEls; | |
| var oldNavEls; | |
| function animatableNavEl($el, navbarInner) { | |
| var isSliding = $el.hasClass('sliding') || navbarInner.hasClass('sliding'); | |
| var isSubnavbar = $el.hasClass('subnavbar'); | |
| var needsOpacityTransition = isSliding ? !isSubnavbar : true; | |
| var $iconEl = $el.find('.back .icon'); | |
| var isIconLabel; | |
| if (isSliding && animateIcon && $el.hasClass('left') && $iconEl.length > 0 && $iconEl.next('span').length) { | |
| $el = $iconEl.next('span'); // eslint-disable-line | |
| isIconLabel = true; | |
| } | |
| return { | |
| $el: $el, | |
| isIconLabel: isIconLabel, | |
| leftOffset: $el[0].f7NavbarLeftOffset, | |
| rightOffset: $el[0].f7NavbarRightOffset, | |
| isSliding: isSliding, | |
| isSubnavbar: isSubnavbar, | |
| needsOpacityTransition: needsOpacityTransition, | |
| }; | |
| } | |
| if (dynamicNavbar) { | |
| newNavEls = []; | |
| oldNavEls = []; | |
| newNavbarInner.children('.left, .right, .title, .subnavbar').each(function (index, navEl) { | |
| var $navEl = $(navEl); | |
| if ($navEl.hasClass('left') && fromLarge && direction === 'forward' && separateNavbar) { return; } | |
| if ($navEl.hasClass('title') && toLarge) { return; } | |
| newNavEls.push(animatableNavEl($navEl, newNavbarInner)); | |
| }); | |
| if (!(oldNavbarInner.hasClass('navbar-master') && router.params.masterDetailBreakpoint > 0 && router.app.width >= router.params.masterDetailBreakpoint)) { | |
| oldNavbarInner.children('.left, .right, .title, .subnavbar').each(function (index, navEl) { | |
| var $navEl = $(navEl); | |
| if ($navEl.hasClass('left') && toLarge && !fromLarge && direction === 'forward' && separateNavbar) { return; } | |
| if ($navEl.hasClass('left') && toLarge && direction === 'backward' && separateNavbar) { return; } | |
| if ($navEl.hasClass('title') && fromLarge) { | |
| return; | |
| } | |
| oldNavEls.push(animatableNavEl($navEl, oldNavbarInner)); | |
| }); | |
| } | |
| [oldNavEls, newNavEls].forEach(function (navEls) { | |
| navEls.forEach(function (navEl) { | |
| var n = navEl; | |
| var isSliding = navEl.isSliding; | |
| var $el = navEl.$el; | |
| var otherEls = navEls === oldNavEls ? newNavEls : oldNavEls; | |
| if (!(isSliding && $el.hasClass('title') && otherEls)) { return; } | |
| otherEls.forEach(function (otherNavEl) { | |
| if (otherNavEl.isIconLabel) { | |
| var iconTextEl = otherNavEl.$el[0]; | |
| n.leftOffset += iconTextEl ? (iconTextEl.offsetLeft || 0) : 0; | |
| } | |
| }); | |
| }); | |
| }); | |
| } | |
| return { newNavEls: newNavEls, oldNavEls: oldNavEls }; | |
| }; | |
| Router.prototype.animate = function animate (oldPage, newPage, oldNavbarInner, newNavbarInner, direction, callback) { | |
| var router = this; | |
| if (router.params.animateCustom) { | |
| router.params.animateCustom.apply(router, [oldPage, newPage, oldNavbarInner, newNavbarInner, direction, callback]); | |
| return; | |
| } | |
| var dynamicNavbar = router.dynamicNavbar; | |
| var ios = router.app.theme === 'ios'; | |
| // Router Animation class | |
| var routerTransitionClass = "router-transition-" + direction + " router-transition"; | |
| var newNavEls; | |
| var oldNavEls; | |
| var fromLarge; | |
| var toLarge; | |
| var oldIsLarge; | |
| var newIsLarge; | |
| if (ios && dynamicNavbar) { | |
| oldIsLarge = oldNavbarInner && oldNavbarInner.hasClass('navbar-inner-large'); | |
| newIsLarge = newNavbarInner && newNavbarInner.hasClass('navbar-inner-large'); | |
| fromLarge = oldIsLarge && !oldNavbarInner.hasClass('navbar-inner-large-collapsed'); | |
| toLarge = newIsLarge && !newNavbarInner.hasClass('navbar-inner-large-collapsed'); | |
| var navEls = router.animatableNavElements(newNavbarInner, oldNavbarInner, toLarge, fromLarge, direction); | |
| newNavEls = navEls.newNavEls; | |
| oldNavEls = navEls.oldNavEls; | |
| } | |
| function animateNavbars(progress) { | |
| if (!(ios && dynamicNavbar)) { return; } | |
| if (progress === 1) { | |
| if (toLarge) { | |
| newNavbarInner.addClass('router-navbar-transition-to-large'); | |
| oldNavbarInner.addClass('router-navbar-transition-to-large'); | |
| } | |
| if (fromLarge) { | |
| newNavbarInner.addClass('router-navbar-transition-from-large'); | |
| oldNavbarInner.addClass('router-navbar-transition-from-large'); | |
| } | |
| } | |
| newNavEls.forEach(function (navEl) { | |
| var $el = navEl.$el; | |
| var offset = direction === 'forward' ? navEl.rightOffset : navEl.leftOffset; | |
| if (navEl.isSliding) { | |
| if (navEl.isSubnavbar && newIsLarge) { | |
| $el[0].style.setProperty('transform', ("translate3d(" + (offset * (1 - progress)) + "px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)"), 'important'); | |
| } else { | |
| $el.transform(("translate3d(" + (offset * (1 - progress)) + "px,0,0)")); | |
| } | |
| } | |
| }); | |
| oldNavEls.forEach(function (navEl) { | |
| var $el = navEl.$el; | |
| var offset = direction === 'forward' ? navEl.leftOffset : navEl.rightOffset; | |
| if (navEl.isSliding) { | |
| if (navEl.isSubnavbar && oldIsLarge) { | |
| $el.transform(("translate3d(" + (offset * (progress)) + "px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0)")); | |
| } else { | |
| $el.transform(("translate3d(" + (offset * (progress)) + "px,0,0)")); | |
| } | |
| } | |
| }); | |
| } | |
| // AnimationEnd Callback | |
| function onDone() { | |
| if (router.dynamicNavbar) { | |
| if (newNavbarInner) { | |
| newNavbarInner.removeClass('router-navbar-transition-to-large router-navbar-transition-from-large'); | |
| newNavbarInner.addClass('navbar-no-title-large-transition'); | |
| Utils.nextFrame(function () { | |
| newNavbarInner.removeClass('navbar-no-title-large-transition'); | |
| }); | |
| } | |
| if (oldNavbarInner) { | |
| oldNavbarInner.removeClass('router-navbar-transition-to-large router-navbar-transition-from-large'); | |
| } | |
| if (newNavbarInner.hasClass('sliding')) { | |
| newNavbarInner.find('.title, .left, .right, .left .icon, .subnavbar').transform(''); | |
| } else { | |
| newNavbarInner.find('.sliding').transform(''); | |
| } | |
| if (oldNavbarInner.hasClass('sliding')) { | |
| oldNavbarInner.find('.title, .left, .right, .left .icon, .subnavbar').transform(''); | |
| } else { | |
| oldNavbarInner.find('.sliding').transform(''); | |
| } | |
| } | |
| router.$el.removeClass(routerTransitionClass); | |
| if (callback) { callback(); } | |
| } | |
| (direction === 'forward' ? newPage : oldPage).animationEnd(function () { | |
| onDone(); | |
| }); | |
| // Animate | |
| if (dynamicNavbar) { | |
| // Prepare Navbars | |
| animateNavbars(0); | |
| Utils.nextFrame(function () { | |
| // Add class, start animation | |
| animateNavbars(1); | |
| router.$el.addClass(routerTransitionClass); | |
| }); | |
| } else { | |
| // Add class, start animation | |
| router.$el.addClass(routerTransitionClass); | |
| } | |
| }; | |
| Router.prototype.removeModal = function removeModal (modalEl) { | |
| var router = this; | |
| router.removeEl(modalEl); | |
| }; | |
| // eslint-disable-next-line | |
| Router.prototype.removeTabContent = function removeTabContent (tabEl) { | |
| var $tabEl = $(tabEl); | |
| $tabEl.html(''); | |
| }; | |
| Router.prototype.removeNavbar = function removeNavbar (el) { | |
| var router = this; | |
| router.removeEl(el); | |
| }; | |
| Router.prototype.removePage = function removePage (el) { | |
| var $el = $(el); | |
| var f7Page = $el && $el[0] && $el[0].f7Page; | |
| var router = this; | |
| if (f7Page && f7Page.route && f7Page.route.route && f7Page.route.route.keepAlive) { | |
| $el.remove(); | |
| return; | |
| } | |
| router.removeEl(el); | |
| }; | |
| Router.prototype.removeEl = function removeEl (el) { | |
| if (!el) { return; } | |
| var router = this; | |
| var $el = $(el); | |
| if ($el.length === 0) { return; } | |
| $el.find('.tab').each(function (tabIndex, tabEl) { | |
| $(tabEl).children().each(function (index, tabChild) { | |
| if (tabChild.f7Component) { | |
| $(tabChild).trigger('tab:beforeremove'); | |
| tabChild.f7Component.$destroy(); | |
| } | |
| }); | |
| }); | |
| if ($el[0].f7Component && $el[0].f7Component.$destroy) { | |
| $el[0].f7Component.$destroy(); | |
| } | |
| if (!router.params.removeElements) { | |
| return; | |
| } | |
| if (router.params.removeElementsWithTimeout) { | |
| setTimeout(function () { | |
| $el.remove(); | |
| }, router.params.removeElementsTimeout); | |
| } else { | |
| $el.remove(); | |
| } | |
| }; | |
| Router.prototype.getPageEl = function getPageEl (content) { | |
| var router = this; | |
| if (typeof content === 'string') { | |
| router.tempDom.innerHTML = content; | |
| } else { | |
| if ($(content).hasClass('page')) { | |
| return content; | |
| } | |
| router.tempDom.innerHTML = ''; | |
| $(router.tempDom).append(content); | |
| } | |
| return router.findElement('.page', router.tempDom); | |
| }; | |
| Router.prototype.findElement = function findElement (stringSelector, container, notStacked) { | |
| var router = this; | |
| var view = router.view; | |
| var app = router.app; | |
| // Modals Selector | |
| var modalsSelector = '.popup, .dialog, .popover, .actions-modal, .sheet-modal, .login-screen, .page'; | |
| var $container = $(container); | |
| var selector = stringSelector; | |
| if (notStacked) { selector += ':not(.stacked)'; } | |
| var found = $container | |
| .find(selector) | |
| .filter(function (index, el) { return $(el).parents(modalsSelector).length === 0; }); | |
| if (found.length > 1) { | |
| if (typeof view.selector === 'string') { | |
| // Search in related view | |
| found = $container.find(((view.selector) + " " + selector)); | |
| } | |
| if (found.length > 1) { | |
| // Search in main view | |
| found = $container.find(("." + (app.params.viewMainClass) + " " + selector)); | |
| } | |
| } | |
| if (found.length === 1) { return found; } | |
| // Try to find not stacked | |
| if (!notStacked) { found = router.findElement(selector, $container, true); } | |
| if (found && found.length === 1) { return found; } | |
| if (found && found.length > 1) { return $(found[0]); } | |
| return undefined; | |
| }; | |
| Router.prototype.flattenRoutes = function flattenRoutes (routes) { | |
| if ( routes === void 0 ) routes = this.routes; | |
| var router = this; | |
| var flattenedRoutes = []; | |
| routes.forEach(function (route) { | |
| var hasTabRoutes = false; | |
| if ('tabs' in route && route.tabs) { | |
| var mergedPathsRoutes = route.tabs.map(function (tabRoute) { | |
| var tRoute = Utils.extend({}, route, { | |
| path: (((route.path) + "/" + (tabRoute.path))).replace('///', '/').replace('//', '/'), | |
| parentPath: route.path, | |
| tab: tabRoute, | |
| }); | |
| delete tRoute.tabs; | |
| delete tRoute.routes; | |
| return tRoute; | |
| }); | |
| hasTabRoutes = true; | |
| flattenedRoutes = flattenedRoutes.concat(router.flattenRoutes(mergedPathsRoutes)); | |
| } | |
| if ('detailRoutes' in route) { | |
| var mergedPathsRoutes$1 = route.detailRoutes.map(function (detailRoute) { | |
| var dRoute = Utils.extend({}, detailRoute); | |
| dRoute.masterRoute = route; | |
| dRoute.masterRoutePath = route.path; | |
| return dRoute; | |
| }); | |
| flattenedRoutes = flattenedRoutes.concat(route, router.flattenRoutes(mergedPathsRoutes$1)); | |
| } | |
| if ('routes' in route) { | |
| var mergedPathsRoutes$2 = route.routes.map(function (childRoute) { | |
| var cRoute = Utils.extend({}, childRoute); | |
| cRoute.path = (((route.path) + "/" + (cRoute.path))).replace('///', '/').replace('//', '/'); | |
| return cRoute; | |
| }); | |
| if (hasTabRoutes) { | |
| flattenedRoutes = flattenedRoutes.concat(router.flattenRoutes(mergedPathsRoutes$2)); | |
| } else { | |
| flattenedRoutes = flattenedRoutes.concat(route, router.flattenRoutes(mergedPathsRoutes$2)); | |
| } | |
| } | |
| if (!('routes' in route) && !('tabs' in route && route.tabs) && !('detailRoutes' in route)) { | |
| flattenedRoutes.push(route); | |
| } | |
| }); | |
| return flattenedRoutes; | |
| }; | |
| // eslint-disable-next-line | |
| Router.prototype.parseRouteUrl = function parseRouteUrl (url) { | |
| if (!url) { return {}; } | |
| var query = Utils.parseUrlQuery(url); | |
| var hash = url.split('#')[1]; | |
| var params = {}; | |
| var path = url.split('#')[0].split('?')[0]; | |
| return { | |
| query: query, | |
| hash: hash, | |
| params: params, | |
| url: url, | |
| path: path, | |
| }; | |
| }; | |
| // eslint-disable-next-line | |
| Router.prototype.constructRouteUrl = function constructRouteUrl (route, ref) { | |
| if ( ref === void 0 ) ref = {}; | |
| var params = ref.params; | |
| var query = ref.query; | |
| var path = route.path; | |
| var toUrl = pathToRegexp_1.compile(path); | |
| var url; | |
| try { | |
| url = toUrl(params || {}); | |
| } catch (error) { | |
| throw new Error(("Framework7: error constructing route URL from passed params:\nRoute: " + path + "\n" + (error.toString()))); | |
| } | |
| if (query) { | |
| if (typeof query === 'string') { url += "?" + query; } | |
| else { url += "?" + (Utils.serializeObject(query)); } | |
| } | |
| return url; | |
| }; | |
| Router.prototype.findTabRoute = function findTabRoute (tabEl) { | |
| var router = this; | |
| var $tabEl = $(tabEl); | |
| var parentPath = router.currentRoute.route.parentPath; | |
| var tabId = $tabEl.attr('id'); | |
| var flattenedRoutes = router.flattenRoutes(router.routes); | |
| var foundTabRoute; | |
| flattenedRoutes.forEach(function (route) { | |
| if ( | |
| route.parentPath === parentPath | |
| && route.tab | |
| && route.tab.id === tabId | |
| ) { | |
| foundTabRoute = route; | |
| } | |
| }); | |
| return foundTabRoute; | |
| }; | |
| Router.prototype.findRouteByKey = function findRouteByKey (key, value) { | |
| var router = this; | |
| var routes = router.routes; | |
| var flattenedRoutes = router.flattenRoutes(routes); | |
| var matchingRoute; | |
| flattenedRoutes.forEach(function (route) { | |
| if (matchingRoute) { return; } | |
| if (route[key] === value) { | |
| matchingRoute = route; | |
| } | |
| }); | |
| return matchingRoute; | |
| }; | |
| Router.prototype.findMatchingRoute = function findMatchingRoute (url) { | |
| if (!url) { return undefined; } | |
| var router = this; | |
| var routes = router.routes; | |
| var flattenedRoutes = router.flattenRoutes(routes); | |
| var ref = router.parseRouteUrl(url); | |
| var path = ref.path; | |
| var query = ref.query; | |
| var hash = ref.hash; | |
| var params = ref.params; | |
| var matchingRoute; | |
| flattenedRoutes.forEach(function (route) { | |
| if (matchingRoute) { return; } | |
| var keys = []; | |
| var pathsToMatch = [route.path]; | |
| if (route.alias) { | |
| if (typeof route.alias === 'string') { pathsToMatch.push(route.alias); } | |
| else if (Array.isArray(route.alias)) { | |
| route.alias.forEach(function (aliasPath) { | |
| pathsToMatch.push(aliasPath); | |
| }); | |
| } | |
| } | |
| var matched; | |
| pathsToMatch.forEach(function (pathToMatch) { | |
| if (matched) { return; } | |
| matched = pathToRegexp_1(pathToMatch, keys).exec(path); | |
| }); | |
| if (matched) { | |
| keys.forEach(function (keyObj, index) { | |
| if (typeof keyObj.name === 'number') { return; } | |
| var paramValue = matched[index + 1]; | |
| params[keyObj.name] = paramValue; | |
| }); | |
| var parentPath; | |
| if (route.parentPath) { | |
| parentPath = path.split('/').slice(0, route.parentPath.split('/').length - 1).join('/'); | |
| } | |
| matchingRoute = { | |
| query: query, | |
| hash: hash, | |
| params: params, | |
| url: url, | |
| path: path, | |
| parentPath: parentPath, | |
| route: route, | |
| name: route.name, | |
| }; | |
| } | |
| }); | |
| return matchingRoute; | |
| }; | |
| // eslint-disable-next-line | |
| Router.prototype.replaceRequestUrlParams = function replaceRequestUrlParams (url, options) { | |
| if ( url === void 0 ) url = ''; | |
| if ( options === void 0 ) options = {}; | |
| var compiledUrl = url; | |
| if (typeof compiledUrl === 'string' | |
| && compiledUrl.indexOf('{{') >= 0 | |
| && options | |
| && options.route | |
| && options.route.params | |
| && Object.keys(options.route.params).length | |
| ) { | |
| Object.keys(options.route.params).forEach(function (paramName) { | |
| var regExp = new RegExp(("{{" + paramName + "}}"), 'g'); | |
| compiledUrl = compiledUrl.replace(regExp, options.route.params[paramName] || ''); | |
| }); | |
| } | |
| return compiledUrl; | |
| }; | |
| Router.prototype.removeFromXhrCache = function removeFromXhrCache (url) { | |
| var router = this; | |
| var xhrCache = router.cache.xhr; | |
| var index = false; | |
| for (var i = 0; i < xhrCache.length; i += 1) { | |
| if (xhrCache[i].url === url) { index = i; } | |
| } | |
| if (index !== false) { xhrCache.splice(index, 1); } | |
| }; | |
| Router.prototype.xhrRequest = function xhrRequest (requestUrl, options) { | |
| var router = this; | |
| var params = router.params; | |
| var ignoreCache = options.ignoreCache; | |
| var url = requestUrl; | |
| var hasQuery = url.indexOf('?') >= 0; | |
| if (params.passRouteQueryToRequest | |
| && options | |
| && options.route | |
| && options.route.query | |
| && Object.keys(options.route.query).length | |
| ) { | |
| url += "" + (hasQuery ? '&' : '?') + (Utils.serializeObject(options.route.query)); | |
| hasQuery = true; | |
| } | |
| if (params.passRouteParamsToRequest | |
| && options | |
| && options.route | |
| && options.route.params | |
| && Object.keys(options.route.params).length | |
| ) { | |
| url += "" + (hasQuery ? '&' : '?') + (Utils.serializeObject(options.route.params)); | |
| hasQuery = true; | |
| } | |
| if (url.indexOf('{{') >= 0) { | |
| url = router.replaceRequestUrlParams(url, options); | |
| } | |
| // should we ignore get params or not | |
| if (params.xhrCacheIgnoreGetParameters && url.indexOf('?') >= 0) { | |
| url = url.split('?')[0]; | |
| } | |
| return new Promise(function (resolve, reject) { | |
| if (params.xhrCache && !ignoreCache && url.indexOf('nocache') < 0 && params.xhrCacheIgnore.indexOf(url) < 0) { | |
| for (var i = 0; i < router.cache.xhr.length; i += 1) { | |
| var cachedUrl = router.cache.xhr[i]; | |
| if (cachedUrl.url === url) { | |
| // Check expiration | |
| if (Utils.now() - cachedUrl.time < params.xhrCacheDuration) { | |
| // Load from cache | |
| resolve(cachedUrl.content); | |
| return; | |
| } | |
| } | |
| } | |
| } | |
| router.xhr = router.app.request({ | |
| url: url, | |
| method: 'GET', | |
| beforeSend: function beforeSend(xhr) { | |
| router.emit('routerAjaxStart', xhr, options); | |
| }, | |
| complete: function complete(xhr, status) { | |
| router.emit('routerAjaxComplete', xhr); | |
| if ((status !== 'error' && status !== 'timeout' && (xhr.status >= 200 && xhr.status < 300)) || xhr.status === 0) { | |
| if (params.xhrCache && xhr.responseText !== '') { | |
| router.removeFromXhrCache(url); | |
| router.cache.xhr.push({ | |
| url: url, | |
| time: Utils.now(), | |
| content: xhr.responseText, | |
| }); | |
| } | |
| router.emit('routerAjaxSuccess', xhr, options); | |
| resolve(xhr.responseText); | |
| } else { | |
| router.emit('routerAjaxError', xhr, options); | |
| reject(xhr); | |
| } | |
| }, | |
| error: function error(xhr) { | |
| router.emit('routerAjaxError', xhr, options); | |
| reject(xhr); | |
| }, | |
| }); | |
| }); | |
| }; | |
| // Remove theme elements | |
| Router.prototype.removeThemeElements = function removeThemeElements (el) { | |
| var router = this; | |
| var theme = router.app.theme; | |
| $(el).find(("." + (theme === 'md' ? 'ios' : 'md') + "-only, .if-" + (theme === 'md' ? 'ios' : 'md'))).remove(); | |
| }; | |
| Router.prototype.getPageData = function getPageData (pageEl, navbarEl, from, to, route, pageFromEl) { | |
| if ( route === void 0 ) route = {}; | |
| var router = this; | |
| var $pageEl = $(pageEl).eq(0); | |
| var $navbarEl = $(navbarEl).eq(0); | |
| var currentPage = $pageEl[0].f7Page || {}; | |
| var direction; | |
| var pageFrom; | |
| if ((from === 'next' && to === 'current') || (from === 'current' && to === 'previous')) { direction = 'forward'; } | |
| if ((from === 'current' && to === 'next') || (from === 'previous' && to === 'current')) { direction = 'backward'; } | |
| if (currentPage && !currentPage.fromPage) { | |
| var $pageFromEl = $(pageFromEl); | |
| if ($pageFromEl.length) { | |
| pageFrom = $pageFromEl[0].f7Page; | |
| } | |
| } | |
| pageFrom = currentPage.pageFrom || pageFrom; | |
| if (pageFrom && pageFrom.pageFrom) { | |
| pageFrom.pageFrom = null; | |
| } | |
| var page = { | |
| app: router.app, | |
| view: router.view, | |
| router: router, | |
| $el: $pageEl, | |
| el: $pageEl[0], | |
| $pageEl: $pageEl, | |
| pageEl: $pageEl[0], | |
| $navbarEl: $navbarEl, | |
| navbarEl: $navbarEl[0], | |
| name: $pageEl.attr('data-name'), | |
| position: from, | |
| from: from, | |
| to: to, | |
| direction: direction, | |
| route: currentPage.route ? currentPage.route : route, | |
| pageFrom: pageFrom, | |
| }; | |
| $pageEl[0].f7Page = page; | |
| return page; | |
| }; | |
| // Callbacks | |
| Router.prototype.pageCallback = function pageCallback (callback, pageEl, navbarEl, from, to, options, pageFromEl) { | |
| if ( options === void 0 ) options = {}; | |
| if (!pageEl) { return; } | |
| var router = this; | |
| var $pageEl = $(pageEl); | |
| if (!$pageEl.length) { return; } | |
| var $navbarEl = $(navbarEl); | |
| var route = options.route; | |
| var restoreScrollTopOnBack = router.params.restoreScrollTopOnBack | |
| && !( | |
| router.params.masterDetailBreakpoint > 0 | |
| && $pageEl.hasClass('page-master') | |
| && router.app.width >= router.params.masterDetailBreakpoint | |
| ); | |
| var keepAlive = $pageEl[0].f7Page && $pageEl[0].f7Page.route && $pageEl[0].f7Page.route.route && $pageEl[0].f7Page.route.route.keepAlive; | |
| if (callback === 'beforeRemove' && keepAlive) { | |
| callback = 'beforeUnmount'; // eslint-disable-line | |
| } | |
| var camelName = "page" + (callback[0].toUpperCase() + callback.slice(1, callback.length)); | |
| var colonName = "page:" + (callback.toLowerCase()); | |
| var page = {}; | |
| if (callback === 'beforeRemove' && $pageEl[0].f7Page) { | |
| page = Utils.extend($pageEl[0].f7Page, { from: from, to: to, position: from }); | |
| } else { | |
| page = router.getPageData($pageEl[0], $navbarEl[0], from, to, route, pageFromEl); | |
| } | |
| page.swipeBack = !!options.swipeBack; | |
| var ref = options.route ? options.route.route : {}; | |
| var on = ref.on; if ( on === void 0 ) on = {}; | |
| var once = ref.once; if ( once === void 0 ) once = {}; | |
| if (options.on) { | |
| Utils.extend(on, options.on); | |
| } | |
| if (options.once) { | |
| Utils.extend(once, options.once); | |
| } | |
| function attachEvents() { | |
| if ($pageEl[0].f7RouteEventsAttached) { return; } | |
| $pageEl[0].f7RouteEventsAttached = true; | |
| if (on && Object.keys(on).length > 0) { | |
| $pageEl[0].f7RouteEventsOn = on; | |
| Object.keys(on).forEach(function (eventName) { | |
| on[eventName] = on[eventName].bind(router); | |
| $pageEl.on(Utils.eventNameToColonCase(eventName), on[eventName]); | |
| }); | |
| } | |
| if (once && Object.keys(once).length > 0) { | |
| $pageEl[0].f7RouteEventsOnce = once; | |
| Object.keys(once).forEach(function (eventName) { | |
| once[eventName] = once[eventName].bind(router); | |
| $pageEl.once(Utils.eventNameToColonCase(eventName), once[eventName]); | |
| }); | |
| } | |
| } | |
| function detachEvents() { | |
| if (!$pageEl[0].f7RouteEventsAttached) { return; } | |
| if ($pageEl[0].f7RouteEventsOn) { | |
| Object.keys($pageEl[0].f7RouteEventsOn).forEach(function (eventName) { | |
| $pageEl.off(Utils.eventNameToColonCase(eventName), $pageEl[0].f7RouteEventsOn[eventName]); | |
| }); | |
| } | |
| if ($pageEl[0].f7RouteEventsOnce) { | |
| Object.keys($pageEl[0].f7RouteEventsOnce).forEach(function (eventName) { | |
| $pageEl.off(Utils.eventNameToColonCase(eventName), $pageEl[0].f7RouteEventsOnce[eventName]); | |
| }); | |
| } | |
| $pageEl[0].f7RouteEventsAttached = null; | |
| $pageEl[0].f7RouteEventsOn = null; | |
| $pageEl[0].f7RouteEventsOnce = null; | |
| delete $pageEl[0].f7RouteEventsAttached; | |
| delete $pageEl[0].f7RouteEventsOn; | |
| delete $pageEl[0].f7RouteEventsOnce; | |
| } | |
| if (callback === 'mounted') { | |
| attachEvents(); | |
| } | |
| if (callback === 'init') { | |
| if (restoreScrollTopOnBack && (from === 'previous' || !from) && to === 'current' && router.scrollHistory[page.route.url] && !$pageEl.hasClass('no-restore-scroll')) { | |
| var $pageContent = $pageEl.find('.page-content'); | |
| if ($pageContent.length > 0) { | |
| // eslint-disable-next-line | |
| $pageContent = $pageContent.filter(function (pageContentIndex, pageContentEl) { | |
| return ( | |
| $(pageContentEl).parents('.tab:not(.tab-active)').length === 0 | |
| && !$(pageContentEl).is('.tab:not(.tab-active)') | |
| ); | |
| }); | |
| } | |
| $pageContent.scrollTop(router.scrollHistory[page.route.url]); | |
| } | |
| attachEvents(); | |
| if ($pageEl[0].f7PageInitialized) { | |
| $pageEl.trigger('page:reinit', page); | |
| router.emit('pageReinit', page); | |
| return; | |
| } | |
| $pageEl[0].f7PageInitialized = true; | |
| } | |
| if (restoreScrollTopOnBack && callback === 'beforeOut' && from === 'current' && to === 'previous') { | |
| // Save scroll position | |
| var $pageContent$1 = $pageEl.find('.page-content'); | |
| if ($pageContent$1.length > 0) { | |
| // eslint-disable-next-line | |
| $pageContent$1 = $pageContent$1.filter(function (pageContentIndex, pageContentEl) { | |
| return ( | |
| $(pageContentEl).parents('.tab:not(.tab-active)').length === 0 | |
| && !$(pageContentEl).is('.tab:not(.tab-active)') | |
| ); | |
| }); | |
| } | |
| router.scrollHistory[page.route.url] = $pageContent$1.scrollTop(); | |
| } | |
| if (restoreScrollTopOnBack && callback === 'beforeOut' && from === 'current' && to === 'next') { | |
| // Delete scroll position | |
| delete router.scrollHistory[page.route.url]; | |
| } | |
| $pageEl.trigger(colonName, page); | |
| router.emit(camelName, page); | |
| if (callback === 'beforeRemove' || callback === 'beforeUnmount') { | |
| detachEvents(); | |
| if (!keepAlive) { | |
| if ($pageEl[0].f7Page && $pageEl[0].f7Page.navbarEl) { | |
| delete $pageEl[0].f7Page.navbarEl.f7Page; | |
| } | |
| $pageEl[0].f7Page = null; | |
| } | |
| } | |
| }; | |
| Router.prototype.saveHistory = function saveHistory () { | |
| var router = this; | |
| router.view.history = router.history; | |
| if (router.params.pushState) { | |
| win.localStorage[("f7router-" + (router.view.id) + "-history")] = JSON.stringify(router.history); | |
| } | |
| }; | |
| Router.prototype.restoreHistory = function restoreHistory () { | |
| var router = this; | |
| if (router.params.pushState && win.localStorage[("f7router-" + (router.view.id) + "-history")]) { | |
| router.history = JSON.parse(win.localStorage[("f7router-" + (router.view.id) + "-history")]); | |
| router.view.history = router.history; | |
| } | |
| }; | |
| Router.prototype.clearHistory = function clearHistory () { | |
| var router = this; | |
| router.history = []; | |
| if (router.view) { router.view.history = []; } | |
| router.saveHistory(); | |
| }; | |
| Router.prototype.updateCurrentUrl = function updateCurrentUrl (newUrl) { | |
| var router = this; | |
| appRouterCheck(router, 'updateCurrentUrl'); | |
| // Update history | |
| if (router.history.length) { | |
| router.history[router.history.length - 1] = newUrl; | |
| } else { | |
| router.history.push(newUrl); | |
| } | |
| // Update current route params | |
| var ref = router.parseRouteUrl(newUrl); | |
| var query = ref.query; | |
| var hash = ref.hash; | |
| var params = ref.params; | |
| var url = ref.url; | |
| var path = ref.path; | |
| if (router.currentRoute) { | |
| Utils.extend(router.currentRoute, { | |
| query: query, | |
| hash: hash, | |
| params: params, | |
| url: url, | |
| path: path, | |
| }); | |
| } | |
| if (router.params.pushState) { | |
| var pushStateRoot = router.params.pushStateRoot || ''; | |
| History.replace( | |
| router.view.id, | |
| { | |
| url: newUrl, | |
| }, | |
| pushStateRoot + router.params.pushStateSeparator + newUrl | |
| ); | |
| } | |
| // Save History | |
| router.saveHistory(); | |
| router.emit('routeUrlUpdate', router.currentRoute, router); | |
| }; | |
| Router.prototype.init = function init () { | |
| var router = this; | |
| var app = router.app; | |
| var view = router.view; | |
| // Init Swipeback | |
| { | |
| if ( | |
| (view && router.params.iosSwipeBack && app.theme === 'ios') | |
| || (view && router.params.mdSwipeBack && app.theme === 'md') | |
| ) { | |
| SwipeBack(router); | |
| } | |
| } | |
| // Dynamic not separated navbbar | |
| if (router.dynamicNavbar && !router.separateNavbar) { | |
| router.$el.addClass('router-dynamic-navbar-inside'); | |
| } | |
| var initUrl = router.params.url; | |
| var documentUrl = doc.location.href.split(doc.location.origin)[1]; | |
| var historyRestored; | |
| var ref = router.params; | |
| var pushState = ref.pushState; | |
| var pushStateOnLoad = ref.pushStateOnLoad; | |
| var pushStateSeparator = ref.pushStateSeparator; | |
| var pushStateAnimateOnLoad = ref.pushStateAnimateOnLoad; | |
| var ref$1 = router.params; | |
| var pushStateRoot = ref$1.pushStateRoot; | |
| if (win.cordova && pushState && !pushStateSeparator && !pushStateRoot && doc.location.pathname.indexOf('index.html')) { | |
| // eslint-disable-next-line | |
| console.warn('Framework7: wrong or not complete pushState configuration, trying to guess pushStateRoot'); | |
| pushStateRoot = doc.location.pathname.split('index.html')[0]; | |
| } | |
| if (!pushState || !pushStateOnLoad) { | |
| if (!initUrl) { | |
| initUrl = documentUrl; | |
| } | |
| if (doc.location.search && initUrl.indexOf('?') < 0) { | |
| initUrl += doc.location.search; | |
| } | |
| if (doc.location.hash && initUrl.indexOf('#') < 0) { | |
| initUrl += doc.location.hash; | |
| } | |
| } else { | |
| if (pushStateRoot && documentUrl.indexOf(pushStateRoot) >= 0) { | |
| documentUrl = documentUrl.split(pushStateRoot)[1]; | |
| if (documentUrl === '') { documentUrl = '/'; } | |
| } | |
| if (pushStateSeparator.length > 0 && documentUrl.indexOf(pushStateSeparator) >= 0) { | |
| initUrl = documentUrl.split(pushStateSeparator)[1]; | |
| } else { | |
| initUrl = documentUrl; | |
| } | |
| router.restoreHistory(); | |
| if (router.history.indexOf(initUrl) >= 0) { | |
| router.history = router.history.slice(0, router.history.indexOf(initUrl) + 1); | |
| } else if (router.params.url === initUrl) { | |
| router.history = [initUrl]; | |
| } else if (History.state && History.state[view.id] && History.state[view.id].url === router.history[router.history.length - 1]) { | |
| initUrl = router.history[router.history.length - 1]; | |
| } else { | |
| router.history = [documentUrl.split(pushStateSeparator)[0] || '/', initUrl]; | |
| } | |
| if (router.history.length > 1) { | |
| historyRestored = true; | |
| } else { | |
| router.history = []; | |
| } | |
| router.saveHistory(); | |
| } | |
| var currentRoute; | |
| if (router.history.length > 1) { | |
| // Will load page | |
| currentRoute = router.findMatchingRoute(router.history[0]); | |
| if (!currentRoute) { | |
| currentRoute = Utils.extend(router.parseRouteUrl(router.history[0]), { | |
| route: { | |
| url: router.history[0], | |
| path: router.history[0].split('?')[0], | |
| }, | |
| }); | |
| } | |
| } else { | |
| // Don't load page | |
| currentRoute = router.findMatchingRoute(initUrl); | |
| if (!currentRoute) { | |
| currentRoute = Utils.extend(router.parseRouteUrl(initUrl), { | |
| route: { | |
| url: initUrl, | |
| path: initUrl.split('?')[0], | |
| }, | |
| }); | |
| } | |
| } | |
| if (router.params.stackPages) { | |
| router.$el.children('.page').each(function (index, pageEl) { | |
| var $pageEl = $(pageEl); | |
| router.initialPages.push($pageEl[0]); | |
| if (router.separateNavbar && $pageEl.children('.navbar').length > 0) { | |
| router.initialNavbars.push($pageEl.children('.navbar').find('.navbar-inner')[0]); | |
| } | |
| }); | |
| } | |
| if (router.$el.children('.page:not(.stacked)').length === 0 && initUrl) { | |
| // No pages presented in DOM, reload new page | |
| router.navigate(initUrl, { | |
| initial: true, | |
| reloadCurrent: true, | |
| pushState: false, | |
| }); | |
| } else { | |
| // Init current DOM page | |
| var hasTabRoute; | |
| router.currentRoute = currentRoute; | |
| router.$el.children('.page:not(.stacked)').each(function (index, pageEl) { | |
| var $pageEl = $(pageEl); | |
| var $navbarInnerEl; | |
| $pageEl.addClass('page-current'); | |
| if (router.separateNavbar) { | |
| $navbarInnerEl = $pageEl.children('.navbar').children('.navbar-inner'); | |
| if ($navbarInnerEl.length > 0) { | |
| if (!router.$navbarEl.parents(doc).length) { | |
| router.$el.prepend(router.$navbarEl); | |
| } | |
| $navbarInnerEl.addClass('navbar-current'); | |
| router.$navbarEl.append($navbarInnerEl); | |
| if ($navbarInnerEl.children('.title-large').length) { | |
| $navbarInnerEl.addClass('navbar-inner-large'); | |
| } | |
| $pageEl.children('.navbar').remove(); | |
| } else { | |
| router.$navbarEl.addClass('navbar-hidden'); | |
| if ($navbarInnerEl.children('.title-large').length) { | |
| router.$navbarEl.addClass('navbar-hidden navbar-large-hidden'); | |
| } | |
| } | |
| } | |
| if (router.currentRoute && router.currentRoute.route && router.currentRoute.route.master && router.params.masterDetailBreakpoint > 0) { | |
| $pageEl.addClass('page-master'); | |
| $pageEl.trigger('page:role', { role: 'master' }); | |
| if ($navbarInnerEl && $navbarInnerEl.length) { | |
| $navbarInnerEl.addClass('navbar-master'); | |
| } | |
| } | |
| var initOptions = { | |
| route: router.currentRoute, | |
| }; | |
| if (router.currentRoute && router.currentRoute.route && router.currentRoute.route.options) { | |
| Utils.extend(initOptions, router.currentRoute.route.options); | |
| } | |
| router.currentPageEl = $pageEl[0]; | |
| if (router.separateNavbar && $navbarInnerEl.length) { | |
| router.currentNavbarEl = $navbarInnerEl[0]; | |
| } | |
| router.removeThemeElements($pageEl); | |
| if (router.separateNavbar && $navbarInnerEl.length) { | |
| router.removeThemeElements($navbarInnerEl); | |
| } | |
| if (initOptions.route.route.tab) { | |
| hasTabRoute = true; | |
| router.tabLoad(initOptions.route.route.tab, Utils.extend({}, initOptions)); | |
| } | |
| router.pageCallback('init', $pageEl, $navbarInnerEl, 'current', undefined, initOptions); | |
| }); | |
| if (historyRestored) { | |
| router.navigate(initUrl, { | |
| initial: true, | |
| pushState: false, | |
| history: false, | |
| animate: pushStateAnimateOnLoad, | |
| once: { | |
| pageAfterIn: function pageAfterIn() { | |
| if (router.history.length > 2) { | |
| router.back({ preload: true }); | |
| } | |
| }, | |
| }, | |
| }); | |
| } | |
| if (!historyRestored && !hasTabRoute) { | |
| router.history.push(initUrl); | |
| router.saveHistory(); | |
| } | |
| } | |
| if (initUrl && pushState && pushStateOnLoad && (!History.state || !History.state[view.id])) { | |
| History.initViewState(view.id, { | |
| url: initUrl, | |
| }); | |
| } | |
| router.emit('local::init routerInit', router); | |
| }; | |
| Router.prototype.destroy = function destroy () { | |
| var router = this; | |
| router.emit('local::destroy routerDestroy', router); | |
| // Delete props & methods | |
| Object.keys(router).forEach(function (routerProp) { | |
| router[routerProp] = null; | |
| delete router[routerProp]; | |
| }); | |
| router = null; | |
| }; | |
| return Router; | |
| }(Framework7Class)); | |
| // Load | |
| Router.prototype.forward = forward; | |
| Router.prototype.load = load; | |
| Router.prototype.navigate = navigate; | |
| Router.prototype.refreshPage = refreshPage; | |
| // Tab | |
| Router.prototype.tabLoad = tabLoad; | |
| Router.prototype.tabRemove = tabRemove; | |
| // Modal | |
| Router.prototype.modalLoad = modalLoad; | |
| Router.prototype.modalRemove = modalRemove; | |
| // Back | |
| Router.prototype.backward = backward; | |
| Router.prototype.loadBack = loadBack; | |
| Router.prototype.back = back; | |
| // Clear previoius pages from the DOM | |
| Router.prototype.clearPreviousPages = clearPreviousPages; | |
| // Clear history | |
| Router.prototype.clearPreviousHistory = clearPreviousHistory; | |
| var Router$1 = { | |
| name: 'router', | |
| static: { | |
| Router: Router, | |
| }, | |
| instance: { | |
| cache: { | |
| xhr: [], | |
| templates: [], | |
| components: [], | |
| }, | |
| }, | |
| create: function create() { | |
| var instance = this; | |
| if (instance.app) { | |
| // View Router | |
| if (instance.params.router) { | |
| instance.router = new Router(instance.app, instance); | |
| } | |
| } else { | |
| // App Router | |
| instance.router = new Router(instance); | |
| } | |
| }, | |
| }; | |
| var View = /*@__PURE__*/(function (Framework7Class$$1) { | |
| function View(appInstance, el, viewParams) { | |
| if ( viewParams === void 0 ) viewParams = {}; | |
| Framework7Class$$1.call(this, viewParams, [appInstance]); | |
| var app = appInstance; | |
| var $el = $(el); | |
| var view = this; | |
| var defaults = { | |
| routes: [], | |
| routesAdd: [], | |
| }; | |
| // Default View params | |
| view.params = Utils.extend(defaults, app.params.view, viewParams); | |
| // Routes | |
| if (view.params.routes.length > 0) { | |
| view.routes = view.params.routes; | |
| } else { | |
| view.routes = [].concat(app.routes, view.params.routesAdd); | |
| } | |
| // Selector | |
| var selector; | |
| if (typeof el === 'string') { selector = el; } | |
| else { | |
| // Supposed to be HTMLElement or Dom7 | |
| selector = ($el.attr('id') ? ("#" + ($el.attr('id'))) : '') + ($el.attr('class') ? ("." + ($el.attr('class').replace(/ /g, '.').replace('.active', ''))) : ''); | |
| } | |
| // DynamicNavbar | |
| var $navbarEl; | |
| if (app.theme === 'ios' && view.params.iosDynamicNavbar && view.params.iosSeparateDynamicNavbar) { | |
| $navbarEl = $el.children('.navbar').eq(0); | |
| if ($navbarEl.length === 0) { | |
| $navbarEl = $('<div class="navbar"></div>'); | |
| } | |
| } | |
| // View Props | |
| Utils.extend(false, view, { | |
| app: app, | |
| $el: $el, | |
| el: $el[0], | |
| name: view.params.name, | |
| main: view.params.main || $el.hasClass('view-main'), | |
| $navbarEl: $navbarEl, | |
| navbarEl: $navbarEl ? $navbarEl[0] : undefined, | |
| selector: selector, | |
| history: [], | |
| scrollHistory: {}, | |
| }); | |
| // Save in DOM | |
| $el[0].f7View = view; | |
| // Install Modules | |
| view.useModules(); | |
| // Add to app | |
| app.views.push(view); | |
| if (view.main) { | |
| app.views.main = view; | |
| } | |
| if (view.name) { | |
| app.views[view.name] = view; | |
| } | |
| // Index | |
| view.index = app.views.indexOf(view); | |
| // View ID | |
| var viewId; | |
| if (view.name) { | |
| viewId = "view_" + (view.name); | |
| } else if (view.main) { | |
| viewId = 'view_main'; | |
| } else { | |
| viewId = "view_" + (view.index); | |
| } | |
| view.id = viewId; | |
| // Init View | |
| if (app.initialized) { | |
| view.init(); | |
| } else { | |
| app.on('init', function () { | |
| view.init(); | |
| }); | |
| } | |
| return view; | |
| } | |
| if ( Framework7Class$$1 ) View.__proto__ = Framework7Class$$1; | |
| View.prototype = Object.create( Framework7Class$$1 && Framework7Class$$1.prototype ); | |
| View.prototype.constructor = View; | |
| View.prototype.destroy = function destroy () { | |
| var view = this; | |
| var app = view.app; | |
| view.$el.trigger('view:beforedestroy', view); | |
| view.emit('local::beforeDestroy viewBeforeDestroy', view); | |
| app.off('resize', view.checkmasterDetailBreakpoint); | |
| if (view.main) { | |
| app.views.main = null; | |
| delete app.views.main; | |
| } else if (view.name) { | |
| app.views[view.name] = null; | |
| delete app.views[view.name]; | |
| } | |
| view.$el[0].f7View = null; | |
| delete view.$el[0].f7View; | |
| app.views.splice(app.views.indexOf(view), 1); | |
| // Destroy Router | |
| if (view.params.router && view.router) { | |
| view.router.destroy(); | |
| } | |
| view.emit('local::destroy viewDestroy', view); | |
| // Delete props & methods | |
| Object.keys(view).forEach(function (viewProp) { | |
| view[viewProp] = null; | |
| delete view[viewProp]; | |
| }); | |
| view = null; | |
| }; | |
| View.prototype.checkmasterDetailBreakpoint = function checkmasterDetailBreakpoint () { | |
| var view = this; | |
| var app = view.app; | |
| var wasMasterDetail = view.$el.hasClass('view-master-detail'); | |
| if (app.width >= view.params.masterDetailBreakpoint) { | |
| view.$el.addClass('view-master-detail'); | |
| if (!wasMasterDetail) { | |
| view.emit('local::masterDetailBreakpoint viewMasterDetailBreakpoint'); | |
| view.$el.trigger('view:masterDetailBreakpoint', view); | |
| } | |
| } else { | |
| view.$el.removeClass('view-master-detail'); | |
| if (wasMasterDetail) { | |
| view.emit('local::masterDetailBreakpoint viewMasterDetailBreakpoint'); | |
| view.$el.trigger('view:masterDetailBreakpoint', view); | |
| } | |
| } | |
| }; | |
| View.prototype.initMasterDetail = function initMasterDetail () { | |
| var view = this; | |
| var app = view.app; | |
| view.checkmasterDetailBreakpoint = view.checkmasterDetailBreakpoint.bind(view); | |
| view.checkmasterDetailBreakpoint(); | |
| app.on('resize', view.checkmasterDetailBreakpoint); | |
| }; | |
| View.prototype.init = function init () { | |
| var view = this; | |
| if (view.params.router) { | |
| if (view.params.masterDetailBreakpoint > 0) { | |
| view.initMasterDetail(); | |
| } | |
| view.router.init(); | |
| view.$el.trigger('view:init', view); | |
| view.emit('local::init viewInit', view); | |
| } | |
| }; | |
| return View; | |
| }(Framework7Class)); | |
| // Use Router | |
| View.use(Router$1); | |
| function initClicks(app) { | |
| function handleClicks(e) { | |
| var $clickedEl = $(e.target); | |
| var $clickedLinkEl = $clickedEl.closest('a'); | |
| var isLink = $clickedLinkEl.length > 0; | |
| var url = isLink && $clickedLinkEl.attr('href'); | |
| var isTabLink = isLink && $clickedLinkEl.hasClass('tab-link') && ($clickedLinkEl.attr('data-tab') || (url && url.indexOf('#') === 0)); | |
| // Check if link is external | |
| if (isLink) { | |
| // eslint-disable-next-line | |
| if ($clickedLinkEl.is(app.params.clicks.externalLinks) || (url && url.indexOf('javascript:') >= 0)) { | |
| var target = $clickedLinkEl.attr('target'); | |
| if ( | |
| url | |
| && win.cordova | |
| && win.cordova.InAppBrowser | |
| && (target === '_system' || target === '_blank') | |
| ) { | |
| e.preventDefault(); | |
| win.cordova.InAppBrowser.open(url, target); | |
| } | |
| return; | |
| } | |
| } | |
| // Modules Clicks | |
| Object.keys(app.modules).forEach(function (moduleName) { | |
| var moduleClicks = app.modules[moduleName].clicks; | |
| if (!moduleClicks) { return; } | |
| Object.keys(moduleClicks).forEach(function (clickSelector) { | |
| var matchingClickedElement = $clickedEl.closest(clickSelector).eq(0); | |
| if (matchingClickedElement.length > 0) { | |
| moduleClicks[clickSelector].call(app, matchingClickedElement, matchingClickedElement.dataset(), e); | |
| } | |
| }); | |
| }); | |
| // Load Page | |
| var clickedLinkData = {}; | |
| if (isLink) { | |
| e.preventDefault(); | |
| clickedLinkData = $clickedLinkEl.dataset(); | |
| } | |
| // Prevent Router | |
| if ($clickedLinkEl.hasClass('prevent-router') || $clickedLinkEl.hasClass('router-prevent')) { return; } | |
| var validUrl = url && url.length > 0 && url !== '#' && !isTabLink; | |
| if (validUrl || $clickedLinkEl.hasClass('back')) { | |
| var view; | |
| if (clickedLinkData.view) { | |
| view = $(clickedLinkData.view)[0].f7View; | |
| } else { | |
| view = $clickedEl.parents('.view')[0] && $clickedEl.parents('.view')[0].f7View; | |
| if (!$clickedLinkEl.hasClass('back') && view && view.params.linksView) { | |
| if (typeof view.params.linksView === 'string') { view = $(view.params.linksView)[0].f7View; } | |
| else if (view.params.linksView instanceof View) { view = view.params.linksView; } | |
| } | |
| } | |
| if (!view) { | |
| if (app.views.main) { view = app.views.main; } | |
| } | |
| if (!view || !view.router) { return; } | |
| if (clickedLinkData.context && typeof clickedLinkData.context === 'string') { | |
| try { | |
| clickedLinkData.context = JSON.parse(clickedLinkData.context); | |
| } catch (err) { | |
| // something wrong there | |
| } | |
| } | |
| if ($clickedLinkEl[0].f7RouteProps) { | |
| clickedLinkData.props = $clickedLinkEl[0].f7RouteProps; | |
| } | |
| if ($clickedLinkEl.hasClass('back')) { view.router.back(url, clickedLinkData); } | |
| else { view.router.navigate(url, clickedLinkData); } | |
| } | |
| } | |
| app.on('click', handleClicks); | |
| // TODO: check if need this in iOS | |
| // Prevent scrolling on overlays | |
| // function preventScrolling(e) { | |
| // e.preventDefault(); | |
| // } | |
| // if (Support.touch && !Device.android) { | |
| // const activeListener = Support.passiveListener ? { passive: false, capture: false } : false; | |
| // $(document).on((app.params.touch.fastClicks ? 'touchstart' : 'touchmove'), '.panel-backdrop, .dialog-backdrop, .preloader-backdrop, .popup-backdrop, .searchbar-backdrop', preventScrolling, activeListener); | |
| // } | |
| } | |
| var ClicksModule = { | |
| name: 'clicks', | |
| params: { | |
| clicks: { | |
| // External Links | |
| externalLinks: '.external', | |
| }, | |
| }, | |
| on: { | |
| init: function init() { | |
| var app = this; | |
| initClicks(app); | |
| }, | |
| }, | |
| }; | |
| var RouterTemplateLoaderModule = { | |
| name: 'routerTemplateLoader', | |
| proto: { | |
| templateLoader: function templateLoader(template, templateUrl, options, resolve, reject) { | |
| var router = this; | |
| function compile(t) { | |
| var compiledHtml; | |
| var context; | |
| try { | |
| context = options.context || {}; | |
| if (typeof context === 'function') { context = context.call(router); } | |
| else if (typeof context === 'string') { | |
| try { | |
| context = JSON.parse(context); | |
| } catch (err) { | |
| reject(); | |
| throw (err); | |
| } | |
| } | |
| if (typeof t === 'function') { | |
| compiledHtml = t(context); | |
| } else { | |
| compiledHtml = Template7.compile(t)(Utils.extend({}, context || {}, { | |
| $app: router.app, | |
| $root: Utils.extend({}, router.app.data, router.app.methods), | |
| $route: options.route, | |
| $f7route: options.route, | |
| $router: router, | |
| $f7router: router, | |
| $theme: { | |
| ios: router.app.theme === 'ios', | |
| md: router.app.theme === 'md', | |
| }, | |
| })); | |
| } | |
| } catch (err) { | |
| reject(); | |
| throw (err); | |
| } | |
| resolve(compiledHtml, { context: context }); | |
| } | |
| if (templateUrl) { | |
| // Load via XHR | |
| if (router.xhr) { | |
| router.xhr.abort(); | |
| router.xhr = false; | |
| } | |
| router | |
| .xhrRequest(templateUrl, options) | |
| .then(function (templateContent) { | |
| compile(templateContent); | |
| }) | |
| .catch(function () { | |
| reject(); | |
| }); | |
| } else { | |
| compile(template); | |
| } | |
| }, | |
| modalTemplateLoader: function modalTemplateLoader(template, templateUrl, options, resolve, reject) { | |
| var router = this; | |
| return router.templateLoader(template, templateUrl, options, function (html) { | |
| resolve(html); | |
| }, reject); | |
| }, | |
| tabTemplateLoader: function tabTemplateLoader(template, templateUrl, options, resolve, reject) { | |
| var router = this; | |
| return router.templateLoader(template, templateUrl, options, function (html) { | |
| resolve(html); | |
| }, reject); | |
| }, | |
| pageTemplateLoader: function pageTemplateLoader(template, templateUrl, options, resolve, reject) { | |
| var router = this; | |
| return router.templateLoader(template, templateUrl, options, function (html, newOptions) { | |
| if ( newOptions === void 0 ) newOptions = {}; | |
| resolve(router.getPageEl(html), newOptions); | |
| }, reject); | |
| }, | |
| }, | |
| }; | |
| var RouterComponentLoaderModule = { | |
| name: 'routerComponentLoader', | |
| proto: { | |
| componentLoader: function componentLoader(component, componentUrl, options, resolve, reject) { | |
| if ( options === void 0 ) options = {}; | |
| var router = this; | |
| var app = router.app; | |
| var url = typeof component === 'string' ? component : componentUrl; | |
| var compiledUrl = router.replaceRequestUrlParams(url, options); | |
| function compile(componentOptions) { | |
| var context = options.context || {}; | |
| if (typeof context === 'function') { context = context.call(router); } | |
| else if (typeof context === 'string') { | |
| try { | |
| context = JSON.parse(context); | |
| } catch (err) { | |
| reject(); | |
| throw (err); | |
| } | |
| } | |
| var extendContext = Utils.merge( | |
| {}, | |
| context, | |
| { | |
| $route: options.route, | |
| $f7route: options.route, | |
| $router: router, | |
| $f7router: router, | |
| $theme: { | |
| ios: app.theme === 'ios', | |
| md: app.theme === 'md', | |
| }, | |
| } | |
| ); | |
| var createdComponent = app.component.create(componentOptions, extendContext); | |
| resolve(createdComponent.el); | |
| } | |
| var cachedComponent; | |
| if (compiledUrl) { | |
| router.cache.components.forEach(function (cached) { | |
| if (cached.url === compiledUrl) { cachedComponent = cached.component; } | |
| }); | |
| } | |
| if (compiledUrl && cachedComponent) { | |
| compile(cachedComponent); | |
| } else if (compiledUrl && !cachedComponent) { | |
| // Load via XHR | |
| if (router.xhr) { | |
| router.xhr.abort(); | |
| router.xhr = false; | |
| } | |
| router | |
| .xhrRequest(url, options) | |
| .then(function (loadedComponent) { | |
| var parsedComponent = app.component.parse(loadedComponent); | |
| router.cache.components.push({ | |
| url: compiledUrl, | |
| component: parsedComponent, | |
| }); | |
| compile(parsedComponent); | |
| }) | |
| .catch(function (err) { | |
| reject(); | |
| throw (err); | |
| }); | |
| } else { | |
| compile(component); | |
| } | |
| }, | |
| modalComponentLoader: function modalComponentLoader(rootEl, component, componentUrl, options, resolve, reject) { | |
| var router = this; | |
| router.componentLoader(component, componentUrl, options, function (el) { | |
| resolve(el); | |
| }, reject); | |
| }, | |
| tabComponentLoader: function tabComponentLoader(tabEl, component, componentUrl, options, resolve, reject) { | |
| var router = this; | |
| router.componentLoader(component, componentUrl, options, function (el) { | |
| resolve(el); | |
| }, reject); | |
| }, | |
| pageComponentLoader: function pageComponentLoader(routerEl, component, componentUrl, options, resolve, reject) { | |
| var router = this; | |
| router.componentLoader(component, componentUrl, options, function (el, newOptions) { | |
| if ( newOptions === void 0 ) newOptions = {}; | |
| resolve(el, newOptions); | |
| }, reject); | |
| }, | |
| }, | |
| }; | |
| var HistoryModule = { | |
| name: 'history', | |
| static: { | |
| history: History, | |
| }, | |
| on: { | |
| init: function init() { | |
| History.init(this); | |
| }, | |
| }, | |
| }; | |
| var keyPrefix = 'f7storage-'; | |
| var Storage = { | |
| get: function get(key) { | |
| return new Promise(function (resolve, reject) { | |
| try { | |
| var value = JSON.parse(win.localStorage.getItem(("" + keyPrefix + key))); | |
| resolve(value); | |
| } catch (e) { | |
| reject(e); | |
| } | |
| }); | |
| }, | |
| set: function set(key, value) { | |
| return new Promise(function (resolve, reject) { | |
| try { | |
| win.localStorage.setItem(("" + keyPrefix + key), JSON.stringify(value)); | |
| resolve(); | |
| } catch (e) { | |
| reject(e); | |
| } | |
| }); | |
| }, | |
| remove: function remove(key) { | |
| return new Promise(function (resolve, reject) { | |
| try { | |
| win.localStorage.removeItem(("" + keyPrefix + key)); | |
| resolve(); | |
| } catch (e) { | |
| reject(e); | |
| } | |
| }); | |
| }, | |
| clear: function clear() { | |
| }, | |
| length: function length() { | |
| }, | |
| keys: function keys() { | |
| return new Promise(function (resolve, reject) { | |
| try { | |
| var keys = Object.keys(win.localStorage) | |
| .filter(function (keyName) { return keyName.indexOf(keyPrefix) === 0; }) | |
| .map(function (keyName) { return keyName.replace(keyPrefix, ''); }); | |
| resolve(keys); | |
| } catch (e) { | |
| reject(e); | |
| } | |
| }); | |
| }, | |
| forEach: function forEach(callback) { | |
| return new Promise(function (resolve, reject) { | |
| try { | |
| Object.keys(win.localStorage) | |
| .filter(function (keyName) { return keyName.indexOf(keyPrefix) === 0; }) | |
| .forEach(function (keyName, index) { | |
| var key = keyName.replace(keyPrefix, ''); | |
| Storage.get(key).then(function (value) { | |
| callback(key, value, index); | |
| }); | |
| }); | |
| resolve(); | |
| } catch (e) { | |
| reject(e); | |
| } | |
| }); | |
| }, | |
| }; | |
| var StorageModule = { | |
| name: 'storage', | |
| static: { | |
| Storage: Storage, | |
| storage: Storage, | |
| }, | |
| }; | |
| function vnode(sel, data, children, text, elm) { | |
| var key = data === undefined ? undefined : data.key; | |
| return { sel: sel, data: data, children: children, | |
| text: text, elm: elm, key: key }; | |
| } | |
| var array = Array.isArray; | |
| function primitive(s) { | |
| return typeof s === 'string' || typeof s === 'number'; | |
| } | |
| function addNS(data, children, sel) { | |
| data.ns = 'http://www.w3.org/2000/svg'; | |
| if (sel !== 'foreignObject' && children !== undefined) { | |
| for (var i = 0; i < children.length; ++i) { | |
| var childData = children[i].data; | |
| if (childData !== undefined) { | |
| addNS(childData, children[i].children, children[i].sel); | |
| } | |
| } | |
| } | |
| } | |
| function h(sel, b, c) { | |
| var data = {}, children, text, i; | |
| if (c !== undefined) { | |
| data = b; | |
| if (array(c)) { | |
| children = c; | |
| } | |
| else if (primitive(c)) { | |
| text = c; | |
| } | |
| else if (c && c.sel) { | |
| children = [c]; | |
| } | |
| } | |
| else if (b !== undefined) { | |
| if (array(b)) { | |
| children = b; | |
| } | |
| else if (primitive(b)) { | |
| text = b; | |
| } | |
| else if (b && b.sel) { | |
| children = [b]; | |
| } | |
| else { | |
| data = b; | |
| } | |
| } | |
| if (array(children)) { | |
| for (i = 0; i < children.length; ++i) { | |
| if (primitive(children[i])) | |
| { children[i] = vnode(undefined, undefined, undefined, children[i], undefined); } | |
| } | |
| } | |
| if (sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g' && | |
| (sel.length === 3 || sel[3] === '.' || sel[3] === '#')) { | |
| addNS(data, children, sel); | |
| } | |
| return vnode(sel, data, children, text, undefined); | |
| } | |
| /* eslint no-use-before-define: "off" */ | |
| var selfClosing = 'area base br col command embed hr img input keygen link menuitem meta param source track wbr'.split(' '); | |
| var propsAttrs = 'hidden checked disabled readonly selected autocomplete autofocus autoplay required multiple value'.split(' '); | |
| var booleanProps = 'hidden checked disabled readonly selected autocomplete autofocus autoplay required multiple readOnly'.split(' '); | |
| var tempDom = doc.createElement('div'); | |
| function getHooks(data, app, initial, isRoot) { | |
| var hooks = {}; | |
| if (!data || !data.attrs || !data.attrs.class) { return hooks; } | |
| var classNames = data.attrs.class; | |
| var insert = []; | |
| var destroy = []; | |
| var update = []; | |
| var postpatch = []; | |
| classNames.split(' ').forEach(function (className) { | |
| if (!initial) { | |
| insert.push.apply(insert, app.getVnodeHooks('insert', className)); | |
| } | |
| destroy.push.apply(destroy, app.getVnodeHooks('destroy', className)); | |
| update.push.apply(update, app.getVnodeHooks('update', className)); | |
| postpatch.push.apply(postpatch, app.getVnodeHooks('postpatch', className)); | |
| }); | |
| if (isRoot && !initial) { | |
| postpatch.push(function (oldVnode, vnode) { | |
| var vn = vnode || oldVnode; | |
| if (!vn) { return; } | |
| if (vn.data && vn.data.context && vn.data.context.$options.updated) { | |
| vn.data.context.$options.updated(); | |
| } | |
| }); | |
| } | |
| if (insert.length === 0 && destroy.length === 0 && update.length === 0 && postpatch.length === 0) { | |
| return hooks; | |
| } | |
| if (insert.length) { | |
| hooks.insert = function (vnode) { | |
| insert.forEach(function (f) { return f(vnode); }); | |
| }; | |
| } | |
| if (destroy.length) { | |
| hooks.destroy = function (vnode) { | |
| destroy.forEach(function (f) { return f(vnode); }); | |
| }; | |
| } | |
| if (update.length) { | |
| hooks.update = function (oldVnode, vnode) { | |
| update.forEach(function (f) { return f(oldVnode, vnode); }); | |
| }; | |
| } | |
| if (postpatch.length) { | |
| hooks.postpatch = function (oldVnode, vnode) { | |
| postpatch.forEach(function (f) { return f(oldVnode, vnode); }); | |
| }; | |
| } | |
| return hooks; | |
| } | |
| function getEventHandler(handlerString, context, ref) { | |
| if ( ref === void 0 ) ref = {}; | |
| var stop = ref.stop; | |
| var prevent = ref.prevent; | |
| var once = ref.once; | |
| var fired = false; | |
| var methodName; | |
| var method; | |
| var customArgs = []; | |
| var needMethodBind = true; | |
| if (handlerString.indexOf('(') < 0) { | |
| methodName = handlerString; | |
| } else { | |
| methodName = handlerString.split('(')[0]; | |
| } | |
| if (methodName.indexOf('.') >= 0) { | |
| methodName.split('.').forEach(function (path, pathIndex) { | |
| if (pathIndex === 0 && path === 'this') { return; } | |
| if (pathIndex === 0 && path === 'window') { | |
| // eslint-disable-next-line | |
| method = win; | |
| needMethodBind = false; | |
| return; | |
| } | |
| if (!method) { method = context; } | |
| if (method[path]) { method = method[path]; } | |
| else { | |
| throw new Error(("Framework7: Component doesn't have method \"" + (methodName.split('.').slice(0, pathIndex + 1).join('.')) + "\"")); | |
| } | |
| }); | |
| } else { | |
| if (!context[methodName]) { | |
| throw new Error(("Framework7: Component doesn't have method \"" + methodName + "\"")); | |
| } | |
| method = context[methodName]; | |
| } | |
| if (needMethodBind) { | |
| method = method.bind(context); | |
| } | |
| function handler() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var e = args[0]; | |
| if (once && fired) { return; } | |
| if (stop) { e.stopPropagation(); } | |
| if (prevent) { e.preventDefault(); } | |
| fired = true; | |
| if (handlerString.indexOf('(') < 0) { | |
| customArgs = args; | |
| } else { | |
| handlerString.split('(')[1].split(')')[0].split(',').forEach(function (argument) { | |
| var arg = argument.trim(); | |
| // eslint-disable-next-line | |
| if (!isNaN(arg)) { arg = parseFloat(arg); } | |
| else if (arg === 'true') { arg = true; } | |
| else if (arg === 'false') { arg = false; } | |
| else if (arg === 'null') { arg = null; } | |
| else if (arg === 'undefined') { arg = undefined; } | |
| else if (arg[0] === '"') { arg = arg.replace(/"/g, ''); } | |
| else if (arg[0] === '\'') { arg = arg.replace(/'/g, ''); } | |
| else if (arg.indexOf('.') > 0) { | |
| var deepArg; | |
| arg.split('.').forEach(function (path) { | |
| if (!deepArg) { deepArg = context; } | |
| deepArg = deepArg[path]; | |
| }); | |
| arg = deepArg; | |
| } else { | |
| arg = context[arg]; | |
| } | |
| customArgs.push(arg); | |
| }); | |
| } | |
| method.apply(void 0, customArgs); | |
| } | |
| return handler; | |
| } | |
| function getData(el, context, app, initial, isRoot) { | |
| var data = { | |
| context: context, | |
| }; | |
| var attributes = el.attributes; | |
| Array.prototype.forEach.call(attributes, function (attr) { | |
| var attrName = attr.name; | |
| var attrValue = attr.value; | |
| if (propsAttrs.indexOf(attrName) >= 0) { | |
| // Props | |
| if (!data.props) { data.props = {}; } | |
| if (attrName === 'readonly') { | |
| attrName = 'readOnly'; | |
| } | |
| if (booleanProps.indexOf(attrName) >= 0) { | |
| // eslint-disable-next-line | |
| data.props[attrName] = attrValue === false ? false : true; | |
| } else { | |
| data.props[attrName] = attrValue; | |
| } | |
| } else if (attrName === 'key') { | |
| // Key | |
| data.key = attrValue; | |
| } else if (attrName.indexOf('@') === 0) { | |
| // Events | |
| if (!data.on) { data.on = {}; } | |
| var eventName = attrName.substr(1); | |
| var stop = false; | |
| var prevent = false; | |
| var once = false; | |
| if (eventName.indexOf('.') >= 0) { | |
| eventName.split('.').forEach(function (eventNamePart, eventNameIndex) { | |
| if (eventNameIndex === 0) { eventName = eventNamePart; } | |
| else { | |
| if (eventNamePart === 'stop') { stop = true; } | |
| if (eventNamePart === 'prevent') { prevent = true; } | |
| if (eventNamePart === 'once') { once = true; } | |
| } | |
| }); | |
| } | |
| data.on[eventName] = getEventHandler(attrValue, context, { stop: stop, prevent: prevent, once: once }); | |
| } else if (attrName === 'style') { | |
| // Style | |
| if (attrValue.indexOf('{') >= 0 && attrValue.indexOf('}') >= 0) { | |
| try { | |
| data.style = JSON.parse(attrValue); | |
| } catch (e) { | |
| if (!data.attrs) { data.attrs = {}; } | |
| data.attrs.style = attrValue; | |
| } | |
| } else { | |
| if (!data.attrs) { data.attrs = {}; } | |
| data.attrs.style = attrValue; | |
| } | |
| } else { | |
| // Rest of attribures | |
| if (!data.attrs) { data.attrs = {}; } | |
| data.attrs[attrName] = attrValue; | |
| // ID -> Key | |
| if (attrName === 'id' && !data.key && !isRoot) { | |
| data.key = attrValue; | |
| } | |
| } | |
| }); | |
| var hooks = getHooks(data, app, initial, isRoot); | |
| hooks.prepatch = function (oldVnode, vnode) { | |
| if (!oldVnode || !vnode) { return; } | |
| if (oldVnode && oldVnode.data && oldVnode.data.props) { | |
| Object.keys(oldVnode.data.props).forEach(function (key) { | |
| if (booleanProps.indexOf(key) < 0) { return; } | |
| if (!vnode.data) { vnode.data = {}; } | |
| if (!vnode.data.props) { vnode.data.props = {}; } | |
| if (oldVnode.data.props[key] === true && !(key in vnode.data.props)) { | |
| vnode.data.props[key] = false; | |
| } | |
| }); | |
| } | |
| }; | |
| if (hooks) { | |
| data.hook = hooks; | |
| } | |
| return data; | |
| } | |
| function getChildren(el, context, app, initial) { | |
| var children = []; | |
| var nodes = el.childNodes; | |
| for (var i = 0; i < nodes.length; i += 1) { | |
| var childNode = nodes[i]; | |
| var child = elementToVNode(childNode, context, app, initial); | |
| if (child) { | |
| children.push(child); | |
| } | |
| } | |
| return children; | |
| } | |
| function elementToVNode(el, context, app, initial, isRoot) { | |
| if (el.nodeType === 1) { | |
| // element | |
| var tagName = el.nodeName.toLowerCase(); | |
| return h( | |
| tagName, | |
| getData(el, context, app, initial, isRoot), | |
| selfClosing.indexOf(tagName) >= 0 ? [] : getChildren(el, context, app, initial) | |
| ); | |
| } | |
| if (el.nodeType === 3) { | |
| // text | |
| return el.textContent; | |
| } | |
| return null; | |
| } | |
| function vdom (html, context, app, initial) { | |
| if ( html === void 0 ) html = ''; | |
| // Save to temp dom | |
| tempDom.innerHTML = html.trim(); | |
| // Parse DOM | |
| var rootEl; | |
| for (var i = 0; i < tempDom.childNodes.length; i += 1) { | |
| if (!rootEl && tempDom.childNodes[i].nodeType === 1) { | |
| rootEl = tempDom.childNodes[i]; | |
| } | |
| } | |
| var result = elementToVNode(rootEl, context, app, initial, true); | |
| // Clean | |
| tempDom.innerHTML = ''; | |
| return result; | |
| } | |
| function createElement(tagName) { | |
| return document.createElement(tagName); | |
| } | |
| function createElementNS(namespaceURI, qualifiedName) { | |
| return document.createElementNS(namespaceURI, qualifiedName); | |
| } | |
| function createTextNode(text) { | |
| return document.createTextNode(text); | |
| } | |
| function createComment(text) { | |
| return document.createComment(text); | |
| } | |
| function insertBefore$1(parentNode, newNode, referenceNode) { | |
| parentNode.insertBefore(newNode, referenceNode); | |
| } | |
| function removeChild(node, child) { | |
| if (!node) { return; } | |
| node.removeChild(child); | |
| } | |
| function appendChild(node, child) { | |
| node.appendChild(child); | |
| } | |
| function parentNode(node) { | |
| return node.parentNode; | |
| } | |
| function nextSibling(node) { | |
| return node.nextSibling; | |
| } | |
| function tagName(elm) { | |
| return elm.tagName; | |
| } | |
| function setTextContent(node, text) { | |
| node.textContent = text; | |
| } | |
| function getTextContent(node) { | |
| return node.textContent; | |
| } | |
| function isElement(node) { | |
| return node.nodeType === 1; | |
| } | |
| function isText(node) { | |
| return node.nodeType === 3; | |
| } | |
| function isComment(node) { | |
| return node.nodeType === 8; | |
| } | |
| var htmlDomApi = { | |
| createElement: createElement, | |
| createElementNS: createElementNS, | |
| createTextNode: createTextNode, | |
| createComment: createComment, | |
| insertBefore: insertBefore$1, | |
| removeChild: removeChild, | |
| appendChild: appendChild, | |
| parentNode: parentNode, | |
| nextSibling: nextSibling, | |
| tagName: tagName, | |
| setTextContent: setTextContent, | |
| getTextContent: getTextContent, | |
| isElement: isElement, | |
| isText: isText, | |
| isComment: isComment, | |
| }; | |
| function isUndef(s) { return s === undefined; } | |
| function isDef(s) { return s !== undefined; } | |
| var emptyNode = vnode('', {}, [], undefined, undefined); | |
| function sameVnode(vnode1, vnode2) { | |
| return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel; | |
| } | |
| function isVnode(vnode$$1) { | |
| return vnode$$1.sel !== undefined; | |
| } | |
| function createKeyToOldIdx(children, beginIdx, endIdx) { | |
| var i, map = {}, key, ch; | |
| for (i = beginIdx; i <= endIdx; ++i) { | |
| ch = children[i]; | |
| if (ch != null) { | |
| key = ch.key; | |
| if (key !== undefined) | |
| { map[key] = i; } | |
| } | |
| } | |
| return map; | |
| } | |
| var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post']; | |
| function init$1(modules, domApi) { | |
| var i, j, cbs = {}; | |
| var api = domApi !== undefined ? domApi : htmlDomApi; | |
| for (i = 0; i < hooks.length; ++i) { | |
| cbs[hooks[i]] = []; | |
| for (j = 0; j < modules.length; ++j) { | |
| var hook = modules[j][hooks[i]]; | |
| if (hook !== undefined) { | |
| cbs[hooks[i]].push(hook); | |
| } | |
| } | |
| } | |
| function emptyNodeAt(elm) { | |
| var id = elm.id ? '#' + elm.id : ''; | |
| var c = elm.className ? '.' + elm.className.split(' ').join('.') : ''; | |
| return vnode(api.tagName(elm).toLowerCase() + id + c, {}, [], undefined, elm); | |
| } | |
| function createRmCb(childElm, listeners) { | |
| return function rmCb() { | |
| if (--listeners === 0) { | |
| var parent_1 = api.parentNode(childElm); | |
| api.removeChild(parent_1, childElm); | |
| } | |
| }; | |
| } | |
| function createElm(vnode$$1, insertedVnodeQueue) { | |
| var i, data = vnode$$1.data; | |
| if (data !== undefined) { | |
| if (isDef(i = data.hook) && isDef(i = i.init)) { | |
| i(vnode$$1); | |
| data = vnode$$1.data; | |
| } | |
| } | |
| var children = vnode$$1.children, sel = vnode$$1.sel; | |
| if (sel === '!') { | |
| if (isUndef(vnode$$1.text)) { | |
| vnode$$1.text = ''; | |
| } | |
| vnode$$1.elm = api.createComment(vnode$$1.text); | |
| } | |
| else if (sel !== undefined) { | |
| // Parse selector | |
| var hashIdx = sel.indexOf('#'); | |
| var dotIdx = sel.indexOf('.', hashIdx); | |
| var hash = hashIdx > 0 ? hashIdx : sel.length; | |
| var dot = dotIdx > 0 ? dotIdx : sel.length; | |
| var tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel; | |
| var elm = vnode$$1.elm = isDef(data) && isDef(i = data.ns) ? api.createElementNS(i, tag) | |
| : api.createElement(tag); | |
| if (hash < dot) | |
| { elm.setAttribute('id', sel.slice(hash + 1, dot)); } | |
| if (dotIdx > 0) | |
| { elm.setAttribute('class', sel.slice(dot + 1).replace(/\./g, ' ')); } | |
| for (i = 0; i < cbs.create.length; ++i) | |
| { cbs.create[i](emptyNode, vnode$$1); } | |
| if (array(children)) { | |
| for (i = 0; i < children.length; ++i) { | |
| var ch = children[i]; | |
| if (ch != null) { | |
| api.appendChild(elm, createElm(ch, insertedVnodeQueue)); | |
| } | |
| } | |
| } | |
| else if (primitive(vnode$$1.text)) { | |
| api.appendChild(elm, api.createTextNode(vnode$$1.text)); | |
| } | |
| i = vnode$$1.data.hook; // Reuse variable | |
| if (isDef(i)) { | |
| if (i.create) | |
| { i.create(emptyNode, vnode$$1); } | |
| if (i.insert) | |
| { insertedVnodeQueue.push(vnode$$1); } | |
| } | |
| } | |
| else { | |
| vnode$$1.elm = api.createTextNode(vnode$$1.text); | |
| } | |
| return vnode$$1.elm; | |
| } | |
| function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) { | |
| for (; startIdx <= endIdx; ++startIdx) { | |
| var ch = vnodes[startIdx]; | |
| if (ch != null) { | |
| api.insertBefore(parentElm, createElm(ch, insertedVnodeQueue), before); | |
| } | |
| } | |
| } | |
| function invokeDestroyHook(vnode$$1) { | |
| var i, j, data = vnode$$1.data; | |
| if (data !== undefined) { | |
| if (isDef(i = data.hook) && isDef(i = i.destroy)) | |
| { i(vnode$$1); } | |
| for (i = 0; i < cbs.destroy.length; ++i) | |
| { cbs.destroy[i](vnode$$1); } | |
| if (vnode$$1.children !== undefined) { | |
| for (j = 0; j < vnode$$1.children.length; ++j) { | |
| i = vnode$$1.children[j]; | |
| if (i != null && typeof i !== "string") { | |
| invokeDestroyHook(i); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| function removeVnodes(parentElm, vnodes, startIdx, endIdx) { | |
| for (; startIdx <= endIdx; ++startIdx) { | |
| var i_1 = void 0, listeners = void 0, rm = void 0, ch = vnodes[startIdx]; | |
| if (ch != null) { | |
| if (isDef(ch.sel)) { | |
| invokeDestroyHook(ch); | |
| listeners = cbs.remove.length + 1; | |
| rm = createRmCb(ch.elm, listeners); | |
| for (i_1 = 0; i_1 < cbs.remove.length; ++i_1) | |
| { cbs.remove[i_1](ch, rm); } | |
| if (isDef(i_1 = ch.data) && isDef(i_1 = i_1.hook) && isDef(i_1 = i_1.remove)) { | |
| i_1(ch, rm); | |
| } | |
| else { | |
| rm(); | |
| } | |
| } | |
| else { | |
| api.removeChild(parentElm, ch.elm); | |
| } | |
| } | |
| } | |
| } | |
| function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) { | |
| var oldStartIdx = 0, newStartIdx = 0; | |
| var oldEndIdx = oldCh.length - 1; | |
| var oldStartVnode = oldCh[0]; | |
| var oldEndVnode = oldCh[oldEndIdx]; | |
| var newEndIdx = newCh.length - 1; | |
| var newStartVnode = newCh[0]; | |
| var newEndVnode = newCh[newEndIdx]; | |
| var oldKeyToIdx; | |
| var idxInOld; | |
| var elmToMove; | |
| var before; | |
| while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { | |
| if (oldStartVnode == null) { | |
| oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left | |
| } | |
| else if (oldEndVnode == null) { | |
| oldEndVnode = oldCh[--oldEndIdx]; | |
| } | |
| else if (newStartVnode == null) { | |
| newStartVnode = newCh[++newStartIdx]; | |
| } | |
| else if (newEndVnode == null) { | |
| newEndVnode = newCh[--newEndIdx]; | |
| } | |
| else if (sameVnode(oldStartVnode, newStartVnode)) { | |
| patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue); | |
| oldStartVnode = oldCh[++oldStartIdx]; | |
| newStartVnode = newCh[++newStartIdx]; | |
| } | |
| else if (sameVnode(oldEndVnode, newEndVnode)) { | |
| patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue); | |
| oldEndVnode = oldCh[--oldEndIdx]; | |
| newEndVnode = newCh[--newEndIdx]; | |
| } | |
| else if (sameVnode(oldStartVnode, newEndVnode)) { | |
| patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue); | |
| api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm)); | |
| oldStartVnode = oldCh[++oldStartIdx]; | |
| newEndVnode = newCh[--newEndIdx]; | |
| } | |
| else if (sameVnode(oldEndVnode, newStartVnode)) { | |
| patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue); | |
| api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm); | |
| oldEndVnode = oldCh[--oldEndIdx]; | |
| newStartVnode = newCh[++newStartIdx]; | |
| } | |
| else { | |
| if (oldKeyToIdx === undefined) { | |
| oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx); | |
| } | |
| idxInOld = oldKeyToIdx[newStartVnode.key]; | |
| if (isUndef(idxInOld)) { | |
| api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm); | |
| newStartVnode = newCh[++newStartIdx]; | |
| } | |
| else { | |
| elmToMove = oldCh[idxInOld]; | |
| if (elmToMove.sel !== newStartVnode.sel) { | |
| api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm); | |
| } | |
| else { | |
| patchVnode(elmToMove, newStartVnode, insertedVnodeQueue); | |
| oldCh[idxInOld] = undefined; | |
| api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm); | |
| } | |
| newStartVnode = newCh[++newStartIdx]; | |
| } | |
| } | |
| } | |
| if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) { | |
| if (oldStartIdx > oldEndIdx) { | |
| before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm; | |
| addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue); | |
| } | |
| else { | |
| removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx); | |
| } | |
| } | |
| } | |
| function patchVnode(oldVnode, vnode$$1, insertedVnodeQueue) { | |
| var i, hook; | |
| if (isDef(i = vnode$$1.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) { | |
| i(oldVnode, vnode$$1); | |
| } | |
| var elm = vnode$$1.elm = oldVnode.elm; | |
| var oldCh = oldVnode.children; | |
| var ch = vnode$$1.children; | |
| if (oldVnode === vnode$$1) | |
| { return; } | |
| if (vnode$$1.data !== undefined) { | |
| for (i = 0; i < cbs.update.length; ++i) | |
| { cbs.update[i](oldVnode, vnode$$1); } | |
| i = vnode$$1.data.hook; | |
| if (isDef(i) && isDef(i = i.update)) | |
| { i(oldVnode, vnode$$1); } | |
| } | |
| if (isUndef(vnode$$1.text)) { | |
| if (isDef(oldCh) && isDef(ch)) { | |
| if (oldCh !== ch) | |
| { updateChildren(elm, oldCh, ch, insertedVnodeQueue); } | |
| } | |
| else if (isDef(ch)) { | |
| if (isDef(oldVnode.text)) | |
| { api.setTextContent(elm, ''); } | |
| addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue); | |
| } | |
| else if (isDef(oldCh)) { | |
| removeVnodes(elm, oldCh, 0, oldCh.length - 1); | |
| } | |
| else if (isDef(oldVnode.text)) { | |
| api.setTextContent(elm, ''); | |
| } | |
| } | |
| else if (oldVnode.text !== vnode$$1.text) { | |
| api.setTextContent(elm, vnode$$1.text); | |
| } | |
| if (isDef(hook) && isDef(i = hook.postpatch)) { | |
| i(oldVnode, vnode$$1); | |
| } | |
| } | |
| return function patch(oldVnode, vnode$$1) { | |
| var i, elm, parent; | |
| var insertedVnodeQueue = []; | |
| for (i = 0; i < cbs.pre.length; ++i) | |
| { cbs.pre[i](); } | |
| if (!isVnode(oldVnode)) { | |
| oldVnode = emptyNodeAt(oldVnode); | |
| } | |
| if (sameVnode(oldVnode, vnode$$1)) { | |
| patchVnode(oldVnode, vnode$$1, insertedVnodeQueue); | |
| } | |
| else { | |
| elm = oldVnode.elm; | |
| parent = api.parentNode(elm); | |
| createElm(vnode$$1, insertedVnodeQueue); | |
| if (parent !== null) { | |
| api.insertBefore(parent, vnode$$1.elm, api.nextSibling(elm)); | |
| removeVnodes(parent, [oldVnode], 0, 0); | |
| } | |
| } | |
| for (i = 0; i < insertedVnodeQueue.length; ++i) { | |
| insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]); | |
| } | |
| for (i = 0; i < cbs.post.length; ++i) | |
| { cbs.post[i](); } | |
| return vnode$$1; | |
| }; | |
| } | |
| var xlinkNS = 'http://www.w3.org/1999/xlink'; | |
| var xmlNS = 'http://www.w3.org/XML/1998/namespace'; | |
| var colonChar = 58; | |
| var xChar = 120; | |
| function updateAttrs(oldVnode, vnode) { | |
| var key, elm = vnode.elm, oldAttrs = oldVnode.data.attrs, attrs = vnode.data.attrs; | |
| if (!oldAttrs && !attrs) | |
| { return; } | |
| if (oldAttrs === attrs) | |
| { return; } | |
| oldAttrs = oldAttrs || {}; | |
| attrs = attrs || {}; | |
| // update modified attributes, add new attributes | |
| for (key in attrs) { | |
| var cur = attrs[key]; | |
| var old = oldAttrs[key]; | |
| if (old !== cur) { | |
| if (cur === true) { | |
| elm.setAttribute(key, ""); | |
| } | |
| else if (cur === false) { | |
| elm.removeAttribute(key); | |
| } | |
| else { | |
| if (key.charCodeAt(0) !== xChar) { | |
| elm.setAttribute(key, cur); | |
| } | |
| else if (key.charCodeAt(3) === colonChar) { | |
| // Assume xml namespace | |
| elm.setAttributeNS(xmlNS, key, cur); | |
| } | |
| else if (key.charCodeAt(5) === colonChar) { | |
| // Assume xlink namespace | |
| elm.setAttributeNS(xlinkNS, key, cur); | |
| } | |
| else { | |
| elm.setAttribute(key, cur); | |
| } | |
| } | |
| } | |
| } | |
| // remove removed attributes | |
| // use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value) | |
| // the other option is to remove all attributes with value == undefined | |
| for (key in oldAttrs) { | |
| if (!(key in attrs)) { | |
| elm.removeAttribute(key); | |
| } | |
| } | |
| } | |
| var attributesModule = { create: updateAttrs, update: updateAttrs }; | |
| function updateProps(oldVnode, vnode) { | |
| var key, cur, old, elm = vnode.elm, oldProps = oldVnode.data.props, props = vnode.data.props; | |
| if (!oldProps && !props) | |
| { return; } | |
| if (oldProps === props) | |
| { return; } | |
| oldProps = oldProps || {}; | |
| props = props || {}; | |
| for (key in oldProps) { | |
| if (!props[key]) { | |
| delete elm[key]; | |
| } | |
| } | |
| for (key in props) { | |
| cur = props[key]; | |
| old = oldProps[key]; | |
| if (old !== cur && (key !== 'value' || elm[key] !== cur)) { | |
| elm[key] = cur; | |
| } | |
| } | |
| } | |
| var propsModule = { create: updateProps, update: updateProps }; | |
| var raf = (typeof window !== 'undefined' && window.requestAnimationFrame) || setTimeout; | |
| var nextFrame = function (fn) { raf(function () { raf(fn); }); }; | |
| function setNextFrame(obj, prop, val) { | |
| nextFrame(function () { obj[prop] = val; }); | |
| } | |
| function updateStyle(oldVnode, vnode) { | |
| var cur, name, elm = vnode.elm, oldStyle = oldVnode.data.style, style = vnode.data.style; | |
| if (!oldStyle && !style) | |
| { return; } | |
| if (oldStyle === style) | |
| { return; } | |
| oldStyle = oldStyle || {}; | |
| style = style || {}; | |
| var oldHasDel = 'delayed' in oldStyle; | |
| for (name in oldStyle) { | |
| if (!style[name]) { | |
| if (name[0] === '-' && name[1] === '-') { | |
| elm.style.removeProperty(name); | |
| } | |
| else { | |
| elm.style[name] = ''; | |
| } | |
| } | |
| } | |
| for (name in style) { | |
| cur = style[name]; | |
| if (name === 'delayed' && style.delayed) { | |
| for (var name2 in style.delayed) { | |
| cur = style.delayed[name2]; | |
| if (!oldHasDel || cur !== oldStyle.delayed[name2]) { | |
| setNextFrame(elm.style, name2, cur); | |
| } | |
| } | |
| } | |
| else if (name !== 'remove' && cur !== oldStyle[name]) { | |
| if (name[0] === '-' && name[1] === '-') { | |
| elm.style.setProperty(name, cur); | |
| } | |
| else { | |
| elm.style[name] = cur; | |
| } | |
| } | |
| } | |
| } | |
| function applyDestroyStyle(vnode) { | |
| var style, name, elm = vnode.elm, s = vnode.data.style; | |
| if (!s || !(style = s.destroy)) | |
| { return; } | |
| for (name in style) { | |
| elm.style[name] = style[name]; | |
| } | |
| } | |
| function applyRemoveStyle(vnode, rm) { | |
| var s = vnode.data.style; | |
| if (!s || !s.remove) { | |
| rm(); | |
| return; | |
| } | |
| var name, elm = vnode.elm, i = 0, compStyle, style = s.remove, amount = 0, applied = []; | |
| for (name in style) { | |
| applied.push(name); | |
| elm.style[name] = style[name]; | |
| } | |
| compStyle = getComputedStyle(elm); | |
| var props = compStyle['transition-property'].split(', '); | |
| for (; i < props.length; ++i) { | |
| if (applied.indexOf(props[i]) !== -1) | |
| { amount++; } | |
| } | |
| elm.addEventListener('transitionend', function (ev) { | |
| if (ev.target === elm) | |
| { --amount; } | |
| if (amount === 0) | |
| { rm(); } | |
| }); | |
| } | |
| var styleModule = { | |
| create: updateStyle, | |
| update: updateStyle, | |
| destroy: applyDestroyStyle, | |
| remove: applyRemoveStyle | |
| }; | |
| function invokeHandler(handler, event, args) { | |
| if (typeof handler === 'function') { | |
| // call function handler | |
| handler.apply(void 0, [ event ].concat( args )); | |
| } | |
| } | |
| function handleEvent(event, args, vnode) { | |
| var name = event.type; | |
| var on = vnode.data.on; | |
| // call event handler(s) if exists | |
| if (on && on[name]) { | |
| invokeHandler(on[name], event, args, vnode); | |
| } | |
| } | |
| function createListener() { | |
| return function handler(event) { | |
| var args = [], len = arguments.length - 1; | |
| while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ]; | |
| handleEvent(event, args, handler.vnode); | |
| }; | |
| } | |
| function updateEvents(oldVnode, vnode) { | |
| var oldOn = oldVnode.data.on; | |
| var oldListener = oldVnode.listener; | |
| var oldElm = oldVnode.elm; | |
| var on = vnode && vnode.data.on; | |
| var elm = (vnode && vnode.elm); | |
| // optimization for reused immutable handlers | |
| if (oldOn === on) { | |
| return; | |
| } | |
| // remove existing listeners which no longer used | |
| if (oldOn && oldListener) { | |
| // if element changed or deleted we remove all existing listeners unconditionally | |
| if (!on) { | |
| Object.keys(oldOn).forEach(function (name) { | |
| $(oldElm).off(name, oldListener); | |
| }); | |
| } else { | |
| Object.keys(oldOn).forEach(function (name) { | |
| if (!on[name]) { | |
| $(oldElm).off(name, oldListener); | |
| } | |
| }); | |
| } | |
| } | |
| // add new listeners which has not already attached | |
| if (on) { | |
| // reuse existing listener or create new | |
| var listener = oldVnode.listener || createListener(); | |
| vnode.listener = listener; | |
| // update vnode for listener | |
| listener.vnode = vnode; | |
| // if element changed or added we add all needed listeners unconditionally | |
| if (!oldOn) { | |
| Object.keys(on).forEach(function (name) { | |
| $(elm).on(name, listener); | |
| }); | |
| } else { | |
| Object.keys(on).forEach(function (name) { | |
| if (!oldOn[name]) { | |
| $(elm).on(name, listener); | |
| } | |
| }); | |
| } | |
| } | |
| } | |
| var eventListenersModule = { | |
| create: updateEvents, | |
| update: updateEvents, | |
| destroy: updateEvents, | |
| }; | |
| /* eslint import/no-named-as-default: off */ | |
| var patch = init$1([ | |
| attributesModule, | |
| propsModule, | |
| styleModule, | |
| eventListenersModule ]); | |
| var Framework7Component = function Framework7Component(app, options, extendContext) { | |
| if ( extendContext === void 0 ) extendContext = {}; | |
| var id = Utils.id(); | |
| var self = Utils.merge( | |
| this, | |
| extendContext, | |
| { | |
| $: $, | |
| $$: $, | |
| $dom7: $, | |
| $app: app, | |
| $f7: app, | |
| $options: Utils.extend({ id: id }, options), | |
| } | |
| ); | |
| var $options = self.$options; | |
| // Root data and methods | |
| Object.defineProperty(self, '$root', { | |
| enumerable: true, | |
| configurable: true, | |
| get: function get() { | |
| var root = Utils.merge({}, app.data, app.methods); | |
| if (win && win.Proxy) { | |
| root = new win.Proxy(root, { | |
| set: function set(target, name, val) { | |
| app.data[name] = val; | |
| }, | |
| deleteProperty: function deleteProperty(target, name) { | |
| delete app.data[name]; | |
| delete app.methods[name]; | |
| }, | |
| has: function has(target, name) { | |
| return (name in app.data || name in app.methods); | |
| }, | |
| }); | |
| } | |
| return root; | |
| }, | |
| set: function set() {}, | |
| }); | |
| // Apply context | |
| ('beforeCreate created beforeMount mounted beforeDestroy destroyed updated').split(' ').forEach(function (cycleKey) { | |
| if ($options[cycleKey]) { $options[cycleKey] = $options[cycleKey].bind(self); } | |
| }); | |
| if ($options.data) { | |
| $options.data = $options.data.bind(self); | |
| // Data | |
| Utils.extend(self, $options.data()); | |
| } | |
| if ($options.render) { $options.render = $options.render.bind(self); } | |
| if ($options.methods) { | |
| Object.keys($options.methods).forEach(function (methodName) { | |
| self[methodName] = $options.methods[methodName].bind(self); | |
| }); | |
| } | |
| // Bind Events | |
| if ($options.on) { | |
| Object.keys($options.on).forEach(function (eventName) { | |
| $options.on[eventName] = $options.on[eventName].bind(self); | |
| }); | |
| } | |
| if ($options.once) { | |
| Object.keys($options.once).forEach(function (eventName) { | |
| $options.once[eventName] = $options.once[eventName].bind(self); | |
| }); | |
| } | |
| // Before create hook | |
| if ($options.beforeCreate) { $options.beforeCreate(); } | |
| // Render | |
| var html = self.$render(); | |
| // Make Dom | |
| if (html && typeof html === 'string') { | |
| html = html.trim(); | |
| self.$vnode = vdom(html, self, app, true); | |
| self.el = doc.createElement('div'); | |
| patch(self.el, self.$vnode); | |
| } else if (html) { | |
| self.el = html; | |
| } | |
| self.$el = $(self.el); | |
| // Set styles scope ID | |
| if ($options.style) { | |
| self.$styleEl = doc.createElement('style'); | |
| self.$styleEl.innerHTML = $options.style; | |
| if ($options.styleScoped) { | |
| self.el.setAttribute(("data-f7-" + ($options.id)), ''); | |
| } | |
| } | |
| self.$attachEvents(); | |
| // Created callback | |
| if ($options.created) { $options.created(); } | |
| // Store component instance | |
| self.el.f7Component = self; | |
| return self; | |
| }; | |
| Framework7Component.prototype.$attachEvents = function $attachEvents () { | |
| var self = this; | |
| var $options = self.$options; | |
| var $el = self.$el; | |
| if ($options.on) { | |
| Object.keys($options.on).forEach(function (eventName) { | |
| $el.on(Utils.eventNameToColonCase(eventName), $options.on[eventName]); | |
| }); | |
| } | |
| if ($options.once) { | |
| Object.keys($options.once).forEach(function (eventName) { | |
| $el.once(Utils.eventNameToColonCase(eventName), $options.once[eventName]); | |
| }); | |
| } | |
| }; | |
| Framework7Component.prototype.$detachEvents = function $detachEvents () { | |
| var self = this; | |
| var $options = self.$options; | |
| var $el = self.$el; | |
| if ($options.on) { | |
| Object.keys($options.on).forEach(function (eventName) { | |
| $el.off(Utils.eventNameToColonCase(eventName), $options.on[eventName]); | |
| }); | |
| } | |
| if ($options.once) { | |
| Object.keys($options.once).forEach(function (eventName) { | |
| $el.off(Utils.eventNameToColonCase(eventName), $options.once[eventName]); | |
| }); | |
| } | |
| }; | |
| Framework7Component.prototype.$render = function $render () { | |
| var self = this; | |
| var $options = self.$options; | |
| var html = ''; | |
| if ($options.render) { | |
| html = $options.render(); | |
| } else if ($options.template) { | |
| if (typeof $options.template === 'string') { | |
| try { | |
| html = Template7.compile($options.template)(self); | |
| } catch (err) { | |
| throw err; | |
| } | |
| } else { | |
| // Supposed to be function | |
| html = $options.template(self); | |
| } | |
| } | |
| return html; | |
| }; | |
| Framework7Component.prototype.$forceUpdate = function $forceUpdate () { | |
| var self = this; | |
| var html = self.$render(); | |
| // Make Dom | |
| if (html && typeof html === 'string') { | |
| html = html.trim(); | |
| var newVNode = vdom(html, self, self.$app); | |
| self.$vnode = patch(self.$vnode, newVNode); | |
| } | |
| }; | |
| Framework7Component.prototype.$setState = function $setState (mergeState) { | |
| var self = this; | |
| Utils.merge(self, mergeState); | |
| self.$forceUpdate(); | |
| }; | |
| Framework7Component.prototype.$mount = function $mount (mountMethod) { | |
| var self = this; | |
| if (self.$options.beforeMount) { self.$options.beforeMount(); } | |
| if (self.$styleEl) { $('head').append(self.$styleEl); } | |
| if (mountMethod) { mountMethod(self.el); } | |
| if (self.$options.mounted) { self.$options.mounted(); } | |
| }; | |
| Framework7Component.prototype.$destroy = function $destroy () { | |
| var self = this; | |
| if (self.$options.beforeDestroy) { self.$options.beforeDestroy(); } | |
| if (self.$styleEl) { $(self.$styleEl).remove(); } | |
| self.$detachEvents(); | |
| if (self.$options.destroyed) { self.$options.destroyed(); } | |
| // Delete component instance | |
| if (self.el && self.el.f7Component) { | |
| self.el.f7Component = null; | |
| delete self.el.f7Component; | |
| } | |
| // Patch with empty node | |
| if (self.$vnode) { | |
| self.$vnode = patch(self.$vnode, { sel: self.$vnode.sel, data: {} }); | |
| } | |
| Utils.deleteProps(self); | |
| }; | |
| function parseComponent(componentString) { | |
| var id = Utils.id(); | |
| var callbackCreateName = "f7_component_create_callback_" + id; | |
| var callbackRenderName = "f7_component_render_callback_" + id; | |
| // Template | |
| var template; | |
| var hasTemplate = componentString.match(/<template([ ]?)([a-z0-9-]*)>/); | |
| var templateType = hasTemplate[2] || 't7'; | |
| if (hasTemplate) { | |
| template = componentString | |
| .split(/<template[ ]?[a-z0-9-]*>/) | |
| .filter(function (item, index) { return index > 0; }) | |
| .join('<template>') | |
| .split('</template>') | |
| .filter(function (item, index, arr) { return index < arr.length - 1; }) | |
| .join('</template>') | |
| .replace(/{{#raw}}([ \n]*)<template/g, '{{#raw}}<template') | |
| .replace(/\/template>([ \n]*){{\/raw}}/g, '/template>{{/raw}}') | |
| .replace(/([ \n])<template/g, '$1{{#raw}}<template') | |
| .replace(/\/template>([ \n])/g, '/template>{{/raw}}$1'); | |
| } | |
| // Parse Styles | |
| var style = null; | |
| var styleScoped = false; | |
| if (componentString.indexOf('<style>') >= 0) { | |
| style = componentString.split('<style>')[1].split('</style>')[0]; | |
| } else if (componentString.indexOf('<style scoped>') >= 0) { | |
| styleScoped = true; | |
| style = componentString.split('<style scoped>')[1].split('</style>')[0]; | |
| style = style.split('\n').map(function (line) { | |
| var trimmedLine = line.trim(); | |
| if (trimmedLine.indexOf('@') === 0) { return line; } | |
| if (line.indexOf('{') >= 0) { | |
| if (line.indexOf('{{this}}') >= 0) { | |
| return line.replace('{{this}}', ("[data-f7-" + id + "]")); | |
| } | |
| return ("[data-f7-" + id + "] " + (line.trim())); | |
| } | |
| return line; | |
| }).join('\n'); | |
| } | |
| // Parse Script | |
| var scriptContent; | |
| var scriptEl; | |
| if (componentString.indexOf('<script>') >= 0) { | |
| var scripts = componentString.split('<script>'); | |
| scriptContent = scripts[scripts.length - 1].split('</script>')[0].trim(); | |
| } else { | |
| scriptContent = 'return {}'; | |
| } | |
| if (!scriptContent || !scriptContent.trim()) { scriptContent = 'return {}'; } | |
| scriptContent = "window." + callbackCreateName + " = function () {" + scriptContent + "}"; | |
| // Insert Script El | |
| scriptEl = doc.createElement('script'); | |
| scriptEl.innerHTML = scriptContent; | |
| $('head').append(scriptEl); | |
| var component = win[callbackCreateName](); | |
| // Remove Script El | |
| $(scriptEl).remove(); | |
| win[callbackCreateName] = null; | |
| delete win[callbackCreateName]; | |
| // Assign Template | |
| if (!component.template && !component.render) { | |
| component.template = template; | |
| component.templateType = templateType; | |
| } | |
| if (component.template) { | |
| if (component.templateType === 't7') { | |
| component.template = Template7.compile(component.template); | |
| } | |
| if (component.templateType === 'es') { | |
| var renderContent = "window." + callbackRenderName + " = function () {\n return function render() {\n return `" + (component.template) + "`;\n }\n }"; | |
| scriptEl = doc.createElement('script'); | |
| scriptEl.innerHTML = renderContent; | |
| $('head').append(scriptEl); | |
| component.render = win[callbackRenderName](); | |
| // Remove Script El | |
| $(scriptEl).remove(); | |
| win[callbackRenderName] = null; | |
| delete win[callbackRenderName]; | |
| } | |
| } | |
| // Assign Style | |
| if (style) { | |
| component.style = style; | |
| component.styleScoped = styleScoped; | |
| } | |
| // Component ID | |
| component.id = id; | |
| return component; | |
| } | |
| var ComponentModule = { | |
| name: 'component', | |
| create: function create() { | |
| var app = this; | |
| app.component = { | |
| parse: function parse(componentString) { | |
| return parseComponent(componentString); | |
| }, | |
| create: function create(options, extendContext) { | |
| return new Framework7Component(app, options, extendContext); | |
| }, | |
| }; | |
| }, | |
| }; | |
| var SW = { | |
| registrations: [], | |
| register: function register(path, scope) { | |
| var app = this; | |
| if (!('serviceWorker' in window.navigator) || !app.serviceWorker.container) { | |
| return new Promise(function (resolve, reject) { | |
| reject(new Error('Service worker is not supported')); | |
| }); | |
| } | |
| return new Promise(function (resolve, reject) { | |
| app.serviceWorker.container.register(path, (scope ? { scope: scope } : {})) | |
| .then(function (reg) { | |
| SW.registrations.push(reg); | |
| app.emit('serviceWorkerRegisterSuccess', reg); | |
| resolve(reg); | |
| }).catch(function (error) { | |
| app.emit('serviceWorkerRegisterError', error); | |
| reject(error); | |
| }); | |
| }); | |
| }, | |
| unregister: function unregister(registration) { | |
| var app = this; | |
| if (!('serviceWorker' in window.navigator) || !app.serviceWorker.container) { | |
| return new Promise(function (resolve, reject) { | |
| reject(new Error('Service worker is not supported')); | |
| }); | |
| } | |
| var registrations; | |
| if (!registration) { registrations = SW.registrations; } | |
| else if (Array.isArray(registration)) { registrations = registration; } | |
| else { registrations = [registration]; } | |
| return Promise.all(registrations.map(function (reg) { return new Promise(function (resolve, reject) { | |
| reg.unregister() | |
| .then(function () { | |
| if (SW.registrations.indexOf(reg) >= 0) { | |
| SW.registrations.splice(SW.registrations.indexOf(reg), 1); | |
| } | |
| app.emit('serviceWorkerUnregisterSuccess', reg); | |
| resolve(); | |
| }) | |
| .catch(function (error) { | |
| app.emit('serviceWorkerUnregisterError', reg, error); | |
| reject(error); | |
| }); | |
| }); })); | |
| }, | |
| }; | |
| var ServiceWorkerModule = { | |
| name: 'sw', | |
| params: { | |
| serviceWorker: { | |
| path: undefined, | |
| scope: undefined, | |
| }, | |
| }, | |
| create: function create() { | |
| var app = this; | |
| Utils.extend(app, { | |
| serviceWorker: { | |
| container: ('serviceWorker' in window.navigator) ? window.navigator.serviceWorker : undefined, | |
| registrations: SW.registrations, | |
| register: SW.register.bind(app), | |
| unregister: SW.unregister.bind(app), | |
| }, | |
| }); | |
| }, | |
| on: { | |
| init: function init() { | |
| if (!('serviceWorker' in window.navigator)) { return; } | |
| var app = this; | |
| if (!app.serviceWorker.container) { return; } | |
| var paths = app.params.serviceWorker.path; | |
| var scope = app.params.serviceWorker.scope; | |
| if (!paths || (Array.isArray(paths) && !paths.length)) { return; } | |
| var toRegister = Array.isArray(paths) ? paths : [paths]; | |
| toRegister.forEach(function (path) { | |
| app.serviceWorker.register(path, scope); | |
| }); | |
| }, | |
| }, | |
| }; | |
| var Statusbar = { | |
| hide: function hide() { | |
| $('html').removeClass('with-statusbar'); | |
| if (Device.cordova && win.StatusBar) { | |
| win.StatusBar.hide(); | |
| } | |
| }, | |
| show: function show() { | |
| if (Device.cordova && win.StatusBar) { | |
| win.StatusBar.show(); | |
| Utils.nextTick(function () { | |
| if (Device.needsStatusbarOverlay()) { | |
| $('html').addClass('with-statusbar'); | |
| } | |
| }); | |
| return; | |
| } | |
| $('html').addClass('with-statusbar'); | |
| }, | |
| onClick: function onClick() { | |
| var app = this; | |
| var pageContent; | |
| if ($('.popup.modal-in').length > 0) { | |
| // Check for opened popup | |
| pageContent = $('.popup.modal-in').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content'); | |
| } else if ($('.panel.panel-active').length > 0) { | |
| // Check for opened panel | |
| pageContent = $('.panel.panel-active').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content'); | |
| } else if ($('.views > .view.tab-active').length > 0) { | |
| // View in tab bar app layout | |
| pageContent = $('.views > .view.tab-active').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content'); | |
| } else if ($('.views').length > 0) { | |
| pageContent = $('.views').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content'); | |
| } else { | |
| pageContent = app.root.children('.view').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content'); | |
| } | |
| if (pageContent && pageContent.length > 0) { | |
| // Check for tab | |
| if (pageContent.hasClass('tab')) { | |
| pageContent = pageContent.parent('.tabs').children('.page-content.tab-active'); | |
| } | |
| if (pageContent.length > 0) { pageContent.scrollTop(0, 300); } | |
| } | |
| }, | |
| setTextColor: function setTextColor(color) { | |
| if (Device.cordova && win.StatusBar) { | |
| if (color === 'white') { | |
| win.StatusBar.styleLightContent(); | |
| } else { | |
| win.StatusBar.styleDefault(); | |
| } | |
| } | |
| }, | |
| setIosTextColor: function setIosTextColor(color) { | |
| if (!Device.ios) { return; } | |
| Statusbar.setTextColor(color); | |
| }, | |
| setBackgroundColor: function setBackgroundColor(color) { | |
| $('.statusbar').css('background-color', color); | |
| if (Device.cordova && win.StatusBar) { | |
| win.StatusBar.backgroundColorByHexString(color); | |
| } | |
| }, | |
| isVisible: function isVisible() { | |
| if (Device.cordova && win.StatusBar) { | |
| return win.StatusBar.isVisible; | |
| } | |
| return false; | |
| }, | |
| overlaysWebView: function overlaysWebView(overlays) { | |
| if ( overlays === void 0 ) overlays = true; | |
| if (Device.cordova && win.StatusBar) { | |
| win.StatusBar.overlaysWebView(overlays); | |
| if (overlays) { | |
| $('html').addClass('with-statusbar'); | |
| } else { | |
| $('html').removeClass('with-statusbar'); | |
| } | |
| } | |
| }, | |
| checkOverlay: function checkOverlay() { | |
| if (Device.needsStatusbarOverlay()) { | |
| $('html').addClass('with-statusbar'); | |
| } else { | |
| $('html').removeClass('with-statusbar'); | |
| } | |
| }, | |
| init: function init() { | |
| var app = this; | |
| var params = app.params.statusbar; | |
| if (!params.enabled) { return; } | |
| if (params.overlay === 'auto') { | |
| if (Device.needsStatusbarOverlay()) { | |
| $('html').addClass('with-statusbar'); | |
| } else { | |
| $('html').removeClass('with-statusbar'); | |
| } | |
| if (Device.ios && (Device.cordova || Device.webView)) { | |
| if (win.orientation === 0) { | |
| app.once('resize', function () { | |
| Statusbar.checkOverlay(); | |
| }); | |
| } | |
| $(doc).on('resume', function () { | |
| Statusbar.checkOverlay(); | |
| }, false); | |
| app.on(Device.ios ? 'orientationchange' : 'orientationchange resize', function () { | |
| Statusbar.checkOverlay(); | |
| }); | |
| } | |
| } else if (params.overlay === true) { | |
| $('html').addClass('with-statusbar'); | |
| } else if (params.overlay === false) { | |
| $('html').removeClass('with-statusbar'); | |
| } | |
| if (Device.cordova && win.StatusBar) { | |
| if (params.scrollTopOnClick) { | |
| $(win).on('statusTap', Statusbar.onClick.bind(app)); | |
| } | |
| if (Device.ios) { | |
| if (params.iosOverlaysWebView) { | |
| win.StatusBar.overlaysWebView(true); | |
| } else { | |
| win.StatusBar.overlaysWebView(false); | |
| } | |
| if (params.iosTextColor === 'white') { | |
| win.StatusBar.styleLightContent(); | |
| } else { | |
| win.StatusBar.styleDefault(); | |
| } | |
| } | |
| if (Device.android) { | |
| if (params.androidOverlaysWebView) { | |
| win.StatusBar.overlaysWebView(true); | |
| } else { | |
| win.StatusBar.overlaysWebView(false); | |
| } | |
| if (params.androidTextColor === 'white') { | |
| win.StatusBar.styleLightContent(); | |
| } else { | |
| win.StatusBar.styleDefault(); | |
| } | |
| } | |
| } | |
| if (params.iosBackgroundColor && Device.ios) { | |
| Statusbar.setBackgroundColor(params.iosBackgroundColor); | |
| } | |
| if ((params.materialBackgroundColor || params.androidBackgroundColor) && Device.android) { | |
| Statusbar.setBackgroundColor(params.materialBackgroundColor || params.androidBackgroundColor); | |
| } | |
| }, | |
| }; | |
| var Statusbar$1 = { | |
| name: 'statusbar', | |
| params: { | |
| statusbar: { | |
| enabled: true, | |
| overlay: 'auto', | |
| scrollTopOnClick: true, | |
| iosOverlaysWebView: true, | |
| iosTextColor: 'black', | |
| iosBackgroundColor: null, | |
| androidOverlaysWebView: false, | |
| androidTextColor: 'black', | |
| androidBackgroundColor: null, | |
| }, | |
| }, | |
| create: function create() { | |
| var app = this; | |
| Utils.extend(app, { | |
| statusbar: { | |
| checkOverlay: Statusbar.checkOverlay, | |
| hide: Statusbar.hide, | |
| show: Statusbar.show, | |
| overlaysWebView: Statusbar.overlaysWebView, | |
| setTextColor: Statusbar.setTextColor, | |
| setBackgroundColor: Statusbar.setBackgroundColor, | |
| isVisible: Statusbar.isVisible, | |
| init: Statusbar.init.bind(app), | |
| }, | |
| }); | |
| }, | |
| on: { | |
| init: function init() { | |
| var app = this; | |
| Statusbar.init.call(app); | |
| }, | |
| }, | |
| clicks: { | |
| '.statusbar': function onStatusbarClick() { | |
| var app = this; | |
| if (!app.params.statusbar.enabled) { return; } | |
| if (!app.params.statusbar.scrollTopOnClick) { return; } | |
| Statusbar.onClick.call(app); | |
| }, | |
| }, | |
| }; | |
| function getCurrentView(app) { | |
| var popoverView = $('.popover.modal-in .view'); | |
| var popupView = $('.popup.modal-in .view'); | |
| var panelView = $('.panel.panel-active .view'); | |
| var appViews = $('.views'); | |
| if (appViews.length === 0) { appViews = app.root; } | |
| // Find active view as tab | |
| var appView = appViews.children('.view'); | |
| // Propably in tabs or split view | |
| if (appView.length > 1) { | |
| if (appView.hasClass('tab')) { | |
| // Tabs | |
| appView = appViews.children('.view.tab-active'); | |
| } | |
| } | |
| if (popoverView.length > 0 && popoverView[0].f7View) { return popoverView[0].f7View; } | |
| if (popupView.length > 0 && popupView[0].f7View) { return popupView[0].f7View; } | |
| if (panelView.length > 0 && panelView[0].f7View) { return panelView[0].f7View; } | |
| if (appView.length > 0) { | |
| if (appView.length === 1 && appView[0].f7View) { return appView[0].f7View; } | |
| if (appView.length > 1) { | |
| return app.views.main; | |
| } | |
| } | |
| return undefined; | |
| } | |
| var View$1 = { | |
| name: 'view', | |
| params: { | |
| view: { | |
| name: undefined, | |
| main: false, | |
| router: true, | |
| linksView: null, | |
| stackPages: false, | |
| xhrCache: true, | |
| xhrCacheIgnore: [], | |
| xhrCacheIgnoreGetParameters: false, | |
| xhrCacheDuration: 1000 * 60 * 10, // Ten minutes | |
| preloadPreviousPage: true, | |
| allowDuplicateUrls: false, | |
| reloadPages: false, | |
| reloadDetail: false, | |
| masterDetailBreakpoint: 0, | |
| removeElements: true, | |
| removeElementsWithTimeout: false, | |
| removeElementsTimeout: 0, | |
| restoreScrollTopOnBack: true, | |
| unloadTabContent: true, | |
| passRouteQueryToRequest: true, | |
| passRouteParamsToRequest: false, | |
| // Swipe Back | |
| iosSwipeBack: true, | |
| iosSwipeBackAnimateShadow: true, | |
| iosSwipeBackAnimateOpacity: true, | |
| iosSwipeBackActiveArea: 30, | |
| iosSwipeBackThreshold: 0, | |
| mdSwipeBack: false, | |
| mdSwipeBackAnimateShadow: true, | |
| mdSwipeBackAnimateOpacity: false, | |
| mdSwipeBackActiveArea: 30, | |
| mdSwipeBackThreshold: 0, | |
| // Push State | |
| pushState: false, | |
| pushStateRoot: undefined, | |
| pushStateAnimate: true, | |
| pushStateAnimateOnLoad: false, | |
| pushStateSeparator: '#!', | |
| pushStateOnLoad: true, | |
| // Animate Pages | |
| animate: true, | |
| // iOS Dynamic Navbar | |
| iosDynamicNavbar: true, | |
| iosSeparateDynamicNavbar: true, | |
| // Animate iOS Navbar Back Icon | |
| iosAnimateNavbarBackIcon: true, | |
| // Delays | |
| iosPageLoadDelay: 0, | |
| mdPageLoadDelay: 0, | |
| // Routes hooks | |
| routesBeforeEnter: null, | |
| routesBeforeLeave: null, | |
| }, | |
| }, | |
| static: { | |
| View: View, | |
| }, | |
| create: function create() { | |
| var app = this; | |
| Utils.extend(app, { | |
| views: Utils.extend([], { | |
| create: function create(el, params) { | |
| return new View(app, el, params); | |
| }, | |
| get: function get(viewEl) { | |
| var $viewEl = $(viewEl); | |
| if ($viewEl.length && $viewEl[0].f7View) { return $viewEl[0].f7View; } | |
| return undefined; | |
| }, | |
| }), | |
| }); | |
| Object.defineProperty(app.views, 'current', { | |
| enumerable: true, | |
| configurable: true, | |
| get: function get() { | |
| return getCurrentView(app); | |
| }, | |
| }); | |
| // Alias | |
| app.view = app.views; | |
| }, | |
| on: { | |
| init: function init() { | |
| var app = this; | |
| $('.view-init').each(function (index, viewEl) { | |
| if (viewEl.f7View) { return; } | |
| var viewParams = $(viewEl).dataset(); | |
| app.views.create(viewEl, viewParams); | |
| }); | |
| }, | |
| modalOpen: function modalOpen(modal) { | |
| var app = this; | |
| modal.$el.find('.view-init').each(function (index, viewEl) { | |
| if (viewEl.f7View) { return; } | |
| var viewParams = $(viewEl).dataset(); | |
| app.views.create(viewEl, viewParams); | |
| }); | |
| }, | |
| modalBeforeDestroy: function modalBeforeDestroy(modal) { | |
| if (!modal || !modal.$el) { return; } | |
| modal.$el.find('.view-init').each(function (index, viewEl) { | |
| var view = viewEl.f7View; | |
| if (!view) { return; } | |
| view.destroy(); | |
| }); | |
| }, | |
| }, | |
| }; | |
| var Navbar = { | |
| size: function size(el) { | |
| var app = this; | |
| if (app.theme === 'md' && !app.params.navbar.mdCenterTitle) { return; } | |
| var $el = $(el); | |
| if ($el.hasClass('navbar')) { | |
| $el = $el.children('.navbar-inner').each(function (index, navbarEl) { | |
| app.navbar.size(navbarEl); | |
| }); | |
| return; | |
| } | |
| if ( | |
| $el.hasClass('stacked') | |
| || $el.parents('.stacked').length > 0 | |
| || $el.parents('.tab:not(.tab-active)').length > 0 | |
| || $el.parents('.popup:not(.modal-in)').length > 0 | |
| ) { | |
| return; | |
| } | |
| if (app.theme === 'md' && app.params.navbar.mdCenterTitle) { | |
| $el.addClass('navbar-inner-centered-title'); | |
| } | |
| if (app.theme === 'ios' && !app.params.navbar.iosCenterTitle) { | |
| $el.addClass('navbar-inner-left-title'); | |
| } | |
| var $viewEl = $el.parents('.view').eq(0); | |
| var left = app.rtl ? $el.children('.right') : $el.children('.left'); | |
| var right = app.rtl ? $el.children('.left') : $el.children('.right'); | |
| var title = $el.children('.title'); | |
| var subnavbar = $el.children('.subnavbar'); | |
| var noLeft = left.length === 0; | |
| var noRight = right.length === 0; | |
| var leftWidth = noLeft ? 0 : left.outerWidth(true); | |
| var rightWidth = noRight ? 0 : right.outerWidth(true); | |
| var titleWidth = title.outerWidth(true); | |
| var navbarStyles = $el.styles(); | |
| var navbarWidth = $el[0].offsetWidth; | |
| var navbarInnerWidth = navbarWidth - parseInt(navbarStyles.paddingLeft, 10) - parseInt(navbarStyles.paddingRight, 10); | |
| var isPrevious = $el.hasClass('navbar-previous'); | |
| var sliding = $el.hasClass('sliding'); | |
| var router; | |
| var dynamicNavbar; | |
| var separateNavbar; | |
| var separateNavbarRightOffset = 0; | |
| var separateNavbarLeftOffset = 0; | |
| if ($viewEl.length > 0 && $viewEl[0].f7View) { | |
| router = $viewEl[0].f7View.router; | |
| dynamicNavbar = router && router.dynamicNavbar; | |
| separateNavbar = router && router.separateNavbar; | |
| if (!separateNavbar) { | |
| separateNavbarRightOffset = navbarWidth; | |
| separateNavbarLeftOffset = navbarWidth / 5; | |
| } | |
| } | |
| var currLeft; | |
| var diff; | |
| if (noRight) { | |
| currLeft = navbarInnerWidth - titleWidth; | |
| } | |
| if (noLeft) { | |
| currLeft = 0; | |
| } | |
| if (!noLeft && !noRight) { | |
| currLeft = ((navbarInnerWidth - rightWidth - titleWidth) + leftWidth) / 2; | |
| } | |
| var requiredLeft = (navbarInnerWidth - titleWidth) / 2; | |
| if (navbarInnerWidth - leftWidth - rightWidth > titleWidth) { | |
| if (requiredLeft < leftWidth) { | |
| requiredLeft = leftWidth; | |
| } | |
| if (requiredLeft + titleWidth > navbarInnerWidth - rightWidth) { | |
| requiredLeft = navbarInnerWidth - rightWidth - titleWidth; | |
| } | |
| diff = requiredLeft - currLeft; | |
| } else { | |
| diff = 0; | |
| } | |
| // RTL inverter | |
| var inverter = app.rtl ? -1 : 1; | |
| if (dynamicNavbar && app.theme === 'ios') { | |
| if (title.hasClass('sliding') || (title.length > 0 && sliding)) { | |
| var titleLeftOffset = (-(currLeft + diff) * inverter) + separateNavbarLeftOffset; | |
| var titleRightOffset = ((navbarInnerWidth - currLeft - diff - titleWidth) * inverter) - separateNavbarRightOffset; | |
| if (isPrevious) { | |
| if (router && router.params.iosAnimateNavbarBackIcon) { | |
| var activeNavbarBackLink = $el.parent().find('.navbar-current').children('.left.sliding').find('.back .icon ~ span'); | |
| if (activeNavbarBackLink.length > 0) { | |
| titleLeftOffset += activeNavbarBackLink[0].offsetLeft; | |
| } | |
| } | |
| } | |
| title[0].f7NavbarLeftOffset = titleLeftOffset; | |
| title[0].f7NavbarRightOffset = titleRightOffset; | |
| } | |
| if (!noLeft && (left.hasClass('sliding') || sliding)) { | |
| if (app.rtl) { | |
| left[0].f7NavbarLeftOffset = (-(navbarInnerWidth - left[0].offsetWidth) / 2) * inverter; | |
| left[0].f7NavbarRightOffset = leftWidth * inverter; | |
| } else { | |
| left[0].f7NavbarLeftOffset = -leftWidth + separateNavbarLeftOffset; | |
| left[0].f7NavbarRightOffset = ((navbarInnerWidth - left[0].offsetWidth) / 2) - separateNavbarRightOffset; | |
| if (router && router.params.iosAnimateNavbarBackIcon && left.find('.back .icon').length > 0) { | |
| if (left.find('.back .icon ~ span').length) { | |
| var leftOffset = left[0].f7NavbarLeftOffset; | |
| var rightOffset = left[0].f7NavbarRightOffset; | |
| left[0].f7NavbarLeftOffset = 0; | |
| left[0].f7NavbarRightOffset = 0; | |
| left.find('.back .icon ~ span')[0].f7NavbarLeftOffset = leftOffset; | |
| left.find('.back .icon ~ span')[0].f7NavbarRightOffset = rightOffset - left.find('.back .icon')[0].offsetWidth; | |
| } | |
| } | |
| } | |
| } | |
| if (!noRight && (right.hasClass('sliding') || sliding)) { | |
| if (app.rtl) { | |
| right[0].f7NavbarLeftOffset = -rightWidth * inverter; | |
| right[0].f7NavbarRightOffset = ((navbarInnerWidth - right[0].offsetWidth) / 2) * inverter; | |
| } else { | |
| right[0].f7NavbarLeftOffset = (-(navbarInnerWidth - right[0].offsetWidth) / 2) + separateNavbarLeftOffset; | |
| right[0].f7NavbarRightOffset = rightWidth - separateNavbarRightOffset; | |
| } | |
| } | |
| if (subnavbar.length && (subnavbar.hasClass('sliding') || sliding)) { | |
| subnavbar[0].f7NavbarLeftOffset = app.rtl ? subnavbar[0].offsetWidth : (-subnavbar[0].offsetWidth + separateNavbarLeftOffset); | |
| subnavbar[0].f7NavbarRightOffset = (-subnavbar[0].f7NavbarLeftOffset - separateNavbarRightOffset) + separateNavbarLeftOffset; | |
| } | |
| } | |
| // Center title | |
| if ( | |
| (app.theme === 'ios' && app.params.navbar.iosCenterTitle) | |
| || (app.theme === 'md' && app.params.navbar.mdCenterTitle) | |
| ) { | |
| var titleLeft = diff; | |
| if (app.rtl && noLeft && noRight && title.length > 0) { titleLeft = -titleLeft; } | |
| title.css({ left: (titleLeft + "px") }); | |
| } | |
| }, | |
| hide: function hide(el, animate) { | |
| if ( animate === void 0 ) animate = true; | |
| var app = this; | |
| var $el = $(el); | |
| if ($el.hasClass('navbar-inner')) { $el = $el.parents('.navbar'); } | |
| if (!$el.length) { return; } | |
| if ($el.hasClass('navbar-hidden')) { return; } | |
| var className = "navbar-hidden" + (animate ? ' navbar-transitioning' : ''); | |
| var currentIsLarge = app.theme === 'ios' ? $el.find('.navbar-current .title-large').length : $el.find('.title-large').length; | |
| if (currentIsLarge) { | |
| className += ' navbar-large-hidden'; | |
| } | |
| $el.transitionEnd(function () { | |
| $el.removeClass('navbar-transitioning'); | |
| }); | |
| $el.addClass(className); | |
| }, | |
| show: function show(el, animate) { | |
| if ( el === void 0 ) el = '.navbar-hidden'; | |
| if ( animate === void 0 ) animate = true; | |
| var $el = $(el); | |
| if ($el.hasClass('navbar-inner')) { $el = $el.parents('.navbar'); } | |
| if (!$el.length) { return; } | |
| if (!$el.hasClass('navbar-hidden')) { return; } | |
| if (animate) { | |
| $el.addClass('navbar-transitioning'); | |
| $el.transitionEnd(function () { | |
| $el.removeClass('navbar-transitioning'); | |
| }); | |
| } | |
| $el.removeClass('navbar-hidden navbar-large-hidden'); | |
| }, | |
| getElByPage: function getElByPage(page) { | |
| var $pageEl; | |
| var $navbarInnerEl; | |
| var pageData; | |
| if (page.$navbarEl || page.$el) { | |
| pageData = page; | |
| $pageEl = page.$el; | |
| } else { | |
| $pageEl = $(page); | |
| if ($pageEl.length > 0) { pageData = $pageEl[0].f7Page; } | |
| } | |
| if (pageData && pageData.$navbarEl && pageData.$navbarEl.length > 0) { | |
| $navbarInnerEl = pageData.$navbarEl; | |
| } else if ($pageEl) { | |
| $navbarInnerEl = $pageEl.children('.navbar').children('.navbar-inner'); | |
| } | |
| if (!$navbarInnerEl || ($navbarInnerEl && $navbarInnerEl.length === 0)) { return undefined; } | |
| return $navbarInnerEl[0]; | |
| }, | |
| getPageByEl: function getPageByEl(navbarInnerEl) { | |
| var $navbarInnerEl = $(navbarInnerEl); | |
| if ($navbarInnerEl.hasClass('navbar')) { | |
| $navbarInnerEl = $navbarInnerEl.find('.navbar-inner'); | |
| if ($navbarInnerEl.length > 1) { return undefined; } | |
| } | |
| if ($navbarInnerEl.parents('.page').length) { | |
| return $navbarInnerEl.parents('.page')[0]; | |
| } | |
| var pageEl; | |
| $navbarInnerEl.parents('.view').find('.page').each(function (index, el) { | |
| if (el && el.f7Page && el.f7Page.navbarEl && $navbarInnerEl[0] === el.f7Page.navbarEl) { | |
| pageEl = el; | |
| } | |
| }); | |
| return pageEl; | |
| }, | |
| collapseLargeTitle: function collapseLargeTitle(navbarInnerEl) { | |
| var app = this; | |
| var $navbarInnerEl = $(navbarInnerEl); | |
| if ($navbarInnerEl.hasClass('navbar')) { | |
| $navbarInnerEl = $navbarInnerEl.find('.navbar-inner-large'); | |
| if ($navbarInnerEl.length > 1) { | |
| $navbarInnerEl = $(navbarInnerEl).find('.navbar-inner-large.navbar-current'); | |
| } | |
| if ($navbarInnerEl.length > 1 || !$navbarInnerEl.length) { | |
| return; | |
| } | |
| } | |
| $navbarInnerEl.addClass('navbar-inner-large-collapsed'); | |
| if (app.theme === 'md') { | |
| $navbarInnerEl.parents('.navbar').addClass('navbar-large-collapsed'); | |
| } | |
| }, | |
| expandLargeTitle: function expandLargeTitle(navbarInnerEl) { | |
| var app = this; | |
| var $navbarInnerEl = $(navbarInnerEl); | |
| if ($navbarInnerEl.hasClass('navbar')) { | |
| $navbarInnerEl = $navbarInnerEl.find('.navbar-inner-large'); | |
| if ($navbarInnerEl.length > 1) { | |
| $navbarInnerEl = $(navbarInnerEl).find('.navbar-inner-large.navbar-current'); | |
| } | |
| if ($navbarInnerEl.length > 1 || !$navbarInnerEl.length) { | |
| return; | |
| } | |
| } | |
| $navbarInnerEl.removeClass('navbar-inner-large-collapsed'); | |
| if (app.theme === 'md') { | |
| $navbarInnerEl.parents('.navbar').removeClass('navbar-large-collapsed'); | |
| } | |
| }, | |
| toggleLargeTitle: function toggleLargeTitle(navbarInnerEl) { | |
| var app = this; | |
| var $navbarInnerEl = $(navbarInnerEl); | |
| if ($navbarInnerEl.hasClass('navbar')) { | |
| $navbarInnerEl = $navbarInnerEl.find('.navbar-inner-large'); | |
| if ($navbarInnerEl.length > 1) { | |
| $navbarInnerEl = $(navbarInnerEl).find('.navbar-inner-large.navbar-current'); | |
| } | |
| if ($navbarInnerEl.length > 1 || !$navbarInnerEl.length) { | |
| return; | |
| } | |
| } | |
| if ($navbarInnerEl.hasClass('navbar-inner-large-collapsed')) { | |
| app.navbar.expandLargeTitle($navbarInnerEl); | |
| } else { | |
| app.navbar.collapseLargeTitle($navbarInnerEl); | |
| } | |
| }, | |
| initNavbarOnScroll: function initNavbarOnScroll(pageEl, navbarInnerEl, needHide, needCollapse) { | |
| var app = this; | |
| var $pageEl = $(pageEl); | |
| var $navbarInnerEl = $(navbarInnerEl); | |
| var $navbarEl = app.theme === 'md' | |
| ? $navbarInnerEl.parents('.navbar') | |
| : $(navbarInnerEl || app.navbar.getElByPage(pageEl)).closest('.navbar'); | |
| var isLarge = $navbarInnerEl.find('.title-large').length || $navbarInnerEl.hasClass('.navbar-inner-large'); | |
| var navbarHideHeight = 44; | |
| var snapPageScrollToLargeTitle = app.params.navbar.snapPageScrollToLargeTitle; | |
| var previousScrollTop; | |
| var currentScrollTop; | |
| var scrollHeight; | |
| var offsetHeight; | |
| var reachEnd; | |
| var action; | |
| var navbarHidden; | |
| var navbarCollapsed; | |
| var navbarTitleLargeHeight; | |
| if (needCollapse || (needHide && isLarge)) { | |
| navbarTitleLargeHeight = $navbarInnerEl.css('--f7-navbar-large-title-height'); | |
| if (navbarTitleLargeHeight && navbarTitleLargeHeight.indexOf('px') >= 0) { | |
| navbarTitleLargeHeight = parseInt(navbarTitleLargeHeight, 10); | |
| if (Number.isNaN(navbarTitleLargeHeight)) { | |
| navbarTitleLargeHeight = app.theme === 'ios' ? 52 : 48; | |
| } | |
| } else { | |
| navbarTitleLargeHeight = app.theme === 'ios' ? 52 : 48; | |
| } | |
| } | |
| if (needHide && isLarge) { | |
| navbarHideHeight += navbarTitleLargeHeight; | |
| } | |
| var scrollChanged; | |
| var scrollContent; | |
| var scrollTimeoutId; | |
| var touchEndTimeoutId; | |
| var touchSnapTimeout = 70; | |
| var desktopSnapTimeout = 300; | |
| function snapLargeNavbar() { | |
| var inSearchbarExpanded = $navbarInnerEl.hasClass('with-searchbar-expandable-enabled'); | |
| if (inSearchbarExpanded) { return; } | |
| if (!scrollContent || currentScrollTop < 0) { return; } | |
| if (currentScrollTop >= navbarTitleLargeHeight / 2 && currentScrollTop < navbarTitleLargeHeight) { | |
| $(scrollContent).scrollTop(navbarTitleLargeHeight, 100); | |
| } else if (currentScrollTop < navbarTitleLargeHeight) { | |
| $(scrollContent).scrollTop(0, 200); | |
| } | |
| } | |
| function handleLargeNavbarCollapse() { | |
| var collapseProgress = Math.min(Math.max((currentScrollTop / navbarTitleLargeHeight), 0), 1); | |
| var inSearchbarExpanded = $navbarInnerEl.hasClass('with-searchbar-expandable-enabled'); | |
| if (inSearchbarExpanded) { return; } | |
| navbarCollapsed = $navbarInnerEl.hasClass('navbar-inner-large-collapsed'); | |
| if (collapseProgress === 0 && navbarCollapsed) { | |
| app.navbar.expandLargeTitle($navbarInnerEl[0]); | |
| $navbarInnerEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| $navbarInnerEl[0].style.overflow = ''; | |
| if (app.theme === 'md') { | |
| $navbarEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| } | |
| } else if (collapseProgress === 1 && !navbarCollapsed) { | |
| app.navbar.collapseLargeTitle($navbarInnerEl[0]); | |
| $navbarInnerEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| $navbarInnerEl[0].style.overflow = ''; | |
| if (app.theme === 'md') { | |
| $navbarEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| } | |
| } else if ((collapseProgress === 1 && navbarCollapsed) || (collapseProgress === 0 && !navbarCollapsed)) { | |
| $navbarInnerEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| $navbarInnerEl[0].style.overflow = ''; | |
| if (app.theme === 'md') { | |
| $navbarEl[0].style.removeProperty('--f7-navbar-large-collapse-progress'); | |
| } | |
| } else { | |
| $navbarInnerEl[0].style.setProperty('--f7-navbar-large-collapse-progress', collapseProgress); | |
| $navbarInnerEl[0].style.overflow = 'visible'; | |
| if (app.theme === 'md') { | |
| $navbarEl[0].style.setProperty('--f7-navbar-large-collapse-progress', collapseProgress); | |
| } | |
| } | |
| if (snapPageScrollToLargeTitle) { | |
| if (!Support.touch) { | |
| clearTimeout(scrollTimeoutId); | |
| scrollTimeoutId = setTimeout(function () { | |
| snapLargeNavbar(); | |
| }, desktopSnapTimeout); | |
| } else if (touchEndTimeoutId) { | |
| clearTimeout(touchEndTimeoutId); | |
| touchEndTimeoutId = null; | |
| touchEndTimeoutId = setTimeout(function () { | |
| snapLargeNavbar(); | |
| clearTimeout(touchEndTimeoutId); | |
| touchEndTimeoutId = null; | |
| }, touchSnapTimeout); | |
| } | |
| } | |
| } | |
| function handleTitleHideShow() { | |
| scrollHeight = scrollContent.scrollHeight; | |
| offsetHeight = scrollContent.offsetHeight; | |
| reachEnd = currentScrollTop + offsetHeight >= scrollHeight; | |
| navbarHidden = $navbarEl.hasClass('navbar-hidden'); | |
| if (reachEnd) { | |
| if (app.params.navbar.showOnPageScrollEnd) { | |
| action = 'show'; | |
| } | |
| } else if (previousScrollTop > currentScrollTop) { | |
| if (app.params.navbar.showOnPageScrollTop || currentScrollTop <= navbarHideHeight) { | |
| action = 'show'; | |
| } else { | |
| action = 'hide'; | |
| } | |
| } else if (currentScrollTop > navbarHideHeight) { | |
| action = 'hide'; | |
| } else { | |
| action = 'show'; | |
| } | |
| if (action === 'show' && navbarHidden) { | |
| app.navbar.show($navbarEl); | |
| navbarHidden = false; | |
| } else if (action === 'hide' && !navbarHidden) { | |
| app.navbar.hide($navbarEl); | |
| navbarHidden = true; | |
| } | |
| previousScrollTop = currentScrollTop; | |
| } | |
| function handleScroll() { | |
| scrollContent = this; | |
| currentScrollTop = scrollContent.scrollTop; | |
| scrollChanged = currentScrollTop; | |
| if (needCollapse) { | |
| handleLargeNavbarCollapse(); | |
| } | |
| if ($pageEl.hasClass('page-previous')) { return; } | |
| if (needHide) { | |
| handleTitleHideShow(); | |
| } | |
| } | |
| function handeTouchStart() { | |
| scrollChanged = false; | |
| } | |
| function handleTouchEnd() { | |
| clearTimeout(touchEndTimeoutId); | |
| touchEndTimeoutId = null; | |
| touchEndTimeoutId = setTimeout(function () { | |
| if (scrollChanged !== false) { | |
| snapLargeNavbar(); | |
| clearTimeout(touchEndTimeoutId); | |
| touchEndTimeoutId = null; | |
| } | |
| }, touchSnapTimeout); | |
| } | |
| $pageEl.on('scroll', '.page-content', handleScroll, true); | |
| if (Support.touch && needCollapse && snapPageScrollToLargeTitle) { | |
| app.on('touchstart:passive', handeTouchStart); | |
| app.on('touchend:passive', handleTouchEnd); | |
| } | |
| if (needCollapse) { | |
| $pageEl.find('.page-content').each(function (pageContentIndex, pageContentEl) { | |
| if (pageContentEl.scrollTop > 0) { handleScroll.call(pageContentEl); } | |
| }); | |
| } | |
| $pageEl[0].f7DetachNavbarScrollHandlers = function f7DetachNavbarScrollHandlers() { | |
| delete $pageEl[0].f7DetachNavbarScrollHandlers; | |
| $pageEl.off('scroll', '.page-content', handleScroll, true); | |
| if (Support.touch && needCollapse && snapPageScrollToLargeTitle) { | |
| app.off('touchstart:passive', handeTouchStart); | |
| app.off('touchend:passive', handleTouchEnd); | |
| } | |
| }; | |
| }, | |
| }; | |
| var Navbar$1 = { | |
| name: 'navbar', | |
| create: function create() { | |
| var app = this; | |
| Utils.extend(app, { | |
| navbar: { | |
| size: Navbar.size.bind(app), | |
| hide: Navbar.hide.bind(app), | |
| show: Navbar.show.bind(app), | |
| getElByPage: Navbar.getElByPage.bind(app), | |
| getPageByEl: Navbar.getPageByEl.bind(app), | |
| collapseLargeTitle: Navbar.collapseLargeTitle.bind(app), | |
| expandLargeTitle: Navbar.expandLargeTitle.bind(app), | |
| toggleLargeTitle: Navbar.toggleLargeTitle.bind(app), | |
| initNavbarOnScroll: Navbar.initNavbarOnScroll.bind(app), | |
| }, | |
| }); | |
| }, | |
| params: { | |
| navbar: { | |
| scrollTopOnTitleClick: true, | |
| iosCenterTitle: true, | |
| mdCenterTitle: false, | |
| hideOnPageScroll: false, | |
| showOnPageScrollEnd: true, | |
| showOnPageScrollTop: true, | |
| collapseLargeTitleOnScroll: true, | |
| snapPageScrollToLargeTitle: true, | |
| }, | |
| }, | |
| on: { | |
| 'panelBreakpoint resize viewMasterDetailBreakpoint': function onResize() { | |
| var app = this; | |
| $('.navbar').each(function (index, navbarEl) { | |
| app.navbar.size(navbarEl); | |
| }); | |
| }, | |
| pageBeforeRemove: function pageBeforeRemove(page) { | |
| if (page.$el[0].f7DetachNavbarScrollHandlers) { | |
| page.$el[0].f7DetachNavbarScrollHandlers(); | |
| } | |
| }, | |
| pageBeforeIn: function pageBeforeIn(page) { | |
| var app = this; | |
| if (app.theme !== 'ios') { return; } | |
| var $navbarEl; | |
| var view = page.$el.parents('.view')[0].f7View; | |
| var navbarInnerEl = app.navbar.getElByPage(page); | |
| if (!navbarInnerEl) { | |
| $navbarEl = page.$el.parents('.view').children('.navbar'); | |
| } else { | |
| $navbarEl = $(navbarInnerEl).parents('.navbar'); | |
| } | |
| if (page.$el.hasClass('no-navbar') || (view.router.dynamicNavbar && !navbarInnerEl)) { | |
| var animate = !!(page.pageFrom && page.router.history.length > 0); | |
| app.navbar.hide($navbarEl, animate); | |
| } else { | |
| app.navbar.show($navbarEl); | |
| } | |
| }, | |
| pageReinit: function pageReinit(page) { | |
| var app = this; | |
| var $navbarInnerEl = $(app.navbar.getElByPage(page)); | |
| if (!$navbarInnerEl || $navbarInnerEl.length === 0) { return; } | |
| app.navbar.size($navbarInnerEl); | |
| }, | |
| pageInit: function pageInit(page) { | |
| var app = this; | |
| var $navbarInnerEl = $(app.navbar.getElByPage(page)); | |
| if (!$navbarInnerEl || $navbarInnerEl.length === 0) { return; } | |
| // Size | |
| app.navbar.size($navbarInnerEl); | |
| // Need Collapse On Scroll | |
| var needCollapseOnScrollHandler; | |
| if ($navbarInnerEl.children('.title-large').length > 0) { | |
| $navbarInnerEl.addClass('navbar-inner-large'); | |
| } | |
| if ($navbarInnerEl.hasClass('navbar-inner-large')) { | |
| if (app.params.navbar.collapseLargeTitleOnScroll) { needCollapseOnScrollHandler = true; } | |
| if (app.theme === 'md') { | |
| $navbarInnerEl.parents('.navbar').addClass('navbar-large'); | |
| } | |
| page.$el.addClass('page-with-navbar-large'); | |
| } | |
| // Need Hide On Scroll | |
| var needHideOnScrollHandler; | |
| if ( | |
| app.params.navbar.hideOnPageScroll | |
| || page.$el.find('.hide-navbar-on-scroll').length | |
| || page.$el.hasClass('hide-navbar-on-scroll') | |
| || page.$el.find('.hide-bars-on-scroll').length | |
| || page.$el.hasClass('hide-bars-on-scroll') | |
| ) { | |
| if ( | |
| page.$el.find('.keep-navbar-on-scroll').length | |
| || page.$el.hasClass('keep-navbar-on-scroll') | |
| || page.$el.find('.keep-bars-on-scroll').length | |
| || page.$el.hasClass('keep-bars-on-scroll') | |
| ) { | |
| needHideOnScrollHandler = false; | |
| } else { | |
| needHideOnScrollHandler = true; | |
| } | |
| } | |
| if (needCollapseOnScrollHandler || needHideOnScrollHandler) { | |
| app.navbar.initNavbarOnScroll(page.el, $navbarInnerEl[0], needHideOnScrollHandler, needCollapseOnScrollHandler); | |
| } | |
| }, | |
| modalOpen: function modalOpen(modal) { | |
| var app = this; | |
| if ( | |
| (app.theme === 'ios' && !app.params.navbar.iosCenterTitle) | |
| || (app.theme === 'md' && !app.params.navbar.mdCenterTitle) | |
| ) { | |
| return; | |
| } | |
| modal.$el.find('.navbar:not(.navbar-previous):not(.stacked)').each(function (index, navbarEl) { | |
| app.navbar.size(navbarEl); | |
| }); | |
| }, | |
| panelOpen: function panelOpen(panel) { | |
| var app = this; | |
| if ( | |
| (app.theme === 'ios' && !app.params.navbar.iosCenterTitle) | |
| || (app.theme === 'md' && !app.params.navbar.mdCenterTitle) | |
| ) { | |
| return; | |
| } | |
| panel.$el.find('.navbar:not(.navbar-previous):not(.stacked)').each(function (index, navbarEl) { | |
| app.navbar.size(navbarEl); | |
| }); | |
| }, | |
| panelSwipeOpen: function panelSwipeOpen(panel) { | |
| var app = this; | |
| if ( | |
| (app.theme === 'ios' && !app.params.navbar.iosCenterTitle) | |
| || (app.theme === 'md' && !app.params.navbar.mdCenterTitle) | |
| ) { | |
| return; | |
| } | |
| panel.$el.find('.navbar:not(.navbar-previous):not(.stacked)').each(function (index, navbarEl) { | |
| app.navbar.size(navbarEl); | |
| }); | |
| }, | |
| tabShow: function tabShow(tabEl) { | |
| var app = this; | |
| if ( | |
| (app.theme === 'ios' && !app.params.navbar.iosCenterTitle) | |
| || (app.theme === 'md' && !app.params.navbar.mdCenterTitle) | |
| ) { | |
| return; | |
| } | |
| $(tabEl).find('.navbar:not(.navbar-previous):not(.stacked)').each(function (index, navbarEl) { | |
| app.navbar.size(navbarEl); | |
| }); | |
| }, | |
| }, | |
| clicks: { | |
| '.navbar .title': function onTitleClick($clickedEl) { | |
| var app = this; | |
| if (!app.params.navbar.scrollTopOnTitleClick) { return; } | |
| if ($clickedEl.closest('a').length > 0) { | |
| return; | |
| } | |
| var pageContent; | |
| // Find active page | |
| var navbar = $clickedEl.parents('.navbar'); | |
| // Static Layout | |
| pageContent = navbar.parents('.page-content'); | |
| if (pageContent.length === 0) { | |
| // Fixed Layout | |
| if (navbar.parents('.page').length > 0) { | |
| pageContent = navbar.parents('.page').find('.page-content'); | |
| } | |
| // Through Layout | |
| if (pageContent.length === 0) { | |
| if (navbar.nextAll('.page-current:not(.stacked)').length > 0) { | |
| pageContent = navbar.nextAll('.page-current:not(.stacked)').find('.page-content'); | |
| } | |
| } | |
| } | |
| if (pageContent && pageContent.length > 0) { | |
| // Check for tab | |
| if (pageContent.hasClass('tab')) { | |
| pageContent = pageContent.parent('.tabs').children('.page-content.tab-active'); | |
| } | |
| if (pageContent.length > 0) { pageContent.scrollTop(0, 300); } | |
| } | |
| }, | |
| }, | |
| vnode: { | |
| 'navbar-inner': { | |
| postpatch: function postpatch(vnode) { | |
| var app = this; | |
| if ( | |
| (app.theme === 'ios' && !app.params.navbar.iosCenterTitle) | |
| || (app.theme === 'md' && !app.params.navbar.mdCenterTitle) | |
| ) { | |
| return; | |
| } | |
| app.navbar.size(vnode.elm); | |
| }, | |
| }, | |
| }, | |
| }; | |
| var Toolbar = { | |
| setHighlight: function setHighlight(tabbarEl) { | |
| var app = this; | |
| if (app.theme !== 'md') { return; } | |
| var $tabbarEl = $(tabbarEl); | |
| if ($tabbarEl.length === 0 || !($tabbarEl.hasClass('tabbar') || $tabbarEl.hasClass('tabbar-labels'))) { return; } | |
| var $highlightEl = $tabbarEl.find('.tab-link-highlight'); | |
| var tabLinksCount = $tabbarEl.find('.tab-link').length; | |
| if (tabLinksCount === 0) { | |
| $highlightEl.remove(); | |
| return; | |
| } | |
| if ($highlightEl.length === 0) { | |
| $tabbarEl.children('.toolbar-inner').append('<span class="tab-link-highlight"></span>'); | |
| $highlightEl = $tabbarEl.find('.tab-link-highlight'); | |
| } else if ($highlightEl.next().length) { | |
| $tabbarEl.children('.toolbar-inner').append($highlightEl); | |
| } | |
| var $activeLink = $tabbarEl.find('.tab-link-active'); | |
| var highlightWidth; | |
| var highlightTranslate; | |
| if ($tabbarEl.hasClass('tabbar-scrollable') && $activeLink && $activeLink[0]) { | |
| highlightWidth = ($activeLink[0].offsetWidth) + "px"; | |
| highlightTranslate = ($activeLink[0].offsetLeft) + "px"; | |
| } else { | |
| var activeIndex = $activeLink.index(); | |
| highlightWidth = (100 / tabLinksCount) + "%"; | |
| highlightTranslate = ((app.rtl ? -activeIndex : activeIndex) * 100) + "%"; | |
| } | |
| Utils.nextFrame(function () { | |
| $highlightEl | |
| .css('width', highlightWidth) | |
| .transform(("translate3d(" + highlightTranslate + ",0,0)")); | |
| }); | |
| }, | |
| init: function init(tabbarEl) { | |
| var app = this; | |
| app.toolbar.setHighlight(tabbarEl); | |
| }, | |
| hide: function hide(el, animate) { | |
| if ( animate === void 0 ) animate = true; | |
| var $el = $(el); | |
| if ($el.hasClass('toolbar-hidden')) { return; } | |
| var className = "toolbar-hidden" + (animate ? ' toolbar-transitioning' : ''); | |
| $el.transitionEnd(function () { | |
| $el.removeClass('toolbar-transitioning'); | |
| }); | |
| $el.addClass(className); | |
| }, | |
| show: function show(el, animate) { | |
| if ( animate === void 0 ) animate = true; | |
| var $el = $(el); | |
| if (!$el.hasClass('toolbar-hidden')) { return; } | |
| if (animate) { | |
| $el.addClass('toolbar-transitioning'); | |
| $el.transitionEnd(function () { | |
| $el.removeClass('toolbar-transitioning'); | |
| }); | |
| } | |
| $el.removeClass('toolbar-hidden'); | |
| }, | |
| initHideToolbarOnScroll: function initHideToolbarOnScroll(pageEl) { | |
| var app = this; | |
| var $pageEl = $(pageEl); | |
| var $toolbarEl = $pageEl.parents('.view').children('.toolbar'); | |
| if ($toolbarEl.length === 0) { | |
| $toolbarEl = $pageEl.find('.toolbar'); | |
| } | |
| if ($toolbarEl.length === 0) { | |
| $toolbarEl = $pageEl.parents('.views').children('.tabbar, .tabbar-labels'); | |
| } | |
| if ($toolbarEl.length === 0) { | |
| return; | |
| } | |
| var previousScrollTop; | |
| var currentScrollTop; | |
| var scrollHeight; | |
| var offsetHeight; | |
| var reachEnd; | |
| var action; | |
| var toolbarHidden; | |
| function handleScroll() { | |
| var scrollContent = this; | |
| if ($pageEl.hasClass('page-previous')) { return; } | |
| currentScrollTop = scrollContent.scrollTop; | |
| scrollHeight = scrollContent.scrollHeight; | |
| offsetHeight = scrollContent.offsetHeight; | |
| reachEnd = currentScrollTop + offsetHeight >= scrollHeight; | |
| toolbarHidden = $toolbarEl.hasClass('toolbar-hidden'); | |
| if (reachEnd) { | |
| if (app.params.toolbar.showOnPageScrollEnd) { | |
| action = 'show'; | |
| } | |
| } else if (previousScrollTop > currentScrollTop) { | |
| if (app.params.toolbar.showOnPageScrollTop || currentScrollTop <= 44) { | |
| action = 'show'; | |
| } else { | |
| action = 'hide'; | |
| } | |
| } else if (currentScrollTop > 44) { | |
| action = 'hide'; | |
| } else { | |
| action = 'show'; | |
| } | |
| if (action === 'show' && toolbarHidden) { | |
| app.toolbar.show($toolbarEl); | |
| toolbarHidden = false; | |
| } else if (action === 'hide' && !toolbarHidden) { | |
| app.toolbar.hide($toolbarEl); | |
| toolbarHidden = true; | |
| } | |
| previousScrollTop = currentScrollTop; | |
| } | |
| $pageEl.on('scroll', '.page-content', handleScroll, true); | |
| $pageEl[0].f7ScrollToolbarHandler = handleScroll; | |
| }, | |
| }; | |
| var Toolbar$1 = { | |
| name: 'toolbar', | |
| create: function create() { | |
| var app = this; | |
| Utils.extend(app, { | |
| toolbar: { | |
| hide: Toolbar.hide.bind(app), | |
| show: Toolbar.show.bind(app), | |
| setHighlight: Toolbar.setHighlight.bind(app), | |
| initHideToolbarOnScroll: Toolbar.initHideToolbarOnScroll.bind(app), | |
| init: Toolbar.init.bind(app), | |
| }, | |
| }); | |
| }, | |
| params: { | |
| toolbar: { | |
| hideOnPageScroll: false, | |
| showOnPageScrollEnd: true, | |
| showOnPageScrollTop: true, | |
| }, | |
| }, | |
| on: { | |
| pageBeforeRemove: function pageBeforeRemove(page) { | |
| if (page.$el[0].f7ScrollToolbarHandler) { | |
| page.$el.off('scroll', '.page-content', page.$el[0].f7ScrollToolbarHandler, true); | |
| } | |
| }, | |
| pageBeforeIn: function pageBeforeIn(page) { | |
| var app = this; | |
| var $toolbarEl = page.$el.parents('.view').children('.toolbar'); | |
| if ($toolbarEl.length === 0) { | |
| $toolbarEl = page.$el.parents('.views').children('.tabbar, .tabbar-labels'); | |
| } | |
| if ($toolbarEl.length === 0) { | |
| $toolbarEl = page.$el.find('.toolbar'); | |
| } | |
| if ($toolbarEl.length === 0) { | |
| return; | |
| } | |
| if (page.$el.hasClass('no-toolbar')) { | |
| app.toolbar.hide($toolbarEl); | |
| } else { | |
| app.toolbar.show($toolbarEl); | |
| } | |
| }, | |
| pageInit: function pageInit(page) { | |
| var app = this; | |
| page.$el.find('.tabbar, .tabbar-labels').each(function (index, tabbarEl) { | |
| app.toolbar.init(tabbarEl); | |
| }); | |
| if ( | |
| app.params.toolbar.hideOnPageScroll | |
| || page.$el.find('.hide-toolbar-on-scroll').length | |
| || page.$el.hasClass('hide-toolbar-on-scroll') | |
| || page.$el.find('.hide-bars-on-scroll').length | |
| || page.$el.hasClass('hide-bars-on-scroll') | |
| ) { | |
| if ( | |
| page.$el.find('.keep-toolbar-on-scroll').length | |
| || page.$el.hasClass('keep-toolbar-on-scroll') | |
| || page.$el.find('.keep-bars-on-scroll').length | |
| || page.$el.hasClass('keep-bars-on-scroll') | |
| ) { | |
| return; | |
| } | |
| app.toolbar.initHideToolbarOnScroll(page.el); | |
| } | |
| }, | |
| init: function init() { | |
| var app = this; | |
| app.root.find('.tabbar, .tabbar-labels').each(function (index, tabbarEl) { | |
| app.toolbar.init(tabbarEl); | |
| }); | |
| }, | |
| }, | |
| }; | |
| var Subnavbar = { | |
| name: 'subnavbar', | |
| on: { | |
| pageInit: function pageInit(page) { | |
| if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar').length) { | |
| page.$el.addClass('page-with-subnavbar'); | |
| } | |
| if (page.$el.find('.subnavbar').length) { | |
| page.$el.addClass('page-with-subnavbar'); | |
| } | |
| }, | |
| }, | |
| }; | |
| var TouchRipple = function TouchRipple($el, x, y) { | |
| var ripple = this; | |
| if (!$el) { return undefined; } | |
| var box = $el[0].getBoundingClientRect(); | |
| var center = { | |
| x: x - box.left, | |
| y: y - box.top, | |
| }; | |
| var width = box.width; | |
| var height = box.height; | |
| var diameter = Math.max((Math.pow( ((Math.pow( height, 2 )) + (Math.pow( width, 2 ))), 0.5 )), 48); | |
| ripple.$rippleWaveEl = $(("<div class=\"ripple-wave\" style=\"width: " + diameter + "px; height: " + diameter + "px; margin-top:-" + (diameter / 2) + "px; margin-left:-" + (diameter / 2) + "px; left:" + (center.x) + "px; top:" + (center.y) + "px;\"></div>")); | |
| $el.prepend(ripple.$rippleWaveEl); | |
| /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */ | |
| // ripple._clientLeft = ripple.$rippleWaveEl[0].clientLeft; | |
| ripple.rippleTransform = "translate3d(" + (-center.x + (width / 2)) + "px, " + (-center.y + (height / 2)) + "px, 0) scale(1)"; | |
| Utils.nextFrame(function () { | |
| if (!ripple || !ripple.$rippleWaveEl) { return; } | |
| ripple.$rippleWaveEl.transform(ripple.rippleTransform); | |
| }); | |
| return ripple; | |
| }; | |
| TouchRipple.prototype.onRemove = function onRemove () { | |
| var ripple = this; | |
| if (ripple.$rippleWaveEl) { | |
| ripple.$rippleWaveEl.remove(); | |
| } | |
| Object.keys(ripple).forEach(function (key) { | |
| ripple[key] = null; | |
| delete ripple[key]; | |
| }); | |
| ripple = null; | |
| }; | |
| TouchRipple.prototype.remove = function remove () { | |
| var ripple = this; | |
| if (ripple.removing) { return; } | |
| var $rippleWaveEl = this.$rippleWaveEl; | |
| var rippleTransform = this.rippleTransform; | |
| var removeTimeout = Utils.nextTick(function () { | |
| ripple.onRemove(); | |
| }, 400); | |
| ripple.removing = true; | |
| $rippleWaveEl | |
| .addClass('ripple-wave-fill') | |
| .transform(rippleTransform.replace('scale(1)', 'scale(1.01)')) | |
| .transitionEnd(function () { | |
| clearTimeout(removeTimeout); | |
| Utils.nextFrame(function () { | |
| $rippleWaveEl | |
| .addClass('ripple-wave-out') | |
| .transform(rippleTransform.replace('scale(1)', 'scale(1.01)')); | |
| removeTimeout = Utils.nextTick(function () { | |
| ripple.onRemove(); | |
| }, 700); | |
| $rippleWaveEl.transitionEnd(function () { | |
| clearTimeout(removeTimeout); | |
| ripple.onRemove(); | |
| }); | |
| }); | |
| }); | |
| }; | |
| var TouchRipple$1 = { | |
| name: 'touch-ripple', | |
| static: { | |
| TouchRipple: TouchRipple, | |
| }, | |
| create: function create() { | |
| var app = this; | |
| app.touchRipple = { | |
| create: function create() { | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| return new (Function.prototype.bind.apply( TouchRipple, [ null ].concat( args) )); | |
| }, | |
| }; | |
| }, | |
| }; | |
| var openedModals = []; | |
| var dialogsQueue = []; | |
| function clearDialogsQueue() { | |
| if (dialogsQueue.length === 0) { return; } | |
| var dialog = dialogsQueue.shift(); | |
| dialog.open(); | |
| } | |
| var Modal = /*@__PURE__*/(function (Framework7Class$$1) { | |
| function Modal(app, params) { | |
| Framework7Class$$1.call(this, params, [app]); | |
| var modal = this; | |
| var defaults = {}; | |
| // Extend defaults with modules params | |
| modal.useModulesParams(defaults); | |
| modal.params = Utils.extend(defaults, params); | |
| modal.opened = false; | |
| // Install Modules | |
| modal.useModules(); | |
| return this; | |
| } | |
| if ( Framework7Class$$1 ) Modal.__proto__ = Framework7Class$$1; | |
| Modal.prototype = Object.create( Framework7Class$$1 && Framework7Class$$1.prototype ); | |
| Modal.prototype.constructor = Modal; | |
| Modal.prototype.onOpen = function onOpen () { | |
| var modal = this; | |
| modal.opened = true; | |
| openedModals.push(modal); | |
| $('html').addClass(("with-modal-" + (modal.type.toLowerCase()))); | |
| modal.$el.trigger(("modal:open " + (modal.type.toLowerCase()) + ":open"), modal); | |
| modal.emit(("local::open modalOpen " + (modal.type) + "Open"), modal); | |
| }; | |
| Modal.prototype.onOpened = function onOpened () { | |
| var modal = this; | |
| modal.$el.trigger(("modal:opened " + (modal.type.toLowerCase()) + ":opened"), modal); | |
| modal.emit(("local::opened modalOpened " + (modal.type) + "Opened"), modal); | |
| }; | |
| Modal.prototype.onClose = function onClose () { | |
| var modal = this; | |
| modal.opened = false; | |
| if (!modal.type || !modal.$el) { return; } | |
| openedModals.splice(openedModals.indexOf(modal), 1); | |
| $('html').removeClass(("with-modal-" + (modal.type.toLowerCase()))); | |
| modal.$el.trigger(("modal:close " + (modal.type.toLowerCase()) + ":close"), modal); | |
| modal.emit(("local::close modalClose " + (modal.type) + "Close"), modal); | |
| }; | |
| Modal.prototype.onClosed = function onClosed () { | |
| var modal = this; | |
| if (!modal.type || !modal.$el) { return; } | |
| modal.$el.removeClass('modal-out'); | |
| modal.$el.hide(); | |
| modal.$el.trigger(("modal:closed " + (modal.type.toLowerCase()) + ":closed"), modal); | |
| modal.emit(("local::closed modalClosed " + (modal.type) + "Closed"), modal); | |
| }; | |
| Modal.prototype.open = function open (animateModal) { | |
| var modal = this; | |
| var app = modal.app; | |
| var $el = modal.$el; | |
| var $backdropEl = modal.$backdropEl; | |
| var type = modal.type; | |
| var animate = true; | |
| if (typeof animateModal !== 'undefined') { animate = animateModal; } | |
| else if (typeof modal.params.animate !== 'undefined') { | |
| animate = modal.params.animate; | |
| } | |
| if (!$el || $el.hasClass('modal-in')) { | |
| return modal; | |
| } | |
| if (type === 'dialog' && app.params.modal.queueDialogs) { | |
| var pushToQueue; | |
| if ($('.dialog.modal-in').length > 0) { | |
| pushToQueue = true; | |
| } else if (openedModals.length > 0) { | |
| openedModals.forEach(function (openedModal) { | |
| if (openedModal.type === 'dialog') { pushToQueue = true; } | |
| }); | |
| } | |
| if (pushToQueue) { | |
| dialogsQueue.push(modal); | |
| return modal; | |
| } | |
| } | |
| var $modalParentEl = $el.parent(); | |
| var wasInDom = $el.parents(doc).length > 0; | |
| if (app.params.modal.moveToRoot && !$modalParentEl.is(app.root)) { | |
| app.root.append($el); | |
| modal.once((type + "Closed"), function () { | |
| if (wasInDom) { | |
| $modalParentEl.append($el); | |
| } else { | |
| $el.remove(); | |
| } | |
| }); | |
| } | |
| // Show Modal | |
| $el.show(); | |
| /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */ | |
| modal._clientLeft = $el[0].clientLeft; | |
| // Modal | |
| function transitionEnd() { | |
| if ($el.hasClass('modal-out')) { | |
| modal.onClosed(); | |
| } else if ($el.hasClass('modal-in')) { | |
| modal.onOpened(); | |
| } | |
| } | |
| if (animate) { | |
| if ($backdropEl) { | |
| $backdropEl.removeClass('not-animated'); | |
| $backdropEl.addClass('backdrop-in'); | |
| } | |
| $el | |
| .animationEnd(function () { | |
| transitionEnd(); | |
| }); | |
| $el | |
| .transitionEnd(function () { | |
| transitionEnd(); | |
| }); | |
| $el | |
| .removeClass('modal-out not-animated') | |
| .addClass('modal-in'); | |
| modal.onOpen(); | |
| } else { | |
| if ($backdropEl) { | |
| $backdropEl.addClass('backdrop-in not-animated'); | |
| } | |
| $el.removeClass('modal-out').addClass('modal-in not-animated'); | |
| modal.onOpen(); | |
| modal.onOpened(); | |
| } | |
| return modal; | |
| }; | |
| Modal.prototype.close = function close (animateModal) { | |
| var modal = this; | |
| var $el = modal.$el; | |
| var $backdropEl = modal.$backdropEl; | |
| var animate = true; | |
| if (typeof animateModal !== 'undefined') { animate = animateModal; } | |
| else if (typeof modal.params.animate !== 'undefined') { | |
| animate = modal.params.animate; | |
| } | |
| if (!$el || !$el.hasClass('modal-in')) { | |
| return modal; | |
| } | |
| // backdrop | |
| if ($backdropEl) { | |
| var needToHideBackdrop = true; | |
| if (modal.type === 'popup') { | |
| modal.$el.prevAll('.popup.modal-in').each(function (index, popupEl) { | |
| var popupInstance = popupEl.f7Modal; | |
| if (!popupInstance) { return; } | |
| if ( | |
| popupInstance.params.closeByBackdropClick | |
| && popupInstance.params.backdrop | |
| && popupInstance.backdropEl === modal.backdropEl | |
| ) { | |
| needToHideBackdrop = false; | |
| } | |
| }); | |
| } | |
| if (needToHideBackdrop) { | |
| $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated'); | |
| $backdropEl.removeClass('backdrop-in'); | |
| } | |
| } | |
| // Modal | |
| $el[animate ? 'removeClass' : 'addClass']('not-animated'); | |
| function transitionEnd() { | |
| if ($el.hasClass('modal-out')) { | |
| modal.onClosed(); | |
| } else if ($el.hasClass('modal-in')) { | |
| modal.onOpened(); | |
| } | |
| } | |
| if (animate) { | |
| $el | |
| .animationEnd(function () { | |
| transitionEnd(); | |
| }); | |
| $el | |
| .transitionEnd(function () { | |
| transitionEnd(); | |
| }); | |
| $el | |
| .removeClass('modal-in') | |
| .addClass('modal-out'); | |
| // Emit close | |
| modal.onClose(); | |
| } else { | |
| $el | |
| .addClass('not-animated') | |
| .removeClass('modal-in') | |
| .addClass('modal-out'); | |
| // Emit close | |
| modal.onClose(); | |
| modal.onClosed(); | |
| } | |
| if (modal.type === 'dialog') { | |
| clearDialogsQueue(); | |
| } | |
| return modal; | |
| }; | |
| Modal.prototype.destroy = function destroy () { | |
| var modal = this; | |
| if (modal.destroyed) { return; } | |
| modal.emit(("local::beforeDestroy modalBeforeDestroy " + (modal.type) + "BeforeDestroy"), modal); | |
| if (modal.$el) { | |
| modal.$el.trigger(("modal:beforedestroy " + (modal.type.toLowerCase()) + ":beforedestroy"), modal); | |
| if (modal.$el.length && modal.$el[0].f7Modal) { | |
| delete modal.$el[0].f7Modal; | |
| } | |
| } | |
| Utils.deleteProps(modal); | |
| modal.destroyed = true; | |
| }; | |
| return Modal; | |
| }(Framework7Class)); | |
| var CustomModal = /*@__PURE__*/(function (Modal$$1) { | |
| function CustomModal(app, params) { | |
| var extendedParams = Utils.extend({ | |
| backdrop: true, | |
| closeByBackdropClick: true, | |
| on: {}, | |
| }, params); | |
| // Extends with open/close Modal methods; | |
| Modal$$1.call(this, app, extendedParams); | |
| var customModal = this; | |
| customModal.params = extendedParams; | |
| // Find Element | |
| var $el; | |
| if (!customModal.params.el) { | |
| $el = $(customModal.params.content); | |
| } else { | |
| $el = $(customModal.params.el); | |
| } | |
| if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| return $el[0].f7Modal; | |
| } | |
| if ($el.length === 0) { | |
| return customModal.destroy(); | |
| } | |
| var $backdropEl; | |
| if (customModal.params.backdrop) { | |
| $backdropEl = app.root.children('.custom-modal-backdrop'); | |
| if ($backdropEl.length === 0) { | |
| $backdropEl = $('<div class="custom-modal-backdrop"></div>'); | |
| app.root.append($backdropEl); | |
| } | |
| } | |
| function handleClick(e) { | |
| if (!customModal || customModal.destroyed) { return; } | |
| if ($backdropEl && e.target === $backdropEl[0]) { | |
| customModal.close(); | |
| } | |
| } | |
| customModal.on('customModalOpened', function () { | |
| if (customModal.params.closeByBackdropClick && customModal.params.backdrop) { | |
| app.on('click', handleClick); | |
| } | |
| }); | |
| customModal.on('customModalClose', function () { | |
| if (customModal.params.closeByBackdropClick && customModal.params.backdrop) { | |
| app.off('click', handleClick); | |
| } | |
| }); | |
| Utils.extend(customModal, { | |
| app: app, | |
| $el: $el, | |
| el: $el[0], | |
| $backdropEl: $backdropEl, | |
| backdropEl: $backdropEl && $backdropEl[0], | |
| type: 'customModal', | |
| }); | |
| $el[0].f7Modal = customModal; | |
| return customModal; | |
| } | |
| if ( Modal$$1 ) CustomModal.__proto__ = Modal$$1; | |
| CustomModal.prototype = Object.create( Modal$$1 && Modal$$1.prototype ); | |
| CustomModal.prototype.constructor = CustomModal; | |
| return CustomModal; | |
| }(Modal)); | |
| var Modal$1 = { | |
| name: 'modal', | |
| static: { | |
| Modal: Modal, | |
| CustomModal: CustomModal, | |
| }, | |
| create: function create() { | |
| var app = this; | |
| app.customModal = { | |
| create: function create(params) { | |
| return new CustomModal(app, params); | |
| }, | |
| }; | |
| }, | |
| params: { | |
| modal: { | |
| moveToRoot: true, | |
| queueDialogs: true, | |
| }, | |
| }, | |
| }; | |
| var Dialog = /*@__PURE__*/(function (Modal$$1) { | |
| function Dialog(app, params) { | |
| var extendedParams = Utils.extend({ | |
| title: app.params.dialog.title, | |
| text: undefined, | |
| content: '', | |
| buttons: [], | |
| verticalButtons: false, | |
| onClick: undefined, | |
| cssClass: undefined, | |
| destroyOnClose: false, | |
| on: {}, | |
| }, params); | |
| if (typeof extendedParams.closeByBackdropClick === 'undefined') { | |
| extendedParams.closeByBackdropClick = app.params.dialog.closeByBackdropClick; | |
| } | |
| // Extends with open/close Modal methods; | |
| Modal$$1.call(this, app, extendedParams); | |
| var dialog = this; | |
| var title = extendedParams.title; | |
| var text = extendedParams.text; | |
| var content = extendedParams.content; | |
| var buttons = extendedParams.buttons; | |
| var verticalButtons = extendedParams.verticalButtons; | |
| var cssClass = extendedParams.cssClass; | |
| dialog.params = extendedParams; | |
| // Find Element | |
| var $el; | |
| if (!dialog.params.el) { | |
| var dialogClasses = ['dialog']; | |
| if (buttons.length === 0) { dialogClasses.push('dialog-no-buttons'); } | |
| if (buttons.length > 0) { dialogClasses.push(("dialog-buttons-" + (buttons.length))); } | |
| if (verticalButtons) { dialogClasses.push('dialog-buttons-vertical'); } | |
| if (cssClass) { dialogClasses.push(cssClass); } | |
| var buttonsHTML = ''; | |
| if (buttons.length > 0) { | |
| buttonsHTML = "\n <div class=\"dialog-buttons\">\n " + (buttons.map(function (button) { return ("\n <span class=\"dialog-button" + (button.bold ? ' dialog-button-bold' : '') + (button.color ? (" color-" + (button.color)) : '') + (button.cssClass ? (" " + (button.cssClass)) : '') + "\">" + (button.text) + "</span>\n "); }).join('')) + "\n </div>\n "; | |
| } | |
| var dialogHtml = "\n <div class=\"" + (dialogClasses.join(' ')) + "\">\n <div class=\"dialog-inner\">\n " + (title ? ("<div class=\"dialog-title\">" + title + "</div>") : '') + "\n " + (text ? ("<div class=\"dialog-text\">" + text + "</div>") : '') + "\n " + content + "\n </div>\n " + buttonsHTML + "\n </div>\n "; | |
| $el = $(dialogHtml); | |
| } else { | |
| $el = $(dialog.params.el); | |
| } | |
| if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| return $el[0].f7Modal; | |
| } | |
| if ($el.length === 0) { | |
| return dialog.destroy(); | |
| } | |
| var $backdropEl = app.root.children('.dialog-backdrop'); | |
| if ($backdropEl.length === 0) { | |
| $backdropEl = $('<div class="dialog-backdrop"></div>'); | |
| app.root.append($backdropEl); | |
| } | |
| // Assign events | |
| function buttonOnClick(e) { | |
| var buttonEl = this; | |
| var index = $(buttonEl).index(); | |
| var button = buttons[index]; | |
| if (button.onClick) { button.onClick(dialog, e); } | |
| if (dialog.params.onClick) { dialog.params.onClick(dialog, index); } | |
| if (button.close !== false) { dialog.close(); } | |
| } | |
| var addKeyboardHander; | |
| function onKeyPress(e) { | |
| var keyCode = e.keyCode; | |
| buttons.forEach(function (button, index) { | |
| if (button.keyCodes && button.keyCodes.indexOf(keyCode) >= 0) { | |
| if (doc.activeElement) { doc.activeElement.blur(); } | |
| if (button.onClick) { button.onClick(dialog, e); } | |
| if (dialog.params.onClick) { dialog.params.onClick(dialog, index); } | |
| if (button.close !== false) { dialog.close(); } | |
| } | |
| }); | |
| } | |
| if (buttons && buttons.length > 0) { | |
| dialog.on('open', function () { | |
| $el.find('.dialog-button').each(function (index, buttonEl) { | |
| var button = buttons[index]; | |
| if (button.keyCodes) { addKeyboardHander = true; } | |
| $(buttonEl).on('click', buttonOnClick); | |
| }); | |
| if ( | |
| addKeyboardHander | |
| && !app.device.ios | |
| && !app.device.android | |
| && !app.device.cordova | |
| ) { | |
| $(doc).on('keydown', onKeyPress); | |
| } | |
| }); | |
| dialog.on('close', function () { | |
| $el.find('.dialog-button').each(function (index, buttonEl) { | |
| $(buttonEl).off('click', buttonOnClick); | |
| }); | |
| if ( | |
| addKeyboardHander | |
| && !app.device.ios | |
| && !app.device.android | |
| && !app.device.cordova | |
| ) { | |
| $(doc).off('keydown', onKeyPress); | |
| } | |
| addKeyboardHander = false; | |
| }); | |
| } | |
| Utils.extend(dialog, { | |
| app: app, | |
| $el: $el, | |
| el: $el[0], | |
| $backdropEl: $backdropEl, | |
| backdropEl: $backdropEl[0], | |
| type: 'dialog', | |
| setProgress: function setProgress(progress, duration) { | |
| app.progressbar.set($el.find('.progressbar'), progress, duration); | |
| return dialog; | |
| }, | |
| setText: function setText(newText) { | |
| var $textEl = $el.find('.dialog-text'); | |
| if ($textEl.length === 0) { | |
| $textEl = $('<div class="dialog-text"></div>'); | |
| if (typeof title !== 'undefined') { | |
| $textEl.insertAfter($el.find('.dialog-title')); | |
| } else { | |
| $el.find('.dialog-inner').prepend($textEl); | |
| } | |
| } | |
| $textEl.html(newText); | |
| dialog.params.text = newText; | |
| return dialog; | |
| }, | |
| setTitle: function setTitle(newTitle) { | |
| var $titleEl = $el.find('.dialog-title'); | |
| if ($titleEl.length === 0) { | |
| $titleEl = $('<div class="dialog-title"></div>'); | |
| $el.find('.dialog-inner').prepend($titleEl); | |
| } | |
| $titleEl.html(newTitle); | |
| dialog.params.title = newTitle; | |
| return dialog; | |
| }, | |
| }); | |
| function handleClick(e) { | |
| var target = e.target; | |
| var $target = $(target); | |
| if ($target.closest(dialog.el).length === 0) { | |
| if ( | |
| dialog.params.closeByBackdropClick | |
| && dialog.backdropEl | |
| && dialog.backdropEl === target | |
| ) { | |
| dialog.close(); | |
| } | |
| } | |
| } | |
| dialog.on('opened', function () { | |
| if (dialog.params.closeByBackdropClick) { | |
| app.on('click', handleClick); | |
| } | |
| }); | |
| dialog.on('close', function () { | |
| if (dialog.params.closeByBackdropClick) { | |
| app.off('click', handleClick); | |
| } | |
| }); | |
| $el[0].f7Modal = dialog; | |
| if (dialog.params.destroyOnClose) { | |
| dialog.once('closed', function () { | |
| setTimeout(function () { | |
| dialog.destroy(); | |
| }, 0); | |
| }); | |
| } | |
| return dialog; | |
| } | |
| if ( Modal$$1 ) Dialog.__proto__ = Modal$$1; | |
| Dialog.prototype = Object.create( Modal$$1 && Modal$$1.prototype ); | |
| Dialog.prototype.constructor = Dialog; | |
| return Dialog; | |
| }(Modal)); | |
| var Dialog$1 = { | |
| name: 'dialog', | |
| params: { | |
| dialog: { | |
| title: undefined, | |
| buttonOk: 'OK', | |
| buttonCancel: 'Cancel', | |
| usernamePlaceholder: 'Username', | |
| passwordPlaceholder: 'Password', | |
| preloaderTitle: 'Loading... ', | |
| progressTitle: 'Loading... ', | |
| closeByBackdropClick: false, | |
| destroyPredefinedDialogs: true, | |
| keyboardActions: true, | |
| }, | |
| }, | |
| static: { | |
| Dialog: Dialog, | |
| }, | |
| create: function create() { | |
| var app = this; | |
| function defaultDialogTitle() { | |
| return app.params.dialog.title || app.name; | |
| } | |
| var destroyOnClose = app.params.dialog.destroyPredefinedDialogs; | |
| var keyboardActions = app.params.dialog.keyboardActions; | |
| app.dialog = Utils.extend( | |
| ModalMethods({ | |
| app: app, | |
| constructor: Dialog, | |
| defaultSelector: '.dialog.modal-in', | |
| }), | |
| { | |
| // Shortcuts | |
| alert: function alert() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var text = args[0]; | |
| var title = args[1]; | |
| var callbackOk = args[2]; | |
| if (args.length === 2 && typeof args[1] === 'function') { | |
| (assign = args, text = assign[0], callbackOk = assign[1], title = assign[2]); | |
| } | |
| return new Dialog(app, { | |
| title: typeof title === 'undefined' ? defaultDialogTitle() : title, | |
| text: text, | |
| buttons: [{ | |
| text: app.params.dialog.buttonOk, | |
| bold: true, | |
| onClick: callbackOk, | |
| keyCodes: keyboardActions ? [13, 27] : null, | |
| }], | |
| destroyOnClose: destroyOnClose, | |
| }).open(); | |
| }, | |
| prompt: function prompt() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var text = args[0]; | |
| var title = args[1]; | |
| var callbackOk = args[2]; | |
| var callbackCancel = args[3]; | |
| var defaultValue = args[4]; | |
| if (typeof args[1] === 'function') { | |
| (assign = args, text = assign[0], callbackOk = assign[1], callbackCancel = assign[2], defaultValue = assign[3], title = assign[4]); | |
| } | |
| defaultValue = typeof defaultValue === 'undefined' || defaultValue === null ? '' : defaultValue; | |
| return new Dialog(app, { | |
| title: typeof title === 'undefined' ? defaultDialogTitle() : title, | |
| text: text, | |
| content: ("<div class=\"dialog-input-field input\"><input type=\"text\" class=\"dialog-input\" value=\"" + defaultValue + "\"></div>"), | |
| buttons: [ | |
| { | |
| text: app.params.dialog.buttonCancel, | |
| keyCodes: keyboardActions ? [27] : null, | |
| }, | |
| { | |
| text: app.params.dialog.buttonOk, | |
| bold: true, | |
| keyCodes: keyboardActions ? [13] : null, | |
| } ], | |
| onClick: function onClick(dialog, index) { | |
| var inputValue = dialog.$el.find('.dialog-input').val(); | |
| if (index === 0 && callbackCancel) { callbackCancel(inputValue); } | |
| if (index === 1 && callbackOk) { callbackOk(inputValue); } | |
| }, | |
| destroyOnClose: destroyOnClose, | |
| }).open(); | |
| }, | |
| confirm: function confirm() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var text = args[0]; | |
| var title = args[1]; | |
| var callbackOk = args[2]; | |
| var callbackCancel = args[3]; | |
| if (typeof args[1] === 'function') { | |
| (assign = args, text = assign[0], callbackOk = assign[1], callbackCancel = assign[2], title = assign[3]); | |
| } | |
| return new Dialog(app, { | |
| title: typeof title === 'undefined' ? defaultDialogTitle() : title, | |
| text: text, | |
| buttons: [ | |
| { | |
| text: app.params.dialog.buttonCancel, | |
| onClick: callbackCancel, | |
| keyCodes: keyboardActions ? [27] : null, | |
| }, | |
| { | |
| text: app.params.dialog.buttonOk, | |
| bold: true, | |
| onClick: callbackOk, | |
| keyCodes: keyboardActions ? [13] : null, | |
| } ], | |
| destroyOnClose: destroyOnClose, | |
| }).open(); | |
| }, | |
| login: function login() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var text = args[0]; | |
| var title = args[1]; | |
| var callbackOk = args[2]; | |
| var callbackCancel = args[3]; | |
| if (typeof args[1] === 'function') { | |
| (assign = args, text = assign[0], callbackOk = assign[1], callbackCancel = assign[2], title = assign[3]); | |
| } | |
| return new Dialog(app, { | |
| title: typeof title === 'undefined' ? defaultDialogTitle() : title, | |
| text: text, | |
| content: ("\n <div class=\"dialog-input-field dialog-input-double input\">\n <input type=\"text\" name=\"dialog-username\" placeholder=\"" + (app.params.dialog.usernamePlaceholder) + "\" class=\"dialog-input\">\n </div>\n <div class=\"dialog-input-field dialog-input-double input\">\n <input type=\"password\" name=\"dialog-password\" placeholder=\"" + (app.params.dialog.passwordPlaceholder) + "\" class=\"dialog-input\">\n </div>"), | |
| buttons: [ | |
| { | |
| text: app.params.dialog.buttonCancel, | |
| keyCodes: keyboardActions ? [27] : null, | |
| }, | |
| { | |
| text: app.params.dialog.buttonOk, | |
| bold: true, | |
| keyCodes: keyboardActions ? [13] : null, | |
| } ], | |
| onClick: function onClick(dialog, index) { | |
| var username = dialog.$el.find('[name="dialog-username"]').val(); | |
| var password = dialog.$el.find('[name="dialog-password"]').val(); | |
| if (index === 0 && callbackCancel) { callbackCancel(username, password); } | |
| if (index === 1 && callbackOk) { callbackOk(username, password); } | |
| }, | |
| destroyOnClose: destroyOnClose, | |
| }).open(); | |
| }, | |
| password: function password() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var text = args[0]; | |
| var title = args[1]; | |
| var callbackOk = args[2]; | |
| var callbackCancel = args[3]; | |
| if (typeof args[1] === 'function') { | |
| (assign = args, text = assign[0], callbackOk = assign[1], callbackCancel = assign[2], title = assign[3]); | |
| } | |
| return new Dialog(app, { | |
| title: typeof title === 'undefined' ? defaultDialogTitle() : title, | |
| text: text, | |
| content: ("\n <div class=\"dialog-input-field input\">\n <input type=\"password\" name=\"dialog-password\" placeholder=\"" + (app.params.dialog.passwordPlaceholder) + "\" class=\"dialog-input\">\n </div>"), | |
| buttons: [ | |
| { | |
| text: app.params.dialog.buttonCancel, | |
| keyCodes: keyboardActions ? [27] : null, | |
| }, | |
| { | |
| text: app.params.dialog.buttonOk, | |
| bold: true, | |
| keyCodes: keyboardActions ? [13] : null, | |
| } ], | |
| onClick: function onClick(dialog, index) { | |
| var password = dialog.$el.find('[name="dialog-password"]').val(); | |
| if (index === 0 && callbackCancel) { callbackCancel(password); } | |
| if (index === 1 && callbackOk) { callbackOk(password); } | |
| }, | |
| destroyOnClose: destroyOnClose, | |
| }).open(); | |
| }, | |
| preloader: function preloader(title, color) { | |
| var preloaderInner = Utils[((app.theme) + "PreloaderContent")] || ''; | |
| return new Dialog(app, { | |
| title: typeof title === 'undefined' || title === null ? app.params.dialog.preloaderTitle : title, | |
| content: ("<div class=\"preloader" + (color ? (" color-" + color) : '') + "\">" + preloaderInner + "</div>"), | |
| cssClass: 'dialog-preloader', | |
| destroyOnClose: destroyOnClose, | |
| }).open(); | |
| }, | |
| progress: function progress() { | |
| var assign, assign$1, assign$2; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var title = args[0]; | |
| var progress = args[1]; | |
| var color = args[2]; | |
| if (args.length === 2) { | |
| if (typeof args[0] === 'number') { | |
| (assign = args, progress = assign[0], color = assign[1], title = assign[2]); | |
| } else if (typeof args[0] === 'string' && typeof args[1] === 'string') { | |
| (assign$1 = args, title = assign$1[0], color = assign$1[1], progress = assign$1[2]); | |
| } | |
| } else if (args.length === 1) { | |
| if (typeof args[0] === 'number') { | |
| (assign$2 = args, progress = assign$2[0], title = assign$2[1], color = assign$2[2]); | |
| } | |
| } | |
| var infinite = typeof progress === 'undefined'; | |
| var dialog = new Dialog(app, { | |
| title: typeof title === 'undefined' ? app.params.dialog.progressTitle : title, | |
| cssClass: 'dialog-progress', | |
| content: ("\n <div class=\"progressbar" + (infinite ? '-infinite' : '') + (color ? (" color-" + color) : '') + "\">\n " + (!infinite ? '<span></span>' : '') + "\n </div>\n "), | |
| destroyOnClose: destroyOnClose, | |
| }); | |
| if (!infinite) { dialog.setProgress(progress); } | |
| return dialog.open(); | |
| }, | |
| } | |
| ); | |
| }, | |
| }; | |
| var Popup = /*@__PURE__*/(function (Modal$$1) { | |
| function Popup(app, params) { | |
| var extendedParams = Utils.extend( | |
| { on: {} }, | |
| app.params.popup, | |
| params | |
| ); | |
| // Extends with open/close Modal methods; | |
| Modal$$1.call(this, app, extendedParams); | |
| var popup = this; | |
| popup.params = extendedParams; | |
| // Find Element | |
| var $el; | |
| if (!popup.params.el) { | |
| $el = $(popup.params.content); | |
| } else { | |
| $el = $(popup.params.el); | |
| } | |
| if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| return $el[0].f7Modal; | |
| } | |
| if ($el.length === 0) { | |
| return popup.destroy(); | |
| } | |
| var $backdropEl; | |
| if (popup.params.backdrop) { | |
| $backdropEl = app.root.children('.popup-backdrop'); | |
| if ($backdropEl.length === 0) { | |
| $backdropEl = $('<div class="popup-backdrop"></div>'); | |
| app.root.append($backdropEl); | |
| } | |
| } | |
| Utils.extend(popup, { | |
| app: app, | |
| $el: $el, | |
| el: $el[0], | |
| $backdropEl: $backdropEl, | |
| backdropEl: $backdropEl && $backdropEl[0], | |
| type: 'popup', | |
| }); | |
| function handleClick(e) { | |
| var target = e.target; | |
| var $target = $(target); | |
| if ($target.closest(popup.el).length === 0) { | |
| if ( | |
| popup.params | |
| && popup.params.closeByBackdropClick | |
| && popup.params.backdrop | |
| && popup.backdropEl | |
| && popup.backdropEl === target | |
| ) { | |
| var needToClose = true; | |
| popup.$el.nextAll('.popup.modal-in').each(function (index, popupEl) { | |
| var popupInstance = popupEl.f7Modal; | |
| if (!popupInstance) { return; } | |
| if ( | |
| popupInstance.params.closeByBackdropClick | |
| && popupInstance.params.backdrop | |
| && popupInstance.backdropEl === popup.backdropEl | |
| ) { | |
| needToClose = false; | |
| } | |
| }); | |
| if (needToClose) { | |
| popup.close(); | |
| } | |
| } | |
| } | |
| } | |
| popup.on('popupOpened', function () { | |
| if (popup.params.closeByBackdropClick) { | |
| app.on('click', handleClick); | |
| } | |
| }); | |
| popup.on('popupClose', function () { | |
| if (popup.params.closeByBackdropClick) { | |
| app.off('click', handleClick); | |
| } | |
| }); | |
| $el[0].f7Modal = popup; | |
| return popup; | |
| } | |
| if ( Modal$$1 ) Popup.__proto__ = Modal$$1; | |
| Popup.prototype = Object.create( Modal$$1 && Modal$$1.prototype ); | |
| Popup.prototype.constructor = Popup; | |
| return Popup; | |
| }(Modal)); | |
| var Popup$1 = { | |
| name: 'popup', | |
| params: { | |
| popup: { | |
| backdrop: true, | |
| closeByBackdropClick: true, | |
| }, | |
| }, | |
| static: { | |
| Popup: Popup, | |
| }, | |
| create: function create() { | |
| var app = this; | |
| app.popup = ModalMethods({ | |
| app: app, | |
| constructor: Popup, | |
| defaultSelector: '.popup.modal-in', | |
| }); | |
| }, | |
| clicks: { | |
| '.popup-open': function openPopup($clickedEl, data) { | |
| if ( data === void 0 ) data = {}; | |
| var app = this; | |
| app.popup.open(data.popup, data.animate); | |
| }, | |
| '.popup-close': function closePopup($clickedEl, data) { | |
| if ( data === void 0 ) data = {}; | |
| var app = this; | |
| app.popup.close(data.popup, data.animate); | |
| }, | |
| }, | |
| }; | |
| var LoginScreen = /*@__PURE__*/(function (Modal$$1) { | |
| function LoginScreen(app, params) { | |
| var extendedParams = Utils.extend({ | |
| on: {}, | |
| }, params); | |
| // Extends with open/close Modal methods; | |
| Modal$$1.call(this, app, extendedParams); | |
| var loginScreen = this; | |
| loginScreen.params = extendedParams; | |
| // Find Element | |
| var $el; | |
| if (!loginScreen.params.el) { | |
| $el = $(loginScreen.params.content); | |
| } else { | |
| $el = $(loginScreen.params.el); | |
| } | |
| if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| return $el[0].f7Modal; | |
| } | |
| if ($el.length === 0) { | |
| return loginScreen.destroy(); | |
| } | |
| Utils.extend(loginScreen, { | |
| app: app, | |
| $el: $el, | |
| el: $el[0], | |
| type: 'loginScreen', | |
| }); | |
| $el[0].f7Modal = loginScreen; | |
| return loginScreen; | |
| } | |
| if ( Modal$$1 ) LoginScreen.__proto__ = Modal$$1; | |
| LoginScreen.prototype = Object.create( Modal$$1 && Modal$$1.prototype ); | |
| LoginScreen.prototype.constructor = LoginScreen; | |
| return LoginScreen; | |
| }(Modal)); | |
| var LoginScreen$1 = { | |
| name: 'loginScreen', | |
| static: { | |
| LoginScreen: LoginScreen, | |
| }, | |
| create: function create() { | |
| var app = this; | |
| app.loginScreen = ModalMethods({ | |
| app: app, | |
| constructor: LoginScreen, | |
| defaultSelector: '.login-screen.modal-in', | |
| }); | |
| }, | |
| clicks: { | |
| '.login-screen-open': function openLoginScreen($clickedEl, data) { | |
| if ( data === void 0 ) data = {}; | |
| var app = this; | |
| app.loginScreen.open(data.loginScreen, data.animate); | |
| }, | |
| '.login-screen-close': function closeLoginScreen($clickedEl, data) { | |
| if ( data === void 0 ) data = {}; | |
| var app = this; | |
| app.loginScreen.close(data.loginScreen, data.animate); | |
| }, | |
| }, | |
| }; | |
| var Popover = /*@__PURE__*/(function (Modal$$1) { | |
| function Popover(app, params) { | |
| var extendedParams = Utils.extend( | |
| { on: {} }, | |
| app.params.popover, | |
| params | |
| ); | |
| // Extends with open/close Modal methods; | |
| Modal$$1.call(this, app, extendedParams); | |
| var popover = this; | |
| popover.params = extendedParams; | |
| // Find Element | |
| var $el; | |
| if (!popover.params.el) { | |
| $el = $(popover.params.content); | |
| } else { | |
| $el = $(popover.params.el); | |
| } | |
| if ($el && $el.length > 0 && $el[0].f7Modal) { | |
| return $el[0].f7Modal; | |
| } | |
| // Find Target | |
| var $targetEl = $(popover.params.targetEl).eq(0); | |
| if ($el.length === 0) { | |
| return popover.destroy(); | |
| } | |
| // Backdrop | |
| var $backdropEl; | |
| if (popover.params.backdrop) { | |
| $backdropEl = app.root.children('.popover-backdrop'); | |
| if ($backdropEl.length === 0) { | |
| $backdropEl = $('<div class="popover-backdrop"></div>'); | |
| app.root.append($backdropEl); | |
| } | |
| } | |
| // Find Angle | |
| var $angleEl; | |
| if ($el.find('.popover-angle').length === 0) { | |
| $angleEl = $('<div class="popover-angle"></div>'); | |
| $el.prepend($angleEl); | |
| } else { | |
| $angleEl = $el.find('.popover-angle'); | |
| } | |
| // Open | |
| var originalOpen = popover.open; | |
| Utils.extend(popover, { | |
| app: app, | |
| $el: $el, | |
| el: $el[0], | |
| $targetEl: $targetEl, | |
| targetEl: $targetEl[0], | |
| $angleEl: $angleEl, | |
| angleEl: $angleEl[0], | |
| $backdropEl: $backdropEl, | |
| backdropEl: $backdropEl && $backdropEl[0], | |
| type: 'popover', | |
| open: function open() { | |
| var assign; | |
| var args = [], len = arguments.length; | |
| while ( len-- ) args[ len ] = arguments[ len ]; | |
| var targetEl = args[0]; | |
| var animate = args[1]; | |
| if (typeof args[0] === 'boolean') { (assign = args, animate = assign[0], targetEl = assign[1]); } | |
| if (targetEl) { | |
| popover.$targetEl = $(targetEl); | |
| popover.targetEl = popover.$targetEl[0]; | |
| } | |
| return originalOpen.call(popover, animate); | |
| }, | |
| }); | |
| function handleResize() { | |
| popover.resize(); | |
| } | |
| popover.on('popoverOpen', function () { | |
| popover.resize(); | |
| app.on('resize', handleResize); | |
| popover.on('popoverClose popoverBeforeDestroy', function () { | |
| app.off('resize', handleResize); | |
| }); | |
| }); | |
| function handleClick(e) { | |
| var target = e.target; | |
| var $target = $(target); | |
| if ($target.closest(popover.el).length === 0) { | |
| if ( | |
| popover.params.closeByBackdropClick | |
| && popover.params.backdrop | |
| && popover.backdropEl | |
| && popover.backdropEl === target | |
| ) { | |
| popover.close(); | |
| } else if (popover.params.closeByOutsideClick) { | |
| popover.close(); | |
| } | |
| } | |
| } | |
| popover.on('popoverOpened', function () { | |
| if (popover.params.closeByOutsideClick || popover.params.closeByBackdropClick) { | |
| app.on('click', handleClick); | |
| } | |
| }); | |
| popover.on('popoverClose', function () { | |
| if (popover.params.closeByOutsideClick || popover.params.closeByBackdropClick) { | |
| app.off('click', handleClick); | |
| } | |
| }); | |
| $el[0].f7Modal = popover; | |
| return popover; | |
| } | |
| if ( Modal$$1 ) Popover.__proto__ = Modal$$1; | |
| Popover.prototype = Object.create( Modal$$1 && Modal$$1.prototype ); | |
| Popover.prototype.constructor = Popover; | |
| Popover.prototype.resize = function resize () { | |
| var popover = this; | |
| var app = popover.app; | |
| var $el = popover.$el; | |
| var $targetEl = popover.$targetEl; | |
| var $angleEl = popover.$angleEl; | |
| var ref = popover.params; | |
| var targetX = ref.targetX; | |
| var targetY = ref.targetY; | |
| $el.css({ left: '', top: '' }); | |
| var ref$1 = [$el.width(), $el.height()]; | |
| var width = ref$1[0]; | |
| var height = ref$1[1]; | |
| var angleSize = 0; | |
| var angleLeft; | |
| var angleTop; | |
| if (app.theme === 'ios') { | |
| $angleEl.removeClass('on-left on-right on-top on-bottom').css({ left: '', top: '' }); | |
| angleSize = $angleEl.width() / 2; | |
| } else { | |
| $el.removeClass('popover-on-left popover-on-right popover-on-top popover-on-bottom').css({ left: '', top: '' }); | |
| } | |
| var targetWidth; | |
| var targetHeight; | |
| var targetOffsetLeft; | |
| var targetOffsetTop; | |
| if ($targetEl && $targetEl.length > 0) { | |
| targetWidth = $targetEl.outerWidth(); | |
| targetHeight = $targetEl.outerHeight(); | |
| var targetOffset = $targetEl.offset(); | |
| targetOffsetLeft = targetOffset.left - app.left; | |
| targetOffsetTop = targetOffset.top - app.top; | |
| var targetParentPage = $targetEl.parents('.page'); | |
| if (targetParentPage.length > 0) { | |
| targetOffsetTop -= targetParentPage[0].scrollTop; | |
| } | |
| } else if (typeof targetX !== 'undefined' && targetY !== 'undefined') { | |
| targetOffsetLeft = targetX; | |
| targetOffsetTop = targetY; | |
| targetWidth = popover.params.targetWidth || 0; | |
| targetHeight = popover.params.targetHeight || 0; | |
| } | |
| var ref$2 = [0, 0, 0]; | |
| var left = ref$2[0]; | |
| var top = ref$2[1]; | |
| var diff = ref$2[2]; | |
| // Top Position | |
| var position = app.theme === 'md' ? 'bottom' : 'top'; | |
| if (app.theme === 'md') { | |
| if (height < app.height - targetOffsetTop - targetHeight) { | |
| // On bottom | |
| position = 'bottom'; | |
| top = targetOffsetTop; | |
| } else if (height < targetOffsetTop) { | |
| // On top | |
| top = (targetOffsetTop - height) + targetHeight; | |
| position = 'top'; | |
| } else { | |
| // On middle | |
| position = 'bottom'; | |
| top = targetOffsetTop; | |
| } | |
| if (top <= 0) { | |
| top = 8; | |
| } else if (top + height >= app.height) { | |
| top = app.height - height - 8; | |
| } | |
| // Horizontal Position | |
| left = (targetOffsetLeft + targetWidth) - width - 8; | |
| if (left + width >= app.width - 8) { | |
| left = (targetOffsetLeft + targetWidth) - width - 8; | |
| } | |
| if (left < 8) { | |
| left = 8; | |
| } | |
| if (position === 'top') { | |
| $el.addClass('popover-on-top'); | |
| } | |
| if (position === 'bottom') { | |
| $el.addClass('popover-on-bottom'); | |
| } | |
| } else { | |
| if ((height + angleSize) < targetOffsetTop) { | |
| // On top | |
| top = targetOffsetTop - height - angleSize; | |
| } else if ((height + angleSize) < app.height - targetOffsetTop - targetHeight) { | |
| // On bottom | |
| position = 'bottom'; | |
| top = targetOffsetTop + targetHeight + angleSize; | |
| } else { | |
| // On middle | |
| position = 'middle'; | |
| top = ((targetHeight / 2) + targetOffsetTop) - (height / 2); | |
| diff = top; | |
| if (top <= 0) { | |
| top = 5; | |
| } else if (top + height >= app.height) { | |
| top = app.height - height - 5; | |
| } | |
| diff -= top; | |
| } | |
| // Horizontal Position | |
| if (position === 'top' || position === 'bottom') { | |
| left = ((targetWidth / 2) + targetOffsetLeft) - (width / 2); | |
| diff = left; | |
| if (left < 5) { left = 5; } | |
| if (left + width > app.width) { left = app.width - width |
View raw
(Sorry about that, but we can’t show files that are this big right now.)
View raw
(Sorry about that, but we can’t show files that are this big right now.)
View raw
(Sorry about that, but we can’t show files that are this big right now.)
View raw
(Sorry about that, but we can’t show files that are this big right now.)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment