No notes defined.
<div class="sds-advancedSelect">
<div class="dropdown">
<button type="button" class="sds-advancedSelectItem" data-toggle="dropdown" data-offset="0,8" data-display="static">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
<span class="sds-advancedSelectItem__icon sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</button>
<div class="w-100 dropdown-menu dropdown-menu-inset-md dropdown-scroll-height-md">
<ul class="list-unstyled sds-stackSm -stackBorder">
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem" disabled="true">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="{{ namespace }}advancedSelect{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="dropdown">
{% if noImgTrigger %}
{% render "@spk-advanced-select-item--dropdown-trigger-no-img",{
attrs: {
"data-display": "static"
}
},true %}
{% else %}
{% render "@spk-advanced-select-item--dropdown-trigger",{
attrs: {
"data-display": "static"
}
},true %}
{% endif %}
<div class="w-100 dropdown-menu dropdown-menu-inset-md dropdown-scroll-height-md">
<ul class="list-unstyled {{ namespace }}stackSm -stackBorder">
<li>
<div class="{{ namespace }}outOfBounds">
{% render "@spk-advanced-select-item",{eltType: "button"},true %}
</div>
</li>
<li>
<div class="{{ namespace }}outOfBounds">
{% render "@spk-advanced-select-item",{
eltType: "button",
attrs: {
"disabled": "true"
}
},true %}
</div>
</li>
<li>
<div class="{{ namespace }}outOfBounds">
{% render "@spk-advanced-select-item",{eltType: "button"},true %}
</div>
</li>
<li>
<div class="{{ namespace }}outOfBounds">
{% render "@spk-advanced-select-item",{eltType: "button"},true %}
</div>
</li>
</ul>
</div>
</div>
{% if hint %}
<div class="{{ namespace }}advancedSelect__hint">{{ hint.feedback }}</div>
{% endif %}
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}advancedSelect {
/* 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 */
// advancedSelect__hint
&__hint {
// follows same logic as parent
@include form-feedback-hint();
}
.dropdown-menu {
margin-top: map-deep-get($token-spacer-stack-max-map, "sm");
max-height: 500px;
overflow-y: auto;
}
/* modifiers */
// advancedSelect -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}