blob: 7a707421e4e559ff106c5ddc2b04eb6af1ed50de [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;
}
}
.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));
}
}