<div class="placeholder-card sg-placeholder-card">
<div class="placeholder-card__inner">
<a href="#add-new-object-modal" class="button button--tiny button--icon-left" data-js="open-modal">
<span class="button__inner">
<svg class="icon button__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#plus"></use>
</svg>
<span class="button__text">Lisa uus objekt</span>
</span>
</a>
<div class="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">
<span class="button__inner">
<span class="button__text">Tühista</span>
</span>
</button>
<button type="button" class="button">
<span class="button__inner">
<span class="button__text">Salvesta</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="placeholder-card {{ modifier }} {{ class }}">
<div class="placeholder-card__inner">
{% if data.button %}
{% include '@button' with {
data: data.button|merge({ attributes: 'data-js="open-modal"', link: '#add-new-object-modal' }),
modifier: data.button.modifier,
class: '',
} %}
{% endif %}
{% include '@new-object-modal' with { class: '', modifier: '', data: data.modal } %}
</div>
</div>
{
"language": "en-US",
"class": "sg-placeholder-card",
"data": {
"button": {
"modifier": "button--tiny",
"text": "Lisa uus objekt",
"icon": "plus",
"iconPosition": "left"
},
"modal": {
"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"
}
}
}
}
.placeholder-card {
display: flex;
height: 100%;
width: 100%;
@include bp(sm-min) {
padding-bottom: 8px;
}
}
.placeholder-card__inner {
display: flex;
flex: 1 1;
justify-content: center;
align-items: center;
padding: 40px 24px;
border-radius: $border-radius-base;
border: 1px dashed $L-border-medium;
}
import './placeholder-card.scss';