| @import '../common/styles/variables'; |
| @import '../common/styles/elevation'; |
| @import '../common/styles/theme-functions'; |
| @import '../common/styles/typography-functions'; |
| |
| @mixin td-expansion-panel-typography($config) { |
| .td-expansion-label { |
| font: { |
| family: td-font-family($config); |
| size: td-font-size($config, subheading-2); |
| weight: td-font-weight($config, subheading-2); |
| } |
| } |
| .td-expansion-sublabel { |
| font: { |
| family: td-font-family($config); |
| size: td-font-size($config, body-1); |
| weight: td-font-weight($config, body-1); |
| } |
| } |
| } |
| |
| @mixin td-expansion-panel-theme($theme) { |
| $accent: map-get($theme, accent); |
| $warn: map-get($theme, warn); |
| $foreground: map-get($theme, foreground); |
| $background: map-get($theme, background); |
| |
| .td-expansion-panel-group { |
| .td-expansion-panel { |
| transition: 120ms ease-in; |
| &:not(:last-of-type) { |
| &.td-expanded { |
| margin-bottom: $margin; |
| } |
| } |
| &:not(:first-of-type) { |
| &.td-expanded { |
| margin-top: $margin; |
| } |
| } |
| } |
| } |
| |
| .td-expansion-panel { |
| @include mat-elevation(1); |
| |
| background-color: mat-color($background, card); |
| .td-expansion-panel-header { |
| &:focus:not(.mat-disabled), |
| &:hover:not(.mat-disabled) { |
| background: mat-color($background, 'hover'); |
| } |
| .td-expansion-panel-header-content { |
| mat-icon.td-expand-icon { |
| color: mat-color($foreground, icon); |
| } |
| &.mat-disabled { |
| &, |
| & * { |
| color: mat-color($foreground, disabled); |
| } |
| } |
| } |
| } |
| mat-icon.td-expand-icon { |
| color: mat-color($foreground, icon); |
| } |
| .td-expansion-label, |
| .td-expansion-sublabel { |
| &, |
| & * { |
| vertical-align: middle; |
| } |
| } |
| .td-expansion-sublabel { |
| color: mat-color($foreground, secondary-text); |
| } |
| } |
| } |