parent
08c169f265
commit
5964b822e8
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -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; |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 459 B |
|
After Width: | Height: | Size: 954 B |
@ -1,156 +1,156 @@ |
|||||||
'use strict'; |
// 'use strict';
|
||||||
|
|
||||||
// function
|
// // function
|
||||||
function modalOpen(buttonElement, contentElement){ |
// function modalOpen(buttonElement, contentElement){
|
||||||
let modal = document.querySelector('.modal'), |
// let modal = document.querySelector('.modal'),
|
||||||
aside = document.querySelector('.modal__aside'), |
// aside = document.querySelector('.modal__aside'),
|
||||||
elements = document.querySelectorAll(buttonElement), |
// elements = document.querySelectorAll(buttonElement),
|
||||||
device = window.screen.width; |
// device = window.screen.width;
|
||||||
|
|
||||||
elements.forEach(e => { |
// elements.forEach(e => {
|
||||||
let thisContentElement = document.querySelector(contentElement); |
// let thisContentElement = document.querySelector(contentElement);
|
||||||
|
|
||||||
e.onclick = function () { |
// e.onclick = function () {
|
||||||
modal.classList.add('active'); |
// modal.classList.add('active');
|
||||||
thisContentElement.classList.add('active'); |
// thisContentElement.classList.add('active');
|
||||||
|
|
||||||
let width = thisContentElement.clientWidth; |
// let width = thisContentElement.clientWidth;
|
||||||
|
|
||||||
setTimeout(() => { |
// setTimeout(() => {
|
||||||
if (device <= 720) { |
// if (device <= 720) {
|
||||||
aside.style.width = `${device}px`; |
// aside.style.width = `${device}px`;
|
||||||
thisContentElement.style.opacity = 1; |
// thisContentElement.style.opacity = 1;
|
||||||
thisContentElement.style.filter = 'blur(0px)'; |
// thisContentElement.style.filter = 'blur(0px)';
|
||||||
}else{ |
// }else{
|
||||||
aside.style.width = `${width}px`; |
// aside.style.width = `${width}px`;
|
||||||
thisContentElement.style.opacity = 1; |
// thisContentElement.style.opacity = 1;
|
||||||
thisContentElement.style.filter = 'blur(0px)'; |
// thisContentElement.style.filter = 'blur(0px)';
|
||||||
} |
// }
|
||||||
}, 10); |
// }, 10);
|
||||||
} |
// }
|
||||||
}) |
// })
|
||||||
} |
// }
|
||||||
|
|
||||||
function modalClose(buttonElement) { |
// function modalClose(buttonElement) {
|
||||||
let modal = document.querySelector('.modal'), |
// let modal = document.querySelector('.modal'),
|
||||||
aside = document.querySelector('.modal__aside'), |
// aside = document.querySelector('.modal__aside'),
|
||||||
asideItems = document.querySelectorAll('.modal__item'), |
// asideItems = document.querySelectorAll('.modal__item'),
|
||||||
elements = document.querySelectorAll(buttonElement); |
// elements = document.querySelectorAll(buttonElement);
|
||||||
|
|
||||||
elements.forEach(e => { |
// elements.forEach(e => {
|
||||||
e.onclick = function () {
|
// e.onclick = function () {
|
||||||
aside.style.width = '0px'; |
// aside.style.width = '0px';
|
||||||
|
|
||||||
asideItems.forEach(e => { |
// asideItems.forEach(e => {
|
||||||
if (e.classList.contains('active')) { |
// if (e.classList.contains('active')) {
|
||||||
e.style.filter = 'blur(10px)'; |
// e.style.filter = 'blur(10px)';
|
||||||
} |
// }
|
||||||
}); |
// });
|
||||||
|
|
||||||
setTimeout(() => { |
// setTimeout(() => {
|
||||||
asideItems.forEach(e => { |
// asideItems.forEach(e => {
|
||||||
if (e.classList.contains('active')) { |
// if (e.classList.contains('active')) {
|
||||||
e.classList.remove('active'); |
// e.classList.remove('active');
|
||||||
} |
// }
|
||||||
}); |
// });
|
||||||
|
|
||||||
modal.classList.remove('active'); |
// modal.classList.remove('active');
|
||||||
}, 300); |
// }, 300);
|
||||||
} |
// }
|
||||||
}) |
// })
|
||||||
} |
// }
|
||||||
|
|
||||||
function closeModalForm(close){ |
// function closeModalForm(close){
|
||||||
let buttons = document.querySelectorAll(close), |
// let buttons = document.querySelectorAll(close),
|
||||||
modal = document.querySelector('.modal'); |
// modal = document.querySelector('.modal');
|
||||||
|
|
||||||
buttons.forEach(button => { |
// buttons.forEach(button => {
|
||||||
button.onclick = function (buttonEvent) { |
// button.onclick = function (buttonEvent) {
|
||||||
modal.classList.remove('active'); |
// modal.classList.remove('active');
|
||||||
|
|
||||||
if (!modal.querySelector('.modal-map.active')) { |
// if (!modal.querySelector('.modal-map.active')) {
|
||||||
modal.querySelector('.modal-form.active').classList.remove('active'); |
// modal.querySelector('.modal-form.active').classList.remove('active');
|
||||||
}else{ |
// }else{
|
||||||
modal.querySelector('.modal-map.active').classList.remove('active'); |
// modal.querySelector('.modal-map.active').classList.remove('active');
|
||||||
} |
// }
|
||||||
} |
// }
|
||||||
}) |
// })
|
||||||
} |
// }
|
||||||
|
|
||||||
function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { |
// function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
|
||||||
let elements = document.querySelectorAll(mainElement); |
// let elements = document.querySelectorAll(mainElement);
|
||||||
|
|
||||||
elements.forEach(e => { |
// elements.forEach(e => {
|
||||||
let thisMainElement = e, |
// let thisMainElement = e,
|
||||||
thisButtonElement = e.querySelector(buttonElement), |
// thisButtonElement = e.querySelector(buttonElement),
|
||||||
thisHeightElement = e.querySelector(heightElement), |
// thisHeightElement = e.querySelector(heightElement),
|
||||||
thisContentElement = e.querySelector(contentElement);
|
// thisContentElement = e.querySelector(contentElement);
|
||||||
|
|
||||||
thisButtonElement.onclick = function (e) { |
// thisButtonElement.onclick = function (e) {
|
||||||
let height = thisHeightElement.clientHeight; |
// let height = thisHeightElement.clientHeight;
|
||||||
|
|
||||||
if (close == true && !thisMainElement.classList.contains('active')) { |
// if (close == true && !thisMainElement.classList.contains('active')) {
|
||||||
elements.forEach(e => { |
// elements.forEach(e => {
|
||||||
if (e.classList.contains('active')) { |
// if (e.classList.contains('active')) {
|
||||||
e.classList.remove('active'); |
// e.classList.remove('active');
|
||||||
e.querySelector(contentElement).style.height = null |
// e.querySelector(contentElement).style.height = null
|
||||||
}
|
// }
|
||||||
}) |
// })
|
||||||
} |
// }
|
||||||
|
|
||||||
if (!thisMainElement.classList.contains('active')) { |
// if (!thisMainElement.classList.contains('active')) {
|
||||||
thisContentElement.style.height = `${height}px`; |
// thisContentElement.style.height = `${height}px`;
|
||||||
thisMainElement.classList.add('active'); |
// thisMainElement.classList.add('active');
|
||||||
}else{ |
// }else{
|
||||||
thisContentElement.style.height = null; |
// thisContentElement.style.height = null;
|
||||||
thisMainElement.classList.remove('active'); |
// thisMainElement.classList.remove('active');
|
||||||
} |
// }
|
||||||
} |
// }
|
||||||
|
|
||||||
}); |
// });
|
||||||
} |
// }
|
||||||
|
|
||||||
function toggleHeader(button, content, blockheight, removeBlock, removeClass) { |
// function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
|
||||||
let thisButton = document.querySelector(button),
|
// let thisButton = document.querySelector(button),
|
||||||
thisContent = document.querySelector(content), |
// thisContent = document.querySelector(content),
|
||||||
thisRemoveBlock = document.querySelector(removeBlock) || '', |
// thisRemoveBlock = document.querySelector(removeBlock) || '',
|
||||||
thisBlockheight = document.querySelector(blockheight); |
// thisBlockheight = document.querySelector(blockheight);
|
||||||
|
|
||||||
thisButton.onclick = function () { |
// thisButton.onclick = function () {
|
||||||
let height = thisBlockheight.clientHeight; |
// let height = thisBlockheight.clientHeight;
|
||||||
|
|
||||||
if (!thisContent.classList .contains('open')) { |
// if (!thisContent.classList .contains('open')) {
|
||||||
thisContent.style.height = `${height}px`; |
// thisContent.style.height = `${height}px`;
|
||||||
thisContent.classList .add('open'); |
// thisContent.classList .add('open');
|
||||||
|
|
||||||
if (removeBlock) { |
// if (removeBlock) {
|
||||||
thisRemoveBlock.classList.remove(removeClass); |
// thisRemoveBlock.classList.remove(removeClass);
|
||||||
} |
// }
|
||||||
}else{ |
// }else{
|
||||||
thisContent.style.height = null; |
// thisContent.style.height = null;
|
||||||
thisContent.classList .remove('open'); |
// thisContent.classList .remove('open');
|
||||||
|
|
||||||
if (removeBlock) { |
// if (removeBlock) {
|
||||||
if (window.scrollY <= 25) { |
// if (window.scrollY <= 25) {
|
||||||
thisRemoveBlock.classList.add(removeClass); |
// thisRemoveBlock.classList.add(removeClass);
|
||||||
} |
// }
|
||||||
} |
// }
|
||||||
} |
// }
|
||||||
} |
// }
|
||||||
} |
// }
|
||||||
|
|
||||||
function modalFormOpen(formOrNotification) { |
// function modalFormOpen(formOrNotification) {
|
||||||
let buttons = document.querySelectorAll(formOrNotification), |
// let buttons = document.querySelectorAll(formOrNotification),
|
||||||
modal = document.querySelector('.modal'); |
// modal = document.querySelector('.modal');
|
||||||
|
|
||||||
buttons.forEach(button => { |
// buttons.forEach(button => {
|
||||||
button.onclick = function (eventButton) { |
// button.onclick = function (eventButton) {
|
||||||
let classOpenForm = button.dataset.form, |
// let classOpenForm = button.dataset.form,
|
||||||
form = modal.querySelector(`.${classOpenForm}`);
|
// form = modal.querySelector(`.${classOpenForm}`);
|
||||||
|
|
||||||
form.classList.add('active'); |
// form.classList.add('active');
|
||||||
modal.classList.add('active'); |
// modal.classList.add('active');
|
||||||
} |
// }
|
||||||
}) |
// })
|
||||||
} |
// }
|
||||||
// function
|
// // function
|
||||||
Loading…
Reference in new issue