<article class="product-purchased">
<div class="product-purchased__header">
<div class="product-purchased__visual">
<div class="product-purchased__image">
<picture class="visual">
<img data-sizes="auto" data-src="/graphics/product-purchased.png" class="lazyload" alt="">
</picture>
</div>
</div>
<div class="product-purchased__actions actions actions--center actions--force">
<div class="actions__item">
<a href="#" class="product-purchased__link--register gap--s--top-out-1 link link--colored">
<span class="link__label">Register your product</span>
</a>
</div>
</div>
</div>
<div class="product-purchased__content">
<div class="grid grid--three-col">
<div class="grid__col grid__col--half">
<div class="col__label">Order number</div>
<div class="col__content">xxxxxxxxxxxxx</div>
</div>
<div class="grid__col grid__col--half">
<div class="col__label">Order date</div>
<div class="col__content">October 22, 2024</div>
</div>
<div class="grid__col grid__col--half">
<div class="col__label">Product name</div>
<div class="col__content">CDJ-2000NXS2</div>
</div>
<div class="grid__col grid__col--half">
<div class="col__label">Order amount</div>
<div class="col__content">€ 1.000</div>
</div>
<div class="grid__col grid__col--half">
<div class="col__label">Shipping adress</div>
<div class="col__content">Lorem ipsum dolor</div>
</div>
</div>
<div class="product-purchased__actions actions actions--end actions--force">
<div class="actions__item">
<a href="#" class="product-purchased__link--invoice link link--colored link--icon-download">
<span class="link__icon">
<svg class="icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M8.675 5.592V2h-1.35v3.592H5L8 10l3-4.408H8.675Z" fill="currentColor" />
<path d="M2 9v3h12V9" stroke="currentColor" />
</svg>
</span>
<span class="link__label">Download invoice</span>
</a>
</div>
</div>
</div>
</article>
<article class="product-purchased{{#if class}} {{ class }}{{/if}}">
<div class="product-purchased__header">
<div class="product-purchased__visual">
<div class="product-purchased__image">
{{render '@visual' visual merge=true }}
</div>
</div>
<div class="product-purchased__actions actions actions--center actions--force">
<div class="actions__item">
{{#if registered}}
<span class="product-purchased__link--register gap--s--top-out-1">Product registered</span>
{{else}}
{{render '@link' register merge=true}}
{{/if}}
</div>
</div>
</div>
<div class="product-purchased__content">
<div class="grid grid--three-col">
<div class="grid__col grid__col--half">
<div class="col__label">Order number</div>
<div class="col__content">{{ordernr}}</div>
</div>
<div class="grid__col grid__col--half">
<div class="col__label">Order date</div>
<div class="col__content">{{date}}</div>
</div>
<div class="grid__col grid__col--half">
<div class="col__label">Product name</div>
<div class="col__content">{{label}}</div>
</div>
<div class="grid__col grid__col--half">
<div class="col__label">Order amount</div>
<div class="col__content">{{price}}</div>
</div>
<div class="grid__col grid__col--half">
<div class="col__label">Shipping adress</div>
<div class="col__content">{{adress}}</div>
</div>
</div>
<div class="product-purchased__actions actions actions--end actions--force">
<div class="actions__item">
{{render '@link--icon-download' downloadinvoice merge=true}}
</div>
</div>
</div>
</article>
id: CAPRMAAJP0000001
visual:
src: /graphics/product-purchased.png
label: CDJ-2000NXS2
ordernr: xxxxxxxxxxxxx
adress: Lorem ipsum dolor
date: xxxx-xx-xx
price: € 1.000
name: Core
purchase: Jun 22 2022
termination: Jun 22 2022
plan: Professional
paymentdate: Nov 02 2022
expiredate: Nov 20 2022
payment: credit card
email: lorem.ipsum@gmail.com
expired: false
downloadinvoice:
label: Download invoice
modifier: colored
class: product-purchased__link--invoice
register:
label: Register your product
modifier: colored
class: product-purchased__link--register gap--s--top-out-1
.product-purchased {
display: flex;
flex-direction: row;
width: 100%;
border: 1px solid var(--color--neutrals-3);
padding: var(--gap--4);
&:not(:last-child) {
margin-bottom: var(--gap--6);
}
&--atc,
&--atc-small,
&--expired {
flex-direction: column;
}
&--atc {
.product-purchased__content {
.grid__col {
flex: 100%;
}
.grid__col--half {
flex-direction: column;
align-items: flex-start;
}
}
}
&--atc-small {
& + .mypage__titlewrap--subtitle {
margin-top: auto !important;
}
}
}
.product-purchased__info {
.product-purchased__content {
padding-top: 0 !important;
padding-bottom: var(--gap--4);
}
}
.product-purchased__expired {
display: flex;
justify-content: flex-end;
color: var(--color--negative);
}
.product-purchased__visual {
width: 125px;
background-color: var(--color--neutrals-1);
padding: var(--gap--8);
margin-right: var(--gap--4);
@media (min-width: 1100px) {
padding: 0 var(--gap--2);
}
.product-purchased--atc & {
width: 100%;
}
}
.product-purchased__image {
display: block;
position: relative;
width: 100%;
height: 0;
transition: transform 700ms;
backface-visibility: hidden;
padding-top: 100%;
.product-purchased__visual:hover & {
@media (hover:hover) {
transform: scale(1.05);
}
}
img {
object-fit: contain !important;
}
}
.product-purchased__heading {
#the-bucket & {
margin-bottom: var(--gap--2);
}
}
.product-purchased__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
&__price {
display: flex;
flex-direction: column;
align-items: flex-end;
h3 {
font-weight: 600 !important;
color: var(--color--action) !important;
}
}
}
.product-purchased__bottom {
display: flex;
justify-content: space-between;
align-items: baseline;
&__left {
color: var(--color--neutrals-4);
}
&__right {
color: var(--color--negative);
}
}
.product-purchased__content {
// padding-left: var(--gap--6);
.product-purchased--atc & {
padding-top: var(--gap--6);
padding-left: 0;
}
}
.product-purchased__link--invoice {
display: flex;
font-size: 12px;
}
.product-purchased__link--register {
display: flex;
align-items: center;
font-size: 12px;
}
.sub-text__wrapper {
display: flex;
justify-content: space-between;
}
.sub-text__info {
color: var(--color--neutrals-4);
&--alert {
color: var(--color--negative);
}
}
.device {
padding: var(--gap--1) 0;
.product-purchased--plan & {
.grid__col {
flex-flow: column;
align-items: flex-start;
}
.col__content {
margin-top: var(--gap--2);
}
}
.col__content {
display: flex;
flex-flow: row wrap;
}
.col__content--device {
justify-content: space-between;
}
.link--edit {
justify-self:flex-end;
margin-left: auto;
}
&__label {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 290px;
svg {
display: inline-block !important;
width: auto;
height: 1.8em;
vertical-align: middle;
margin-right: var(--gap--2);
}
@media all and (min-width: 750px) {
max-width: 70%;
}
}
}
// Mypage Rekordbox
.grid__item:has(.product-purchased--atc-small + .mypage__titlewrap) {
.product-purchased--atc-small {
@media all and (min-width: 750px) {
margin-bottom: auto;
}
}
}
.product-purchased--plan-detail {
display: inline-block;
}
// checkbox slider
.checkbox--slider {
display: flex;
align-items: center;
&__inner {
display: inline-block;
position: relative;
width: var(--gap--16);
height: var(--gap--8);
border: none;
}
&__inner input {
display: none;
width: 100% !important;
height: 100% !important;
}
&__slider {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: var(--color--neutrals-2);
transition: 400ms;
cursor: pointer;
&:before {
content: "";
position: absolute;
width: var(--gap--6);
height: var(--gap--6);
bottom: var(--gap--1);
left: var(--gap--1);
background-color: var(--color--neutrals-0);
transition: 400ms;
}
}
&__label {
padding-left: var(--gap--4);
}
}
input:checked + .checkbox--slider__slider {
background-color: var(--color--action);
cursor: pointer;
&:before {
transform: translateX(var(--gap--8));
}
}
.checkbox--slider__slider.circle {
border-radius: var(--gap--8);
cursor: pointer;
&:before {
border-radius: 50%;
}
}
.col__container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.product-purchased--atc-small-detail--empty {
display: block;
}
No notes defined.