@xenknight/framework7 0.0.7 → 0.0.9

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

@@ -1,193 +1,193 @@
-.ios {
-  .toolbar-new-pane {
-    user-select: none;
-  }
-  .toolbar-new-pane,
-  .toolbar-new .left,
-  .toolbar-new .right {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    position: relative;
-    z-index: 1;
-    border-radius: 32px;
-    .ios-glass();
-  }
-  .toolbar-new {
-    .left {
-      margin-right: auto;
-    }
-    .right {
-      margin-left: auto;
-    }
-    .left:empty,
-    .right:empty {
-      display: none;
-    }
-
-    a.icon-only {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin: 0;
-      min-width: 48px;
-      min-height: 48px;
-      padding: 0;
-    }
-    .link {
-      padding: 0 12px;
-      height: 100%;
-    }
-    &:before,
-    &:after {
-      pointer-events: none;
-      content: '';
-      position: absolute;
-      inset: 0;
-    }
-    &:before {
-      backdrop-filter: blur(2px);
-      mask-image: linear-gradient(
-        to top,
-        black calc(50% + var(--f7-safe-area-bottom, 0px)),
-        transparent 100%
-      );
-    }
-    &:after {
-      background-image: linear-gradient(
-        to top,
-        var(--f7-toolbar-new-bars-bg-color) var(--f7-safe-area-bottom, 0px),
-        transparent 100%
-      );
-    }
-    &.toolbar-new-bottom,
-    &.messagebar {
-      &:before,
-      &:after {
-        top: -16px;
-      }
-      .toolbar-new-inner {
-        padding-bottom: 16px;
-      }
-    }
-    &.toolbar-new-top,
-    &:not(.toolbar-new-bottom, .toolbar-new-top, .messagebar) {
-      &:before {
-        mask-image: linear-gradient(
-          to bottom,
-          black calc(50% + var(--f7-safe-area-top, 0px)),
-          transparent 100%
-        );
-      }
-      &:after {
-        background-image: linear-gradient(
-          to bottom,
-          var(--f7-toolbar-new-bars-bg-color) var(--f7-safe-area-top, 0px),
-          transparent 100%
-        );
-      }
-      &:before,
-      &:after {
-        bottom: -16px;
-      }
-      .toolbar-new-inner {
-        padding-top: 16px;
-      }
-    }
-  }
-  .navbar-new ~ .toolbar-new-top {
-    &:before,
-    &:after {
-      display: none;
-    }
-  }
-  .toolbar-new-inner {
-    justify-content: center;
-    overflow: visible;
-    gap: 16px;
-  }
-  .tabbar-new-scrollable .toolbar-new-pane {
-    .scrollable();
-    .no-scrollbar();
-    justify-content: flex-start;
-  }
-  .tabbar-new:not(.tabbar-new-scrollable) {
-    touch-action: none;
-  }
-  .tabbar-new-icons {
-    .tab-link,
-    .link {
-      padding-top: 4px;
-      padding-bottom: 4px;
-      i + span {
-        margin: 0;
-        margin-top: 4px;
-      }
-    }
-  }
-  @media (max-width: 767px) {
-    .tabbar-new .toolbar-new-pane {
-      width: 100%;
-    }
-  }
-  @media (min-width: 768px) {
-    .tabbar-new .tab-link {
-      padding-left: 16px;
-      padding-right: 16px;
-      min-width: 96px;
-    }
-  }
-
-  // Scrollable
-  .tabbar-new-scrollable {
-    .toolbar-new-inner {
-      justify-content: flex-start;
-    }
-    .tab-link,
-    .link {
-      padding: 0 8px;
-    }
-  }
-  .tab-link-highlight {
-    position: absolute;
-    height: 100%;
-    top: 0;
-    transition-duration: 300ms;
-    border-radius: inherit;
-    .ltr({
-      left: 0;
-    });
-    .rtl({
-      right: 0;
-    });
-    &:before,
-    &:after {
-      content: '';
-      position: absolute;
-      inset: 4px;
-      border-radius: inherit;
-      transition-duration: 300ms;
-    }
-    &:before {
-      background-color: var(--f7-tabbar-new-link-highlight-bg-color);
-    }
-    &:after {
-      opacity: 0;
-      box-shadow: var(--f7-glass-shadow-thumb);
-      background-color: var(--f7-tabbar-new-link-highlight-active-bg-color);
-    }
-  }
-  .tab-link-highlight-pressed {
-    &:before {
-      opacity: 0;
-    }
-    &:after {
-      opacity: 1;
-    }
-    &:before,
-    &:after {
-      scale: 1.4;
-    }
-  }
-}
+.ios {
+  .toolbar-new-pane {
+    user-select: none;
+  }
+  .toolbar-new-pane,
+  .toolbar-new .left,
+  .toolbar-new .right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+    border-radius: 32px;
+    .ios-glass();
+  }
+  .toolbar-new {
+    .left {
+      margin-right: auto;
+    }
+    .right {
+      margin-left: auto;
+    }
+    .left:empty,
+    .right:empty {
+      display: none;
+    }
+
+    a.icon-only {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0;
+      min-width: 48px;
+      min-height: 48px;
+      padding: 0;
+    }
+    .link {
+      padding: 0 12px;
+      height: 100%;
+    }
+    &:before,
+    &:after {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+    &:before {
+      backdrop-filter: blur(2px);
+      mask-image: linear-gradient(
+        to top,
+        black calc(50% + var(--f7-safe-area-bottom, 0px)),
+        transparent 100%
+      );
+    }
+    &:after {
+      background-image: linear-gradient(
+        to top,
+        var(--f7-toolbar-new-bars-bg-color) var(--f7-safe-area-bottom, 0px),
+        transparent 100%
+      );
+    }
+    &.toolbar-new-bottom,
+    &.messagebar {
+      &:before,
+      &:after {
+        top: -16px;
+      }
+      .toolbar-new-inner {
+        padding-bottom: 16px;
+      }
+    }
+    &.toolbar-new-top,
+    &:not(.toolbar-new-bottom, .toolbar-new-top, .messagebar) {
+      &:before {
+        mask-image: linear-gradient(
+          to bottom,
+          black calc(50% + var(--f7-safe-area-top, 0px)),
+          transparent 100%
+        );
+      }
+      &:after {
+        background-image: linear-gradient(
+          to bottom,
+          var(--f7-toolbar-new-bars-bg-color) var(--f7-safe-area-top, 0px),
+          transparent 100%
+        );
+      }
+      &:before,
+      &:after {
+        bottom: -16px;
+      }
+      .toolbar-new-inner {
+        padding-top: 16px;
+      }
+    }
+  }
+  .navbar-new ~ .toolbar-new-top {
+    &:before,
+    &:after {
+      display: none;
+    }
+  }
+  .toolbar-new-inner {
+    justify-content: center;
+    overflow: visible;
+    gap: 16px;
+  }
+  .tabbar-new-scrollable .toolbar-new-pane {
+    .scrollable();
+    .no-scrollbar();
+    justify-content: flex-start;
+  }
+  .tabbar-new:not(.tabbar-new-scrollable) {
+    touch-action: none;
+  }
+  .tabbar-new-icons {
+    .tab-link,
+    .link {
+      padding-top: 4px;
+      padding-bottom: 4px;
+      i + span {
+        margin: 0;
+        margin-top: 4px;
+      }
+    }
+  }
+  @media (max-width: 767px) {
+    .tabbar-new .toolbar-new-pane {
+      width: 100%;
+    }
+  }
+  @media (min-width: 768px) {
+    .tabbar-new .tab-link {
+      padding-left: 16px;
+      padding-right: 16px;
+      min-width: 96px;
+    }
+  }
+
+  // Scrollable
+  .tabbar-new-scrollable {
+    .toolbar-new-inner {
+      justify-content: flex-start;
+    }
+    .tab-link,
+    .link {
+      padding: 0 8px;
+    }
+  }
+  .tab-link-highlight {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    transition-duration: 300ms;
+    border-radius: inherit;
+    .ltr({
+      left: 0;
+    });
+    .rtl({
+      right: 0;
+    });
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 4px;
+      border-radius: inherit;
+      transition-duration: 300ms;
+    }
+    &:before {
+      background-color: var(--f7-tabbar-new-link-highlight-bg-color);
+    }
+    &:after {
+      opacity: 0;
+      box-shadow: var(--f7-glass-shadow-thumb);
+      background-color: var(--f7-tabbar-new-link-highlight-active-bg-color);
+    }
+  }
+  .tab-link-highlight-pressed {
+    &:before {
+      opacity: 0;
+    }
+    &:after {
+      opacity: 1;
+    }
+    &:before,
+    &:after {
+      scale: 1.4;
+    }
+  }
+}

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

