-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy path_tabs-theme.scss
127 lines (120 loc) · 2.6 KB
/
_tabs-theme.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
@mixin md-tab-primary {
> md-tabs-wrapper {
background-color: '{{primary-color}}';
> md-tabs-canvas {
> md-pagination-wrapper {
> md-tab-item:not([disabled]) {
&, md-icon {
color: '{{primary-100}}';
}
&.md-active, &.md-focused {
&, md-icon {
color: '{{primary-contrast}}';
}
}
&.md-focused {
background: '{{primary-contrast-0.1}}';
}
}
}
}
}
}
@mixin md-tab-warn {
> md-tabs-wrapper {
background-color: '{{warn-color}}';
> md-tabs-canvas {
> md-pagination-wrapper {
> md-tab-item:not([disabled]) {
&, md-icon {
color: '{{warn-100}}';
}
&.md-active, &.md-focused {
&, md-icon {
color: '{{warn-contrast}}';
}
}
&.md-focused {
background: '{{warn-contrast-0.1}}';
}
}
}
}
}
}
@mixin md-tab-accent {
> md-tabs-wrapper {
background-color: '{{accent-color}}';
> md-tabs-canvas {
> md-pagination-wrapper {
> md-tab-item:not([disabled]) {
&, md-icon {
color: '{{accent-A100}}';
}
&.md-active, &.md-focused {
&, md-icon {
color: '{{accent-contrast}}';
}
}
&.md-focused {
background: '{{accent-contrast-0.1}}';
}
}
> md-ink-bar {
color: '{{primary-600-1}}';
background: '{{primary-600-1}}';
}
}
}
}
}
md-tabs.md-THEME_NAME-theme {
md-tabs-wrapper {
background-color: transparent;
border-color: '{{foreground-4}}';
}
.md-paginator md-icon {
color: '{{primary-color}}';
}
md-ink-bar {
color: '{{accent-color}}';
background: '{{accent-color}}';
}
.md-tab {
color: '{{foreground-2}}';
&[disabled] {
&, md-icon {
color: '{{foreground-3}}';
}
}
&.md-active, &.md-focused {
&, md-icon {
color: '{{primary-color}}';
}
}
&.md-focused {
background: '{{primary-color-0.1}}';
}
.md-ripple-container {
color: '{{accent-A100}}';
}
}
&.md-accent {
@include md-tab-accent();
}
&.md-primary {
@include md-tab-primary();
}
&.md-warn {
@include md-tab-warn();
}
}
md-toolbar > md-tabs.md-THEME_NAME-theme {
@include md-tab-primary();
}
md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme {
@include md-tab-accent();
}
md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme {
@include md-tab-warn();
}