framework7 8.3.4 → 9.0.0

package/components/navbar/navbar-md.less

@@ -2,6 +2,7 @@
   .navbar {
     .title-large {
       align-items: center;
+      overflow: hidden;
     }
     .left {
       margin-left: 4px;
@@ -10,8 +11,9 @@
     a.link {
       padding: 0 12px;
       min-width: 48px;
+      height: var(--f7-navbar-link-height, var(--f7-navbar-height));
     }
-    a.icon-only {
+    a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
       min-width: 0;
       flex-shrink: 0;
       width: 48px;
@@ -35,6 +37,21 @@
       });
     }
   }
+  .navbar-pane {
+    display: contents;
+  }
+  .navbar-bg {
+    background: var(--f7-navbar-bg-color);
+    background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
+    &:after,
+    &:before {
+      backface-visibility: hidden;
+    }
+    .hairline(bottom, var(--f7-navbar-border-color, var(--f7-bars-border-color)));
+    &:after {
+      z-index: 1;
+    }
+  }
   .navbar-inner {
     justify-content: flex-start;
     overflow: hidden;
@@ -62,4 +79,27 @@
       text-align: center;
     }
   }
+  // Transparent navbar
+  .navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(
+      .with-searchbar-expandable-enabled
+    ) {
+    .navbar-bg,
+    .title {
+      opacity: 0;
+    }
+  }
+
+  // Large Title Navbar
+  .navbar-large .navbar-bg {
+    height: calc(100% + var(--f7-navbar-large-title-height));
+    transform: translate3d(
+      0px,
+      calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),
+      0
+    );
+  }
+  .navbar-large-transparent .navbar-bg,
+  .navbar-large.navbar-transparent .navbar-bg {
+    opacity: var(--f7-navbar-large-collapse-progress);
+  }
 }

package/components/navbar/navbar-vars.less

@@ -17,11 +17,12 @@
   --f7-navbar-link-color: var(--f7-bars-link-color);
   --f7-navbar-text-color: var(--f7-bars-text-color);
   */
-  --f7-navbar-height: 44px;
+  --f7-navbar-link-color: var(--f7-bars-text-color);
+  --f7-navbar-height: 76px;
   --f7-navbar-font-size: 17px;
   --f7-navbar-title-font-size: inherit;
-  --f7-navbar-inner-padding-left: 8px;
-  --f7-navbar-inner-padding-right: 8px;
+  --f7-navbar-inner-padding-left: 16px;
+  --f7-navbar-inner-padding-right: 16px;
   --f7-navbar-title-font-weight: 600;
   --f7-navbar-title-margin-left: 0;
   --f7-navbar-title-margin-right: 0;

package/components/navbar/navbar.js

