Aeroporto di Bologna - Design System

Order: Default 

<div class="c-order ">

    <div class="c-order__el c-order__el--labels">
        <span class="c-rounded-label " aria-label="">

            In attesa di pagamento
        </span>
    </div>

    <div class="c-order__el c-order__el--data">
        <strong>N°</strong>
        <p>8846213</p>
    </div>
    <div class="c-order__el c-order__el--data">
        <strong>Data acquisto</strong>
        <p>05/03/2018 - 10:30</p>
    </div>
    <div class="c-order__el c-order__el--data">
        <strong>Pagamento</strong>
        <p>Carta di credito</p>
    </div>
    <div class="c-order__el c-order__el--data">
        <strong>Prodotti</strong>
        <p>P1, Lounge</p>
    </div>

    <div class="c-order__el c-order__el--total">
        <p>Totale: <strong>€ 83,40</strong></p>
        <a href="../preview/page-order-detail.html" class="go-to-detail">Vai al dettaglio dell'ordine <span aria-hidden="true">&#x2192;</span></a>
    </div>

    <div class="c-order__visualCta">
        <a href="../preview/page-order-detail.html" class="c-link c-link--icon" aria-label="Vai al dettaglio dell'ordine">
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic_chevron_right_black_24px"></use>
            </svg> </a>
    </div>

</div>
 
<div class="c-order {{ modifier }}">

  <div class="c-order__el c-order__el--labels">
    {{#if multiple-labels}}
      {{#each multiple-labels}}
        {{> @rounded-label }}
      {{/each}}
    {{else}}
      {{> @rounded-label label}}
    {{/if}}
    {{#if label-extra-text}}<p class="extra-label-text">{{ label-extra-text }}</p>{{/if}}
  </div>
  
  {{#each datas}}
    <div class="c-order__el c-order__el--data">
      <strong>{{ this.label }}</strong>
      <p>{{ this.text }}</p>
    </div>
  {{/each}}

  <div class="c-order__el c-order__el--total">
    <p>Totale: <strong>{{ price }}</strong></p>
    <a href="{{ path '/components/preview/page-order-detail' }}" class="go-to-detail">Vai al dettaglio dell'ordine <span aria-hidden="true">&#x2192;</span></a>
  </div>

  <div class="c-order__visualCta">
    <a href="{{ path '/components/preview/page-order-detail' }}" class="c-link c-link--icon" aria-label="Vai al dettaglio dell'ordine">
      {{> @icon symbol="ic_chevron_right_black_24px" class="c-icon c-icon--24" }}
    </a>
  </div>

</div>
 
{
  "label": {
    "modifier": null,
    "text": "In attesa di pagamento",
    "aria-label": null
  },
  "datas": [
    {
      "label": "N°",
      "text": "8846213"
    },
    {
      "label": "Data acquisto",
      "text": "05/03/2018 - 10:30"
    },
    {
      "label": "Pagamento",
      "text": "Carta di credito"
    },
    {
      "label": "Prodotti",
      "text": "P1, Lounge"
    }
  ],
  "price": "€ 83,40"
}
  • Content: 
    .c-order {
  display: flex;
  flex-direction: column;
  @include shadow(medium);
  background-color: #fff;
  border-radius: remify(4px);
  padding: remify(16px);
  position: relative;
  gap: remify(16px);

  @include min-screen (bp(tablet)) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: remify(24px);
  }

  main & {
    margin-bottom: remify(16px);

    @supports (display: grid) {
      grid-column: main;
      margin-bottom: 0;
    }
    
  }

  .c-rounded-label {
    display: inline-block;
    @include font-scale(level-1);
  }

  .c-rounded-label + .c-rounded-label {
    margin-top: remify(8px);
  }

}

.c-order__el {
 width: 100%;
//  margin-bottom: remify(16px);

 &:last-child {
   margin-bottom: 0;
 }

  strong, p {
    display: block;
  }

  @include min-screen (remify(1300px)) {
    width: auto;
    // margin-bottom: 0;
  }

  .extra-label-text {
    @include font-scale(level-1-5);
    margin-top: remify(4px);
    
    @include min-screen (remify(1300px)) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-wrap: balance;
    }
  }

}

.c-order__el--labels {
  @include min-screen (remify(1300px)) {
    width: remify(200px);
  }
}

.c-order__el--data {
  width: auto;

  // @include min-screen (bp(tablet)) {
  //   width: 25%;
  // }

  // @include min-screen (remify(1300px)) {
  //   width: auto;
  // }

  strong {
    color: primary(night, 100);
    text-transform: uppercase;
  }

}

.c-order__el--total {
  color: primary(night, 100);

  @include min-screen (bp(phablet)) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  strong, p {
    display: inline-block;
  }

  p {
    @include font-scale(level-2);
  }

  strong {
    @include font-scale(level-4);
  }

  a.go-to-detail {
    display: block;
    margin-top: remify(16px);

    @include min-screen (remify(640px)) {
      margin-top: 0;
    }
    
    @include min-screen (remify(1300px)) {
      display: none;
    }

  }

}

.c-order__visualCta {
  display: none;
  @include min-screen( remify(1300px) ) {
    display: block;
    position: absolute;
    top: 50%;
    right: remify(-30px);
    transform: translateY(-50%);
  }
}

/*------------------------------------*\
  Collapsible modifier
\*------------------------------------*/

.c-order--collapsible {

  .c-order__el--state {
    @include min-screen (remify(1300px)) {
      margin-right: remify(16px);
    }
  }

  .c-order__el--data {
    @include min-screen (remify(1300px)) {
      flex: 0 1 16.666%;
    }
  }

  .c-order__el--full {
    width: 100%;
    @include min-screen (remify(1300px)) {
      width: auto;
      flex-grow: 1;
    }
  }

  .fulltext p,
  .less {
    display: none;
  }

  .fulltext:target p,
  .fulltext:target .less {
    display: block;
  }

  .fulltext:target .more {
    display: none;
  }

}

/*------------------------------------*\
  Static modifier
\*------------------------------------*/
.c-order--static {
  justify-content: space-between;
}

/*------------------------------------*\
  Fold modifier
\*------------------------------------*/
.c-order--static,
.c-order--button {
  justify-content: space-between;

  @include min-screen (bp(tablet-l)) {
    flex-wrap: nowrap;
    gap: remify(8px);
  }

  .c-order__el--total {
    @include min-screen (bp(tablet-l)) {
      max-width: remify(200px);
      text-align: right;
    }
  }

}
  • URL: /components/raw/order/_order.scss
  • Filesystem Path: src/views/03-organisms/order/_order.scss
  • Size: 3.5 KB

No notes defined.