<ul class="c-order-logs">
<li class="c-order-logs__item">
<div class="c-order-logs__item-date">
<span class="c-order-logs__item-date__day">
06
</span>
<span class="c-order-logs__item-date__month">
Nov
</span>
</div>
<div class="c-order-logs__item-content">
<h4 class="c-order-logs__item-heading">Transfer Order Log</h4>
A Sucker Rod Transfer <a href="#0">#0102-TT-0006618</a> was completed from Tenaris - RTS to RTS.
</div>
</li>
</ul>
<ul class="c-order-logs{{#if extraClassContainer}} {{extraClassContainer}}{{/if}}">
{{#each logs}}
<li class="c-order-logs__item">
<div class="c-order-logs__item-date">
<span class="c-order-logs__item-date__day">
{{date.day}}
</span>
<span class="c-order-logs__item-date__month">
{{date.month}}
</span>
</div>
<div class="c-order-logs__item-content">
<h4 class="c-order-logs__item-heading">{{itemHeading}} Order Log</h4>
{{{itemContent}}}
</div>
</li>
{{/each}}
</ul>
{
"logs": [
{
"itemHeading": "Transfer",
"itemContent": "A Sucker Rod Transfer <a href=\"#0\">#0102-TT-0006618</a> was completed from Tenaris - RTS to RTS.",
"date": {
"day": "06",
"month": "Nov"
}
}
]
}
.c-order-logs {
background-color: $color-white;
box-shadow: $global-box-shadow--md;
border-radius: $global-radius;
border: rem(1) solid $color-grey-100;
margin: 0 $space-unit;
padding: $space-unit;
> * + * {
margin-top: $space-unit;
}
}
.c-order-logs__item {
border: rem(1) solid $color-grey-300;
border-radius: $global-radius;
padding: $space-xs;
display: flex;
align-items: center;
> * + * {
margin-left: $space-unit;
}
}
.c-order-logs__item-date {
text-align: center;
line-height: 0.9;
> * {
font-weight: 600;
opacity: 0.8;
}
}
.c-order-logs__item-date__day {
display: block;
font-size: rem(26);
}
.c-order-logs__item-date__month {
font-size: rem(14);
}
.c-order-logs__item-content {
margin-top: rem(-1);
font-size: $text-size-7;
flex-basis: 100%;
> * + * {
margin-top: $space-xxxxs;
max-width: 100%;
}
& + & {
flex-basis: min-content;
}
}
.c-order-logs__item-heading {
font-size: $text-size-6;
}
There are no notes for this item.