<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>
<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>
{
"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"
}
}
.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;
}
}
}
No notes defined.