No notes defined.
<div class="sds-repetitiveFormFields">
<div class="sds-outOfBounds">
<div class="sds-hoverContentSecondary sds-repetitiveFormFields__header">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-repetitiveFormFields__collapseToggle -collapseTrigger stretched-link" data-toggle="collapse" data-target="#repetitiveForms-1" aria-expanded="false">
<span class="sds-icon sds-icon-plus"></span>
<div class="sr-only">Show input elements</div>
</button>
<div class="h5">Representative 1</div>
<div class="sds-repetitiveFormFields__delete sds-aboveClickArea">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall" data-toggle="modal" data-target="#repetitiveFormsDeletionConfirmationModal">
<span class="sds-icon sds-icon-trash"></span>
</button>
</div>
</div>
</div>
<div class="collapse" id="repetitiveForms-1">
<div class="sds-repetitiveFormFields__collapseInner">
<div class="row row-sm">
<div class="col-12 col-lg-6">
<div class="form-group">
<label for="repetitiveFormFieldsName1" class="sds-label -form">
Nom
</label>
<div class="sds-input">
<input id="repetitiveFormFieldsName1" class="sds-input form-control" type="text" placeholder="Insérez nom" value="">
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
<label for="repetitiveFormFieldsSurname1" class="sds-label -form">
Prénom
</label>
<div class="sds-input">
<input id="repetitiveFormFieldsSurname1" class="sds-input form-control" type="text" placeholder="Insérez prénom" value="">
</div>
</div>
</div>
</div>
<div class="row row-sm">
<div class="col-12 col-lg-6">
<label for="repetitiveFormFieldsDate1" class="sds-label -form">
Date de naissance
</label>
<div class="sds-input -hasIcon -calendar">
<input class="sds-input form-control" type="text" placeholder="Choisir date" value="">
<div class="sds-input__iconRight">
<span class="sds-icon sds-icon-calendar"></span>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
<label for="repetitiveFormFieldsNationality1" class="sds-label -form">
Nationalité
</label>
<div class="sds-input">
<input id="repetitiveFormFieldsNationality1" class="sds-input form-control" type="text" placeholder="Insérez nationalité" value="">
</div>
</div>
</div>
</div>
<div class="row row-sm sds-repetitiveFormFields__lastRow">
<div class="col-12 col-lg-6">
<div class="form-group">
<label for="repetitiveFormFieldsOccupation1" class="sds-label -form">
Occupation
</label>
<div class="sds-input">
<input id="repetitiveFormFieldsOccupation1" class="sds-input form-control" type="text" placeholder="Insérez occupation" value="">
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
<label for="repetitiveFormFieldsCompany1" class="sds-label -form">
Employeur
</label>
<div class="sds-input">
<input id="repetitiveFormFieldsCompany1" class="sds-input form-control" type="text" placeholder="Insérez nom société" value="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}repetitiveFormFields{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}outOfBounds">
<div class="{{ namespace }}hoverContentSecondary {{ namespace }}repetitiveFormFields__header">
{% render "@icon-btn-secondary--smaller",{
icon: "icon-plus",
classes: [namespace + "repetitiveFormFields__collapseToggle", "-collapseTrigger", "stretched-link"],
attrs: {
"data-toggle": "collapse",
"data-target": "#repetitiveForms-" + id,
"aria-expanded": expanded or false
},
action: "Show input elements"
}, true %}
<div class="h5">Representative {{ id }}</div>
<div class="{{ namespace }}repetitiveFormFields__delete {{ namespace }}aboveClickArea">
{% render "@icon-btn-secondary--smaller",{
icon: "icon-trash",
attrs: {
"data-toggle": "modal",
"data-target": "#repetitiveFormsDeletionConfirmationModal"
}
},true %}
</div>
</div>
</div>
<div class="collapse{% if expanded %} show{% else %}{% endif %}" id="repetitiveForms-{{ id }}">
<div class="{{ namespace }}repetitiveFormFields__collapseInner">
<div class="row row-sm">
<div class="col-12 col-lg-6">
{% render "@form-group",{
labelText: "Nom",
for: "repetitiveFormFieldsName"+id,
inputID: "repetitiveFormFieldsName"+id,
placeholder: "Insérez nom"
},true %}
</div>
<div class="col-12 col-lg-6">
{% render "@form-group",{
labelText: "Prénom",
for: "repetitiveFormFieldsSurname"+id,
inputID: "repetitiveFormFieldsSurname"+id,
placeholder: "Insérez prénom"
},true %}
</div>
</div>
<div class="row row-sm">
<div class="col-12 col-lg-6">
{% render "@label--form",{
text: "Date de naissance",
labelFor: "repetitiveFormFieldsDate"+id
},true %}
{% render "@input--calendar",{
id: "repetitiveFormFieldsDate"+id,
placeholder: "Choisir date"
},true %}
</div>
<div class="col-12 col-lg-6">
{% render "@form-group",{
labelText: "Nationalité",
for: "repetitiveFormFieldsNationality"+id,
inputID: "repetitiveFormFieldsNationality"+id,
placeholder: "Insérez nationalité"
},true %}
</div>
</div>
<div class="row row-sm {{ namespace }}repetitiveFormFields__lastRow">
<div class="col-12 col-lg-6">
{% render "@form-group",{
labelText: "Occupation",
for: "repetitiveFormFieldsOccupation"+id,
inputID: "repetitiveFormFieldsOccupation"+id,
placeholder: "Insérez occupation"
},true %}
</div>
<div class="col-12 col-lg-6">
{% render "@form-group",{
labelText: "Employeur",
for: "repetitiveFormFieldsCompany"+id,
inputID: "repetitiveFormFieldsCompany"+id,
placeholder: "Insérez nom société"
},true %}
</div>
</div>
</div>
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}repetitiveFormFields {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// repetitiveFormFields__header
&__header {
// follows same logic as parent
border-radius: map-deep-get($token-radius-map, "16");
display: flex;
align-items: center;
padding: map-deep-get($token-spacer-inset-map, "sm");
position: relative;
}
&__collapseToggle {
margin-right: map-deep-get($token-spacer-inline-map, "md");
}
&__delete {
margin-left: auto;
padding-left: map-deep-get($token-spacer-inset-map, "md");
}
&__collapseInner {
padding-top: map-deep-get($token-spacer-inset-map, "lg");
}
&__lastRow {
margin-bottom: 0 !important;
[class*="col-lg-6"] {
&:last-of-type {
@include media-breakpoint-between(xs,md) {
margin-bottom: map-deep-get($token-spacer-inset-map, "sm");
}
}
@include media-breakpoint-up(lg) {
margin-bottom: map-deep-get($token-spacer-inset-map, "sm") !important;
}
}
}
/* modifiers */
// repetitiveFormFields -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}