Fractal Starter
Project version : 0.1.2

Block Search 

<div class="block-search" id="modal-block-search">
    <button class="block-search__close button js-close-search">
      <i class="icon icon--close"></i>
      <span>Annuler ma recherche</span>
   </button>

    <form class="block-search__form container container-l form-search" action="#" method="POST">
        <label>Rechercher parmi nos 2000 produits</label>
        <span class="input-container">
         <input type="search" />
         <button type="submit"><i class="icon icon--search icon--search-black"></i></button>
      </span>
    </form>

    <div class="block-search__result">

        <div class="container cards-result">
            <p class="result-number">127 produits répondent à votre recherche</p>

            <div class="cards-result__listing">
                <article class="card-product">

                    <a href="#">
                        <div class="card-product__thumb">
                            <img src="https://source.unsplash.com/featured/?light" alt="" />
                        </div>

                        <div class="card-product__content">
                            <h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
                            <span class="card-product__content-price theme-color">
                           35€
                        </span>
                        </div>

                        <div class="card-product__buttons">
                            <span class="button button--gray">Voir</span>
                            <object>
                           <button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
                        </object>
                        </div>
                    </a>
                </article>
                <article class="card-product">

                    <a href="#">
                        <div class="card-product__thumb">
                            <img src="https://source.unsplash.com/featured/?light" alt="" />
                        </div>

                        <div class="card-product__content">
                            <h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
                            <span class="card-product__content-price theme-color">
                           35€
                        </span>
                        </div>

                        <div class="card-product__buttons">
                            <span class="button button--gray">Voir</span>
                            <object>
                           <button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
                        </object>
                        </div>
                    </a>
                </article>
                <article class="card-product">

                    <a href="#">
                        <div class="card-product__thumb">
                            <img src="https://source.unsplash.com/featured/?light" alt="" />
                        </div>

                        <div class="card-product__content">
                            <h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
                            <span class="card-product__content-price theme-color">
                           35€
                        </span>
                        </div>

                        <div class="card-product__buttons">
                            <span class="button button--gray">Voir</span>
                            <object>
                           <button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
                        </object>
                        </div>
                    </a>
                </article>
                <article class="card-product">

                    <a href="#">
                        <div class="card-product__thumb">
                            <img src="https://source.unsplash.com/featured/?light" alt="" />
                        </div>

                        <div class="card-product__content">
                            <h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
                            <span class="card-product__content-price theme-color">
                           35€
                        </span>
                        </div>

                        <div class="card-product__buttons">
                            <span class="button button--gray">Voir</span>
                            <object>
                           <button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
                        </object>
                        </div>
                    </a>
                </article>
                <article class="card-product">

                    <a href="#">
                        <div class="card-product__thumb">
                            <img src="https://source.unsplash.com/featured/?light" alt="" />
                        </div>

                        <div class="card-product__content">
                            <h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
                            <span class="card-product__content-price theme-color">
                           35€
                        </span>
                        </div>

                        <div class="card-product__buttons">
                            <span class="button button--gray">Voir</span>
                            <object>
                           <button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
                        </object>
                        </div>
                    </a>
                </article>
                <article class="card-product">

                    <a href="#">
                        <div class="card-product__thumb">
                            <img src="https://source.unsplash.com/featured/?light" alt="" />
                        </div>

                        <div class="card-product__content">
                            <h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
                            <span class="card-product__content-price theme-color">
                           35€
                        </span>
                        </div>

                        <div class="card-product__buttons">
                            <span class="button button--gray">Voir</span>
                            <object>
                           <button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
                        </object>
                        </div>
                    </a>
                </article>
                <article class="card-product">

                    <a href="#">
                        <div class="card-product__thumb">
                            <img src="https://source.unsplash.com/featured/?light" alt="" />
                        </div>

                        <div class="card-product__content">
                            <h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
                            <span class="card-product__content-price theme-color">
                           35€
                        </span>
                        </div>

                        <div class="card-product__buttons">
                            <span class="button button--gray">Voir</span>
                            <object>
                           <button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
                        </object>
                        </div>
                    </a>
                </article>
                <article class="card-product">

                    <a href="#">
                        <div class="card-product__thumb">
                            <img src="https://source.unsplash.com/featured/?light" alt="" />
                        </div>

                        <div class="card-product__content">
                            <h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
                            <span class="card-product__content-price theme-color">
                           35€
                        </span>
                        </div>

                        <div class="card-product__buttons">
                            <span class="button button--gray">Voir</span>
                            <object>
                           <button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
                        </object>
                        </div>
                    </a>
                </article>
                <article class="card-product">

                    <a href="#">
                        <div class="card-product__thumb">
                            <img src="https://source.unsplash.com/featured/?light" alt="" />
                        </div>

                        <div class="card-product__content">
                            <h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
                            <span class="card-product__content-price theme-color">
                           35€
                        </span>
                        </div>

                        <div class="card-product__buttons">
                            <span class="button button--gray">Voir</span>
                            <object>
                           <button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
                        </object>
                        </div>
                    </a>
                </article>
            </div>
        </div>

    </div>
