product-purchased: Contract Plan Detail

Done

HTML
View
Context
Assets
Info
Notes


        
        <article class="product-purchased product-purchased--plan-detail">
    <div class="product-purchased__content product-purchased__content--cropped">
        <div class="product-purchased__top">
            <h3 class="product-purchased__top__title">
                Core
            </h3>
            <div class="product-purchased__top__price">
                <h3 class="price-title">
                    ¥9,800
                </h3>
                <small class="sub-text__info">Lorem ipsum dolor sit amet.</small>
            </div>
        </div>

        <div class="spacer spacer--4"></div>

        <div class="grid grid--three-col">
            <div class="grid__col grid__col--fullw">
                <div class="col__label">Payment date</div>
                <div class="col__content">Nov 02 2022</div>
            </div>
            <div class="grid__col grid__col--fullw">
                <div class="col__label">Next Expiring date</div>
                <div class="col__content">Nov 20 2022</div>
            </div>
        </div>

        <div class="spacer spacer--4"></div>

        <div class="device">
            <div class="grid__col grid__col--fullw">
                <div class="col__label">Device 1</div>

                <div class="col__content col__content--device">
                    <span class="device__label">
                        <svg class="icon-desktop" xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-desktop" viewBox="0 0 50 41">
                            <rect width="49" height="32" x=".5" y=".5" stroke="currentColor" rx="1.95" />
                            <path stroke="currentColor" d="M0 25.753h50" />
                            <path stroke="currentColor" stroke-linecap="round" d="M15.278 40h20.556" />
                            <ellipse cx="25.555" cy="29.041" fill="currentColor" rx=".833" ry=".822" />
                            <path stroke="currentColor" stroke-linecap="round" d="M25.556 32.877v6.986" />
                        </svg>

                        Anonymous PC
                    </span>

                    <div class="toggle">
                        <input class="toggle__checkbox" type="checkbox" id="toggle-toggle-1" checked>
                        <label class="toggle__label" for="toggle-toggle-1">Lorem ipsum</label>
                    </div>

                </div>

            </div>
        </div>
        <div class="device">
            <div class="grid__col grid__col--fullw">
                <div class="col__label">Device 2</div>

                <div class="col__content col__content--device">
                    <span class="device__label">
                        <svg class="icon-desktop" xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-desktop" viewBox="0 0 50 41">
                            <rect width="49" height="32" x=".5" y=".5" stroke="currentColor" rx="1.95" />
                            <path stroke="currentColor" d="M0 25.753h50" />
                            <path stroke="currentColor" stroke-linecap="round" d="M15.278 40h20.556" />
                            <ellipse cx="25.555" cy="29.041" fill="currentColor" rx=".833" ry=".822" />
                            <path stroke="currentColor" stroke-linecap="round" d="M25.556 32.877v6.986" />
                        </svg>

                        Anonymous PC
                    </span>

                    <div class="toggle">
                        <input class="toggle__checkbox" type="checkbox" id="toggle-toggle-2">
                        <label class="toggle__label" for="toggle-toggle-2">Lorem ipsum</label>
                    </div>

                </div>

            </div>
        </div>
        <div class="device">
            <div class="grid__col grid__col--fullw">
                <div class="col__label">Device 3</div>

                <div class="col__content col__content--device">
                    <span class="device__label">
                        <svg class="icon-desktop" xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-desktop" viewBox="0 0 50 41">
                            <rect width="49" height="32" x=".5" y=".5" stroke="currentColor" rx="1.95" />
                            <path stroke="currentColor" d="M0 25.753h50" />
                            <path stroke="currentColor" stroke-linecap="round" d="M15.278 40h20.556" />
                            <ellipse cx="25.555" cy="29.041" fill="currentColor" rx=".833" ry=".822" />
                            <path stroke="currentColor" stroke-linecap="round" d="M25.556 32.877v6.986" />
                        </svg>

                        Anonymous PC
                    </span>

                    <div class="toggle">
                        <input class="toggle__checkbox" type="checkbox" id="toggle-toggle-3">
                        <label class="toggle__label" for="toggle-toggle-3">Lorem ipsum</label>
                    </div>

                </div>

            </div>
        </div>
        <div class="device">
            <div class="grid__col grid__col--fullw">
                <div class="col__label">Device 4</div>

                <div class="col__content col__content--device">
                    <span class="device__label">
                        <svg class="icon-desktop" xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-desktop" viewBox="0 0 50 41">
                            <rect width="49" height="32" x=".5" y=".5" stroke="currentColor" rx="1.95" />
                            <path stroke="currentColor" d="M0 25.753h50" />
                            <path stroke="currentColor" stroke-linecap="round" d="M15.278 40h20.556" />
                            <ellipse cx="25.555" cy="29.041" fill="currentColor" rx=".833" ry=".822" />
                            <path stroke="currentColor" stroke-linecap="round" d="M25.556 32.877v6.986" />
                        </svg>

                        Anonymous PC
                    </span>

                    <div class="toggle">
                        <input class="toggle__checkbox" type="checkbox" id="toggle-toggle-4">
                        <label class="toggle__label" for="toggle-toggle-4">Lorem ipsum</label>
                    </div>

                </div>

            </div>
        </div>
        <div class="device">
            <div class="grid__col grid__col--fullw">
                <div class="col__label">Device 5</div>

                <div class="col__content col__content--device">
                    <span class="device__label">
                        <svg class="icon-desktop" xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-desktop" viewBox="0 0 50 41">
                            <rect width="49" height="32" x=".5" y=".5" stroke="currentColor" rx="1.95" />
                            <path stroke="currentColor" d="M0 25.753h50" />
                            <path stroke="currentColor" stroke-linecap="round" d="M15.278 40h20.556" />
                            <ellipse cx="25.555" cy="29.041" fill="currentColor" rx=".833" ry=".822" />
                            <path stroke="currentColor" stroke-linecap="round" d="M25.556 32.877v6.986" />
                        </svg>

                        Anonymous PC
                    </span>

                    <div class="toggle">
                        <input class="toggle__checkbox" type="checkbox" id="toggle-toggle-5">
                        <label class="toggle__label" for="toggle-toggle-5">Lorem ipsum</label>
                    </div>

                </div>

            </div>
        </div>
        <div class="device">
            <div class="grid__col grid__col--fullw">
                <div class="col__label">Device 6</div>

                <div class="col__content col__content--device">
                    <span class="device__label">
                        <svg class="icon-mobile" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 55">
                            <path stroke="currentColor" stroke-linecap="round" d="M10.175 3.87h6.26" />
                            <rect width="29" height="54" x=".5" y=".5" stroke="currentColor" rx="2.083" />
                            <path stroke="currentColor" d="M0 47.814h30M0 7.186h30" />
                            <ellipse cx="14.87" cy="51.131" fill="currentColor" rx=".783" ry=".829" />
                            <ellipse cx="19.305" cy="3.869" fill="currentColor" rx=".783" ry=".829" />
                        </svg>

                        Anonymous Phone
                    </span>

                    <div class="toggle">
                        <input class="toggle__checkbox" type="checkbox" id="toggle-toggle-6">
                        <label class="toggle__label" for="toggle-toggle-6">Lorem ipsum</label>
                    </div>

                </div>

            </div>
        </div>

        <div class="spacer spacer--4"></div>

        <div class="product-purchased__bottom">
            <span class="product-purchased__bottom__left">
                Lorem ipsum dolor sit amet.
            </span>
            <div class="product-purchased__bottom__right">
                <span class="price-title">
                    Lorem ipsum dolor sit amet consectetur adipiscing elit.
                </span>
            </div>
        </div>
    </div>
