src/Modules/Package/Templates/Package/partials/orderSteps.html.twig line 1

  1. <style>
  2.     #progressbar {
  3.         padding-left:0 !important;
  4.         position:relative;
  5.         display:flex;
  6.         height:30px;
  7.         list-style-type:none;
  8.         margin-bottom:4rem
  9.     }
  10.     #progressbar li {
  11.         position:relative;
  12.         text-align:center;
  13.     }
  14.     #progressbar li small, #progressbar li b {color:#fff;}
  15.     #progressbar li:after {
  16.         content: "";
  17.         width: 100%;
  18.         height: 6px;
  19.         background: #eaf0f4;
  20.         position: absolute;
  21.         left: 0%;
  22.         top: 12px;
  23.         z-index: -1;
  25.     }
  26.     #progressbar li:before {
  27.         content: "✓";
  28.         font-size:14px;
  29.         width: 30px;
  30.         height: 30px;
  31.         line-height: 30px;
  32.         display: block;
  33.         background: #eaf0f4;
  34.         border-radius: 50%;
  35.         margin: 0 auto 10px auto;
  36.     }
  38.     #progressbar li.active:before,   #progressbar li.active:after {
  39.         background: #00f5ff;
  40.         color: #04359a;
  41.     }
  42.     #progressbar li.active {
  43.         color: #00f5ff;
  44.     }
  45. </style>
  47. <ul id="progressbar" class="row g-0 w-100 justify-content-center">
  48.     <li class="col text-uppercase active">
  49.         <b>ETAP 1</b><br />
  50.         <small>wybór pakietu</small>
  51.     </li>
  52.     <li class="col text-uppercase {{ step >= 2 ? 'active' : '' }}">
  53.         <b>ETAP 2</b><br />
  54.         <small>podsumowanie</small>
  55.     </li>
  56.     <li class="col text-uppercase {{ step >= 3 ? 'active' : '' }}">
  57.         <b>ETAP 3</b><br />
  58.         <small>płatność</small>
  59.     </li>
  60.     <li class="col text-uppercase {{ step == 4 ? 'active' : '' }}">
  61.         <b>ETAP 4</b><br />
  62.         <small>odbiór pakietu</small>
  63.     </li>
  64. </ul>