сделал адаптивность order
This commit is contained in:
@@ -796,6 +796,9 @@ button{
|
||||
line-height: 120%;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
.form-input-radio__title.form-input-radio__title--no-span span{
|
||||
color: var(--text-dark);
|
||||
}
|
||||
.form-input-radio__price{
|
||||
margin-left: auto;
|
||||
|
||||
@@ -966,6 +969,29 @@ button{
|
||||
line-height: 120%;
|
||||
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 */
|
||||
|
||||
|
||||
@@ -1736,6 +1762,9 @@ button{
|
||||
.modal-form--width-584{
|
||||
width: 584px;
|
||||
}
|
||||
.modal-form--cdek{
|
||||
width: 836px;
|
||||
}
|
||||
.modal-form__close{
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
@@ -1841,6 +1870,8 @@ button{
|
||||
height: 16px;
|
||||
|
||||
background-image: url(../img/svg/main/arrow-right-input.svg);
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
.modal-form-content__line--two .modal-form-content-line__element{
|
||||
width: calc(50% - 12px);
|
||||
|
||||
@@ -184,4 +184,39 @@
|
||||
}
|
||||
.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{
|
||||
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>
|
||||
</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__element">
|
||||
<label for="firstname" class="label-name">Имя и фамилия</label>
|
||||
@@ -318,9 +318,10 @@
|
||||
|
||||
<div class="modal-form-content__line">
|
||||
<div class="form-agreement__check">
|
||||
<input type="checkbox" name="" id="remember" class="form-agreement__input">
|
||||
<div class="form-agreement__square">
|
||||
</div>
|
||||
<p class="form-agreement__label">Запомнить меня</p>
|
||||
<label for="remember" class="form-agreement__label">Запомнить меня</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -365,7 +366,7 @@
|
||||
<div class="order-contacts-deliver__item">
|
||||
<div class="modal-form-content-line__element modal-form-content-line__element--arrow">
|
||||
<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>
|
||||
@@ -373,7 +374,7 @@
|
||||
<div class="order-contacts-deliver__item">
|
||||
<div class="modal-form-content-line__element modal-form-content-line__element--arrow">
|
||||
<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>
|
||||
|
||||
@@ -385,7 +386,7 @@
|
||||
<div class="form-input-radio-circle__content"></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">
|
||||
350
|
||||
@@ -396,7 +397,7 @@
|
||||
<div class="form-input-radio-circle__content"></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">
|
||||
350
|
||||
@@ -407,7 +408,7 @@
|
||||
<div class="form-input-radio-circle__content"></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">
|
||||
350
|
||||
@@ -627,7 +628,56 @@
|
||||
</footer>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user