Communications List: Default

No notes defined.

<div class="bcee-communications-list">

    <div class="communications-list-inner">

        <div class="bcee-panel-header">

            <div class="header-actions ">

                <div class="actions-group">

                    <a class="bcee-button-action sdsicon sdsicon-search" href=""></a>

                </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/snet/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&#39;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/snet/avatars/avatarBankerAltM.png" 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&#39;offre</span></a>

            </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 class="dot-image-wrapper">
                        <img src="../../media/snet/svg-icons/22x/icon-comm-administration.svg" alt="">
                    </div>
                </div>

            </div>
            <div class="item-col content">
                <div>
                    Pellentesque facilisis nunc eget tempus
                </div>

                <figure>
                    <img src="https://www.cstatic-images.com/stock/512x512/14/img1118986795-1483915080014.jpg" alt="car">
                    <figcaption>Plus près de vos besoins, plus près de vos envies</figcaption>
                </figure>

            </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 class="dot-image-wrapper">
                        <img src="../../media/snet/svg-icons/22x/icon-comm-administration.svg" alt="">
                    </div>
                </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 class="dot-image-wrapper">
                        <img src="../../media/snet/svg-icons/22x/icon-comm-administration.svg" alt="">
                    </div>
                </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 class="dot-image-wrapper">
                        <img src="../../media/snet/svg-icons/22x/icon-comm-administration.svg" alt="">
                    </div>
                </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>
<div class="bcee-communications-list{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">

	<div class="communications-list-inner">

		<div class="bcee-panel-header">

			<div class="header-actions ">

				<div class="actions-group">

					<a class="bcee-button-action sdsicon sdsicon-search" href=""></a>

				</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="{{ (mediaPath + "/snet/svg-icons/22x/icon-comm-administration.svg") | path }}" 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&#39;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="{{ (mediaPath + "/snet/avatars/avatarBankerAltM.png") | path }}" 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&#39;offre</span></a>

			</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 class="dot-image-wrapper">
						<img src="{{ (mediaPath + "/snet/svg-icons/22x/icon-comm-administration.svg") | path }}" alt="">
					</div>
				</div>

			</div>
			<div class="item-col content">
				<div>
					Pellentesque facilisis nunc eget tempus
				</div>

				<figure>
					<img src="https://www.cstatic-images.com/stock/512x512/14/img1118986795-1483915080014.jpg" alt="car">
					<figcaption>Plus près de vos besoins, plus près de vos envies</figcaption>
				</figure>

			</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 class="dot-image-wrapper">
						<img src="{{ (mediaPath + "/snet/svg-icons/22x/icon-comm-administration.svg") | path }}" alt="">
					</div>
				</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 class="dot-image-wrapper">
						<img src="{{ (mediaPath + "/snet/svg-icons/22x/icon-comm-administration.svg") | path }}" alt="">
					</div>
				</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 class="dot-image-wrapper">
						<img src="{{ (mediaPath + "/snet/svg-icons/22x/icon-comm-administration.svg") | path }}" alt="">
					</div>
				</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>
  • Handle: @snet-communications-list--default
  • Preview:
  • Filesystem Path: components/snet/organisms/communications-list/communications-list.njk
  • Content:
    $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;
    
    	}
    }
  • URL: /components/raw/snet-communications-list/_communcations-list-overrides.scss
  • Filesystem Path: components/snet/organisms/communications-list/_communcations-list-overrides.scss
  • Size: 905 Bytes