templates/layout/includes/search-inline.html.twig line 1

Open in your IDE?
  1. <style>
  2.     #search-box{
  3.         border-radius: 50rem 0 0 50rem !important;
  4.     }
  5. </style>
  6. <div class="col-1 col-sm-1 col-md-1 col-lg-7 d-none d-lg-block align-self-center">
  7.     <form class="form minisearch search-inline px-5" id="header-search1" action="javascript:void(0)" method="get">
  8.         <label class="label d-none"><span>{{ "Search"  | trans }}</span></label>
  9.         <div class="control">
  10.             <div class="searchField d-flex">
  11.                 <div class="input-box d-flex w-100">
  12.                     <input autocomplete="off" type="text" id="search-box" data-idiom="{{ app.request.locale }}" name="q" value="" placeholder="" class="input-text rounded-0 border-start-0 border-end-0">
  13.                     <button type="button" title="{{ "Search" | trans }}" class="action search search-btn rounded-pill-end"><i class="icon an an-search-l"></i></button>
  14.                 </div>
  15.             </div>
  16.             <ul id="search-suggestions" class="search-suggestions d-none">
  18.             </ul>
  19.         </div>
  20.     </form>
  21. </div>
  23. <style>
  24.     /* Estilo para la barra de desplazamiento */
  25.     ::-webkit-scrollbar {
  26.         width: 6px;
  27.     }
  29.     ::-webkit-scrollbar-track {
  30.         background: #f1f1f1;
  31.     }
  33.     ::-webkit-scrollbar-thumb {
  34.         background: #888;
  35.         border-radius: 3px;
  36.     }
  38.     /* Estilo para search-suggestions */
  39.     .search-suggestions {
  40.         position: absolute;
  41.         z-index: 1;
  42.         width: 100%;
  43.         min-width: 536px; /* ancho mínimo de 600px */
  44.         max-width: 577px;/* ajustar el ancho máximo permitido según sea necesario */
  45.         background-color: #fff;
  46.         border: 1px solid #ccc;
  47.         max-height: 355px;
  48.         overflow-y: auto;
  49.         padding: 0;
  50.     }
  52.     .search-suggestions li {
  53.         max-width: 100%;
  54.         list-style: none;
  55.         padding: 10px;
  56.         border-bottom: 1px solid #ccc;
  57.         font-size: 14px;
  58.         color: #444;
  59.         cursor: pointer;
  60.         transition: background-color 0.3s ease;
  61.     }
  63.     .search-suggestions li:hover{
  64.         background-color: #f8f8f8;
  65.     }
  67.     /* Estilo para product-item */
  68.     .product-item {
  69.         display: flex;
  70.         align-items: center;
  71.         padding: 10px;
  72.         cursor: pointer;
  73.         width: 100%;
  74.         border-bottom: 1px solid #f1f1f1;
  75.         transition: background-color 0.3s ease;
  76.     }
  78.     .product-item:hover{
  79.         background-color: #f8f8f8;
  80.     }
  82.     .search-suggestions li:hover .product-name {
  83.         color: #106eea;
  84.     }
  86.     .product-info {
  87.         display: flex;
  88.         align-items: center;
  89.         width: 100%;
  90.     }
  92.     .product-image {
  93.         margin-right: 15px;
  94.     }
  96.     .product-image img {
  97.         width: 50px;
  98.         height: 50px;
  99.         object-fit: cover;
  100.     }
  102.     .product-name {
  103.         font-size: 16px;
  104.         font-weight: 500;
  105.         white-space: nowrap;
  106.         overflow: hidden;
  107.         text-overflow: ellipsis;
  108.         max-width: 400px;
  109.         color: #444;
  110.     }
  111. </style>