<section class="section section--checkout-form ">
<div class="checkout-form">
<h2 class="checkout-form__title h3">Kontaktinfo</h2>
<div class="checkout-form__fields grid">
<div class="grid__col grid__col--lg-6">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="first-name">
Eesnimi
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="first-name" name="" required>
</div>
</div>
</div>
<div class="grid__col grid__col--lg-6">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="last-name">
Perenimi
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="last-name" name="" required>
</div>
</div>
<div class="checkout-form__error-message">
Error sõnumi näide.
</div>
</div>
<div class="grid__col">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="personal-id">
Isikukood
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="personal-id" name="" required>
</div>
</div>
</div>
<div class="grid__col">
<div class="textfield select ">
<label class="textfield__label select__label textfield__label--required " for="construction-object">
Ehitusobjekt
</label>
<div class="textfield__inner">
<select name="" id="construction-object" class="textfield__input select__input" required>
<option value="placeholder" disabled selected>
Aadress
</option>
<option value="aadress-1">
Aadress 1
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</div>
</div>
</div>
<div class="checkout-form__add-new-object grid__col">
<p class="text-black">Ei leidnud sobivat?</p>
<a href="#" class="checkout-form__add-new-object-link">Lisa uus objekt</a>
</div>
<div class="grid__col">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="phone">
Telefoninumber
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="phone" name="" required>
</div>
</div>
</div>
<div class="grid__col">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="email">
E-mail
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="email" name="" required>
</div>
</div>
</div>
<div class="grid__col">
<div class="textfield textarea">
<label class="textfield__label " for="additional-info">
Lisainfo (optional)
</label>
<div class="textfield__inner">
<textarea class="textfield__input textarea__input" id="additional-info" name=""></textarea>
</div>
</div>
</div>
</div>
</div>
</section>
{% set sectionContent %}
<div class="checkout-form">
{% if data.title is not empty %}
<h2 class="checkout-form__title h3">{{ data.title }}</h2>
{% endif %}
<div class="checkout-form__fields grid">
<div class="grid__col grid__col--lg-6">
{% include '@textfield' with {
modifier: '',
class: '',
data: data.firstName,
labelClass: 'textfield__label--required'
} %}
</div>
<div class="grid__col grid__col--lg-6">
{% include '@textfield' with {
modifier: '',
class: '',
data: data.lastName,
labelClass: 'textfield__label--required'
} %}
<div class="checkout-form__error-message">
Error sõnumi näide.
</div>
</div>
<div class="grid__col">
{% include '@textfield' with {
modifier: '',
class: '',
data: data.personalId,
labelClass: 'textfield__label--required'
} %}
</div>
<div class="grid__col">
{% include '@select' with {
modifier: '',
class: '',
data: data.constructionObject,
labelClass: 'textfield__label--required'
} %}
</div>
<div class="checkout-form__add-new-object grid__col">
<p class="text-black">Ei leidnud sobivat?</p>
<a href="#" class="checkout-form__add-new-object-link">Lisa uus objekt</a>
</div>
<div class="grid__col">
{% include '@textfield' with {
modifier: '',
class: '',
data: data.phone,
labelClass: 'textfield__label--required'
} %}
</div>
<div class="grid__col">
{% include '@textfield' with {
modifier: '',
class: '',
data: data.email,
labelClass: 'textfield__label--required'
} %}
</div>
<div class="grid__col">
{% include '@textarea' with {
modifier: '',
class: '',
data: data.additionalInfo
} %}
</div>
</div>
</div>
{% endset %}
{% include '@section' with {
data: {
sectionContent: sectionContent
},
modifier: 'section--checkout-form',
class: ''
} %}
{
"language": "en-US",
"data": {
"title": "Kontaktinfo",
"firstName": {
"label": "Eesnimi",
"attributes": "required",
"id": "first-name"
},
"lastName": {
"label": "Perenimi",
"attributes": "required",
"id": "last-name"
},
"personalId": {
"label": "Isikukood",
"attributes": "required",
"id": "personal-id"
},
"constructionObject": {
"label": "Ehitusobjekt",
"attributes": "required",
"id": "construction-object",
"iconName": "chevron-bottom",
"placeholder": "Aadress",
"options": [
{
"name": "Aadress 1",
"value": "aadress-1"
}
]
},
"phone": {
"label": "Telefoninumber",
"attributes": "required",
"id": "phone"
},
"email": {
"label": "E-mail",
"attributes": "required",
"id": "email"
},
"additionalInfo": {
"label": "Lisainfo (optional)",
"id": "additional-info"
}
}
}
.checkout-form__title {
margin-bottom: 24px;
@include bp(lg-min) {
margin-bottom: 32px;
}
}
.select__inner {
.checkout-form & {
min-height: 40px;
}
}
.checkout-form__add-new-object {
display: flex;
align-items: center;
margin-top: -8px;
@include bp(lg-min) {
margin-top: -24px;
}
}
.grid__col {
.checkout-form & {
margin-bottom: 16px;
@include bp(lg-min) {
margin-bottom: 32px;
}
}
}
.grid {
.checkout-form & {
margin-bottom: -16px;
@include bp(lg-min) {
margin-bottom: -32px;
}
}
}
a,
p {
.checkout-form__add-new-object & {
letter-spacing: $letter-spacing-50;
}
}
.checkout-form__add-new-object-link {
text-decoration: none;
font-weight: $font-weight-medium;
margin-left: 3px;
}
.textarea__input {
.checkout-form & {
height: 68px;
}
}
.checkout-form__error-message {
font-size: $font-size-tiny;
color: $L-error-text;
margin-top: 8px;
}
import './checkout-form.scss';