@use 'sass:map'; @use '../../core/theming/theming'; @use '../../core/typography/typography'; @use '../../core/typography/typography-utils'; /// @deprecated Use `mat.option-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating. /// @breaking-change 17.0.0 @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); $foreground: map.get($config, foreground); $background: map.get($config, background); $primary: map.get($config, primary); $accent: map.get($config, accent); $warn: map.get($config, warn); .mat-option { color: theming.get-color-from-palette($foreground, text); &:hover:not(.mat-option-disabled), &:focus:not(.mat-option-disabled) { background: theming.get-color-from-palette($background, hover); } // In multiple mode there is a checkbox to show that the option is selected. &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) { background: theming.get-color-from-palette($background, hover); } &.mat-active { background: theming.get-color-from-palette($background, hover); color: theming.get-color-from-palette($foreground, text); } &.mat-option-disabled { color: theming.get-color-from-palette($foreground, hint-text); } } .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) { color: theming.get-color-from-palette($primary, text); } .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) { color: theming.get-color-from-palette($accent, text); } .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) { color: theming.get-color-from-palette($warn, text); } } /// @deprecated Use `mat.option-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating. /// @breaking-change 17.0.0 @mixin typography($config-or-theme) { $config: typography.private-typography-to-2014-config( theming.get-typography-config($config-or-theme)); .mat-option { font: { family: typography-utils.font-family($config); size: typography-utils.font-size($config, subheading-2); } } } @mixin _density($config-or-theme) {} /// @deprecated Use `mat.option-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating. /// @breaking-change 17.0.0 @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-option') { $color: theming.get-color-config($theme); $density: theming.get-density-config($theme); $typography: theming.get-typography-config($theme); @if $color != null { @include color($color); } @if $density != null { @include _density($density); } @if $typography != null { @include typography($typography); } } }