@pi0/framework7/src/components/searchbar/searchbar.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Searchbar === */
.searchbar {
  width: 100%;
  position: relative;
  z-index: 200;
  .searchbar-input-wrap {
    flex-shrink: 1;
    width: 100%;
    height: 100%;
    position: relative;
    input[type="search"] {
      padding: 0;
    }
    input::-webkit-search-cancel-button {
      appearance: none;
    }
  }
  .page > & {
    position: absolute;
    left: 0;
    top: 0;
  }
}
.searchbar-expandable {
  position: absolute;
  transition-duration: 300ms;
  pointer-events: none;
  // overflow: hidden;
}
.searchbar-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  // overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.searchbar-disable-button {
  cursor: pointer;
  pointer-events: none;
  appearance: none;
  background: none;
  border: none;
  outline: 0;
  padding: 0;
  margin: 0;
  width: auto;
  opacity: 0;
}
.searchbar-icon {
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
}
.searchbar-backdrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition-duration: 300ms;
  transform: translate3d(0,0,0);
  &.searchbar-backdrop-in {
    opacity: 1;
    pointer-events: auto;
  }
  .page-content > & {
    position: fixed;
  }
}
.searchbar-not-found {
  display: none;
}
.hidden-by-searchbar {
  &, .list &, .list.li& {
    display: none;
  }
}
& when (@include-ios-theme) {
  @import url('./searchbar-ios.less');
}
& when (@include-md-theme) {
  @import url('./searchbar-md.less');
}