blob: 53a48c3c442f63b940cfd24ce2b242b4e4adaf79 [file] [log] [blame]
@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;
}
}
}
@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);
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);
}
}