Aeroporto di Bologna - Design System

Order: Static 

<div class="c-order c-order--static ">

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

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

    <div class="c-order__el c-order__el--data">
        <strong>Codice</strong>
        <p>PARK12345</p>
    </div>
    <div class="c-order__el c-order__el--data">
        <strong>Data di emissione</strong>
        <p>05/03/2024</p>
    </div>
    <div class="c-order__el c-order__el--data">
        <strong>Data di scadenza</strong>
        <p>05/06/2024</p>
    </div>
    <div class="c-order__el c-order__el--data">
        <strong>Ordine stornato</strong>
        <p><a href="#">N. 1102935 del 13/5/2023</a></p>
    </div>

    <div class="c-order__el c-order__el--total">
        <p>Totale: <strong>€ 83,40</strong></p>
    </div>

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

  <div class="c-order__el c-order__el--labels">
    {{#each multiple-labels}}
      {{> @rounded-label }}
    {{/each}}
    {{#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>
  </div>

</div>
 
{
  "label": {
    "modifier": null,
    "text": "In attesa di pagamento",
    "aria-label": null
  },
  "datas": [
    {
      "label": "Codice",
      "text": "PARK12345"
    },
    {
      "label": "Data di emissione",
      "text": "05/03/2024"
    },
    {
      "label": "Data di scadenza",
      "text": "05/06/2024"
    },
    {
      "label": "Ordine stornato",
      "text": "<a href=\"#\">N. 1102935 del 13/5/2023</a>"
    }
  ],
  "price": "€ 83,40",
  "multiple-labels": [
    {
      "modifier": "c-rounded-label--relevant",
      "text": "In attesa di approvazione",
      "aria-label": null
    }
  ]
}
  • 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.