framework7 8.3.3 → 9.0.0-beta.1

package/components/navbar/navbar-ios.less

@@ -5,7 +5,12 @@
     .title-large {
       align-items: flex-end;
     }
-    a.icon-only {
+
+    a.link {
+      height: 100%;
+      padding: 0 12px;
+    }
+    a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
       width: 44px;
       margin: 0;
       justify-content: center;
@@ -49,8 +54,45 @@
       });
     }
   }
+  .navbar-bg {
+    height: 100%;
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      backdrop-filter: blur(2px);
+      mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-image: linear-gradient(
+        to bottom,
+        var(--f7-navbar-bg-color, var(--f7-bars-bg-color)) 0%,
+        transparent 100%
+      );
+    }
+  }
   .navbar-inner {
     justify-content: space-between;
+    padding-top: calc(16px + var(--f7-safe-area-top));
+    padding-bottom: 16px;
+  }
+  .navbar {
+    .left,
+    .right,
+    .navbar-pane {
+      height: 100%;
+      .ios-glass();
+      border-radius: 64px;
+      min-width: 44px;
+    }
+  }
+  .navbar-pane {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   .navbar-inner-left-title {
     justify-content: flex-start;
@@ -72,684 +114,18 @@
       });
     }
   }
-
-  // Positions
-  .view-master-detail .navbar-previous:not(.navbar-master),
-  .view:not(.view-master-detail) .navbar-previous,
-  .navbar-next {
-    .left,
-    .title,
-    .right,
-    .subnavbar,
-    .fading {
-      opacity: 0;
-    }
-  }
-
-  .view-master-detail .navbar-previous:not(.navbar-master),
-  .view:not(.view-master-detail) .navbar-previous {
-    pointer-events: none;
-    .title-large {
-      opacity: 0;
-      transition-duration: 0ms;
-      .title-large-text {
-        transform: scale(0.5);
-        transition-duration: 0ms;
-      }
-    }
-    .subnavbar.sliding,
-    .sliding .subnavbar {
-      opacity: 1;
-      .ltr({
-        transform: translate3d(-100%, 0, 0);
-      });
-      .rtl({
-        transform: translate3d(100%, 0, 0);
-      });
-    }
-  }
-  .view:not(.view-master-detail) .navbar-previous,
-  .view-master-detail .navbar-previous:not(.navbar-master) {
-    .navbar-bg {
-      .ltr({
-        transform: translateX(-100%);
-      });
-      .rtl({
-        transform: translateX(-100%);
-      });
-    }
-  }
-  .navbar-next {
-    pointer-events: none;
-    .navbar-bg {
-      .ltr({
-        transform: translateX(100%);
-      });
-      .rtl({
-        transform: translateX(-100%);
-      });
-    }
-    .title-large {
-      .title-large-text {
-        transition-duration: 0ms;
-        .ltr({
-          transform: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
-        });
-        .rtl({
-          transform: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
-        });
-      }
-    }
-    .subnavbar.sliding,
-    .sliding .subnavbar {
-      opacity: 1;
-      .ltr({
-        transform: translate3d(100%, 0, 0);
-      });
-      .rtl({
-        transform: translate3d(-100%, 0, 0);
-      });
-    }
-  }
-
-  // Animations
-  .router-transition {
-    .navbar,
-    .navbar-bg {
-      transition-duration: var(--f7-page-transition-duration);
-    }
-    .navbar-bg {
-      animation-duration: var(--f7-page-transition-duration);
-      animation-fill-mode: forwards;
-    }
-    .title-large,
-    .title-large-text {
-      transition-duration: 0ms;
-    }
-    .navbar-current {
-      .left,
-      .title,
-      .right,
-      .subnavbar {
-        animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
-      }
-      .sliding.left,
-      .sliding.left .icon + span,
-      .sliding.title,
-      .sliding.right,
-      .sliding .left,
-      .sliding .left .icon + span,
-      .sliding .title,
-      .sliding .right {
-        transition-duration: var(--f7-page-transition-duration);
-        opacity: 0 !important;
-        animation: none;
-      }
-      .sliding .subnavbar,
-      .sliding.subnavbar {
-        transition-duration: var(--f7-page-transition-duration);
-        animation: none;
-        opacity: 1;
-      }
-    }
-  }
-  .router-transition-forward .navbar-next,
-  .router-transition-backward .navbar-previous {
-    .left,
-    .title,
-    .right,
-    .subnavbar {
-      animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
-    }
-    .sliding.left,
-    .sliding.left .icon + span,
-    .sliding.title,
-    .sliding.right,
-    .sliding .left,
-    .sliding .left .icon + span,
-    .sliding .title,
-    .sliding .right,
-    .sliding .subnavbar {
-      transition-duration: var(--f7-page-transition-duration);
-      animation: none;
-      transform: translate3d(0, 0, 0) !important;
-      opacity: 1 !important;
-    }
-  }
-  .router-transition-forward
-    .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible),
-  .router-transition-backward
-    .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) {
+  // Transparent navbar
+  .navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(
+      .with-searchbar-expandable-enabled
+    ) {
     .title {
-      animation: none;
-    }
-    .sliding.title,
-    .sliding .title {
-      opacity: 0 !important;
-    }
-  }
-  .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition,
-  .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled {
-    .left,
-    .title,
-    .right,
-    .subnavbar {
-      animation: none;
-    }
-  }
-  .router-transition-forward {
-    // CURRENT
-    .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large,
-    .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) {
-      .title-large {
-        overflow: visible;
-        .title-large-text {
-          animation:
-            ios-navbar-large-title-text-slide-up var(--f7-page-transition-duration) forwards,
-            ios-navbar-large-title-text-fade-out var(--f7-page-transition-duration) forwards;
-        }
-      }
-    }
-
-    // NEXT
-    .navbar-next.router-navbar-transition-from-large {
-      .left .back span {
-        animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
-        transition: none;
-        .ltr({
-          transform-origin: left center;
-        });
-        .rtl({
-          transform-origin: right center;
-        });
-      }
-    }
-    .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large {
-      .title-large {
-        overflow: visible;
-        .title-large-text {
-          animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration)
-            forwards;
-        }
-      }
-    }
-    .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) {
-      .title-large {
-        .title-large-text {
-          animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration)
-            forwards;
-        }
-      }
-    }
-    .navbar-next.navbar-large:not(.navbar-large-collapsed),
-    .navbar-current.navbar-large:not(.navbar-large-collapsed) {
-      .title {
-        animation: none;
-        opacity: 0 !important;
-        transition-duration: 0;
-      }
-    }
-  }
-
-  .router-transition-backward {
-    .navbar-current.router-navbar-transition-to-large .left .back span {
-      animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration)
-        forwards;
-      transition: none;
-      .ltr({
-        transform-origin: left center;
-      });
-      .rtl({
-        transform-origin: right center;
-      });
-    }
-    .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large {
-      .title-large {
-        overflow: visible;
-        .title-large-text {
-          animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration)
-            forwards;
-        }
-      }
-    }
-    .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) {
-      .title-large {
-        .title-large-text {
-          animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration)
-            forwards;
-        }
-      }
-    }
-    .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) {
-      .title-large {
-        opacity: 0;
-      }
-    }
-    .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large,
-    .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) {
-      .title-large {
-        overflow: visible;
-        opacity: 1;
-        .title-large-text {
-          animation:
-            ios-navbar-large-title-text-slide-down var(--f7-page-transition-duration) forwards,
-            ios-navbar-large-title-text-fade-in var(--f7-page-transition-duration) forwards;
-        }
-      }
-    }
-
-    .navbar-current.navbar-large:not(.navbar-large-collapsed),
-    .navbar-previous.navbar-large:not(.navbar-large-collapsed) {
-      .title {
-        animation: none;
-        opacity: 0 !important;
-        transition-duration: 0;
-      }
-    }
-  }
-  --f7-navbar-large-bg-center-top: translateX(0)
-    translateY(calc(-1 * var(--f7-navbar-large-title-height)));
-  --f7-navbar-large-bg-center-bottom: translateX(0) translateY(0);
-  .ltr({
-    --f7-navbar-large-bg-left-top: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
-    --f7-navbar-large-bg-left-bottom: translateX(-100%) translateY(0);
-    --f7-navbar-large-bg-right-top: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
-    --f7-navbar-large-bg-right-bottom: translateX(100%) translateY(0);
-  });
-  .rtl({
-    --f7-navbar-large-bg-left-top: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
-    --f7-navbar-large-bg-left-bottom: translateX(100%) translateY(0);
-    --f7-navbar-large-bg-right-top: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
-    --f7-navbar-large-bg-right-bottom: translateX(-100%) translateY(0);
-  });
-
-  .router-transition-forward {
-    .navbar-current {
-      .navbar-bg {
-        animation-name: ios-navbar-bg-from-cb-to-lb;
-      }
-      &.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
-        animation-name: ios-navbar-bg-from-cb-to-lb;
-      }
-      &.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
-        animation-name: ios-navbar-bg-from-cb-to-lt;
-      }
-      &:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
-        animation-name: ios-navbar-bg-from-ct-to-lb;
-      }
-      &.navbar-large-collapsed:not(.router-navbar-transition-to-large) .navbar-bg {
-        animation-name: ios-navbar-bg-from-ct-to-lt;
-      }
-    }
-    .navbar-next {
-      .navbar-bg {
-        animation-name: ios-navbar-bg-from-rb-to-cb;
-      }
-      &.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
-        animation-name: ios-navbar-bg-from-rb-to-cb;
-      }
-      &.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
-        animation-name: ios-navbar-bg-from-rb-to-ct;
-      }
-      &:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
-        animation-name: ios-navbar-bg-from-rt-to-cb;
-      }
-    }
-  }
-  .router-transition-backward {
-    .navbar-current {
-      .navbar-bg {
-        animation-name: ios-navbar-bg-from-cb-to-rb;
-      }
-      &:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
-        animation-name: ios-navbar-bg-from-ct-to-rb;
-      }
-      &.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
-        animation-name: ios-navbar-bg-from-cb-to-rt;
-      }
-      &.navbar-large-collapsed .navbar-bg {
-        animation-name: ios-navbar-bg-from-ct-to-rt;
-      }
-      &.navbar-large-collapsed.router-navbar-transition-to-large .navbar-bg {
-        animation-name: ios-navbar-bg-from-ct-to-rb;
-      }
-    }
-    .navbar-previous {
-      .navbar-bg {
-        animation-name: ios-navbar-bg-from-lb-to-cb;
-      }
-      &:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
-        animation-name: ios-navbar-bg-from-lt-to-cb;
-      }
-      &.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
-        animation-name: ios-navbar-bg-from-lb-to-ct;
-      }
-      &.navbar-large-collapsed .navbar-bg {
-        animation-name: ios-navbar-bg-from-lt-to-ct;
-      }
+      opacity: 0;
     }
   }
 }
 
 .view-master-detail {
-  .navbars {
-    z-index: auto;
-  }
   .page-master {
     z-index: 525;
   }
-  .navbar-master {
-    .navbar-inner,
-    .navbar-bg {
-      z-index: 550;
-    }
-  }
-  .navbar-master-detail {
-    .navbar-inner,
-    .navbar-bg {
-      z-index: 500;
-    }
-  }
-  .navbar-master.navbar-previous {
-    pointer-events: auto;
-    .left,
-    &:not(.navbar-large) .title,
-    .right,
-    .subnavbar {
-      opacity: 1;
-    }
-  }
-
-  &.router-transition .navbar-master {
-    .left,
-    .left .icon + span,
-    &:not(.navbar-large) .title,
-    .right,
-    .subnavbar,
-    .fading {
-      opacity: 1 !important;
-      transition-duration: 0ms;
-      transform: none !important;
-      animation: none !important;
-    }
-    .navbar-bg {
-      transition-duration: 0ms;
-      animation: none !important;
-    }
-    &.navbar-large {
-      .title {
-        opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
-        transition-duration: 0ms;
-        transform: none !important;
-        animation: none !important;
-      }
-      .title-large,
-      .title-large-text {
-        transition-duration: 0ms;
-        animation: none !important;
-      }
-    }
-    &.navbar-large-transparent,
-    &.navbar-large.navbar-transparent {
-      .navbar-bg {
-        height: 100% !important;
-        opacity: var(--f7-navbar-large-collapse-progress) !important;
-      }
-    }
-  }
-}
-@keyframes ios-navbar-element-fade-in {
-  0% {
-    opacity: 0;
-  }
-  25% {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes ios-navbar-element-fade-out {
-  from {
-    opacity: 1;
-  }
-  75% {
-    opacity: 0;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes ios-navbar-large-title-text-slide-up {
-  0% {
-    transform: translateX(0px) translateY(0%) scale(1);
-  }
-  100% {
-    .ltr({
-      transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical))) scale(0.5);
-    });
-    .rtl({
-      transform: translateX(calc(-1 * (var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset)))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical))) scale(0.5);
-    });
-  }
-}
-@keyframes ios-navbar-large-title-text-slide-down {
-  0% {
-    .ltr({
-      transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(0.5);
-    });
-    .rtl({
-      transform: translateX(calc(-1 * (var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset)))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(0.5);
-    });
-  }
-  100% {
-    transform: translateX(0px) translateY(0%) scale(1);
-  }
-}
-@keyframes ios-navbar-large-title-text-slide-left {
-  0% {
-    .ltr({
-      transform: translateX(100%);
-    });
-    .rtl({
-      transform: translateX(-100%);
-    });
-  }
-  100% {
-    transform: translateX(0%);
-  }
-}
-@keyframes ios-navbar-large-title-text-slide-right {
-  0% {
-    transform: translateX(0%);
-  }
-  100% {
-    .ltr({
-      transform: translateX(100%);
-    });
-    .rtl({
-      transform: translateX(-100%);
-    });
-  }
-}
-
-@keyframes ios-navbar-large-title-text-fade-out {
-  0% {
-    opacity: 1;
-  }
-  80% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@keyframes ios-navbar-large-title-text-fade-in {
-  0% {
-    opacity: 0;
-  }
-  20% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes ios-navbar-back-text-current-to-previous {
-  0% {
-    opacity: 1;
-    transform: translateY(0px) translateX(0px) scale(1);
-  }
-  80% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-    .ltr({
-      transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc(1 * var(--f7-navbar-large-title-height) - var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
-    });
-    .rtl({
-      transform: translateX(calc(-1 * (var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset)))) translateY(calc(1 * var(--f7-navbar-large-title-height) - var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
-    });
-  }
-}
-@keyframes ios-navbar-back-text-next-to-current {
-  0% {
-    opacity: 0;
-    .ltr({
-      transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc(1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
-    });
-    .rtl({
-      transform: translateX(calc(-1 * (var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset)))) translateY(calc(1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
-    });
-  }
-  20% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0px) translateY(0px) scale(1);
-  }
-}
-
-@keyframes ios-navbar-bg-from-cb-to-lb {
-  from {
-    transform: var(--f7-navbar-large-bg-center-bottom);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-left-bottom);
-  }
-}
-@keyframes ios-navbar-bg-from-cb-to-lt {
-  from {
-    transform: var(--f7-navbar-large-bg-center-bottom);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-left-top);
-  }
-}
-@keyframes ios-navbar-bg-from-ct-to-lb {
-  from {
-    transform: var(--f7-navbar-large-bg-center-top);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-left-bottom);
-  }
-}
-@keyframes ios-navbar-bg-from-ct-to-lt {
-  from {
-    transform: var(--f7-navbar-large-bg-center-top);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-left-top);
-  }
-}
-@keyframes ios-navbar-bg-from-rb-to-cb {
-  from {
-    transform: var(--f7-navbar-large-bg-right-bottom);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-center-bottom);
-  }
-}
-@keyframes ios-navbar-bg-from-rb-to-ct {
-  from {
-    transform: var(--f7-navbar-large-bg-right-bottom);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-center-top);
-  }
-}
-@keyframes ios-navbar-bg-from-rt-to-cb {
-  from {
-    transform: var(--f7-navbar-large-bg-right-top);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-center-bottom);
-  }
-}
-@keyframes ios-navbar-bg-from-cb-to-rb {
-  from {
-    transform: var(--f7-navbar-large-bg-center-bottom);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-right-bottom);
-  }
-}
-@keyframes ios-navbar-bg-from-ct-to-rb {
-  from {
-    transform: var(--f7-navbar-large-bg-center-top);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-right-bottom);
-  }
-}
-@keyframes ios-navbar-bg-from-cb-to-rt {
-  from {
-    transform: var(--f7-navbar-large-bg-center-bottom);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-right-top);
-  }
-}
-@keyframes ios-navbar-bg-from-ct-to-rt {
-  from {
-    transform: var(--f7-navbar-large-bg-center-top);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-right-top);
-  }
-}
-@keyframes ios-navbar-bg-from-lb-to-cb {
-  from {
-    transform: var(--f7-navbar-large-bg-left-bottom);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-center-bottom);
-  }
-}
-@keyframes ios-navbar-bg-from-lt-to-cb {
-  from {
-    transform: var(--f7-navbar-large-bg-left-top);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-center-bottom);
-  }
-}
-@keyframes ios-navbar-bg-from-lb-to-ct {
-  from {
-    transform: var(--f7-navbar-large-bg-left-bottom);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-center-top);
-  }
-}
-@keyframes ios-navbar-bg-from-lt-to-ct {
-  from {
-    transform: var(--f7-navbar-large-bg-left-top);
-  }
-  to {
-    transform: var(--f7-navbar-large-bg-center-top);
-  }
 }