Aeroporto di Bologna - Design System

Cart: Empty Voucher 

<div class="c-cart">

    <div class="c-cart__header">
        <p class="c-cart__title">Il tuo carrello</p>
    </div>

    <div class="c-cart__body">
        <p>Non ci sono ancora articoli nel carrello</p>

        <div class="c-highlight c-highlight--small">
            <p>Hai a disposizione <strong>[1] voucher parcheggio</strong> del valore di <strong>[20,00]</strong>. Procedendo ti verrà detratto automaticamente dall’importo totale.</p>
        </div>
    </div>

</div>
 
<div class="c-cart{{#if modifier}} {{modifier}}{{/if}}">

  {{!-- HEADER --}}
  <div class="c-cart__header">
    <p class="c-cart__title">Il tuo carrello</p>
  </div>
  {{!-- END HEADER --}}
  
  {{!-- BODY --}}
  <div class="c-cart__body">
    <p>Non ci sono ancora articoli nel carrello</p>
    
    {{#if voucher-highlight }}
      {{> @highlight voucher-highlight }}
    {{/if}}
    
  </div>
  {{!-- END BODY --}}

</div>
 
{
  "items": [
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p1.svg",
            "alt": "Parcheggio P1"
          },
          "name": "P1 Terminal",
          "start-date": "10/03/2025",
          "end-date": "15/03/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    },
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p2.svg",
            "alt": "Parcheggio P2"
          },
          "name": "P2 Terminal",
          "start-date": "16/03/2025",
          "end-date": "20/03/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    },
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p3.svg",
            "alt": "Parcheggio P3"
          },
          "name": "P3 Terminal",
          "start-date": "21/03/2025",
          "end-date": "25/03/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    },
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p4.svg",
            "alt": "Parcheggio P4"
          },
          "name": "P4 Terminal",
          "start-date": "26/03/2025",
          "end-date": "30/03/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    },
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p5.svg",
            "alt": "Parcheggio P5"
          },
          "name": "P5 Terminal",
          "start-date": "31/03/2025",
          "end-date": "05/04/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    },
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p6.svg",
            "alt": "Parcheggio P6"
          },
          "name": "P6 Terminal",
          "start-date": "04/05/2025",
          "end-date": "07/05/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    }
  ],
  "vouchers-disclosure": {
    "modifier": "o-collapsible--raw",
    "title": "Voucher x3",
    "items": [
      {
        "name": "Voucher TYPE8567MH",
        "price": "- 20,99 €"
      },
      {
        "name": "Voucher TYPE1234KL",
        "price": "- 40,00 €"
      },
      {
        "name": "Voucher TYPE9964IT",
        "price": "- 20,40 €"
      }
    ]
  },
  "label-total": "Totale ordine",
  "price": {
    "initial": "40,00 €",
    "final": "20,00 €"
  },
  "btn-pay": {
    "type": "submit",
    "text": "Procedi",
    "modifier": "c-button--submit"
  },
  "btn-new-search": {
    "type": "button",
    "text": "nuova ricerca",
    "modifier": "c-button--as-link"
  },
  "voucher-highlight": {
    "modifier": "c-highlight--small",
    "text": "<p>Hai a disposizione <strong>[1] voucher parcheggio</strong> del valore di <strong>[20,00]</strong>. Procedendo ti verrà detratto automaticamente dall’importo totale.</p>"
  }
}
  • Content: 
    .c-cart {
  background-color: secondary(basic-white, 100);
  @include shadow(high);
  padding: remify(24px);
  border-radius: remify(16px);
  flex-direction: column;
  gap: remify(16px);
  display: flex;
  border: remify(1px) solid primary(night, 10);
}

.block-desktop-cart {
  display: none;

  @include min-screen(bp(tablet-p)) {
    display: block;
  }
}

.block-mobile-cart {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: $z-Index-mobile-sticky-cart;

  @include min-screen(bp(tablet-p)) {
    display: none;
  }

}

.c-cart__title {
  @include font-scale(level-3, bold);
  color: primary(night, 100);
}

.c-cart__body {
  display: flex;
  flex-direction: column;
  gap: remify(16px);
}

.c-cart__item {
  border-bottom: remify(1px) solid primary(night, 20);
}

.c-cart__footer {
  display: flex;
  flex-direction: column;
  gap: remify(12px);
  margin-top: remify(16px);
}

.c-cart__cta .c-button {
  width: 100%;
  margin-top: 0 !important; // Using !important to override margin-top from _form.scss to prevent style conflicts
}

.c-cart__footer .cta-secondary-text {
  @include font-scale(level-2);
  color: secondary(text, 100);
  text-align: center;
}

.c-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: remify(16px);
}

.c-cart__total-label {
  @include font-scale(level-2, bold);
  color: primary(night, 100);
}

.c-cart__total-price {
  display: flex;
  align-items: center;
  gap: remify(8px);

  .initial-price {
    @include font-scale(level-2);
    color: primary(night, 60);
    text-decoration: line-through;
  }

  .final-price {
    @include font-scale(level-4, bold);
    color: secondary(text, 100);
  }

}

.c-cart__vouchers {
  position: relative;
  // margin-block: remify(16px);

  .final {
    @include font-scale(level-1-5);
  }

}

.c-cart__vouchers-total {
  @include font-scale(level-2, bold);
  position: absolute;
  right: 0;
  top: 0;
  color: secondary(text, 100);
}

.c-cart__vouchers {

  .c-collapsible__button {
    @include font-scale(level-2);
    color: primary(night, 100);
    cursor: pointer;
  }

}

.c-cart__voucher-info {
  @include font-scale(level-2);
  color: secondary(text, 100);

  @include max-screen(bp(tablet-p)) {
    display: none;
  }
}

.c-cart__voucher-items {
  display: flex;
  flex-direction: column;
  gap: remify(8px);
  margin-top: remify(8px);
}

.c-cart__voucher-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  @include font-scale(level-1);
}

/*------------------------------------*\
  Modifier: c-cart--mobile
\*------------------------------------*/
.c-cart--mobile {
  border-radius: 0;
  padding: remify(16px);
  box-shadow: 0px -6px 15px -3px rgba(15, 47, 77, 0.2);

  .c-cart__mob-wrapper {
    display: flex;
    justify-content: space-between;
    gap: remify(16px);
  }

  .right-block {
    display: flex;
    align-items: flex-end;
    gap: remify(16px);
  }

  .cart-link {
    @include font-scale(level-2, semibold);
    color: primary(night, 100);
  }

  .c-cart__total-price {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  .c-cart__total-price .initial-price {
    @include font-scale(level-1);
  }

  .c-cart__total-price .final-price {
    @include font-scale(level-3, bold);
  }

}
  • URL: /components/raw/cart/_cart.scss
  • Filesystem Path: src/views/03-organisms/cart/_cart.scss
  • Size: 3.3 KB

No notes defined.