Order

Reviewed

HTML
View
Context
Assets
Info
Notes


        
        
            <!-- 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>


        
            <!-- Collapsible -->
<div class="c-order c-order--collapsible">

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

            Inviato
        </span>
    </div>

    <div class="c-order__el c-order__el--data">
        <strong>Tipo</strong>
        <p>Rimborso</p>
    </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 invio</strong>
        <p>05/03/2018</p>
    </div>
    <div class="c-order__el c-order__el--data">
        <strong>Tematica</strong>
        <p>Parcheggi</p>
    </div>

    <div class="c-order__el c-order__el--data c-order__el--full">
        <strong>Messaggio</strong>
        <p>Salve, vi scrivo per segnalarvi come suggerimento…</p>
        <div class="fulltext" id="more-1">
            <a class="more" href="#more-1">Leggi di più</a>

            <p>lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi dolore aliquam nostrum minima, praesentium repellendus accusamus enim recusandae saepe debitis corporis odio distinctio veniam hic, laudantium, officia dolores incidunt mollitia!</p>

            <a class="less" href="#less-1">Leggi di meno</a>

        </div>
    </div>

</div>


        
            <!-- 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>


        
            <!-- Button -->
<div class="c-order c-order--button ">

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

            Usato parzialmente
        </span> <span class="c-rounded-label c-rounded-label--dark" aria-label="">

            In scadenza
        </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 ancora disponibile: <strong>€ 83,40</strong>
    </div>

    <div class="c-order__el">
        <button type="button" class="c-button c-button--submit js-fr-dialogmodal-open" aria-label="Apri la modale per consultare il dettaglio del voucher" aria-controls="dialog-voucher-detail">

            Dettaglio voucher

        </button>
    </div>

</div>


        <!-- Default -->
<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>

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

  <div class="c-order__el c-order__el--state">
    {{> @rounded-label label}}
  </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--data c-order__el--full">
    <strong>Messaggio</strong>
    <p>Salve, vi scrivo per segnalarvi come suggerimento…</p>
    <div class="fulltext" id="more-1">
      <a class="more" href="#more-1">Leggi di più</a>

      <p>lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi dolore aliquam nostrum minima, praesentium repellendus accusamus enim recusandae saepe debitis corporis odio distinctio veniam hic, laudantium, officia dolores incidunt mollitia!</p>

      <a class="less" href="#less-1">Leggi di meno</a>

    </div>
  </div>

</div>

<!-- Static -->
<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>

<!-- Button -->
<div class="c-order c-order--button {{ 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>{{ pre-total-text }} <strong>{{ price }}</strong>
  </div>

  {{#if btn-voucher-detail}}
  <div class="c-order__el">
    {{> @button btn-voucher-detail }}
  </div>
  {{/if}}

</div>


        
        
            /* Default */
{
  "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"
}


        
            /* Collapsible */
{
  "label": {
    "modifier": "c-rounded-label--positive",
    "text": "Inviato",
    "aria-label": null
  },
  "datas": [
    {
      "label": "Tipo",
      "text": "Rimborso"
    },
    {
      "label": "N°",
      "text": "8846213"
    },
    {
      "label": "Data invio",
      "text": "05/03/2018"
    },
    {
      "label": "Tematica",
      "text": "Parcheggi"
    }
  ],
  "price": "€ 83,40",
  "modifier": "c-order--collapsible"
}


        
            /* Static */
{
  "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
    }
  ]
}


        
            /* Button */
{
  "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": "Usato parzialmente",
      "aria-label": null
    },
    {
      "modifier": "c-rounded-label--dark",
      "text": "In scadenza",
      "aria-label": null
    }
  ],
  "pre-total-text": "Totale ancora disponibile:",
  "btn-voucher-detail": {
    "name": "default",
    "type": "button",
    "text": "Dettaglio voucher",
    "modifier": "c-button--submit js-fr-dialogmodal-open",
    "opens-dialog": "dialog-voucher-detail",
    "aria-label": "Apri la modale per consultare il dettaglio del voucher"
  }
}

File:

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

Handle: @order
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/order/order.hbs
References (2): @rounded-label, @icon
Referenced by (4): @page-orders-list, @page-reclaims-list, @page-mbl-vouchers-list, @page-parking-vouchers-list

No notes defined.