<div class="sds-inputFocusMessage">
<div class="sds-inputFocusMessage__row -messageShown row row-sm no-bottom-gutter">
<div class="col-md-6">
<div class="form-group">
<label for="" class="sds-label -labelForm">
Prix d'achat du terrain
</label>
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sds-inputFocusMessage__message">
<div class="sds-message sds-stackMd">
<div class="sds-message__header">
<span class="sds-icon sds-icon-infocirclefill"></span>
<div class="sds-message__iconAlign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa cumque debitis dicta ducimus fugiat fugit maiores modi molestiae officiis provident quis, quos ratione sapiente sunt tempora temporibus unde veniam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-inputFocusMessage__row row row-sm no-bottom-gutter">
<div class="col-md-6">
<div class="form-group">
<label for="" class="sds-label -labelForm -labelOptional">
Coût de la construction déjà réalisée
<span class="sds-label__helper">Optionnel</span>
</label>
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sds-inputFocusMessage__message">
<div class="sds-message sds-stackMd">
<div class="sds-message__header">
<span class="sds-icon sds-icon-infocirclefill"></span>
<div class="sds-message__iconAlign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa cumque debitis dicta ducimus fugiat fugit maiores modi molestiae officiis provident quis, quos ratione sapiente sunt tempora temporibus unde veniam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-inputFocusMessage__row row row-sm no-bottom-gutter">
<div class="col-md-6">
<div class="form-group">
<label for="" class="sds-label -labelForm">
Coût de la construction à venir (p.ex. gros-oeuvre, électricité, etc.)
</label>
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sds-inputFocusMessage__message">
<div class="sds-message sds-stackMd">
<div class="sds-message__header">
<span class="sds-icon sds-icon-infocirclefill"></span>
<div class="sds-message__iconAlign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa cumque debitis dicta ducimus fugiat fugit maiores modi molestiae officiis provident quis, quos ratione sapiente sunt tempora temporibus unde veniam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-inputFocusMessage__row row row-sm no-bottom-gutter">
<div class="col-md-6">
<div class="form-group">
<label for="" class="sds-label -labelForm -labelOptional">
Imprévus
<span class="sds-label__helper">Optionnel</span>
</label>
<div class="sds-input">
<input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sds-inputFocusMessage__message">
<div class="sds-message sds-stackMd">
<div class="sds-message__header">
<span class="sds-icon sds-icon-infocirclefill"></span>
<div class="sds-message__iconAlign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa cumque debitis dicta ducimus fugiat fugit maiores modi molestiae officiis provident quis, quos ratione sapiente sunt tempora temporibus unde veniam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}inputFocusMessage{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}inputFocusMessage__row -messageShown row row-sm no-bottom-gutter">
<div class="col-md-6">
<div class="form-group">
{% render "@label--form",{text: "Prix d'achat du terrain"},true %}
{% render "@input" %}
</div>
</div>
<div class="col-md-6">
<div class="{{ namespace }}inputFocusMessage__message">
{% render "@message" %}
</div>
</div>
</div>
<div class="{{ namespace }}inputFocusMessage__row row row-sm no-bottom-gutter">
<div class="col-md-6">
<div class="form-group">
{% render "@label--optional",{text: "Coût de la construction déjà réalisée"},true %}
{% render "@input" %}
</div>
</div>
<div class="col-md-6">
<div class="{{ namespace }}inputFocusMessage__message">
{% render "@message" %}
</div>
</div>
</div>
<div class="{{ namespace }}inputFocusMessage__row row row-sm no-bottom-gutter">
<div class="col-md-6">
<div class="form-group">
{% render "@label--form",{text: "Coût de la construction à venir (p.ex. gros-oeuvre, électricité, etc.)"},true %}
{% render "@input" %}
</div>
</div>
<div class="col-md-6">
<div class="{{ namespace }}inputFocusMessage__message">
{% render "@message" %}
</div>
</div>
</div>
<div class="{{ namespace }}inputFocusMessage__row row row-sm no-bottom-gutter">
<div class="col-md-6">
<div class="form-group">
{% render "@label--optional",{text: "Imprévus"},true %}
{% render "@input" %}
</div>
</div>
<div class="col-md-6">
<div class="{{ namespace }}inputFocusMessage__message">
{% render "@message" %}
</div>
</div>
</div>
</div>
export default class InputFocusMessage {
constructor() {
this.addActiveClasses();
}
addActiveClasses() {
$(".sds-inputFocusMessage__row").each(function( index, element ) {
$(element).find(".sds-input.form-control").on("focus" ,function (e) {
$(".sds-inputFocusMessage__row").removeClass("-messageShown");
$(e.target).closest(".sds-inputFocusMessage__row").addClass("-messageShown");
});
})
}
}
@use "sass:math";
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}inputFocusMessage {
/* 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 */
// inputFocusMessage__row
&__row {
&.-messageShown {
#{$self}__message {
display: block;
}
}
&:last-child {
#{$self}__message {
top: auto;
bottom: 0;
}
}
}
// inputFocusMessage__message
&__message {
// follows same logic as parent
display: none;
margin-top: map-get($token-spacer-stack-max-map, "sm");
@include media-breakpoint-up(md) {
position: absolute;
padding: 0 (math.div(map-deep-get($token-spacer-grid-map, "sm"), 2));
z-index: z("zero");
top: 0;
left: 0;
width: 100%;
margin: 0;
}
}
/* modifiers */
// inputFocusMessage -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}