@xenknight/framework7 0.0.2

package/components/panel/panel-class.js

@@ -0,0 +1,556 @@
+import { getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+import swipePanel from './swipe-panel.js';
+import resizablePanel from './resizable-panel.js';
+class Panel extends Framework7Class {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+    const extendedParams = extend({
+      on: {}
+    }, app.params.panel, params);
+    super(extendedParams, [app]);
+    const panel = this;
+    panel.params = extendedParams;
+    panel.$containerEl = panel.params.containerEl ? $(panel.params.containerEl).eq(0) : app.$el;
+    panel.containerEl = panel.$containerEl[0];
+    if (!panel.containerEl) {
+      panel.$containerEl = app.$el;
+      panel.containerEl = app.$el[0];
+    }
+    let $el;
+    if (panel.params.el) {
+      $el = $(panel.params.el).eq(0);
+    } else if (panel.params.content) {
+      $el = $(panel.params.content).filter(node => node.nodeType === 1).eq(0);
+    }
+    if ($el.length === 0) return panel;
+    if ($el[0].f7Panel) return $el[0].f7Panel;
+    $el[0].f7Panel = panel;
+    let {
+      side,
+      effect,
+      resizable
+    } = panel.params;
+    if (typeof side === 'undefined') side = $el.hasClass('panel-left') ? 'left' : 'right';
+    if (typeof effect === 'undefined')
+      // eslint-disable-next-line
+      effect = $el.hasClass('panel-cover') ? 'cover' : $el.hasClass('panel-push') ? 'push' : $el.hasClass('panel-floating') ? 'floating' : 'reveal';
+    if (typeof resizable === 'undefined') resizable = $el.hasClass('panel-resizable');
+    let $backdropEl;
+    if (panel.params.backdrop && panel.params.backdropEl) {
+      $backdropEl = $(panel.params.backdropEl);
+    } else if (panel.params.backdrop) {
+      $backdropEl = panel.$containerEl.children('.panel-backdrop');
+      if ($backdropEl.length === 0) {
+        $backdropEl = $('<div class="panel-backdrop"></div>');
+        panel.$containerEl.prepend($backdropEl);
+      }
+    }
+    extend(panel, {
+      app,
+      side,
+      effect,
+      resizable,
+      $el,
+      el: $el[0],
+      opened: false,
+      $backdropEl,
+      backdropEl: $backdropEl && $backdropEl[0]
+    });
+
+    // Install Modules
+    panel.useModules();
+
+    // Init
+    panel.init();
+    return panel;
+  }
+  getViewEl() {
+    const panel = this;
+    let viewEl;
+    if (panel.$containerEl.children('.views').length > 0) {
+      viewEl = panel.$containerEl.children('.views')[0];
+    } else {
+      viewEl = panel.$containerEl.children('.view')[0];
+    }
+    return viewEl;
+  }
+  setStateClasses(state) {
+    const panel = this;
+    const {
+      side,
+      el,
+      effect
+    } = panel;
+    const viewEl = panel.getViewEl();
+    const panelInView = viewEl && viewEl.contains(el);
+    const $targetEl = !viewEl || panelInView ? panel.$containerEl : $('html');
+    if (state === 'open') {
+      $targetEl.addClass(`with-panel with-panel-${panel.side}-${panel.effect}`);
+    }
+    if (state === 'before-closing') {
+      $targetEl.addClass('with-panel-closing');
+    }
+    if (state === 'closing') {
+      $targetEl.addClass('with-panel-closing');
+      $targetEl.removeClass(`with-panel with-panel-${panel.side}-${panel.effect}`);
+    }
+    if (state === 'after-closing') {
+      $targetEl.removeClass('with-panel-closing');
+    }
+    if (state === 'closed') {
+      $targetEl.removeClass(`with-panel-${side}-${effect}`);
+    }
+  }
+  enableVisibleBreakpoint() {
+    const panel = this;
+    panel.visibleBreakpointDisabled = false;
+    panel.setVisibleBreakpoint();
+    return panel;
+  }
+  disableVisibleBreakpoint() {
+    const panel = this;
+    panel.visibleBreakpointDisabled = true;
+    panel.setVisibleBreakpoint();
+    return panel;
+  }
+  toggleVisibleBreakpoint() {
+    const panel = this;
+    panel.visibleBreakpointDisabled = !panel.visibleBreakpointDisabled;
+    panel.setVisibleBreakpoint();
+    return panel;
+  }
+  setVisibleBreakpoint(emitEvents) {
+    if (emitEvents === void 0) {
+      emitEvents = true;
+    }
+    const panel = this;
+    const app = panel.app;
+    if (!panel.visibleBreakpointResizeHandler) {
+      panel.visibleBreakpointResizeHandler = function visibleBreakpointResizeHandler() {
+        panel.setVisibleBreakpoint();
+      };
+      app.on('resize', panel.visibleBreakpointResizeHandler);
+    }
+    const {
+      side,
+      $el,
+      $containerEl,
+      params,
+      visibleBreakpointDisabled
+    } = panel;
+    const breakpoint = params.visibleBreakpoint;
+    const $viewEl = $(panel.getViewEl());
+    const wasVisible = $el.hasClass('panel-in-breakpoint');
+    if ($containerEl && $containerEl.hasClass('page')) {
+      $viewEl.add($containerEl.children('.page-content, .tabs, .fab'));
+    }
+    if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null && !visibleBreakpointDisabled) {
+      if (!wasVisible) {
+        panel.setStateClasses('closed');
+        $el.addClass('panel-in-breakpoint').removeClass('panel-in panel-in-collapsed');
+        panel.onOpen(false);
+        panel.onOpened();
+        $viewEl.css({
+          [`margin-${side}`]: `${$el.width()}px`
+        });
+        app.allowPanelOpen = true;
+        if (emitEvents) {
+          panel.emit('local::breakpoint panelBreakpoint', panel);
+          panel.$el.trigger('panel:breakpoint');
+        }
+      } else {
+        $viewEl.css({
+          [`margin-${side}`]: `${$el.width()}px`
+        });
+      }
+    } else if (wasVisible) {
+      $el.removeClass('panel-in-breakpoint panel-in');
+      panel.onClose();
+      panel.onClosed();
+      $viewEl.css({
+        [`margin-${side}`]: ''
+      });
+      if (emitEvents) {
+        panel.emit('local::breakpoint panelBreakpoint', panel);
+        panel.$el.trigger('panel:breakpoint');
+      }
+    }
+  }
+  enableCollapsedBreakpoint() {
+    const panel = this;
+    panel.collapsedBreakpointDisabled = false;
+    panel.setCollapsedBreakpoint();
+    return panel;
+  }
+  disableCollapsedBreakpoint() {
+    const panel = this;
+    panel.collapsedBreakpointDisabled = true;
+    panel.setCollapsedBreakpoint();
+    return panel;
+  }
+  toggleCollapsedBreakpoint() {
+    const panel = this;
+    panel.collapsedBreakpointDisabled = !panel.collapsedBreakpointDisabled;
+    panel.setCollapsedBreakpoint();
+    return panel;
+  }
+  setCollapsedBreakpoint(emitEvents) {
+    if (emitEvents === void 0) {
+      emitEvents = true;
+    }
+    const panel = this;
+    const app = panel.app;
+    if (!panel.collapsedBreakpointResizeHandler) {
+      panel.collapsedBreakpointResizeHandler = function collapsedBreakpointResizeHandler() {
+        panel.setCollapsedBreakpoint();
+      };
+      app.on('resize', panel.collapsedBreakpointResizeHandler);
+    }
+    const {
+      $el,
+      params,
+      collapsedBreakpointDisabled
+    } = panel;
+    if ($el.hasClass('panel-in-breakpoint')) return;
+    const breakpoint = params.collapsedBreakpoint;
+    const wasVisible = $el.hasClass('panel-in-collapsed');
+    if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null && !collapsedBreakpointDisabled) {
+      if (!wasVisible) {
+        panel.setStateClasses('closed');
+        $el.addClass('panel-in-collapsed').removeClass('panel-in');
+        panel.collapsed = true;
+        app.allowPanelOpen = true;
+        if (emitEvents) {
+          panel.emit('local::collapsedBreakpoint panelCollapsedBreakpoint', panel);
+          panel.$el.trigger('panel:collapsedbreakpoint');
+        }
+      }
+    } else if (wasVisible) {
+      $el.removeClass('panel-in-collapsed panel-in');
+      panel.collapsed = false;
+      if (emitEvents) {
+        panel.emit('local::collapsedBreakpoint panelCollapsedBreakpoint', panel);
+        panel.$el.trigger('panel:collapsedbreakpoint');
+      }
+    }
+  }
+  enableResizable() {
+    const panel = this;
+    if (panel.resizableInitialized) {
+      panel.resizable = true;
+      panel.$el.addClass('panel-resizable');
+    } else {
+      resizablePanel(panel);
+    }
+    return panel;
+  }
+  disableResizable() {
+    const panel = this;
+    panel.resizable = false;
+    panel.$el.removeClass('panel-resizable');
+    return panel;
+  }
+  enableSwipe() {
+    const panel = this;
+    if (panel.swipeInitialized) {
+      panel.swipeable = true;
+    } else {
+      swipePanel(panel);
+    }
+    return panel;
+  }
+  disableSwipe() {
+    const panel = this;
+    panel.swipeable = false;
+    return panel;
+  }
+  onOpen(modifyHtmlClasses) {
+    if (modifyHtmlClasses === void 0) {
+      modifyHtmlClasses = true;
+    }
+    const panel = this;
+    // eslint-disable-next-line
+    panel._openTransitionStarted = false;
+    const app = panel.app;
+    panel.opened = true;
+    app.panel.allowOpen = false;
+    panel.$el.trigger('panel:beforeopen');
+    panel.emit('local::beforeOpen panelBeforeOpen', panel);
+    if (modifyHtmlClasses) {
+      panel.setStateClasses('open');
+    }
+    panel.$el.trigger('panel:open');
+    panel.emit('local::open panelOpen', panel);
+  }
+  onOpened() {
+    const panel = this;
+    const app = panel.app;
+    app.panel.allowOpen = true;
+    panel.$el.trigger('panel:opened');
+    panel.emit('local::opened panelOpened', panel);
+  }
+  onClose() {
+    const panel = this;
+    const app = panel.app;
+    panel.opened = false;
+    app.panel.allowOpen = false;
+    panel.$el.trigger('panel:beforeclose');
+    panel.emit('local::beforeClose panelBeforeClose', panel);
+    panel.setStateClasses('closing');
+    panel.$el.trigger('panel:close');
+    panel.emit('local::close panelClose', panel);
+  }
+  onClosed() {
+    const panel = this;
+    const app = panel.app;
+    app.panel.allowOpen = true;
+    panel.setStateClasses('after-closing');
+    panel.$el.removeClass('panel-out');
+    if (panel.$backdropEl) {
+      const otherPanel = app.panel.get('.panel-in');
+      const shouldHideBackdrop = !otherPanel || otherPanel && !otherPanel.$backdropEl;
+      if (shouldHideBackdrop) {
+        panel.$backdropEl.removeClass('panel-backdrop-in');
+      }
+    }
+    panel.$el.trigger('panel:closed');
+    panel.emit('local::closed panelClosed', panel);
+  }
+  toggle(animate) {
+    if (animate === void 0) {
+      animate = true;
+    }
+    const panel = this;
+    const breakpoint = panel.params.visibleBreakpoint;
+    const app = panel.app;
+    if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null) {
+      return panel.toggleVisibleBreakpoint();
+    }
+    if (panel.opened) panel.close(animate);else panel.open(animate);
+    return panel;
+  }
+  insertToRoot() {
+    const panel = this;
+    const document = getDocument();
+    const {
+      $el,
+      $backdropEl,
+      $containerEl
+    } = panel;
+    const $panelParentEl = $el.parent();
+    const wasInDom = $el.parents(document).length > 0;
+    if (!$panelParentEl.is($containerEl) || $el.prevAll('.views, .view').length) {
+      const $insertBeforeEl = $containerEl.children('.panel, .views, .view').eq(0);
+      const $insertAfterEl = $containerEl.children('.panel-backdrop').eq(0);
+      if ($insertBeforeEl.length) {
+        $el.insertBefore($insertBeforeEl);
+      } else if ($insertAfterEl) {
+        $el.insertBefore($insertAfterEl);
+      } else {
+        $containerEl.prepend($el);
+      }
+      if ($backdropEl && $backdropEl.length && (!$backdropEl.parent().is($containerEl) && $backdropEl.nextAll('.panel').length === 0 || $backdropEl.parent().is($containerEl) && $backdropEl.nextAll('.panel').length === 0)) {
+        $backdropEl.insertBefore($el);
+      }
+      panel.once('panelClosed', () => {
+        if (wasInDom) {
+          $panelParentEl.append($el);
+        } else {
+          $el.remove();
+        }
+      });
+    }
+  }
+  open(animate) {
+    if (animate === void 0) {
+      animate = true;
+    }
+    const panel = this;
+    const app = panel.app;
+    if (!app.panel.allowOpen) return false;
+    const {
+      effect,
+      $el,
+      $backdropEl,
+      opened,
+      $containerEl
+    } = panel;
+    if (!$el || $el.hasClass('panel-in')) {
+      return panel;
+    }
+    panel.insertToRoot();
+
+    // Ignore if opened
+    if (opened || $el.hasClass('panel-in-breakpoint') || $el.hasClass('panel-in')) return false;
+
+    // Close if some panel is opened
+    const otherOpenedPanel = app.panel.get('.panel-in');
+    if (otherOpenedPanel && otherOpenedPanel !== panel) {
+      otherOpenedPanel.close(animate);
+    }
+    $el[animate ? 'removeClass' : 'addClass']('not-animated');
+    $el.addClass('panel-in');
+    if ($backdropEl) {
+      $backdropEl.addClass('panel-backdrop-in');
+      $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');
+    }
+    if (['cover', 'push', 'floating'].includes(panel.effect)) {
+      /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
+      panel._clientLeft = $el[0].clientLeft;
+    }
+
+    // Transitionend
+    const $viewEl = $(panel.getViewEl());
+    if ($containerEl && $containerEl.hasClass('page')) {
+      $viewEl.add($containerEl.children('.page-content, .tabs'));
+    }
+    const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;
+    function panelTransitionStart() {
+      transitionEndTarget.transitionStart(() => {
+        // eslint-disable-next-line
+        panel._openTransitionStarted = true;
+      });
+    }
+    function panelTransitionEnd() {
+      transitionEndTarget.transitionEnd(e => {
+        if ($(e.target).is(transitionEndTarget)) {
+          if ($el.hasClass('panel-out')) {
+            panel.onClosed();
+          } else {
+            panel.onOpened();
+          }
+        } else panelTransitionEnd();
+      });
+    }
+    if (animate) {
+      if ($backdropEl) {
+        $backdropEl.removeClass('not-animated');
+      }
+      panelTransitionStart();
+      panelTransitionEnd();
+      $el.removeClass('panel-out not-animated').addClass('panel-in');
+      panel.onOpen();
+    } else {
+      if ($backdropEl) {
+        $backdropEl.addClass('not-animated');
+      }
+      $el.removeClass('panel-out').addClass('panel-in not-animated');
+      panel.onOpen();
+      panel.onOpened();
+      // eslint-disable-next-line
+      panel._openTransitionStarted = true;
+    }
+    return true;
+  }
+  close(animate) {
+    if (animate === void 0) {
+      animate = true;
+    }
+    const panel = this;
+    const {
+      effect,
+      $el,
+      $backdropEl,
+      opened,
+      $containerEl
+    } = panel;
+    if (!opened || $el.hasClass('panel-in-breakpoint') || !$el.hasClass('panel-in')) return panel;
+    $el[animate ? 'removeClass' : 'addClass']('not-animated');
+    if ($backdropEl) {
+      $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');
+    }
+    const $viewEl = $(panel.getViewEl());
+    if ($containerEl && $containerEl.hasClass('page')) {
+      $viewEl.add($containerEl.children('.page-content, .tabs'));
+    }
+    const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;
+    // eslint-disable-next-line
+    if (!panel._openTransitionStarted) {
+      // eslint-disable-next-line
+      animate = false;
+    }
+    function transitionEnd() {
+      if ($el.hasClass('panel-out')) {
+        panel.onClosed();
+      } else if ($el.hasClass('panel-in')) {
+        panel.onOpened();
+      }
+      panel.setStateClasses('after-closing');
+    }
+    if (animate) {
+      transitionEndTarget.transitionEnd(() => {
+        transitionEnd();
+      });
+      $el.removeClass('panel-in').addClass('panel-out');
+      // Emit close
+      panel.onClose();
+    } else {
+      $el.addClass('not-animated').removeClass('panel-in').addClass('panel-out');
+      // Emit close
+      panel.onClose();
+      panel.onClosed();
+    }
+    return panel;
+  }
+  init() {
+    const panel = this;
+    // const app = panel.app;
+    if (typeof panel.params.visibleBreakpoint !== 'undefined') {
+      panel.setVisibleBreakpoint();
+    }
+    if (typeof panel.params.collapsedBreakpoint !== 'undefined') {
+      panel.setCollapsedBreakpoint();
+    }
+    if (panel.params.swipe) {
+      panel.enableSwipe();
+    }
+    if (panel.resizable) {
+      panel.enableResizable();
+    }
+  }
+  destroy() {
+    let panel = this;
+    const app = panel.app;
+    const {
+      $containerEl
+    } = panel;
+    if (!panel.$el) {
+      // Panel already destroyed
+      return;
+    }
+    panel.emit('local::beforeDestroy panelBeforeDestroy', panel);
+    panel.$el.trigger('panel:beforedestroy');
+    if (panel.visibleBreakpointResizeHandler) {
+      app.off('resize', panel.visibleBreakpointResizeHandler);
+    }
+    if (panel.collapsedBreakpointResizeHandler) {
+      app.off('resize', panel.collapsedBreakpointResizeHandler);
+    }
+    if (panel.$el.hasClass('panel-in-breakpoint') || panel.$el.hasClass('panel-in-collapsed')) {
+      const $viewEl = $(panel.getViewEl());
+      if ($containerEl && $containerEl.hasClass('page')) {
+        $viewEl.add($containerEl.children('.page-content, .tabs'));
+      }
+      panel.$el.removeClass('panel-in-breakpoint panel-in-collapsed panel-in');
+      $viewEl.css({
+        [`margin-${panel.side}`]: ''
+      });
+      panel.emit('local::breakpoint panelBreakpoint', panel);
+      panel.$el.trigger('panel:breakpoint');
+    }
+    panel.$el.trigger('panel:destroy');
+    panel.emit('local::destroy panelDestroy', panel);
+    if (panel.el) {
+      panel.el.f7Panel = null;
+      delete panel.el.f7Panel;
+    }
+    deleteProps(panel);
+    panel = null;
+  }
+}
+export default Panel;

