<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>
<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>
{
"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"
}
.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.