No notes defined.
<div class="bcee-communications-list">
<div class="communications-list-inner">
<!-- IMPORTANT : The width will have to be calculated based on the screen space. This is only an example! //-->
<div class="bcee-panel-header">
<div class="header-actions ">
<div class="actions-group">
<div class="bcee-search-header-input active" style="width: 400px;">
<div class="input-container">
<INPUT placeholder="Search...">
</div>
<a class="input-button">Search</a>
<a href="#" class="input-close"></a>
</div>
</div>
</div>
</div>
<div class="bcee-section-item-start"></div>
<div class="bcee-section-item timeline unread">
<div class="item-col date">
<div>
Il y a 2 min
</div>
</div>
<div class="item-col dot">
<div class="bcee-partial-dot">
<div class="dot-image-wrapper">
<img src="../../media/svg-icons/22x/icon-comm-administration.svg" alt="">
</div>
</div>
</div>
<div class="item-col content">
<div>
Pellentesque facilisis nunc eget tempus
</div>
<a href="../../.html" class="bcee-button-action text sdsicon sdsicon-document light"><span class="button-text">Consulter l'offre</span></a>
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item timeline">
<div class="item-col date">
<div>
Il y a 2 min
</div>
</div>
<div class="item-col dot">
<div class="bcee-partial-dot">
<div class="dot-image-wrapper">
<img src="../../media/profilepic__1.jpg" alt="">
</div>
</div>
</div>
<div class="item-col content">
<div>
Pellentesque facilisis nunc eget tempus
</div>
<a href="../../.html" class="bcee-button-action text sdsicon sdsicon-document light"><span class="button-text">Consulter l'offre</span></a>
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item timeline static">
<div class="item-col date">
</div>
<div class="item-col dot">
<div class="communications-list-empty">
<img src="../../media/svg-images/empty/empty-notification.svg" class="img-responsive">
</div>
</div>
<div class="item-col content">
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item timeline static">
<div class="item-col content">
<div class="communications-list-empty-text">
<div>Lorem ipsum</div>
Lorem ipsum dolor sit amet
</div>
</div>
<div class="item-col">
</div>
<div class="item-col">
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item timeline">
<div class="item-col date">
<div>
21/07/2018
</div>
</div>
<div class="item-col dot">
<div class="bcee-partial-dot"></div>
</div>
<div class="item-col content">
<div>
Pellentesque facilisis nunc eget tempus
</div>
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item timeline">
<div class="item-col date">
<div>
21/07/2018
</div>
</div>
<div class="item-col dot">
<div class="bcee-partial-dot"></div>
</div>
<div class="item-col content">
<div>
Pellentesque facilisis nunc eget tempus
</div>
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item-end has-button">
<div class="bcee-button-action text has-info">
<div class="button-text">Archives</div>
<div class="button-misc-info">(243)</div>
</div>
</div>
</div>
<div class="communications-list-footer">
<div class="communications-list-footer-inner">
<div class="text-left">
<div><strong>Lorem ipsum</strong></div>
<div>Lorem ipsum dolor sit amet</div>
</div>
<a href="" class="btn grey btn-xs">
Activer
</a>
</div>
</div>
</div>
<div class="bcee-communications-list{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="communications-list-inner">
<!-- IMPORTANT : The width will have to be calculated based on the screen space. This is only an example! //-->
<div class="bcee-panel-header">
<div class="header-actions ">
<div class="actions-group">
<div class="bcee-search-header-input active" style="width: 400px;">
<div class="input-container">
<INPUT placeholder="Search...">
</div>
<a class="input-button">Search</a>
<a href="#" class="input-close"></a>
</div>
</div>
</div>
</div>
<div class="bcee-section-item-start"></div>
<div class="bcee-section-item timeline unread">
<div class="item-col date">
<div>
Il y a 2 min
</div>
</div>
<div class="item-col dot">
<div class="bcee-partial-dot">
<div class="dot-image-wrapper">
<img src="../../media/svg-icons/22x/icon-comm-administration.svg" alt="">
</div>
</div>
</div>
<div class="item-col content">
<div>
Pellentesque facilisis nunc eget tempus
</div>
<a href="../../.html" class="bcee-button-action text sdsicon sdsicon-document light"><span class="button-text">Consulter l'offre</span></a>
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item timeline">
<div class="item-col date">
<div>
Il y a 2 min
</div>
</div>
<div class="item-col dot">
<div class="bcee-partial-dot">
<div class="dot-image-wrapper">
<img src="../../media/profilepic__1.jpg" alt="">
</div>
</div>
</div>
<div class="item-col content">
<div>
Pellentesque facilisis nunc eget tempus
</div>
<a href="../../.html" class="bcee-button-action text sdsicon sdsicon-document light"><span class="button-text">Consulter l'offre</span></a>
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item timeline static">
<div class="item-col date">
</div>
<div class="item-col dot">
<div class="communications-list-empty">
<img src="../../media/svg-images/empty/empty-notification.svg" class="img-responsive">
</div>
</div>
<div class="item-col content">
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item timeline static">
<div class="item-col content">
<div class="communications-list-empty-text">
<div>Lorem ipsum</div>
Lorem ipsum dolor sit amet
</div>
</div>
<div class="item-col">
</div>
<div class="item-col">
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item timeline">
<div class="item-col date">
<div>
21/07/2018
</div>
</div>
<div class="item-col dot">
<div class="bcee-partial-dot"></div>
</div>
<div class="item-col content">
<div>
Pellentesque facilisis nunc eget tempus
</div>
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item timeline">
<div class="item-col date">
<div>
21/07/2018
</div>
</div>
<div class="item-col dot">
<div class="bcee-partial-dot"></div>
</div>
<div class="item-col content">
<div>
Pellentesque facilisis nunc eget tempus
</div>
</div>
<div class="bcee-partial-closer"></div>
</div>
<div class="bcee-section-item-end has-button">
<div class="bcee-button-action text has-info">
<div class="button-text">Archives</div>
<div class="button-misc-info">(243)</div>
</div>
</div>
</div>
<div class="communications-list-footer">
<div class="communications-list-footer-inner">
<div class="text-left">
<div><strong>Lorem ipsum</strong></div>
<div>Lorem ipsum dolor sit amet</div>
</div>
<a href="" class="btn grey btn-xs">
Activer
</a>
</div>
</div>
</div>
$nav-topbar-height: map-deep-get($token-sizes-component-map, "topbar-height");
.bcee-communications-list {
transform: none !important;
top: map-deep-get($token-sizes-component-map, "topbar-height");
padding: 0;
border-radius: map-deep-get($token-radius-map, "16") !important;
overflow: hidden;
.bcee-panel-header {
margin: 0 (-(map-deep-get($token-spacer-stack-max-map, "sm")));
}
.communications-list-inner {
border-radius: map-deep-get($token-radius-map, "16") !important;
max-height: calc(93vh - (#{map-deep-get($token-spacer-unit-map, "16")} + #{map-deep-get($token-sizes-component-map, "panel-header-height")} + env(safe-area-inset-bottom) ));
}
&::before {
content: none;
}
&::after {
pointer-events: none;
border-bottom-left-radius: map-deep-get($token-radius-map, "16") !important;
border-bottom-right-radius: map-deep-get($token-radius-map, "16") !important;
}
}