@xenknight/framework7 0.0.8 → 0.0.10

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

@@ -1,131 +1,131 @@
-.ios {
-  .searchbar-new {
-    input[type='search'],
-    input[type='text'] {
-      z-index: 30;
-      .ios-glass-backdrop();
-      box-shadow: var(--f7-glass-shadow);
-    }
-    .input-clear-button {
-      z-index: 40;
-      .ltr({
-        right: 16px;
-      });
-      .rtl({
-        left: 16px;
-      });
-    }
-  }
-  .searchbar-new-icon {
-    width: 13px;
-    height: 13px;
-    position: absolute;
-    top: 50%;
-    margin-top: -6px;
-    z-index: 40;
-    &:after {
-      content: 'search_ios';
-      line-height: 13px;
-    }
-    .ltr({
-      left: 16px;
-    });
-    .rtl({
-      right: 16px;
-    });
-  }
-
-  .searchbar-new-disable-button {
-    font-size: 17px;
-    flex-shrink: 0;
-    transform: translate3d(0, 0, 0);
-    transition-duration: 300ms;
-    color: var(--f7-searchbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
-    display: none;
-    height: var(--f7-searchbar-new-height);
-    padding: 0 12px;
-
-    align-items: center;
-    justify-content: center;
-    border-radius: 44px;
-    background-color: var(--f7-searchbar-new-input-bg-color);
-    box-shadow: var(--f7-glass-shadow);
-    .ios-glass-backdrop();
-    transform: scale(0);
-    &.active-state {
-      transition-duration: 0ms;
-      opacity: 0.3 !important;
-    }
-  }
-  .searchbar-new-enabled {
-    .searchbar-new-disable-button {
-      pointer-events: auto;
-      opacity: 1;
-      transform: scale(1);
-      .ltr({ margin-left: 16px; });
-      .rtl({ margin-right: 16px; });
-    }
-  }
-  .searchbar-new:not(.searchbar-new-enabled) {
-    .searchbar-new-disable-button {
-      transition-duration: 300ms !important;
-    }
-  }
-  .searchbar-new-input-wrap {
-    border-radius: var(--f7-searchbar-new-input-border-radius);
-  }
-  .searchbar-new-expandable {
-    .ltr({ left: 0; });
-    .rtl({ right: 0; });
-    bottom: 0;
-    width: 100%;
-    height: var(--f7-searchbar-new-expandable-size);
-    transform: translate3d(0, 0, 0);
-    pointer-events: none;
-    .searchbar-new-disable-button {
-      .ltr({ margin-left: 16px; });
-      .rtl({ margin-right: 16px; });
-      opacity: 1;
-      display: flex;
-    }
-    .searchbar-new-inner {
-      left: 16px;
-      right: 16px;
-      width: auto;
-      height: var(--f7-searchbar-new-expandable-size);
-    }
-    .searchbar-new-input-wrap {
-      transform: scale(0);
-      transition-duration: 300ms;
-    }
-  }
-  .navbar-new.with-searchbar-new-expandable-enabled,
-  .navbar-new.with-searchbar-new-expandable-closing {
-    .navbar-new-bg {
-      transition-property: transform, opacity;
-    }
-    .navbar-new-bg,
-    .left,
-    .title,
-    .right {
-      transition-duration: 300ms;
-    }
-  }
-  .navbar-new.with-searchbar-new-expandable-enabled,
-  .navbar-new.with-searchbar-new-expandable-enabled-no-transition {
-    .left,
-    .title,
-    .right {
-      transform: translateY(calc(-1 * var(--f7-navbar-new-height)));
-      opacity: 0 !important;
-    }
-  }
-
-  .searchbar-new-expandable.searchbar-new-enabled {
-    height: var(--f7-searchbar-new-expandable-size);
-    pointer-events: auto;
-    .searchbar-new-input-wrap {
-      transform: scale(1);
-    }
-  }
-}
+.ios {
+  .searchbar-new {
+    input[type='search'],
+    input[type='text'] {
+      z-index: 30;
+      .ios-glass-backdrop();
+      box-shadow: var(--f7-glass-shadow);
+    }
+    .input-clear-button {
+      z-index: 40;
+      .ltr({
+        right: 16px;
+      });
+      .rtl({
+        left: 16px;
+      });
+    }
+  }
+  .searchbar-new-icon {
+    width: 13px;
+    height: 13px;
+    position: absolute;
+    top: 50%;
+    margin-top: -6px;
+    z-index: 40;
+    &:after {
+      content: 'search_ios';
+      line-height: 13px;
+    }
+    .ltr({
+      left: 16px;
+    });
+    .rtl({
+      right: 16px;
+    });
+  }
+
+  .searchbar-new-disable-button {
+    font-size: 17px;
+    flex-shrink: 0;
+    transform: translate3d(0, 0, 0);
+    transition-duration: 300ms;
+    color: var(--f7-searchbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+    display: none;
+    height: var(--f7-searchbar-new-height);
+    padding: 0 12px;
+
+    align-items: center;
+    justify-content: center;
+    border-radius: 44px;
+    background-color: var(--f7-searchbar-new-input-bg-color);
+    box-shadow: var(--f7-glass-shadow);
+    .ios-glass-backdrop();
+    transform: scale(0);
+    &.active-state {
+      transition-duration: 0ms;
+      opacity: 0.3 !important;
+    }
+  }
+  .searchbar-new-enabled {
+    .searchbar-new-disable-button {
+      pointer-events: auto;
+      opacity: 1;
+      transform: scale(1);
+      .ltr({ margin-left: 16px; });
+      .rtl({ margin-right: 16px; });
+    }
+  }
+  .searchbar-new:not(.searchbar-new-enabled) {
+    .searchbar-new-disable-button {
+      transition-duration: 300ms !important;
+    }
+  }
+  .searchbar-new-input-wrap {
+    border-radius: var(--f7-searchbar-new-input-border-radius);
+  }
+  .searchbar-new-expandable {
+    .ltr({ left: 0; });
+    .rtl({ right: 0; });
+    bottom: 0;
+    width: 100%;
+    height: var(--f7-searchbar-new-expandable-size);
+    transform: translate3d(0, 0, 0);
+    pointer-events: none;
+    .searchbar-new-disable-button {
+      .ltr({ margin-left: 16px; });
+      .rtl({ margin-right: 16px; });
+      opacity: 1;
+      display: flex;
+    }
+    .searchbar-new-inner {
+      left: 16px;
+      right: 16px;
+      width: auto;
+      height: var(--f7-searchbar-new-expandable-size);
+    }
+    .searchbar-new-input-wrap {
+      transform: scale(0);
+      transition-duration: 300ms;
+    }
+  }
+  .navbar-new.with-searchbar-new-expandable-enabled,
+  .navbar-new.with-searchbar-new-expandable-closing {
+    .navbar-new-bg {
+      transition-property: transform, opacity;
+    }
+    .navbar-new-bg,
+    .left,
+    .title,
+    .right {
+      transition-duration: 300ms;
+    }
+  }
+  .navbar-new.with-searchbar-new-expandable-enabled,
+  .navbar-new.with-searchbar-new-expandable-enabled-no-transition {
+    .left,
+    .title,
+    .right {
+      transform: translateY(calc(-1 * var(--f7-navbar-new-height)));
+      opacity: 0 !important;
+    }
+  }
+
+  .searchbar-new-expandable.searchbar-new-enabled {
+    height: var(--f7-searchbar-new-expandable-size);
+    pointer-events: auto;
+    .searchbar-new-input-wrap {
+      transform: scale(1);
+    }
+  }
+}

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

@@ -1,153 +1,154 @@
-.md {
-  .searchbar-new-icon,
-  .searchbar-new-disable-button {
-    position: absolute;
-
-    top: 50%;
-    transition-duration: 300ms;
-  }
-  .searchbar-new-disable-button {
-    .icon-close {
-      display: none;
-    }
-  }
-  .searchbar-new-icon {
-    width: 48px;
-    height: 48px;
-    left: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    &:after {
-      width: auto;
-      height: auto;
-      content: 'search_md';
-      line-height: 1.2;
-    }
-    .ltr({
-      left: var(--f7-safe-area-left);
-    });
-    .rtl({
-      right: var(--f7-safe-area-right);
-    });
-  }
-  .searchbar-new-disable-button {
-    width: 48px;
-    height: 48px;
-    transform: rotate(-90deg) scale(0.5);
-    font-size: 0 !important;
-    display: block;
-    margin-top: -24px;
-    color: var(--f7-searchbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
-    .ltr({
-      left: calc(var(--f7-searchbar-new-inner-padding-left) + var(--f7-safe-area-left));
-    });
-    .rtl({
-      right: calc(var(--f7-searchbar-new-inner-padding-right) + var(--f7-safe-area-right));
-    });
-
-    &:after {
-      .core-icons-font();
-      line-height: 48px;
-      .ltr({
-        content: 'arrow_left_md';
-      });
-      .rtl({
-        content: 'arrow_right_md';
-      });
-    }
-  }
-  .searchbar-new-enabled:not(.searchbar-new-enabled-no-disable-button) {
-    .searchbar-new-disable-button {
-      transform: rotate(0deg) scale(1);
-      pointer-events: auto;
-      opacity: 1;
-    }
-    .searchbar-new-icon {
-      opacity: 0;
-      transform: rotate(90deg) scale(0.5);
-    }
-  }
-  .searchbar-new {
-    --f7-searchbar-new-input-extra-padding-left: 34px;
-    .input-clear-button {
-      width: 48px;
-      height: 48px;
-      margin-top: -24px;
-      .ltr({ right: 0; });
-      .rtl({ left: 0; });
-
-      &:after {
-        line-height: 48px;
-        content: 'delete_round_md';
-        opacity: 1;
-      }
-      &:before {
-        display: none;
-      }
-    }
-  }
-  .searchbar-new-inline {
-    --f7-searchbar-new-input-extra-padding-left: 32px;
-  }
-
-  .page > .searchbar-new,
-  .subnavbar .searchbar-new,
-  .searchbar-new-expandable {
-    --f7-searchbar-new-input-extra-padding-left: 34px;
-    .searchbar-new-disable-button {
-      .ltr({
-        left: calc(var(--f7-searchbar-new-inner-padding-left) + var(--f7-safe-area-left));
-      });
-      .rtl({
-        right: calc(var(--f7-searchbar-new-inner-padding-right) + var(--f7-safe-area-right));
-      });
-    }
-    .searchbar-new-icon {
-      .ltr({
-        left: var(--f7-safe-area-left);
-      });
-      .rtl({
-        right: var(--f7-safe-area-right);
-      });
-    }
-  }
-  .searchbar-new-expandable {
-    --f7-searchbar-new-inner-padding-left: 4px;
-    --f7-searchbar-new-inner-padding-right: 4px;
-    height: var(--f7-searchbar-new-expandable-size);
-    opacity: 0;
-    bottom: 0;
-    border-radius: calc(var(--f7-searchbar-new-expandable-size));
-    width: calc(var(--f7-searchbar-new-expandable-size));
-    margin-top: calc(var(--f7-searchbar-new-expandable-size) * -1 / 2);
-    transform: translate3d(0px, 0px, 0px);
-    background-color: var(--f7-searchbar-new-input-bg-color);
-    .ltr({
-      left: 100%;
-      margin-left: calc(var(--f7-searchbar-new-expandable-size) * -1);
-    });
-    .rtl({
-      right: 100%;
-      margin-right: calc(var(--f7-searchbar-new-expandable-size) * -1);
-    });
-  }
-
-  .searchbar-new-expandable.searchbar-new-enabled {
-    width: 100%;
-    border-radius: 0;
-    opacity: 1;
-    pointer-events: auto;
-    margin-top: 0;
-    .ltr({
-      left: 0;
-      margin-left: 0;
-    });
-    .rtl({
-      right: 0;
-      margin-right: 0;
-    });
-  }
-}
-
+.md {
+  .searchbar-new-icon,
+  .searchbar-new-disable-button {
+    position: absolute;
+
+    top: 50%;
+    transition-duration: 300ms;
+  }
+  .searchbar-new-disable-button {
+    .icon-close {
+      display: none;
+    }
+  }
+  .searchbar-new-icon {
+    width: 48px;
+    height: 48px;
+    left: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:after {
+      width: auto;
+      height: auto;
+      content: 'search_md';
+      line-height: 1.2;
+    }
+    .ltr({
+      left: var(--f7-safe-area-left);
+    });
+    .rtl({
+      right: var(--f7-safe-area-right);
+    });
+  }
+  .searchbar-new-disable-button {
+    width: 48px;
+    height: 48px;
+    transform: rotate(-90deg) scale(0.5);
+    font-size: 0 !important;
+    display: block;
+    margin-top: -24px;
+    color: var(--f7-searchbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+    .ltr({
+      left: calc(var(--f7-searchbar-new-inner-padding-left) + var(--f7-safe-area-left));
+    });
+    .rtl({
+      right: calc(var(--f7-searchbar-new-inner-padding-right) + var(--f7-safe-area-right));
+    });
+
+    &:after {
+      .core-icons-font();
+      line-height: 48px;
+      .ltr({
+        content: 'arrow_left_md';
+      });
+      .rtl({
+        content: 'arrow_right_md';
+      });
+    }
+  }
+  .searchbar-new-enabled:not(.searchbar-new-enabled-no-disable-button) {
+    .searchbar-new-disable-button {
+      transform: rotate(0deg) scale(1);
+      pointer-events: auto;
+      opacity: 1;
+    }
+    .searchbar-new-icon {
+      opacity: 0;
+      transform: rotate(90deg) scale(0.5);
+    }
+  }
+  .searchbar-new {
+    --f7-searchbar-new-input-extra-padding-left: 34px;
+    .input-clear-button {
+      width: 48px;
+      height: 48px;
+      margin-top: -24px;
+      .ltr({ right: 0; });
+      .rtl({ left: 0; });
+
+      &:after {
+        line-height: 48px;
+        content: 'delete_round_md';
+        opacity: 1;
+      }
+      &:before {
+        display: none;
+      }
+    }
+  }
+  .searchbar-new-inline {
+    --f7-searchbar-new-input-extra-padding-left: 32px;
+  }
+
+  .page > .searchbar-new,
+  .subnavbar .searchbar-new,
+  .subnavbar-new .searchbar-new,
+  .searchbar-new-expandable {
+    --f7-searchbar-new-input-extra-padding-left: 34px;
+    .searchbar-new-disable-button {
+      .ltr({
+        left: calc(var(--f7-searchbar-new-inner-padding-left) + var(--f7-safe-area-left));
+      });
+      .rtl({
+        right: calc(var(--f7-searchbar-new-inner-padding-right) + var(--f7-safe-area-right));
+      });
+    }
+    .searchbar-new-icon {
+      .ltr({
+        left: var(--f7-safe-area-left);
+      });
+      .rtl({
+        right: var(--f7-safe-area-right);
+      });
+    }
+  }
+  .searchbar-new-expandable {
+    --f7-searchbar-new-inner-padding-left: 4px;
+    --f7-searchbar-new-inner-padding-right: 4px;
+    height: var(--f7-searchbar-new-expandable-size);
+    opacity: 0;
+    bottom: 0;
+    border-radius: calc(var(--f7-searchbar-new-expandable-size));
+    width: calc(var(--f7-searchbar-new-expandable-size));
+    margin-top: calc(var(--f7-searchbar-new-expandable-size) * -1 / 2);
+    transform: translate3d(0px, 0px, 0px);
+    background-color: var(--f7-searchbar-new-input-bg-color);
+    .ltr({
+      left: 100%;
+      margin-left: calc(var(--f7-searchbar-new-expandable-size) * -1);
+    });
+    .rtl({
+      right: 100%;
+      margin-right: calc(var(--f7-searchbar-new-expandable-size) * -1);
+    });
+  }
+
+  .searchbar-new-expandable.searchbar-new-enabled {
+    width: 100%;
+    border-radius: 0;
+    opacity: 1;
+    pointer-events: auto;
+    margin-top: 0;
+    .ltr({
+      left: 0;
+      margin-left: 0;
+    });
+    .rtl({
+      right: 0;
+      margin-right: 0;
+    });
+  }
+}
+