сделал адаптивность order
This commit is contained in:
@@ -796,6 +796,9 @@ button{
|
|||||||
line-height: 120%;
|
line-height: 120%;
|
||||||
color: var(--text-dark);
|
color: var(--text-dark);
|
||||||
}
|
}
|
||||||
|
.form-input-radio__title.form-input-radio__title--no-span span{
|
||||||
|
color: var(--text-dark);
|
||||||
|
}
|
||||||
.form-input-radio__price{
|
.form-input-radio__price{
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|
||||||
@@ -966,6 +969,29 @@ button{
|
|||||||
line-height: 120%;
|
line-height: 120%;
|
||||||
color: var(--text-black);
|
color: var(--text-black);
|
||||||
}
|
}
|
||||||
|
.form-agreement__input{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.form-agreement__input:checked + .form-agreement__square{
|
||||||
|
border: none;
|
||||||
|
background: var(--gradient-blue);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.form-agreement__input:checked + .form-agreement__square::after{
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: 1px;
|
||||||
|
|
||||||
|
width: 16px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
|
||||||
|
background-image: url(../img/svg/main/arrow-selected-white.svg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
/* form */
|
/* form */
|
||||||
|
|
||||||
|
|
||||||
@@ -1736,6 +1762,9 @@ button{
|
|||||||
.modal-form--width-584{
|
.modal-form--width-584{
|
||||||
width: 584px;
|
width: 584px;
|
||||||
}
|
}
|
||||||
|
.modal-form--cdek{
|
||||||
|
width: 836px;
|
||||||
|
}
|
||||||
.modal-form__close{
|
.modal-form__close{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 24px;
|
top: 24px;
|
||||||
@@ -1841,6 +1870,8 @@ button{
|
|||||||
height: 16px;
|
height: 16px;
|
||||||
|
|
||||||
background-image: url(../img/svg/main/arrow-right-input.svg);
|
background-image: url(../img/svg/main/arrow-right-input.svg);
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.modal-form-content__line--two .modal-form-content-line__element{
|
.modal-form-content__line--two .modal-form-content-line__element{
|
||||||
width: calc(50% - 12px);
|
width: calc(50% - 12px);
|
||||||
|
|||||||
@@ -185,3 +185,38 @@
|
|||||||
.order-your-calculation__submit{
|
.order-your-calculation__submit{
|
||||||
margin-top: 48px;
|
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{
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
64
order.html
64
order.html
@@ -238,7 +238,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form action="" class="order-contacts__form modal-form__content check">
|
<form action="" class="order-contacts__form modal-form__content">
|
||||||
<div class="modal-form-content__line">
|
<div class="modal-form-content__line">
|
||||||
<div class="modal-form-content-line__element">
|
<div class="modal-form-content-line__element">
|
||||||
<label for="firstname" class="label-name">Имя и фамилия</label>
|
<label for="firstname" class="label-name">Имя и фамилия</label>
|
||||||
@@ -318,9 +318,10 @@
|
|||||||
|
|
||||||
<div class="modal-form-content__line">
|
<div class="modal-form-content__line">
|
||||||
<div class="form-agreement__check">
|
<div class="form-agreement__check">
|
||||||
|
<input type="checkbox" name="" id="remember" class="form-agreement__input">
|
||||||
<div class="form-agreement__square">
|
<div class="form-agreement__square">
|
||||||
</div>
|
</div>
|
||||||
<p class="form-agreement__label">Запомнить меня</p>
|
<label for="remember" class="form-agreement__label">Запомнить меня</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -365,7 +366,7 @@
|
|||||||
<div class="order-contacts-deliver__item">
|
<div class="order-contacts-deliver__item">
|
||||||
<div class="modal-form-content-line__element modal-form-content-line__element--arrow">
|
<div class="modal-form-content-line__element modal-form-content-line__element--arrow">
|
||||||
<label for="firstname" class="label-name">Пункт выдачи</label>
|
<label for="firstname" class="label-name">Пункт выдачи</label>
|
||||||
<input id="firstname" class="form__input form__input--grey" type="text" name="name" placeholder="Выберите пункт выдачи" required="" readonly>
|
<input id="firstname" class="form__input form__input--grey form-open" type="text" name="name" placeholder="Выберите пункт выдачи" required="" readonly data-form="form-point">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -373,7 +374,7 @@
|
|||||||
<div class="order-contacts-deliver__item">
|
<div class="order-contacts-deliver__item">
|
||||||
<div class="modal-form-content-line__element modal-form-content-line__element--arrow">
|
<div class="modal-form-content-line__element modal-form-content-line__element--arrow">
|
||||||
<label for="firstname" class="label-name">Адрес доставки</label>
|
<label for="firstname" class="label-name">Адрес доставки</label>
|
||||||
<input id="firstname" class="form__input form__input--grey" type="text" name="name" placeholder="Выберите адрес доставки" required="" readonly>
|
<input id="firstname" class="form__input form__input--grey form-open" type="text" name="name" placeholder="Выберите адрес доставки" required="" readonly data-form="form-address">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -385,7 +386,7 @@
|
|||||||
<div class="form-input-radio-circle__content"></div>
|
<div class="form-input-radio-circle__content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="form-input-radio__title">2 марта с 10-18 часов</p>
|
<p class="form-input-radio__title form-input-radio__title--no-span">2 марта <span>с 10-18 часов</span></p>
|
||||||
|
|
||||||
<p class="form-input-radio__price">
|
<p class="form-input-radio__price">
|
||||||
350
|
350
|
||||||
@@ -396,7 +397,7 @@
|
|||||||
<div class="form-input-radio-circle__content"></div>
|
<div class="form-input-radio-circle__content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="form-input-radio__title">2 марта с 18-22 часов</p>
|
<p class="form-input-radio__title form-input-radio__title--no-span">2 марта <span>с 10-18 часов</span></p>
|
||||||
|
|
||||||
<p class="form-input-radio__price">
|
<p class="form-input-radio__price">
|
||||||
350
|
350
|
||||||
@@ -407,7 +408,7 @@
|
|||||||
<div class="form-input-radio-circle__content"></div>
|
<div class="form-input-radio-circle__content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="form-input-radio__title">3 марта с 10-18 часов</p>
|
<p class="form-input-radio__title form-input-radio__title--no-span">2 марта <span>с 10-18 часов</span></p>
|
||||||
|
|
||||||
<p class="form-input-radio__price">
|
<p class="form-input-radio__price">
|
||||||
350
|
350
|
||||||
@@ -627,7 +628,56 @@
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<div class="modal">
|
<div class="modal">
|
||||||
|
<div class="modal-form modal-form--cdek form__full-mobile modal-form--white modal-form--height-100-phone form-point">
|
||||||
|
<button class="modal-form__close"></button>
|
||||||
|
|
||||||
|
iframe
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-address">
|
||||||
|
<button class="modal-form__close"></button>
|
||||||
|
<p class="modal-form__title">Изменить мои данные</p>
|
||||||
|
|
||||||
|
<form class="modal-form__content " method="post" action="/send-telegram.php">
|
||||||
|
<div class="modal-form-content-line__element">
|
||||||
|
<label for="firstname" class="label-name">Адрес</label>
|
||||||
|
<input id="firstname" class="form__input" type="text" name="name" placeholder="Начните вводить ваш адрес" required="">
|
||||||
|
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content__line modal-form-content__line--two">
|
||||||
|
<div class="modal-form-content-line__element">
|
||||||
|
<label for="firstname" class="label-name">Квартира</label>
|
||||||
|
<input id="firstname" class="form__input" type="text" name="name" placeholder="Квартира" required="">
|
||||||
|
<span class="form-input__error form-input__error--absolute">Квартира введено неверно</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content-line__element">
|
||||||
|
<label for="lastname" class="label-name">Этаж</label>
|
||||||
|
<input id="lastname" class="form__input" type="text" name="name" placeholder="Этаж" required="">
|
||||||
|
<span class="form-input__error form-input__error--absolute">Этаж введен неверно</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content__line modal-form-content__line--two">
|
||||||
|
<div class="modal-form-content-line__element">
|
||||||
|
<label for="firstname" class="label-name">Подъезд</label>
|
||||||
|
<input id="firstname" class="form__input" type="text" name="name" placeholder="Подъезд" required="">
|
||||||
|
<span class="form-input__error form-input__error--absolute">Подъезд введен неверно</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content-line__element">
|
||||||
|
<label for="lastname" class="label-name">Домофон</label>
|
||||||
|
<input id="lastname" class="form__input" type="text" name="name" placeholder="Код домофона" required="">
|
||||||
|
<span class="form-input__error form-input__error--absolute">Код домофона введен неверно</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form__buttons">
|
||||||
|
<input class="button button--gradient button--high button--filter button--100-perc" type="submit" value="Доставить сюда">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user