| @import '../common/styles/typography-functions'; |
| |
| @mixin td-data-table-typography($config) { |
| .td-data-table-cell { |
| font: { |
| family: td-font-family($config); |
| size: td-font-size($config, body-1); |
| weight: td-font-weight($config, body-1); |
| } |
| |
| line-height: td-line-height($config, body-1); |
| } |
| .td-data-table-column { |
| font: { |
| family: td-font-family($config); |
| size: td-font-size($config, caption); |
| weight: 600; |
| } |
| } |
| .td-data-table-sort-badge { |
| font: { |
| family: td-font-family($config); |
| size: td-font-size($config, caption); |
| weight: td-font-weight($config, body-1); |
| } |
| } |
| } |
| |
| @mixin td-data-table-theme($theme) { |
| $primary: map-get($theme, primary); |
| $accent: map-get($theme, accent); |
| $warn: map-get($theme, warn); |
| $background: map-get($theme, background); |
| $foreground: map-get($theme, foreground); |
| $is-dark-theme: map-get($theme, is-dark); |
| |
| td-data-table { |
| border-bottom: 1px solid mat-color($foreground, divider); |
| } |
| .td-data-table-scrollable { |
| border-top: 1px solid mat-color($foreground, divider); |
| } |
| .td-data-table-column-resizer { |
| .td-data-table-column-separator { |
| border-right: 2px solid mat-color($foreground, divider); |
| opacity: 0.3; |
| } |
| &:hover, |
| &.td-resizing { |
| .td-data-table-column-separator { |
| opacity: 1; |
| } |
| } |
| } |
| table[td-data-table] { |
| .td-data-table-column-row, |
| .td-data-table-row { |
| border-bottom-color: mat-color($foreground, divider); |
| } |
| .mat-checkbox-cell, |
| .mat-checkbox-column { |
| color: mat-color($foreground, secondary-text); |
| mat-pseudo-checkbox.mat-pseudo-checkbox-checked { |
| background-color: mat-color($accent); |
| } |
| } |
| .td-data-table-cell { |
| mat-form-field { |
| .mat-form-field-underline { |
| display: none; |
| } |
| } |
| } |
| .td-data-table-column { |
| color: mat-color($foreground, secondary-text); |
| * { |
| vertical-align: middle; |
| } |
| mat-icon { |
| &.td-data-table-sort-icon { |
| color: mat-color($foreground, disabled); |
| } |
| } |
| &.mat-active, |
| &.mat-active mat-icon { |
| color: mat-color($foreground, base); |
| } |
| } |
| &.mat-selectable tbody > tr.td-data-table-row { |
| &.td-selected { |
| background-color: mat-color($background, 'app-bar'); |
| } |
| &:focus { |
| background-color: mat-color($background, 'hover'); |
| } |
| } |
| &.mat-clickable tbody > tr.td-data-table-row { |
| &:hover { |
| background-color: mat-color($background, 'hover'); |
| } |
| } |
| } |
| .mat-selected-title { |
| background-color: mat-color($accent, 0.12); |
| color: mat-color($accent); |
| } |
| .td-data-table-sort-badge { |
| background-color: if( |
| $is-dark-theme, |
| map-get($mat-dark-theme-background, background), |
| mat-color($background, 'app-bar') |
| ); |
| color: if($is-dark-theme, $light-secondary-text, mat-color($foreground, icon)); |
| } |
| } |