Created
December 9, 2020 19:46
-
-
Save zakmac/6a991a40b7d6c278d4f81698b29500ab to your computer and use it in GitHub Desktop.
Angular Material Table Density Generator Mixin -- Based on Official Material Styles
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import '~@angular/material/theming'; | |
@mixin table-density($density-config, $density-scale: default) { | |
$row-height: _mat-density-prop-value( | |
$density-config, | |
$density-scale, | |
height, | |
); | |
$row-padding: _mat-density-prop-value( | |
$density-config, | |
$density-scale, | |
padding, | |
); | |
$header-row-height: $row-height * 1.2; | |
// row sizing | |
mat-header-row { | |
min-height: $header-row-height; | |
} | |
mat-row, | |
mat-footer-row { | |
min-height: $row-height; | |
} | |
mat-row, | |
mat-header-row, | |
mat-footer-row { | |
border-width: 0; | |
border-bottom-width: 1px; | |
border-style: solid; | |
} // mat-row | |
// cell sizing | |
table.mat-table { | |
border-spacing: 0; | |
} | |
tr.mat-header-row { | |
height: $header-row-height; | |
} | |
tr.mat-row, | |
tr.mat-footer-row { | |
height: $row-height; | |
} | |
th.mat-header-cell, | |
td.mat-cell, | |
td.mat-footer-cell { | |
padding: 0; | |
border-bottom-width: 1px; | |
&:first-of-type { | |
padding-left: $row-padding; | |
[dir=rtl] &:not(:only-of-type) { | |
padding-left: 0; | |
padding-right: $row-padding; | |
} | |
} // &:first-of-type | |
&:last-of-type{ | |
padding-right: $row-padding; | |
[dir=rtl] &:not(:only-of-type) { | |
padding-right: 0; | |
padding-left: $row-padding; | |
} | |
} // &:last-of-type | |
} // mat-cell | |
} // @table-density |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// configure alternate table densities | |
$table-default-row-height: 3rem; | |
$table-default-row-padding: 1.5rem; | |
$table-maximum-row-height: 4rem; | |
$table-maximum-row-padding: 1.5rem; | |
$table-minimum-row-height: 2rem; | |
$table-minimum-row-padding: 1.5rem; | |
$table-density-config: ( | |
height: ( | |
default: $table-default-row-height, | |
maximum: $table-maximum-row-height, | |
minimum: $table-minimum-row-height, | |
), | |
padding: ( | |
default: $table-default-row-padding, | |
maximum: $table-maximum-row-padding, | |
minimum: $table-minimum-row-padding, | |
), | |
); // $table-density-config |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import './angular-material-table-density.variables'; | |
@import './angular-material-table-density.generator'; | |
// apply alternate table densities | |
.mat-table { | |
@include table-density($stonk-table-density-config); | |
&.max-density, | |
&.maximum-density { | |
@include table-density($stonk-table-density-config, minimum); | |
} | |
&.min-density, | |
&.minimum-density { | |
@include table-density($stonk-table-density-config, maximum); | |
} | |
} // .mat-table |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment