UNPKG

2.99 kBSCSSView Raw
1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:color';
4@use '../core/theming/theming';
5
6// Approximates the correct buffer color by using a mix between the theme color
7// and the theme's background color.
8@function _get-buffer-color($theme, $background) {
9 $theme-color: theming.get-color-from-palette($theme);
10 // Return fallback color if the theme uses variables to define colors.
11 @if (meta.type-of($theme-color) != 'color' or meta.type-of($background) != 'color') {
12 @return theming.get-color-from-palette($theme, lighter);
13 }
14 @return color.mix($theme-color, $background, $weight: 25%);
15}
16
17/// @deprecated Use `mat.progress-bar-color` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
18/// @breaking-change 17.0.0
19@mixin color($config-or-theme) {
20 $config: theming.get-color-config($config-or-theme);
21 $primary: map.get($config, primary);
22 $accent: map.get($config, accent);
23 $warn: map.get($config, warn);
24 $background: map.get(map.get($config, background), background);
25
26 .mat-progress-bar-background {
27 fill: _get-buffer-color($primary, $background);
28 }
29
30 .mat-progress-bar-buffer {
31 background-color: _get-buffer-color($primary, $background);
32 }
33
34 .mat-progress-bar-fill::after {
35 background-color: theming.get-color-from-palette($primary);
36 }
37
38 .mat-progress-bar.mat-accent {
39 .mat-progress-bar-background {
40 fill: _get-buffer-color($accent, $background);
41 }
42
43 .mat-progress-bar-buffer {
44 background-color: _get-buffer-color($accent, $background);
45 }
46
47 .mat-progress-bar-fill::after {
48 background-color: theming.get-color-from-palette($accent);
49 }
50 }
51
52 .mat-progress-bar.mat-warn {
53 .mat-progress-bar-background {
54 fill: _get-buffer-color($warn, $background);
55 }
56
57 .mat-progress-bar-buffer {
58 background-color: _get-buffer-color($warn, $background);
59 }
60
61 .mat-progress-bar-fill::after {
62 background-color: theming.get-color-from-palette($warn);
63 }
64 }
65}
66
67/// @deprecated Use `mat.progress-bar-typography` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
68/// @breaking-change 17.0.0
69@mixin typography($config-or-theme) {}
70
71@mixin _density($config-or-theme) {}
72
73/// @deprecated Use `mat.progress-bar-theme` instead. See https://material.angular.io/guide/mdc-migration for information about migrating.
74/// @breaking-change 17.0.0
75@mixin theme($theme-or-color-config) {
76 $theme: theming.private-legacy-get-theme($theme-or-color-config);
77 @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-progress-bar') {
78 $color: theming.get-color-config($theme);
79 $density: theming.get-density-config($theme);
80 $typography: theming.get-typography-config($theme);
81
82 @if $color != null {
83 @include color($color);
84 }
85 @if $density != null {
86 @include _density($density);
87 }
88 @if $typography != null {
89 @include typography($typography);
90 }
91 }
92}
93