diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index a5c6f39..7ce062a 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -807,8 +807,6 @@ button{ opacity: 0; transition: opacity .2s ease-out; pointer-events: none; - - white-space: nowrap; } .modal.active{ opacity: 1; diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 10b5b01..4366900 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -326,6 +326,8 @@ background-color: var(--background-grey); border-radius: 24px; + overflow: hidden; + position: relative; } .product__item::before{ @@ -349,6 +351,9 @@ .product__item:hover::before{ opacity: 1; } + .product__item.active::before{ + opacity: 0; + } .product-item__block-label{ position: absolute; top: 16px; @@ -449,7 +454,7 @@ } .product-item__overlay{ position: absolute; - top: 0; + top: 100%; left: 0; width: 100%; @@ -466,6 +471,11 @@ background-color: rgba(242, 242, 242, 0.8); z-index: 10; + + transition: top .4s ease-out; + } + .product-item__overlay.active{ + top: 0; } .product-item-overlay__header{} .product-item-overlay__tags{ diff --git a/assets/js/gp-main.js b/assets/js/gp-main.js index a822581..dfd3fcf 100644 --- a/assets/js/gp-main.js +++ b/assets/js/gp-main.js @@ -16,6 +16,36 @@ modalClose('.modal__close'); toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); // toggle +// overlay +let products = document.querySelectorAll('.product__item'); + +products.forEach(productItem => { + let button = productItem.querySelector('.open-overlay'), + overlay = productItem.querySelector('.product-item__overlay'); + + + if (button) { + button.onclick = function (e) { + document.querySelectorAll('.product__item').forEach(e => { + if (e.classList.contains('active')) { + e.classList.remove('active'); + } + }); + document.querySelectorAll('.product-item__overlay').forEach(e => { + if (e.classList.contains('active')) { + e.classList.remove('active'); + } + }); + + productItem.classList.toggle('active'); + overlay.classList.toggle('active'); + } + } + +}) +// overlay + + // select toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true); diff --git a/index.html b/index.html index 25ac878..5709153 100644 --- a/index.html +++ b/index.html @@ -274,7 +274,7 @@ 1 304