</div>
 
<div class="block-search" id="modal-block-search">
   <button class="block-search__close button js-close-search">
      <i class="icon icon--close"></i>
      <span>Annuler ma recherche</span>
   </button>

   <form class="block-search__form container container-l form-search" action="#" method="POST">
      <label>Rechercher parmi nos 2000 produits</label>
      <span class="input-container">
         <input type="search" />
         <button type="submit"><i class="icon icon--search icon--search-black"></i></button>
      </span>
   </form>

   <div class="block-search__result{{#if no_result}} no-result{{/if}}">
      {{#if no_result}}
         <h4 class="h1 container">Trouvez la perle rare !</h4>
      {{else}}

      <div class="container cards-result">
         <p class="result-number">127 produits répondent à votre recherche</p>

         <div class="cards-result__listing">
            {{#each cards_product }}
               {{> @card-product card_product=this }}
            {{/each}}
         </div>
      </div>
         
      {{/if}}
   </div>   
</div>
 
{
  "no_result": null,
  "cards_product": [
    {
      "title": "Moduled Barre LED RVB Ayrton 250",
      "thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
      "price": "35€"
    },
    {
      "title": "Moduled Barre LED RVB Ayrton 250",
      "thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
      "price": "35€"
    },
    {
      "title": "Moduled Barre LED RVB Ayrton 250",
      "thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
      "price": "35€"
    },
    {
      "title": "Moduled Barre LED RVB Ayrton 250",
      "thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
      "price": "35€"
    },
    {
      "title": "Moduled Barre LED RVB Ayrton 250",
      "thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
      "price": "35€"
    },
    {
      "title": "Moduled Barre LED RVB Ayrton 250",
      "thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
      "price": "35€"
    },
    {
      "title": "Moduled Barre LED RVB Ayrton 250",
      "thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
      "price": "35€"
    },
    {
      "title": "Moduled Barre LED RVB Ayrton 250",
      "thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
      "price": "35€"
    },
    {
      "title": "Moduled Barre LED RVB Ayrton 250",
      "thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
      "price": "35€"
    }
  ]
}
  • Content: 
    .block-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.9) 1%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  overflow-y: scroll;
  z-index: 10000;
  display: none;

  &__close {
    @include mediaWQuery($media-query-s) {
      @include absPosition($top: 0, $right: 2rem);
    }

    padding: 1rem 2rem;
    background: $c-black;
    color: $c-white;

    &:hover,
    &:focus {
      background: lighten($c-black, 10%);
    }

    > i {
      display: none !important;
    }
  }

  &__form {
    padding-top: $margin-m;
    max-width: 640px;

    @include mediaWQuery($media-query-s) {
      padding-top: $margin-xl;
    }

    .input-container {
      position: relative;
      display: block;

      input {
        display: block;
        width: 100%;

        font-size: $font-size-m;
        border-radius: 0 !important;

        border: 3px solid $c-black;
        padding: $margin-m $margin-xl $margin-m $margin-m;
        @include transition;

        &:hover,
        &:focus {
          box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
        }
      }

      > button {
        @include absPosition($top: 50%, $right: 5px);
        transform: translateY(-50%);
        -webkit-appearance: none;
        border: 0;
        background: transparent;
        cursor: pointer;

        > i {
          width: 35px;
          height: 35px;
        }
      }
    }

    label {
      font-size: rem(21);
      font-family: $font-primary;
      color: $c-font-color;

      @include mediaWQuery($media-query-m) {
        font-size: rem(24);
      }
    }
  }

  &__result {
    &.no-result {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: calc(90vh - 170px);

      .h1 {
        color: $c-gray-40;
        margin: 0;
        text-align: center;
      }
    }

    &:not(.no-result) {
      padding-top: $margin-l;

      .cards-result {
        .result-number {
          margin: $margin-l 0;
          text-align: center;
          font-family: $font-primary;
        }

        &__listing {
          @supports (display: flex) {
            display: flex;
            flex-wrap: wrap;
            --margin: 1rem;
            --multiplier: calc(40rem - 100%);

            @include mediaWQuery($media-query-m) {
              margin: calc(var(--margin) * -1);
            }

            @include mediaWQuery($media-query-xl) {
              padding-top: $margin-l;
            }

            > * {
              min-width: 100%;
              max-width: 100%;
              flex-grow: 1;
              flex-basis: calc(var(--multiplier * 999));
              margin-bottom: var(--margin);
              word-break: break-all;

              @include mediaWQuery($media-query-m) {
                min-width: calc(50% - (var(--margin) * 2));
                max-width: calc(50% - (var(--margin) * 2));
                margin-right: var(--margin);
                margin-left: var(--margin);
                margin-bottom: 0;
              }

              @include mediaWQuery($media-query-l) {
                min-width: calc(33% - (var(--margin) * 2));
                max-width: calc(33% - (var(--margin) * 2));
              }

              @include mediaWQuery($media-query-xl) {
                min-width: calc(25% - (var(--margin) * 2));
                max-width: calc(25% - (var(--margin) * 2));
              }
            }
          }
        }
      }
    }
  }

  .ais-SearchBox-input {
    border-radius: 0 !important;
  }
}

//WP/Algolia fix
body.logged-in {
  .block-search {
    top: 32px;
    height: calc(100vh - 32px);
  }
}

body.theme-mk-zero {
  .result-number {
    margin: 0 !important;
  }
  .ais-Stats {
    margin: 2rem 0;
    text-align: center;
  }
}

.ais-SearchBox-form {
  position: relative;

  &:before {
    content: "Rechercher parmi nos 2000 produits";
    font-size: 1rem;
    display: block;

    @include mediaWQuery($media-query-m) {
      font-size: 1.125rem;
    }
  }

  .ais-SearchBox-input {
    display: block;
    width: 100%;

    font-size: $font-size-m;

    border: 3px solid $c-black;
    padding: $margin-m $margin-xl $margin-m $margin-m;
    @include transition;

    &:hover,
    &:focus {
      box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    }
  }

  .ais-SearchBox-submit {
    @include absPosition($top: 70px, $right: 20px);
    transform: translateY(-50%);
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;

    @include mediaWQuery($media-query-s) {
      @include absPosition($top: 119px, $right: 20px);
    }

    > i {
      width: 35px;
      height: 35px;
    }
  }
}

.ais-ClearRefinements-button {
  @include mediaWQuery($media-query-s) {
    @include absPosition($top: 0.5rem, $right: 2rem);
  }

  font-size: $font-size-m;

  > i {
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }
}

.ais-Hits-list {
  list-style-type: none;
  padding-left: 0;

  @supports (display: flex) {
    display: flex;
    flex-wrap: wrap;
    --margin: 1rem;
    --multiplier: calc(40rem - 100%);

    @include mediaWQuery($media-query-m) {
      margin: calc(var(--margin) * -1);
    }

    @include mediaWQuery($media-query-xl) {
      padding-top: $margin-l;
    }

    > * {
      min-width: 100%;
      max-width: 100%;
      flex-grow: 1;
      flex-basis: calc(var(--multiplier * 999));
      margin-bottom: var(--margin);
      word-break: break-all;

      @include mediaWQuery($media-query-m) {
        min-width: calc(50% - (var(--margin) * 2));
        max-width: calc(50% - (var(--margin) * 2));
        margin-right: var(--margin);
        margin-left: var(--margin);
        margin-bottom: 0;
      }

      @include mediaWQuery($media-query-l) {
        min-width: calc(33% - (var(--margin) * 2));
        max-width: calc(33% - (var(--margin) * 2));
      }

      @include mediaWQuery($media-query-xl) {
        min-width: calc(25% - (var(--margin) * 2));
        max-width: calc(25% - (var(--margin) * 2));
      }
    }
  }
}

.ais-Pagination-list {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  justify-content: center;

  li {
    margin: 0 0.25rem;
  }
}

.algolia-copyright {
  display: block;
  margin-bottom: 2rem;
  margin-right: 2rem;
  text-align: right;

  img {
    width: 75px;
    height: auto;
    margin-top: 1px;
    display: inline-block;
    vertical-align: top;
  }
}
.ais-SearchBox-reset {
  display: none !important;
}

#no-result-text,
.ais-Hits--empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(90vh - 170px);

  .h1 {
    color: $c-gray-40;
    margin: 0;
    text-align: center;
  }
}
  • URL: /components/raw/block-search/block-search.scss
  • Filesystem Path: components/06-components/02-blocks/06-block-search/block-search.scss
  • Size: 6.8 KB

There are no notes for this item.