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) { |
||||
/* 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