Compare commits
3 Commits
cosmopet--
...
master
| Author | SHA1 | Date |
|---|---|---|
GP
|
e67ea16299 | 7 months ago |
 Максим Максимов
|
d8f89ad9a9 | 7 months ago |
|
Максим Максимов
|
043a617c87 | 8 months ago |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,336 +1,5 @@ |
|||||||
/* Стили для мобильных устройств */ |
/* Стили для мобильных устройств */ |
||||||
@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; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
} |
||||||
@ -1,241 +0,0 @@ |
|||||||
.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,348 +1,5 @@ |
|||||||
/* Стили для планшетов */ |
/* Стили для планшетов */ |
||||||
@media only screen and (max-width: 1200px) { |
@media only screen and (max-width: 992px) { |
||||||
/* 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 */ |
|
||||||
} |
} |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} |
||||||
|
/*# sourceMappingURL=normalize.min.css.map */ |
||||||
@ -0,0 +1 @@ |
|||||||
|
*{padding:0;margin:0;border:none}*,::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer} |
||||||
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.
|
Before Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 502 B |
|
Before Width: | Height: | Size: 615 B |
|
Before Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 459 B |
|
Before Width: | Height: | Size: 493 B |
|
Before Width: | Height: | Size: 491 B |
|
Before Width: | Height: | Size: 481 B |
|
Before Width: | Height: | Size: 456 B |
|
Before Width: | Height: | Size: 458 B |
|
Before Width: | Height: | Size: 458 B |
|
Before Width: | Height: | Size: 495 B |
|
Before Width: | Height: | Size: 954 B |
|
Before Width: | Height: | Size: 983 B |
|
Before Width: | Height: | Size: 455 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 349 B |
|
Before Width: | Height: | Size: 455 B |
|
Before Width: | Height: | Size: 453 B |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 168 B |
|
Before Width: | Height: | Size: 584 B |
|
Before Width: | Height: | Size: 695 B |
|
Before Width: | Height: | Size: 442 B |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 623 B |
|
Before Width: | Height: | Size: 855 B |
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,67 +0,0 @@ |
|||||||
'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'); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,286 +0,0 @@ |
|||||||
'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);
|
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
@ -1,156 +0,0 @@ |
|||||||
'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
|
|
||||||
@ -1,348 +0,0 @@ |
|||||||
'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
|
|
||||||
@ -1,110 +0,0 @@ |
|||||||
'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
|
|
||||||
@ -1,67 +0,0 @@ |
|||||||
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; |
|
||||||
@ -1,89 +0,0 @@ |
|||||||
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
|
Before Width: | Height: | Size: 178 KiB |
|
Before 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