сверстал две вариации order
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user