framework7 8.3.4 → 9.0.0
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/accordion/accordion-rtl.css +1 -1
- package/components/accordion/accordion.css +1 -1
- package/components/actions/actions-ios.less +22 -15
- package/components/actions/actions-rtl.css +1 -1
- package/components/actions/actions-vars.less +4 -7
- package/components/actions/actions.css +1 -1
- package/components/actions/actions.js +2 -8
- package/components/actions/actions.less +0 -3
- package/components/app/app-class.d.ts +2 -0
- package/components/app/app-class.js +19 -15
- package/components/app/app-vars.less +41 -6
- package/components/app/app.less +1 -1
- package/components/area-chart/area-chart-class.js +18 -31
- package/components/area-chart/area-chart-rtl.css +1 -1
- package/components/area-chart/area-chart.css +1 -1
- package/components/autocomplete/autocomplete-class.js +13 -14
- package/components/autocomplete/autocomplete-ios.less +16 -0
- package/components/autocomplete/autocomplete-rtl.css +1 -1
- package/components/autocomplete/autocomplete.css +1 -1
- package/components/autocomplete/autocomplete.d.ts +3 -3
- package/components/autocomplete/autocomplete.js +3 -3
- package/components/autocomplete/autocomplete.less +7 -1
- package/components/block/block-vars.less +6 -6
- package/components/breadcrumbs/breadcrumbs-rtl.css +1 -1
- package/components/breadcrumbs/breadcrumbs.css +1 -1
- package/components/button/button-vars.less +13 -12
- package/components/button/button.less +2 -1
- package/components/calendar/calendar-class.js +20 -17
- package/components/calendar/calendar-ios.less +43 -0
- package/components/calendar/calendar-md.less +3 -0
- package/components/calendar/calendar-rtl.css +1 -1
- package/components/calendar/calendar-vars.less +24 -19
- package/components/calendar/calendar.css +1 -1
- package/components/calendar/calendar.d.ts +1 -1
- package/components/calendar/calendar.js +5 -8
- package/components/calendar/calendar.less +4 -2
- package/components/card/card-rtl.css +1 -1
- package/components/card/card-vars.less +5 -5
- package/components/card/card.css +1 -1
- package/components/card/card.js +3 -18
- package/components/card/card.less +1 -1
- package/components/checkbox/checkbox-rtl.css +1 -1
- package/components/checkbox/checkbox.css +1 -1
- package/components/chip/chip-rtl.css +1 -1
- package/components/chip/chip.css +1 -1
- package/components/color-picker/color-picker-class.js +11 -23
- package/components/color-picker/color-picker-ios.less +9 -0
- package/components/color-picker/color-picker-md.less +15 -0
- package/components/color-picker/color-picker-rtl.css +1 -1
- package/components/color-picker/color-picker-vars.less +9 -3
- package/components/color-picker/color-picker.css +1 -1
- package/components/color-picker/color-picker.d.ts +1 -2
- package/components/color-picker/color-picker.js +3 -7
- package/components/color-picker/color-picker.less +5 -25
- package/components/color-picker/modules/alpha-slider.js +2 -0
- package/components/color-picker/modules/brightness-slider.js +2 -0
- package/components/color-picker/modules/hs-spectrum.js +1 -2
- package/components/color-picker/modules/hsb-sliders.js +6 -0
- package/components/color-picker/modules/hue-slider.js +2 -0
- package/components/color-picker/modules/rgb-bars.js +6 -0
- package/components/color-picker/modules/rgb-sliders.js +6 -0
- package/components/color-picker/modules/sb-spectrum.js +1 -2
- package/components/color-picker/modules/wheel.js +1 -2
- package/components/contacts-list/contacts-list-rtl.css +1 -1
- package/components/contacts-list/contacts-list.css +1 -1
- package/components/data-table/data-table-class.js +1 -4
- package/components/data-table/data-table-ios.less +1 -1
- package/components/data-table/data-table-md.less +4 -2
- package/components/data-table/data-table-rtl.css +1 -1
- package/components/data-table/data-table.css +1 -1
- package/components/data-table/data-table.less +4 -4
- package/components/dialog/dialog-class.js +6 -3
- package/components/dialog/dialog-ios.less +10 -34
- package/components/dialog/dialog-md.less +2 -22
- package/components/dialog/dialog-rtl.css +1 -1
- package/components/dialog/dialog-vars.less +8 -10
- package/components/dialog/dialog.css +1 -1
- package/components/dialog/dialog.js +9 -27
- package/components/dialog/dialog.less +6 -25
- package/components/fab/fab-ios.less +2 -0
- package/components/fab/fab-rtl.css +1 -1
- package/components/fab/fab-vars.less +30 -6
- package/components/fab/fab.css +1 -1
- package/components/fab/fab.js +3 -12
- package/components/gauge/gauge-class.js +2 -8
- package/components/gauge/gauge-rtl.css +1 -1
- package/components/gauge/gauge.css +1 -1
- package/components/icon/icon-ios.less +10 -0
- package/components/icon/icon-md.less +9 -0
- package/components/icon/icon.less +2 -1
- package/components/infinite-scroll/infinite-scroll-rtl.css +1 -1
- package/components/infinite-scroll/infinite-scroll.css +1 -1
- package/components/input/input-ios.less +3 -2
- package/components/input/input-rtl.css +1 -1
- package/components/input/input.css +1 -1
- package/components/input/input.js +2 -5
- package/components/list/list-vars.less +7 -5
- package/components/list/list.less +1 -1
- package/components/list-index/list-index-class.js +3 -7
- package/components/list-index/list-index-rtl.css +1 -1
- package/components/list-index/list-index.css +1 -1
- package/components/login-screen/login-screen-rtl.css +1 -1
- package/components/login-screen/login-screen.css +1 -1
- package/components/login-screen/login-screen.js +2 -8
- package/components/login-screen/login-screen.less +1 -0
- package/components/messagebar/messagebar-class.js +5 -20
- package/components/messagebar/messagebar-ios.less +19 -14
- package/components/messagebar/messagebar-md.less +3 -0
- package/components/messagebar/messagebar-rtl.css +1 -1
- package/components/messagebar/messagebar-vars.less +12 -15
- package/components/messagebar/messagebar.css +1 -1
- package/components/messagebar/messagebar.less +4 -5
- package/components/messages/messages-class.js +25 -52
- package/components/messages/messages-ios.less +6 -2
- package/components/messages/messages-rtl.css +1 -1
- package/components/messages/messages-vars.less +1 -1
- package/components/messages/messages.css +1 -1
- package/components/navbar/navbar-ios.less +52 -672
- package/components/navbar/navbar-md.less +41 -1
- package/components/navbar/navbar-vars.less +4 -3
- package/components/navbar/navbar.js +28 -185
- package/components/navbar/navbar.less +8 -66
- package/components/notification/notification-class.js +6 -6
- package/components/notification/notification-ios.less +3 -8
- package/components/notification/notification-md.less +1 -20
- package/components/notification/notification-rtl.css +1 -1
- package/components/notification/notification-vars.less +13 -16
- package/components/notification/notification.css +1 -1
- package/components/notification/notification.less +8 -1
- package/components/page/page-ios.less +1 -8
- package/components/page/page-md.less +12 -11
- package/components/page/page.less +14 -12
- package/components/panel/panel-class.js +7 -28
- package/components/panel/panel-ios.less +4 -0
- package/components/panel/panel-rtl.css +1 -3
- package/components/panel/panel-vars.less +8 -5
- package/components/panel/panel.css +1 -3
- package/components/panel/panel.js +8 -32
- package/components/panel/panel.less +9 -9
- package/components/panel/resizable-panel.js +2 -4
- package/components/photo-browser/photo-browser-class.js +12 -47
- package/components/photo-browser/photo-browser-rtl.css +1 -1
- package/components/photo-browser/photo-browser-vars.less +8 -10
- package/components/photo-browser/photo-browser.css +1 -1
- package/components/photo-browser/photo-browser.d.ts +2 -4
- package/components/photo-browser/photo-browser.js +1 -3
- package/components/photo-browser/photo-browser.less +15 -71
- package/components/picker/picker-class.js +4 -5
- package/components/picker/picker-ios.less +6 -1
- package/components/picker/picker-md.less +9 -0
- package/components/picker/picker-rtl.css +1 -1
- package/components/picker/picker-vars.less +1 -1
- package/components/picker/picker.css +1 -1
- package/components/picker/picker.d.ts +1 -1
- package/components/picker/picker.js +2 -5
- package/components/picker/picker.less +0 -4
- package/components/pie-chart/pie-chart-class.js +7 -14
- package/components/pie-chart/pie-chart-rtl.css +1 -1
- package/components/pie-chart/pie-chart.css +1 -1
- package/components/popover/popover-class.js +22 -62
- package/components/popover/popover-ios.less +66 -2
- package/components/popover/popover-md.less +2 -27
- package/components/popover/popover-rtl.css +1 -1
- package/components/popover/popover-vars.less +2 -3
- package/components/popover/popover.css +1 -1
- package/components/popover/popover.d.ts +0 -2
- package/components/popover/popover.js +2 -9
- package/components/popover/popover.less +28 -50
- package/components/popup/popup-class.js +15 -9
- package/components/popup/popup-rtl.css +1 -1
- package/components/popup/popup-vars.less +2 -2
- package/components/popup/popup.css +1 -1
- package/components/popup/popup.js +2 -8
- package/components/popup/popup.less +6 -6
- package/components/preloader/preloader-rtl.css +1 -1
- package/components/preloader/preloader.css +1 -1
- package/components/preloader/preloader.js +2 -8
- package/components/progressbar/progressbar-md.less +12 -0
- package/components/progressbar/progressbar-rtl.css +1 -1
- package/components/progressbar/progressbar-vars.less +6 -5
- package/components/progressbar/progressbar.css +1 -1
- package/components/progressbar/progressbar.js +3 -12
- package/components/progressbar/progressbar.less +6 -0
- package/components/pull-to-refresh/pull-to-refresh-class.js +5 -12
- package/components/pull-to-refresh/pull-to-refresh-rtl.css +1 -1
- package/components/pull-to-refresh/pull-to-refresh.css +1 -1
- package/components/radio/radio-rtl.css +1 -1
- package/components/radio/radio.css +1 -1
- package/components/range/range-class.js +34 -27
- package/components/range/range-ios.less +60 -0
- package/components/range/range-md.less +67 -4
- package/components/range/range-rtl.css +1 -1
- package/components/range/range-vars.less +18 -13
- package/components/range/range.css +1 -1
- package/components/range/range.d.ts +3 -1
- package/components/range/range.js +2 -8
- package/components/range/range.less +11 -24
- package/components/searchbar/searchbar-class.js +7 -8
- package/components/searchbar/searchbar-ios.less +37 -13
- package/components/searchbar/searchbar-md.less +5 -0
- package/components/searchbar/searchbar-rtl.css +1 -1
- package/components/searchbar/searchbar-vars.less +13 -16
- package/components/searchbar/searchbar.css +1 -1
- package/components/searchbar/searchbar.js +4 -32
- package/components/searchbar/searchbar.less +4 -5
- package/components/sheet/sheet-class.js +21 -17
- package/components/sheet/sheet-ios.less +10 -0
- package/components/sheet/sheet-md.less +14 -0
- package/components/sheet/sheet-rtl.css +1 -1
- package/components/sheet/sheet-vars.less +5 -9
- package/components/sheet/sheet.css +1 -1
- package/components/sheet/sheet.js +2 -8
- package/components/sheet/sheet.less +5 -17
- package/components/skeleton/skeleton-rtl.css +1 -1
- package/components/skeleton/skeleton.css +1 -1
- package/components/smart-select/smart-select-class.js +15 -20
- package/components/smart-select/smart-select-rtl.css +1 -1
- package/components/smart-select/smart-select.css +1 -1
- package/components/smart-select/smart-select.d.ts +5 -7
- package/components/smart-select/smart-select.js +4 -4
- package/components/sortable/sortable-rtl.css +1 -1
- package/components/sortable/sortable.css +1 -1
- package/components/sortable/sortable.js +8 -27
- package/components/statusbar/statusbar.js +2 -5
- package/components/stepper/stepper-rtl.css +1 -1
- package/components/stepper/stepper-vars.less +3 -3
- package/components/stepper/stepper.css +1 -1
- package/components/stepper/stepper.js +2 -8
- package/components/subnavbar/subnavbar-ios.less +16 -1
- package/components/subnavbar/subnavbar-md.less +5 -5
- package/components/subnavbar/subnavbar-vars.less +12 -6
- package/components/subnavbar/subnavbar.less +5 -6
- package/components/swipeout/swipeout-ios.less +37 -0
- package/components/swipeout/swipeout-md.less +56 -0
- package/components/swipeout/swipeout-rtl.css +1 -1
- package/components/swipeout/swipeout-vars.less +13 -2
- package/components/swipeout/swipeout.css +1 -1
- package/components/swipeout/swipeout.js +102 -35
- package/components/swipeout/swipeout.less +20 -44
- package/components/swiper/swiper-rtl.css +1 -1
- package/components/swiper/swiper.css +1 -1
- package/components/tabs/tabs-rtl.css +1 -1
- package/components/tabs/tabs.css +1 -1
- package/components/tabs/tabs.js +3 -9
- package/components/text-editor/text-editor-class.js +1 -1
- package/components/text-editor/text-editor-rtl.css +1 -1
- package/components/text-editor/text-editor.css +1 -1
- package/components/timeline/timeline-ios.less +0 -5
- package/components/timeline/timeline-md.less +0 -5
- package/components/timeline/timeline-rtl.css +1 -1
- package/components/timeline/timeline-vars.less +1 -17
- package/components/timeline/timeline.css +1 -1
- package/components/timeline/timeline.less +0 -196
- package/components/toast/toast-class.js +2 -2
- package/components/toast/toast-ios.less +2 -0
- package/components/toast/toast-rtl.css +1 -1
- package/components/toast/toast-vars.less +2 -4
- package/components/toast/toast.css +1 -1
- package/components/toast/toast.less +1 -1
- package/components/toggle/toggle-class.js +5 -12
- package/components/toggle/toggle-ios.less +68 -50
- package/components/toggle/toggle-rtl.css +1 -1
- package/components/toggle/toggle-vars.less +2 -2
- package/components/toggle/toggle.css +1 -1
- package/components/toolbar/tabbar-highlight.js +134 -0
- package/components/toolbar/toolbar-ios.less +160 -14
- package/components/toolbar/toolbar-md.less +77 -3
- package/components/toolbar/toolbar-vars.less +14 -10
- package/components/toolbar/toolbar.js +32 -13
- package/components/toolbar/toolbar.less +8 -56
- package/components/tooltip/tooltip-class.js +13 -16
- package/components/tooltip/tooltip-rtl.css +1 -1
- package/components/tooltip/tooltip.css +1 -1
- package/components/tooltip/tooltip.js +0 -16
- package/components/touch-highlight/touch-highlight-ios.less +17 -0
- package/components/touch-highlight/touch-highlight-md.less +2 -0
- package/components/touch-highlight/touch-highlight-vars.less +8 -0
- package/components/touch-highlight/touch-highlight.d.ts +25 -0
- package/components/touch-highlight/touch-highlight.js +123 -0
- package/components/touch-highlight/touch-highlight.less +9 -0
- package/components/touch-ripple/touch-ripple.js +1 -4
- package/components/treeview/treeview-rtl.css +1 -1
- package/components/treeview/treeview.css +1 -1
- package/components/typography/typography-rtl.css +1 -1
- package/components/typography/typography.css +1 -1
- package/components/view/resizable-view.js +2 -4
- package/components/view/view-class.js +1 -15
- package/components/view/view.d.ts +0 -4
- package/components/view/view.js +1 -5
- package/components/virtual-list/virtual-list-class.js +2 -8
- package/framework7-bundle-rtl.css +2284 -3019
- package/framework7-bundle-rtl.min.css +4 -10
- package/framework7-bundle.css +2245 -2978
- package/framework7-bundle.esm.js +5 -4
- package/framework7-bundle.js +7180 -6477
- package/framework7-bundle.js.map +1 -1
- package/framework7-bundle.less +4 -3
- package/framework7-bundle.min.css +4 -10
- 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 +5 -4
- package/framework7-rtl.css +509 -844
- package/framework7-rtl.min.css +4 -8
- package/framework7-types.d.ts +5 -1
- package/framework7.css +509 -843
- package/framework7.d.ts +4 -0
- package/framework7.esm.js +5 -4
- package/framework7.less +4 -3
- package/framework7.min.css +4 -8
- package/less/mixins.less +10 -12
- package/modules/component/$h.js +1 -4
- package/modules/component/$jsx.js +1 -4
- package/modules/component/component-class.js +49 -114
- package/modules/component/component.js +6 -7
- package/modules/component/eventslisteners.js +1 -4
- package/modules/component/snabbdom/modules/hero.js +0 -1
- package/modules/component/snabbdom/modules/style.js +1 -1
- package/modules/component/vdom.js +17 -29
- package/modules/router/back.js +22 -96
- package/modules/router/clear-previous-history.js +1 -7
- package/modules/router/component-loader.js +23 -32
- package/modules/router/modal.js +1 -4
- package/modules/router/navigate.js +28 -167
- package/modules/router/redirect.js +1 -5
- package/modules/router/router-class.js +28 -293
- package/modules/router/router.d.ts +2 -0
- package/modules/router/swipe-back.js +10 -318
- package/modules/router/tab.js +1 -4
- package/modules/service-worker/service-worker.js +1 -1
- package/modules/store/create-store.js +2 -8
- package/modules/touch/touch.d.ts +5 -3
- package/modules/touch/touch.js +23 -37
- package/package.json +4 -4
- package/shared/$jsx.js +1 -4
- package/shared/class.js +5 -26
- package/shared/constructor-methods.js +4 -19
- package/shared/events-class.js +3 -12
- package/shared/get-device.js +4 -11
- package/shared/get-support.d.ts +0 -6
- package/shared/get-support.js +1 -20
- package/shared/material-color-utils.js +2102 -693
- package/shared/material-colors.js +94 -23
- package/shared/modal-methods.js +2 -8
- package/shared/utils.js +23 -45
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-notification-max-width:568px;--f7-notification-subtitle-text-transform:none;--f7-notification-subtitle-line-height:1.35;--f7-notification-text-text-transform:none;--f7-notification-text-font-weight:400}.ios{--f7-notification-margin:8px;--f7-notification-padding-horizontal:
|
|
1
|
+
:root{--f7-notification-max-width:568px;--f7-notification-subtitle-text-transform:none;--f7-notification-subtitle-line-height:1.35;--f7-notification-text-text-transform:none;--f7-notification-text-font-weight:400}.ios{--f7-notification-margin:8px;--f7-notification-padding-horizontal:16px;--f7-notification-padding-vertical:16px;--f7-notification-border-radius:24px;--f7-notification-box-shadow:var(--f7-glass-shadow);--f7-notification-icon-size:28px;--f7-notification-title-font-size:14px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:bold;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:14px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.4;--f7-notification-bg-color:var(--f7-glass-bg-color);--f7-notification-title-color:#000;--f7-notification-title-right-color:#00000073;--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.ios .dark,.ios.dark{--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-subtitle-color:#fff;--f7-notification-title-right-color:#ffffff8c}.md{--f7-notification-margin:16px;--f7-notification-padding-vertical:20px;--f7-notification-padding-horizontal:16px;--f7-notification-border-radius:16px;--f7-notification-box-shadow:none;--f7-notification-icon-size:24px;--f7-notification-title-font-size:16px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.35;--f7-notification-title-font-weight:500;--f7-notification-title-right-font-size:12px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:400;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35}.md,.md .dark,.md [class*=color-]{--f7-notification-title-color:var(--f7-md-on-surface);--f7-notification-bg-color:var(--f7-md-surface-5);--f7-notification-text-color:var(--f7-md-on-surface-variant);--f7-notification-title-right-color:var(--f7-md-on-surface-variant);--f7-notification-subtitle-color:var(--f7-md-on-surface)}.notification{backdrop-filter:saturate(180%) blur(16px);background:var(--f7-notification-bg-color);border:none;border-radius:var(--f7-notification-border-radius);box-shadow:var(--f7-notification-box-shadow);box-sizing:border-box;direction:ltr;display:none;display:flex;font-size:14px;gap:16px;left:var(--f7-notification-margin);margin:0;margin-top:var(--f7-safe-area-top);max-width:var(--f7-notification-max-width);padding:var(--f7-notification-padding-vertical) var(--f7-notification-padding-horizontal);position:absolute;top:var(--f7-notification-margin);transition-property:transform;width:calc(100% - var(--f7-notification-margin)*2);z-index:20000}@media (min-width:568px){.notification{left:50%;margin-left:calc(var(--f7-notification-max-width)*-1/2);width:var(--f7-notification-max-width)}}.notification-content{flex-shrink:10;width:100%}.notification-title{color:var(--f7-notification-title-color,var(--f7-theme-color));font-size:var(--f7-notification-title-font-size);font-weight:var(--f7-notification-title-font-weight);letter-spacing:var(--f7-notification-title-letter-spacing);line-height:var(--f7-notification-title-line-height);text-transform:var(--f7-notification-title-text-transform)}.notification-subtitle{color:var(--f7-notification-subtitle-color);font-size:var(--f7-notification-subtitle-font-size);font-weight:var(--f7-notification-subtitle-font-weight);line-height:var(--f7-notification-subtitle-line-height);text-transform:var(--f7-notification-subtitle-text-transform)}.notification-text{color:var(--f7-notification-text-color);font-size:var(--f7-notification-text-font-size);font-weight:var(--f7-notification-text-font-weight);line-height:var(--f7-notification-text-line-height);text-transform:var(--f7-notification-text-text-transform)}.notification-title-right-text{color:var(--f7-notification-title-right-color);font-size:var(--f7-notification-title-right-font-size)}.notification-icon{flex-shrink:0;font-size:0;line-height:var(--f7-notification-icon-size)}.notification-icon,.notification-icon i{height:var(--f7-notification-icon-size)!important;width:var(--f7-notification-icon-size)!important}.notification-icon i{font-size:var(--f7-notification-icon-size)}.notification-icon img{height:var(--f7-notification-icon-size)}.notification-header{align-items:center;display:flex;justify-content:flex-start}.notification-close-button{cursor:pointer;margin-left:auto;position:relative}.notification-close-button:after{font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;display:block;font-feature-settings:"liga";font-size:20px;height:100%;left:50%;position:absolute;text-align:center;top:50%;width:100%}.ios .notification{align-items:center;transform:translate3d(0,-200%,0);transition-duration:.45s}.ios .notification.modal-in{opacity:1;transform:translateZ(0)}.ios .notification.modal-out{transform:translate3d(0,-200%,0)}.ios .notification-title-right-text{margin-left:auto}.ios .notification-title-right-text+.notification-close-button{margin-left:12px}.ios .notification-close-button{font-size:14px;height:20px;opacity:.3;transition-duration:.3s;width:20px}.ios .notification-close-button.active-state{opacity:.1;transition-duration:0s}.ios .notification-close-button:after{color:#000;content:"notification_close_ios";font-size:.65em;height:44px;line-height:44px;margin-left:-22px;margin-top:-22px;width:44px}.ios .dark .notification-close-button:after,.ios.dark .notification-close-button:after{color:#fff}.md .notification{transform:translate3d(0,-150%,0)}.md .notification.modal-in{transform:translateZ(0);transition-duration:.5s;transition-timing-function:cubic-bezier(0,.8,.34,1)}.md .notification.modal-in.notification-transitioning{transition-duration:.2s}.md .notification.modal-out{animation:none;transform:translate3d(0,-150%,0);transition-duration:.2s;transition-timing-function:ease-in}.md .notification-header+:is(.notification-subtitle,.notification-text){margin-top:8px}.md .notification-title-right-text{margin-left:4px}.md .notification-title-right-text:before{background:var(--f7-notification-title-right-color);border-radius:50%;content:"";display:inline-block;height:3px;margin-right:4px;vertical-align:middle;width:3px}.md .notification-close-button{height:16px;transition-duration:.3s;width:16px}.md .notification-close-button:after,.md .notification-close-button:before{height:48px;left:50%;margin-left:-24px;margin-top:-24px;top:50%;width:48px}.md .notification-close-button:after{color:var(--f7-md-on-surface-variant);content:"delete_round_md";font-size:24px;line-height:48px}@keyframes notification-md-in{0%{transform:translate3d(0,-150%,0)}50%{transform:translate3d(0,10%,0)}to{transform:translateZ(0)}}
|
|
@@ -7,36 +7,33 @@
|
|
|
7
7
|
}
|
|
8
8
|
.ios-vars({
|
|
9
9
|
--f7-notification-margin: 8px;
|
|
10
|
-
--f7-notification-padding-horizontal:
|
|
11
|
-
--f7-notification-padding-vertical:
|
|
12
|
-
--f7-notification-border-radius:
|
|
13
|
-
--f7-notification-box-shadow:
|
|
14
|
-
--f7-notification-icon-size:
|
|
10
|
+
--f7-notification-padding-horizontal: 16px;
|
|
11
|
+
--f7-notification-padding-vertical: 16px;
|
|
12
|
+
--f7-notification-border-radius: 24px;
|
|
13
|
+
--f7-notification-box-shadow: var(--f7-glass-shadow);
|
|
14
|
+
--f7-notification-icon-size: 28px;
|
|
15
15
|
|
|
16
|
-
--f7-notification-title-font-size:
|
|
17
|
-
--f7-notification-title-text-transform:
|
|
16
|
+
--f7-notification-title-font-size: 14px;
|
|
17
|
+
--f7-notification-title-text-transform: none;
|
|
18
18
|
--f7-notification-title-line-height: 1.4;
|
|
19
|
-
--f7-notification-title-font-weight:
|
|
19
|
+
--f7-notification-title-font-weight: bold;
|
|
20
20
|
--f7-notification-title-letter-spacing: 0.02em;
|
|
21
21
|
|
|
22
|
-
--f7-notification-title-right-font-size:
|
|
22
|
+
--f7-notification-title-right-font-size: 14px;
|
|
23
23
|
|
|
24
|
-
--f7-notification-subtitle-font-size:
|
|
24
|
+
--f7-notification-subtitle-font-size: 14px;
|
|
25
25
|
--f7-notification-subtitle-font-weight: 600;
|
|
26
26
|
|
|
27
|
-
--f7-notification-text-font-size:
|
|
28
|
-
--f7-notification-text-line-height: 1.
|
|
27
|
+
--f7-notification-text-font-size: 14px;
|
|
28
|
+
--f7-notification-text-line-height: 1.4;
|
|
29
|
+
--f7-notification-bg-color: var(--f7-glass-bg-color);
|
|
29
30
|
.light-vars({
|
|
30
|
-
--f7-notification-bg-color: rgba(250,250,250,0.95);
|
|
31
|
-
--f7-notification-bg-color-rgb: 255, 255, 255;
|
|
32
31
|
--f7-notification-title-color: #000;
|
|
33
32
|
--f7-notification-title-right-color: rgba(0,0,0,0.45);
|
|
34
33
|
--f7-notification-subtitle-color: #000;
|
|
35
34
|
--f7-notification-text-color: #000;
|
|
36
35
|
});
|
|
37
36
|
.dark-vars({
|
|
38
|
-
--f7-notification-bg-color: rgba(30,30,30,0.95);
|
|
39
|
-
--f7-notification-bg-color-rgb: 30, 30, 30;
|
|
40
37
|
--f7-notification-title-color: #fff;
|
|
41
38
|
--f7-notification-text-color: #fff;
|
|
42
39
|
--f7-notification-subtitle-color: #fff;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-notification-max-width:568px;--f7-notification-subtitle-text-transform:none;--f7-notification-subtitle-line-height:1.35;--f7-notification-text-text-transform:none;--f7-notification-text-font-weight:400}.ios{--f7-notification-margin:8px;--f7-notification-padding-horizontal:
|
|
1
|
+
:root{--f7-notification-max-width:568px;--f7-notification-subtitle-text-transform:none;--f7-notification-subtitle-line-height:1.35;--f7-notification-text-text-transform:none;--f7-notification-text-font-weight:400}.ios{--f7-notification-margin:8px;--f7-notification-padding-horizontal:16px;--f7-notification-padding-vertical:16px;--f7-notification-border-radius:24px;--f7-notification-box-shadow:var(--f7-glass-shadow);--f7-notification-icon-size:28px;--f7-notification-title-font-size:14px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:bold;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:14px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.4;--f7-notification-bg-color:var(--f7-glass-bg-color);--f7-notification-title-color:#000;--f7-notification-title-right-color:#00000073;--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.ios .dark,.ios.dark{--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-subtitle-color:#fff;--f7-notification-title-right-color:#ffffff8c}.md{--f7-notification-margin:16px;--f7-notification-padding-vertical:20px;--f7-notification-padding-horizontal:16px;--f7-notification-border-radius:16px;--f7-notification-box-shadow:none;--f7-notification-icon-size:24px;--f7-notification-title-font-size:16px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.35;--f7-notification-title-font-weight:500;--f7-notification-title-right-font-size:12px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:400;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35}.md,.md .dark,.md [class*=color-]{--f7-notification-title-color:var(--f7-md-on-surface);--f7-notification-bg-color:var(--f7-md-surface-5);--f7-notification-text-color:var(--f7-md-on-surface-variant);--f7-notification-title-right-color:var(--f7-md-on-surface-variant);--f7-notification-subtitle-color:var(--f7-md-on-surface)}.notification{backdrop-filter:saturate(180%) blur(16px);background:var(--f7-notification-bg-color);border:none;border-radius:var(--f7-notification-border-radius);box-shadow:var(--f7-notification-box-shadow);box-sizing:border-box;direction:ltr;display:none;display:flex;font-size:14px;gap:16px;left:var(--f7-notification-margin);margin:0;margin-top:var(--f7-safe-area-top);max-width:var(--f7-notification-max-width);padding:var(--f7-notification-padding-vertical) var(--f7-notification-padding-horizontal);position:absolute;top:var(--f7-notification-margin);transition-property:transform;width:calc(100% - var(--f7-notification-margin)*2);z-index:20000}@media (min-width:568px){.notification{left:50%;margin-left:calc(var(--f7-notification-max-width)*-1/2);width:var(--f7-notification-max-width)}}.notification-content{flex-shrink:10;width:100%}.notification-title{color:var(--f7-notification-title-color,var(--f7-theme-color));font-size:var(--f7-notification-title-font-size);font-weight:var(--f7-notification-title-font-weight);letter-spacing:var(--f7-notification-title-letter-spacing);line-height:var(--f7-notification-title-line-height);text-transform:var(--f7-notification-title-text-transform)}.notification-subtitle{color:var(--f7-notification-subtitle-color);font-size:var(--f7-notification-subtitle-font-size);font-weight:var(--f7-notification-subtitle-font-weight);line-height:var(--f7-notification-subtitle-line-height);text-transform:var(--f7-notification-subtitle-text-transform)}.notification-text{color:var(--f7-notification-text-color);font-size:var(--f7-notification-text-font-size);font-weight:var(--f7-notification-text-font-weight);line-height:var(--f7-notification-text-line-height);text-transform:var(--f7-notification-text-text-transform)}.notification-title-right-text{color:var(--f7-notification-title-right-color);font-size:var(--f7-notification-title-right-font-size)}.notification-icon{flex-shrink:0;font-size:0;line-height:var(--f7-notification-icon-size)}.notification-icon,.notification-icon i{height:var(--f7-notification-icon-size)!important;width:var(--f7-notification-icon-size)!important}.notification-icon i{font-size:var(--f7-notification-icon-size)}.notification-icon img{height:var(--f7-notification-icon-size)}.notification-header{align-items:center;display:flex;justify-content:flex-start}.notification-close-button{cursor:pointer;margin-left:auto;position:relative}.notification-close-button:after{font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;display:block;font-feature-settings:"liga";font-size:20px;height:100%;left:50%;position:absolute;text-align:center;top:50%;width:100%}.ios .notification{align-items:center;transform:translate3d(0,-200%,0);transition-duration:.45s}.ios .notification.modal-in{opacity:1;transform:translateZ(0)}.ios .notification.modal-out{transform:translate3d(0,-200%,0)}.ios .notification-title-right-text{margin-left:auto}.ios .notification-title-right-text+.notification-close-button{margin-left:12px}.ios .notification-close-button{font-size:14px;height:20px;opacity:.3;transition-duration:.3s;width:20px}.ios .notification-close-button.active-state{opacity:.1;transition-duration:0s}.ios .notification-close-button:after{color:#000;content:"notification_close_ios";font-size:.65em;height:44px;line-height:44px;margin-left:-22px;margin-top:-22px;width:44px}.ios .dark .notification-close-button:after,.ios.dark .notification-close-button:after{color:#fff}.md .notification{transform:translate3d(0,-150%,0)}.md .notification.modal-in{transform:translateZ(0);transition-duration:.5s;transition-timing-function:cubic-bezier(0,.8,.34,1)}.md .notification.modal-in.notification-transitioning{transition-duration:.2s}.md .notification.modal-out{animation:none;transform:translate3d(0,-150%,0);transition-duration:.2s;transition-timing-function:ease-in}.md .notification-header+:is(.notification-subtitle,.notification-text){margin-top:8px}.md .notification-title-right-text{margin-left:4px}.md .notification-title-right-text:before{background:var(--f7-notification-title-right-color);border-radius:50%;content:"";display:inline-block;height:3px;margin-right:4px;vertical-align:middle;width:3px}.md .notification-close-button{height:16px;transition-duration:.3s;width:16px}.md .notification-close-button:after,.md .notification-close-button:before{height:48px;left:50%;margin-left:-24px;margin-top:-24px;top:50%;width:48px}.md .notification-close-button:after{color:var(--f7-md-on-surface-variant);content:"delete_round_md";font-size:24px;line-height:48px}@keyframes notification-md-in{0%{transform:translate3d(0,-150%,0)}50%{transform:translate3d(0,10%,0)}to{transform:translateZ(0)}}
|
|
@@ -20,13 +20,19 @@
|
|
|
20
20
|
box-shadow: var(--f7-notification-box-shadow);
|
|
21
21
|
background: var(--f7-notification-bg-color);
|
|
22
22
|
margin-top: var(--f7-safe-area-top);
|
|
23
|
-
|
|
23
|
+
display: flex;
|
|
24
|
+
gap: 16px;
|
|
25
|
+
.ios-glass-backdrop();
|
|
24
26
|
@media (min-width: 568px) {
|
|
25
27
|
left: 50%;
|
|
26
28
|
width: var(--f7-notification-max-width);
|
|
27
29
|
margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
|
|
28
30
|
}
|
|
29
31
|
}
|
|
32
|
+
.notification-content {
|
|
33
|
+
width: 100%;
|
|
34
|
+
flex-shrink: 10;
|
|
35
|
+
}
|
|
30
36
|
.notification-title {
|
|
31
37
|
color: var(--f7-notification-title-color, var(--f7-theme-color));
|
|
32
38
|
font-size: var(--f7-notification-title-font-size);
|
|
@@ -56,6 +62,7 @@
|
|
|
56
62
|
.notification-icon {
|
|
57
63
|
font-size: 0;
|
|
58
64
|
line-height: var(--f7-notification-icon-size);
|
|
65
|
+
flex-shrink: 0;
|
|
59
66
|
i,
|
|
60
67
|
& {
|
|
61
68
|
width: var(--f7-notification-icon-size) !important;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
.md {
|
|
2
2
|
.page-previous {
|
|
3
|
-
transform: translate3d(
|
|
3
|
+
transform: translate3d(-24px, 0px, 0);
|
|
4
4
|
}
|
|
5
5
|
.page-next {
|
|
6
6
|
pointer-events: none;
|
|
7
|
-
transform: translate3d(
|
|
7
|
+
transform: translate3d(128px, 0px, 0);
|
|
8
8
|
opacity: 0;
|
|
9
9
|
&.page-next-on-right {
|
|
10
10
|
.ltr({
|
|
@@ -32,21 +32,22 @@
|
|
|
32
32
|
.router-transition-backward {
|
|
33
33
|
.page-current {
|
|
34
34
|
animation:
|
|
35
|
-
md-page-current-to-next calc(var(--f7-page-transition-duration) /
|
|
36
|
-
cubic-bezier(0
|
|
37
|
-
md-page-current-to-next-opacity
|
|
35
|
+
md-page-current-to-next calc(var(--f7-page-transition-duration) / 2) forwards
|
|
36
|
+
cubic-bezier(0, 1, 0.8, 1),
|
|
37
|
+
md-page-current-to-next-opacity calc(var(--f7-page-transition-duration) / 2) forwards;
|
|
38
38
|
}
|
|
39
39
|
.page-previous {
|
|
40
|
-
animation: md-page-previous-to-current var(--f7-page-transition-duration) forwards
|
|
40
|
+
animation: md-page-previous-to-current calc(var(--f7-page-transition-duration) / 2) forwards
|
|
41
|
+
cubic-bezier(0, 1, 0.8, 1);
|
|
41
42
|
}
|
|
42
43
|
}
|
|
43
44
|
}
|
|
44
45
|
@keyframes md-page-next-to-current {
|
|
45
46
|
from {
|
|
46
|
-
transform: translate3d(
|
|
47
|
+
transform: translate3d(128px, 0px, 0);
|
|
47
48
|
}
|
|
48
49
|
to {
|
|
49
|
-
transform: translate3d(
|
|
50
|
+
transform: translate3d(0px, 0px, 0);
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
@keyframes md-page-current-to-next {
|
|
@@ -54,7 +55,7 @@
|
|
|
54
55
|
transform: translate3d(0, 0, 0);
|
|
55
56
|
}
|
|
56
57
|
to {
|
|
57
|
-
transform: translate3d(
|
|
58
|
+
transform: translate3d(128px, 0px, 0);
|
|
58
59
|
}
|
|
59
60
|
}
|
|
60
61
|
@keyframes md-page-current-to-next-opacity {
|
|
@@ -70,12 +71,12 @@
|
|
|
70
71
|
transform: translate3d(0, 0, 0);
|
|
71
72
|
}
|
|
72
73
|
to {
|
|
73
|
-
transform: translate3d(
|
|
74
|
+
transform: translate3d(-24px, 0px, 0);
|
|
74
75
|
}
|
|
75
76
|
}
|
|
76
77
|
@keyframes md-page-previous-to-current {
|
|
77
78
|
from {
|
|
78
|
-
transform: translate3d(
|
|
79
|
+
transform: translate3d(-24px, 0px, 0);
|
|
79
80
|
}
|
|
80
81
|
to {
|
|
81
82
|
transform: translate3d(0, 0px, 0);
|
|
@@ -17,6 +17,9 @@
|
|
|
17
17
|
background-color: var(--f7-page-bg-color);
|
|
18
18
|
z-index: 1;
|
|
19
19
|
}
|
|
20
|
+
.page-transparent {
|
|
21
|
+
background-color: transparent;
|
|
22
|
+
}
|
|
20
23
|
.page-with-navbar-large-collapsed {
|
|
21
24
|
--f7-navbar-large-collapse-progress: 1;
|
|
22
25
|
}
|
|
@@ -39,6 +42,14 @@
|
|
|
39
42
|
var(--f7-page-content-extra-padding-bottom, 0px)
|
|
40
43
|
);
|
|
41
44
|
}
|
|
45
|
+
.page-previous {
|
|
46
|
+
.page-opacity-effect {
|
|
47
|
+
opacity: 1;
|
|
48
|
+
}
|
|
49
|
+
&:after {
|
|
50
|
+
opacity: 1;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
42
53
|
.page-transitioning {
|
|
43
54
|
&,
|
|
44
55
|
.page-shadow-effect,
|
|
@@ -106,13 +117,9 @@
|
|
|
106
117
|
.page-master-stacked {
|
|
107
118
|
display: none;
|
|
108
119
|
}
|
|
109
|
-
.navbar-master-stacked {
|
|
110
|
-
display: none;
|
|
111
|
-
}
|
|
112
120
|
}
|
|
113
121
|
.view-master-detail {
|
|
114
|
-
.page-master
|
|
115
|
-
.navbar-master {
|
|
122
|
+
.page-master {
|
|
116
123
|
width: var(--f7-page-master-width);
|
|
117
124
|
.rtl({
|
|
118
125
|
left: auto;
|
|
@@ -129,8 +136,7 @@
|
|
|
129
136
|
border-left: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
|
|
130
137
|
});
|
|
131
138
|
}
|
|
132
|
-
.page-master-detail
|
|
133
|
-
.navbar-master-detail {
|
|
139
|
+
.page-master-detail {
|
|
134
140
|
width: calc(100% - var(--f7-page-master-width));
|
|
135
141
|
.ltr({
|
|
136
142
|
--f7-safe-area-left: 0px;
|
|
@@ -143,11 +149,7 @@
|
|
|
143
149
|
right: var(--f7-page-master-width);
|
|
144
150
|
});
|
|
145
151
|
}
|
|
146
|
-
|
|
147
|
-
left: 0;
|
|
148
|
-
right: 0;
|
|
149
|
-
width: 100%;
|
|
150
|
-
}
|
|
152
|
+
|
|
151
153
|
.page-master {
|
|
152
154
|
z-index: 2;
|
|
153
155
|
transform: none;
|
|
@@ -5,10 +5,7 @@ import Framework7Class from '../../shared/class.js';
|
|
|
5
5
|
import swipePanel from './swipe-panel.js';
|
|
6
6
|
import resizablePanel from './resizable-panel.js';
|
|
7
7
|
class Panel extends Framework7Class {
|
|
8
|
-
constructor(app, params) {
|
|
9
|
-
if (params === void 0) {
|
|
10
|
-
params = {};
|
|
11
|
-
}
|
|
8
|
+
constructor(app, params = {}) {
|
|
12
9
|
const extendedParams = extend({
|
|
13
10
|
on: {}
|
|
14
11
|
}, app.params.panel, params);
|
|
@@ -124,10 +121,7 @@ class Panel extends Framework7Class {
|
|
|
124
121
|
panel.setVisibleBreakpoint();
|
|
125
122
|
return panel;
|
|
126
123
|
}
|
|
127
|
-
setVisibleBreakpoint(emitEvents) {
|
|
128
|
-
if (emitEvents === void 0) {
|
|
129
|
-
emitEvents = true;
|
|
130
|
-
}
|
|
124
|
+
setVisibleBreakpoint(emitEvents = true) {
|
|
131
125
|
const panel = this;
|
|
132
126
|
const app = panel.app;
|
|
133
127
|
if (!panel.visibleBreakpointResizeHandler) {
|
|
@@ -199,10 +193,7 @@ class Panel extends Framework7Class {
|
|
|
199
193
|
panel.setCollapsedBreakpoint();
|
|
200
194
|
return panel;
|
|
201
195
|
}
|
|
202
|
-
setCollapsedBreakpoint(emitEvents) {
|
|
203
|
-
if (emitEvents === void 0) {
|
|
204
|
-
emitEvents = true;
|
|
205
|
-
}
|
|
196
|
+
setCollapsedBreakpoint(emitEvents = true) {
|
|
206
197
|
const panel = this;
|
|
207
198
|
const app = panel.app;
|
|
208
199
|
if (!panel.collapsedBreakpointResizeHandler) {
|
|
@@ -269,10 +260,7 @@ class Panel extends Framework7Class {
|
|
|
269
260
|
panel.swipeable = false;
|
|
270
261
|
return panel;
|
|
271
262
|
}
|
|
272
|
-
onOpen(modifyHtmlClasses) {
|
|
273
|
-
if (modifyHtmlClasses === void 0) {
|
|
274
|
-
modifyHtmlClasses = true;
|
|
275
|
-
}
|
|
263
|
+
onOpen(modifyHtmlClasses = true) {
|
|
276
264
|
const panel = this;
|
|
277
265
|
// eslint-disable-next-line
|
|
278
266
|
panel._openTransitionStarted = false;
|
|
@@ -321,10 +309,7 @@ class Panel extends Framework7Class {
|
|
|
321
309
|
panel.$el.trigger('panel:closed');
|
|
322
310
|
panel.emit('local::closed panelClosed', panel);
|
|
323
311
|
}
|
|
324
|
-
toggle(animate) {
|
|
325
|
-
if (animate === void 0) {
|
|
326
|
-
animate = true;
|
|
327
|
-
}
|
|
312
|
+
toggle(animate = true) {
|
|
328
313
|
const panel = this;
|
|
329
314
|
const breakpoint = panel.params.visibleBreakpoint;
|
|
330
315
|
const app = panel.app;
|
|
@@ -366,10 +351,7 @@ class Panel extends Framework7Class {
|
|
|
366
351
|
});
|
|
367
352
|
}
|
|
368
353
|
}
|
|
369
|
-
open(animate) {
|
|
370
|
-
if (animate === void 0) {
|
|
371
|
-
animate = true;
|
|
372
|
-
}
|
|
354
|
+
open(animate = true) {
|
|
373
355
|
const panel = this;
|
|
374
356
|
const app = panel.app;
|
|
375
357
|
if (!app.panel.allowOpen) return false;
|
|
@@ -447,10 +429,7 @@ class Panel extends Framework7Class {
|
|
|
447
429
|
}
|
|
448
430
|
return true;
|
|
449
431
|
}
|
|
450
|
-
close(animate) {
|
|
451
|
-
if (animate === void 0) {
|
|
452
|
-
animate = true;
|
|
453
|
-
}
|
|
432
|
+
close(animate = true) {
|
|
454
433
|
const panel = this;
|
|
455
434
|
const {
|
|
456
435
|
effect,
|
|
@@ -1,3 +1 @@
|
|
|
1
|
-
:root{--f7-panel-width:260px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.3);--f7-panel-bg-color:#fff}:root .dark,:root.dark{--f7-panel-bg-color:#000}.ios{--f7-panel-collapsed-width:58px;--f7-panel-transition-duration:400ms;--f7-panel-transition-timing-function:initial}.md{--f7-panel-collapsed-width:60px;--f7-panel-transition-duration:400ms;--f7-panel-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1)}.panel-backdrop{position:absolute;left:0;top:0px;width:100%;height:100%;opacity:0;z-index:5999;visibility:hidden;pointer-events:none;transform:translate3d(0,0,0);background-color:var(--f7-panel-backdrop-bg-color);transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel-backdrop .with-panel,.panel-backdrop .with-panel-closing{visibility:visible}.panel-backdrop.not-animated{transition-duration:0s!important}.panel{z-index:1000;box-sizing:border-box;position:absolute;top:0px;height:100%;transform:translate3d(0,0,0);width:var(--f7-panel-width);background-color:var(--f7-panel-bg-color);overflow:visible;transition-property:transform;transition-duration:var(--f7-panel-transition-duration)}.panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(
|
|
2
|
-
.panel-in-swipe
|
|
3
|
-
){display:none}.panel:after{pointer-events:none;opacity:0;z-index:5999;position:absolute;content:'';top:0;width:20px;height:100%;transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel.not-animated,.panel.not-animated:after{transition-duration:0s!important}.panel.panel-reveal.not-animated~.view,.panel.panel-reveal.not-animated~.views{transition-duration:0s!important}.panel.panel-resizing{-webkit-user-select:none;user-select:none}.panel.panel-resizing,.panel.panel-resizing:after,.panel.panel-resizing~.view,.panel.panel-resizing~.views{transition-duration:0s!important}.panel-cover,.panel-floating{z-index:6000}.panel-floating{overflow:hidden;border-radius:16px;height:auto;top:calc(8px + var(--f7-safe-area-top,0px));bottom:calc(8px + var(--f7-safe-area-bottom,0px))}.panel-floating .view,.panel-floating .views{--f7-safe-area-top:0px;--f7-safe-area-bottom:0px}.page .panel-floating{top:calc(8px + var(--f7-page-navbar-offset,0px));bottom:calc(8px + var(--f7-safe-area-bottom,0px))}.page .panel-floating .page{--f7-page-navbar-offset:0px}.page .panel-floating .navbars~*,.page .panel-floating .navbar~*{--f7-page-navbar-offset:calc(var(--f7-navbar-height))}.panel-left{left:0;width:var(--f7-panel-left-width,var(--f7-panel-width))}.panel-left.panel-cover,.panel-left.panel-floating,.panel-left.panel-push{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0)}.panel-right{right:0;width:var(--f7-panel-right-width,var(--f7-panel-width))}.panel-right.panel-cover,.panel-right.panel-floating,.panel-right.panel-push{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.panel-in-breakpoint{transform:translate3d(0,0,0)!important;transition-duration:0s}.panel-in-breakpoint:after{display:none}.panel-in-breakpoint.panel-cover,.panel-in-breakpoint.panel-floating{z-index:5900}.panel,.panel-backdrop{transition-timing-function:var(--f7-panel-transition-timing-function)}html.with-panel-closing .framework7-root>.view,html.with-panel-closing .views,html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views,html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transition-duration:var(--f7-panel-transition-duration);transition-property:transform;transition-timing-function:var(--f7-panel-transition-timing-function)}html.with-panel .framework7-root>.view .page-content,html.with-panel .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.page>.panel-backdrop{z-index:290}.page .panel-push,.page>.panel-reveal{z-index:1}.page>.panel-cover,.page>.panel-floating{z-index:300}.page.with-panel-closing>.page-content,.page.with-panel-closing>.tabs,.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs,.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transition-duration:var(--f7-panel-transition-duration);transition-property:transform;transition-timing-function:var(--f7-panel-transition-timing-function)}.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-closing .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:0}.with-panel-left-cover .panel-backdrop-in,.with-panel-left-floating .panel-backdrop-in,.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in,.with-panel-right-cover .panel-backdrop-in,.with-panel-right-floating .panel-backdrop-in,.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:1}.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-left-cover .panel-left,.with-panel-left-push .panel-left{transform:translate3d(0px,0,0)}.with-panel-left-floating .panel-left{transform:translate3d(8px,0,0)}.with-panel-right-cover .panel-right,.with-panel-right-push .panel-right{transform:translate3d(0px,0,0)}.with-panel-right-floating .panel-right{transform:translate3d(-8px,0,0)}.panel-resizable{max-width:100%}.panel-resize-handler{position:absolute;top:0;height:100%;width:6px;cursor:col-resize;z-index:6000;display:none}.panel-resizable .panel-resize-handler{display:block}.panel-left.panel-cover .panel-resize-handler,.panel-left.panel-floating .panel-resize-handler{right:-3px}.panel-left.panel-push .panel-resize-handler,.panel-left.panel-reveal .panel-resize-handler{right:0}.panel-right.panel-cover .panel-resize-handler,.panel-right.panel-floating .panel-resize-handler{left:-3px}.panel-right.panel-push .panel-resize-handler,.panel-right.panel-reveal .panel-resize-handler{left:0}.panel-left.panel-in-collapsed~.page-content,.panel-left.panel-in-collapsed~.tabs,.panel-left.panel-in-collapsed~.view,.panel-left.panel-in-collapsed~.views{margin-left:var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.page-content,.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.tabs,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.view,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-left-width,var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))),0,0)}.panel-right.panel-in-collapsed~.page-content,.panel-right.panel-in-collapsed~.tabs,.panel-right.panel-in-collapsed~.view,.panel-right.panel-in-collapsed~.views{margin-right:var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.page-content,.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.tabs,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.view,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{--f7-panelPushScale:var(--f7-popup-push-scale);--f7-panelPushTransitionDuration:var(--f7-popup-transition-duration);--f7-panelPushTransitionTimingFunction:var(--f7-popup-transition-timing-function);--f7-panelPushBorderRadius:var(--f7-popup-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{--f7-panelPushScale:var(--f7-sheet-push-scale);--f7-panelPushTransitionDuration:var(--f7-sheet-transition-duration);--f7-panelPushTransitionTimingFunction:var(--f7-sheet-transition-timing-function);--f7-panelPushBorderRadius:var(--f7-sheet-push-border-radius)}html.with-modal-popup-push .framework7-root>.panel-in,html.with-modal-popup-push .framework7-root>.panel-out,html.with-modal-sheet-push .framework7-root>.panel-in,html.with-modal-sheet-push .framework7-root>.panel-out{transition-duration:var(--f7-panelPushTransitionDuration);transition-timing-function:var(--f7-panelPushTransitionTimingFunction)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left{transform:scale(var(--f7-panelPushScale,1));transform-origin:50vw center;border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left .view{border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right{transform:scale(var(--f7-panelPushScale,1));transform-origin:calc(var(--f7-panel-left-width,var(--f7-panel-width)) - 50vw) center;border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right .view{border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-left{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0px)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-right{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0px)}html.with-modal-popup-push-closing .framework7-root>.panel-in,html.with-modal-sheet-push-closing .framework7-root>.panel-in{transition-duration:var(--f7-panelPushTransitionDuration);transition-timing-function:var(--f7-panelPushTransitionTimingFunction)}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-left{transform-origin:50vw center}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-right{transform-origin:calc(var(--f7-panel-right-width,var(--f7-panel-width)) - 50vw) center}.md .panel-cover{overflow:hidden}.md .panel-cover.panel-left{border-radius:0 16px 16px 0}.md .panel-cover.panel-right{border-radius:16px 0 0 16px}
|
|
1
|
+
:root{--f7-panel-width:288px;--f7-panel-backdrop-bg-color:#0000004d}.ios{--f7-panel-floating-border-radius:32px;--f7-panel-collapsed-width:58px;--f7-panel-transition-duration:400ms;--f7-panel-transition-timing-function:initial;--f7-panel-bg-color:var(--f7-glass-bg-color)}.md{--f7-panel-floating-border-radius:16px;--f7-panel-collapsed-width:60px;--f7-panel-transition-duration:400ms;--f7-panel-transition-timing-function:cubic-bezier(0,0.8,0.34,1);--f7-panel-bg-color:#fff}.md .dark,.md.dark{--f7-panel-bg-color:#000}.panel-backdrop{background-color:var(--f7-panel-backdrop-bg-color);height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform:translateZ(0);transition-duration:var(--f7-panel-transition-duration);transition-property:transform,opacity;visibility:hidden;width:100%;z-index:5999}.panel-backdrop .with-panel,.panel-backdrop .with-panel-closing{visibility:visible}.panel-backdrop.not-animated{transition-duration:0s!important}.panel{background-color:var(--f7-panel-bg-color);box-sizing:border-box;height:100%;overflow:visible;position:absolute;top:0;transform:translateZ(0);transition-duration:var(--f7-panel-transition-duration);transition-property:transform;width:var(--f7-panel-width);z-index:1000}.panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(.panel-in-swipe){display:none}.panel:after{content:"";height:100%;opacity:0;pointer-events:none;position:absolute;top:0;transition-duration:var(--f7-panel-transition-duration);transition-property:transform,opacity;width:20px;z-index:5999}.panel.not-animated,.panel.not-animated:after,.panel.panel-reveal.not-animated~.view,.panel.panel-reveal.not-animated~.views{transition-duration:0s!important}.panel.panel-resizing{-webkit-user-select:none;user-select:none}.panel.panel-resizing,.panel.panel-resizing:after,.panel.panel-resizing~.view,.panel.panel-resizing~.views{transition-duration:0s!important}.panel-cover,.panel-floating{z-index:6000}.panel-floating{border-radius:var(--f7-panel-floating-border-radius);bottom:calc(8px + var(--f7-safe-area-bottom, 0px));height:auto;overflow:hidden;top:calc(8px + var(--f7-safe-area-top, 0px))}.panel-floating .view,.panel-floating .views{--f7-safe-area-top:0px;--f7-safe-area-bottom:0px}.page .panel-floating{bottom:calc(8px + var(--f7-safe-area-bottom, 0px));top:calc(8px + var(--f7-page-navbar-offset, 0px))}.page .panel-floating .page{--f7-page-navbar-offset:0px}.page .panel-floating .navbars~*,.page .panel-floating .navbar~*{--f7-page-navbar-offset:calc(var(--f7-navbar-height))}.panel-left{left:0;width:var(--f7-panel-left-width,var(--f7-panel-width))}.panel-left.panel-cover,.panel-left.panel-floating,.panel-left.panel-push{transform:translate3d(calc(var(--f7-panel-left-width, var(--f7-panel-width))*-1),0,0)}.panel-right{right:0;width:var(--f7-panel-right-width,var(--f7-panel-width))}.panel-right.panel-cover,.panel-right.panel-floating,.panel-right.panel-push{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.panel-in-breakpoint{transform:translateZ(0)!important;transition-duration:0s}.panel-in-breakpoint:after{display:none}.panel-in-breakpoint.panel-cover,.panel-in-breakpoint.panel-floating{z-index:5900}.panel,.panel-backdrop{transition-timing-function:var(--f7-panel-transition-timing-function)}html.with-panel-closing .framework7-root>.view,html.with-panel-closing .views,html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views,html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transition-duration:var(--f7-panel-transition-duration);transition-property:transform;transition-timing-function:var(--f7-panel-transition-timing-function)}html.with-panel .framework7-root>.view .page-content,html.with-panel .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transform:translate3d(calc(var(--f7-panel-right-width, var(--f7-panel-width))*-1),0,0)}.page>.panel-backdrop{z-index:290}.page .panel-push,.page>.panel-reveal{z-index:1}.page>.panel-cover,.page>.panel-floating{z-index:300}.page.with-panel-closing>.page-content,.page.with-panel-closing>.tabs,.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs,.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transition-duration:var(--f7-panel-transition-duration);transition-property:transform;transition-timing-function:var(--f7-panel-transition-timing-function)}.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transform:translate3d(calc(var(--f7-panel-right-width, var(--f7-panel-width))*-1),0,0)}.with-panel-closing .panel-backdrop-in{opacity:0;pointer-events:auto;visibility:visible}.with-panel-left-cover .panel-backdrop-in,.with-panel-left-floating .panel-backdrop-in,.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in,.with-panel-right-cover .panel-backdrop-in,.with-panel-right-floating .panel-backdrop-in,.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{opacity:1;pointer-events:auto;visibility:visible}.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{transform:translate3d(calc(var(--f7-panel-right-width, var(--f7-panel-width))*-1),0,0)}.with-panel-left-cover .panel-left,.with-panel-left-push .panel-left{transform:translateZ(0)}.with-panel-left-floating .panel-left{transform:translate3d(8px,0,0)}.with-panel-right-cover .panel-right,.with-panel-right-push .panel-right{transform:translateZ(0)}.with-panel-right-floating .panel-right{transform:translate3d(-8px,0,0)}.panel-resizable{max-width:100%}.panel-resize-handler{cursor:col-resize;display:none;height:100%;position:absolute;top:0;width:6px;z-index:6000}.panel-resizable .panel-resize-handler{display:block}.panel-left.panel-cover .panel-resize-handler,.panel-left.panel-floating .panel-resize-handler{right:-3px}.panel-left.panel-push .panel-resize-handler,.panel-left.panel-reveal .panel-resize-handler{right:0}.panel-right.panel-cover .panel-resize-handler,.panel-right.panel-floating .panel-resize-handler{left:-3px}.panel-right.panel-push .panel-resize-handler,.panel-right.panel-reveal .panel-resize-handler{left:0}.panel-left.panel-in-collapsed~.page-content,.panel-left.panel-in-collapsed~.tabs,.panel-left.panel-in-collapsed~.view,.panel-left.panel-in-collapsed~.views{margin-left:var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.page-content,.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.tabs,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.view,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-left-width, var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width, var(--f7-panel-collapsed-width))),0,0)}.panel-right.panel-in-collapsed~.page-content,.panel-right.panel-in-collapsed~.tabs,.panel-right.panel-in-collapsed~.view,.panel-right.panel-in-collapsed~.views{margin-right:var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.page-content,.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.tabs,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.view,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-right-collapsed-width, var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width, var(--f7-panel-width))),0,0)}html:has(.popup-push-closing) .framework7-root,html:has(.popup-push-in) .framework7-root{--f7-panelPushScale:var(--f7-popup-push-scale);--f7-panelPushTransitionDuration:var(--f7-popup-transition-duration);--f7-panelPushTransitionTimingFunction:var(--f7-popup-transition-timing-function);--f7-panelPushBorderRadius:var(--f7-popup-push-border-radius)}html:has(.sheet-modal-push-closing) .framework7-root,html:has(.sheet-modal-push-in) .framework7-root{--f7-panelPushScale:var(--f7-sheet-push-scale);--f7-panelPushTransitionDuration:var(--f7-sheet-transition-duration);--f7-panelPushTransitionTimingFunction:var(--f7-sheet-transition-timing-function);--f7-panelPushBorderRadius:var(--f7-sheet-push-border-radius)}html:has(.popup-push-in) .framework7-root>.panel-in,html:has(.popup-push-in) .framework7-root>.panel-out,html:has(.sheet-modal-push-in) .framework7-root>.panel-in,html:has(.sheet-modal-push-in) .framework7-root>.panel-out{transition-duration:var(--f7-panelPushTransitionDuration);transition-timing-function:var(--f7-panelPushTransitionTimingFunction)}html:has(.popup-push-in) .framework7-root>.panel-in.panel-push.panel-left,html:has(.popup-push-in) .framework7-root>.panel-in.panel-reveal.panel-left,html:has(.popup-push-in) .framework7-root>.panel-out.panel-push.panel-left,html:has(.popup-push-in) .framework7-root>.panel-out.panel-reveal.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-push.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-reveal.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-push.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-reveal.panel-left{border-top-left-radius:var(--f7-panelPushBorderRadius);transform:scale(var(--f7-panelPushScale,1));transform-origin:50vw center}html:has(.popup-push-in) .framework7-root>.panel-in.panel-push.panel-left .view,html:has(.popup-push-in) .framework7-root>.panel-in.panel-reveal.panel-left .view,html:has(.popup-push-in) .framework7-root>.panel-out.panel-push.panel-left .view,html:has(.popup-push-in) .framework7-root>.panel-out.panel-reveal.panel-left .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-push.panel-left .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-reveal.panel-left .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-push.panel-left .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-reveal.panel-left .view{border-top-left-radius:var(--f7-panelPushBorderRadius)}html:has(.popup-push-in) .framework7-root>.panel-in.panel-push.panel-right,html:has(.popup-push-in) .framework7-root>.panel-in.panel-reveal.panel-right,html:has(.popup-push-in) .framework7-root>.panel-out.panel-push.panel-right,html:has(.popup-push-in) .framework7-root>.panel-out.panel-reveal.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-push.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-reveal.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-push.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-reveal.panel-right{border-top-right-radius:var(--f7-panelPushBorderRadius);transform:scale(var(--f7-panelPushScale,1));transform-origin:calc(var(--f7-panel-left-width, var(--f7-panel-width)) - 50vw) center}html:has(.popup-push-in) .framework7-root>.panel-in.panel-push.panel-right .view,html:has(.popup-push-in) .framework7-root>.panel-in.panel-reveal.panel-right .view,html:has(.popup-push-in) .framework7-root>.panel-out.panel-push.panel-right .view,html:has(.popup-push-in) .framework7-root>.panel-out.panel-reveal.panel-right .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-push.panel-right .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-reveal.panel-right .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-push.panel-right .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-reveal.panel-right .view{border-top-right-radius:var(--f7-panelPushBorderRadius)}html:has(.popup-push-in) .framework7-root>.panel-in.panel-cover.panel-left,html:has(.popup-push-in) .framework7-root>.panel-out.panel-cover.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-cover.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-cover.panel-left{transform:translate3d(calc(var(--f7-panel-left-width, var(--f7-panel-width))*-1),0,0)}html:has(.popup-push-in) .framework7-root>.panel-in.panel-cover.panel-right,html:has(.popup-push-in) .framework7-root>.panel-out.panel-cover.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-cover.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-cover.panel-right{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}html:has(.popup-push-closing) .framework7-root>.panel-in,html:has(.sheet-modal-push-closing) .framework7-root>.panel-in{transition-duration:var(--f7-panelPushTransitionDuration);transition-timing-function:var(--f7-panelPushTransitionTimingFunction)}html:has(.popup-push-closing) .framework7-root>.panel-in.panel-push.panel-left,html:has(.popup-push-closing) .framework7-root>.panel-in.panel-reveal.panel-left,html:has(.sheet-modal-push-closing) .framework7-root>.panel-in.panel-push.panel-left,html:has(.sheet-modal-push-closing) .framework7-root>.panel-in.panel-reveal.panel-left{transform-origin:50vw center}html:has(.popup-push-closing) .framework7-root>.panel-in.panel-push.panel-right,html:has(.popup-push-closing) .framework7-root>.panel-in.panel-reveal.panel-right,html:has(.sheet-modal-push-closing) .framework7-root>.panel-in.panel-push.panel-right,html:has(.sheet-modal-push-closing) .framework7-root>.panel-in.panel-reveal.panel-right{transform-origin:calc(var(--f7-panel-right-width, var(--f7-panel-width)) - 50vw) center}.ios .panel-floating{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}.md .panel-cover{overflow:hidden}.md .panel-cover.panel-left{border-radius:0 16px 16px 0}.md .panel-cover.panel-right{border-radius:16px 0 0 16px}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--f7-panel-width:
|
|
2
|
+
--f7-panel-width: 288px;
|
|
3
3
|
--f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.3);
|
|
4
4
|
/*
|
|
5
5
|
--f7-panel-left-width: var(--f7-panel-width);
|
|
@@ -7,18 +7,21 @@
|
|
|
7
7
|
--f7-panel-left-collapsed-width: var(--f7-panel-collapsed-width);
|
|
8
8
|
--f7-panel-right-collapsed-width: var(--f7-panel-collapsed-width);
|
|
9
9
|
*/
|
|
10
|
-
--f7-panel-bg-color: #fff;
|
|
11
|
-
.dark-vars({
|
|
12
|
-
--f7-panel-bg-color: #000;
|
|
13
|
-
});
|
|
14
10
|
}
|
|
15
11
|
.ios-vars({
|
|
12
|
+
--f7-panel-floating-border-radius: 32px;
|
|
16
13
|
--f7-panel-collapsed-width: 58px;
|
|
17
14
|
--f7-panel-transition-duration: 400ms;
|
|
18
15
|
--f7-panel-transition-timing-function: initial;
|
|
16
|
+
--f7-panel-bg-color: var(--f7-glass-bg-color);
|
|
19
17
|
});
|
|
20
18
|
.md-vars({
|
|
19
|
+
--f7-panel-floating-border-radius: 16px;
|
|
21
20
|
--f7-panel-collapsed-width: 60px;
|
|
22
21
|
--f7-panel-transition-duration: 400ms;
|
|
23
22
|
--f7-panel-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
|
|
23
|
+
--f7-panel-bg-color: #fff;
|
|
24
|
+
.dark-vars({
|
|
25
|
+
--f7-panel-bg-color: #000;
|
|
26
|
+
});
|
|
24
27
|
});
|
|
@@ -1,3 +1 @@
|
|
|
1
|
-
:root{--f7-panel-width:260px;--f7-panel-backdrop-bg-color:rgba(0, 0, 0, 0.3);--f7-panel-bg-color:#fff}:root .dark,:root.dark{--f7-panel-bg-color:#000}.ios{--f7-panel-collapsed-width:58px;--f7-panel-transition-duration:400ms;--f7-panel-transition-timing-function:initial}.md{--f7-panel-collapsed-width:60px;--f7-panel-transition-duration:400ms;--f7-panel-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1)}.panel-backdrop{position:absolute;left:0;top:0px;width:100%;height:100%;opacity:0;z-index:5999;visibility:hidden;pointer-events:none;transform:translate3d(0,0,0);background-color:var(--f7-panel-backdrop-bg-color);transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel-backdrop .with-panel,.panel-backdrop .with-panel-closing{visibility:visible}.panel-backdrop.not-animated{transition-duration:0s!important}.panel{z-index:1000;box-sizing:border-box;position:absolute;top:0px;height:100%;transform:translate3d(0,0,0);width:var(--f7-panel-width);background-color:var(--f7-panel-bg-color);overflow:visible;transition-property:transform;transition-duration:var(--f7-panel-transition-duration)}.panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(
|
|
2
|
-
.panel-in-swipe
|
|
3
|
-
){display:none}.panel:after{pointer-events:none;opacity:0;z-index:5999;position:absolute;content:'';top:0;width:20px;height:100%;transition-property:transform,opacity;transition-duration:var(--f7-panel-transition-duration)}.panel.not-animated,.panel.not-animated:after{transition-duration:0s!important}.panel.panel-reveal.not-animated~.view,.panel.panel-reveal.not-animated~.views{transition-duration:0s!important}.panel.panel-resizing{-webkit-user-select:none;user-select:none}.panel.panel-resizing,.panel.panel-resizing:after,.panel.panel-resizing~.view,.panel.panel-resizing~.views{transition-duration:0s!important}.panel-cover,.panel-floating{z-index:6000}.panel-floating{overflow:hidden;border-radius:16px;height:auto;top:calc(8px + var(--f7-safe-area-top,0px));bottom:calc(8px + var(--f7-safe-area-bottom,0px))}.panel-floating .view,.panel-floating .views{--f7-safe-area-top:0px;--f7-safe-area-bottom:0px}.page .panel-floating{top:calc(8px + var(--f7-page-navbar-offset,0px));bottom:calc(8px + var(--f7-safe-area-bottom,0px))}.page .panel-floating .page{--f7-page-navbar-offset:0px}.page .panel-floating .navbars~*,.page .panel-floating .navbar~*{--f7-page-navbar-offset:calc(var(--f7-navbar-height))}.panel-left{left:0;width:var(--f7-panel-left-width,var(--f7-panel-width))}.panel-left.panel-cover,.panel-left.panel-floating,.panel-left.panel-push{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0)}.panel-right{right:0;width:var(--f7-panel-right-width,var(--f7-panel-width))}.panel-right.panel-cover,.panel-right.panel-floating,.panel-right.panel-push{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.panel-in-breakpoint{transform:translate3d(0,0,0)!important;transition-duration:0s}.panel-in-breakpoint:after{display:none}.panel-in-breakpoint.panel-cover,.panel-in-breakpoint.panel-floating{z-index:5900}.panel,.panel-backdrop{transition-timing-function:var(--f7-panel-transition-timing-function)}html.with-panel-closing .framework7-root>.view,html.with-panel-closing .views,html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views,html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transition-duration:var(--f7-panel-transition-duration);transition-property:transform;transition-timing-function:var(--f7-panel-transition-timing-function)}html.with-panel .framework7-root>.view .page-content,html.with-panel .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.page>.panel-backdrop{z-index:290}.page .panel-push,.page>.panel-reveal{z-index:1}.page>.panel-cover,.page>.panel-floating{z-index:300}.page.with-panel-closing>.page-content,.page.with-panel-closing>.tabs,.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs,.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transition-duration:var(--f7-panel-transition-duration);transition-property:transform;transition-timing-function:var(--f7-panel-transition-timing-function)}.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-closing .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:0}.with-panel-left-cover .panel-backdrop-in,.with-panel-left-floating .panel-backdrop-in,.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in,.with-panel-right-cover .panel-backdrop-in,.with-panel-right-floating .panel-backdrop-in,.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{visibility:visible;pointer-events:auto;opacity:1}.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{transform:translate3d(calc(-1 * var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}.with-panel-left-cover .panel-left,.with-panel-left-push .panel-left{transform:translate3d(0px,0,0)}.with-panel-left-floating .panel-left{transform:translate3d(8px,0,0)}.with-panel-right-cover .panel-right,.with-panel-right-push .panel-right{transform:translate3d(0px,0,0)}.with-panel-right-floating .panel-right{transform:translate3d(-8px,0,0)}.panel-resizable{max-width:100%}.panel-resize-handler{position:absolute;top:0;height:100%;width:6px;cursor:col-resize;z-index:6000;display:none}.panel-resizable .panel-resize-handler{display:block}.panel-left.panel-cover .panel-resize-handler,.panel-left.panel-floating .panel-resize-handler{right:-3px}.panel-left.panel-push .panel-resize-handler,.panel-left.panel-reveal .panel-resize-handler{right:0}.panel-right.panel-cover .panel-resize-handler,.panel-right.panel-floating .panel-resize-handler{left:-3px}.panel-right.panel-push .panel-resize-handler,.panel-right.panel-reveal .panel-resize-handler{left:0}.panel-left.panel-in-collapsed~.page-content,.panel-left.panel-in-collapsed~.tabs,.panel-left.panel-in-collapsed~.view,.panel-left.panel-in-collapsed~.views{margin-left:var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.page-content,.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.tabs,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.view,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-left-width,var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))),0,0)}.panel-right.panel-in-collapsed~.page-content,.panel-right.panel-in-collapsed~.tabs,.panel-right.panel-in-collapsed~.view,.panel-right.panel-in-collapsed~.views{margin-right:var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.page-content,.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.tabs,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.view,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width,var(--f7-panel-width))),0,0)}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{--f7-panelPushScale:var(--f7-popup-push-scale);--f7-panelPushTransitionDuration:var(--f7-popup-transition-duration);--f7-panelPushTransitionTimingFunction:var(--f7-popup-transition-timing-function);--f7-panelPushBorderRadius:var(--f7-popup-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{--f7-panelPushScale:var(--f7-sheet-push-scale);--f7-panelPushTransitionDuration:var(--f7-sheet-transition-duration);--f7-panelPushTransitionTimingFunction:var(--f7-sheet-transition-timing-function);--f7-panelPushBorderRadius:var(--f7-sheet-push-border-radius)}html.with-modal-popup-push .framework7-root>.panel-in,html.with-modal-popup-push .framework7-root>.panel-out,html.with-modal-sheet-push .framework7-root>.panel-in,html.with-modal-sheet-push .framework7-root>.panel-out{transition-duration:var(--f7-panelPushTransitionDuration);transition-timing-function:var(--f7-panelPushTransitionTimingFunction)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left{transform:scale(var(--f7-panelPushScale,1));transform-origin:50vw center;border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-left .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-left .view{border-top-left-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right{transform:scale(var(--f7-panelPushScale,1));transform-origin:calc(var(--f7-panel-left-width,var(--f7-panel-width)) - 50vw) center;border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-popup-push .framework7-root>.panel-out.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-in.panel-reveal.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-push.panel-right .view,html.with-modal-sheet-push .framework7-root>.panel-out.panel-reveal.panel-right .view{border-top-right-radius:var(--f7-panelPushBorderRadius)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-left,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-left{transform:translate3d(calc(-1 * var(--f7-panel-left-width,var(--f7-panel-width))),0,0px)}html.with-modal-popup-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-popup-push .framework7-root>.panel-out.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-in.panel-cover.panel-right,html.with-modal-sheet-push .framework7-root>.panel-out.panel-cover.panel-right{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0px)}html.with-modal-popup-push-closing .framework7-root>.panel-in,html.with-modal-sheet-push-closing .framework7-root>.panel-in{transition-duration:var(--f7-panelPushTransitionDuration);transition-timing-function:var(--f7-panelPushTransitionTimingFunction)}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-left,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-left{transform-origin:50vw center}html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-popup-push-closing .framework7-root>.panel-in.panel-reveal.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-push.panel-right,html.with-modal-sheet-push-closing .framework7-root>.panel-in.panel-reveal.panel-right{transform-origin:calc(var(--f7-panel-right-width,var(--f7-panel-width)) - 50vw) center}.md .panel-cover{overflow:hidden}.md .panel-cover.panel-left{border-radius:0 16px 16px 0}.md .panel-cover.panel-right{border-radius:16px 0 0 16px}
|
|
1
|
+
:root{--f7-panel-width:288px;--f7-panel-backdrop-bg-color:#0000004d}.ios{--f7-panel-floating-border-radius:32px;--f7-panel-collapsed-width:58px;--f7-panel-transition-duration:400ms;--f7-panel-transition-timing-function:initial;--f7-panel-bg-color:var(--f7-glass-bg-color)}.md{--f7-panel-floating-border-radius:16px;--f7-panel-collapsed-width:60px;--f7-panel-transition-duration:400ms;--f7-panel-transition-timing-function:cubic-bezier(0,0.8,0.34,1);--f7-panel-bg-color:#fff}.md .dark,.md.dark{--f7-panel-bg-color:#000}.panel-backdrop{background-color:var(--f7-panel-backdrop-bg-color);height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform:translateZ(0);transition-duration:var(--f7-panel-transition-duration);transition-property:transform,opacity;visibility:hidden;width:100%;z-index:5999}.panel-backdrop .with-panel,.panel-backdrop .with-panel-closing{visibility:visible}.panel-backdrop.not-animated{transition-duration:0s!important}.panel{background-color:var(--f7-panel-bg-color);box-sizing:border-box;height:100%;overflow:visible;position:absolute;top:0;transform:translateZ(0);transition-duration:var(--f7-panel-transition-duration);transition-property:transform;width:var(--f7-panel-width);z-index:1000}.panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(.panel-in-swipe){display:none}.panel:after{content:"";height:100%;opacity:0;pointer-events:none;position:absolute;top:0;transition-duration:var(--f7-panel-transition-duration);transition-property:transform,opacity;width:20px;z-index:5999}.panel.not-animated,.panel.not-animated:after,.panel.panel-reveal.not-animated~.view,.panel.panel-reveal.not-animated~.views{transition-duration:0s!important}.panel.panel-resizing{-webkit-user-select:none;user-select:none}.panel.panel-resizing,.panel.panel-resizing:after,.panel.panel-resizing~.view,.panel.panel-resizing~.views{transition-duration:0s!important}.panel-cover,.panel-floating{z-index:6000}.panel-floating{border-radius:var(--f7-panel-floating-border-radius);bottom:calc(8px + var(--f7-safe-area-bottom, 0px));height:auto;overflow:hidden;top:calc(8px + var(--f7-safe-area-top, 0px))}.panel-floating .view,.panel-floating .views{--f7-safe-area-top:0px;--f7-safe-area-bottom:0px}.page .panel-floating{bottom:calc(8px + var(--f7-safe-area-bottom, 0px));top:calc(8px + var(--f7-page-navbar-offset, 0px))}.page .panel-floating .page{--f7-page-navbar-offset:0px}.page .panel-floating .navbars~*,.page .panel-floating .navbar~*{--f7-page-navbar-offset:calc(var(--f7-navbar-height))}.panel-left{left:0;width:var(--f7-panel-left-width,var(--f7-panel-width))}.panel-left.panel-cover,.panel-left.panel-floating,.panel-left.panel-push{transform:translate3d(calc(var(--f7-panel-left-width, var(--f7-panel-width))*-1),0,0)}.panel-right{right:0;width:var(--f7-panel-right-width,var(--f7-panel-width))}.panel-right.panel-cover,.panel-right.panel-floating,.panel-right.panel-push{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}.panel-in-breakpoint{transform:translateZ(0)!important;transition-duration:0s}.panel-in-breakpoint:after{display:none}.panel-in-breakpoint.panel-cover,.panel-in-breakpoint.panel-floating{z-index:5900}.panel,.panel-backdrop{transition-timing-function:var(--f7-panel-transition-timing-function)}html.with-panel-closing .framework7-root>.view,html.with-panel-closing .views,html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views,html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transition-duration:var(--f7-panel-transition-duration);transition-property:transform;transition-timing-function:var(--f7-panel-transition-timing-function)}html.with-panel .framework7-root>.view .page-content,html.with-panel .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-panel-left-push .framework7-root>.view,html.with-panel-left-push .views,html.with-panel-left-reveal .framework7-root>.view,html.with-panel-left-reveal .views{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}html.with-panel-right-push .framework7-root>.view,html.with-panel-right-push .views,html.with-panel-right-reveal .framework7-root>.view,html.with-panel-right-reveal .views{transform:translate3d(calc(var(--f7-panel-right-width, var(--f7-panel-width))*-1),0,0)}.page>.panel-backdrop{z-index:290}.page .panel-push,.page>.panel-reveal{z-index:1}.page>.panel-cover,.page>.panel-floating{z-index:300}.page.with-panel-closing>.page-content,.page.with-panel-closing>.tabs,.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs,.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transition-duration:var(--f7-panel-transition-duration);transition-property:transform;transition-timing-function:var(--f7-panel-transition-timing-function)}.page.with-panel-left-push>.page-content,.page.with-panel-left-push>.tabs,.page.with-panel-left-reveal>.page-content,.page.with-panel-left-reveal>.tabs{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.page.with-panel-right-push>.page-content,.page.with-panel-right-push>.tabs,.page.with-panel-right-reveal>.page-content,.page.with-panel-right-reveal>.tabs{transform:translate3d(calc(var(--f7-panel-right-width, var(--f7-panel-width))*-1),0,0)}.with-panel-closing .panel-backdrop-in{opacity:0;pointer-events:auto;visibility:visible}.with-panel-left-cover .panel-backdrop-in,.with-panel-left-floating .panel-backdrop-in,.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in,.with-panel-right-cover .panel-backdrop-in,.with-panel-right-floating .panel-backdrop-in,.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{opacity:1;pointer-events:auto;visibility:visible}.with-panel-left-push .panel-backdrop-in,.with-panel-left-reveal .panel-backdrop-in{transform:translate3d(var(--f7-panel-left-width,var(--f7-panel-width)),0,0)}.with-panel-right-push .panel-backdrop-in,.with-panel-right-reveal .panel-backdrop-in{transform:translate3d(calc(var(--f7-panel-right-width, var(--f7-panel-width))*-1),0,0)}.with-panel-left-cover .panel-left,.with-panel-left-push .panel-left{transform:translateZ(0)}.with-panel-left-floating .panel-left{transform:translate3d(8px,0,0)}.with-panel-right-cover .panel-right,.with-panel-right-push .panel-right{transform:translateZ(0)}.with-panel-right-floating .panel-right{transform:translate3d(-8px,0,0)}.panel-resizable{max-width:100%}.panel-resize-handler{cursor:col-resize;display:none;height:100%;position:absolute;top:0;width:6px;z-index:6000}.panel-resizable .panel-resize-handler{display:block}.panel-left.panel-cover .panel-resize-handler,.panel-left.panel-floating .panel-resize-handler{right:-3px}.panel-left.panel-push .panel-resize-handler,.panel-left.panel-reveal .panel-resize-handler{right:0}.panel-right.panel-cover .panel-resize-handler,.panel-right.panel-floating .panel-resize-handler{left:-3px}.panel-right.panel-push .panel-resize-handler,.panel-right.panel-reveal .panel-resize-handler{left:0}.panel-left.panel-in-collapsed~.page-content,.panel-left.panel-in-collapsed~.tabs,.panel-left.panel-in-collapsed~.view,.panel-left.panel-in-collapsed~.views{margin-left:var(--f7-panel-left-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.page-content,.page.with-panel-left-reveal .panel-left.panel-in-collapsed~.tabs,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.view,html.with-panel-left-reveal .panel-left.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-left-width, var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width, var(--f7-panel-collapsed-width))),0,0)}.panel-right.panel-in-collapsed~.page-content,.panel-right.panel-in-collapsed~.tabs,.panel-right.panel-in-collapsed~.view,.panel-right.panel-in-collapsed~.views{margin-right:var(--f7-panel-right-collapsed-width,var(--f7-panel-collapsed-width))}.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.page-content,.page.with-panel-right-reveal .panel-right.panel-in-collapsed~.tabs,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.view,html.with-panel-right-reveal .panel-right.panel-in-collapsed~.views{transform:translate3d(calc(var(--f7-panel-right-collapsed-width, var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width, var(--f7-panel-width))),0,0)}html:has(.popup-push-closing) .framework7-root,html:has(.popup-push-in) .framework7-root{--f7-panelPushScale:var(--f7-popup-push-scale);--f7-panelPushTransitionDuration:var(--f7-popup-transition-duration);--f7-panelPushTransitionTimingFunction:var(--f7-popup-transition-timing-function);--f7-panelPushBorderRadius:var(--f7-popup-push-border-radius)}html:has(.sheet-modal-push-closing) .framework7-root,html:has(.sheet-modal-push-in) .framework7-root{--f7-panelPushScale:var(--f7-sheet-push-scale);--f7-panelPushTransitionDuration:var(--f7-sheet-transition-duration);--f7-panelPushTransitionTimingFunction:var(--f7-sheet-transition-timing-function);--f7-panelPushBorderRadius:var(--f7-sheet-push-border-radius)}html:has(.popup-push-in) .framework7-root>.panel-in,html:has(.popup-push-in) .framework7-root>.panel-out,html:has(.sheet-modal-push-in) .framework7-root>.panel-in,html:has(.sheet-modal-push-in) .framework7-root>.panel-out{transition-duration:var(--f7-panelPushTransitionDuration);transition-timing-function:var(--f7-panelPushTransitionTimingFunction)}html:has(.popup-push-in) .framework7-root>.panel-in.panel-push.panel-left,html:has(.popup-push-in) .framework7-root>.panel-in.panel-reveal.panel-left,html:has(.popup-push-in) .framework7-root>.panel-out.panel-push.panel-left,html:has(.popup-push-in) .framework7-root>.panel-out.panel-reveal.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-push.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-reveal.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-push.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-reveal.panel-left{border-top-left-radius:var(--f7-panelPushBorderRadius);transform:scale(var(--f7-panelPushScale,1));transform-origin:50vw center}html:has(.popup-push-in) .framework7-root>.panel-in.panel-push.panel-left .view,html:has(.popup-push-in) .framework7-root>.panel-in.panel-reveal.panel-left .view,html:has(.popup-push-in) .framework7-root>.panel-out.panel-push.panel-left .view,html:has(.popup-push-in) .framework7-root>.panel-out.panel-reveal.panel-left .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-push.panel-left .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-reveal.panel-left .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-push.panel-left .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-reveal.panel-left .view{border-top-left-radius:var(--f7-panelPushBorderRadius)}html:has(.popup-push-in) .framework7-root>.panel-in.panel-push.panel-right,html:has(.popup-push-in) .framework7-root>.panel-in.panel-reveal.panel-right,html:has(.popup-push-in) .framework7-root>.panel-out.panel-push.panel-right,html:has(.popup-push-in) .framework7-root>.panel-out.panel-reveal.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-push.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-reveal.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-push.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-reveal.panel-right{border-top-right-radius:var(--f7-panelPushBorderRadius);transform:scale(var(--f7-panelPushScale,1));transform-origin:calc(var(--f7-panel-left-width, var(--f7-panel-width)) - 50vw) center}html:has(.popup-push-in) .framework7-root>.panel-in.panel-push.panel-right .view,html:has(.popup-push-in) .framework7-root>.panel-in.panel-reveal.panel-right .view,html:has(.popup-push-in) .framework7-root>.panel-out.panel-push.panel-right .view,html:has(.popup-push-in) .framework7-root>.panel-out.panel-reveal.panel-right .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-push.panel-right .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-reveal.panel-right .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-push.panel-right .view,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-reveal.panel-right .view{border-top-right-radius:var(--f7-panelPushBorderRadius)}html:has(.popup-push-in) .framework7-root>.panel-in.panel-cover.panel-left,html:has(.popup-push-in) .framework7-root>.panel-out.panel-cover.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-cover.panel-left,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-cover.panel-left{transform:translate3d(calc(var(--f7-panel-left-width, var(--f7-panel-width))*-1),0,0)}html:has(.popup-push-in) .framework7-root>.panel-in.panel-cover.panel-right,html:has(.popup-push-in) .framework7-root>.panel-out.panel-cover.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-in.panel-cover.panel-right,html:has(.sheet-modal-push-in) .framework7-root>.panel-out.panel-cover.panel-right{transform:translate3d(var(--f7-panel-right-width,var(--f7-panel-width)),0,0)}html:has(.popup-push-closing) .framework7-root>.panel-in,html:has(.sheet-modal-push-closing) .framework7-root>.panel-in{transition-duration:var(--f7-panelPushTransitionDuration);transition-timing-function:var(--f7-panelPushTransitionTimingFunction)}html:has(.popup-push-closing) .framework7-root>.panel-in.panel-push.panel-left,html:has(.popup-push-closing) .framework7-root>.panel-in.panel-reveal.panel-left,html:has(.sheet-modal-push-closing) .framework7-root>.panel-in.panel-push.panel-left,html:has(.sheet-modal-push-closing) .framework7-root>.panel-in.panel-reveal.panel-left{transform-origin:50vw center}html:has(.popup-push-closing) .framework7-root>.panel-in.panel-push.panel-right,html:has(.popup-push-closing) .framework7-root>.panel-in.panel-reveal.panel-right,html:has(.sheet-modal-push-closing) .framework7-root>.panel-in.panel-push.panel-right,html:has(.sheet-modal-push-closing) .framework7-root>.panel-in.panel-reveal.panel-right{transform-origin:calc(var(--f7-panel-right-width, var(--f7-panel-width)) - 50vw) center}.ios .panel-floating{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}.md .panel-cover{overflow:hidden}.md .panel-cover.panel-left{border-radius:0 16px 16px 0}.md .panel-cover.panel-right{border-radius:16px 0 0 16px}
|