Aeroporto di Bologna - Design System

Total 

<!-- Default -->
<div class="c-total">
    <span class="c-total__label">Totale:</span><span class="c-total__price">€ 83,40</span>
</div>


<!-- Checkout -->
<div class="c-total c-total--checkout">
    <span class="c-total__label">Totale: <small class="c-total__fullprice">€ 96,50</small></span><span class="c-total__price">€ 83,40</span>
    <button type="button" class="c-button c-button--as-link">

        Svuota carrello

    </button>
</div>


<!-- Payment Type -->
<div class="c-total c-total--payment-type">
    <div class="c-total__payment-detail-text">
        <p>Metodo di pagamento: <strong>Carta di credito</strong></p>
    </div>

    <div class="c-total__values">
        <div class="c-total__final-price">
            <span class="c-total__label">Totale:</span><span class="c-total__price">€ 38,02</span>
        </div>
    </div>
</div>


<!-- Payment Type Complex -->
<div class="c-total c-total--payment-type">
    <div class="c-total__payment-detail-text">
        <p>Metodo di pagamento: <strong>Carta di credito</strong></p>
        <p>Parte della prenotazione è stata pagata con <strong>Voucher digitale</strong></p>
    </div>

    <div class="c-total__values">
        <div class="c-total__list">
            <div class="list-item">
                <div class="list-item__text">Totale prodotti</div>
                <div class="list-item__value">100,99 €</div>
            </div>
            <div class="list-item list-item--collapsible">
                <div class="c-collapsible o-collapsible o-collapsible--raw">
                    <p class="c-collapsible__title o-collapsible__title js-collapsible-title" id="">Voucher parcheggio (3)</p>
                    <div class="list-item list-item--small">
                        <div class="list-item__text">Voucher PARK12345MH</div>
                        <div class="list-item__value">20,99€</div>
                    </div>
                    <div class="list-item list-item--small">
                        <div class="list-item__text">Voucher PARK12345MH</div>
                        <div class="list-item__value">20,99€</div>
                    </div>
                    <div class="list-item list-item--small">
                        <div class="list-item__text">Voucher PARK12345MH</div>
                        <div class="list-item__value">20,99€</div>
                    </div>
                </div>

                <div class="list-item__value list-item__value--abs">-62,97 €</div>
            </div>
        </div>
        <div class="c-total__final-price">
            <span class="c-total__label">Totale:</span><span class="c-total__price">€ 38,02</span>
        </div>
    </div>
</div>


<!-- Default -->
<div class="c-total">
  <span class="c-total__label">Totale:</span><span class="c-total__price">{{ total-price }}</span>
</div>

<!-- Checkout -->
<div class="c-total c-total--checkout">
  <span class="c-total__label">Totale: <small class="c-total__fullprice">€ 96,50</small></span><span class="c-total__price">€ 83,40</span>
  {{> @button--as-link btn }}
</div>

