Repetitive Form Fields

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>
  • Content:
    /* 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 {
    	}
    
    }
  • URL: /components/raw/cpb-repetitive-form-fields/_repetitive-form-fields.scss
  • Filesystem Path: components/corporate-bridge/organisms/forms/repetitive-form-fields/_repetitive-form-fields.scss
  • Size: 1.8 KB