ASCII text
1
// generic drawing of more complex things
2
@use "../../theme";
4
@use "../../theme-color";
5
@mixin entry($t, $fc: theme-color.$primary) {
7
//
8
// entry
9
//
10
// $t: entry type
11
// $fc: focus color
12
//
13
@if $t == normal {
15
transition-duration: theme.$state-duration;
16
background-color: if($fc == theme-color.$primary, theme-color.entry-fill(theme-color.$on-surface), theme-color.entry-fill(theme-color.$on-dark));
17
border-color: transparent;
18
box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.stroke(theme-color.$on-surface), $fc);
19
}
20
@if $t == focus {
22
border-color: transparent;
23
box-shadow: inset 0 -2px $fc;
24
}
25
@if $t == hover {
27
box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.$on-surface, $fc);
28
}
29
@if $t == insensitive {
31
color: theme-color.disabled(theme-color.$on-surface);
32
border-color: transparent;
33
box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.disabled-stroke(theme-color.$on-surface), $fc);
34
}
35
}
36
@mixin button($t, $c: theme-color.$surface-z8, $tc: theme-color.$on-surface) {
39
//
40
// button
41
//
42
// $t: button type
43
// $c: base color
44
// $tc: text color
45
//
46
@if $t == normal {
48
color: $tc;
49
background-color: $c;
50
border-color: transparent;
51
box-shadow: theme.$shadow-z2;
52
text-shadow: none;
53
icon-shadow: none;
54
transition-duration: theme.$state-duration;
55
}
56
@if $t == focus {
58
color: $tc;
59
background-color: theme-color.focus-overlay($tc, $on: $c);
60
text-shadow: none;
61
icon-shadow: none;
62
box-shadow: theme.$shadow-z4;
63
}
64
@if $t == hover {
66
color: $tc;
67
background-color: theme-color.hover-overlay($tc, $on: $c);
68
border-color: transparent;
69
box-shadow: theme.$shadow-z4;
70
text-shadow: none;
71
icon-shadow: none;
72
}
73
@if $t == active {
75
color: $tc;
76
background-color: theme-color.pressed-overlay($tc, $on: $c);
77
border-color: transparent;
78
box-shadow: theme.$shadow-z8;
79
text-shadow: none;
80
icon-shadow: none;
81
transition-duration: theme.$ripple-duration;
82
}
83
@if $t == insensitive {
85
color: if($tc == theme-color.$on-surface, theme-color.disabled(theme-color.$on-surface), $tc);
86
background-color: if($c == theme-color.$surface-z8, theme-color.fill(theme-color.$on-surface), $c);
87
border-color: transparent;
88
box-shadow: theme.$shadow-z0;
89
text-shadow: none;
90
icon-shadow: none;
91
}
92
@if $t == flat-normal {
94
color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
95
background-color: transparent;
96
border-color: transparent;
97
box-shadow: theme.$shadow-z0;
98
text-shadow: none;
99
icon-shadow: none;
100
transition-duration: theme.$state-duration;
101
}
102
@if $t == flat-focus {
104
color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
105
background-color: theme-color.focus-overlay(if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.$on-dark));
106
text-shadow: none;
107
icon-shadow: none;
108
box-shadow: theme.$shadow-z0;
109
}
110
@if $t == flat-hover {
112
color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
113
background-color: theme-color.hover-overlay(if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.$on-dark));
114
border-color: transparent;
115
box-shadow: theme.$shadow-z0;
116
text-shadow: none;
117
icon-shadow: none;
118
}
119
@if $t == flat-active {
121
color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
122
background-color: theme-color.pressed-overlay(if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.$on-dark));
123
border-color: transparent;
124
box-shadow: theme.$shadow-z0;
125
text-shadow: none;
126
icon-shadow: none;
127
transition-duration: theme.$ripple-duration;
128
}
129
@if $t == flat-insensitive {
131
color: if($tc != theme-color.$on-dark, theme-color.disabled-hint(theme-color.$on-surface), theme-color.disabled-hint(theme-color.$on-dark));
132
background-color: transparent;
133
border-color: transparent;
134
box-shadow: theme.$shadow-z0;
135
text-shadow: none;
136
icon-shadow: none;
137
}
138
}
139