<!-- Payment Type -->
<div class="c-total c-total--payment-type{{modifier}}">
  <div class="c-total__payment-detail-text">
    {{{ payment-detail-text }}}
  </div>

  <div class="c-total__values">
    {{#if list}}
    <div class="c-total__list">
      <div class="list-item">
        <div class="list-item__text">Totale prodotti</div>
        <div class="list-item__value">100,99 €</div>
      </div>
      <div class="list-item list-item--collapsible">
        {{#> @collapsible--raw disclosure }}
          {{#each @root.list }}
          <div class="list-item list-item--small">
            <div class="list-item__text">{{ text }}</div>
            <div class="list-item__value">{{ value }}</div>
          </div>
          {{/each}}
        {{/@collapsible--raw}}
        <div class="list-item__value list-item__value--abs">-62,97 €</div>
      </div>
    </div>
    {{/if}}
    <div class="c-total__final-price">
      <span class="c-total__label">Totale:</span><span class="c-total__price">€ 38,02</span>
    </div>
  </div>
</div>

<!-- Payment Type Complex -->
<div class="c-total c-total--payment-type{{modifier}}">
  <div class="c-total__payment-detail-text">
    {{{ payment-detail-text }}}
  </div>

  <div class="c-total__values">
    {{#if list}}
    <div class="c-total__list">
      <div class="list-item">
        <div class="list-item__text">Totale prodotti</div>
        <div class="list-item__value">100,99 €</div>
      </div>
      <div class="list-item list-item--collapsible">
        {{#> @collapsible--raw disclosure }}
          {{#each @root.list }}
          <div class="list-item list-item--small">
            <div class="list-item__text">{{ text }}</div>
            <div class="list-item__value">{{ value }}</div>
          </div>
          {{/each}}
        {{/@collapsible--raw}}
        <div class="list-item__value list-item__value--abs">-62,97 €</div>
      </div>
    </div>
    {{/if}}
    <div class="c-total__final-price">
      <span class="c-total__label">Totale:</span><span class="c-total__price">€ 38,02</span>
    </div>
  </div>
</div>
 
/* Default */
{
  "total-price": "€ 83,40"
}


/* Checkout */
{
  "total-price": "€ 83,40",
  "btn": {
    "name": "submit",
    "type": "button",
    "text": "Svuota carrello",
    "modifier": "c-button--as-link"
  }
}


/* Payment Type */
{
  "total-price": "€ 83,40",
  "payment-detail-text": "<p>Metodo di pagamento: <strong>Carta di credito</strong></p>"
}


/* Payment Type Complex */
{
  "total-price": "€ 83,40",
  "payment-detail-text": "<p>Metodo di pagamento: <strong>Carta di credito</strong></p><p>Parte della prenotazione è stata pagata con <strong>Voucher digitale</strong></p>",
  "list": [
    {
      "text": "Voucher PARK12345MH",
      "value": "20,99€"
    },
    {
      "text": "Voucher PARK12345MH",
      "value": "20,99€"
    },
    {
      "text": "Voucher PARK12345MH",
      "value": "20,99€"
    }
  ],
  "disclosure": {
    "modifier": "o-collapsible--raw",
    "title": "Voucher parcheggio (3)"
  }
}
  • Content: 
    .c-total {
  background-color: #fff;
  text-align: right;
  padding: remify(16px);
  color: secondary(text, 100);

  main & {
    grid-column: main;
  }

  span {
    font-size: 150%;
    color: secondary(text, 100);
    @include min-screen( bp(tablet) ) {
      font-size: 200%;
    }
  }

}
.c-total__label {
  font-weight: fw(light);

  .c-total__fullprice {
    text-decoration: line-through;
    font-size: remify(16px);
    vertical-align: middle;
  }

  @include max-screen( bp(phone-p) ) {
      display: block;
    }
}

.c-total__price {
  font-weight: fw(bold);
  margin-left: remify(24px);
}

.c-total__list {
  @include font-scale(level-1-5);
  color: secondary(text, 100);

  @include min-screen(bp(tablet)) {
    @include font-scale(level-2);
  }

  .list-item {
    display: flex;
    justify-content: space-between;
  }

  .list-item + .list-item {
    margin-top: remify(8px);
  }

  .list-item__value {
    font-weight: fw(bold);
  }

  .list-item--small {
    @include font-scale(level-1);
  }

  .list-item--collapsible {
    position: relative;
    
    .list-item__value--abs {
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .c-collapsible {
    width: 100%;
  }

  .c-collapsible__button {
    font-weight: fw(bold);
    color: primary(night, 100);
  }

  .o-collapsible__content {
    margin-top: remify(8px);
  }

}

/*------------------------------------*\
  Checkout modifier
\*------------------------------------*/

.c-total--checkout {
  text-align: right;

  button {
    display: block;
    margin-left: auto;

    @include min-screen( bp(tablet) ) {
      margin-right: 0;
    }
  }
}

/*------------------------------------*\
  Payment type modifier
\*------------------------------------*/

.c-total--payment-type {
  display: flex;
  flex-direction: column;
  gap: remify(16px);

  @include min-screen(bp(tablet)) {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: remify(24px);
  }

  .c-total__payment-detail-text {
    text-align: left;

    p + p {
      margin-top: remify(8px);
    }
  }

  .c-total__values {
    @include min-screen(bp(tablet)) {
      width: remify(400px);
    }
  }

  &:has(.c-total__list) {

    .c-total__final-price {
      display: flex;
      justify-content: space-between;
      border-top: remify(1px) solid primary(night, 20);
      padding-top: remify(12px);
      margin-top: remify(8px);
    }
  }

}
  • URL: /components/raw/total/_total.scss
  • Filesystem Path: src/views/02-molecules/total/_total.scss
  • Size: 2.4 KB

No notes defined.