framework7 7.0.8 → 8.0.0-beta.1

package/components/searchbar/searchbar.less

@@ -10,7 +10,6 @@
   position: relative;
   z-index: 200;
   height: var(--f7-searchbar-height);
-  background-image: var(--f7-searchbar-bg-image, var(--f7-bars-bg-image));
   background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color));
   input[type='search']::-webkit-search-decoration {
     display: none;
@@ -21,22 +20,16 @@
     backdrop-filter: none;
     .hairline-remove(bottom);
   }
-  &.no-hairline,
-  &.no-border {
+  &.no-outline {
     &:after {
       display: none !important;
     }
   }
-  &.no-shadow {
-    &:before {
-      display: none !important;
-    }
-  }
+
   .hairline(bottom, var(--f7-searchbar-border-color, var(--f7-bars-border-color)));
 
   .page > &:not(.searchbar-inline) {
     z-index: 600;
-    .bar-shadow-bottom(var(--f7-searchbar-shadow-image));
   }
   input[type='text'],
   input[type='search'] {
@@ -121,8 +114,8 @@
 .subnavbar .searchbar.searchbar-expandable {
   --f7-searchbar-expandable-size: var(--f7-subnavbar-height);
 }
-.tabbar-labels .searchbar.searchbar-expandable {
-  --f7-searchbar-expandable-size: var(--f7-tabbar-labels-height);
+.tabbar-icons .searchbar.searchbar-expandable {
+  --f7-searchbar-expandable-size: var(--f7-tabbar-icons-height);
 }
 .searchbar-inner {
   position: absolute;
@@ -253,34 +246,30 @@
 // Toolbar
 .page > .toolbar-top,
 .ios .page > .toolbar-top-ios,
-.md .page > .toolbar-top-md,
-.aurora .page > .toolbar-top-aurora {
+.md .page > .toolbar-top-md {
   ~ .searchbar {
     top: var(--f7-toolbar-height);
   }
 }
-.page > .tabbar-labels.toolbar-top,
-.ios .page > .tabbar-labels.toolbar-top-ios,
-.md .page > .tabbar-labels.toolbar-top-md,
-.aurora .page > .tabbar-labels.toolbar-top-aurora {
+.page > .tabbar-icons.toolbar-top,
+.ios .page > .tabbar-icons.toolbar-top-ios,
+.md .page > .tabbar-icons.toolbar-top-md {
   ~ .searchbar {
-    top: var(--f7-tabbar-labels-height);
+    top: var(--f7-tabbar-icons-height);
   }
 }
 .page > .navbar ~ .toolbar-top,
 .ios .page > .navbar ~ .toolbar-top-ios,
-.md .page > .navbar ~ .toolbar-top-md,
-.aurora .page > .navbar ~ .toolbar-top-aurora {
+.md .page > .navbar ~ .toolbar-top-md {
   ~ .searchbar {
     top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top));
   }
 }
-.page > .navbar ~ .tabbar-labels.toolbar-top,
-.ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios,
-.md .page > .navbar ~ .tabbar-labels.toolbar-top-md,
-.aurora .page > .navbar ~ .tabbar-labels.toolbar-top-aurora {
+.page > .navbar ~ .tabbar-icons.toolbar-top,
+.ios .page > .navbar ~ .tabbar-icons.toolbar-top-ios,
+.md .page > .navbar ~ .tabbar-icons.toolbar-top-md {
   ~ .searchbar {
-    top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top));
+    top: calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top));
   }
 }
 
@@ -327,6 +316,3 @@
 .if-md-theme({
   @import './searchbar-md.less';
 });
-.if-aurora-theme({
-  @import './searchbar-aurora.less';
-});

package/components/sheet/sheet-class.js

@@ -4,13 +4,13 @@ import { extend, now, getTranslate } from '../../shared/utils.js';
 import { getSupport } from '../../shared/get-support.js';
 import { getDevice } from '../../shared/get-device.js';
 import Modal from '../modal/modal-class.js';
-
 class Sheet extends Modal {
   constructor(app, params) {
     const extendedParams = extend({
       on: {}
-    }, app.params.sheet, params); // Extends with open/close Modal methods;
+    }, app.params.sheet, params);
 
+    // Extends with open/close Modal methods;
     super(app, extendedParams);
     const sheet = this;
     const window = getWindow();
@@ -18,30 +18,24 @@ class Sheet extends Modal {
     const support = getSupport();
     const device = getDevice();
     sheet.params = extendedParams;
-
     if (typeof sheet.params.backdrop === 'undefined') {
       sheet.params.backdrop = app.theme !== 'ios';
-    } // Find Element
-
+    }
 
+    // Find Element
     let $el;
-
     if (!sheet.params.el) {
       $el = $(sheet.params.content).filter(node => node.nodeType === 1).eq(0);
     } else {
       $el = $(sheet.params.el).eq(0);
     }
-
     if ($el && $el.length > 0 && $el[0].f7Modal) {
       return $el[0].f7Modal;
     }
-
     if ($el.length === 0) {
       return sheet.destroy();
     }
-
     let $backdropEl;
-
     if (sheet.params.backdrop && sheet.params.backdropEl) {
       $backdropEl = $(sheet.params.backdropEl);
     } else if (sheet.params.backdrop) {
@@ -51,13 +45,11 @@ class Sheet extends Modal {
       } else {
         $backdropEl = sheet.$containerEl.children('.sheet-backdrop');
       }
-
       if ($backdropEl.length === 0) {
         $backdropEl = $('<div class="sheet-backdrop"></div>');
         sheet.$containerEl.append($backdropEl);
       }
     }
-
     extend(sheet, {
       app,
       push: $el.hasClass('sheet-modal-push') || sheet.params.push,
@@ -68,13 +60,10 @@ class Sheet extends Modal {
       type: 'sheet',
       $htmlEl: $('html')
     });
-
     if (sheet.params.push) {
       $el.addClass('sheet-modal-push');
     }
-
     let $pageContentEl;
-
     function scrollToElementOnOpen() {
       const $scrollEl = $(sheet.params.scrollToEl).eq(0);
       if ($scrollEl.length === 0) return;
@@ -87,26 +76,20 @@ class Sheet extends Modal {
       const pageScroll = $pageContentEl.scrollTop();
       let newPaddingBottom;
       const scrollElTop = $scrollEl.offset().top - paddingTop + $scrollEl[0].offsetHeight;
-
       if (scrollElTop > pageHeight) {
         const scrollTop = pageScroll + scrollElTop - pageHeight;
-
         if (scrollTop + pageHeight > pageScrollHeight) {
           newPaddingBottom = scrollTop + pageHeight - pageScrollHeight + paddingBottom;
-
           if (pageHeight === pageScrollHeight) {
             newPaddingBottom = $el.height();
           }
-
           $pageContentEl.css({
             'padding-bottom': `${newPaddingBottom}px`
           });
         }
-
         $pageContentEl.scrollTop(scrollTop, 300);
       }
     }
-
     function scrollToElementOnClose() {
       if ($pageContentEl && $pageContentEl.length > 0) {
         $pageContentEl.css({
@@ -114,13 +97,11 @@ class Sheet extends Modal {
         });
       }
     }
-
     function handleClick(e) {
       const target = e.target;
       const $target = $(target);
       const keyboardOpened = !device.desktop && device.cordova && (window.Keyboard && window.Keyboard.isVisible || window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible);
       if (keyboardOpened) return;
-
       if ($target.closest(sheet.el).length === 0) {
         if (sheet.params.closeByBackdropClick && sheet.params.backdrop && sheet.backdropEl && sheet.backdropEl === target) {
           sheet.close();
@@ -129,21 +110,16 @@ class Sheet extends Modal {
         }
       }
     }
-
     function onKeyDown(e) {
       const keyCode = e.keyCode;
-
       if (keyCode === 27 && sheet.params.closeOnEscape) {
         sheet.close();
       }
     }
-
     let pushOffset;
-
     function pushViewScale(offset) {
       return (app.height - offset * 2) / app.height;
     }
-
     let isTouched = false;
     let startTouch;
     let currentTouch;
@@ -164,14 +140,11 @@ class Sheet extends Modal {
     let sheetPageContentScrollTop;
     let sheetPageContentScrollHeight;
     let sheetPageContentOffsetHeight;
-
     function handleTouchStart(e) {
       if (isTouched || !(sheet.params.swipeToClose || sheet.params.swipeToStep)) return;
-
       if (sheet.params.swipeHandler && $(e.target).closest(sheet.params.swipeHandler).length === 0) {
         return;
       }
-
       isTouched = true;
       isMoved = false;
       startTouch = {
@@ -181,38 +154,31 @@ class Sheet extends Modal {
       touchStartTime = now();
       isScrolling = undefined;
       isTopSheetModal = $el.hasClass('sheet-modal-top');
-
       if (!sheet.params.swipeHandler && e.type === 'touchstart') {
         sheetPageContentEl = $(e.target).closest('.page-content')[0];
       }
     }
-
     function handleTouchMove(e) {
       if (!isTouched) return;
       currentTouch = {
         x: e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX,
         y: e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY
       };
-
       if (typeof isScrolling === 'undefined') {
         isScrolling = !!(isScrolling || Math.abs(currentTouch.x - startTouch.x) > Math.abs(currentTouch.y - startTouch.y));
       }
-
       if (isScrolling) {
         isTouched = false;
         isMoved = false;
         return;
       }
-
       touchesDiff = startTouch.y - currentTouch.y;
       const direction = touchesDiff < 0 ? 'to-bottom' : 'to-top';
-
       if (!isMoved) {
         if (sheetPageContentEl && !$el.hasClass('modal-in-swipe-step')) {
           sheetPageContentScrollTop = sheetPageContentEl.scrollTop;
           sheetPageContentScrollHeight = sheetPageContentEl.scrollHeight;
           sheetPageContentOffsetHeight = sheetPageContentEl.offsetHeight;
-
           if (!(sheetPageContentScrollHeight === sheetPageContentOffsetHeight) && !(direction === 'to-bottom' && sheetPageContentScrollTop === 0) && !(direction === 'to-top' && sheetPageContentScrollTop === sheetPageContentScrollHeight - sheetPageContentOffsetHeight)) {
             $el.transform('');
             isTouched = false;
@@ -220,14 +186,11 @@ class Sheet extends Modal {
             return;
           }
         }
-
         if (sheet.push && pushOffset) {
           $pushViewEl = app.$el.children('.view, .views');
         }
-
         sheetElOffsetHeight = $el[0].offsetHeight;
         startTranslate = getTranslate($el[0], 'y');
-
         if (isTopSheetModal) {
           minTranslate = sheet.params.swipeToClose ? -sheetElOffsetHeight : -swipeStepTranslate;
           maxTranslate = 0;
@@ -235,17 +198,13 @@ class Sheet extends Modal {
           minTranslate = 0;
           maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : swipeStepTranslate;
         }
-
         isMoved = true;
       }
-
       currentTranslate = startTranslate - touchesDiff;
       currentTranslate = Math.min(Math.max(currentTranslate, minTranslate), maxTranslate);
       e.preventDefault();
-
       if (sheet.push && pushOffset) {
         let progress = (currentTranslate - startTranslate) / sheetElOffsetHeight;
-
         if (sheet.params.swipeToStep) {
           if (isTopSheetModal) {
             progress = currentTranslate / swipeStepTranslate;
@@ -253,7 +212,6 @@ class Sheet extends Modal {
             progress = 1 - (swipeStepTranslate - currentTranslate) / swipeStepTranslate;
           }
         }
-
         progress = Math.abs(progress);
         progress = Math.min(Math.max(progress, 0), 1);
         const pushProgress = 1 - progress;
@@ -261,66 +219,51 @@ class Sheet extends Modal {
         $pushViewEl.transition(0).forEach(el => {
           el.style.setProperty('transform', `translate3d(0,0,0) scale(${scale})`, 'important');
         });
-
         if (sheet.params.swipeToStep) {
           $pushViewEl.css('border-radius', `${pushBorderRadius * pushProgress}px`);
         }
       }
-
       $el.transition(0).transform(`translate3d(0,${currentTranslate}px,0)`);
-
       if (sheet.params.swipeToStep) {
         let progress;
-
         if (isTopSheetModal) {
           progress = 1 - currentTranslate / swipeStepTranslate;
         } else {
           progress = (swipeStepTranslate - currentTranslate) / swipeStepTranslate;
         }
-
         progress = Math.min(Math.max(progress, 0), 1);
         $el.trigger('sheet:stepprogress', progress);
         sheet.emit('local::stepProgress sheetStepProgress', sheet, progress);
       }
     }
-
     function handleTouchEnd() {
       isTouched = false;
-
       if (!isMoved) {
         return;
       }
-
       isMoved = false;
       $el.transform('').transition('');
-
       if (sheet.push && pushOffset) {
         $pushViewEl.transition('').transform('');
         $pushViewEl.css('border-radius', '');
       }
-
       const direction = touchesDiff < 0 ? 'to-bottom' : 'to-top';
       const diff = Math.abs(touchesDiff);
       if (diff === 0 || currentTranslate === startTranslate) return;
       const timeDiff = new Date().getTime() - touchStartTime;
-
       if (!sheet.params.swipeToStep) {
         if (direction !== (isTopSheetModal ? 'to-top' : 'to-bottom')) {
           return;
         }
-
         if (timeDiff < 300 && diff > 20 || timeDiff >= 300 && diff > sheetElOffsetHeight / 2) {
           sheet.close();
         }
-
         return;
       }
-
       const openDirection = isTopSheetModal ? 'to-bottom' : 'to-top';
       const closeDirection = isTopSheetModal ? 'to-top' : 'to-bottom';
       const absCurrentTranslate = Math.abs(currentTranslate);
       const absSwipeStepTranslate = Math.abs(swipeStepTranslate);
-
       if (timeDiff < 300 && diff > 10) {
         if (direction === openDirection && absCurrentTranslate < absSwipeStepTranslate) {
           // open step
@@ -330,13 +273,11 @@ class Sheet extends Modal {
           sheet.emit('local::_swipeStep', false);
           $el.trigger('sheet:stepopen');
           sheet.emit('local::stepOpen sheetStepOpen', sheet);
-
           if (sheet.push && pushOffset) {
             sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
             $pushViewEl.css('border-radius', '');
           }
         }
-
         if (direction === closeDirection && absCurrentTranslate > absSwipeStepTranslate) {
           // close sheet
           if (sheet.params.swipeToClose) {
@@ -349,14 +290,12 @@ class Sheet extends Modal {
             sheet.emit('local::_swipeStep', true);
             $el.trigger('sheet:stepclose');
             sheet.emit('local::stepClose sheetStepClose', sheet);
-
             if (sheet.push && pushOffset) {
               sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
               $pushViewEl.css('border-radius', '0px');
             }
           }
         }
-
         if (direction === closeDirection && absCurrentTranslate <= absSwipeStepTranslate) {
           // close step
           $el.addClass('modal-in-swipe-step');
@@ -365,19 +304,15 @@ class Sheet extends Modal {
           sheet.emit('local::_swipeStep', true);
           $el.trigger('sheet:stepclose');
           sheet.emit('local::stepClose sheetStepClose', sheet);
-
           if (sheet.push && pushOffset) {
             sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
             $pushViewEl.css('border-radius', '0px');
           }
         }
-
         return;
       }
-
       if (timeDiff >= 300) {
         const stepOpened = !$el.hasClass('modal-in-swipe-step');
-
         if (!stepOpened) {
           if (absCurrentTranslate < absSwipeStepTranslate / 2) {
             // open step
@@ -387,7 +322,6 @@ class Sheet extends Modal {
             sheet.emit('local::_swipeStep', false);
             $el.trigger('sheet:stepopen');
             sheet.emit('local::stepOpen sheetStepOpen', sheet);
-
             if (sheet.push && pushOffset) {
               sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
               $pushViewEl.css('border-radius', '');
@@ -408,7 +342,6 @@ class Sheet extends Modal {
             sheet.emit('local::_swipeStep', true);
             $el.trigger('sheet:stepclose');
             sheet.emit('local::stepClose sheetStepClose', sheet);
-
             if (sheet.push && pushOffset) {
               sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
               $pushViewEl.css('border-radius', '0px');
@@ -417,37 +350,29 @@ class Sheet extends Modal {
         }
       }
     }
-
     sheet.setSwipeStep = function setSwipeStep(byResize) {
       if (byResize === void 0) {
         byResize = true;
       }
-
       const $swipeStepEl = $el.find('.sheet-modal-swipe-step').eq(0);
       if (!$swipeStepEl.length) return;
-
       if ($el.hasClass('sheet-modal-top')) {
         swipeStepTranslate = -($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight);
       } else {
         swipeStepTranslate = $el[0].offsetHeight - ($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight);
       }
-
       $el[0].style.setProperty('--f7-sheet-swipe-step', `${swipeStepTranslate}px`);
-
       if (!byResize) {
         $el.addClass('modal-in-swipe-step');
         sheet.emit('local::_swipeStep', true);
       }
     };
-
     function onResize() {
       sheet.setSwipeStep(true);
     }
-
     const passive = support.passiveListener ? {
       passive: true
     } : false;
-
     if (sheet.params.swipeToClose || sheet.params.swipeToStep) {
       $el.on(app.touchEvents.start, handleTouchStart, passive);
       app.on('touchmove', handleTouchMove);
@@ -458,38 +383,31 @@ class Sheet extends Modal {
         app.off('touchend:passive', handleTouchEnd);
       });
     }
-
     sheet.on('open', () => {
       if (sheet.params.closeOnEscape) {
         $(document).on('keydown', onKeyDown);
       }
-
       $el.prevAll('.popup.modal-in').addClass('popup-behind');
-
       if (sheet.params.swipeToStep) {
         sheet.setSwipeStep(false);
         app.on('resize', onResize);
       }
-
       if (sheet.params.scrollToEl) {
         scrollToElementOnOpen();
       }
-
       if (sheet.push) {
         pushOffset = parseInt($el.css('--f7-sheet-push-offset'), 10);
         if (Number.isNaN(pushOffset)) pushOffset = 0;
-
-        if (pushOffset) {
-          $el.addClass('sheet-modal-push');
-          sheet.$htmlEl.addClass('with-modal-sheet-push');
-
-          if (!sheet.params.swipeToStep) {
-            sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
-          } else {
-            $pushViewEl = app.$el.children('.view, .views');
-            pushBorderRadius = parseFloat($el.css(`border-${isTopSheetModal ? 'bottom' : 'top'}-left-radius`));
-            $pushViewEl.css('border-radius', '0px');
-          }
+        if (!pushOffset) pushOffset = app.theme === 'ios' ? 44 : 48;
+        sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-offset', `${pushOffset}px`);
+        $el.addClass('sheet-modal-push');
+        sheet.$htmlEl.addClass('with-modal-sheet-push');
+        if (!sheet.params.swipeToStep) {
+          sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
+        } else {
+          $pushViewEl = app.$el.children('.view, .views');
+          pushBorderRadius = parseFloat($el.css(`border-${isTopSheetModal ? 'bottom' : 'top'}-left-radius`));
+          $pushViewEl.css('border-radius', '0px');
         }
       }
     });
@@ -504,21 +422,16 @@ class Sheet extends Modal {
         sheet.emit('local::_swipeStep', false);
         app.off('resize', onResize);
       }
-
       if (sheet.params.closeOnEscape) {
         $(document).off('keydown', onKeyDown);
       }
-
       if (sheet.params.scrollToEl) {
         scrollToElementOnClose();
       }
-
       if (sheet.params.closeByOutsideClick || sheet.params.closeByBackdropClick) {
         app.off('click', handleClick);
       }
-
       $el.prevAll('.popup.modal-in').eq(0).removeClass('popup-behind');
-
       if (sheet.push && pushOffset) {
         sheet.$htmlEl.removeClass('with-modal-sheet-push');
         sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
@@ -528,43 +441,35 @@ class Sheet extends Modal {
       if (sheet.push && pushOffset) {
         sheet.$htmlEl.removeClass('with-modal-sheet-push-closing');
         sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
+        sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-offset');
       }
     });
-
     sheet.stepOpen = function stepOpen() {
       $el.removeClass('modal-in-swipe-step');
       sheet.emit('local::_swipeStep', false);
-
       if (sheet.push) {
         if (!pushOffset) {
           pushOffset = parseInt($el.css('--f7-sheet-push-offset'), 10);
           if (Number.isNaN(pushOffset)) pushOffset = 0;
         }
-
         if (pushOffset) {
           sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
         }
       }
     };
-
     sheet.stepClose = function stepClose() {
       $el.addClass('modal-in-swipe-step');
       sheet.emit('local::_swipeStep', true);
-
       if (sheet.push) {
         sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
       }
     };
-
     sheet.stepToggle = function stepToggle() {
       $el.toggleClass('modal-in-swipe-step');
       sheet.emit('local::_swipeStep', $el.hasClass('modal-in-swipe-step'));
     };
-
     $el[0].f7Modal = sheet;
     return sheet;
   }
-
 }
-
 export default Sheet;

package/components/sheet/sheet-rtl.css

@@ -1 +1 @@
-:root{--f7-sheet-height:260px;--f7-sheet-border-color:transparent;--f7-sheet-transition-duration:300ms;--f7-sheet-push-border-radius:10px;--f7-sheet-push-offset:var(--f7-safe-area-top);--f7-sheet-bg-color:#fff}:root .dark,:root.dark{--f7-sheet-bg-color:#202020}.ios{--f7-sheet-border-color:var(--f7-bars-border-color)}.sheet-backdrop{z-index:11000}.sheet-backdrop-unique{z-index:12500}.sheet-modal{position:absolute;left:0;bottom:0;width:100%;height:var(--f7-sheet-height);display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100%,0);background:var(--f7-sheet-bg-color);z-index:12500;will-change:transform,opacity}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translate3d(0,0,0)}.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-swipe-step,0),0)}.sheet-modal.modal-out{transform:translate3d(0,100%,0)}.sheet-modal .sheet-modal-inner{height:100%;position:relative;overflow:hidden}.sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.sheet-modal .toolbar:after,.sheet-modal .toolbar:before{display:none}.sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.sheet-modal-top:after{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-top:after{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-bottom,.sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0;transform:translate3d(0,-100%,0)}.sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}html.with-modal-sheet-push .sheet-modal-push,html.with-modal-sheet-push-closing .sheet-modal-push{--f7-sheet-border-color:transparent;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html.with-modal-sheet-push .sheet-modal-push .page,html.with-modal-sheet-push .sheet-modal-push .view,html.with-modal-sheet-push-closing .sheet-modal-push .page,html.with-modal-sheet-push-closing .sheet-modal-push .view{--f7-safe-area-top:0px}html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top{border-radius:0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{background:#000}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views,html.with-modal-sheet-push-closing .framework7-root>.view,html.with-modal-sheet-push-closing .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration)}html.with-modal-sheet-push .dark .framework7-root>.view:after,html.with-modal-sheet-push .dark .framework7-root>.views:after,html.with-modal-sheet-push .dark.framework7-root>.view:after,html.with-modal-sheet-push .dark.framework7-root>.views:after,html.with-modal-sheet-push .framework7-root>.view.dark:after,html.with-modal-sheet-push .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after,html.with-modal-sheet-push.dark .framework7-root>.view:after,html.with-modal-sheet-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;opacity:1;animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translate3d(0,0,0px) scale(var(--f7-sheet-push-scale,1))!important}html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after{animation:sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes sheet-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}
+:root{--f7-sheet-height:260px;--f7-sheet-push-offset:var(--f7-safe-area-top)}.ios{--f7-sheet-border-radius:0px;--f7-sheet-border-color:var(--f7-bars-border-color);--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:10px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:#fff}.ios .dark,.ios.dark{--f7-sheet-bg-color:#202020}.md{--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:transparent;--f7-sheet-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-sheet-transition-duration:400ms}.md,.md .dark,.md [class*=color-]{--f7-sheet-bg-color:var(--f7-md-surface)}.sheet-backdrop{z-index:11000}.sheet-backdrop-unique{z-index:12500}.sheet-modal{overflow:hidden;position:absolute;left:0;bottom:0;width:100%;height:var(--f7-sheet-height);display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100%,0);background:var(--f7-sheet-bg-color);z-index:12500;will-change:transform,opacity}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translate3d(0,0,0)}.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-swipe-step,0),0)}.sheet-modal.modal-out{transform:translate3d(0,100%,0)}.sheet-modal .sheet-modal-inner{height:100%;position:relative;overflow:hidden}.sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.sheet-modal .toolbar:after,.sheet-modal .toolbar:before{display:none}.sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.sheet-backdrop,.sheet-modal{transition-timing-function:var(--f7-sheet-transition-timing-function)}.sheet-modal-top{border-radius:0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius)}.sheet-modal-top:after{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-top:after{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-bottom,.sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px;border-radius:var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0;transform:translate3d(0,-100%,0)}.sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}html.with-modal-sheet-push .sheet-modal-push,html.with-modal-sheet-push-closing .sheet-modal-push{--f7-sheet-border-color:transparent;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html.with-modal-sheet-push .sheet-modal-push .page,html.with-modal-sheet-push .sheet-modal-push .view,html.with-modal-sheet-push-closing .sheet-modal-push .page,html.with-modal-sheet-push-closing .sheet-modal-push .view{--f7-safe-area-top:0px}html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top{border-radius:0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{background:#000}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views,html.with-modal-sheet-push-closing .framework7-root>.view,html.with-modal-sheet-push-closing .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .dark .framework7-root>.view:after,html.with-modal-sheet-push .dark .framework7-root>.views:after,html.with-modal-sheet-push .dark.framework7-root>.view:after,html.with-modal-sheet-push .dark.framework7-root>.views:after,html.with-modal-sheet-push .framework7-root>.view.dark:after,html.with-modal-sheet-push .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after,html.with-modal-sheet-push.dark .framework7-root>.view:after,html.with-modal-sheet-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;opacity:1;animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;animation-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translate3d(0,0,0px) scale(var(--f7-sheet-push-scale,1))!important}html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after{animation:sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;animation-timing-function:var(--f7-sheet-transition-timing-function)}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes sheet-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}

package/components/sheet/sheet-vars.less

@@ -1,16 +1,27 @@
 :root {
   --f7-sheet-height: 260px;
-  --f7-sheet-border-color: transparent;
-  --f7-sheet-transition-duration: 300ms;
-  --f7-sheet-push-border-radius: 10px;
   --f7-sheet-push-offset: var(--f7-safe-area-top);
+}
+.ios-vars({
+  --f7-sheet-border-radius: 0px;
+  --f7-sheet-border-color: var(--f7-bars-border-color);
+  --f7-sheet-transition-timing-function: initial;
+  --f7-sheet-push-border-radius: 10px;
+  --f7-sheet-transition-duration: 300ms;
   .light-vars({
     --f7-sheet-bg-color: #fff;
   });
   .dark-vars({
     --f7-sheet-bg-color: #202020;
   });
-}
-.ios-vars({
-  --f7-sheet-border-color: var(--f7-bars-border-color);
+});
+.md-vars({
+  --f7-sheet-border-radius: 16px;
+  --f7-sheet-push-border-radius: 16px;
+  --f7-sheet-border-color: transparent;
+  --f7-sheet-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
+  --f7-sheet-transition-duration: 400ms;
+});
+.md-color-vars({
+  --f7-sheet-bg-color: var(--f7-md-surface);
 });