| @import '../common/styles/theme-functions'; |
| @import '../common/styles/typography-functions'; |
| |
| @mixin td-chips-typography($config) { |
| .td-chip-content { |
| font: { |
| family: td-font-family($config); |
| size: td-font-size($config, caption); |
| } |
| } |
| } |
| |
| @mixin td-chips-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); |
| |
| // chips |
| td-chips { |
| // chip |
| .mat-basic-chip { |
| background: mat-color($background, status-bar); |
| color: mat-color($foreground, text); |
| &:focus:not(.td-chip-disabled) { |
| mat-icon:hover { |
| color: mat-color($foreground, icon); |
| } |
| &.mat-primary { |
| background: mat-color($primary); |
| &, mat-icon { |
| color: mat-color($primary, default-contrast); |
| } |
| } |
| &.mat-accent { |
| background: mat-color($accent); |
| &, mat-icon { |
| color: mat-color($accent, default-contrast); |
| } |
| } |
| &.mat-warn { |
| background: mat-color($warn); |
| &, mat-icon { |
| color: mat-color($warn, default-contrast); |
| } |
| } |
| } |
| mat-icon.td-chip-removal { |
| color: mat-color($foreground, hint-text); |
| &:hover { |
| color: mat-color($foreground, icon); |
| } |
| } |
| } |
| .mat-form-field-underline { |
| background-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42)); |
| } |
| &.mat-primary { |
| .mat-form-field-underline .mat-form-field-ripple { |
| background-color: mat-color($primary); |
| } |
| } |
| &.mat-accent { |
| .mat-form-field-underline .mat-form-field-ripple { |
| background-color: mat-color($accent); |
| } |
| } |
| &.mat-warn { |
| .mat-form-field-underline .mat-form-field-ripple { |
| background-color: mat-color($warn); |
| } |
| } |
| &.ng-invalid { |
| .mat-form-field-underline .mat-form-field-ripple { |
| background-color: mat-color($warn); |
| } |
| .mat-form-field-label-wrapper > label.mat-form-field-label.mat-form-field-empty { |
| color: mat-color($warn); |
| } |
| } |
| } |
| } |