diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css
index 1b2dccd..8bd7131 100644
--- a/assets/css/gp-style-core.css
+++ b/assets/css/gp-style-core.css
@@ -801,6 +801,8 @@ button{
opacity: 0;
transition: opacity .2s ease-out;
pointer-events: none;
+
+ white-space: nowrap;
}
.modal.active{
opacity: 1;
@@ -827,6 +829,9 @@ button{
position: relative;
display: none;
+
+ filter: blur(10px);
+ transition: filter .2s ease-out;
}
.modal__item.active{
display: flex;
@@ -1125,3 +1130,14 @@ button{
color: var(--text-dark);
}
/* radio */
+
+
+@keyframes slidein {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/assets/js/gp-main.js b/assets/js/gp-main.js
index 0e01cff..d46a9af 100644
--- a/assets/js/gp-main.js
+++ b/assets/js/gp-main.js
@@ -1,38 +1,9 @@
'use strict';
-// function toggleOpenX(button, content, blockheight) {
-// let thisButton = document.querySelector(button),
-// thisContent = document.querySelector(content),
-// thisBlockheight = document.querySelector(blockheight);
+// header
-// thisButton.onclick = function () {
-// let height = thisBlockheight.clientHeight;
+// header
-// if (!thisContent.classList .contains('open')) {
-// thisContent.style.height = `${height}px`;
-// thisContent.classList .add('open');
-// }else{
-// thisContent.style.height = null;
-// thisContent.classList .remove('open');
-// }
-// }
-// }
-
-
-
-
-// header start
-// toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
-// toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
-// header end
-
-// lang start
-// toggleOpenX('.lang__open','.lang__content','.lang__list');
-// lang end
-
-// toggle
-toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
-// toggle
// checkbox
let checkbox = document.querySelectorAll('.checkbox');
@@ -53,15 +24,20 @@ checkbox.forEach(e => {
// media
modalOpen('.button--filter', '.modal__filter');
+modalOpen('.basket-open', '.modal__basket');
modalClose('.modal__close');
// media
+// toggle
+toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
+// toggle
function modalOpen(buttonElement, contentElement){
let modal = document.querySelector('.modal'),
aside = document.querySelector('.modal__aside'),
- elements = document.querySelectorAll(buttonElement);
+ elements = document.querySelectorAll(buttonElement),
+ device = window.screen.width;
elements.forEach(e => {
let thisContentElement = document.querySelector(contentElement);
@@ -73,7 +49,15 @@ function modalOpen(buttonElement, contentElement){
let width = thisContentElement.clientWidth;
setTimeout(() => {
- aside.style.width = `${width}px`;
+ if (device <= 576) {
+ aside.style.width = `${device}px`;
+ thisContentElement.style.opacity = 1;
+ thisContentElement.style.filter = 'blur(0px)';
+ }else{
+ aside.style.width = `${width}px`;
+ thisContentElement.style.opacity = 1;
+ thisContentElement.style.filter = 'blur(0px)';
+ }
}, 10);
}
})
@@ -87,15 +71,23 @@ function modalClose(buttonElement) {
elements.forEach(e => {
e.onclick = function () {
- modal.classList.remove('active');
- aside.style.width = 0;
-
+ aside.style.width = '0px';
asideItems.forEach(e => {
if (e.classList.contains('active')) {
- e.classList.remove('active');
+ e.style.filter = 'blur(10px)';
}
- })
+ });
+
+ setTimeout(() => {
+ asideItems.forEach(e => {
+ if (e.classList.contains('active')) {
+ e.classList.remove('active');
+ }
+ });
+
+ modal.classList.remove('active');
+ }, 300);
}
})
}
diff --git a/index.html b/index.html
index 92b3e3d..4677cca 100644
--- a/index.html
+++ b/index.html
@@ -115,7 +115,7 @@
-
+