@xenknight/framework7 0.0.8 → 0.0.10

package/components/navbar-new/navbar-ios.less

@@ -1,135 +1,135 @@
-.ios {
-  --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-new-inner-padding-left));
-  --f7-navbarTitleLargeOffset: var(--f7-navbar-new-large-title-padding-left);
-  .navbar-new {
-    .title-large {
-      align-items: flex-end;
-    }
-
-    a.link {
-      height: 100%;
-      padding: 0 12px;
-    }
-    a.icon-only {
-      width: 44px;
-      margin: 0;
-      justify-content: center;
-    }
-    .left,
-    .right {
-      a + a {
-        .ltr({
-          margin-left: 16px;
-        });
-        .rtl({
-          margin-right: 16px;
-        });
-      }
-    }
-    b {
-      font-weight: 600;
-    }
-    .left {
-      .ltr({
-        margin-right: 10px;
-      });
-      .rtl({
-        margin-left: 10px;
-      });
-    }
-    .right {
-      .ltr({
-        margin-left: 10px;
-      });
-      .rtl({
-        margin-right: 10px;
-      });
-    }
-    .right:first-child {
-      .ltr({
-        right: calc(8px + var(--f7-safe-area-right));
-      });
-      .rtl({
-        left: calc(8px + var(--f7-safe-area-left));
-      });
-    }
-  }
-  .navbar-new-bg {
-    height: 100%;
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      backdrop-filter: blur(2px);
-      mask-image: linear-gradient(
-        to bottom,
-        black calc(50% + var(--f7-safe-area-top, 0px)),
-        transparent 100%
-      );
-    }
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-image: linear-gradient(
-        to bottom,
-        var(--f7-navbar-new-bars-bg-color) var(--f7-safe-area-top, 0px),
-        transparent 100%
-      );
-    }
-  }
-  .navbar-new .navbar-new-inner {
-    justify-content: space-between;
-    padding-top: calc(16px + var(--f7-safe-area-top));
-    padding-bottom: 16px;
-  }
-  .navbar-new {
-    .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-new .navbar-new-inner-left-title {
-    justify-content: flex-start;
-    .right {
-      .ltr({
-        margin-left: auto;
-      });
-      .rtl({
-        margin-right: auto;
-      });
-    }
-    .title {
-      text-align: left;
-      .ltr({
-        margin-right: 10px;
-      });
-      .rtl({
-        margin-left: 10px;
-      });
-    }
-  }
-  // Transparent navbar
-  .navbar-new-transparent:not(.navbar-new-large):not(.navbar-new-transparent-visible):not(
-      .with-searchbar-expandable-enabled
-    ) {
-    .title {
-      opacity: 0;
-    }
-  }
-}
-
-.view-master-detail {
-  .page-master {
-    z-index: 525;
-  }
-}
+.ios {
+  --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-new-inner-padding-left));
+  --f7-navbarTitleLargeOffset: var(--f7-navbar-new-large-title-padding-left);
+  .navbar-new {
+    .title-large {
+      align-items: flex-end;
+    }
+
+    a.link {
+      height: 100%;
+      padding: 0 12px;
+    }
+    a.icon-only {
+      width: 44px;
+      margin: 0;
+      justify-content: center;
+    }
+    .left,
+    .right {
+      a + a {
+        .ltr({
+          margin-left: 16px;
+        });
+        .rtl({
+          margin-right: 16px;
+        });
+      }
+    }
+    b {
+      font-weight: 600;
+    }
+    .left {
+      .ltr({
+        margin-right: 10px;
+      });
+      .rtl({
+        margin-left: 10px;
+      });
+    }
+    .right {
+      .ltr({
+        margin-left: 10px;
+      });
+      .rtl({
+        margin-right: 10px;
+      });
+    }
+    .right:first-child {
+      .ltr({
+        right: calc(8px + var(--f7-safe-area-right));
+      });
+      .rtl({
+        left: calc(8px + var(--f7-safe-area-left));
+      });
+    }
+  }
+  .navbar-new-bg {
+    height: 100%;
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      backdrop-filter: blur(2px);
+      mask-image: linear-gradient(
+        to bottom,
+        black calc(50% + var(--f7-safe-area-top, 0px)),
+        transparent 100%
+      );
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-image: linear-gradient(
+        to bottom,
+        var(--f7-navbar-new-bars-bg-color) var(--f7-safe-area-top, 0px),
+        transparent 100%
+      );
+    }
+  }
+  .navbar-new .navbar-new-inner {
+    justify-content: space-between;
+    padding-top: calc(16px + var(--f7-safe-area-top));
+    padding-bottom: 16px;
+  }
+  .navbar-new {
+    .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-new .navbar-new-inner-left-title {
+    justify-content: flex-start;
+    .right {
+      .ltr({
+        margin-left: auto;
+      });
+      .rtl({
+        margin-right: auto;
+      });
+    }
+    .title {
+      text-align: left;
+      .ltr({
+        margin-right: 10px;
+      });
+      .rtl({
+        margin-left: 10px;
+      });
+    }
+  }
+  // Transparent navbar
+  .navbar-new-transparent:not(.navbar-new-large):not(.navbar-new-transparent-visible):not(
+      .with-searchbar-expandable-enabled
+    ) {
+    .title {
+      opacity: 0;
+    }
+  }
+}
+
+.view-master-detail {
+  .page-master {
+    z-index: 525;
+  }
+}

