Compare commits
74 Commits
master
...
cosmopet--
| Author | SHA1 | Date |
|---|---|---|
Kirill Pet
|
f6f7f585e1 | 3 months ago |
|
Kirill Pet
|
ac54f2e381 | 3 months ago |
|
Kirill Pet
|
6ead69e180 | 3 months ago |
|
Kirill Pet
|
f3eedee26f | 3 months ago |
|
Kirill Pet
|
ec60360db1 | 3 months ago |
|
Kirill Pet
|
459a7ca86e | 3 months ago |
|
Kirill Pet
|
be438d43d2 | 3 months ago |
|
Kirill Pet
|
e3e8e3a187 | 3 months ago |
|
Kirill Pet
|
27167fbec2 | 3 months ago |
|
Kirill Pet
|
44d75a05e3 | 4 months ago |
|
Kirill Pet
|
288265bca3 | 4 months ago |
|
Kirill Pet
|
4047de51bf | 4 months ago |
|
Kirill Pet
|
224c9254e8 | 9 months ago |
|
Kirill Pet
|
767d40f248 | 9 months ago |
|
Kirill Pet
|
01e6e988e5 | 9 months ago |
|
Kirill Pet
|
c344dbcd43 | 9 months ago |
|
Kirill Pet
|
fe7909e9cc | 9 months ago |
|
Kirill Pet
|
4a3e166d19 | 9 months ago |
|
Kirill Pet
|
a69899b2be | 9 months ago |
|
Kirill Pet
|
2c3f548e83 | 9 months ago |
|
Kirill Pet
|
c48ab5bc5f | 10 months ago |
|
Kirill Pet
|
38a8eb5f1f | 10 months ago |
|
Kirill Pet
|
615ec2ff91 | 10 months ago |
|
Kirill Pet
|
f662641ca8 | 10 months ago |
|
Kirill Pet
|
fa143ef289 | 10 months ago |
|
Kirill Pet
|
3add6ebc02 | 10 months ago |
|
Kirill Pet
|
c9611bf3d2 | 10 months ago |
|
Kirill Pet
|
19cd9dfc68 | 10 months ago |
|
Kirill Pet
|
f42d7d486c | 10 months ago |
|
Kirill Pet
|
d9907a0ccd | 10 months ago |
|
Kirill Pet
|
928d5c1ffa | 10 months ago |
|
Kirill Pet
|
e6bccc904f | 10 months ago |
|
Kirill Pet
|
003bff1fbb | 10 months ago |
|
Kirill Pet
|
0911744f6f | 10 months ago |
|
Kirill Pet
|
b5879bd12e | 10 months ago |
|
Kirill Pet
|
148d2c12cb | 10 months ago |
|
Kirill Pet
|
7ca7790b8f | 10 months ago |
|
Kirill Pet
|
d5ea9b0a34 | 10 months ago |
|
Kirill Pet
|
e0cc1b1e0c | 10 months ago |
|
Kirill Pet
|
469a231256 | 10 months ago |
|
Kirill Pet
|
bc0c849ccd | 10 months ago |
|
Kirill Pet
|
7979a4da6c | 10 months ago |
|
Kirill Pet
|
094e94ad7d | 10 months ago |
|
Kirill Pet
|
2e065c9e45 | 10 months ago |
|
Kirill Pet
|
468bcd8f9e | 10 months ago |
|
Kirill Pet
|
cb965a5877 | 10 months ago |
|
Kirill Pet
|
d66bfc0c97 | 10 months ago |
|
Kirill Pet
|
06da7083bc | 10 months ago |
|
Kirill Pet
|
375c82ddce | 10 months ago |
|
Kirill Pet
|
93c2f012f1 | 10 months ago |
|
Kirill Pet
|
62a3e97a7b | 10 months ago |
|
Kirill Pet
|
0b118946f8 | 10 months ago |
|
Kirill Pet
|
ee5a3d5a7e | 10 months ago |
 Антон