</article>


        <article class="product-purchased product-purchased--plan-detail">
  <div class="product-purchased__content product-purchased__content--cropped">
    <div class="product-purchased__top">
      <h3 class="product-purchased__top__title">
          Core
      </h3>
      <div class="product-purchased__top__price">
        <h3 class="price-title">
          ¥9,800
        </h3>
        <small class="sub-text__info">Lorem ipsum dolor sit amet.</small>
      </div>
    </div>

    <div class="spacer spacer--4"></div>

    <div class="grid grid--three-col">
      <div class="grid__col grid__col--fullw">
        <div class="col__label">Payment date</div>
        <div class="col__content">{{paymentdate}}</div>
      </div>
      <div class="grid__col grid__col--fullw">
        <div class="col__label">Next Expiring date</div>
        <div class="col__content">{{expiredate}}</div>
      </div>
    </div>

    <div class="spacer spacer--4"></div>

    {{#each devices }}
      <div class="device">
        <div class="grid__col grid__col--fullw">
          <div class="col__label">{{this.id}}</div>

          <div class="col__content col__content--device">
            <span class="device__label">
              {{#if this.isdesktop}}
                {{render '@icon-desktop' }}
              {{/if}}
              {{#if this.ismobile}}
                {{render '@icon-mobile' }}
              {{/if}}
              {{this.label}}
            </span>

            {{render '@toggle' this.toggle merge=true }}
          </div>

        </div>
      </div>
    {{/each}}

    <div class="spacer spacer--4"></div>

    <div class="product-purchased__bottom">
      <span class="product-purchased__bottom__left">
          Lorem ipsum dolor sit amet.
      </span>
      <div class="product-purchased__bottom__right">
        <span class="price-title">
          Lorem ipsum dolor sit amet consectetur adipiscing elit.
        </span>
      </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
devices:
  - id: Device 1
    label: Anonymous PC
    isdesktop: true
    ismobile: false
    toggle:
      id: toggle-1
      label: Lorem ipsum
      checked: true
  - id: Device 2
    label: Anonymous PC
    isdesktop: true
    ismobile: false
    toggle:
      id: toggle-2
      label: Lorem ipsum
  - id: Device 3
    label: Anonymous PC
    isdesktop: true
    ismobile: false
    toggle:
      id: toggle-3
      label: Lorem ipsum
  - id: Device 4
    label: Anonymous PC
    isdesktop: true
    ismobile: false
    toggle:
      id: toggle-4
      label: Lorem ipsum
  - id: Device 5
    label: Anonymous PC
    isdesktop: true
    ismobile: false
    toggle:
      id: toggle-5
      label: Lorem ipsum
  - id: Device 6
    label: Anonymous Phone
    isdesktop: false
    ismobile: true
    toggle:
      id: toggle-6
      label: Lorem ipsum

File:

Content:
URL: /components/raw/product-purchased/product-purchased.png
Filesystem Path: ../src/03_molecules/product-purchased/product-purchased.png
Size: 48.8 KB

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

Handle: @product-purchased--plan-detail
Variants (6): Default , Atc , Contract Plan , Contract Plan Detail , Atc Small Detail , Atc Small
Preview:
- With layout
- Component only
Filesystem Path: ../src/03_molecules/product-purchased/product-purchased--plan-detail.hbs
References (3): @icon-desktop, @icon-mobile, @toggle
Referenced by (1): @mypage--rekordbox-contract-detail

No notes defined.