Current File : //var/www/prestashop/modules/psxdesign/themes/classic/components/search-widget.scss

/**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
 */

.search-widget {
  display: inline-block;
  @include search-box();
}

.header-top {
  &-right {
    @include media-breakpoint-down(xs) {
      width: 100%;
      padding-right: 15px;
    }
  }

  .search-widgets {
    form {
      input[type="text"] {
        width: 100%;
        min-width: inherit;
        color: $gray-second;
        background: $gray-lighter;

        &:focus {
          background: $white;
        }
      }

      button[type="submit"] {
        top: 50%;
        bottom: inherit;
        transform: translateY(-50%);
      }
    }
  }

  // stylelint-disable-next-line
  #search_widget {
    input {
      padding-right: 1rem;
    }
  }
}

#checkout {
  #search_widget {
    display: none; /* Not ideal solution by allows to reuse same hooks/templates */
  }
}

#pagenotfound {
  .page-content {
    #search_widget {
      width: 100%;
    }
  }
}

.page-not-found {
  .search-widget {
    form {
      display: inline-block;
    }
  }
}

/*** Responsive part ***/
@include media-breakpoint-down(sm) {
  .header-top {
    .search-widget {
      float: none;

      form {
        margin: 0 auto;

        input[type="text"] {
          min-width: inherit;
          background: $white;
        }
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .search-widget {
    min-width: 15.63rem;
  }
}

@include media-breakpoint-up(sm) {
  .header-top {
    .search-widgets {
      max-width: 13rem;
    }
  }
}