/* 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; } } /* random parent element */ /* * * Syntax : .randomParentElt & {} * */ /* Pseudo Classes */ &:hover { @media (hover: hover) { } } &:focus { } &:active { } &:focus, &:active { } }