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

Open in your IDE?
  2. {% set colors = ['red','orange','yellow','green','blue','indigo','violet'] %}
  3. <div>
  4.     <div class="title-state-div"><h4>Couleurs</h4><span class="toggle-btn-3" id="button-div" onclick="toggleDiv('div-color-bar', 'toggle-btn-3')">-</span></div>
  6.     <div class="div-color-bar">
  7.         <div class="" id="sylius_product_color">
  8.             {% for color in colors %}
  9.                 <div class="div-color">
  10.                     <input type="checkbox" name="color-product[]" value="{{ color}}" id="{{ color}}" class="product_color">
  11.                     <div class="big-point" style="border: 0.15rem solid {{ color }}">
  12.                     </div>
  13.                     <div class="litle-point" style="background-color: {{ color }}" >
  14.                         <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  15.                             <path d="M4 9.4L0 5.4L1.4 4L4 6.6L10.6 0L12 1.4L4 9.4Z" fill="white"/>
  16.                         </svg>
  17.                     </div>
  18.                 </div>
  19.             {% endfor %}
  20.         </div>
  21.     </div>
  22. </div>
  24. <style>
  25.     /*.div-color{*/
  26.     /*    margin: 0 1rem;*/
  27.     /*    position: relative;*/
  28.     /*    height: 4rem;*/
  29.     /*}*/
  30.     /*.big-point {*/
  31.     /*    display: none;*/
  32.     /*    width: 4rem;*/
  33.     /*    height: 4rem;*/
  34.     /*    border-radius: 50%;*/
  35.     /*    background-color: transparent;*/
  36.     /*    z-index: 1;*/
  37.     /*    position: absolute;*/
  38.     /*    top: 0;*/
  39.     /*}*/
  40.     /*.div-color .litle-point {*/
  41.     /*    width: 3rem;*/
  42.     /*    height: 3rem;*/
  43.     /*    z-index: 2;*/
  44.     /*    position: absolute;*/
  45.     /*    top: 0.5rem;*/
  46.     /*    left: 0.5rem;*/
  47.     /*    border-radius: 50%;*/
  48.     /*    display: flex;*/
  49.     /*    align-items: center;*/
  50.     /*    justify-content: center;*/
  51.     /*}*/
  52.     /*.div-color .litle-point > svg {*/
  53.     /*    width: 1.5rem;*/
  54.     /*    height: 1.5rem;*/
  55.     /*    display: none;*/
  56.     /*}*/
  57.     /*.div-color input[type=checkbox]:checked ~ .litle-point > svg {*/
  58.     /*    display: block;*/
  59.     /*}*/
  60.     /*.div-color input[type=checkbox]:checked ~ .big-point {*/
  61.     /*    display: block;*/
  62.     /*}*/
  63.     /*.div-color input[type=checkbox] {*/
  64.     /*    z-index: 3;*/
  65.     /*    cursor: pointer;*/
  66.     /*    position: absolute;*/
  67.     /*    top: 0.5rem;*/
  68.     /*    left: 0.5rem;*/
  69.     /*}*/
  70.     /*.product_color{*/
  71.     /*    -webkit-appearance: none;*/
  72.     /*    !*padding: 10px;*!*/
  73.     /*    border-radius: 2rem;*/
  74.     /*    display: inline-block;*/
  75.     /*    position: relative;*/
  76.     /*    height: 3rem;*/
  77.     /*    width: 3rem;*/
  78.     /*    !*border: 5px solid transparent;*!*/
  80.     /*}*/
  81.     /*#sylius_product_color{*/
  82.     /*    display: flex;*/
  83.     /*    flex-direction: row;*/
  84.     /*    gap: 1rem 2.5rem;*/
  85.     /*    flex-wrap: wrap;*/
  86.     /*}*/
  87. </style>