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
&,
47
// non-character keys
48
&.default-key {
49
@include button(normal);
50
&:focus {
52
@include button(focus);
53
}
54
&:hover,
56
&:checked {
57
@include button(hover);
58
}
59
&:active {
61
@include button(active);
62
}
63
}
64
&:grayed { //FIXMEy
66
border-color: transparent;
67
background-color: $scrim-alt;
68
color: $on-scrim-alt;
69
}
70
// enter key is suggested-action
72
&.enter-key {
73
@include button(normal, $c: $primary, $tc: $on-primary);
74
&:hover,
76
&:checked {
77
@include button(hover, $c: $primary, $tc: $on-primary);
78
}
79
&:active {
81
@include button(active, $c: $primary, $tc: $on-primary);
82
}
83
}
84
@if $version >= 3.36 {
86
&.shift-key-uppercase {
87
color: $primary;
88
}
89
StIcon {
91
icon-size: 32px;
92
}
93
} @else {
94
// size of the icon asset
95
&.default-key {
96
background-size: 24px;
97
}
98
// key assets
100
&.enter-key {
101
background-image: url("assets/key-enter.svg");
102
}
103
&.shift-key-lowercase {
105
background-image: url("assets/key-shift.svg");
106
}
107
&.shift-key-uppercase {
109
background-image: url("assets/key-shift-uppercase.svg");
110
}
111
&.shift-key-uppercase:latched {
113
background-image: url("assets/key-shift-latched-uppercase.svg");
114
}
115
&.hide-key {
117
background-image: url("assets/key-hide.svg");
118
}
119
&.layout-key {
121
background-image: url("assets/key-layout.svg");
122
}
123
}
124
}
125
// long press on a key popup
127
.keyboard-subkeys {
128
-boxpointer-gap: 5px;
129
-arrow-base: 0;
130
-arrow-rise: 0;
131
-arrow-border-width: 0;
132
-arrow-border-color: transparent;
133
-arrow-border-radius: 0;
134
-arrow-background-color: transparent;
135
padding: 5px;
136
border-radius: $corner-radius;
137
box-shadow: $shadow-z4;
138
background-color: $surface-z8;
139
color: $on-surface;
140
.keyboard-key {
142
border-radius: $corner-radius;
143
@include button(flat-normal);
145
&:focus {
147
@include button(flat-focus);
148
}
149
&:hover,
151
&:checked {
152
@include button(flat-hover);
153
}
154
&:active {
156
@include button(flat-active);
157
}
158
}
159
}
160
// emoji
162
.emoji-page {
163
.keyboard-key {
164
border: 0;
165
@include button(flat-normal, $tc: $on-scrim-alt);
166
&:focus {
168
@include button(flat-focus, $tc: $on-scrim-alt);
169
}
170
&:hover {
172
@include button(flat-hover, $tc: $on-scrim-alt);
173
}
174
&:active {
176
@include button(flat-active, $tc: $on-scrim-alt);
177
}
178
}
179
}
180
.emoji-panel {
182
.keyboard-key:latched {
183
border-color: transparent;
184
background-color: $primary;
185
color: $on-primary;
186
}
187
}
188
// suggestions
190
.word-suggestions {
191
@include type(subtitle1);
192
spacing: 12px;
193
min-height: 20pt;
194
}
195