Activity Log: Default

No notes defined.

<div class="sds-activityLog">

    <div class="sds-activityLog__row">

        <span class="sds-itemConnector sds-activityLog__itemConnector">

            <span class="sds-iconCircle -secondary100 -smaller" aria-hidden="true">

                <span class="sds-icon sds-icon-sign"></span>

            </span>

        </span>

        <div class="sds-avatar centeredBgi -avatarSm">

            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

        </div>

        <div class="sds-activityLog__rowContent sds-stackXxs">
            <p>Santiago Valentin <span class="sds-activityLog__meta">a signé un contrat</span></p>
            <small class="sds-activityLog__meta sds-textHelper"></small>
        </div>
    </div>

    <div class="sds-activityLog__row">

        <span class="sds-itemConnector sds-activityLog__itemConnector">

            <span class="sds-iconCircle -success100 -smaller" aria-hidden="true">

                <span class="sds-icon sds-icon-checkcircleborder"></span>

            </span>

        </span>

        <div class="sds-avatar centeredBgi -avatarSm">

            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

        </div>

        <div class="sds-activityLog__rowContent sds-stackXxs">
            <p>Santiago Valentin <span class="sds-activityLog__meta">a pris connaissance d’une alerte</span></p>
            <small class="sds-activityLog__meta sds-textHelper"></small>
        </div>
    </div>

    <div class="sds-activityLog__row">

        <span class="sds-itemConnector sds-activityLog__itemConnector">

            <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                <span class="sds-icon sds-icon-visible"></span>

            </span>

        </span>

        <div class="sds-avatar centeredBgi -avatarSm">

            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

        </div>

        <div class="sds-activityLog__rowContent sds-stackXxs">
            <p>Santiago Valentin <span class="sds-activityLog__meta">a lu un message</span></p>
            <small class="sds-activityLog__meta sds-textHelper"></small>
        </div>
    </div>

    <div class="sds-activityLog__row">

        <span class="sds-itemConnector sds-activityLog__itemConnector">

            <span class="sds-iconCircle -secondary100 -smaller" aria-hidden="true">

                <span class="sds-icon sds-icon-sign"></span>

            </span>

        </span>

        <div class="sds-avatar centeredBgi -avatarSm">

            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

        </div>

        <div class="sds-activityLog__rowContent sds-stackXxs">
            <p>Santiago Valentin <span class="sds-activityLog__meta">a signé un contrat</span></p>
            <small class="sds-activityLog__meta sds-textHelper"></small>
        </div>
    </div>

    <div class="sds-activityLog__row">

        <span class="sds-itemConnector sds-activityLog__itemConnector">

            <span class="sds-iconCircle -success100 -smaller" aria-hidden="true">

                <span class="sds-icon sds-icon-checkcircleborder"></span>

            </span>

        </span>

        <div class="sds-avatar centeredBgi -avatarSm">

            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

        </div>

        <div class="sds-activityLog__rowContent sds-stackXxs">
            <p>Santiago Valentin <span class="sds-activityLog__meta">a pris connaissance d’une alerte</span></p>
            <small class="sds-activityLog__meta sds-textHelper"></small>
        </div>
    </div>

    <div class="sds-activityLog__row">

        <span class="sds-itemConnector sds-activityLog__itemConnector">

            <span class="sds-iconCircle -info100 -smaller" aria-hidden="true">

                <span class="sds-icon sds-icon-visible"></span>

            </span>

        </span>

        <div class="sds-avatar centeredBgi -avatarSm">

            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

        </div>

        <div class="sds-activityLog__rowContent sds-stackXxs">
            <p>Santiago Valentin <span class="sds-activityLog__meta">a lu un message</span></p>
            <small class="sds-activityLog__meta sds-textHelper"></small>
        </div>
    </div>

