| @import '../../cdk/a11y/a11y'; |
| @import '../core/style/private'; |
| @import '../core/theming/palette'; |
| @import '../core/theming/theming'; |
| @import '../core/typography/typography-utils'; |
| @import '../core/density/private/compatibility'; |
| @import './button-toggle-variables'; |
| |
| @mixin mat-button-toggle-color($config-or-theme) { |
| $config: mat-get-color-config($config-or-theme); |
| $foreground: map-get($config, foreground); |
| $background: map-get($config, background); |
| $divider-color: mat-color($foreground, divider); |
| |
| .mat-button-toggle-standalone, |
| .mat-button-toggle-group { |
| @include mat-private-theme-elevation(2, $config); |
| } |
| |
| .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, |
| .mat-button-toggle-group-appearance-standard { |
| box-shadow: none; |
| } |
| |
| .mat-button-toggle { |
| color: mat-color($foreground, hint-text); |
| |
| .mat-button-toggle-focus-overlay { |
| background-color: mat-color($background, focused-button); |
| } |
| } |
| |
| .mat-button-toggle-appearance-standard { |
| color: mat-color($foreground, text); |
| background: mat-color($background, card); |
| |
| .mat-button-toggle-focus-overlay { |
| background-color: mat-color($background, focused-button, 1); |
| } |
| } |
| |
| .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle { |
| border-left: solid 1px $divider-color; |
| } |
| |
| [dir='rtl'] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle { |
| border-left: none; |
| border-right: solid 1px $divider-color; |
| } |
| |
| .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical { |
| .mat-button-toggle + .mat-button-toggle { |
| border-left: none; |
| border-right: none; |
| border-top: solid 1px $divider-color; |
| } |
| } |
| |
| .mat-button-toggle-checked { |
| background-color: mat-color($background, selected-button); |
| color: mat-color($foreground, secondary-text); |
| |
| &.mat-button-toggle-appearance-standard { |
| color: mat-color($foreground, text); |
| } |
| } |
| |
| .mat-button-toggle-disabled { |
| color: mat-color($foreground, disabled-button); |
| background-color: mat-color($background, disabled-button-toggle); |
| |
| &.mat-button-toggle-appearance-standard { |
| background: mat-color($background, card); |
| } |
| |
| &.mat-button-toggle-checked { |
| background-color: mat-color($background, selected-disabled-button); |
| } |
| } |
| |
| .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, |
| .mat-button-toggle-group-appearance-standard { |
| border: solid 1px $divider-color; |
| } |
| } |
| |
| @mixin mat-button-toggle-typography($config-or-theme) { |
| $config: mat-get-typography-config($config-or-theme); |
| .mat-button-toggle { |
| font-family: mat-font-family($config); |
| } |
| } |
| |
| @mixin mat-button-toggle-density($config-or-theme) { |
| $density-scale: mat-get-density-config($config-or-theme); |
| $standard-height: mat-private-density-prop-value( |
| $mat-button-toggle-standard-density-config, $density-scale, height); |
| |
| @include mat-private-density-legacy-compatibility() { |
| .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { |
| line-height: $standard-height; |
| } |
| } |
| } |
| |
| @mixin mat-button-toggle-theme($theme-or-color-config) { |
| $theme: mat-private-legacy-get-theme($theme-or-color-config); |
| @include mat-private-check-duplicate-theme-styles($theme, 'mat-button-toggle') { |
| $color: mat-get-color-config($theme); |
| $density: mat-get-density-config($theme); |
| $typography: mat-get-typography-config($theme); |
| |
| @if $color != null { |
| @include mat-button-toggle-color($color); |
| } |
| @if $density != null { |
| @include mat-button-toggle-density($density); |
| } |
| @if $typography != null { |
| @include mat-button-toggle-typography($typography); |
| } |
| } |
| } |