Table: Account

No notes defined.

<div data-sds-gradient-overflow-h>
    <div data-sds-gradient-overflow-h-wrapper>
        <div data-sds-gradient-overflow-h-inner>
            <div class="sds-table table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>
                                <div class="sds-label">
                                    Rank

                                </div>
                            </th>
                            <th>
                                <div class="sds-label">
                                    Venue

                                    <a href="#!" tabindex="0" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                        <span class="sds-icon sds-icon-infocirclefill"></span>
                                    </a>

                                </div>
                            </th>
                            <th>
                                <div class="sds-label">
                                    Volume

                                    <a href="#!" tabindex="0" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                        <span class="sds-icon sds-icon-infocirclefill"></span>
                                    </a>

                                </div>
                            </th>
                            <th>
                                <div class="sds-label">
                                    Ordres

                                    <a href="#!" tabindex="0" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                        <span class="sds-icon sds-icon-infocirclefill"></span>
                                    </a>

                                </div>
                            </th>
                            <th>
                                <div class="sds-label">
                                    Dirigé

                                    <a href="#!" tabindex="0" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                        <span class="sds-icon sds-icon-infocirclefill"></span>
                                    </a>

                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div>1</div>
                            </td>
                            <td>
                                <div class="sds-accountInfo">

                                    <div class="sds-accountInfo__content">
                                        <p class="sds-accountInfo__title">
                                            <span class="text-truncate">
                                                Kant Institution
                                            </span>

                                        </p>
                                        <p class="sds-accountInfo__meta">LU## #### #### #### ####</p>

                                    </div>
                                </div>
                            </td>
                            <td>
                                <div>39,44%</div>
                            </td>
                            <td>
                                <div>10,95%</div>
                            </td>
                            <td>
                                <div>8,00%</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div>2</div>
                            </td>
                            <td>
                                <div class="sds-accountInfo">

                                    <div class="sds-accountInfo__content">
                                        <p class="sds-accountInfo__title">
                                            <span class="text-truncate">
                                                Kant Institution
                                            </span>

                                        </p>
                                        <p class="sds-accountInfo__meta">LU## #### #### #### ####</p>

                                    </div>
                                </div>
                            </td>
                            <td>
                                <div>17.68%</div>
                            </td>
                            <td>
                                <div>24.23%</div>
                            </td>
                            <td>
                                <div>2.41%</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div>3</div>
                            </td>
                            <td>
                                <div class="sds-accountInfo">

                                    <div class="sds-accountInfo__content">
                                        <p class="sds-accountInfo__title">
                                            <span class="text-truncate">
                                                Kant Institution
                                            </span>

                                        </p>
                                        <p class="sds-accountInfo__meta">LU## #### #### #### ####</p>

                                    </div>
                                </div>
                            </td>
                            <td>
                                <div>17.32%</div>
                            </td>
                            <td>
                                <div>57.23%</div>
                            </td>
                            <td>
                                <div>0.00%</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div>4</div>
                            </td>
                            <td>
                                <div class="sds-accountInfo">

                                    <div class="sds-accountInfo__content">
                                        <p class="sds-accountInfo__title">
                                            <span class="text-truncate">
                                                Kant Institution
                                            </span>

                                        </p>
                                        <p class="sds-accountInfo__meta">LU## #### #### #### ####</p>

                                    </div>
                                </div>
                            </td>
                            <td>
                                <div>16.23%</div>
                            </td>
                            <td>
                                <div>4.96%</div>
                            </td>
                            <td>
                                <div>2.94%</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div>5</div>
                            </td>
                            <td>
                                <div class="sds-accountInfo">

                                    <div class="sds-accountInfo__content">
                                        <p class="sds-accountInfo__title">
                                            <span class="text-truncate">
                                                Kant Institution
                                            </span>

                                        </p>
                                        <p class="sds-accountInfo__meta">LU## #### #### #### ####</p>

                                    </div>
                                </div>
                            </td>
                            <td>
                                <div>9.34%</div>
                            </td>
                            <td>
                                <div>2.63%</div>
                            </td>
                            <td>
                                <div>11.11%</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div data-{{ namespace }}gradient-overflow-h>
	<div data-{{ namespace }}gradient-overflow-h-wrapper>
		<div data-{{ namespace }}gradient-overflow-h-inner>
			<div class="{{ namespace }}table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
				<table class="table">
					<thead>
					<tr>
						<th>
							{% render '@label--div',{
								text: "Rank"
							}, true %}
						</th>
						<th>
							{% render "@label--info-dot",{
								eltType: "div",
								text: "Venue",
								modifiers: []
							},true %}
						</th>
						<th>
							{% render "@label--info-dot",{
								eltType: "div",
								text: "Volume",
								modifiers: []
							},true %}
						</th>
						<th>
							{% render "@label--info-dot",{
								eltType: "div",
								text: "Ordres",
								modifiers: []
							},true %}
						</th>
						<th>
							{% render "@label--info-dot",{
								eltType: "div",
								text: "Dirigé",
								modifiers: []
							},true %}
						</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td>
							<div>1</div>
						</td>
						<td>{% render "@snet-account-info--no-avatar" %}</td>
						<td>
							<div>39,44%</div>
						</td>
						<td>
							<div>10,95%</div>
						</td>
						<td>
							<div>8,00%</div>
						</td>
					</tr>
					<tr>
						<td>
							<div>2</div>
						</td>
						<td>{% render "@snet-account-info--no-avatar" %}</td>
						<td>
							<div>17.68%</div>
						</td>
						<td>
							<div>24.23%</div>
						</td>
						<td>
							<div>2.41%</div>
						</td>
					</tr>
					<tr>
						<td>
							<div>3</div>
						</td>
						<td>{% render "@snet-account-info--no-avatar" %}</td>
						<td>
							<div>17.32%</div>
						</td>
						<td>
							<div>57.23%</div>
						</td>
						<td>
							<div>0.00%</div>
						</td>
					</tr>
					<tr>
						<td>
							<div>4</div>
						</td>
						<td>{% render "@snet-account-info--no-avatar" %}</td>
						<td>
							<div>16.23%</div>
						</td>
						<td>
							<div>4.96%</div>
						</td>
						<td>
							<div>2.94%</div>
						</td>
					</tr>
					<tr>
						<td>
							<div>5</div>
						</td>
						<td>{% render "@snet-account-info--no-avatar" %}</td>
						<td>
							<div>9.34%</div>
						</td>
						<td>
							<div>2.63%</div>
						</td>
						<td>
							<div>11.11%</div>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}table {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	flex-grow: 1;
    
    	/* 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 */
    
    	// table__childElement
    	&__childElement {
    
    		// follows same logic as parent
    
    	}
    
    	TH {
    
    		padding-top: 0 !important;
    		vertical-align: bottom !important;
    		border-bottom-width: $table-border-width !important;
    
    	}
    
    	TBODY {
    		
    		TD {
    
    			border: 0;
    
    		}	
    
    		&::before,
    		&::after {
    
    			content: "";
    			display: block !important;
    			height: map-deep-get($token-spacer-unit-map, "16") !important;
    			width: 100% !important;
    
    		}
    
    	}
    
    	TFOOT {
    
    		TH,TD {
    
    			padding-bottom: 0 !important;
    			vertical-align: bottom !important;
    			border-top: $table-border-width solid !important;
    			@include custom-prop-fallback("border-top-color", "sys-color-border-primary-moderate", true, true);
    			border-bottom: 0;
    
    		}
    
    	}
    
    	CAPTION {
    
    		@extend %textHelper3xs;
    		@include custom-prop-fallback("color","sys-color-text-primary-muted");
    		padding-left: $table-cell-padding-x;
    
    	}
    
    	/* modifiers */
    
    	// table -verticalBorder
    	&.-verticalBorder {
    
    		// follows same logic as base element
    		
    		TH, TD {
    			border: 0 !important;
    		}
    		
    		THEAD {
    			
    			TH + TH {
    
    				border-left: $border-width solid;
    				@include custom-prop-fallback("border-left-color", "sys-color-border-primary-moderate", true, true);
    
    			}
    			
    			TH {
    
    				padding-bottom: map-deep-get($token-spacer-inset-map, "xl") !important;
    
    			}
    			
    		}
    
    		TBODY {
    
    			&::before,
    			&::after {
    
    				content: none;
    
    			}
    
    			TR:first-of-type {
    
    				TH, TD {
    
    					padding-top: 0 !important;
    
    				}
    
    			}
    
    			TR:last-of-type {
    
    				TH, TD {
    
    					padding-bottom: 0 !important;
    
    				}
    
    			}
    
    			TH + TD,
    			TD + TD {
    
    				border-left: $border-width solid !important;
    				@include custom-prop-fallback("border-left-color", "sys-color-border-primary-moderate", true, true);
    
    			}
    
    		}
    		
    	}
    
    	&.-hasBorder {
    
    		TBODY {
    
    			tr {
    
    				td {
    
    					border-bottom: $border-width solid;
    					@include custom-prop-fallback("border-bottom-color", "sys-color-border-primary-subtle");
    
    				}
    
    				&:last-child {
    
    					td {
    
    						border-bottom: none;
    
    					}
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&.-hasHeaderLeft {
    
    		TBODY {
    
    			&::before,
    			&::after {
    
    				content: none;
    
    			}
    
    		}
    
    		TBODY,
    		TFOOT {
    
    			tr {
    
    				th {
    
    					border-right: $border-width solid;
    					@include custom-prop-fallback("border-right-color", "sys-color-border-primary-moderate");
    					border-bottom: 0 !important;
    
    				}
    
    				td {
    
    					&:nth-child(2){
    
    						padding-left: $table-cell-padding-x * 3 !important;
    
    					}
    
    				}
    
    			}
    
    		}
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: components/base-components/molecules/table/_table.scss
  • Size: 3.2 KB