// 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, > .product_type_variable, > .product_type_grouped, > .product_type_external, > .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, > .product_type_variable, > .product_type_grouped, > .product_type_external, > .loop-button-wrap.button-layout4 { top: auto; left: 15px; bottom: 55px; min-width: 0; transform: none !important; .ws-svg-icon { width: 25px; height: 25px; } } } &.botiga-add-to-cart-button-layout3.botiga-quick-view-button-layout2 { > .button:not(.botiga-quick-view) { 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; } } } 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-add-to-cart-button-layout3.botiga-quick-view-button-layout2 { .button:not(.botiga-quick-view) { opacity: 1; visibility: visible; transform: translate3d(-50%, 0%, 0); } } .botiga-quick-view-layout3 { transform: translate3d(0, 0, 0); } .loop-image-wrap { > .add_to_cart_button, > .product_type_variable, > .product_type_grouped, > .product_type_external, > .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, > .product_type_variable, > .product_type_grouped, > .product_type_external, > .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; &:not(.loading) .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; @media(min-width: 1025px) and (min-height: 800px) { max-width: 1110px; } .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; padding-right: 10px; &::-webkit-scrollbar { width: 7px; } &::-webkit-scrollbar-track { background: #e2e2e2; } &::-webkit-scrollbar-thumb { background-color: #CCC; } } .woocommerce-product-gallery { width: 100%; float: none !important; .flex-direction-nav { display: none; } } } } .admin-bar { .botiga-quick-view-popup { .botiga-quick-view-popup-content { margin-top: 32px; } } } @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: 991px) { .botiga-quick-view-popup { .botiga-quick-view-popup-content { .col-lg-6 + .col-lg-6 { margin-top: 30px; } .botiga-quick-view-summary { max-height: none; overflow: visible; } } } } /** * Photoswipe */ .pswp { z-index: 9999 !important; }