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