package/components/panel/panel-ios.less

@@ -0,0 +1,2 @@
+.ios {
+}

package/components/panel/panel-md.less

@@ -0,0 +1,11 @@
+.md {
+  .panel-cover {
+    overflow: hidden;
+    &.panel-left {
+      border-radius: 0 16px 16px 0;
+    }
+    &.panel-right {
+      border-radius: 16px 0 0 16px;
+    }
+  }
+}

package/components/panel/panel-rtl.css

@@ -0,0 +1,3 @@
+: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(
+.panel-in-swipe
+){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}

package/components/panel/panel-vars.less

@@ -0,0 +1,24 @@
+:root {
+  --f7-panel-width: 260px;
+  --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.3);
+  /*
+  --f7-panel-left-width: var(--f7-panel-width);
+  --f7-panel-right-width: var(--f7-panel-width);
+  --f7-panel-left-collapsed-width: var(--f7-panel-collapsed-width);
+  --f7-panel-right-collapsed-width: var(--f7-panel-collapsed-width);
+  */
+  --f7-panel-bg-color: #fff;
+  .dark-vars({
+    --f7-panel-bg-color: #000;
+  });
+}
+.ios-vars({
+  --f7-panel-collapsed-width: 58px;
+  --f7-panel-transition-duration: 400ms;
+  --f7-panel-transition-timing-function: initial;
+});
+.md-vars({
+  --f7-panel-collapsed-width: 60px;
+  --f7-panel-transition-duration: 400ms;
+  --f7-panel-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
+});

package/components/panel/panel.css

@@ -0,0 +1,3 @@
+: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(
+.panel-in-swipe
+){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}