сделал адаптивность order

cosmopet--Memento-mori-dev
Kirill Pet 9 months ago
parent 4a3e166d19
commit fe7909e9cc
  1. 31
      assets/css/gp-style-core.css
  2. 35
      assets/css/gp-style-order.css
  3. 64
      order.html

@ -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);

@ -184,4 +184,39 @@
} }
.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%;
}
} }

@ -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>

Loading…
Cancel
Save