-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
_mdc-tabs.scss
99 lines (82 loc) · 3.65 KB
/
_mdc-tabs.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
@import '@material/theme/functions';
@import '@material/tab-indicator/mixins';
@import '@material/tab/mixins';
@import '@material/tab/variables';
@import '../mdc-helpers/mdc-helpers';
@mixin mat-tabs-theme-mdc($theme) {
// Save original values of MDC global variables. We need to save these so we can restore the
// variables to their original values and prevent unintended side effects from using this mixin.
$orig-mdc-tab-text-label-color-active: $mdc-tab-text-label-color-active;
$orig-mdc-tab-icon-color-active: $mdc-tab-icon-color-active;
$orig-mdc-tab-text-label-color-default: $mdc-tab-text-label-color-default;
@include mat-using-mdc-theme($theme) {
// This value is the same as MDC's default, but MDC defines it once inside
// a variables file which means that we can't override it with our own palette.
$mdc-tab-text-label-color-default:
rgba(mdc-theme-prop-value(on-surface), $mdc-tab-text-label-opacity) !global;
@include _mat-mdc-tabs-palette-styles($mdc-tab-text-label-color-active);
.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
&.mat-accent {
$mdc-tab-text-label-color-active: secondary !global;
$mdc-tab-icon-color-active: secondary !global;
@include _mat-mdc-tabs-palette-styles($mdc-tab-text-label-color-active);
}
&.mat-warn {
$mdc-tab-text-label-color-active: error !global;
$mdc-tab-icon-color-active: error !global;
@include _mat-mdc-tabs-palette-styles($mdc-tab-text-label-color-active);
}
}
.mat-mdc-tab-group {
&.mat-background-primary {
@include _mat-mdc-tabs-background(primary, on-primary);
}
&.mat-background-accent {
@include _mat-mdc-tabs-background(secondary, on-secondary);
}
&.mat-background-warn {
@include _mat-mdc-tabs-background(error, on-error);
}
}
.mat-mdc-tab-header-pagination-chevron {
@include mdc-theme-prop(border-color, on-surface);
}
}
// Restore original values of MDC global variables.
$mdc-tab-text-label-color-active: $orig-mdc-tab-text-label-color-active !global;
$mdc-tab-icon-color-active: $orig-mdc-tab-icon-color-active !global;
$mdc-tab-text-label-color-default: $orig-mdc-tab-text-label-color-default !global;
}
@mixin _mat-mdc-tabs-background($background-color, $foreground-color) {
.mat-mdc-tab-header, .mat-mdc-tab-links, .mat-mdc-tab-header-pagination {
// Set background color for the tab group
@include mdc-theme-prop(background-color, $background-color);
}
// Set labels to contrast against background
.mdc-tab__text-label, .mat-mdc-tab-link {
@include mdc-theme-prop(color, $foreground-color);
}
.mat-ripple-element, .mdc-tab__ripple::before {
@include mdc-theme-prop(background-color, $foreground-color);
}
.mdc-tab-indicator__content--underline, .mat-mdc-tab-header-pagination-chevron {
@include mdc-theme-prop(border-color, $foreground-color);
}
}
@mixin _mat-mdc-tabs-palette-styles($color) {
@include mdc-tab-without-ripple($query: $mat-theme-styles-query);
@include mdc-tab-indicator-underline-color($color, $query: $mat-theme-styles-query);
@include mdc-tab-indicator-icon-color($color, $query: $mat-theme-styles-query);
.mdc-tab__ripple::before,
.mat-mdc-tab .mat-ripple-element,
.mat-mdc-tab-header-pagination .mat-ripple-element,
.mat-mdc-tab-link .mat-ripple-element {
@include mdc-theme-prop(background-color, $color);
}
}
@mixin mat-tabs-typography-mdc($config) {
@include mat-using-mdc-typography($config) {
@include mdc-tab-without-ripple($query: $mat-typography-styles-query);
@include mdc-tab-indicator-core-styles($query: $mat-typography-styles-query);
}
}