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

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @import (multiple) '../../less/colors-md.less';
  @import (multiple) '../../less/vars-md.less';
  .searchbar {
    height: @searchbarSize;
    background: @searchbarBg;
    input[type="search"], input[type="text"] {
      .ltr({
        padding-left: 65px;
        padding-right: 48px;
      });
      .rtl({
        padding-right: 65px;
        padding-left: 48px;
      });
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      display: block;
      border: none;
      appearance: none;
      font-family: inherit;
      font-size: 20px;
      color: #000;
      font-weight: normal;
      &::placeholder {
        color: #939398;
        opacity: 1;
      }
    }
  }
  .searchbar-expandable {
    height: 100%;
  }
  .searchbar-backdrop {
    background: rgba(0,0,0,0.25);
  }
  .searchbar-icon, .searchbar-disable-button {
    position: absolute;
    width: 48px;
    height: 48px;
    .ltr({ left: -4px; });
    .rtl({ right: -4px; });
    top: 50%;
    margin-top: -24px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    transition-duration: 300ms;
  }
  .searchbar-icon {
    .svg-background("<svg fill='#737373' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  }
  .searchbar-disable-button {
    transform: rotate(-90deg) scale(0.5);
    font-size: 0 !important;
    display: block;
    .md-link-highlight(rgba(0,0,0,0.1));
    .ltr({
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='#737373'/></svg>");
    });
    .rtl({
      .svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='#737373'/></svg>");
    });
  }
  .searchbar-enabled {
    .searchbar-disable-button {
      transform: rotate(0deg) scale(1);
      pointer-events: auto;
      opacity: 1;
    }
    .searchbar-icon {
      opacity: 0;
      transform: rotate(90deg) scale(0.5);
    }
  }
  .searchbar {
    .input-clear-button {
      width: 48px;
      height: 48px;
      margin-top: -24px;
      .svg-background("<svg fill='#737373' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
      border-radius: 0;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 24px 24px;
      background-color: transparent;
      .ltr({ right: 0; });
      .rtl({ left: 0; });
      .md-link-highlight(rgba(0,0,0,0.1));
    }
    .input-clear-button:after {
      display: none;
    }
    .input-clear-button:before {
      margin-left: 0;
      margin-top: 0;
    }
  }
  .page-content .searchbar {
    border-radius: 2px;
    margin: 8px;
    width: auto;
    .searchbar-inner {
      border-radius: 2px;
    }
    .md-depth(1);
  }
  .page > .searchbar {
    z-index: 510;
    .md-bar-shadow-to-bottom();
    &.no-shadow {
      .md-bar-no-shadow();
    }
  }
  .page > .searchbar, .subnavbar .searchbar, .searchbar-expandable {
    input[type="search"], input[type="text"] {
      .ltr({ padding-left: 65px + 8px; });
      .rtl({ padding-right: 65px + 8px; });
    }
    .searchbar-icon, .searchbar-disable-button {
      .ltr({ left: -4px + 8px; });
      .rtl({ right: -4px + 8px; });
    }
  }
  .searchbar-expandable {
    width: 56px;
    height: 100%;
    opacity: 0;
    top: 50%;
    margin-top: -56px / 2;
    transform: translate3d(0px, 0px, 0px);
    .ltr({
      left: 100%;
      margin-left: -56px;
    });
    .rtl({
      right: 100%;
      margin-right: -56px;
    });
  }
  .navbar .searchbar-expandable {
    border-radius: @navbarSize / 2;
    width: @navbarSize;
    margin-top: -@navbarSize / 2;
    .ltr({ margin-left: -@navbarSize; });
    .rtl({ margin-right: -@navbarSize; });
    @media (min-width: 768px) {
      border-radius: @navbarSizeTablet / 2;
      width: @navbarSizeTablet;
      margin-top: -@navbarSizeTablet / 2;
      .ltr({ margin-left: -@navbarSizeTablet; });
      .rtl({ margin-right: -@navbarSizeTablet; });
    }
  }
  .toolbar .searchbar-expandable, .subnavbar .searchbar-expandable {
    border-radius: @toolbarSize / 2;
    width: @toolbarSize;
    margin-top: -@toolbarSize / 2;
    .ltr({ margin-left: -@toolbarSize; });
    .rtl({ margin-right: -@navbarSize; });
  }
  .tabbar-labels .searchbar-expandable {
    border-radius: @tabbarLabelsSize / 2;
    width: @tabbarLabelsSize;
    margin-top: -@tabbarLabelsSize / 2;
    .ltr({ margin-left: -@tabbarLabelsSize; });
    .rtl({ margin-right: -@tabbarLabelsSize; });
  }

  .searchbar-expandable.searchbar-enabled {
    width: 100%;
    border-radius: 0;
    opacity: 1;
    pointer-events: auto;
    top: 0;
    margin-top: 0;
    .ltr({
      left: 0;
      margin-left: 0;
    });
    .rtl({
      right: 0;
      margin-right: 0;
    });
  }


  // Relation with page/navbar/toolbar
  .page > .searchbar ~ * .page-content,
  .page > .searchbar ~ .page-content {
    padding-top: @searchbarSize;
  }
  // Navbar
  .page > .navbar ~ .searchbar {
    top: @navbarSize;
    @media (min-width: 768px) {
      top: @navbarSizeTablet;
    }
  }
  .page > .navbar ~ .searchbar ~ * .page-content,
  .page > .navbar ~ .searchbar ~ .page-content {
    padding-top: @navbarSize + @searchbarSize;
    @media (min-width: 768px) {
      padding-top: @navbarSizeTablet + @searchbarSize;
    }
  }

  // Toolbar
  .page > .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .searchbar {
    top: @toolbarSize;
  }
  .page > .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .searchbar ~ * .page-content,
  .page > .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .searchbar ~ .page-content {
    padding-top: @toolbarSize + @searchbarSize;
  }

  .page > .tabbar-labels:not(.toolbar-bottom-md) ~ .searchbar {
    top: @tabbarLabelsSize;
  }
  .page > .tabbar-labels:not(.toolbar-bottom-md) ~ .searchbar ~ * .page-content,
  .page > .tabbar-labels:not(.toolbar-bottom-md) ~ .searchbar ~ .page-content {
    padding-top: @tabbarLabelsSize + @searchbarSize;
  }

  // Navbar + Toolbar
  .page > .navbar ~ .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .searchbar {
    top: @navbarSize + @toolbarSize;
    @media (min-width: 768px) {
      top: @navbarSizeTablet + @toolbarSize;
    }
  }
  .page > .navbar ~ .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .searchbar ~ * .page-content,
  .page > .navbar ~ .toolbar:not(.toolbar-bottom-md):not(.messagebar) ~ .searchbar ~ .page-content {
    padding-top: @navbarSize + @toolbarSize + @searchbarSize;
    @media (min-width: 768px) {
      padding-top: @navbarSizeTablet + @toolbarSize + @searchbarSize;
    }
  }

  .page > .navbar ~ .tabbar-labels:not(.toolbar-bottom-md) ~ .searchbar {
    top: @navbarSize + @tabbarLabelsSize;
    @media (min-width: 768px) {
      top: @navbarSizeTablet + @tabbarLabelsSize;
    }
  }
  .page > .navbar ~ .tabbar-labels:not(.toolbar-bottom-md) ~ .searchbar ~ * .page-content,
  .page > .navbar ~ .tabbar-labels:not(.toolbar-bottom-md) ~ .searchbar ~ .page-content {
    padding-top: @navbarSize + @tabbarLabelsSize + @searchbarSize;
    @media (min-width: 768px) {
      padding-top: @navbarSizeTablet + @tabbarLabelsSize + @searchbarSize;
    }
  }
}