-
Notifications
You must be signed in to change notification settings - Fork 178
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(app): Align software keyboard with latest design #14700
Changes from all commits
aa55cb7
576fc0c
72498bb
3032ff9
e19d955
678e056
fd56c62
f6fbc8c
aa95ae0
db3d968
25acb56
27abefc
58a6d85
bbf4d2d
bba6cc3
153bf55
6d08c93
2551b46
9a9c1bc
35770e4
66f58ea
a9e5506
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
/* stylelint-disable */ | ||
|
||
/* Alphanumeric Keyboard has 3 layouts | ||
1. lower letter keys: hg-layout-default | ||
2. upper letter keys: hg-layout-shift | ||
3. number keys: hg-layout-numbers | ||
1, 2 are using the same style but 3 has own style. | ||
*/ | ||
|
||
.simple-keyboard.oddTheme1.hg-theme-default .hg-layout-default { | ||
width: 100%; | ||
height: 100%; | ||
background-color: #cbcccc; /* grey35 */ | ||
font-family: 'Public Sans', sans-serif; | ||
padding: 8px; | ||
} | ||
|
||
.hg-layout-default .hg-row .hg-button, | ||
.hg-layout-shift .hg-row .hg-button, | ||
.hg-layout-numbers .hg-row .hg-button { | ||
color: #16212d; | ||
font-size: 20px; | ||
font-style: normal; | ||
font-weight: 600; | ||
line-height: 24px; | ||
background-color: #ffffff; | ||
padding: 10px 22px; | ||
} | ||
|
||
.simple-keyboard .hg-button:active { | ||
color: #16212d; | ||
background-color: #dedede; /* grey30 */ | ||
} | ||
|
||
.hg-layout-default .hg-row .hg-button, | ||
.hg-layout-shift .hg-row .hg-button { | ||
height: 62.3px; | ||
} | ||
|
||
/* first row and second row */ | ||
.hg-layout-default .hg-row:not(:last-child), | ||
.hg-layout-shift .hg-row:not(:last-child) { | ||
grid-column: 8px; | ||
} | ||
.hg-row:not(:last-child) .hg-button { | ||
width: 94px; | ||
} | ||
|
||
/* third row first button and last button are the same size | ||
the rest is the same */ | ||
.hg-layout-default .hg-row:last-child, | ||
.hg-layout-shift .hg-row:last-child, | ||
.hg-layout-numbers .hg-row:last-child { | ||
/* adding 3px because package's css add margin-right:5px */ | ||
grid-gap: 3px; | ||
} | ||
.hg-layout-default .hg-row:last-child .hg-button, | ||
.hg-layout-shift .hg-row:last-child .hg-button { | ||
width: 97px; | ||
} | ||
.hg-layout-default .hg-row:last-child .hg-button:first-child, | ||
.hg-layout-default .hg-row:last-child .hg-button:last-child, | ||
.hg-layout-shift .hg-row:last-child .hg-button:first-child, | ||
.hg-layout-shift .hg-row:last-child .hg-button:last-child { | ||
width: 132px; | ||
} | ||
|
||
.hg-layout-numbers .hg-row .hg-button { | ||
height: 44.75px; | ||
width: 330px !important; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what does !important mean? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. to override style. https://developer.mozilla.org/en-US/docs/Web/CSS/important |
||
} |
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