<div class="modal js-modal modal--size-medium " aria-modal="true" role="dialog" id="add-new-object-modal" aria-labelledby="add-new-object-modal_label" data-close-label="Close">
<h1 id="add-new-object-modal_label" class="h3 modal__title ">
Lisa uus objekt
</h1>
<div class="modal__content">
<div class="new-object-modal">
<div class="new-object-modal__fields">
<div class="grid grid--gutter-medium">
<div class="grid__col grid__col--xs-4 grid__col--lg-6">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="object-name">
Objekti nimi
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="object-name" name="" required>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--lg-6">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="object-code">
Objekti kood
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="object-code" name="" required>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--lg-6">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="object-address">
Aadress
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="object-address" name="" required>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--lg-6">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="postal-code">
Postiindeks
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="postal-code" name="" required>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-4 grid__col--lg-6">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="city">
Linn
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="city" name="" required>
</div>
</div>
</div>
</div>
</div>
<div class="new-object-modal__buttons">
<button type="button" class="button button--text js-modal">
<span class="button__inner">
<span class="button__text">Tühista</span>
</span>
</button>
<button type="button" class="button js-modal">
<span class="button__inner">
<span class="button__text">Salvesta</span>
</span>
</button>
</div>
</div>
</div>
</div>
{% set modalContent %}
<div class="new-object-modal">
<div class="new-object-modal__fields">
<div class="grid grid--gutter-medium">
<div class="grid__col grid__col--xs-4 grid__col--lg-6">
{% include '@textfield' with {
modifier: '',
class: '',
data: data.objectName,
labelClass: 'textfield__label--required'
} %}
</div>
<div class="grid__col grid__col--xs-4 grid__col--lg-6">
{% include '@textfield' with {
modifier: '',
class: '',
data: data.objectCode,
labelClass: 'textfield__label--required'
} %}
</div>
<div class="grid__col grid__col--xs-4 grid__col--lg-6">
{% include '@textfield' with {
modifier: '',
class: '',
data: data.address,
labelClass: 'textfield__label--required'
} %}
</div>
<div class="grid__col grid__col--xs-4 grid__col--lg-6">
{% include '@textfield' with {
modifier: '',
class: '',
data: data.postalCode,
labelClass: 'textfield__label--required'
} %}
</div>
<div class="grid__col grid__col--xs-4 grid__col--lg-6">
{% include '@textfield' with {
modifier: '',
class: '',
data: data.city,
labelClass: 'textfield__label--required'
} %}
</div>
</div>
</div>
<div class="new-object-modal__buttons">
{% include '@button' with {
data: {
text: 'Tühista'
},
modifier: 'button--text'
} %}
{% include '@button' with {
data: {
text: 'Salvesta'
}
} %}
</div>
</div>
{% endset %}
{% include '@modal' with {
data: {
title: {
text: 'Lisa uus objekt'
},
closeLabel: 'Close',
content: modalContent
},
id: 'add-new-object-modal',
focusableElementId: '',
descriptionId: '',
class: class ~ ' modal--size-medium',
headingElement: 'h1'
} %}
{
"language": "en-US",
"class": "js-modal",
"data": {
"objectName": {
"label": "Objekti nimi",
"attributes": "required",
"id": "object-name"
},
"objectCode": {
"label": "Objekti kood",
"attributes": "required",
"id": "object-code"
},
"address": {
"label": "Aadress",
"attributes": "required",
"id": "object-address"
},
"postalCode": {
"label": "Postiindeks",
"attributes": "required",
"id": "postal-code"
},
"city": {
"label": "Linn",
"attributes": "required",
"id": "city"
}
}
}
.new-object-modal__fields {
background: $L-background-light;
padding: 12px;
@include bp(lg-min) {
padding: 24px;
}
}
.new-object-modal__buttons {
margin-top: 16px;
gap: 32px;
display: flex;
justify-content: center;
@include bp(lg-min) {
margin-top: 24px;
justify-content: flex-end;
}
}
import './new-object-modal.scss';