Aeroporto di Bologna - Design System

Order Recap 

<div class="c-order-recap">
    <div class="c-order-recap__block">
        <p class="c-order-recap__block-title">Stato</p>
        <div class="c-order-recap__block-content">

            <span class="c-rounded-label c-rounded-label--positive c-rounded-label--small" aria-label="">

                Pagamento ricevuto
            </span>
        </div>
    </div>
    <div class="c-order-recap__block">
        <p class="c-order-recap__block-title">Data di acquisto</p>
        <div class="c-order-recap__block-content">
            <p class="c-order-recap__block-text">10/09/2017</p>

        </div>
    </div>
    <div class="c-order-recap__block">
        <p class="c-order-recap__block-title">Modalità di pagamento</p>
        <div class="c-order-recap__block-content">
            <p class="c-order-recap__block-text">Carta di credito, Voucher</p>

        </div>
    </div>
    <div class="c-order-recap__block">
        <p class="c-order-recap__block-title">Fattura</p>
        <div class="c-order-recap__block-content">

            <div class="c-order-recap__billing">
                <div class="c-pictogram">
                    <span class="c-pictogram__icon">
                        <svg class="c-icon--24 u-color-positive">
                            <use xlink:href="#ic-confirm-24px"></use>
                        </svg> </span>
                    <p class="c-pictogram__text">Richiesta</p>
                </div> <button type="button" class="c-button c-button--as-link billing-button js-fr-dialogmodal-open" aria-controls="dialog-billing-info">

                    Dati fatturazione

                </button>
            </div>

        </div>
    </div>
</div>
 
<div class="c-order-recap{{#if modifier}} {{modifier}}{{/if}}">
  {{#each blocks}}
  <div class="c-order-recap__block">
    <p class="c-order-recap__block-title">{{{ title }}}</p>
    <div class="c-order-recap__block-content">
      {{#if text}}<p class="c-order-recap__block-text">{{{ text }}}</p>{{/if}}
      {{#if billing}}
      <div class="c-order-recap__billing">
        {{> @pictogram billing.pictogram }}
        {{> @button billing.button }}
      </div>
      {{/if}}
      {{#if label}}{{> @rounded-label label }}{{/if}}
    </div>
  </div>
  {{/each}}
</div>
 
{
  "blocks": [
    {
      "title": "Stato",
      "label": {
        "text": "Pagamento ricevuto",
        "modifier": "c-rounded-label--positive c-rounded-label--small"
      }
    },
    {
      "title": "Data di acquisto",
      "text": "10/09/2017"
    },
    {
      "title": "Modalità di pagamento",
      "text": "Carta di credito, Voucher"
    },
    {
      "title": "Fattura",
      "billing": {
        "pictogram": {
          "icon": {
            "symbol": "ic-confirm-24px",
            "class": "c-icon--24 u-color-positive"
          },
          "text": "Richiesta"
        },
        "button": {
          "type": "button",
          "text": "Dati fatturazione",
          "modifier": "c-button--as-link billing-button js-fr-dialogmodal-open",
          "opens-dialog": "dialog-billing-info"
        }
      }
    }
  ]
}
  • Content: 
    .c-order-recap {
  display: grid;
  grid-template-columns: 1fr;
  background-color: primary(sky, 20);
  border-radius: remify(20px);
  padding: remify(24px) remify(16px);
  gap: remify(16px);

  @include min-screen(bp(phablet)) {
    grid-template-columns: repeat(2, 1fr);
    gap: remify(24px);
  }

  @include min-screen(bp(tablet-p)) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.c-order-recap__block {
  border-bottom: 1px solid primary(sky, 60);
  padding-bottom: remify(16px);

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }


  @include min-screen(bp(phablet)) {
    border-bottom: none;
    border-right: 1px solid primary(sky, 60);
    padding-bottom: 0;

    &:nth-child(even) {
      border-right: none;
    }
  }

  @include min-screen(bp(tablet-p)) {
    &:nth-child(even) {
      border-right: 1px solid primary(sky, 60);
    }
    &:last-child {
      border-right: none;
    }
  }

}

.c-order-recap__block-title,
.c-order-recap__block-content,
.c-order-recap__block-content .billing-button {
  @include font-scale(level-2);
  color: secondary(text, 100);
}

.c-order-recap__block-title {
  font-weight: fw(bold);
}

.c-order-recap__billing {
  display: flex;
  align-items: center;
  gap: remify(8px) remify(16px);
  flex-wrap: wrap;
}
  • URL: /components/raw/order-recap/_order-recap.scss
  • Filesystem Path: src/views/03-organisms/order-recap/_order-recap.scss
  • Size: 1.3 KB

No notes defined.