Aeroporto di Bologna - Design System

Total: 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>
 
<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>
 
{
  "total-price": "€ 83,40",
  "payment-detail-text": "<p>Metodo di pagamento: <strong>Carta di credito</strong></p>"
}
  • 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.