|
863ed65646 | 10 months ago |
|
Kirill Pet
|
9703ff5569 | 10 months ago |
|
Kirill Pet
|
36ea891f36 | 10 months ago |
|
Kirill Pet
|
44fee90f1a | 10 months ago |
|
Kirill Pet
|
db58f5c463 | 10 months ago |
|
Kirill Pet
|
7beff60d00 | 10 months ago |
|
Kirill Pet
|
284a32c6c9 | 10 months ago |
|
Kirill Pet
|
46df883cfd | 10 months ago |
|
Kirill Pet
|
9c3d0d0be9 | 10 months ago |
|
Kirill Pet
|
6a2375f26b | 10 months ago |
|
Kirill Pet
|
e52537abeb | 10 months ago |
|
Kirill Pet
|
33cc2d9c6e | 10 months ago |
|
Kirill Pet
|
1c58c42130 | 10 months ago |
|
Kirill Pet
|
f81de85d89 | 10 months ago |
|
Kirill Pet
|
8edb4877fa | 10 months ago |
|
Kirill Pet
|
ba8ac5dea1 | 10 months ago |
|
Kirill Pet
|
64e0310bb7 | 10 months ago |
|
Kirill Pet
|
8b8d010f45 | 10 months ago |
|
Kirill Pet
|
f10ce31722 | 10 months ago |
|
Kirill Pet
|
3a612da230 | 10 months ago |
|
Kirill Pet
|
b208ae3e64 | 10 months ago |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,336 @@ |
|||||||
/* Стили для мобильных устройств */ |
/* Стили для мобильных устройств */ |
||||||
|
@media only screen and (max-width: 720px) { |
||||||
|
/* product */ |
||||||
|
.product__item{ |
||||||
|
width: calc(100% - 24px); |
||||||
|
} |
||||||
|
/* product */ |
||||||
|
|
||||||
|
/* modal */ |
||||||
|
.modal__basket{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.modal__filter{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.modal__to-know, |
||||||
|
.modal__to-know-submit{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.modal__button .to-know{ |
||||||
|
display: flex; |
||||||
|
|
||||||
|
background: none; |
||||||
|
} |
||||||
|
.modal__basket .modal__header { |
||||||
|
height: calc(100% - 156px); |
||||||
|
margin-bottom: -36px; |
||||||
|
} |
||||||
|
.modal-basket-item__block-image{ |
||||||
|
position: absolute; |
||||||
|
width: 80px; |
||||||
|
} |
||||||
|
.modal-basket-item__image{ |
||||||
|
width: 48px; |
||||||
|
} |
||||||
|
.modal-basket-item__content{ |
||||||
|
margin-left: 0; |
||||||
|
|
||||||
|
padding-left: 96px; |
||||||
|
} |
||||||
|
.modal-basket-item__control{ |
||||||
|
margin-left: -80px; |
||||||
|
} |
||||||
|
.modal-basket-item__title{ |
||||||
|
min-height: 40px; |
||||||
|
|
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
.modal-basket__item--return{ |
||||||
|
flex-direction: column; |
||||||
|
align-items: start; |
||||||
|
} |
||||||
|
.modal-basket__item--return .modal-basket-item__title{ |
||||||
|
margin-right: auto; |
||||||
|
} |
||||||
|
.notification--width-584{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.notification__title{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.notification__text--center-pc{ |
||||||
|
text-align: start; |
||||||
|
} |
||||||
|
.notification__img{ |
||||||
|
height: 360px; |
||||||
|
} |
||||||
|
.notification__title{ |
||||||
|
padding-right: 96px; |
||||||
|
} |
||||||
|
.modal-form__buttons--two{ |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
.modal-form__buttons--two button, .modal-form__buttons--two input{ |
||||||
|
margin-top: 24px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.modal-map__control{ |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
.modal-map-control__item{ |
||||||
|
width: calc(100% - 24px); |
||||||
|
} |
||||||
|
.form__full-mobile{ |
||||||
|
width: 100%; |
||||||
|
border-radius: 0; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ |
||||||
|
width: 69px; |
||||||
|
} |
||||||
|
.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ |
||||||
|
|
||||||
|
} |
||||||
|
.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ |
||||||
|
width: 82px; |
||||||
|
} |
||||||
|
.form__input{ |
||||||
|
padding: 12px 14px; |
||||||
|
} |
||||||
|
.modal-form--height-100-phone{ |
||||||
|
min-height: 100%; |
||||||
|
} |
||||||
|
/* modal */ |
||||||
|
|
||||||
|
/* footer */ |
||||||
|
.footer__about{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.footer__wrapper{ |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.footer__content{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.footer__form{ |
||||||
|
margin-top: 24px; |
||||||
|
margin-left: 0; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.footer__social-media{ |
||||||
|
display: block; |
||||||
|
|
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.footer-about__text{ |
||||||
|
padding-top: 35px; |
||||||
|
display: block; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.footer__list{ |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
/* footer */ |
||||||
|
|
||||||
|
/* detail */ |
||||||
|
.toggle__table--two .toggle-table__block{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.toggle__table--two .toggle-table__block:nth-child(even){ |
||||||
|
margin-top: 32px; |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.toggle__table--three .toggle-table__block:nth-child(1){ |
||||||
|
width: 31%; |
||||||
|
} |
||||||
|
/* detail */ |
||||||
|
|
||||||
|
/* cabinet */ |
||||||
|
.cabinet-card__title{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.cabinet-card__no-orders{ |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
.cabinet-card-order__header{ |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.cabinet-card-order__payment{ |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
.cabinet-card-order-detail__main{ |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.cabinet-card-order-detail-main__links{ |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
align-items: start; |
||||||
|
} |
||||||
|
.cabinet-card-order-detail-main-product__img{ |
||||||
|
width: 70px; |
||||||
|
height: 70px; |
||||||
|
} |
||||||
|
.cabinet-card-order-detail-main__product{ |
||||||
|
margin-top: 16px; |
||||||
|
|
||||||
|
align-items: start; |
||||||
|
} |
||||||
|
.cabinet-card-order-detail-main-product__content{ |
||||||
|
margin-left: 16px; |
||||||
|
|
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.cabinet-card-order-detail-main-product__description{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.cabinet-card-order-detail-main-product__count{ |
||||||
|
position: absolute; |
||||||
|
left: 116px; |
||||||
|
bottom: 0; |
||||||
|
} |
||||||
|
.cabinet-card-order-detail-main-product__price{ |
||||||
|
position: absolute; |
||||||
|
left: 153px; |
||||||
|
bottom: 0; |
||||||
|
} |
||||||
|
.cabinet-card__content{ |
||||||
|
padding-right: 19px; |
||||||
|
} |
||||||
|
.cabinet-card-order-main__date{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
/* .cabinet-card__order.active */ |
||||||
|
/* .cabinet-card__order.active */ |
||||||
|
/* cabinet */ |
||||||
|
} |
||||||
|
|
||||||
@media only screen and (max-width: 576px) { |
@media only screen and (max-width: 576px) { |
||||||
|
/* header */ |
||||||
|
|
||||||
|
/* header */ |
||||||
|
|
||||||
|
/* product */ |
||||||
|
.product__header{ |
||||||
|
flex-direction: column; |
||||||
|
align-items: start; |
||||||
|
} |
||||||
|
.product__header .button{ |
||||||
|
margin-top: 48px; |
||||||
} |
} |
||||||
|
/* product */ |
||||||
|
|
||||||
|
/* modal */ |
||||||
|
.modal__aside{ |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
.form-input-radio__title span{ |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
color: var(--text-grey); |
||||||
|
} |
||||||
|
.modal-form__title{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
/* modal */ |
||||||
|
|
||||||
|
/* detail */ |
||||||
|
.detail-block-form__item, |
||||||
|
.detail-block-form__submit{ |
||||||
|
min-width: 100%; |
||||||
|
} |
||||||
|
/* detail */ |
||||||
|
|
||||||
|
/* cabinet */ |
||||||
|
|
||||||
|
.cabinet-card-order-detail-main-product__img{ |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.cabinet-card-order-detail-main-product__count{ |
||||||
|
left: auto; |
||||||
|
right: 71px; |
||||||
|
} |
||||||
|
.cabinet-card-order-detail-main-product__price{ |
||||||
|
left: auto; |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
.cabinet-card-order__detail-short{ |
||||||
|
transition-delay: 0; |
||||||
|
transition-duration: 0; |
||||||
|
} |
||||||
|
/* cabinet */ |
||||||
|
} |
||||||
|
|
||||||
|
@media only screen and (max-width: 720px) { |
||||||
|
.subscription__item{ |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.subscription__item > p:first-child{ |
||||||
|
font-size: 16px; |
||||||
|
color: var(--text-6); |
||||||
|
} |
||||||
|
.subscription__item > p:last-child{ |
||||||
|
margin-top: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
.subscription__add-title { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.subscription__add-product{ |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.subscription__add-product > *:not(:first-child){ |
||||||
|
padding-top: 0; |
||||||
|
} |
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product__img{ |
||||||
|
width: 73px; |
||||||
|
height: 66px; |
||||||
|
} |
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product-description__what{ |
||||||
|
font-size: 12px; |
||||||
|
display: -webkit-box; |
||||||
|
-webkit-line-clamp: 2; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product-description__with-what{ |
||||||
|
margin-top: 8px; |
||||||
|
|
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product__description { |
||||||
|
width: calc(100% - 73px); |
||||||
|
} |
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product__content{ |
||||||
|
position: static; |
||||||
|
margin-top: -10px; |
||||||
|
margin-left: auto; |
||||||
|
width: calc(100% - 73px); |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product__count{ |
||||||
|
position: static; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product__price{ |
||||||
|
position: static; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,241 @@ |
|||||||
|
.order{ |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.order__title{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 24px; |
||||||
|
line-height: 117%; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--text-black); |
||||||
|
} |
||||||
|
.order__contacts{ |
||||||
|
width: calc(50% - 0.5px); |
||||||
|
|
||||||
|
padding: 24px; |
||||||
|
|
||||||
|
border-right: 1px solid #121212; |
||||||
|
} |
||||||
|
.order-contacts__header{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.order-contacts__form{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.order-contacts__delivery{ |
||||||
|
margin-top: 47.5px; |
||||||
|
|
||||||
|
padding-top: 48px; |
||||||
|
|
||||||
|
border-top: 1px solid var(--background-grey); |
||||||
|
} |
||||||
|
|
||||||
|
.order-contacts-deliver__item{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.order-contacts-deliver__date{ |
||||||
|
padding: 8px; |
||||||
|
|
||||||
|
border-radius: 24px; |
||||||
|
|
||||||
|
background: var(--background-grey); |
||||||
|
} |
||||||
|
.order-contacts-deliver__date .form-input-radio__item{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.order-contacts-deliver__date .form-input-radio__item:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.order__your{ |
||||||
|
width: calc(50% - 0.5px); |
||||||
|
|
||||||
|
padding: 24px 24px 24px 48px; |
||||||
|
|
||||||
|
background: var(--background-grey); |
||||||
|
} |
||||||
|
.order-your__products{ |
||||||
|
margin-top: 48px; |
||||||
|
} |
||||||
|
.order-your-products__item{ |
||||||
|
margin-top: 16px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.order-your-products__left{ |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.order-your-products__img{ |
||||||
|
width: 40px; |
||||||
|
aspect-ratio: 1; |
||||||
|
|
||||||
|
border-radius: 16px; |
||||||
|
} |
||||||
|
.order-your-products__content{ |
||||||
|
margin-left: 16px; |
||||||
|
} |
||||||
|
.order-your-products__name{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
color: var(--text-black); |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.order-your-products__description{ |
||||||
|
margin-top: 8px; |
||||||
|
|
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
color: var(--text-6); |
||||||
|
} |
||||||
|
.order-your-products__description span{ |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
.order-your-products__description span::before{ |
||||||
|
margin-left: 3px; |
||||||
|
|
||||||
|
content: 'x '; |
||||||
|
} |
||||||
|
.order-your-products__right{ |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.order-your-products__count{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
text-align: right; |
||||||
|
color: var(--text-6); |
||||||
|
} |
||||||
|
.order-your-products__count::before{ |
||||||
|
content: 'x'; |
||||||
|
} |
||||||
|
.order-your-products__price{ |
||||||
|
margin-left: 16px; |
||||||
|
|
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
text-align: right; |
||||||
|
color: var(--text-black); |
||||||
|
} |
||||||
|
.order-your-products__price::after{ |
||||||
|
content: 'Р'; |
||||||
|
} |
||||||
|
.order-your__calculation{ |
||||||
|
margin-top: 48px; |
||||||
|
} |
||||||
|
.order-your__promo{ |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.order-your-promo__button{ |
||||||
|
margin-left: 8px; |
||||||
|
} |
||||||
|
.order-your-calculation__item{ |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.order-your-calculation__title{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 120%; |
||||||
|
color: var(--text-black); |
||||||
|
} |
||||||
|
.order-your-calculation__value{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 200%; |
||||||
|
text-transform: uppercase; |
||||||
|
text-align: right; |
||||||
|
color: var(--text-black); |
||||||
|
} |
||||||
|
.order-your-calculation__value--price::after{ |
||||||
|
content: ' ₽'; |
||||||
|
} |
||||||
|
.order-your-calculation__value--discount{ |
||||||
|
background: var(--gradient-red); |
||||||
|
background-clip: text; |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
.order-your-calculation__value--discount::before{ |
||||||
|
content: '- '; |
||||||
|
} |
||||||
|
.order-your-calculation__description{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
text-align: right; |
||||||
|
color: var(--text-9); |
||||||
|
} |
||||||
|
.order-your-calculation__line{ |
||||||
|
margin-top: 23px; |
||||||
|
border: 1px solid var(--background-9); |
||||||
|
} |
||||||
|
.order-your-calculation__result{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 24px; |
||||||
|
line-height: 117%; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--text-black); |
||||||
|
} |
||||||
|
.order-your-calculation__submit{ |
||||||
|
margin-top: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
@media only screen and (max-width: 1200px) { |
||||||
|
.order{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.order__contacts, .order__your{ |
||||||
|
border: none; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media only screen and (max-width: 720px) { |
||||||
|
.order__title{ |
||||||
|
max-width: 181px; |
||||||
|
|
||||||
|
font-size: 20px; |
||||||
|
line-height: 120%; |
||||||
|
} |
||||||
|
.order__your{ |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
.order__contacts{ |
||||||
|
padding: 24px 16px; |
||||||
|
} |
||||||
|
.order__your{ |
||||||
|
padding: 40px 16px 9px 16px; |
||||||
|
} |
||||||
|
.order-your__promo{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.order-your-promo__button{ |
||||||
|
margin-left: 0; |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.order-your-products__content{ |
||||||
|
max-width: 164px; |
||||||
|
} |
||||||
|
.order-your-products__count, .order-your-products__price{ |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
} |
||||||
@ -1,5 +1,348 @@ |
|||||||
/* Стили для планшетов */ |
/* Стили для планшетов */ |
||||||
@media only screen and (max-width: 992px) { |
@media only screen and (max-width: 1200px) { |
||||||
|
/* header */ |
||||||
|
main{ |
||||||
|
padding-top: 64px; |
||||||
|
} |
||||||
|
.main-menu{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.header__open-menu{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.lang{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.header__logo{ |
||||||
|
width: 136px; |
||||||
|
height: 29px; |
||||||
|
} |
||||||
|
.header__content{ |
||||||
|
height: auto; |
||||||
|
|
||||||
|
padding: 8px 16px; |
||||||
|
} |
||||||
|
.mini-profile__item:nth-child(2){ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.header::after{ |
||||||
|
left: 0; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.header__pc-menu{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.header__phone-menu{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.header__menu-block{ |
||||||
|
top: 56px; |
||||||
|
} |
||||||
|
.header__content::after{ |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
/* header */ |
||||||
|
|
||||||
|
/* footer */ |
||||||
|
.footer{ |
||||||
|
margin-top: 0; |
||||||
|
|
||||||
|
padding: 24px 16px; |
||||||
|
} |
||||||
|
/* footer */ |
||||||
|
|
||||||
|
/* breadcrumbs */ |
||||||
|
.breadcrumbs{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
/* breadcrumbs */ |
||||||
|
|
||||||
|
/* product */ |
||||||
|
.product{ |
||||||
|
padding: 12px; |
||||||
|
padding-top: 20px; |
||||||
|
} |
||||||
|
.product__title{ |
||||||
|
font-weight: 700; |
||||||
|
font-size: 26px; |
||||||
|
line-height: 123%; |
||||||
|
text-transform: uppercase; |
||||||
|
} |
||||||
|
.to-know p { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.toggle-table__title{ |
||||||
|
font-weight: 700; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
} |
||||||
|
.toggle-table__item p{ |
||||||
|
font-weight: 500; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
} |
||||||
|
.toggle-table-item__line{ |
||||||
|
margin-top: 12px; |
||||||
|
} |
||||||
|
.detail{ |
||||||
|
margin: 24px 16px; |
||||||
|
} |
||||||
|
.back-detail{ |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
.detail-catalot__title{ |
||||||
|
font-size: 22px; |
||||||
|
} |
||||||
|
.product__footer--error{ |
||||||
|
margin: 48px 0px 24px; |
||||||
|
} |
||||||
|
/* product */ |
||||||
|
|
||||||
|
/* modal */ |
||||||
|
.modal{ |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
.modal__text{ |
||||||
|
padding-right: 0; |
||||||
|
} |
||||||
|
.form__button-pc{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.form__button-mobile{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.modal-form{ |
||||||
|
/* min-height: 100%; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
border-radius: 0; |
||||||
|
border: none; */ |
||||||
|
} |
||||||
|
.modal__notification{ |
||||||
|
margin: 24px; |
||||||
|
} |
||||||
|
.form-input-phone__list{ |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.modal-form-content__line--two{ |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
.modal-form-content__line--two .modal-form-content-line__element{ |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.modal-form-content__line--two .modal-form-content-line__element:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.modal-map{ |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
border-radius: 0; |
||||||
|
} |
||||||
|
.modal-map__left, .modal-map__right{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.modal-map__map iframe { |
||||||
|
width: 100%; |
||||||
|
height: 528px; |
||||||
|
} |
||||||
|
.modal-map-form__button{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.modal-map-form__sub-button{ |
||||||
|
margin-top: 64px; |
||||||
|
|
||||||
|
padding: 0 24px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
} |
||||||
|
/* modal */ |
||||||
|
|
||||||
|
/* cabinet */ |
||||||
|
.cabinet{ |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.cabinet__control{ |
||||||
|
display: flex; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.cabinet__orders, .cabinet__profile{ |
||||||
|
width: calc(100% - 48px); |
||||||
|
} |
||||||
|
.cabinet__orders, .cabinet__profile{ |
||||||
|
position: absolute; |
||||||
|
opacity: 0; |
||||||
|
|
||||||
|
transition: opacity .2s ease-out; |
||||||
|
} |
||||||
|
.cabinet-content{ |
||||||
|
pointer-events:none; |
||||||
|
} |
||||||
|
.cabinet__orders.active, .cabinet__profile.active{ |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.cabinet__orders.hide, .cabinet__profile.hide{ |
||||||
|
position: static; |
||||||
|
display: block; |
||||||
|
pointer-events:auto; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.cabinet__subscription-pc{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.cabinet__subscription-mobile{ |
||||||
|
display: block; |
||||||
|
|
||||||
|
margin: 24px 24px 0 24px; |
||||||
|
} |
||||||
|
.cabinet__orders .cabinet-card:nth-child(2){ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.cabinet__orders--no-cab .cabinet-card:nth-child(2){ |
||||||
|
margin-top: 32px; |
||||||
|
} |
||||||
|
/* cabinet */ |
||||||
|
} |
||||||
|
|
||||||
|
@media only screen and (max-width: 980px) { |
||||||
|
/* product */ |
||||||
|
.product__item{ |
||||||
|
width: calc(50% - 24px); |
||||||
|
} |
||||||
|
/* product */ |
||||||
|
|
||||||
|
|
||||||
|
/* detail */ |
||||||
|
.detail{ |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.detail__images{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.detail__content{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.detail__content{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.detail__images-phone{ |
||||||
|
display: block; |
||||||
|
|
||||||
|
margin-top: 48px; |
||||||
|
margin-bottom: 48px; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
|
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.detail__images-phone .swiper-slide{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.detail-images-phone__image-block{ |
||||||
|
width: 100%; |
||||||
|
aspect-ratio: 1; |
||||||
|
max-width: 500px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
background: var(--background-grey); |
||||||
|
border-radius: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.detail__images-phone .swiper-pagination-bullet{ |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
|
||||||
|
border-radius: 50%; |
||||||
|
|
||||||
|
border: 1px solid #666; |
||||||
|
background-color: #666; |
||||||
|
|
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.detail__images-phone .swiper-pagination-bullet.swiper-pagination-bullet-active{ |
||||||
|
background-color: var(--background-white); |
||||||
|
} |
||||||
|
|
||||||
|
.detail__images-phone .swiper-pagination{ |
||||||
|
margin-bottom: 19px; |
||||||
|
} |
||||||
|
.detail__title{ |
||||||
|
font-size: 26px; |
||||||
|
line-height: 123%; |
||||||
|
} |
||||||
|
.gallery__slider .swiper-pagination { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.gallery__pagination{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.gallery__slider .swiper-pagination-bullet{ |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
border-radius: 50%; |
||||||
|
border: 1px solid #666; |
||||||
|
background-color: #666; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.gallery__wrapper .gallery-button{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.gallery__slider .swiper-pagination-bullet.swiper-pagination-bullet-active{ |
||||||
|
background-color: var(--background-white); |
||||||
|
} |
||||||
|
|
||||||
|
.gallery__slider{ |
||||||
|
margin-left:0; |
||||||
|
padding: 0px 0px 50px 0px; |
||||||
|
/* padding: 40px; */ |
||||||
|
} |
||||||
|
.gallery__block { |
||||||
|
width: 100%; |
||||||
|
aspect-ratio: 1; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
/* detail */ |
||||||
|
} |
||||||
|
|
||||||
|
@media only screen and (max-width: 750px) { |
||||||
|
/* cabinet */ |
||||||
|
.cabinet-card-order__open-detail{ |
||||||
|
margin-top: 144px; |
||||||
|
} |
||||||
|
.cabinet-card-order__detail-short{ |
||||||
|
right: auto; |
||||||
|
left: 0; |
||||||
|
bottom: 48px; |
||||||
|
} |
||||||
|
.cabinet-card-order-detail-short__item{ |
||||||
|
margin-left: -27px; |
||||||
|
} |
||||||
|
.cabinet-card-order-detail-short__item:first-child{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.cabinet-card__order.active .cabinet-card-order__open-detail{ |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
.cabinet-card-order__link{ |
||||||
|
margin-top: 144px; |
||||||
|
} |
||||||
|
/* cabinet */ |
||||||
} |
} |
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 502 B |
|
After Width: | Height: | Size: 615 B |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 459 B |
|
After Width: | Height: | Size: 493 B |
|
After Width: | Height: | Size: 491 B |
|
After Width: | Height: | Size: 481 B |
|
After Width: | Height: | Size: 456 B |
|
After Width: | Height: | Size: 458 B |
|
After Width: | Height: | Size: 458 B |
|
After Width: | Height: | Size: 495 B |
|
After Width: | Height: | Size: 954 B |
|
After Width: | Height: | Size: 983 B |
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 349 B |
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 453 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 168 B |
|
After Width: | Height: | Size: 584 B |
|
After Width: | Height: | Size: 695 B |
|
After Width: | Height: | Size: 442 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 623 B |
|
After Width: | Height: | Size: 855 B |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,67 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
import * as fun from './_gp-function.js'; |
||||||
|
|
||||||
|
let widthPhoneCabinet = 1200; |
||||||
|
|
||||||
|
fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail'); |
||||||
|
fun.modalFormOpen('.form-open'); |
||||||
|
|
||||||
|
fun.closeModalForm('.modal-form__close'); |
||||||
|
fun.closeModalForm('.modal-form__button-close'); |
||||||
|
|
||||||
|
controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet); |
||||||
|
|
||||||
|
function controlCabinet(buttons, main, minWidth){ |
||||||
|
let thisWidth = window.innerWidth; |
||||||
|
let thisMain = document.querySelector(main); |
||||||
|
|
||||||
|
let thisButtons = document.querySelectorAll(buttons); |
||||||
|
|
||||||
|
thisButtons.forEach(e => { |
||||||
|
e.onclick = function (element){ |
||||||
|
let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`); |
||||||
|
let newHeight = thisContent.clientHeight + 48; |
||||||
|
let thisButton = element.target; |
||||||
|
|
||||||
|
thisMain.style.height = `${newHeight}px` |
||||||
|
|
||||||
|
if (!thisContent.classList.contains('active')) { |
||||||
|
thisMain.querySelector('.active').classList.remove('active'); |
||||||
|
thisContent.classList.add('active'); |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
thisMain.style.height = 'auto'; |
||||||
|
|
||||||
|
if (thisMain.querySelector('.hide')) { |
||||||
|
thisMain.querySelector('.hide').classList.remove('hide'); |
||||||
|
} |
||||||
|
|
||||||
|
thisMain.querySelector('.active').classList.add('hide'); |
||||||
|
}, 200); |
||||||
|
} |
||||||
|
|
||||||
|
thisButtons.forEach(e => { |
||||||
|
e.classList.remove('active'); |
||||||
|
}) |
||||||
|
thisButton.classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
let modal = document.querySelector('.modal'); |
||||||
|
modal.onclick = function (eventModal) { |
||||||
|
let thisTarget = eventModal.target; |
||||||
|
|
||||||
|
if (thisTarget.classList.contains('modal')) { |
||||||
|
thisTarget.classList.remove('active'); |
||||||
|
|
||||||
|
if (!thisTarget.querySelector('.modal-map.active')) { |
||||||
|
thisTarget.querySelector('.modal-form.active').classList.remove('active'); |
||||||
|
}else{ |
||||||
|
thisTarget.querySelector('.modal-map.active').classList.remove('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,286 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
|
||||||
|
inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search'); |
||||||
|
|
||||||
|
function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) { |
||||||
|
let inputs = document.querySelectorAll(main); |
||||||
|
|
||||||
|
inputs.forEach(e => { |
||||||
|
let thisMainFlag = e.querySelector(mainFlag),
|
||||||
|
thisMainCode = e.querySelector(mainCode), |
||||||
|
thisInput = e.querySelector(input), |
||||||
|
thisList = e.querySelector(list), |
||||||
|
thisSelects = e.querySelectorAll(`.${selects}`), |
||||||
|
thisSearchInput = e.querySelector(`.${searchInput}`); |
||||||
|
|
||||||
|
thisInput.onblur = function (input) { |
||||||
|
if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) { |
||||||
|
thisList.classList.remove('active');
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
e.onclick = function (event) { |
||||||
|
if (!event.target.classList.contains(searchInput)) { |
||||||
|
if (thisList.classList.contains('active')) { |
||||||
|
thisList.classList.remove('active'); |
||||||
|
} |
||||||
|
|
||||||
|
thisInput.focus(); |
||||||
|
thisList.classList.add('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
thisSelects.forEach(e => { |
||||||
|
let newIcon = e.querySelector(selectIcon), |
||||||
|
newCode = e.querySelector(selectCode); |
||||||
|
|
||||||
|
e.onclick = function (event) { |
||||||
|
event.preventDefault(); |
||||||
|
thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`; |
||||||
|
thisMainCode.textContent = newCode.textContent; |
||||||
|
|
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
thisList.classList.remove('active'); |
||||||
|
}, 0); |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
if (document.querySelector('.form-input-phone__input')) { |
||||||
|
checkPhone('.form-input-phone__input'); |
||||||
|
} |
||||||
|
|
||||||
|
function checkPhone(input) { |
||||||
|
document.querySelector(input).addEventListener('input', function(event) { |
||||||
|
let text = event.target.value; |
||||||
|
let length = text.length; |
||||||
|
let newSymbol = event.data; |
||||||
|
|
||||||
|
if (!(/^\d+$/.test(text.replaceAll(' ', '')))) { |
||||||
|
event.target.value = text.slice(0, -1); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (length == 4 || length == 8) { |
||||||
|
if (newSymbol != null) { |
||||||
|
event.target.value = text.slice(0, -1) + ' ' + newSymbol; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
inputTabs('.form-input__tabs', '.form-input-tabs__button'); |
||||||
|
inputTabs('.modal-map__control', '.modal-map-control__item'); |
||||||
|
|
||||||
|
function inputTabs(main, button) { |
||||||
|
let mains = document.querySelectorAll(main); |
||||||
|
|
||||||
|
mains.forEach(main => { |
||||||
|
let buttons = main.querySelectorAll(button); |
||||||
|
|
||||||
|
buttons.forEach(button => { |
||||||
|
button.onclick = function () { |
||||||
|
if (button.classList.contains('active')) { |
||||||
|
return ; |
||||||
|
} |
||||||
|
|
||||||
|
main.querySelector('.active').classList.remove('active'); |
||||||
|
|
||||||
|
button.classList.add('active'); |
||||||
|
|
||||||
|
if (button.querySelector('input')){ |
||||||
|
button.querySelector('input').click(); |
||||||
|
}
|
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input') |
||||||
|
|
||||||
|
function inputRadio(main ,item, textClass, input) { |
||||||
|
let inputRadios = document.querySelectorAll(main); |
||||||
|
|
||||||
|
inputRadios.forEach(inputRadio => { |
||||||
|
let items = inputRadio.querySelectorAll(item), |
||||||
|
thisInput = inputRadio.querySelector(input); |
||||||
|
|
||||||
|
items.forEach(radio => { |
||||||
|
let thisText = radio.querySelector(textClass).textContent; |
||||||
|
|
||||||
|
radio.onclick = function (event) { |
||||||
|
event.preventDefault(); |
||||||
|
|
||||||
|
if (inputRadio.querySelector(`${item}.active`)) { |
||||||
|
inputRadio.querySelector(`${item}.active`).classList.remove('active'); |
||||||
|
} |
||||||
|
thisInput.value = thisText; |
||||||
|
radio.classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content'); |
||||||
|
|
||||||
|
function listInputRadio(main ,item, textClass, input, content, block) { |
||||||
|
let listInputRadios = document.querySelectorAll(main); |
||||||
|
|
||||||
|
listInputRadios.forEach(listInputRadio => { |
||||||
|
let thisInput = listInputRadio.querySelector(input), |
||||||
|
items = listInputRadio.querySelectorAll(item), |
||||||
|
thisContent = listInputRadio.querySelector(content), |
||||||
|
thisBlock = listInputRadio.querySelector(block); |
||||||
|
|
||||||
|
thisInput.onclick = function () { |
||||||
|
thisBlock.classList.add('active'); |
||||||
|
thisBlock.style.height = '192px'; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
thisInput.onblur = function(){ |
||||||
|
thisBlock.classList.remove('active'); |
||||||
|
thisBlock.style.height = '0px'; |
||||||
|
}; |
||||||
|
|
||||||
|
items.forEach(item => { |
||||||
|
item.onclick = function (event) { |
||||||
|
event.preventDefault(); |
||||||
|
let newText = item.querySelector(textClass).textContent; |
||||||
|
|
||||||
|
thisInput.value = newText; |
||||||
|
|
||||||
|
if (thisContent.querySelector('.active')) { |
||||||
|
thisContent.querySelector('.active').classList.remove('active'); |
||||||
|
} |
||||||
|
|
||||||
|
item.classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
remoteControl('.form-input__remote-control', '.form-input-tabs__button'); |
||||||
|
remoteControl('.modal-map__control', '.modal-map-control__item'); |
||||||
|
|
||||||
|
function remoteControl(main, button) { |
||||||
|
let mains = document.querySelectorAll(main); |
||||||
|
|
||||||
|
mains.forEach(main => { |
||||||
|
let subjectClass = main.dataset.content, |
||||||
|
subject = document.querySelector(`.${subjectClass}`), |
||||||
|
buttons = Array.from(main.querySelectorAll(button)); |
||||||
|
|
||||||
|
main.addEventListener('click', function (eventMain) { |
||||||
|
setTimeout(() => { |
||||||
|
let indexActive = buttons.findIndex((button, index) => { |
||||||
|
if (button.classList.contains('active')) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
}); |
||||||
|
if(subject.children[indexActive].classList.contains('active')){ |
||||||
|
return ; |
||||||
|
} |
||||||
|
|
||||||
|
subject.querySelector('.remote-control__item.active').classList.remove('active'); |
||||||
|
subject.children[indexActive].classList.add('active'); |
||||||
|
|
||||||
|
let mandatorys = subject.querySelectorAll('.mandatory'); |
||||||
|
|
||||||
|
mandatorys.forEach(mandatory => { |
||||||
|
if (mandatory.required) { |
||||||
|
mandatory.required = false; |
||||||
|
}else{ |
||||||
|
mandatory.required = true; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, 0); |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
formCheck('.modal-form__content', 'input[type=submit]'); |
||||||
|
formCheck('.modal-map__form', 'input[type=submit]'); |
||||||
|
|
||||||
|
function formCheck(form, submit) { |
||||||
|
let forms = document.querySelectorAll(form); |
||||||
|
|
||||||
|
forms.forEach(form => { |
||||||
|
let thisSubmit = form.querySelector(submit); |
||||||
|
|
||||||
|
thisSubmit.onclick = function () { |
||||||
|
form.classList.add('check') |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
inputPhoneNoFlag('.no-flag'); |
||||||
|
|
||||||
|
function inputPhoneNoFlag(input){ |
||||||
|
let inputs = document.querySelectorAll(input); |
||||||
|
|
||||||
|
inputs.forEach(input => { |
||||||
|
let code = '+' + input.dataset.code; |
||||||
|
|
||||||
|
input.onfocus = function () { |
||||||
|
if (input.value == '') { |
||||||
|
input.value = code; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input.addEventListener('input', function(event) { |
||||||
|
let text = event.target.value; |
||||||
|
let length = text.length; |
||||||
|
let newSymbol = event.data; |
||||||
|
|
||||||
|
if (isNaN(event.data) || event.data == ' ') { |
||||||
|
event.target.value = text.slice(0, -1); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (length == 3 || length == 7 || length == 11) { |
||||||
|
if (newSymbol != null) { |
||||||
|
event.target.value = text.slice(0, -1) + ' ' + newSymbol; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
inputCheck('.form-agreement__check'); |
||||||
|
|
||||||
|
function inputCheck(className) { |
||||||
|
let checks = document.querySelectorAll(className); |
||||||
|
|
||||||
|
checks.forEach(check => { |
||||||
|
let square = check.querySelector('.form-agreement__square'), |
||||||
|
input = check.querySelector('input'); |
||||||
|
|
||||||
|
square.onclick = function () { |
||||||
|
input.click();
|
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
inputRead('.input-read'); |
||||||
|
function inputRead(className) { |
||||||
|
let inputs = document.querySelectorAll(className); |
||||||
|
|
||||||
|
inputs.forEach(input => { |
||||||
|
input.addEventListener("input", function (event) { |
||||||
|
let text = event.target.value; |
||||||
|
|
||||||
|
event.target.value = text.slice(0, -1);
|
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,156 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
// function
|
||||||
|
export function modalOpen(buttonElement, contentElement){ |
||||||
|
let modal = document.querySelector('.modal'), |
||||||
|
aside = document.querySelector('.modal__aside'), |
||||||
|
elements = document.querySelectorAll(buttonElement), |
||||||
|
device = window.screen.width; |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
let thisContentElement = document.querySelector(contentElement); |
||||||
|
|
||||||
|
e.onclick = function () { |
||||||
|
modal.classList.add('active'); |
||||||
|
thisContentElement.classList.add('active'); |
||||||
|
|
||||||
|
let width = thisContentElement.clientWidth; |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
if (device <= 720) { |
||||||
|
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); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function modalClose(buttonElement) { |
||||||
|
let modal = document.querySelector('.modal'), |
||||||
|
aside = document.querySelector('.modal__aside'), |
||||||
|
asideItems = document.querySelectorAll('.modal__item'), |
||||||
|
elements = document.querySelectorAll(buttonElement); |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
e.onclick = function () {
|
||||||
|
aside.style.width = '0px'; |
||||||
|
|
||||||
|
asideItems.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.style.filter = 'blur(10px)'; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
asideItems.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.classList.remove('active'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
modal.classList.remove('active'); |
||||||
|
}, 300); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function closeModalForm(close){ |
||||||
|
let buttons = document.querySelectorAll(close), |
||||||
|
modal = document.querySelector('.modal'); |
||||||
|
|
||||||
|
buttons.forEach(button => { |
||||||
|
button.onclick = function (buttonEvent) { |
||||||
|
modal.classList.remove('active'); |
||||||
|
|
||||||
|
if (!modal.querySelector('.modal-map.active')) { |
||||||
|
modal.querySelector('.modal-form.active').classList.remove('active'); |
||||||
|
}else{ |
||||||
|
modal.querySelector('.modal-map.active').classList.remove('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { |
||||||
|
let elements = document.querySelectorAll(mainElement); |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
let thisMainElement = e, |
||||||
|
thisButtonElement = e.querySelector(buttonElement), |
||||||
|
thisHeightElement = e.querySelector(heightElement), |
||||||
|
thisContentElement = e.querySelector(contentElement);
|
||||||
|
|
||||||
|
thisButtonElement.onclick = function (e) { |
||||||
|
let height = thisHeightElement.clientHeight; |
||||||
|
|
||||||
|
if (close == true && !thisMainElement.classList.contains('active')) { |
||||||
|
elements.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.classList.remove('active'); |
||||||
|
e.querySelector(contentElement).style.height = null |
||||||
|
}
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
if (!thisMainElement.classList.contains('active')) { |
||||||
|
thisContentElement.style.height = `${height}px`; |
||||||
|
thisMainElement.classList.add('active'); |
||||||
|
}else{ |
||||||
|
thisContentElement.style.height = null; |
||||||
|
thisMainElement.classList.remove('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function toggleHeader(button, content, blockheight, removeBlock, removeClass) { |
||||||
|
let thisButton = document.querySelector(button),
|
||||||
|
thisContent = document.querySelector(content), |
||||||
|
thisRemoveBlock = document.querySelector(removeBlock) || '', |
||||||
|
thisBlockheight = document.querySelector(blockheight); |
||||||
|
|
||||||
|
thisButton.onclick = function () { |
||||||
|
let height = thisBlockheight.clientHeight; |
||||||
|
|
||||||
|
if (!thisContent.classList .contains('open')) { |
||||||
|
thisContent.style.height = `${height}px`; |
||||||
|
thisContent.classList .add('open'); |
||||||
|
|
||||||
|
if (removeBlock) { |
||||||
|
thisRemoveBlock.classList.remove(removeClass); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
thisContent.style.height = null; |
||||||
|
thisContent.classList .remove('open'); |
||||||
|
|
||||||
|
if (removeBlock) { |
||||||
|
if (window.scrollY <= 25) { |
||||||
|
thisRemoveBlock.classList.add(removeClass); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function modalFormOpen(formOrNotification) { |
||||||
|
let buttons = document.querySelectorAll(formOrNotification), |
||||||
|
modal = document.querySelector('.modal'); |
||||||
|
|
||||||
|
buttons.forEach(button => { |
||||||
|
button.onclick = function (eventButton) { |
||||||
|
let classOpenForm = button.dataset.form, |
||||||
|
form = modal.querySelector(`.${classOpenForm}`);
|
||||||
|
|
||||||
|
form.classList.add('active'); |
||||||
|
modal.classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
// function
|
||||||
@ -0,0 +1,348 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
// header
|
||||||
|
toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false); |
||||||
|
toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white'); |
||||||
|
toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white'); |
||||||
|
// header
|
||||||
|
|
||||||
|
// modal
|
||||||
|
modalOpen('.button--filter', '.modal__filter'); |
||||||
|
modalOpen('.basket-open', '.modal__basket'); |
||||||
|
modalOpen('.open-to-know', '.modal__to-know'); |
||||||
|
modalClose('.modal__close'); |
||||||
|
|
||||||
|
let modal = document.querySelector('.modal'); |
||||||
|
|
||||||
|
modal.onclick = function (event) { |
||||||
|
let target = event.target; |
||||||
|
|
||||||
|
if (target.classList.contains('modal')) { |
||||||
|
let aside = target.querySelector('.modal__aside'), |
||||||
|
modalItem = target.querySelector('.modal__item.active'); |
||||||
|
|
||||||
|
aside.style.width = '0px'; |
||||||
|
setTimeout(() => { |
||||||
|
modalItem.style.cssText = ''; |
||||||
|
modalItem.classList.remove('active'); |
||||||
|
target.classList.remove('active'); |
||||||
|
}, 300); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// modal
|
||||||
|
|
||||||
|
// toggle
|
||||||
|
toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); |
||||||
|
// toggle
|
||||||
|
|
||||||
|
// radio-button
|
||||||
|
let radioButtons = document.querySelectorAll('.radio-button'); |
||||||
|
|
||||||
|
radioButtons.forEach(radioBlock => { |
||||||
|
let buttons = radioBlock.querySelectorAll('.button'); |
||||||
|
|
||||||
|
buttons.forEach(button => { |
||||||
|
let input = radioBlock.querySelector('.radio-button__input'); |
||||||
|
|
||||||
|
button.onclick = function (e) { |
||||||
|
e.preventDefault(); |
||||||
|
|
||||||
|
buttons.forEach(thisButton => { |
||||||
|
if (thisButton.classList.contains('active')) { |
||||||
|
thisButton.classList.remove('active') |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
let text = button.textContent.trim(); |
||||||
|
|
||||||
|
button.classList.toggle('active'); |
||||||
|
|
||||||
|
input.value = text;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}) |
||||||
|
// radio-button
|
||||||
|
|
||||||
|
// 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); |
||||||
|
|
||||||
|
let selects = document.querySelectorAll('.select'); |
||||||
|
|
||||||
|
selects.forEach(select => { |
||||||
|
let state = select.querySelector('.select__state'), |
||||||
|
content = select.querySelector('.state__block'), |
||||||
|
buttons = select.querySelectorAll('.state__button'); |
||||||
|
|
||||||
|
buttons.forEach(e => { |
||||||
|
let button = e; |
||||||
|
|
||||||
|
e.onclick = function (event) { |
||||||
|
event.preventDefault(); |
||||||
|
|
||||||
|
buttons.forEach(element => { |
||||||
|
if (element.classList.contains('active')) { |
||||||
|
element.classList.remove('active'); |
||||||
|
} |
||||||
|
})
|
||||||
|
|
||||||
|
let text = e.textContent.trim(); |
||||||
|
state.value = text; |
||||||
|
|
||||||
|
button.classList.add('active'); |
||||||
|
content.style.height = 0; |
||||||
|
select.classList.remove('active'); |
||||||
|
}
|
||||||
|
}) |
||||||
|
}) |
||||||
|
// select
|
||||||
|
|
||||||
|
// counter
|
||||||
|
let counters = document.querySelectorAll('.counter'); |
||||||
|
|
||||||
|
counters.forEach(e => { |
||||||
|
let minus = e.querySelector('.minus'), |
||||||
|
plus = e.querySelector('.plus'), |
||||||
|
input = e.querySelector('.counter__input'); |
||||||
|
|
||||||
|
minus.onclick = function (e) { |
||||||
|
e.preventDefault(); |
||||||
|
|
||||||
|
let number = input.value; |
||||||
|
|
||||||
|
if (number >= 2){ |
||||||
|
input.value = Number(number) - 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
plus.onclick = function (e) { |
||||||
|
e.preventDefault(); |
||||||
|
|
||||||
|
let number = input.value; |
||||||
|
|
||||||
|
if (number <= 99) { |
||||||
|
input.value = Number(number) + 1; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
// counter
|
||||||
|
|
||||||
|
// checkbox
|
||||||
|
let checkbox = document.querySelectorAll('.checkbox'); |
||||||
|
|
||||||
|
checkbox.forEach(e => { |
||||||
|
e.onclick = function (event) { |
||||||
|
let input = e.querySelector('.checkbox__input'); |
||||||
|
|
||||||
|
if (!e.classList.contains('active')) { |
||||||
|
input.checked = 1; |
||||||
|
}else{ |
||||||
|
input.checked = 0; |
||||||
|
} |
||||||
|
e.classList.toggle('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
// checkbox
|
||||||
|
|
||||||
|
|
||||||
|
// function
|
||||||
|
function modalOpen(buttonElement, contentElement){ |
||||||
|
let modal = document.querySelector('.modal'), |
||||||
|
aside = document.querySelector('.modal__aside'), |
||||||
|
elements = document.querySelectorAll(buttonElement), |
||||||
|
device = window.screen.width; |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
let thisContentElement = document.querySelector(contentElement); |
||||||
|
|
||||||
|
e.onclick = function () { |
||||||
|
modal.classList.add('active'); |
||||||
|
thisContentElement.classList.add('active'); |
||||||
|
|
||||||
|
let width = thisContentElement.clientWidth; |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
if (device <= 720) { |
||||||
|
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); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function modalClose(buttonElement) { |
||||||
|
let modal = document.querySelector('.modal'), |
||||||
|
aside = document.querySelector('.modal__aside'), |
||||||
|
asideItems = document.querySelectorAll('.modal__item'), |
||||||
|
elements = document.querySelectorAll(buttonElement); |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
e.onclick = function () {
|
||||||
|
aside.style.width = '0px'; |
||||||
|
|
||||||
|
asideItems.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.style.filter = 'blur(10px)'; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
asideItems.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.classList.remove('active'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
modal.classList.remove('active'); |
||||||
|
}, 300); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { |
||||||
|
let elements = document.querySelectorAll(mainElement); |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
let thisMainElement = e, |
||||||
|
thisButtonElement = e.querySelector(buttonElement), |
||||||
|
thisHeightElement = e.querySelector(heightElement), |
||||||
|
thisContentElement = e.querySelector(contentElement);
|
||||||
|
|
||||||
|
thisButtonElement.onclick = function (e) { |
||||||
|
let height = thisHeightElement.clientHeight; |
||||||
|
|
||||||
|
if (close == true && !thisMainElement.classList.contains('active')) { |
||||||
|
elements.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.classList.remove('active'); |
||||||
|
e.querySelector(contentElement).style.height = null |
||||||
|
}
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
if (!thisMainElement.classList.contains('active')) { |
||||||
|
thisContentElement.style.height = `${height}px`; |
||||||
|
thisMainElement.classList.add('active'); |
||||||
|
}else{ |
||||||
|
thisContentElement.style.height = null; |
||||||
|
thisMainElement.classList.remove('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function toggleHeader(button, content, blockheight, removeBlock, removeClass) { |
||||||
|
let thisButton = document.querySelector(button),
|
||||||
|
thisContent = document.querySelector(content), |
||||||
|
thisRemoveBlock = document.querySelector(removeBlock) || '', |
||||||
|
thisBlockheight = document.querySelector(blockheight); |
||||||
|
|
||||||
|
thisButton.onclick = function () { |
||||||
|
let height = thisBlockheight.clientHeight; |
||||||
|
|
||||||
|
if (!thisContent.classList .contains('open')) { |
||||||
|
thisContent.style.height = `${height}px`; |
||||||
|
thisContent.classList .add('open'); |
||||||
|
|
||||||
|
if (removeBlock) { |
||||||
|
thisRemoveBlock.classList.remove(removeClass); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
thisContent.style.height = null; |
||||||
|
thisContent.classList .remove('open'); |
||||||
|
|
||||||
|
if (removeBlock) { |
||||||
|
if (window.scrollY <= 25) { |
||||||
|
thisRemoveBlock.classList.add(removeClass); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
// function
|
||||||
|
|
||||||
|
// resize
|
||||||
|
window.addEventListener('resize', (e) => { |
||||||
|
let width = window.screen.width; |
||||||
|
|
||||||
|
// media
|
||||||
|
modalOpen('.button--filter', '.modal__filter'); |
||||||
|
modalOpen('.basket-open', '.modal__basket'); |
||||||
|
modalOpen('.open-to-know', '.modal__to-know'); |
||||||
|
modalClose('.modal__close'); |
||||||
|
|
||||||
|
let modalItem = document.querySelectorAll('.modal__item'); |
||||||
|
|
||||||
|
// if (width <= 720) {
|
||||||
|
modalItem.forEach(modal => { |
||||||
|
if (modal.classList.contains('active')) { |
||||||
|
let aside = document.querySelector('.modal__aside'); |
||||||
|
|
||||||
|
if (width <= 720) { |
||||||
|
aside.style.width = `${width}px` |
||||||
|
}else{ |
||||||
|
let openAside = document.querySelector('.modal__item.active'), |
||||||
|
newWidth = openAside.clientWidth; |
||||||
|
|
||||||
|
aside.style.width = `${newWidth}px` |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
// }
|
||||||
|
}); |
||||||
|
// resize
|
||||||
|
|
||||||
|
// scroll
|
||||||
|
|
||||||
|
|
||||||
|
if (document.querySelector('.header').classList.contains('white')) { |
||||||
|
window.addEventListener("scroll", function (e) { |
||||||
|
let header = document.querySelector('.header'); |
||||||
|
let scroll = window.scrollY; |
||||||
|
|
||||||
|
if (scroll >= 25) { |
||||||
|
header.classList.remove('white') |
||||||
|
}else{ |
||||||
|
header.classList.add('white') |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
// scroll
|
||||||
@ -0,0 +1,110 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
// slider gallery modal
|
||||||
|
const gallery = new Swiper('.gallery__slider', { |
||||||
|
spaceBetween: 100, |
||||||
|
|
||||||
|
pagination: { |
||||||
|
el: '.swiper-pagination', |
||||||
|
}, |
||||||
|
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
}, |
||||||
|
|
||||||
|
scrollbar: { |
||||||
|
el: '.swiper-scrollbar', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
let paginationButtons = document.querySelectorAll('.gallery-pagination__item'); |
||||||
|
|
||||||
|
paginationButtons.forEach(button => { |
||||||
|
let index = button.dataset.countImg; |
||||||
|
|
||||||
|
button.onclick = function () { |
||||||
|
gallery.slideTo(index); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// open gallery
|
||||||
|
let detailImage= document.querySelectorAll('.detail__image'); |
||||||
|
detailImage.forEach(button => { |
||||||
|
let index = button.dataset.countImg; |
||||||
|
|
||||||
|
button.onclick = function () { |
||||||
|
gallery.slideTo(index); |
||||||
|
|
||||||
|
document.querySelector('.gallery').classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// close gallery
|
||||||
|
|
||||||
|
document.querySelector('.gallery__close').onclick = function () { |
||||||
|
document.querySelector('.gallery').classList.remove('active'); |
||||||
|
} |
||||||
|
// slider gallery modal
|
||||||
|
|
||||||
|
// slider gallery main phone
|
||||||
|
|
||||||
|
// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
|
||||||
|
|
||||||
|
const detailPhone = new Swiper('.detail__images-phone', { |
||||||
|
spaceBetween: 100, |
||||||
|
|
||||||
|
pagination: { |
||||||
|
el: '.swiper-pagination', |
||||||
|
}, |
||||||
|
|
||||||
|
navigation: { |
||||||
|
nextEl: '.swiper-button-next', |
||||||
|
prevEl: '.swiper-button-prev', |
||||||
|
}, |
||||||
|
|
||||||
|
scrollbar: { |
||||||
|
el: '.swiper-scrollbar', |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block'); |
||||||
|
|
||||||
|
detailImagesPhones.forEach(button => { |
||||||
|
button.onclick = function (e) { |
||||||
|
let index = button.dataset.countImg; |
||||||
|
|
||||||
|
gallery.slideTo(index); |
||||||
|
|
||||||
|
document.querySelector('.gallery').classList.add('active'); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
// slider gallery main phone
|
||||||
|
|
||||||
|
// detail catalog
|
||||||
|
const detailCatalot = new Swiper('.detail__catalot', { |
||||||
|
// Navigation arrows
|
||||||
|
navigation: { |
||||||
|
nextEl: '.detail-catalot-control__button.next', |
||||||
|
prevEl: '.detail-catalot-control__button.prev', |
||||||
|
}, |
||||||
|
breakpoints: { |
||||||
|
1600: { |
||||||
|
slidesPerView: 4, |
||||||
|
}, |
||||||
|
1200: { |
||||||
|
slidesPerView: 3, |
||||||
|
}, |
||||||
|
780: { |
||||||
|
slidesPerView: 2, |
||||||
|
}, |
||||||
|
100: { |
||||||
|
slidesPerView: 1.1, |
||||||
|
spaceBetween: 20 |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}); |
||||||
|
// detail catalog
|
||||||
@ -0,0 +1,67 @@ |
|||||||
|
const rootSelectorTabs = '[data-js-tabs]'; |
||||||
|
|
||||||
|
class Tabs{ |
||||||
|
// элементы для поиска
|
||||||
|
selectors = { |
||||||
|
root: rootSelectorTabs, |
||||||
|
button: '[data-js-tabs-button]', |
||||||
|
content: '[data-js-tabs-content]', |
||||||
|
} |
||||||
|
// класс отображения состояния
|
||||||
|
stateClasses = { |
||||||
|
isActive: 'active', |
||||||
|
} |
||||||
|
|
||||||
|
constructor(rootElement){ |
||||||
|
this.rootElement = rootElement; |
||||||
|
this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button); |
||||||
|
this.contentElements = this.rootElement.querySelectorAll(this.selectors.content); |
||||||
|
this.state = { |
||||||
|
activeMenuIndex: [...this.buttonElements] |
||||||
|
.findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)), |
||||||
|
}; |
||||||
|
this.limitTabsIndex = this.buttonElements.length - 1; |
||||||
|
this.bindEvents(); |
||||||
|
} |
||||||
|
|
||||||
|
updateUI(){ |
||||||
|
const { activeMenuIndex } = this.state; |
||||||
|
|
||||||
|
this.buttonElements.forEach((buttonElement, index) => { |
||||||
|
const isActive = index === activeMenuIndex; |
||||||
|
|
||||||
|
buttonElement.classList.toggle(this.stateClasses.isActive, isActive); |
||||||
|
}) |
||||||
|
|
||||||
|
this.contentElements.forEach((contentElement, index) => { |
||||||
|
const isActive = index === activeMenuIndex; |
||||||
|
|
||||||
|
contentElement.classList.toggle(this.stateClasses.isActive, isActive); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
onButtonClick(buttonIndex){ |
||||||
|
this.state.activeMenuIndex = buttonIndex; |
||||||
|
this.updateUI(); |
||||||
|
} |
||||||
|
|
||||||
|
bindEvents(){ |
||||||
|
this.buttonElements.forEach((buttonElement, index) => { |
||||||
|
buttonElement.addEventListener('click', () => this.onButtonClick(index)) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
class TabsCollection { |
||||||
|
constructor(){ |
||||||
|
this.init(); |
||||||
|
} |
||||||
|
|
||||||
|
init(){ |
||||||
|
document.querySelectorAll(rootSelectorTabs).forEach((element) => { |
||||||
|
new Tabs(element); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default TabsCollection; |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
const rootSelectorToggles = '[data-js-toggle]'; |
||||||
|
|
||||||
|
class Toggle{ |
||||||
|
// элементы для поиска
|
||||||
|
selectors = { |
||||||
|
root: rootSelectorToggles, |
||||||
|
button: '[data-js-toggle-button]', |
||||||
|
wrapper: '[data-js-toggle-wrapper]', |
||||||
|
content: '[data-js-toggle-content]', |
||||||
|
} |
||||||
|
// класс отображения состояния
|
||||||
|
stateClasses = { |
||||||
|
isActive: 'active', |
||||||
|
} |
||||||
|
|
||||||
|
constructor(rootElement){ |
||||||
|
this.rootElement = rootElement; |
||||||
|
this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button); |
||||||
|
this.wrapperElements = this.rootElement.querySelectorAll(this.selectors.wrapper); |
||||||
|
this.contentElements = this.rootElement.querySelectorAll(this.selectors.content); |
||||||
|
this.state = { |
||||||
|
activeToggleIndex: [...this.buttonElements] |
||||||
|
.findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)), |
||||||
|
}; |
||||||
|
this.bindEvents(); |
||||||
|
} |
||||||
|
|
||||||
|
updateUI(newHeight){ |
||||||
|
const { activeToggleIndex } = this.state; |
||||||
|
|
||||||
|
this.buttonElements.forEach((buttonElement, index) => { |
||||||
|
const isActive = index === activeToggleIndex; |
||||||
|
|
||||||
|
buttonElement.classList.toggle(this.stateClasses.isActive, isActive); |
||||||
|
}) |
||||||
|
|
||||||
|
this.wrapperElements.forEach((wrapperElement, index) => { |
||||||
|
const isActive = index === activeToggleIndex, |
||||||
|
newHeight = this.contentElements[index].offsetHeight; |
||||||
|
|
||||||
|
wrapperElement.classList.toggle(this.stateClasses.isActive, isActive); |
||||||
|
|
||||||
|
if (isActive) { |
||||||
|
wrapperElement.style.height = `${newHeight}px`; |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
if (wrapperElement.classList.contains('active')) { |
||||||
|
wrapperElement.style.height = `auto`; |
||||||
|
} |
||||||
|
}, 300); |
||||||
|
}else{ |
||||||
|
wrapperElement.style.height = `${newHeight}px`; |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
if (!wrapperElement.classList.contains('active')) { |
||||||
|
wrapperElement.style.height = `${0}px`; |
||||||
|
} |
||||||
|
}, 10); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
onButtonClick(buttonIndex){ |
||||||
|
this.state.activeToggleIndex = (buttonIndex === this.state.activeToggleIndex) ? -1 : buttonIndex; |
||||||
|
|
||||||
|
this.updateUI(); |
||||||
|
} |
||||||
|
|
||||||
|
bindEvents(){ |
||||||
|
this.buttonElements.forEach((buttonElement, index) => { |
||||||
|
buttonElement.addEventListener('click', () => this.onButtonClick(index)) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
class TogglesCollection{
|
||||||
|
constructor(){ |
||||||
|
this.init(); |
||||||
|
} |
||||||
|
|
||||||
|
init(){ |
||||||
|
document.querySelectorAll(rootSelectorToggles).forEach((element) => { |
||||||
|
new Toggle(element); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default TogglesCollection; |
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 945 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue