The following classes can be set on individual TDs, in order to add specific styles:
<div class="sds-box -insetLg -boxSunken">
<div class="row col-separator flex-md-nowrap justify-content-between">
<div class="col-12 col-md-12 flex-md-shrink-1">
<div class="row align-items-center">
<div class="col-12">
<div class="sds-stackLg">
<h4 class="h4">Récapitulatif</h4>
<div class="wysiwyg">
<p>
Avec S-Invest, un investissement d’une somme de <b>14.400 €</b> sur <b>8 ans</b> via un versement de <b>150 € par mois</b> vous aurait permis de construire un capital d’environ :
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-auto">
<table class="sds-infoTable table -hasTotal">
<tbody>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Argent investi
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountLg -hasTotal">
<span class="sds-amount__value">14.400,00 €</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Plus-value
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountLg -hasTotal">
<span class="sds-amount__value">2.123,17 €</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Total du capital
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountXl -hasTotal">
<span class="sds-amount__value">16.523,17 €</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="{{ namespace }}box -insetLg -boxSunken">
<div class="row col-separator flex-md-nowrap justify-content-between">
<div class="col-12 col-md-12 flex-md-shrink-1">
<div class="row align-items-center">
<div class="col-12">
<div class="{{ namespace }}stackLg">
<h4 class="h4">Récapitulatif</h4>
<div class="{{ namspace }}wysiwyg">
<p>
Avec S-Invest, un investissement d’une somme de <b>14.400 €</b> sur <b>8 ans</b> via un versement de <b>150 € par mois</b> vous aurait permis de construire un capital d’environ :
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-auto">
{% render '@snet-info-table',{
classes: ["-hasTotal"],
tableItems: tableItems
}, true %}
</div>
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}infoTableBox {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
padding: map-deep-get($token-spacer-inset-map, "md");
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
border-radius: map-deep-get($token-radius-map, "16");
/* 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 */
// infoTableBox__childElement
&__childElement {
// follows same logic as parent
}
TABLE {
TR:first-child TD {
padding-top: 0 !important;
}
TR:last-child TD {
padding-bottom: 0 !important;
}
}
/* modifiers */
// infoTableBox -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}infoTable {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
width: 100%;
position: relative;
+ .#{$namespace}infoTableCollapse {
border-top: $border-width solid;
@include custom-prop-fallback("border-top-color", "sys-color-border-primary-moderate");
}
/* 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 */
// infoTable TD
TR TD {
// follows same logic as parent
// @TODO change important once old CSS is removed
vertical-align: baseline !important;
border-bottom: 0;
padding-top: $table-cell-padding-y*0.5 !important;
padding-bottom: $table-cell-padding-y*0.5 !important;
@include media-breakpoint-up("md") {
padding-top: $table-cell-padding-y !important;
padding-bottom: $table-cell-padding-y !important;
}
&:first-child {
padding-left: 0 !important;
}
&:last-child {
text-align: right;
padding-right: 0 !important;
#{$self}__cellContent {
justify-content: flex-end;
}
}
&.-hasIcon {
.#{$namespace}icon + * {
margin-left: map-deep-get($token-spacer-inline-map, "sm");
}
.#{$namespace}icon {
&.-info100 {
@include custom-prop-fallback("color", "sys-color-text-status-info-vivid");
}
}
}
&.-noBorder {
border-bottom: none;
}
&.-alignBottom {
#{$self}__cellContent {
align-items: baseline;
}
}
&.-alignTop {
vertical-align: top !important;
#{$self}__cellContent {
align-items: flex-start;
}
}
}
TR + TR TD {
border-top: $border-width solid !important;
@include custom-prop-fallback("border-top-color", "sys-color-border-primary-moderate", true, true);
}
TBODY TH {
font-family: map-deep-get($token-font-family-map, "text");
}
TR TD,
TR TH {
&:only-of-type {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
TR > TH {
&:first-child {
padding-left: 0 !important;
}
}
TR:last-child TD {
border-bottom: 0 !important;
}
&__cellAlignTop#{$self}__cellAlignTop {
vertical-align: top !important;
}
&__cellAlignMiddle#{$self}__cellAlignMiddle {
vertical-align: middle !important;
}
&__labelIcon {
margin-right: map-deep-get($token-spacer-inline-map, "sm");
&:before {
font-size: 1em;
}
}
&__cellContent {
display: flex;
align-items: center;
}
&__helper {
@include custom-prop-fallback("color","sys-color-text-primary-muted");
}
&__empty {
@include custom-prop-fallback("color","sys-color-text-primary-muted");
}
&__textProcessing {
@include custom-prop-fallback("color", "sys-color-text-status-warning-vivid");
}
/* modifiers */
// infoTable -noBorder
&.-noBorder {
TR + TR TD {
border-top: none !important;
}
}
&.-hasBorderBottom {
TR:last-child TD {
border-bottom: $table-border-width solid !important;
@include custom-prop-fallback("border-bottom-color", "sys-color-border-primary-moderate", true, true);
}
}
&.-hasTotal {
> TBODY > TR + TR TD,
> TR + TR TD {
border-top: none !important;
}
> TBODY > TR:nth-last-of-type(2) > TD,
> TR:nth-last-of-type(2) > TD {
padding-bottom: $table-cell-padding-y * 1.5 !important;
@include media-breakpoint-up("md") {
padding-bottom: $table-cell-padding-y *2 !important;
}
}
> TBODY > TR:last-child TD,
> TR:last-child TD {
border-top: $table-border-width solid !important;
@include custom-prop-fallback("border-top-color", "sys-color-border-primary-moderate", true, true);
padding-bottom: $table-cell-padding-y !important;
padding-top: $table-cell-padding-y * 1.5 !important;
@include media-breakpoint-up("md") {
padding-top: $table-cell-padding-y *2 !important;
}
}
}
&.-itemInsetSpacingSm {
margin-top: $table-cell-padding-y*0.5 !important;
@include media-breakpoint-up("md") {
margin-top: $table-cell-padding-y !important;
}
TR TH,
TR TD {
padding-top: $table-cell-padding-y*0.5 !important;
padding-bottom: $table-cell-padding-y*0.5 !important;
@include media-breakpoint-up("md") {
padding-top: $table-cell-padding-y*0.5 !important;
padding-bottom: $table-cell-padding-y*0.5 !important;
}
}
}
&.-firstRowStuckTop {
TBODY:first-of-type TR:first-of-type TD {
padding-top: 0 !important;
}
}
&.-alignMiddle {
TR TD {
// follows same logic as parent
// @TODO change important once old CSS is removed
vertical-align: middle !important;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}