@@ -4,13 +4,7 @@ import { getSupport } from '../../shared/get-support.js';
 const Navbar = {
   size(el) {
     const app = this;
-    let $el = $(el);
-    if ($el.hasClass('navbars')) {
-      $el = $el.children('.navbar').each(navbarEl => {
-        app.navbar.size(navbarEl);
-      });
-      return;
-    }
+    const $el = $(el);
     const $innerEl = $el.children('.navbar-inner');
     if (!$innerEl.length) return;
     const needCenterTitle = $innerEl.hasClass('navbar-inner-centered-title') || app.params.navbar[`${app.theme}CenterTitle`];
@@ -25,11 +19,9 @@ const Navbar = {
     if (app.theme === 'ios' && !app.params.navbar.iosCenterTitle) {
       $innerEl.addClass('navbar-inner-left-title');
     }
-    const $viewEl = $el.parents('.view').eq(0);
     const left = app.rtl ? $innerEl.children('.right') : $innerEl.children('.left');
     const right = app.rtl ? $innerEl.children('.left') : $innerEl.children('.right');
     const title = $innerEl.children('.title');
-    const subnavbar = $innerEl.children('.subnavbar');
     const noLeft = left.length === 0;
     const noRight = right.length === 0;
     const leftWidth = noLeft ? 0 : left.outerWidth(true);
@@ -38,14 +30,6 @@ const Navbar = {
     const navbarStyles = $innerEl.styles();
     const navbarWidth = $innerEl[0].offsetWidth;
     const navbarInnerWidth = navbarWidth - parseInt(navbarStyles.paddingLeft, 10) - parseInt(navbarStyles.paddingRight, 10);
-    const isPrevious = $el.hasClass('navbar-previous');
-    const sliding = $innerEl.hasClass('sliding');
-    let router;
-    let dynamicNavbar;
-    if ($viewEl.length > 0 && $viewEl[0].f7View) {
-      router = $viewEl[0].f7View.router;
-      dynamicNavbar = router && router.dynamicNavbar;
-    }
     let currLeft;
     let diff;
     if (noRight) {
@@ -70,57 +54,6 @@ const Navbar = {
       diff = 0;
     }
 
-    // RTL inverter
-    const inverter = app.rtl ? -1 : 1;
-    if (dynamicNavbar && app.theme === 'ios') {
-      if (title.hasClass('sliding') || title.length > 0 && sliding) {
-        let titleLeftOffset = -(currLeft + diff) * inverter;
-        const titleRightOffset = (navbarInnerWidth - currLeft - diff - titleWidth) * inverter;
-        if (isPrevious) {
-          if (router && router.params.iosAnimateNavbarBackIcon) {
-            const activeNavbarBackLink = $el.parent().find('.navbar-current').children('.left.sliding').find('.back .icon ~ span');
-            if (activeNavbarBackLink.length > 0) {
-              titleLeftOffset += activeNavbarBackLink[0].offsetLeft;
-            }
-          }
-        }
-        title[0].f7NavbarLeftOffset = titleLeftOffset;
-        title[0].f7NavbarRightOffset = titleRightOffset;
-      }
-      if (!noLeft && (left.hasClass('sliding') || sliding)) {
-        if (app.rtl) {
-          left[0].f7NavbarLeftOffset = -(navbarInnerWidth - left[0].offsetWidth) / 2 * inverter;
-          left[0].f7NavbarRightOffset = leftWidth * inverter;
-        } else {
-          left[0].f7NavbarLeftOffset = -leftWidth;
-          left[0].f7NavbarRightOffset = (navbarInnerWidth - left[0].offsetWidth) / 2;
-          if (router && router.params.iosAnimateNavbarBackIcon && left.find('.back .icon').length > 0) {
-            if (left.find('.back .icon ~ span').length) {
-              const leftOffset = left[0].f7NavbarLeftOffset;
-              const rightOffset = left[0].f7NavbarRightOffset;
-              left[0].f7NavbarLeftOffset = 0;
-              left[0].f7NavbarRightOffset = 0;
-              left.find('.back .icon ~ span')[0].f7NavbarLeftOffset = leftOffset;
-              left.find('.back .icon ~ span')[0].f7NavbarRightOffset = rightOffset - left.find('.back .icon')[0].offsetWidth;
-            }
-          }
-        }
-      }
-      if (!noRight && (right.hasClass('sliding') || sliding)) {
-        if (app.rtl) {
-          right[0].f7NavbarLeftOffset = -rightWidth * inverter;
-          right[0].f7NavbarRightOffset = (navbarInnerWidth - right[0].offsetWidth) / 2 * inverter;
-        } else {
-          right[0].f7NavbarLeftOffset = -(navbarInnerWidth - right[0].offsetWidth) / 2;
-          right[0].f7NavbarRightOffset = rightWidth;
-        }
-      }
-      if (subnavbar.length && (subnavbar.hasClass('sliding') || sliding)) {
-        subnavbar[0].f7NavbarLeftOffset = app.rtl ? subnavbar[0].offsetWidth : -subnavbar[0].offsetWidth;
-        subnavbar[0].f7NavbarRightOffset = -subnavbar[0].f7NavbarLeftOffset;
-      }
-    }
-
     // Center title
     if (needCenterTitle) {
       let titleLeft = diff;
@@ -130,24 +63,13 @@ const Navbar = {
       });
     }
   },
-  hide(el, animate, hideStatusbar, hideOnlyCurrent) {
-    if (animate === void 0) {
-      animate = true;
-    }
-    if (hideStatusbar === void 0) {
-      hideStatusbar = false;
-    }
-    if (hideOnlyCurrent === void 0) {
-      hideOnlyCurrent = false;
-    }
+  hide(el, animate = true, hideStatusbar = false) {
     const app = this;
-    let $el = $(el);
-    const isDynamic = $el.hasClass('navbar') && $el.parent('.navbars').length && !hideOnlyCurrent;
-    if (isDynamic) $el = $el.parents('.navbars');
+    const $el = $(el);
     if (!$el.length) return;
     if ($el.hasClass('navbar-hidden')) return;
     let className = `navbar-hidden${animate ? ' navbar-transitioning' : ''}`;
-    const currentIsLarge = isDynamic ? $el.find('.navbar-current .title-large').length : $el.find('.title-large').length;
+    const currentIsLarge = $el.find('.title-large').length;
     if (currentIsLarge) {
       className += ' navbar-large-hidden';
     }
@@ -158,30 +80,12 @@ const Navbar = {
       $el.removeClass('navbar-transitioning');
     });
     $el.addClass(className);
-    if (isDynamic) {
-      $el.children('.navbar').each(subEl => {
-        $(subEl).trigger('navbar:hide');
-        app.emit('navbarHide', subEl);
-      });
-    } else {
-      $el.trigger('navbar:hide');
-      app.emit('navbarHide', $el[0]);
-    }
+    $el.trigger('navbar:hide');
+    app.emit('navbarHide', $el[0]);
   },
-  show(el, animate, hideOnlyCurrent) {
-    if (el === void 0) {
-      el = '.navbar-hidden';
-    }
-    if (animate === void 0) {
-      animate = true;
-    }
-    if (hideOnlyCurrent === void 0) {
-      hideOnlyCurrent = false;
-    }
+  show(el = '.navbar-hidden', animate = true) {
     const app = this;
-    let $el = $(el);
-    const isDynamic = $el.hasClass('navbar') && $el.parent('.navbars').length && !hideOnlyCurrent;
-    if (isDynamic) $el = $el.parents('.navbars');
+    const $el = $(el);
     if (!$el.length) return;
     if (!$el.hasClass('navbar-hidden')) return;
     if (animate) {
@@ -191,15 +95,8 @@ const Navbar = {
       });
     }
     $el.removeClass('navbar-hidden navbar-large-hidden navbar-hidden-statusbar');
-    if (isDynamic) {
-      $el.children('.navbar').each(subEl => {
-        $(subEl).trigger('navbar:show');
-        app.emit('navbarShow', subEl);
-      });
-    } else {
-      $el.trigger('navbar:show');
-      app.emit('navbarShow', $el[0]);
-    }
+    $el.trigger('navbar:show');
+    app.emit('navbarShow', $el[0]);
   },
   getElByPage(page) {
     let $pageEl;
@@ -235,16 +132,7 @@ const Navbar = {
   },
   collapseLargeTitle(navbarEl) {
     const app = this;
-    let $navbarEl = $(navbarEl);
-    if ($navbarEl.hasClass('navbars')) {
-      $navbarEl = $navbarEl.find('.navbar');
-      if ($navbarEl.length > 1) {
-        $navbarEl = $(navbarEl).find('.navbar-large.navbar-current');
-      }
-      if ($navbarEl.length > 1 || !$navbarEl.length) {
-        return;
-      }
-    }
+    const $navbarEl = $(navbarEl);
     const $pageEl = $(app.navbar.getPageByEl($navbarEl));
     $navbarEl.addClass('navbar-large-collapsed');
     $pageEl.eq(0).addClass('page-with-navbar-large-collapsed').trigger('page:navbarlargecollapsed');
@@ -254,16 +142,7 @@ const Navbar = {
   },
   expandLargeTitle(navbarEl) {
     const app = this;
-    let $navbarEl = $(navbarEl);
-    if ($navbarEl.hasClass('navbars')) {
-      $navbarEl = $navbarEl.find('.navbar-large');
-      if ($navbarEl.length > 1) {
-        $navbarEl = $(navbarEl).find('.navbar-large.navbar-current');
-      }
-      if ($navbarEl.length > 1 || !$navbarEl.length) {
-        return;
-      }
-    }
+    const $navbarEl = $(navbarEl);
     const $pageEl = $(app.navbar.getPageByEl($navbarEl));
     $navbarEl.removeClass('navbar-large-collapsed');
     $pageEl.eq(0).removeClass('page-with-navbar-large-collapsed').trigger('page:navbarlargeexpanded');
@@ -273,16 +152,7 @@ const Navbar = {
   },
   toggleLargeTitle(navbarEl) {
     const app = this;
-    let $navbarEl = $(navbarEl);
-    if ($navbarEl.hasClass('navbars')) {
-      $navbarEl = $navbarEl.find('.navbar-large');
-      if ($navbarEl.length > 1) {
-        $navbarEl = $(navbarEl).find('.navbar-large.navbar-current');
-      }
-      if ($navbarEl.length > 1 || !$navbarEl.length) {
-        return;
-      }
-    }
+    const $navbarEl = $(navbarEl);
     if ($navbarEl.hasClass('navbar-large-collapsed')) {
       app.navbar.expandLargeTitle($navbarEl);
     } else {
@@ -360,7 +230,7 @@ const Navbar = {
       }
     }
     function handleNavbarTransparent() {
-      const isHidden = $navbarEl.hasClass('navbar-hidden') || $navbarEl.parent('.navbars').hasClass('navbar-hidden');
+      const isHidden = $navbarEl.hasClass('navbar-hidden');
       const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
       if (inSearchbarExpanded || isHidden) return;
       if (!navbarOffsetHeight) {
@@ -408,7 +278,7 @@ const Navbar = {
     let previousCollapseProgress = null;
     let collapseProgress = null;
     function handleLargeNavbarCollapse(pageContentEl) {
-      const isHidden = $navbarEl.hasClass('navbar-hidden') || $navbarEl.parent('.navbars').hasClass('navbar-hidden');
+      const isHidden = $navbarEl.hasClass('navbar-hidden');
       if (isHidden) return;
       const isLargeTransparent = $navbarEl.hasClass('navbar-large-transparent') || $navbarEl.hasClass('navbar-large') && $navbarEl.hasClass('navbar-transparent');
       previousCollapseProgress = collapseProgress;
@@ -431,10 +301,12 @@ const Navbar = {
         $navbarEl.find('.title').css('opacity', '');
         $navbarEl.find('.title-large-text, .subnavbar').css('transform', '');
         $navbarEl.find('.title-large-text').css('opacity', '');
-        if (isLargeTransparent) {
-          $bgEl.css('opacity', '');
+        if (app.theme === 'md') {
+          if (isLargeTransparent) {
+            $bgEl.css('opacity', '');
+          }
+          $bgEl.css('transform', '');
         }
-        $bgEl.css('transform', '');
       } else if (collapseProgress > 0 && collapseProgress < 1) {
         if (app.theme === 'md') {
           $navbarEl.find('.navbar-inner').css('overflow', 'visible');
@@ -442,10 +314,12 @@ const Navbar = {
         $navbarEl.find('.title').css('opacity', -0.5 + collapseProgress * 1.5);
         $navbarEl.find('.title-large-text, .subnavbar').css('transform', `translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`);
         $navbarEl.find('.title-large-text').css('opacity', 1 - collapseProgress * 2);
-        if (isLargeTransparent) {
-          $bgEl.css('opacity', collapseProgress);
+        if (app.theme === 'md') {
+          if (isLargeTransparent) {
+            $bgEl.css('opacity', collapseProgress);
+          }
+          $bgEl.css('transform', `translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`);
         }
-        $bgEl.css('transform', `translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`);
       }
       if (snapPageScrollToLargeTitle) {
         if (!support.touch) {
@@ -469,7 +343,7 @@ const Navbar = {
       scrollHeight = scrollContent.scrollHeight;
       offsetHeight = scrollContent.offsetHeight;
       reachEnd = currentScrollTop + offsetHeight >= scrollHeight;
-      navbarHidden = $navbarEl.hasClass('navbar-hidden') || $navbarEl.parent('.navbars').hasClass('navbar-hidden');
+      navbarHidden = $navbarEl.hasClass('navbar-hidden');
       if (reachEnd) {
         if (app.params.navbar.showOnPageScrollEnd) {
           action = 'show';
@@ -585,24 +459,6 @@ export default {
         page.$el[0].f7DetachNavbarScrollHandlers();
       }
     },
-    pageBeforeIn(page) {
-      const app = this;
-      if (app.theme !== 'ios') return;
-      let $navbarsEl;
-      const view = page.$el.parents('.view')[0].f7View;
-      const navbarEl = app.navbar.getElByPage(page);
-      if (!navbarEl) {
-        $navbarsEl = page.$el.parents('.view').children('.navbars');
-      } else {
-        $navbarsEl = $(navbarEl).parents('.navbars');
-      }
-      if (page.$el.hasClass('no-navbar') || view.router.dynamicNavbar && !navbarEl) {
-        const animate = !!(page.pageFrom && page.router.history.length > 0);
-        app.navbar.hide($navbarsEl, animate);
-      } else {
-        app.navbar.show($navbarsEl);
-      }
-    },
     pageReinit(page) {
       const app = this;
       const $navbarEl = $(app.navbar.getElByPage(page));
@@ -648,13 +504,13 @@ export default {
     },
     'panelOpen panelSwipeOpen modalOpen': function onPanelModalOpen(instance) {
       const app = this;
-      instance.$el.find('.navbar:not(.navbar-previous)').each(navbarEl => {
+      instance.$el.find('.navbar').each(navbarEl => {
         app.navbar.size(navbarEl);
       });
     },
     tabShow(tabEl) {
       const app = this;
-      $(tabEl).find('.navbar:not(.navbar-previous)').each(navbarEl => {
+      $(tabEl).find('.navbar').each(navbarEl => {
         app.navbar.size(navbarEl);
       });
     }
@@ -670,7 +526,6 @@ export default {
 
       // Find active page
       const $navbarEl = $clickedEl.parents('.navbar');
-      const $navbarsEl = $navbarEl.parents('.navbars');
 
       // Static Layout
       $pageContentEl = $navbarEl.parents('.page-content');
@@ -679,18 +534,6 @@ export default {
         if ($navbarEl.parents('.page').length > 0) {
           $pageContentEl = $navbarEl.parents('.page').find('.page-content');
         }
-        // Through Layout iOS
-        if ($pageContentEl.length === 0 && $navbarsEl.length) {
-          if ($navbarsEl.nextAll('.page-current').length > 0) {
-            $pageContentEl = $navbarsEl.nextAll('.page-current').find('.page-content');
-          }
-        }
-        // Through Layout
-        if ($pageContentEl.length === 0) {
-          if ($navbarEl.nextAll('.page-current').length > 0) {
-            $pageContentEl = $navbarEl.nextAll('.page-current').find('.page-content');
-          }
-        }
       }
       if ($pageContentEl && $pageContentEl.length > 0) {
         // Check for tab

package/components/navbar/navbar.less

@@ -23,7 +23,6 @@
   backface-visibility: hidden;
   box-sizing: border-box;
   margin: 0;
-  // transform: translate3d(0,0,0);
   height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
   color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
   font-size: var(--f7-navbar-font-size);
@@ -37,8 +36,6 @@
   a.link {
     display: flex;
     justify-content: flex-start;
-    line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
-    height: var(--f7-navbar-link-height, var(--f7-navbar-height));
   }
   .title,
   .left,
@@ -78,7 +75,7 @@
   .right {
     flex-shrink: 0;
     display: flex;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: center;
     // transform: translate3d(0,0,0);
   }
@@ -112,18 +109,8 @@
   height: 100%;
   pointer-events: none;
   z-index: 0;
-  background: var(--f7-navbar-bg-color);
-  background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
+
   transition-property: transform;
-  .ios-translucent-bars(var(--f7-navbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
-  &:after,
-  &:before {
-    backface-visibility: hidden;
-  }
-  .hairline(bottom, var(--f7-navbar-border-color, var(--f7-bars-border-color)));
-  &:after {
-    z-index: 1;
-  }
 }
 // Transitions
 .navbar-transitioning {
@@ -138,13 +125,7 @@
     transition-duration: var(--f7-navbar-hide-show-transition-duration);
   }
 }
-.navbar-page-transitioning {
-  transition-duration: var(--f7-page-swipeback-transition-duration) !important;
-  .title-large-text,
-  .navbar-bg {
-    transition-duration: var(--f7-page-swipeback-transition-duration) !important;
-  }
-}
+
 // Hidden
 .navbar-hidden {
   transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
@@ -183,50 +164,12 @@
 }
 .views,
 .view,
-.page,
-.navbars {
+.page {
   > .navbar {
     position: absolute;
   }
 }
 
-// Transparent navbar
-.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(
-    .with-searchbar-expandable-enabled
-  ) {
-  .navbar-bg,
-  .title {
-    opacity: 0;
-  }
-}
-
-// Large Title Navbar
-.navbar-large .navbar-bg {
-  height: calc(100% + var(--f7-navbar-large-title-height));
-  transform: translate3d(
-    0px,
-    calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),
-    0
-  );
-}
-
-.navbar-large-transparent .navbar-bg,
-.navbar-large.navbar-transparent .navbar-bg {
-  opacity: var(--f7-navbar-large-collapse-progress);
-}
-.ios .router-navbar-transition-to-large .navbar-bg,
-.ios .router-navbar-transition-from-large .navbar-bg,
-.navbar-bg.ios-swipeback-navbar-bg-large,
-.navbar-large-transparent .navbar-bg.ios-swipeback-navbar-bg-large,
-.navbar-large.navbar-transparent .navbar-bg.ios-swipeback-navbar-bg-large {
-  height: calc(100% + var(--f7-navbar-large-title-height));
-  transform: translate3d(
-    0px,
-    calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),
-    0
-  );
-}
-
 .ios .navbar:not(.navbar-large) .navbar-bg {
   --f7-navbar-large-collapse-progress: 1;
 }
@@ -238,6 +181,9 @@
   .title-large {
     pointer-events: none;
   }
+  .title-large-text {
+    opacity: 0;
+  }
 }
 .navbar .title-large {
   box-sizing: border-box;
@@ -247,7 +193,6 @@
   top: 100%;
   display: flex;
   white-space: nowrap;
-  overflow: hidden;
   height: var(--f7-navbar-large-title-height);
   z-index: 5;
 }
@@ -285,14 +230,11 @@
 }
 
 // Relation with page
-.navbar ~ *,
-.navbars ~ * {
+.navbar ~ * {
   --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
 }
 .navbar ~ * .page-with-navbar-large,
 .navbar ~ .page-with-navbar-large,
-.navbars ~ * .page-with-navbar-large,
-.navbars ~ .page-with-navbar-large,
 .page-with-navbar-large .navbar ~ * {
   --f7-page-navbar-offset: calc(
     var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top)

package/components/notification/notification-class.js

@@ -190,19 +190,19 @@ class Notification extends Modal {
     } = notification.params;
     return $jsx("div", {
       class: `notification ${icon ? 'notification-with-icon' : ''} ${cssClass || ''}`
-    }, $jsx("div", {
-      class: "notification-header"
     }, icon && $jsx("div", {
       class: "notification-icon"
-    }, icon), title && $jsx("div", {
+    }, icon), $jsx("div", {
+      class: "notification-content"
+    }, (title || titleRightText || closeButton) && $jsx("div", {
+      class: "notification-header"
+    }, title && $jsx("div", {
       class: "notification-title"
     }, title), titleRightText && $jsx("div", {
       class: "notification-title-right-text"
     }, titleRightText), closeButton && $jsx("span", {
       class: "notification-close-button"
-    })), $jsx("div", {
-      class: "notification-content"
-    }, subtitle && $jsx("div", {
+    })), subtitle && $jsx("div", {
       class: "notification-subtitle"
     }, subtitle), text && $jsx("div", {
       class: "notification-text"

package/components/notification/notification-ios.less

@@ -2,6 +2,8 @@
   .notification {
     transition-duration: 450ms;
     transform: translate3d(0%, -200%, 0);
+    align-items: center;
+
     &.modal-in {
       transform: translate3d(0%, 0%, 0);
       opacity: 1;
@@ -11,17 +13,10 @@
     }
   }
 
-  .notification-icon {
-    margin-right: 8px;
-  }
-  .notification-header + .notification-content {
-    margin-top: 10px;
-  }
   .notification-title-right-text {
-    margin-right: 6px;
     margin-left: auto;
     + .notification-close-button {
-      margin-left: 10px;
+      margin-left: 12px;
     }
   }
   .notification-close-button {

package/components/notification/notification-md.less

@@ -16,27 +16,8 @@
       transform: translate3d(0, -150%, 0);
     }
   }
-  .notification-with-icon {
-    .notification-icon {
-      position: absolute;
-      left: var(--f7-notification-padding-horizontal);
-      top: var(--f7-notification-padding-vertical);
-    }
-    .notification-content,
-    .notification-header {
-      margin-left: calc(var(--f7-notification-icon-size) + 16px);
-    }
-  }
 
-  .notification-icon {
-    margin-right: 8px;
-  }
-  .notification-subtitle {
-    + .notification-text {
-      margin-top: 4px;
-    }
-  }
-  .notification-header + .notification-content {
+  .notification-header + :is(.notification-subtitle, .notification-text) {
     margin-top: 8px;
   }
   .notification-title-right-text {