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 2c3f548e83
commit a69899b2be
4 changed files with 212 additions and 13 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. 37
      assets/css/gp-style-core.css
  2. 79
      assets/css/gp-style-order.css
  3. 5
      assets/img/svg/main/arrow-right-input.svg
  4. 102
      order.html

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

@ -105,6 +105,7 @@
--text-0: #000;
--text-3: #333;
--text-6: #666;
--text-9: #999;
/* background */
--background-white: #fff;
@ -402,10 +403,19 @@ button{
.form__input::placeholder{
color: var(--text-grey);
}
.form__input--grey{
border-color: var(--background-9);
}
.form__input--textarea{
height: 96px;
resize: none;
}
.form__input--textarea-72{
height: 72px;
resize: none;
overflow: hidden;
}
.form__input--center{
text-align: center;
}
@ -786,6 +796,18 @@ button{
line-height: 120%;
color: var(--text-dark);
}
.form-input-radio__price{
margin-left: auto;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.form-input-radio__price::after{
content: ' ₽';
}
.form-input-radio__input{
display: none;
}
@ -1808,6 +1830,18 @@ button{
.modal-form-content-line__element{
position: relative;
}
.modal-form-content-line__element--arrow::after{
content: '';
position: absolute;
right: 16px;
bottom: 16px;
width: 16px;
height: 16px;
background-image: url(../img/svg/main/arrow-right-input.svg);
}
.modal-form-content__line--two .modal-form-content-line__element{
width: calc(50% - 12px);
}
@ -1872,6 +1906,9 @@ button{
display: flex;
}
.modal-map__control--delivery{
margin-top: 12px;
}
.modal-map-control__item{
margin: 12px;

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

@ -27,11 +27,27 @@
.order-contacts__delivery{
margin-top: 47.5px;
padding-top: 9.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);
@ -109,10 +125,63 @@
.order-your__promo{
display: flex;
}
.order-your-promo__input{
border-color: var(--background-9);
}
.order-your-promo__button{
margin-left: 8px;
}
.order-your__
.order-your-calculation__item{
margin-top: 24px;
display: flex;
justify-content: space-between;
}
.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;
}

5
assets/img/svg/main/arrow-right-input.svg
Unescape View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 8.24268H3" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 8.24268L9.75736 12.4853" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 8.24268L9.75736 4.00003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 458 B

102
order.html
Unescape View File

@ -326,8 +326,10 @@
</form>
<div class="order-contacts__delivery">
<div class="modal-map__control" data-content="modal-map__address">
<button class="modal-map-control__item">
<p class="order__title">Доставка</p>
<div class="modal-map__control modal-map__control--delivery" data-content="modal-map__address">
<button class="modal-map-control__item active">
<div class="modal-map-control-item__content">
<div class="modal-map-control-item__header">
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
@ -342,7 +344,7 @@
</div>
</button>
<button class="modal-map-control__item active">
<button class="modal-map-control__item ">
<div class="modal-map-control-item__content">
<div class="modal-map-control-item__header">
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
@ -359,11 +361,69 @@
</div>
<div class="modal-map__address">
<div class="remote-control__item active">
<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>
</div>
</div>
</div>
<div class="remote-control__item">
1
<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>
</div>
</div>
<div class="order-contacts-deliver__item">
<div class="order-contacts-deliver__date">
<div class="form-input__radio remote-control__item active">
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">2 марта с 10-18 часов</p>
<p class="form-input-radio__price">
350
</p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">2 марта с 18-22 часов</p>
<p class="form-input-radio__price">
350
</p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">3 марта с 10-18 часов</p>
<p class="form-input-radio__price">
350
</p>
</div>
<input type="text" value="Малыш (от 0 до 1 года)" class="form-input-radio__input">
</div>
</div>
</div>
<div class="order-contacts-deliver__item">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Комментарий для доставки</label>
<textarea id="firstname" class="form__input form__input--textarea-72 form__input--grey" type="text" name="name" placeholder="Для служьы доставки" required="" ></textarea>
</div>
</div>
<div class="remote-control__item active">
2
</div>
</div>
</div>
@ -436,10 +496,38 @@
<div class="order-your__calculation">
<form action="" class="order-your__promo">
<input id="firstname" class="form__input order-your-promo__input" type="text" name="name" placeholder="Промокод" required="">
<input id="firstname" class="form__input form__input--grey" type="text" name="name" placeholder="Промокод" required="">
<input type="submit" value="Применить" class="button button--white button--red-48-px active order-your-promo__button">
</form>
<div class="order-your-calculation__item">
<p class="order-your-calculation__title">Товары</p>
<p class="order-your-calculation__value order-your-calculation__value--price">10560</p>
</div>
<div class="order-your-calculation__item">
<p class="order-your-calculation__title">Скидка</p>
<p class="order-your-calculation__value order-your-calculation__value--price order-your-calculation__value--discount">1280</p>
</div>
<div class="order-your-calculation__item">
<p class="order-your-calculation__title">Доставка</p>
<p class="order-your-calculation__description">Введите адрес доставки</p>
</div>
<hr class="order-your-calculation__line">
<div class="order-your-calculation__item">
<p class="order-your-calculation__result">Итого</p>
<p class="order-your-calculation__result order-your-calculation__value--price">8960</p>
</div>
<div class="order-your-calculation__submit">
<button class="button button--gradient button--high button--100-perc">
Оплатить
</button>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save