Your Name
3 months ago
parent
08c169f265
commit
d792206a14
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 modalOpen(buttonElement, contentElement){ |
||||
let modal = document.querySelector('.modal'), |
||||
aside = document.querySelector('.modal__aside'), |
||||
elements = document.querySelectorAll(buttonElement), |
||||
device = window.screen.width; |
||||
// // 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); |
||||
// elements.forEach(e => {
|
||||
// let thisContentElement = document.querySelector(contentElement);
|
||||
|
||||
e.onclick = function () { |
||||
modal.classList.add('active'); |
||||
thisContentElement.classList.add('active'); |
||||
// 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'; |
||||
// 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 closeModalForm(close){ |
||||
let buttons = document.querySelectorAll(close), |
||||
modal = document.querySelector('.modal'); |
||||
|
||||
buttons.forEach(button => { |
||||
button.onclick = function (buttonEvent) { |
||||
modal.classList.remove('active'); |
||||
// 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 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'); |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
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'); |
||||
} |
||||
} |
||||
// if (!modal.querySelector('.modal-map.active')) {
|
||||
// modal.querySelector('.modal-form.active').classList.remove('active');
|
||||
// }else{
|
||||
// modal.querySelector('.modal-map.active').classList.remove('active');
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// 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 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
|
||||
// });
|
||||
// }
|
||||
|
||||
// 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 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
|
||||
Loading…
Reference in new issue