The following classes can be set on individual TDs, in order to add specific styles:
<div class="sds-infoTableBox">
<table class="sds-infoTable table -box">
<tbody>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Montant de la transaction
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -negative">
<span class="sds-amount__value">-165</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Date de la transaction
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
30.09.2021
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Montant
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -negative">
<span class="sds-amount__value">-165</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Pays
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
Luxembourg
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
{% if table %}
{% if wrapper %}
<div class="{{ namespace }}infoTableBox">
{% endif %}
<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<tbody>
{% for key, item in tableItems %}
{% if item %}
<tr>
<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
<div class="{{ namespace }}infoTable__cellContent">
{% if item.icon %}
<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
{% endif %}
{% render "@label",{
eltType: "div",
text: item.label
},true %}
{% if item.infoDot %}
{% render '@info-dot--small' %}
{% endif %}
</div>
</td>
<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
<div class="{{ namespace }}infoTable__cellContent">
{% if item.iconRight %}
<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
{% endif %}
{% if item.amountNeg %}
{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
{% elseif item.amountNegLarge %}
{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
{% elseif item.amountPos %}
{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
{% elseif item.amountPosLarge %}
{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
{% elseif item.amountDef %}
{% render "@amount--default",{
text: item.amountDef,
classes: item.amountDefClasses,
currency: item.currency
},true %}
{% elseif item.amountDefLarge %}
{% render "@amount--large",{
text: item.amountDefLarge,
currency: item.currency,
classes: classes
},true %}
{% elseif item.amountDefXtraLarge %}
{% render "@amount--xtra-large",{
text: item.amountDefXtraLarge,
currency: item.currency,
classes: classes
},true %}
{% elseif item.empty %}
{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
{% else %}
<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}{% if item.textProcessing %} class="{{ namespace }}infoTable__textProcessing"{% endif %}>
{{ item.text | safe }}
</div>
{% endif %}
</div>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
{% if wrapper %}
</div>
{% endif %}
{% endif %}
{% if collapse %}
<div id="{{ collapseID }}" class="{{ namespace }}infoTableCollapse collapse fade {% if wrapper %}-box{% endif %}">
<table class="{{ namespace }}infoTable table{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<tbody>
{% for key, item in tableItemsCollapse %}
{% if item %}
<tr>
<td class="{% if item.icon %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
<div class="{{ namespace }}infoTable__cellContent">
{% if item.icon %}
<span class="{{ namespace }}icon {{ namespace }}{{ item.icon }} {{ item.iconColor }}"></span>
{% endif %}
{% render "@label",{
eltType: "div",
text: item.label
},true %}
</div>
</td>
<td class="{% if item.iconRight %}-hasIcon{% endif %}{% if item.noBorder %}-noBorder{% endif %}">
<div class="{{ namespace }}infoTable__cellContent">
{% if item.iconRight %}
<span class="{{ namespace }}icon {{ namespace }}{{ item.iconRight }} {{ item.iconRightColor }}"></span>
{% endif %}
{% if item.amountNeg %}
{% render "@amount--negative",{text: item.amountNeg, classes: item.classes},true %}
{% elseif item.amountNegLarge %}
{% render "@amount--xtra-large-negative",{text: item.amountNegLarge, classes: item.classes},true %}
{% elseif item.amountPos %}
{% render "@amount--positive",{text: item.amountPos, classes: item.classes},true %}
{% elseif item.amountPosLarge %}
{% render "@amount--large-positive",{text: item.amountPosLarge, classes: item.classes},true %}
{% elseif item.amountDef %}
{% render "@amount--default",{text: item.amountDef, classes: item.amountDefClasses},true %}
{% elseif item.amountDefLarge %}
{% render "@amount--large",{
text: item.amountDefLarge,
currency: item.currency,
classes: classes
},true %}
{% elseif item.amountDefXtraLarge %}
{% render "@amount--xtra-large",{
text: item.amountDefXtraLarge,
currency: item.currency,
classes: classes
},true %}
{% elseif item.empty %}
{% if item.text %}{{ item.text | safe }}{% endif %} <span class="{{ namespace }}infoTable__empty">{{ item.empty }}</span>
{% else %}
<div{% if item.bold %} class="{{ namespace }}textSemiBold"{% endif %}>
{{ item.text | safe }}
</div>
{% endif %}
</div>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
{% if btnCentered %}
<div class="text-center">
{% endif %}
{% render "@btn-secondary--icon-left-collapse-trigger",{
icon: "icon-plus",
text: "Afficher le détail",
attrs: {
"data-toggle": "collapse",
"data-target": "#"+collapseID
}
},true %}
{% if btnCentered %}
</div>
{% endif %}
{% endif %}
/* 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 {
}
}