UNPKG

3.39 kBSCSSView Raw
1@use 'sass:map';
2@use '../core/theming/theming';
3@use '../core/typography/typography';
4@use '../core/typography/typography-utils';
5
6@mixin _color($palette) {
7 &.mat-radio-checked .mat-radio-outer-circle {
8 border-color: theming.get-color-from-palette($palette);
9 }
10
11 .mat-radio-inner-circle,
12 .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
13 &.mat-radio-checked .mat-radio-persistent-ripple,
14 &:active .mat-radio-persistent-ripple {
15 background-color: theming.get-color-from-palette($palette);
16 }
17}
18
19/// @deprecated Use `mat.radio-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
20/// @breaking-change 17.0.0
21@mixin color($config-or-theme) {
22 $config: theming.get-color-config($config-or-theme);
23 $primary: map.get($config, primary);
24 $accent: map.get($config, accent);
25 $warn: map.get($config, warn);
26 $background: map.get($config, background);
27 $foreground: map.get($config, foreground);
28
29 .mat-radio-outer-circle {
30 border-color: theming.get-color-from-palette($foreground, secondary-text);
31 }
32
33 .mat-radio-button {
34 &.mat-primary {
35 @include _color($primary);
36 }
37
38 &.mat-accent {
39 @include _color($accent);
40 }
41
42 &.mat-warn {
43 @include _color($warn);
44 }
45
46 // This needs extra specificity, because the classes above are combined
47 // (e.g. `.mat-radio-button.mat-accent`) which increases their specificity a lot.
48 // TODO: consider making the selectors into descendants (`.mat-primary .mat-radio-button`).
49 &.mat-radio-disabled {
50 &.mat-radio-checked .mat-radio-outer-circle,
51 .mat-radio-outer-circle {
52 border-color: theming.get-color-from-palette($foreground, disabled);
53 }
54
55 .mat-radio-ripple .mat-ripple-element,
56 .mat-radio-inner-circle {
57 background-color: theming.get-color-from-palette($foreground, disabled);
58 }
59
60 .mat-radio-label-content {
61 color: theming.get-color-from-palette($foreground, disabled);
62 }
63 }
64
65 // Switch this to a solid color since we're using `opacity`
66 // to control how opaque the ripple should be.
67 .mat-ripple-element {
68 background-color: map.get($foreground, base);
69 }
70 }
71}
72
73/// @deprecated Use `mat.radio-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
74/// @breaking-change 17.0.0
75@mixin typography($config-or-theme) {
76 $config: typography.private-typography-to-2014-config(
77 theming.get-typography-config($config-or-theme));
78 .mat-radio-button {
79 font-family: typography-utils.font-family($config);
80 }
81}
82
83@mixin _density($config-or-theme) {}
84
85/// @deprecated Use `mat.radio-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
86/// @breaking-change 17.0.0
87@mixin theme($theme-or-color-config) {
88 $theme: theming.private-legacy-get-theme($theme-or-color-config);
89 @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-radio') {
90 $color: theming.get-color-config($theme);
91 $density: theming.get-density-config($theme);
92 $typography: theming.get-typography-config($theme);
93
94 @if $color != null {
95 @include color($color);
96 }
97 @if $density != null {
98 @include _density($density);
99 }
100 @if $typography != null {
101 @include typography($typography);
102 }
103 }
104}