Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

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

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 9 months ago
parent 4a3e166d19
commit fe7909e9cc
3 changed files with 123 additions and 7 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 31
      assets/css/gp-style-core.css
  2. 35
      assets/css/gp-style-order.css
  3. 64
      order.html

31
assets/css/gp-style-core.css
Unescape View File

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

35
assets/css/gp-style-order.css
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save