No notes defined.
<!-- Default -->
<ul class="sds-borderedBgList list-unstyled">
<li class="sds-borderedBgList__item">
<div class="sds-borderedBgList__itemOffset">
<a href="" class="sds-borderedBgList__link d-flex align-items-center">
<div class="sds-avatar centeredBgi sds-borderedBgList__typeIcon">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-borderedBgList__text">6879798645</span>
<span class="sds-iconCircle -ghost sds-borderedBgList__linkIcon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</a>
</div>
</li>
<li class="sds-borderedBgList__item">
<div class="sds-borderedBgList__itemOffset">
<a href="" class="sds-borderedBgList__link d-flex align-items-center">
<span class="sds-iconCircle -secondary100 sds-borderedBgList__typeIcon" aria-hidden="true">
<span class="sds-icon sds-icon-adviser"></span>
</span>
<span class="sds-borderedBgList__text">2545898645</span>
<span class="sds-iconCircle -ghost sds-borderedBgList__linkIcon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</a>
</div>
</li>
</ul>
<!-- No Truncate -->
<ul class="sds-borderedBgList list-unstyled -noTruncate">
<li class="sds-borderedBgList__item">
<div class="sds-borderedBgList__itemOffset">
<a href="" class="sds-borderedBgList__link d-flex align-items-center">
<div class="sds-avatar centeredBgi sds-borderedBgList__typeIcon">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-borderedBgList__text">long example text to test absence of truncate</span>
<span class="sds-iconCircle -ghost sds-borderedBgList__linkIcon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</a>
</div>
</li>
<li class="sds-borderedBgList__item">
<div class="sds-borderedBgList__itemOffset">
<a href="" class="sds-borderedBgList__link d-flex align-items-center">
<span class="sds-iconCircle -secondary100 sds-borderedBgList__typeIcon" aria-hidden="true">
<span class="sds-icon sds-icon-adviser"></span>
</span>
<span class="sds-borderedBgList__text">long example text to test absence of truncate long example text to test absence of truncate long example text to test absence of truncate</span>
<span class="sds-iconCircle -ghost sds-borderedBgList__linkIcon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</a>
</div>
</li>
</ul>
<ul class="{{ namespace }}borderedBgList list-unstyled{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{% for key, item in items %}
{% if item %}
<li class="{{ namespace }}borderedBgList__item">
{% if itemOffset %}
<div class="{{ namespace }}borderedBgList__itemOffset">
{% endif %}
<a href="" class="{{ namespace }}borderedBgList__link d-flex align-items-center">
{% if item.avatar %}
{% render "@avatar--image", {classes: [namespace + "borderedBgList__typeIcon"], img: item.img},true %}
{% elseif item.secondaryTypeIcon %}
{% render "@icon-circle-regular--secondary-100", {classes: [namespace + "borderedBgList__typeIcon"], icon: item.icon},true %}
{% else %}
{% render "@snet-number-circle--info-100", {classes: [namespace + "borderedBgList__typeIcon"]},true %}
{% endif %}
<span class="{{ namespace }}borderedBgList__text">{{ item.text }}</span>
{% render "@icon-circle-regular--ghost",{classes: [namespace + "borderedBgList__linkIcon"], icon: "icon-chevronright"},true %}
</a>
{% if itemOffset %}
</div>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}borderedBgList {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
border-radius: map-deep-get($token-radius-map, "16");
@include spacer-component-inset-horiz-greater("xs","sm");
margin: 0;
@include media-breakpoint-up(md){
@include spacer-component-inset-horiz-greater("sm","md");
}
/* 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 */
// borderedBgList__item
&__item {
// follows same logic as parent
& + & {
border-top: $border-width solid $border-color;
margin-top: map-deep-get($token-spacer-unit-map, "4");
padding-top: map-deep-get($token-spacer-unit-map, "4");
@include media-breakpoint-up(md) {
margin-top: map-deep-get($token-spacer-unit-map, "8");
padding-top: map-deep-get($token-spacer-unit-map, "8");
}
}
}
&__itemOffset {
margin-left: -(map-deep-get($token-spacer-unit-map, "4"));
margin-right: -(map-deep-get($token-spacer-unit-map, "4"));
@include media-breakpoint-up(md) {
margin-left: -(map-deep-get($token-spacer-unit-map, "8"));
margin-right: -(map-deep-get($token-spacer-unit-map, "8"));
}
}
&__link {
@include spacer-component-inset("xs");
@include spacer-component-inline("md");
border-radius: map-deep-get($token-radius-map, "16");
@include media-breakpoint-up(md) {
@include spacer-component-inset("sm");
}
&:hover,
&:focus {
@media (hover: hover) {
@include custom-prop-fallback("background-color", "sys-color-background-primary-10");
#{$self}__linkIcon {
@include custom-prop-fallback("background-color", "sys-color-background-primary-15");
@include custom-prop-fallback("color", "sys-color-background-primary-100");
}
}
}
}
&__text {
margin-right: auto;
min-width: 0;
@include text-truncate();
}
&__typeIcon {
margin-right: map-deep-get($token-spacer-unit-map, "16");
}
&__linkIcon {
margin-left:map-deep-get($token-spacer-unit-map, "8");
}
/* modifiers */
// borderedBgList -noTruncate
&.-noTruncate {
// follows same logic as base element
#{$self}__text {
overflow: visible;
text-overflow: inherit;
white-space: normal;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}