ASCII text
1
/* On-screen Keyboard */
2
// draw keys using button function
4
#keyboard {
5
background-color: $scrim-alt;
6
box-shadow: none;
7
.page-indicator {
9
padding: 4px;
10
.page-indicator-icon {
12
width: 8px;
13
height: 8px;
14
}
15
}
16
}
17
// the container for individual keys
19
@if $version >= 3.28 {
20
.key-container {
21
padding: 4px;
22
spacing: 4px;
23
}
24
} @else {
25
.keyboard-layout {
26
spacing: 10px;
27
padding: 10px;
28
}
29
.keyboard-row {
31
spacing: 15px;
32
}
33
}
34
// the keys
36
.keyboard-key {
37
min-height: 1.2em;
38
min-width: 1.2em;
39
font-size: 2em;
40
font-weight: 500;
41
border: 0;
42
border-width: 0;
43
border-style: none;
44
border-radius: $corner-radius;
45
@include button(normal);
47
&:focus {
49
@include button(focus);
50
}
51
&:hover,
53
&:checked {
54
@include button(hover);
55
}
56
&:active {
58
@include button(active);
59
}
60
&:grayed { //FIXMEy
62
border-color: transparent;
63
background-color: $scrim-alt;
64
color: on($scrim-alt);
65
}
66
// non-character keys
68
&.default-key {
69
// size of the icon asset
70
background-size: 24px;
71
@include button(normal);
73
&:focus {
75
@include button(focus);
76
}
77
&:hover,
79
&:checked {
80
@include button(hover);
81
}
82
&:active {
84
@include button(active);
85
}
86
}
87
// enter key is suggested-action
89
&.enter-key {
90
background-image: url("assets/key-enter.svg");
91
@include button(normal, $c: $primary, $tc: on($primary));
93
&:hover,
95
&:checked {
96
@include button(hover, $c: $primary, $tc: on($primary));
97
}
98
&:active {
100
@include button(active, $c: $primary, $tc: on($primary));
101
}
102
}
103
// key assets
105
&.shift-key-lowercase {
107
background-image: url("assets/key-shift.svg");
108
}
109
&.shift-key-uppercase {
111
background-image: url("assets/key-shift-uppercase.svg");
112
}
113
&.shift-key-uppercase:latched {
115
background-image: url("assets/key-shift-latched-uppercase.svg");
116
}
117
&.hide-key {
119
background-image: url("assets/key-hide.svg");
120
}
121
&.layout-key {
123
background-image: url("assets/key-layout.svg");
124
}
125
}
126
// long press on a key popup
128
.keyboard-subkeys {
129
-boxpointer-gap: 5px;
130
-arrow-base: 0;
131
-arrow-rise: 0;
132
-arrow-border-width: 0;
133
-arrow-border-color: transparent;
134
-arrow-border-radius: 0;
135
-arrow-background-color: transparent;
136
padding: 5px;
137
border-radius: $corner-radius;
138
box-shadow: $shadow-2;
139
background-color: $surface;
140
color: $text;
141
.keyboard-key {
143
border-radius: $corner-radius;
144
@include button(flat-normal);
146
&:focus {
148
@include button(flat-focus);
149
}
150
&:hover,
152
&:checked {
153
@include button(flat-hover);
154
}
155
&:active {
157
@include button(flat-active);
158
}
159
}
160
}
161
// emoji
163
.emoji-page {
164
.keyboard-key {
165
border: 0;
166
@include button(flat-normal, $tc: on($scrim-alt));
167
&:focus {
169
@include button(flat-focus, $tc: on($scrim-alt));
170
}
171
&:hover {
173
@include button(flat-hover, $tc: on($scrim-alt));
174
}
175
&:active {
177
@include button(flat-active, $tc: on($scrim-alt));
178
}
179
}
180
}
181
.emoji-panel {
183
.keyboard-key:latched {
184
border-color: transparent;
185
background-color: $primary;
186
color: on($primary);
187
}
188
}
189
// suggestions
191
.word-suggestions {
192
@include type(subtitle1);
193
spacing: 12px;
194
min-height: 20pt;
195
}
196