@@ -1,152 +1,152 @@
-.md {
-  .toolbar-new-pane {
-    display: contents;
-  }
-  .toolbar-new {
-    background-color: var(--f7-toolbar-new-bg-color, var(--f7-bars-bg-color));
-    .link {
-      justify-content: center;
-      padding: 0 12px;
-      min-width: 48px;
-      min-height: 48px;
-      line-height: var(--f7-toolbar-new-link-line-height, var(--f7-toolbar-new-height));
-      height: var(--f7-toolbar-new-link-height, var(--f7-toolbar-new-height));
-    }
-    a.icon-only {
-      min-width: 48px;
-      flex-shrink: 0;
-      padding: 0;
-    }
-  }
-  .toolbar-new-top,
-  .md .toolbar-new-top-md {
-    &.no-outline {
-      &:after {
-        display: none !important;
-      }
-    }
-    &.toolbar-new-hidden {
-      &:before {
-        display: none !important;
-      }
-    }
-    &:after,
-    &:before {
-      backface-visibility: hidden;
-    }
-    .hairline(bottom, var(--f7-toolbar-new-border-color, var(--f7-bars-border-color)));
-  }
-  .toolbar-new-bottom,
-  .md .toolbar-new-bottom-md {
-    &.no-outline {
-      &:before {
-        display: none !important;
-      }
-    }
-    &.toolbar-new-hidden {
-      &:after {
-        display: none !important;
-      }
-    }
-    .hairline(top, var(--f7-toolbar-new-border-color, var(--f7-bars-border-color)));
-  }
-  .toolbar-new-inner {
-    justify-content: space-between;
-    overflow: hidden;
-  }
-  .tabbar-new,
-  .tabbar-new-icons {
-    .tab-link,
-    .link {
-      padding-left: 0;
-      padding-right: 0;
-    }
-    a.icon-only {
-      flex-shrink: initial;
-    }
-    .tab-link {
-      transition-duration: 300ms;
-      overflow: hidden;
-      position: relative;
-    }
-    i.icon {
-      position: relative;
-      &::before {
-        content: '';
-        width: 64px;
-        height: 32px;
-        border-radius: 32px;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%) scaleX(0.5);
-        background: var(--f7-tabbar-new-link-active-icon-bg-color);
-        opacity: 0;
-        transition-duration: 200ms;
-        z-index: -1;
-      }
-      + .tabbar-new-label {
-        margin-top: 8px;
-      }
-    }
-    .tab-link-active i.icon::before {
-      opacity: 1;
-      transform: translateX(-50%) translateY(-50%) scaleX(1);
-    }
-  }
-
-  .tabbar-new-icons {
-    .tab-link,
-    .link {
-      padding-top: 8px;
-      padding-bottom: 8px;
-    }
-  }
-  .tabbar-new-label {
-    max-width: 100%;
-    overflow: hidden;
-    line-height: 1.2;
-  }
-
-  // Scrollable
-  .tabbar-new-scrollable {
-    .toolbar-new-inner {
-      overflow: auto;
-    }
-    .tab-link,
-    .link {
-      padding: 0 12px;
-    }
-  }
-  .toolbar-new-top-md,
-  .toolbar-new-top {
-    .tab-link-highlight {
-      bottom: 0;
-    }
-  }
-  .toolbar-new-bottom,
-  .toolbar-new-bottom-md {
-    .tab-link-highlight {
-      top: 0;
-    }
-  }
-  .tabbar-new,
-  .tabbar-new-icons {
-    &.tabbar-new-icons .tab-link-highlight {
-      display: none;
-    }
-    &:not(.tabbar-new-icons) .tab-link-highlight {
-      position: absolute;
-      height: 2px;
-      background: var(--f7-tabbar-new-link-active-border-color, var(--f7-theme-color));
-      transition-duration: 300ms;
-      .ltr({
-        left: 0;
-      });
-      .rtl({
-        right: 0;
-      });
-    }
-  }
-}
-
+.md {
+  .toolbar-new-pane {
+    display: contents;
+  }
+  .toolbar-new {
+    background-color: var(--f7-toolbar-new-bg-color, var(--f7-bars-bg-color));
+    .link {
+      justify-content: center;
+      padding: 0 12px;
+      min-width: 48px;
+      min-height: 48px;
+      line-height: var(--f7-toolbar-new-link-line-height, var(--f7-toolbar-new-height));
+      height: var(--f7-toolbar-new-link-height, var(--f7-toolbar-new-height));
+    }
+    a.icon-only {
+      min-width: 48px;
+      flex-shrink: 0;
+      padding: 0;
+    }
+  }
+  .toolbar-new-top,
+  .md .toolbar-new-top-md {
+    &.no-outline {
+      &:after {
+        display: none !important;
+      }
+    }
+    &.toolbar-new-hidden {
+      &:before {
+        display: none !important;
+      }
+    }
+    &:after,
+    &:before {
+      backface-visibility: hidden;
+    }
+    .hairline(bottom, var(--f7-toolbar-new-border-color, var(--f7-bars-border-color)));
+  }
+  .toolbar-new-bottom,
+  .md .toolbar-new-bottom-md {
+    &.no-outline {
+      &:before {
+        display: none !important;
+      }
+    }
+    &.toolbar-new-hidden {
+      &:after {
+        display: none !important;
+      }
+    }
+    .hairline(top, var(--f7-toolbar-new-border-color, var(--f7-bars-border-color)));
+  }
+  .toolbar-new-inner {
+    justify-content: space-between;
+    overflow: hidden;
+  }
+  .tabbar-new,
+  .tabbar-new-icons {
+    .tab-link,
+    .link {
+      padding-left: 0;
+      padding-right: 0;
+    }
+    a.icon-only {
+      flex-shrink: initial;
+    }
+    .tab-link {
+      transition-duration: 300ms;
+      overflow: hidden;
+      position: relative;
+    }
+    i.icon {
+      position: relative;
+      &::before {
+        content: '';
+        width: 64px;
+        height: 32px;
+        border-radius: 32px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%) scaleX(0.5);
+        background: var(--f7-tabbar-new-link-active-icon-bg-color);
+        opacity: 0;
+        transition-duration: 200ms;
+        z-index: -1;
+      }
+      + .tabbar-new-label {
+        margin-top: 8px;
+      }
+    }
+    .tab-link-active i.icon::before {
+      opacity: 1;
+      transform: translateX(-50%) translateY(-50%) scaleX(1);
+    }
+  }
+
+  .tabbar-new-icons {
+    .tab-link,
+    .link {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+  }
+  .tabbar-new-label {
+    max-width: 100%;
+    overflow: hidden;
+    line-height: 1.2;
+  }
+
+  // Scrollable
+  .tabbar-new-scrollable {
+    .toolbar-new-inner {
+      overflow: auto;
+    }
+    .tab-link,
+    .link {
+      padding: 0 12px;
+    }
+  }
+  .toolbar-new-top-md,
+  .toolbar-new-top {
+    .tab-link-highlight {
+      bottom: 0;
+    }
+  }
+  .toolbar-new-bottom,
+  .toolbar-new-bottom-md {
+    .tab-link-highlight {
+      top: 0;
+    }
+  }
+  .tabbar-new,
+  .tabbar-new-icons {
+    &.tabbar-new-icons .tab-link-highlight {
+      display: none;
+    }
+    &:not(.tabbar-new-icons) .tab-link-highlight {
+      position: absolute;
+      height: 2px;
+      background: var(--f7-tabbar-new-link-active-border-color, var(--f7-theme-color));
+      transition-duration: 300ms;
+      .ltr({
+        left: 0;
+      });
+      .rtl({
+        right: 0;
+      });
+    }
+  }
+}
+