templates/bundles/SyliusShopBundle/Product/Index/sizebar.html.twig line 1

Open in your IDE?
  1. {% set sizes = ['xs','s','m','l','xl'] %}
  3. <div>
  4.     <div class="title-state-div"><h4>Taille</h4><span class="toggle-btn-4" id="button-div" onclick="toggleDiv('div-size-bar', 'toggle-btn-4')">-</span></div>
  5.     <div class="div-size-bar">
  6.         <div class="" id="sylius_product_size">
  8.             {% for size in sizes %}
  9.                 <div class="div-size">
  10. {#                    <label for=""></label>#}
  11.                     <input type="checkbox" name="size-product[]" value="{{ size }}" class="product_size">
  12.                     <div>
  13.                         <h4>{{ size }}</h4>
  14.                     </div>
  15.                 </div>
  16.             {% endfor %}
  17.         </div>
  18.     </div>
  19. </div>
  22. <style>
  23.     /*.div-size, .div-brand, .div-location, .div-vendor_type{*/
  24.     /*    position: relative;*/
  25.     /*    margin: 0 0.5rem;*/
  27.     /*}*/
  28.     /*.div-size > div {*/
  29.     /*    position: absolute;*/
  30.     /*    top: 0;*/
  31.     /*    z-index: 1;*/
  32.     /*    width: 4rem;*/
  33.     /*    display: flex;*/
  34.     /*    align-items: center;*/
  35.     /*    justify-content: center;*/
  37.     /*    height: 100%;*/
  39.     /*}*/
  40.     /*.div-size > input[type=checkbox], .div-brand > input[type=checkbox], .div-location > input[type=checkbox], .div-vendor_type > input[type=checkbox], .div-vendor_category > input[type=checkbox] {*/
  41.     /*    z-index: 2;*/
  42.     /*    cursor: pointer;*/
  43.     /*}*/
  44.     /*.div-size input[type=checkbox]:checked ~ div, .feature2 input[type=checkbox]:hover ~ div, .div-brand input[type=checkbox]:checked ~ div, .div-location input[type=checkbox]:checked ~ div, .div-vendor_type input[type=checkbox]:checked ~ div {*/
  45.     /*    border: 2px solid black;*/
  46.     /*    background-color: black;*/
  47.     /*    color: white;*/
  48.     /*}*/
  49.     /*.div-size input[type=checkbox] ~ div, .div-brand input[type=checkbox] ~ div, .div-location input[type=checkbox] ~ div, .div-vendor_type input[type=checkbox] ~ div{*/
  50.     /*    border: 2px solid black;*/
  51.     /*    border-radius: 0.5rem;*/
  52.     /*    text-align: center;*/
  53.     /*    cursor: pointer;*/
  54.     /*}*/
  55.     /*.product_size, .product_brand, .product_location, .product_vendor_type{*/
  56.     /*    -webkit-appearance: none;*/
  57.     /*    border-radius: 0.5rem;*/
  58.     /*    display: inline-block;*/
  59.     /*    position: relative;*/
  60.     /*    padding: 0.5rem 1rem;*/
  61.     /*    border: 2px solid transparent;*/
  63.     /*    width: 4rem;*/
  64.     /*    height: 2rem;*/
  65.     /*}*/
  66.     /*#sylius_product_size, #sylius_product_brand, #sylius_product_location, #sylius_product_vendor_type{*/
  67.     /*    display: flex;*/
  68.     /*    flex-direction: row;*/
  69.     /*    gap: 1rem 0;*/
  70.     /*    flex-wrap: wrap;*/
  71.     /*}*/
  72. </style>