</div>
<div class="{{ namespace }}activityLog{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% for key, item in rows %}
		{% if item %}
			<div class="{{ namespace }}activityLog__row">
				{% if item.connectorEmpty %}
					{% render "@snet-item-connector--default",item.options,true %}
				{% elseif item.avatar %}
					{% render "@snet-item-connector--avatar-extra-small",item.options,true %}
				{% else %}
					{% render "@snet-item-connector--icon-circle-small",item.options,true %}
				{% endif %}
				{% if avatarShown %}
					{% render "@avatar--image-small" %}
				{% endif %}
				<div class="{{ namespace }}activityLog__rowContent {{ namespace }}stackXxs">
					<p>{{ item.name | safe }}{% if item.text %} <span class="{{ namespace }}activityLog__meta">{{ item.text | safe }}</span>{% endif %}</p>
					<small class="{{ namespace }}activityLog__meta {{ namespace }}textHelper">{{ item.dateTime | safe }}</small>
				</div>
			</div>
		{% endif %}
	{% endfor %}
</div>
  • Content:
    @use "sass:math";
    /* variables specific to current element */
    
    $activity-log-item-connector-width: map-deep-get($token-sizes-unit-map, "32");
    
    .#{$namespace}activityLog {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	@include spacer-component-stack("sm");
    
    	/* 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 */
    
    	// activityLog__row
    	&__row {
    
    		// follows same logic as parent
    
    		display: flex;
    		align-items: center;
    		@include spacer-component-inline("md");
    		@include spacer-component-inset("sm");
    
    		position: relative;
    		z-index: z("zero");
    
    		&::before {
    
    			content: "";
    			position: absolute;
    			z-index: z("negative");
    			top: 50%;
    			bottom: 0;
    			left: $icon-circle-regular-smaller-dimensions-global;
    			transform: translateX(-50%);
    			width: $border-width*2;
    			@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");
    
    		}
    
    		& + & {
    
    			&::before {
    
    				top: -(map-deep-get($token-spacer-unit-map, "12")); // 12 and not 8 bc tiny 1px space on FF base zoom level
    				bottom: 0;
    
    			}
    
    		}
    		
    		&:last-child {
    			
    			&::before {
    				bottom: 50%;
    			}
    			
    		}
    
    	}
    
    	&__itemConnector {
    
    		width: $activity-log-item-connector-width;
    		margin-right: math.div($icon-circle-regular-smaller-dimensions-global,2);
    
    		&::after {
    
    			right: auto;
    			width: math.div($icon-circle-regular-smaller-dimensions-global,2);
    
    		}
    
    	}
    
    	&__meta {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
    
    	}
    
    
    	/* modifiers */
    
    	// activityLog -noAvatar
    	&.-noAvatar {
    
    		// follows same logic as base element
    		
    	}
    
    	&.-alignStart {
    
    		#{$self}__itemConnector {
    
    			position: relative;
    			height: auto;
    
    		}
    
    		#{$self}__row {
    
    			align-items: flex-start;
    
    			&::before {
    
    				top: -(map-deep-get($token-spacer-unit-map, "16"));
    				bottom: 0;
    
    			}
    
    			&:first-of-type {
    
    				&::before {
    					top: map-deep-get($token-spacer-unit-map, "16");
    				}
    
    			}
    
    			&:last-of-type {
    
    				&::before {
    					top: 0;
    					bottom: auto;
    					height: map-deep-get($token-spacer-unit-map, "16");
    				}
    
    			}
    
    		}
    
    	}
    	
    	&.-noVerticalSpacing {
    		
    		> * + * {margin-top: 0}
    		
    	}
    
    	&.-noConnector, // @TODO remove this class after replacing it with seconda one
    	&.-itemInteraction {
    
    		#{$self}__row {
    
    			border-radius: map-deep-get($token-radius-map, "16");
    
    			&:hover {
    
    				@media (hover: hover) {
    
    					@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
    
    				}
    
    			}
    
    		}
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-activity-log/_activity-log.scss
  • Filesystem Path: components/snet/organisms/activity-log/_activity-log.scss
  • Size: 3 KB