// Pre-Loader animation @keyframes rotateAnim { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } // Button .button.botiga-quick-view { &.botiga-quick-view-layout2 { position: absolute; top: 50%; left: 50%; min-width: 145px; text-align: center; opacity: 0; margin-top: 0 !important; visibility: hidden; white-space: nowrap; transform: translate3d(-50%, -40%, 0); transition: ease opacity 300ms, ease visibility 300ms, ease transform 300ms; } &.botiga-quick-view-layout3 { position: absolute; bottom: 0; left: 0; width: 100%; margin-top: 0 !important; text-align: center; transform: translate3d(0, 100%, 0); transition: ease transform 300ms; } } .loop-image-wrap { > .add_to_cart_button, > .loop-button-wrap.button-layout3 { position: absolute; top: 50%; left: 50%; min-width: 145px; text-align: center;; opacity: 0; visibility: hidden; white-space: nowrap; transform: translate3d(-50%, -10%, 0); transition: ease opacity 300ms, ease visibility 300ms, ease transform 300ms; & + .botiga-quick-view-layout2 { transform: translate3d(-50%, -50%, 0); } } > .loop-button-wrap.button-layout3 { .add_to_cart_button { min-width: 145px; text-align: center;; } } &.botiga-add-to-cart-button-layout4.botiga-quick-view-button-layout3 { > .add_to_cart_button, > .loop-button-wrap.button-layout4 { top: auto; left: 15px; bottom: 55px; min-width: 0; transform: none !important; } } } ul.products, ul.wc-block-grid__products { li.product, li.wc-block-grid__product { &:hover { .botiga-quick-view-layout2 { opacity: 1; visibility: visible; transform: translate3d(-50%, -50%, 0); } .botiga-quick-view-layout3 { transform: translate3d(0, 0, 0); } .loop-image-wrap { > .add_to_cart_button, > .loop-button-wrap.button-layout3 { opacity: 1; visibility: visible; transform: translate3d(-50%, 0%, 0); & + .botiga-quick-view-layout2 { transform: translate3d(-50%, -75%, 0); } } &.botiga-add-to-cart-button-layout3.botiga-quick-view-button-layout3 { > .add_to_cart_button, > .loop-button-wrap.button-layout3 { transform: translate3d(-50%, -50%, 0); } } } } } } ul.wc-block-grid__products { li.wc-block-grid__product { .loop-image-wrap:not(.botiga-quick-view-button-layout3) { > .loop-button-wrap.button-layout3 { & + .button.botiga-quick-view { transition-delay: 0ms; } } } &:hover { .loop-image-wrap { > .loop-button-wrap.button-layout3 { transform: translate3d(-50%, 45%, 0); } } } } } .loop-button-wrap { &.button-layout3 { & + .button.botiga-quick-view { transition-delay: 150ms; } } } // Popup .botiga-quick-view-popup { position: fixed; display: flex; align-items: center; justify-content: center;; background: rgba(0,0,0,0.9); left: 0; top: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; z-index: 9999; transition: ease opacity 300ms; &.opened { opacity: 1; visibility: visible; .botiga-quick-view-popup-content { opacity: 1; visibility: visible; } } .botiga-quick-view-loader { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); z-index: 0; > svg { opacity: 0.7; animation-name: rotateAnim; animation-duration: 1.5s; animation-timing-function: linear; animation-iteration-count: infinite; } } .botiga-quick-view-popup-content { position: relative; width: 100%; max-width: 800px; background: #FFF; padding: 35px; opacity: 0; visibility: hidden; transition: ease opacity 300ms 600ms; z-index: 1; .botiga-quick-view-popup-close-button { display: flex; align-items: center; justify-content: center; position: absolute; top: -37px; right: -10px; width: 30px; height: 30px; z-index: 1; svg { fill: #fff; } path { transform: scale(0.75); } &:hover, &:focus { svg { path { fill: #FFF; } } } } .botiga-quick-view-summary { display: block; max-height: 75vh; overflow-y: auto; } .woocommerce-product-gallery { width: 100%; float: none !important; } } } @media only screen and (max-width: 850px) { .botiga-quick-view-popup { .botiga-quick-view-popup-content { max-width: calc( 100% - 30px ); .botiga-quick-view-popup-content-ajax { max-height: 80vh; overflow-y: auto; overflow-x: hidden; } } } } @media only screen and (max-width: 575px) { .botiga-quick-view-popup { .botiga-quick-view-popup-content { .col-sm-6 + .col-sm-6 { margin-top: 30px; } .botiga-quick-view-summary { max-height: none; overflow: visible; } } } } /** * Photoswipe */ .pswp { z-index: 9999 !important; }