package/components/navbar-new/navbar-md.less

@@ -1,105 +1,105 @@
-.md {
-  .navbar-new {
-    .title-large {
-      align-items: center;
-      overflow: hidden;
-    }
-    .left {
-      margin-left: 4px;
-      margin-right: 4px;
-    }
-    a.link {
-      padding: 0 12px;
-      min-width: 48px;
-      height: var(--f7-navbar-new-link-height, var(--f7-navbar-new-height));
-    }
-    a.icon-only {
-      min-width: 0;
-      flex-shrink: 0;
-      width: 48px;
-    }
-    .right {
-      .ltr({
-        margin-left: auto;
-        margin-right: 4px;
-      });
-      .rtl({
-        margin-left: 4px;
-        margin-right: auto;
-      });
-    }
-    .right:first-child {
-      .ltr({
-        right: var(--f7-safe-area-right)
-      });
-      .rtl({
-        left: var(--f7-safe-area-left)
-      });
-    }
-  }
-  .navbar-pane {
-    display: contents;
-  }
-  .navbar-new-bg {
-    background: var(--f7-navbar-new-bg-color);
-    background-color: var(--f7-navbar-new-bg-color, var(--f7-bars-bg-color));
-    &:after,
-    &:before {
-      backface-visibility: hidden;
-    }
-    .hairline(bottom, var(--f7-navbar-new-border-color, var(--f7-bars-border-color)));
-    &:after {
-      z-index: 1;
-    }
-  }
-  .navbar-new-inner {
-    justify-content: flex-start;
-    overflow: hidden;
-  }
-  .navbar-new-large:not(.navbar-new-large-collapsed) .navbar-new-inner {
-    overflow: visible;
-  }
-  .page.page-with-subnavbar .navbar-new-inner {
-    overflow: visible;
-  }
-  .navbar-new-inner:not(.navbar-new-inner-centered-title) .title:first-child {
-    margin-left: 16px;
-  }
-  .navbar-new-inner-centered-title {
-    justify-content: space-between;
-    .right {
-      .ltr({
-        margin-left: 0;
-      });
-      .rtl({
-        margin-right: 0;
-      });
-    }
-    .title {
-      text-align: center;
-    }
-  }
-  // Transparent navbar
-  .navbar-new-transparent:not(.navbar-new-large):not(.navbar-new-transparent-visible):not(
-      .with-searchbar-expandable-enabled
-    ) {
-    .navbar-new-bg,
-    .title {
-      opacity: 0;
-    }
-  }
-
-  // Large Title Navbar
-  .navbar-new-large .navbar-new-bg {
-    height: calc(100% + var(--f7-navbar-new-large-title-height));
-    transform: translate3d(
-      0px,
-      calc(-1 * var(--f7-navbar-new-large-collapse-progress) * var(--f7-navbar-new-large-title-height)),
-      0
-    );
-  }
-  .navbar-new-large-transparent .navbar-new-bg,
-  .navbar-new-large.navbar-new-transparent .navbar-new-bg {
-    opacity: var(--f7-navbar-new-large-collapse-progress);
-  }
-}
+.md {
+  .navbar-new {
+    .title-large {
+      align-items: center;
+      overflow: hidden;
+    }
+    .left {
+      margin-left: 4px;
+      margin-right: 4px;
+    }
+    a.link {
+      padding: 0 12px;
+      min-width: 48px;
+      height: var(--f7-navbar-new-link-height, var(--f7-navbar-new-height));
+    }
+    a.icon-only {
+      min-width: 0;
+      flex-shrink: 0;
+      width: 48px;
+    }
+    .right {
+      .ltr({
+        margin-left: auto;
+        margin-right: 4px;
+      });
+      .rtl({
+        margin-left: 4px;
+        margin-right: auto;
+      });
+    }
+    .right:first-child {
+      .ltr({
+        right: var(--f7-safe-area-right)
+      });
+      .rtl({
+        left: var(--f7-safe-area-left)
+      });
+    }
+  }
+  .navbar-pane {
+    display: contents;
+  }
+  .navbar-new-bg {
+    background: var(--f7-navbar-new-bg-color);
+    background-color: var(--f7-navbar-new-bg-color, var(--f7-bars-bg-color));
+    &:after,
+    &:before {
+      backface-visibility: hidden;
+    }
+    .hairline(bottom, var(--f7-navbar-new-border-color, var(--f7-bars-border-color)));
+    &:after {
+      z-index: 1;
+    }
+  }
+  .navbar-new-inner {
+    justify-content: flex-start;
+    overflow: hidden;
+  }
+  .navbar-new-large:not(.navbar-new-large-collapsed) .navbar-new-inner {
+    overflow: visible;
+  }
+  .page.page-with-subnavbar .navbar-new-inner {
+    overflow: visible;
+  }
+  .navbar-new-inner:not(.navbar-new-inner-centered-title) .title:first-child {
+    margin-left: 16px;
+  }
+  .navbar-new-inner-centered-title {
+    justify-content: space-between;
+    .right {
+      .ltr({
+        margin-left: 0;
+      });
+      .rtl({
+        margin-right: 0;
+      });
+    }
+    .title {
+      text-align: center;
+    }
+  }
+  // Transparent navbar
+  .navbar-new-transparent:not(.navbar-new-large):not(.navbar-new-transparent-visible):not(
+      .with-searchbar-expandable-enabled
+    ) {
+    .navbar-new-bg,
+    .title {
+      opacity: 0;
+    }
+  }
+
+  // Large Title Navbar
+  .navbar-new-large .navbar-new-bg {
+    height: calc(100% + var(--f7-navbar-new-large-title-height));
+    transform: translate3d(
+      0px,
+      calc(-1 * var(--f7-navbar-new-large-collapse-progress) * var(--f7-navbar-new-large-title-height)),
+      0
+    );
+  }
+  .navbar-new-large-transparent .navbar-new-bg,
+  .navbar-new-large.navbar-new-transparent .navbar-new-bg {
+    opacity: var(--f7-navbar-new-large-collapse-progress);
+  }
+}

