inventory-timeline

product-history   

Copy
Edit
<!-- components/sidebar-popup/product-history.html --> <!-- timeline--active --> <button class="base-btn" data-sidebar-target = "#timelineOne">open timeline</button> <div class="sidebar-popup" id="timelineOne"> <div class="timeline__container"> <div class="timeline__header"> <h2 class="text-lg gray-900"> <span>Product History</span> <i class="icomoon-x"></i> </h2> </div> <div class="timeline__product"> <div class="product__details bg-primary-50"> <div class="details__image"> <img class="details__image__thumbnail" src="atomic-core/img/iphon11.jpg" alt=""> </div> <div class="details__container"> <a href="#" class="primary-900 text-md"> <span>iPhone 13 Sierra Blue</span> <i class="icomoon-arrow-right primary-900"></i> </a> <div> <span class="badges badges-gray">Sierra Blue</span> <span class="badges badges-gray">265GB</span> </div> </div> </div> <div class="timeline__list"> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption caption--danger text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption caption--success text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption caption--success text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption caption--success text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption caption--success text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> </div> </div> </div> </div> <button class="base-btn" data-sidebar-target = "#timelineT">open timeline2</button> <div class="sidebar-popup" id="timelineT"> <div class="timeline__container"> <div class="timeline__header"> <h2 class="text-lg gray-900"> <span>Product History</span> <i class="icomoon-x"></i> </h2> </div> <div class="timeline__product"> <div class="timeline__list"> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption caption--danger text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption caption--success text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption caption--success text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption caption--success text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> <div class="timeline__item"> <div class="item__placeholder"> <span class="placeholder__circle text-md primary-600 bg-primary-50"> JC </span> </div> <div class="item__details"> <h3 class="details__header"> <span class="text-md gray-900">Jane Cooper</span> <span class="details__header__date text-sm gray-500">Today 2:00pm</span> </h3> <p class="details__info"> <span class="info__caption text-sm">Manual Decrease </span> <span class="info__date text-sm gray-500">From <b>30 </b>to <b>28</b></span> </p> </div> </div> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/sidebar-popup/_product-history.scss */ .sidebar-popup{ position: fixed; top: 0; left: 0; width: 100%; z-index: 4444; height: 100%; background: rgba(52, 64, 84, 0.6); opacity: 0; visibility: hidden; transition: .3s all ease-in-out; .timeline__container{ background: #fff; height: 100%; width: 432px; margin-#{$start}: auto; position: relative; overflow-y: auto; overflow-x: hidden; position: relative; #{$end}: -100%; transition: .3s all ease-in-out; @media (max-width: 991px) { width: 100%; } .timeline__header{ padding: 17px 22px; border-bottom: 1px solid #E4E7EC; h2{ display: flex; align-items: center; justify-content: space-between; i{ font-size: 20px; cursor: pointer; } } } .timeline__product{ padding: 24px 24px 0; height: 100%; .product__details{ padding: 8px; border-radius: 8px; display: flex; margin-bottom: 22px; .details__image{ margin-#{$end}: 12px; img{ width: 80px; height: 80px; border-radius: 4px; } } .details__container{ display: flex; flex-direction: column; a{ display: flex; align-items: center; padding-top: 10px; span{ margin-#{$end}: 7px; } } div{ margin-top: 7px; } } } } } &.timeline--active{ opacity: 1; visibility: visible; .timeline__container{ #{$end}: 0; } } } .timeline__list { .timeline__item{ display: flex; align-items: flex-start; margin-bottom: 30px; position: relative; .item__placeholder{ .placeholder__circle{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; z-index: 3; } &:after{ content: ''; width: 2px; height: calc(100% - 5px); background-color: #e4e7ec; position: absolute; top: 40px; #{$start}: 20px; transform: translateX(-50%); } } .item__details{ margin-#{$start}: 12px; .details__header{ display: flex; align-items: center; @media (max-width: $screen-sm) { flex-direction: column; align-items: flex-start; } span{ &:first-child{ margin-#{$end}: 8px; } } } .details__info{ display: flex; align-items: center; span{ &:first-child{ margin-#{$end}: 8px; } } .info__caption{ &.caption--danger{ color: #F79009; } &.caption--success{ color: #12B76A; } } } } &:last-child{ .item__placeholder{ &:after{ display: none !important; } } } } }
Cancel
Copy
Edit

Warning: file_get_contents(../js/product-history.js): failed to open stream: No such file or directory in /var/www/ecdesigncdn/atomic-core/index.php on line 452
Cancel