framework7 7.0.0-beta.10 → 7.0.0-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/actions/actions-class.js +6 -1
- package/components/actions/actions-rtl.css +1 -1
- package/components/actions/actions.css +1 -1
- package/components/actions/actions.d.ts +2 -0
- package/components/actions/actions.js +1 -0
- package/components/actions/actions.lazy.js +1 -1
- package/components/actions/actions.less +3 -0
- package/components/breadcrumbs/breadcrumbs-aurora.less +2 -0
- package/components/breadcrumbs/breadcrumbs-ios.less +2 -0
- package/components/breadcrumbs/breadcrumbs-md.less +2 -0
- package/components/breadcrumbs/breadcrumbs-rtl.css +1 -0
- package/components/breadcrumbs/breadcrumbs-vars.less +36 -0
- package/components/breadcrumbs/breadcrumbs.css +1 -0
- package/components/breadcrumbs/breadcrumbs.d.ts +15 -0
- package/components/breadcrumbs/breadcrumbs.js +13 -0
- package/components/breadcrumbs/breadcrumbs.lazy.js +1 -0
- package/components/breadcrumbs/breadcrumbs.less +100 -0
- package/components/calendar/calendar-class.js +206 -122
- package/components/calendar/calendar-rtl.css +1 -1
- package/components/calendar/calendar-vars.less +6 -10
- package/components/calendar/calendar.css +1 -1
- package/components/calendar/calendar.d.ts +2 -0
- package/components/calendar/calendar.js +1 -0
- package/components/calendar/calendar.lazy.js +1 -1
- package/components/calendar/calendar.less +20 -16
- package/components/list-index/list-index.d.ts +1 -1
- package/components/modal/modal-class.js +10 -0
- package/components/notification/notification.d.ts +4 -4
- package/components/picker/picker-class.js +6 -6
- package/components/picker/picker-column.js +34 -270
- package/components/picker/picker-rtl.css +1 -1
- package/components/picker/picker.css +1 -1
- package/components/picker/picker.d.ts +2 -13
- package/components/picker/picker.js +0 -5
- package/components/picker/picker.lazy.js +1 -1
- package/components/picker/picker.less +28 -10
- package/components/popover/popover-class.js +15 -2
- package/components/popover/popover-rtl.css +1 -1
- package/components/popover/popover.css +1 -1
- package/components/popover/popover.d.ts +2 -0
- package/components/popover/popover.js +1 -0
- package/components/popover/popover.lazy.js +1 -1
- package/components/popover/popover.less +3 -0
- package/components/popup/popup-class.js +6 -1
- package/components/popup/popup-rtl.css +1 -1
- package/components/popup/popup.css +1 -1
- package/components/popup/popup.d.ts +4 -0
- package/components/popup/popup.js +1 -0
- package/components/popup/popup.lazy.js +1 -1
- package/components/popup/popup.less +4 -0
- package/components/preloader/preloader.d.ts +4 -0
- package/components/progressbar/progressbar-aurora.less +32 -13
- package/components/progressbar/progressbar-ios.less +19 -7
- package/components/progressbar/progressbar-md.less +64 -28
- package/components/progressbar/progressbar-rtl.css +1 -1
- package/components/progressbar/progressbar.css +1 -1
- package/components/progressbar/progressbar.js +1 -1
- package/components/progressbar/progressbar.lazy.js +1 -1
- package/components/progressbar/progressbar.less +16 -4
- package/components/range/range.d.ts +23 -5
- package/components/sheet/sheet-class.js +6 -1
- package/components/sheet/sheet-rtl.css +1 -1
- package/components/sheet/sheet.css +1 -1
- package/components/sheet/sheet.d.ts +2 -0
- package/components/sheet/sheet.js +1 -0
- package/components/sheet/sheet.lazy.js +1 -1
- package/components/sheet/sheet.less +3 -0
- package/components/sortable/sortable.d.ts +5 -1
- package/components/sortable/sortable.js +15 -2
- package/components/sortable/sortable.lazy.js +1 -1
- package/components/swiper/swiper-rtl.css +1 -1
- package/components/swiper/swiper.css +1 -1
- package/components/swiper/swiper.lazy.js +1 -1
- package/components/tabs/tabs.js +4 -5
- package/components/tabs/tabs.lazy.js +1 -1
- package/components/toast/toast.d.ts +2 -2
- package/components/toolbar/toolbar-aurora.less +0 -13
- package/components/toolbar/toolbar-md.less +0 -13
- package/components/toolbar/toolbar.js +1 -1
- package/components/toolbar/toolbar.less +13 -0
- package/components/view/view.d.ts +2 -0
- package/components/view/view.js +1 -0
- package/framework7-bundle-rtl.css +249 -150
- package/framework7-bundle-rtl.min.css +4 -4
- package/framework7-bundle.css +234 -134
- package/framework7-bundle.esm.js +5 -4
- package/framework7-bundle.js +927 -713
- package/framework7-bundle.js.map +1 -1
- package/framework7-bundle.less +4 -3
- package/framework7-bundle.min.css +4 -4
- package/framework7-bundle.min.js +4 -4
- package/framework7-bundle.min.js.map +1 -1
- package/framework7-lite-bundle.esm.js +5 -4
- package/framework7-lite.esm.js +3 -3
- package/framework7-rtl.css +12 -21
- package/framework7-rtl.min.css +4 -4
- package/framework7-types.d.ts +5 -1
- package/framework7.css +11 -19
- package/framework7.d.ts +4 -0
- package/framework7.esm.js +3 -3
- package/framework7.js +38 -13
- package/framework7.js.map +1 -1
- package/framework7.less +3 -3
- package/framework7.min.css +4 -4
- package/framework7.min.js +4 -4
- package/framework7.min.js.map +1 -1
- package/modules/router/back.js +11 -1
- package/modules/router/tab.js +1 -1
- package/package.json +9 -5
|
@@ -38,11 +38,18 @@ class Popover extends Modal {
|
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
let $backdropEl;
|
|
41
|
+
const forceBackdropUnique = popover.params.backdrop && app.$el.find('.popover.modal-in').filter(anotherPopoverEl => anotherPopoverEl !== $el[0]).length > 0;
|
|
41
42
|
|
|
42
43
|
if (popover.params.backdrop && popover.params.backdropEl) {
|
|
43
44
|
$backdropEl = $(popover.params.backdropEl);
|
|
44
45
|
} else if (popover.params.backdrop) {
|
|
45
|
-
|
|
46
|
+
if (popover.params.backdropUnique || forceBackdropUnique) {
|
|
47
|
+
$backdropEl = $('<div class="popover-backdrop popover-backdrop-unique"></div>');
|
|
48
|
+
$backdropEl[0].f7PopoverRef = popover;
|
|
49
|
+
popover.$containerEl.append($backdropEl);
|
|
50
|
+
} else {
|
|
51
|
+
$backdropEl = popover.$containerEl.children('.popover-backdrop');
|
|
52
|
+
}
|
|
46
53
|
|
|
47
54
|
if ($backdropEl.length === 0) {
|
|
48
55
|
$backdropEl = $('<div class="popover-backdrop"></div>');
|
|
@@ -73,6 +80,7 @@ class Popover extends Modal {
|
|
|
73
80
|
$backdropEl,
|
|
74
81
|
backdropEl: $backdropEl && $backdropEl[0],
|
|
75
82
|
type: 'popover',
|
|
83
|
+
forceBackdropUnique,
|
|
76
84
|
|
|
77
85
|
open(...args) {
|
|
78
86
|
let [targetEl, animate] = args;
|
|
@@ -117,7 +125,12 @@ class Popover extends Modal {
|
|
|
117
125
|
if (popover.params.closeByBackdropClick && popover.params.backdrop && popover.backdropEl && popover.backdropEl === target && touchStartTarget === target) {
|
|
118
126
|
popover.close();
|
|
119
127
|
} else if (popover.params.closeByOutsideClick && touchStartTarget === target) {
|
|
120
|
-
popover.
|
|
128
|
+
const isAnotherPopoverBackdrop = $target.hasClass('popover-backdrop-unique') && target.f7PopoverRef !== popover || $target.hasClass('popover-backdrop') && target !== popover.backdropEl;
|
|
129
|
+
const isAnotherPopoverTarget = target.closest('.popover') && target.closest('.popover') !== popover.$el[0];
|
|
130
|
+
|
|
131
|
+
if (!isAnotherPopoverBackdrop && !isAnotherPopoverTarget) {
|
|
132
|
+
popover.close();
|
|
133
|
+
}
|
|
121
134
|
}
|
|
122
135
|
}
|
|
123
136
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;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:0 0}.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:0s}.popover-inner{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(.85,.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-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}
|
|
1
|
+
:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;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:0 0}.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:0s}.popover-inner{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(.85,.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-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;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:0 0}.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:0s}.popover-inner{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(.85,.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-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}
|
|
1
|
+
:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;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:0 0}.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:0s}.popover-inner{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(.85,.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-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}
|
|
@@ -23,6 +23,8 @@ export namespace Popover {
|
|
|
23
23
|
backdrop?: boolean;
|
|
24
24
|
/** Backdrop element to share across instances */
|
|
25
25
|
backdropEl?: HTMLElement | CSSSelector;
|
|
26
|
+
/** If enabled it creates unique backdrop element exclusively for this modal (default false) */
|
|
27
|
+
backdropUnique?: boolean;
|
|
26
28
|
/** When enabled, popover will be closed on backdrop click. (default true) */
|
|
27
29
|
closeByBackdropClick?: boolean;
|
|
28
30
|
/** When enabled, popover will be closed on when click outside of it (default true) */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,a=e.utils,
|
|
1
|
+
(function framework7ComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,a=e.utils,p=e.getDevice,r=(e.getSupport,e.Class,e.Modal),s=(e.ConstructorMethods,e.ModalMethods),l=a.extend;class n extends r{constructor(e,o){const a=l({on:{}},e.params.popover,o);super(e,a);const r=this,s=p(),n=getWindow(),i=getDocument();let d;if(r.params=a,d=r.params.el?t(r.params.el).eq(0):t(r.params.content).filter((e=>1===e.nodeType)).eq(0),d&&d.length>0&&d[0].f7Modal)return d[0].f7Modal;const c=t(r.params.targetEl).eq(0);if(0===d.length)return r.destroy();let m;const h=r.params.backdrop&&e.$el.find(".popover.modal-in").filter((e=>e!==d[0])).length>0;let f;r.params.backdrop&&r.params.backdropEl?m=t(r.params.backdropEl):r.params.backdrop&&(r.params.backdropUnique||h?(m=t('<div class="popover-backdrop popover-backdrop-unique"></div>'),m[0].f7PopoverRef=r,r.$containerEl.append(m)):m=r.$containerEl.children(".popover-backdrop"),0===m.length&&(m=t('<div class="popover-backdrop"></div>'),r.$containerEl.append(m))),0===d.find(".popover-angle").length?(f=t('<div class="popover-angle"></div>'),d.prepend(f)):f=d.find(".popover-angle");const v=r.open;function g(){r.resize()}l(r,{app:e,$el:d,el:d[0],$targetEl:c,targetEl:c[0],$angleEl:f,angleEl:f[0],$backdropEl:m,backdropEl:m&&m[0],type:"popover",forceBackdropUnique:h,open(...e){let[o,a]=e;return"boolean"==typeof e[0]&&([a,o]=e),o&&(r.$targetEl=t(o),r.targetEl=r.$targetEl[0]),v.call(r,a)}}),r.on("popoverOpen",(()=>{r.resize(),e.on("resize",g),t(n).on("keyboardDidShow keyboardDidHide",g),r.on("popoverClose popoverBeforeDestroy",(()=>{e.off("resize",g),t(n).off("keyboardDidShow keyboardDidHide",g)}))}));let u=null;function k(e){u=e.target}function b(e){const o=e.target,a=t(o);if(!(!s.desktop&&s.cordova&&(n.Keyboard&&n.Keyboard.isVisible||n.cordova.plugins&&n.cordova.plugins.Keyboard&&n.cordova.plugins.Keyboard.isVisible))&&0===a.closest(r.el).length)if(r.params.closeByBackdropClick&&r.params.backdrop&&r.backdropEl&&r.backdropEl===o&&u===o)r.close();else if(r.params.closeByOutsideClick&&u===o){const e=a.hasClass("popover-backdrop-unique")&&o.f7PopoverRef!==r||a.hasClass("popover-backdrop")&&o!==r.backdropEl,t=o.closest(".popover")&&o.closest(".popover")!==r.$el[0];e||t||r.close()}}function y(e){27===e.keyCode&&r.params.closeOnEscape&&r.close()}return r.params.closeOnEscape&&(r.on("popoverOpen",(()=>{t(i).on("keydown",y)})),r.on("popoverClose",(()=>{t(i).off("keydown",y)}))),r.on("popoverOpened",(()=>{(r.params.closeByOutsideClick||r.params.closeByBackdropClick)&&(e.on("touchstart",k),e.on("click",b))})),r.on("popoverClose",(()=>{(r.params.closeByOutsideClick||r.params.closeByBackdropClick)&&(e.off("touchstart",k),e.off("click",b))})),d[0].f7Modal=r,r}resize(){const e=this,{app:o,$el:a,$targetEl:p,$angleEl:r}=e,{targetX:s,targetY:l}=e.params;a.css({left:"",top:""});const[n,i]=[a.width(),a.height()];let d,c,m,h,f,v,g=0;"ios"===o.theme||"aurora"===o.theme?(r.removeClass("on-left on-right on-top on-bottom").css({left:"",top:""}),g=r.width()/2):a.removeClass("popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle").css({left:"",top:""});let u=parseInt(t("html").css("--f7-safe-area-top"),10),k=parseInt(t("html").css("--f7-safe-area-left"),10),b=parseInt(t("html").css("--f7-safe-area-right"),10);if(Number.isNaN(u)&&(u=0),Number.isNaN(k)&&(k=0),Number.isNaN(b)&&(b=0),p&&p.length>0){m=p.outerWidth(),h=p.outerHeight();const e=p.offset();f=e.left-o.left,v=e.top-o.top;const t=p.parents(".page");t.length>0&&(v-=t[0].scrollTop)}else void 0!==s&&"undefined"!==l&&(f=s,v=l,m=e.params.targetWidth||0,h=e.params.targetHeight||0);let[y,E,C]=[0,0,0],M="md"===o.theme?"bottom":"top";if("md"===o.theme){let e;i<o.height-v-h?(M="bottom",E=v+h):i<v-u?(E=v-i,M="top"):(M="middle",E=h/2+v-i/2),E=Math.max(8,Math.min(E,o.height-i-8)),f<o.width/2?(e="right",y="middle"===M?f+m:f):(e="left",y="middle"===M?f-n:f+m-n),y=Math.max(8,Math.min(y,o.width-n-8-b),k),a.addClass(`popover-on-${M} popover-on-${e}`)}else i+g<v-u?E=v-i-g:i+g<o.height-v-h?(M="bottom",E=v+h+g):(M="middle",E=h/2+v-i/2,C=E,E=Math.max(5,Math.min(E,o.height-i-5)),C-=E),"top"===M||"bottom"===M?(y=m/2+f-n/2,C=y,y=Math.max(5,Math.min(y,o.width-n-5)),k&&(y=Math.max(y,k)),b&&y+n>o.width-5-b&&(y=o.width-5-b-n),"top"===M&&r.addClass("on-bottom"),"bottom"===M&&r.addClass("on-top"),C-=y,d=n/2-g+C,d=Math.max(Math.min(d,n-2*g-13),13),r.css({left:`${d}px`})):"middle"===M&&(y=f-n-g,r.addClass("on-right"),(y<5||y+n+b>o.width||y<k)&&(y<5&&(y=f+m+g),y+n+b>o.width&&(y=o.width-n-5-b),y<k&&(y=k),r.removeClass("on-right").addClass("on-left")),c=i/2-g+C,c=Math.max(Math.min(c,i-2*g-13),13),r.css({top:`${c}px`}));a.css({top:`${E}px`,left:`${y}px`})}}var i={name:"popover",params:{popover:{backdrop:!0,backdropEl:void 0,backdropUnique:!1,closeByBackdropClick:!0,closeByOutsideClick:!0,closeOnEscape:!1,containerEl:null}},static:{Popover:n},create(){const e=this;e.popover=l(s({app:e,constructor:n,defaultSelector:".popover.modal-in"}),{open(o,a,p){let r=t(o);if(r.length>1){const e=t(a).parents(".page");e.length&&r.each((o=>{const a=t(o);a.parents(e)[0]===e[0]&&(r=a)}))}r.length>1&&(r=r.eq(r.length-1));let s=r[0].f7Modal;const l=r.dataset();return s||(s=new n(e,Object.assign({el:r,targetEl:a},l))),s.open(a,p)}})},clicks:{".popover-open":function(e,o={}){this.popover.open(o.popover,e,o.animate)},".popover-close":function(e,o={}){this.popover.close(o.popover,o.animate,e)}}};if(o){if(e.prototype.modules&&e.prototype.modules[i.name])return;e.use(i),e.instance&&(e.instance.useModuleParams(i,e.instance.params),e.instance.useModule(i))}return i}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
|
|
@@ -40,7 +40,12 @@ class Popup extends Modal {
|
|
|
40
40
|
if (popup.params.backdrop && popup.params.backdropEl) {
|
|
41
41
|
$backdropEl = $(popup.params.backdropEl);
|
|
42
42
|
} else if (popup.params.backdrop) {
|
|
43
|
-
|
|
43
|
+
if (popup.params.backdropUnique) {
|
|
44
|
+
$backdropEl = $('<div class="popup-backdrop popup-backdrop-unique"></div>');
|
|
45
|
+
popup.$containerEl.append($backdropEl);
|
|
46
|
+
} else {
|
|
47
|
+
$backdropEl = popup.$containerEl.children('.popup-backdrop');
|
|
48
|
+
}
|
|
44
49
|
|
|
45
50
|
if ($backdropEl.length === 0) {
|
|
46
51
|
$backdropEl = $('<div class="popup-backdrop"></div>');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;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)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9)}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
|
|
1
|
+
:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;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)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;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)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9)}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
|
|
1
|
+
:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;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)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
|
|
@@ -31,6 +31,8 @@ export namespace Popup {
|
|
|
31
31
|
backdrop?: boolean;
|
|
32
32
|
/** Backdrop element to share across instances */
|
|
33
33
|
backdropEl?: HTMLElement | CSSSelector;
|
|
34
|
+
/** If enabled it creates unique backdrop element exclusively for this modal (default false) */
|
|
35
|
+
backdropUnique?: boolean;
|
|
34
36
|
/** When enabled, popup will be closed on backdrop click. (default true) */
|
|
35
37
|
closeByBackdropClick?: boolean;
|
|
36
38
|
/** When enabled, popup will be closed on ESC keyboard key press (default false) */
|
|
@@ -43,6 +45,8 @@ export namespace Popup {
|
|
|
43
45
|
swipeHandler?: HTMLElement | CSSSelector;
|
|
44
46
|
/** When enabled it will push view behind on open. Works only when top safe area is in place. It can also be enabled by adding `popup-push` class to Popup element. (default false) */
|
|
45
47
|
push?: boolean;
|
|
48
|
+
/** Element to mount modal to. (default app.el) */
|
|
49
|
+
containerEl?: HTMLElement | CSSSelector;
|
|
46
50
|
|
|
47
51
|
/** Object with events handlers.. */
|
|
48
52
|
on?: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function framework7ComponentLoader(o
|
|
1
|
+
(function framework7ComponentLoader(p,o){void 0===o&&(o=!0);var e=p.$,s=p.utils,t=p.getDevice,a=p.getSupport,r=(p.Class,p.Modal),l=(p.ConstructorMethods,p.ModalMethods),n=s.extend,i=s.now,c=s.nextTick;class u extends r{constructor(p,o){const s=n({on:{}},p.params.popup,o);super(p,s);const r=this,l=getWindow(),u=getDocument(),d=a(),m=t();let h,f,g,v;if(r.params=s,h=r.params.el?e(r.params.el).eq(0):e(r.params.content).filter((p=>1===p.nodeType)).eq(0),h&&h.length>0&&h[0].f7Modal)return h[0].f7Modal;if(0===h.length)return r.destroy();function y(p){const o=p.target,s=e(o);if(!(!m.desktop&&m.cordova&&(l.Keyboard&&l.Keyboard.isVisible||l.cordova.plugins&&l.cordova.plugins.Keyboard&&l.cordova.plugins.Keyboard.isVisible))&&0===s.closest(r.el).length&&r.params&&r.params.closeByBackdropClick&&r.params.backdrop&&r.backdropEl&&r.backdropEl===o){let p=!0;r.$el.nextAll(".popup.modal-in").each((o=>{const e=o.f7Modal;e&&e.params.closeByBackdropClick&&e.params.backdrop&&e.backdropEl===r.backdropEl&&(p=!1)})),p&&r.close()}}function b(p){27===p.keyCode&&r.params.closeOnEscape&&r.close()}function w(o){return(p.height-2*o)/p.height}r.params.backdrop&&r.params.backdropEl?f=e(r.params.backdropEl):r.params.backdrop&&(r.params.backdropUnique?(f=e('<div class="popup-backdrop popup-backdrop-unique"></div>'),r.$containerEl.append(f)):f=r.$containerEl.children(".popup-backdrop"),0===f.length&&(f=e('<div class="popup-backdrop"></div>'),r.$containerEl.append(f))),n(r,{app:p,push:h.hasClass("popup-push")||r.params.push,$el:h,el:h[0],$backdropEl:f,backdropEl:f&&f[0],type:"popup",$htmlEl:e("html")}),r.params.push&&h.addClass("popup-push");let k,C,E,$,M,T,x,B,P,S,q,H=!0,A=!1,D=!1;function K(p){!A&&H&&r.params.swipeToClose&&(r.params.swipeHandler&&0===e(p.target).closest(r.params.swipeHandler).length||(A=!0,D=!1,k={x:"touchstart"===p.type?p.targetTouches[0].pageX:p.pageX,y:"touchstart"===p.type?p.targetTouches[0].pageY:p.pageY},$=i(),E=void 0,r.params.swipeHandler||"touchstart"!==p.type||(T=e(p.target).closest(".page-content")[0])))}function O(o){if(!A)return;if(C={x:"touchmove"===o.type?o.targetTouches[0].pageX:o.pageX,y:"touchmove"===o.type?o.targetTouches[0].pageY:o.pageY},void 0===E&&(E=!!(E||Math.abs(C.x-k.x)>Math.abs(C.y-k.y))),E)return A=!1,void(D=!1);M=k.y-C.y,v&&g&&M>0&&(M=0);const e=M<0?"to-bottom":"to-top";if(h.transition(0),"string"==typeof r.params.swipeToClose&&e!==r.params.swipeToClose)return h.transform(""),void h.transition("");if(D)r.emit("local::swipeMove popupSwipeMove",r),r.$el.trigger("popup:swipemove");else{if(v&&g&&(S=h[0].offsetHeight,q=h.prevAll(".popup.modal-in").eq(0),0===q.length&&(q=p.$el.children(".view, .views"))),T&&(x=T.scrollTop,P=T.scrollHeight,B=T.offsetHeight,!(P===B||"to-bottom"===e&&0===x||"to-top"===e&&x===P-B)))return h.transform(""),h.transition(""),A=!1,void(D=!1);D=!0,r.emit("local::swipeStart popupSwipeStart",r),r.$el.trigger("popup:swipestart")}if(o.preventDefault(),v&&g){const p=1-Math.abs(M/S),o=1-(1-w(g))*p;q.hasClass("popup")?q.hasClass("popup-push")?q.transition(0).forEach((e=>{e.style.setProperty("transform",`translate3d(0, calc(-1 * ${p} * (var(--f7-popup-push-offset) + 10px)) , 0px) scale(${o})`,"important")})):q.transition(0).forEach((p=>{p.style.setProperty("transform",`translate3d(0, 0px , 0px) scale(${o})`,"important")})):q.transition(0).forEach((p=>{p.style.setProperty("transform",`translate3d(0,0,0) scale(${o})`,"important")}))}h.transition(0).transform(`translate3d(0,${-M}px,0)`)}function X(){if(A=!1,!D)return;r.emit("local::swipeEnd popupSwipeEnd",r),r.$el.trigger("popup:swipeend"),D=!1,H=!1,h.transition(""),v&&g&&q.transition("").transform("");const p=M<=0?"to-bottom":"to-top";if("string"==typeof r.params.swipeToClose&&p!==r.params.swipeToClose)return h.transform(""),void(H=!0);const o=Math.abs(M),e=(new Date).getTime()-$;e<300&&o>20||e>=300&&o>100?c((()=>{"to-bottom"===p?h.addClass("swipe-close-to-bottom"):h.addClass("swipe-close-to-top"),h.transform(""),r.emit("local::swipeclose popupSwipeClose",r),r.$el.trigger("popup:swipeclose"),r.close(),H=!0})):(H=!0,h.transform(""))}const Y=!!d.passiveListener&&{passive:!0};let z;r.params.swipeToClose&&(h.on(p.touchEvents.start,K,Y),p.on("touchmove",O),p.on("touchend:passive",X),r.once("popupDestroy",(()=>{h.off(p.touchEvents.start,K,Y),p.off("touchmove",O),p.off("touchend:passive",X)})));const N=()=>{const o=v;r.push&&(v=r.push&&(p.width<630||p.height<630||h.hasClass("popup-tablet-fullscreen"))),v&&!o?L():v&&o?r.$htmlEl[0].style.setProperty("--f7-popup-push-scale",w(g)):!v&&o&&(r.$htmlEl.removeClass("with-modal-popup-push"),r.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))},L=()=>{p.off("resize",N),r.push&&(v=r.push&&(p.width<630||p.height<630||h.hasClass("popup-tablet-fullscreen"))),v&&(g=parseInt(h.css("--f7-popup-push-offset"),10),Number.isNaN(g)&&(g=0),g&&(h.addClass("popup-push"),r.$htmlEl.addClass("with-modal-popup-push"),r.$htmlEl[0].style.setProperty("--f7-popup-push-scale",w(g)))),p.on("resize",N)};return r.on("open",(()=>{z=!1,r.params.closeOnEscape&&e(u).on("keydown",b),h.prevAll(".popup.modal-in").addClass("popup-behind"),L()})),r.on("opened",(()=>{h.removeClass("swipe-close-to-bottom swipe-close-to-top"),r.params.closeByBackdropClick&&p.on("click",y)})),r.on("close",(()=>{z=r.$el.prevAll(".popup-push.modal-in").length>0,r.params.closeOnEscape&&e(u).off("keydown",b),r.params.closeByBackdropClick&&p.off("click",y),h.prevAll(".popup.modal-in").eq(0).removeClass("popup-behind"),v&&g&&!z&&(r.$htmlEl.removeClass("with-modal-popup-push"),r.$htmlEl.addClass("with-modal-popup-push-closing")),p.off("resize",N)})),r.on("closed",(()=>{h.removeClass("popup-behind"),v&&g&&!z&&(r.$htmlEl.removeClass("with-modal-popup-push-closing"),r.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))})),h[0].f7Modal=r,r}}var d={name:"popup",params:{popup:{backdrop:!0,backdropEl:void 0,backdropUnique:!1,closeByBackdropClick:!0,closeOnEscape:!1,swipeToClose:!1,swipeHandler:null,push:!1,containerEl:null}},static:{Popup:u},create(){this.popup=l({app:this,constructor:u,defaultSelector:".popup.modal-in",parentSelector:".popup"})},clicks:{".popup-open":function(p,o={}){this.popup.open(o.popup,o.animate,p)},".popup-close":function(p,o={}){this.popup.close(o.popup,o.animate,p)}}};if(o){if(p.prototype.modules&&p.prototype.modules[d.name])return;p.use(d),p.instance&&(p.instance.useModuleParams(d,p.instance.params),p.instance.useModule(d))}return d}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
|
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
|
|
4
4
|
.popup-backdrop {
|
|
5
5
|
z-index: 10500;
|
|
6
|
+
&-unique {
|
|
7
|
+
z-index: 11000;
|
|
8
|
+
}
|
|
6
9
|
}
|
|
7
10
|
.popup {
|
|
8
11
|
position: absolute;
|
|
@@ -66,6 +69,7 @@
|
|
|
66
69
|
}
|
|
67
70
|
&.popup-behind {
|
|
68
71
|
transform: translate3d(0, 0, 0) scale(0.9);
|
|
72
|
+
pointer-events: none;
|
|
69
73
|
&.modal-out {
|
|
70
74
|
transform: translate3d(0, 100vh, 0) scale(0.9);
|
|
71
75
|
}
|
|
@@ -5,8 +5,12 @@ export namespace Preloader {
|
|
|
5
5
|
preloader: {
|
|
6
6
|
/** Show Preloader overlay */
|
|
7
7
|
show(color?: string | 'white'): void;
|
|
8
|
+
/** Show Preloader overlay in specified element */
|
|
9
|
+
showIn(el: HTMLElement | CSSSelector, color?: string): void;
|
|
8
10
|
/** Hide Preloader overlay */
|
|
9
11
|
hide(): void;
|
|
12
|
+
/** Hide Preloader overlay in specified element */
|
|
13
|
+
hideIn(el: HTMLElement | CSSSelector): void;
|
|
10
14
|
};
|
|
11
15
|
}
|
|
12
16
|
interface AppParams {}
|
|
@@ -34,20 +34,39 @@
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
|
-
|
|
38
|
-
@keyframes aurora-progressbar-infinite {
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
.ltr({
|
|
38
|
+
@keyframes aurora-progressbar-infinite {
|
|
39
|
+
0% {
|
|
40
|
+
transform: translate3d(-100%, 0, 0);
|
|
41
|
+
}
|
|
42
|
+
100% {
|
|
43
|
+
transform: translate3d(100%, 0, 0);
|
|
44
|
+
}
|
|
41
45
|
}
|
|
42
|
-
|
|
43
|
-
|
|
46
|
+
@keyframes aurora-progressbar-infinite-multicolor {
|
|
47
|
+
0% {
|
|
48
|
+
transform: translate3d(0%, 0, 0);
|
|
49
|
+
}
|
|
50
|
+
100% {
|
|
51
|
+
transform: translate3d(-50%, 0, 0);
|
|
52
|
+
}
|
|
44
53
|
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
54
|
+
});
|
|
55
|
+
.rtl({
|
|
56
|
+
@keyframes aurora-progressbar-infinite {
|
|
57
|
+
0% {
|
|
58
|
+
transform: translate3d(100%, 0, 0);
|
|
59
|
+
}
|
|
60
|
+
100% {
|
|
61
|
+
transform: translate3d(-100%, 0, 0);
|
|
62
|
+
}
|
|
49
63
|
}
|
|
50
|
-
|
|
51
|
-
|
|
64
|
+
@keyframes aurora-progressbar-infinite-multicolor {
|
|
65
|
+
0% {
|
|
66
|
+
transform: translate3d(0%, 0, 0);
|
|
67
|
+
}
|
|
68
|
+
100% {
|
|
69
|
+
transform: translate3d(50%, 0, 0);
|
|
70
|
+
}
|
|
52
71
|
}
|
|
53
|
-
}
|
|
72
|
+
});
|
|
@@ -28,15 +28,27 @@
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
|
|
32
|
-
@keyframes ios-progressbar-infinite {
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
.ltr({
|
|
32
|
+
@keyframes ios-progressbar-infinite {
|
|
33
|
+
0% {
|
|
34
|
+
transform: translate3d(-100%, 0, 0);
|
|
35
|
+
}
|
|
36
|
+
100% {
|
|
37
|
+
transform: translate3d(100%, 0, 0);
|
|
38
|
+
}
|
|
35
39
|
}
|
|
36
|
-
|
|
37
|
-
|
|
40
|
+
});
|
|
41
|
+
.rtl({
|
|
42
|
+
@keyframes ios-progressbar-infinite {
|
|
43
|
+
0% {
|
|
44
|
+
transform: translate3d(100%, 0, 0);
|
|
45
|
+
}
|
|
46
|
+
100% {
|
|
47
|
+
transform: translate3d(-100%, 0, 0);
|
|
48
|
+
}
|
|
38
49
|
}
|
|
39
|
-
}
|
|
50
|
+
});
|
|
51
|
+
|
|
40
52
|
@keyframes ios-progressbar-infinite-multicolor {
|
|
41
53
|
0% {
|
|
42
54
|
transform: translate3d(0%, 0, 0);
|
|
@@ -22,38 +22,74 @@
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
@keyframes md-progressbar-infinite-2 {
|
|
41
|
-
0% {
|
|
42
|
-
transform: translateX(-100%) scaleX(1);
|
|
43
|
-
}
|
|
44
|
-
40% {
|
|
45
|
-
transform: translateX(-100%) scaleX(1);
|
|
25
|
+
.ltr({
|
|
26
|
+
@keyframes md-progressbar-infinite-1 {
|
|
27
|
+
0% {
|
|
28
|
+
transform: translateX(-10%) scaleX(0.1);
|
|
29
|
+
}
|
|
30
|
+
25% {
|
|
31
|
+
transform: translateX(30%) scaleX(0.6);
|
|
32
|
+
}
|
|
33
|
+
50% {
|
|
34
|
+
transform: translateX(100%) scaleX(1);
|
|
35
|
+
}
|
|
36
|
+
100% {
|
|
37
|
+
transform: translateX(100%) scaleX(1);
|
|
38
|
+
}
|
|
46
39
|
}
|
|
47
|
-
|
|
48
|
-
|
|
40
|
+
@keyframes md-progressbar-infinite-2 {
|
|
41
|
+
0% {
|
|
42
|
+
transform: translateX(-100%) scaleX(1);
|
|
43
|
+
}
|
|
44
|
+
40% {
|
|
45
|
+
transform: translateX(-100%) scaleX(1);
|
|
46
|
+
}
|
|
47
|
+
75% {
|
|
48
|
+
transform: translateX(60%) scaleX(0.35);
|
|
49
|
+
}
|
|
50
|
+
90% {
|
|
51
|
+
transform: translateX(100%) scaleX(0.1);
|
|
52
|
+
}
|
|
53
|
+
100% {
|
|
54
|
+
transform: translateX(100%) scaleX(0.1);
|
|
55
|
+
}
|
|
49
56
|
}
|
|
50
|
-
|
|
51
|
-
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
.rtl({
|
|
60
|
+
@keyframes md-progressbar-infinite-1 {
|
|
61
|
+
0% {
|
|
62
|
+
transform: translateX(10%) scaleX(0.1);
|
|
63
|
+
}
|
|
64
|
+
25% {
|
|
65
|
+
transform: translateX(-30%) scaleX(0.6);
|
|
66
|
+
}
|
|
67
|
+
50% {
|
|
68
|
+
transform: translateX(-100%) scaleX(1);
|
|
69
|
+
}
|
|
70
|
+
100% {
|
|
71
|
+
transform: translateX(-100%) scaleX(1);
|
|
72
|
+
}
|
|
52
73
|
}
|
|
53
|
-
|
|
54
|
-
|
|
74
|
+
@keyframes md-progressbar-infinite-2 {
|
|
75
|
+
0% {
|
|
76
|
+
transform: translateX(100%) scaleX(1);
|
|
77
|
+
}
|
|
78
|
+
40% {
|
|
79
|
+
transform: translateX(100%) scaleX(1);
|
|
80
|
+
}
|
|
81
|
+
75% {
|
|
82
|
+
transform: translateX(-60%) scaleX(0.35);
|
|
83
|
+
}
|
|
84
|
+
90% {
|
|
85
|
+
transform: translateX(-100%) scaleX(0.1);
|
|
86
|
+
}
|
|
87
|
+
100% {
|
|
88
|
+
transform: translateX(-100%) scaleX(0.1);
|
|
89
|
+
}
|
|
55
90
|
}
|
|
56
|
-
}
|
|
91
|
+
});
|
|
92
|
+
|
|
57
93
|
@keyframes md-progressbar-infinite-multicolor-bg {
|
|
58
94
|
0% {
|
|
59
95
|
background-color: @green;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.aurora{--f7-progressbar-height:6px;--f7-progressbar-border-radius:3px;--f7-progressbar-bg-color:#dbdbdb}.aurora .dark,.aurora.dark{--f7-progressbar-bg-color:#444}.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),.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;
|
|
1
|
+
.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.aurora{--f7-progressbar-height:6px;--f7-progressbar-border-radius:3px;--f7-progressbar-bg-color:#dbdbdb}.aurora .dark,.aurora.dark{--f7-progressbar-bg-color:#444}.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),.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;top:0;transition-duration:150ms;right:0;transform:translate3d(100%,0,0)}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;top:0;width:100%;height:100%;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));right:0;transform-origin:right center}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}@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:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(10%) scaleX(.1)}25%{transform:translateX(-30%) scaleX(.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(.35)}90%{transform:translateX(-100%) scaleX(.1)}100%{transform:translateX(-100%) scaleX(.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}}.aurora .progressbar,.aurora .progressbar span,.aurora .progressbar-infinite,.aurora .progressbar-infinite:before{box-shadow:0px 0px 0px 1px rgba(0,0,0,.05) inset}.aurora .progressbar-infinite:before{animation:aurora-progressbar-infinite 1s linear infinite}.aurora .progressbar-infinite:after{display:none}.aurora .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:aurora-progressbar-infinite-multicolor 3s linear infinite}@keyframes aurora-progressbar-infinite{0%{transform:translate3d(100%,0,0)}100%{transform:translate3d(-100%,0,0)}}@keyframes aurora-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(50%,0,0)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.aurora{--f7-progressbar-height:6px;--f7-progressbar-border-radius:3px;--f7-progressbar-bg-color:#dbdbdb}.aurora .dark,.aurora.dark{--f7-progressbar-bg-color:#444}.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),.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;
|
|
1
|
+
.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.aurora{--f7-progressbar-height:6px;--f7-progressbar-border-radius:3px;--f7-progressbar-bg-color:#dbdbdb}.aurora .dark,.aurora.dark{--f7-progressbar-bg-color:#444}.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),.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;top:0;transition-duration:150ms;left:0;transform:translate3d(-100%,0,0)}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;top:0;width:100%;height:100%;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));left:0;transform-origin:left center}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}@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:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(-10%) scaleX(.1)}25%{transform:translateX(30%) scaleX(.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(.35)}90%{transform:translateX(100%) scaleX(.1)}100%{transform:translateX(100%) scaleX(.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}}.aurora .progressbar,.aurora .progressbar span,.aurora .progressbar-infinite,.aurora .progressbar-infinite:before{box-shadow:0px 0px 0px 1px rgba(0,0,0,.05) inset}.aurora .progressbar-infinite:before{animation:aurora-progressbar-infinite 1s linear infinite}.aurora .progressbar-infinite:after{display:none}.aurora .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:aurora-progressbar-infinite-multicolor 3s linear infinite}@keyframes aurora-progressbar-infinite{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}@keyframes aurora-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}
|
|
@@ -35,7 +35,7 @@ const Progressbar = {
|
|
|
35
35
|
$progressbarEl.append($progressbarLine);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
$progressbarLine.transition(typeof duration !== 'undefined' ? duration : '').transform(`translate3d(${-100 + progressNormalized}%,0,0)`);
|
|
38
|
+
$progressbarLine.transition(typeof duration !== 'undefined' ? duration : '').transform(`translate3d(${(-100 + progressNormalized) * (app.rtl ? -1 : 1)}%,0,0)`);
|
|
39
39
|
return $progressbarEl[0];
|
|
40
40
|
},
|
|
41
41
|
|