package/components/navbar-new/navbar-vars.less

@@ -1,78 +1,78 @@
-:root {
-  /*
-  --f7-navbar-new-bg-color: var(--f7-bars-bg-color);
-  --f7-navbar-new-bg-color-rgb: var(--f7-bars-bg-color-rgb);
-  --f7-navbar-new-border-color: var(--f7-bars-border-color);
-  */
-
-  --f7-navbar-new-hide-show-transition-duration: 400ms;
-  --f7-navbar-new-title-line-height: 1.2;
-  --f7-navbar-new-subtitle-text-align: inherit;
-  --f7-navbar-new-large-title-line-height: 1.2;
-  --f7-navbar-new-large-title-text-color: inherit;
-  --f7-navbar-new-large-title-padding-left: 16px;
-  --f7-navbar-new-large-title-padding-right: 16px;
-}
-.ios-vars({
-  /*
-  --f7-navbar-new-link-color: var(--f7-bars-link-color);
-  --f7-navbar-new-text-color: var(--f7-bars-text-color);
-  */
-  --f7-navbar-new-link-color: var(--f7-bars-text-color);
-  --f7-navbar-new-height: 76px;
-  --f7-navbar-new-font-size: 17px;
-  --f7-navbar-new-title-font-size: inherit;
-  --f7-navbar-new-inner-padding-left: 16px;
-  --f7-navbar-new-inner-padding-right: 16px;
-  --f7-navbar-new-title-font-weight: 600;
-  --f7-navbar-new-title-margin-left: 0;
-  --f7-navbar-new-title-margin-right: 0;
-  --f7-navbar-new-title-text-align: center;
-  --f7-navbar-new-subtitle-font-size: 10px;
-  --f7-navbar-new-subtitle-line-height: 1;
-  --f7-navbar-new-large-title-height: 52px;
-  --f7-navbar-new-large-title-font-size: 34px;
-  --f7-navbar-new-large-title-font-weight: 700;
-  --f7-navbar-new-large-title-letter-spacing: -0.03em;
-  --f7-navbar-new-large-title-padding-vertical: 6px;
-  /*
-  --f7-navbar-new-link-height: var(--f7-navbar-new-height);
-  --f7-navbar-new-link-line-height: var(--f7-navbar-new-height);
-  */
-  .light-vars({
-    --f7-navbar-new-subtitle-text-color: rgba(0,0,0,0.55);
-    --f7-navbar-new-bars-bg-color: rgba(255, 255, 255, 0.5);
-  });
-  .dark-vars({
-    --f7-navbar-new-subtitle-text-color: rgba(255,255,255,0.55);
-    --f7-navbar-new-bars-bg-color: rgba(0, 0, 0, 0.5);
-  });
-});
-.md-vars({
-  --f7-navbar-new-height: 64px;
-  --f7-navbar-new-font-size: 16px;
-  --f7-navbar-new-title-font-size: 22px;
-  --f7-navbar-new-inner-padding-left: 0px;
-  --f7-navbar-new-inner-padding-right: 0px;
-  --f7-navbar-new-title-font-weight: 400;
-  --f7-navbar-new-title-margin-left: 0px;
-  --f7-navbar-new-title-margin-right: 16px;
-  --f7-navbar-new-title-text-align: left;
-  --f7-navbar-new-subtitle-font-size: 14px;
-  --f7-navbar-new-subtitle-line-height: 1.2;
-  --f7-navbar-new-large-title-font-size: 28px;
-  --f7-navbar-new-large-title-height: 88px;
-  --f7-navbar-new-large-title-font-weight: 400;
-  --f7-navbar-new-large-title-letter-spacing: 0;
-  --f7-navbar-new-large-title-padding-vertical: 8px;
-
-  --f7-navbar-new-link-height: 48px;
-  --f7-navbar-new-link-line-height: 48px;
-
-
-});
-.md-color-vars({
-  --f7-navbar-new-link-color: var(--f7-md-on-surface);
-  --f7-navbar-new-text-color: var(--f7-md-on-surface);
-  --f7-navbar-new-subtitle-text-color: var(--f7-md-on-surface-variant);
-});
+:root {
+  /*
+  --f7-navbar-new-bg-color: var(--f7-bars-bg-color);
+  --f7-navbar-new-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+  --f7-navbar-new-border-color: var(--f7-bars-border-color);
+  */
+
+  --f7-navbar-new-hide-show-transition-duration: 400ms;
+  --f7-navbar-new-title-line-height: 1.2;
+  --f7-navbar-new-subtitle-text-align: inherit;
+  --f7-navbar-new-large-title-line-height: 1.2;
+  --f7-navbar-new-large-title-text-color: inherit;
+  --f7-navbar-new-large-title-padding-left: 16px;
+  --f7-navbar-new-large-title-padding-right: 16px;
+}
+.ios-vars({
+  /*
+  --f7-navbar-new-link-color: var(--f7-bars-link-color);
+  --f7-navbar-new-text-color: var(--f7-bars-text-color);
+  */
+  --f7-navbar-new-link-color: var(--f7-bars-text-color);
+  --f7-navbar-new-height: 76px;
+  --f7-navbar-new-font-size: 17px;
+  --f7-navbar-new-title-font-size: inherit;
+  --f7-navbar-new-inner-padding-left: 16px;
+  --f7-navbar-new-inner-padding-right: 16px;
+  --f7-navbar-new-title-font-weight: 600;
+  --f7-navbar-new-title-margin-left: 0;
+  --f7-navbar-new-title-margin-right: 0;
+  --f7-navbar-new-title-text-align: center;
+  --f7-navbar-new-subtitle-font-size: 10px;
+  --f7-navbar-new-subtitle-line-height: 1;
+  --f7-navbar-new-large-title-height: 52px;
+  --f7-navbar-new-large-title-font-size: 34px;
+  --f7-navbar-new-large-title-font-weight: 700;
+  --f7-navbar-new-large-title-letter-spacing: -0.03em;
+  --f7-navbar-new-large-title-padding-vertical: 6px;
+  /*
+  --f7-navbar-new-link-height: var(--f7-navbar-new-height);
+  --f7-navbar-new-link-line-height: var(--f7-navbar-new-height);
+  */
+  .light-vars({
+    --f7-navbar-new-subtitle-text-color: rgba(0,0,0,0.55);
+    --f7-navbar-new-bars-bg-color: rgba(255, 255, 255, 0.5);
+  });
+  .dark-vars({
+    --f7-navbar-new-subtitle-text-color: rgba(255,255,255,0.55);
+    --f7-navbar-new-bars-bg-color: rgba(0, 0, 0, 0.5);
+  });
+});
+.md-vars({
+  --f7-navbar-new-height: 64px;
+  --f7-navbar-new-font-size: 16px;
+  --f7-navbar-new-title-font-size: 22px;
+  --f7-navbar-new-inner-padding-left: 0px;
+  --f7-navbar-new-inner-padding-right: 0px;
+  --f7-navbar-new-title-font-weight: 400;
+  --f7-navbar-new-title-margin-left: 0px;
+  --f7-navbar-new-title-margin-right: 16px;
+  --f7-navbar-new-title-text-align: left;
+  --f7-navbar-new-subtitle-font-size: 14px;
+  --f7-navbar-new-subtitle-line-height: 1.2;
+  --f7-navbar-new-large-title-font-size: 28px;
+  --f7-navbar-new-large-title-height: 88px;
+  --f7-navbar-new-large-title-font-weight: 400;
+  --f7-navbar-new-large-title-letter-spacing: 0;
+  --f7-navbar-new-large-title-padding-vertical: 8px;
+
+  --f7-navbar-new-link-height: 48px;
+  --f7-navbar-new-link-line-height: 48px;
+
+
+});
+.md-color-vars({
+  --f7-navbar-new-link-color: var(--f7-md-on-surface);
+  --f7-navbar-new-text-color: var(--f7-md-on-surface);
+  --f7-navbar-new-subtitle-text-color: var(--f7-md-on-surface-variant);
+});