<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
  • Content:
    .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;
    }
    
  • URL: /components/raw/product-purchased/product-purchased.scss
  • Filesystem Path: ../src/03_molecules/product-purchased/product-purchased.scss
  • Size: 4.9 KB

No notes defined.