github/simple-keyboard
github/simple-keyboard
3
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2025-02-21 00:23:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Assign theme styles to default theme

Browse Source
This commit is contained in:
Francisco Hodge 2020-02-06 00:31:32 -05:00
parent 1a5d917a7d
commit ed0abfeea6
1 changed files with 57 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/lib/components/Keyboard.css
View File

@ -1,12 +1,8 @@
body,
html {
margin: 0;
padding: 0;
}
.simple-keyboard {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
/**
* simple-keyboard
* Theme: hg-theme-default
*/
.hg-theme-default {
width: 100%;
user-select: none;
box-sizing: border-box;
@ -14,50 +10,56 @@ html {
touch-action: manipulation;
}
.simple-keyboard .hg-row {
display: flex;
}
.simple-keyboard .hg-row:not(:last-child) {
margin-bottom: 5px;
}
.simple-keyboard .hg-row .hg-button:not(:last-child) {
margin-right: 5px;
}
.simple-keyboard .hg-row .hg-button-container {
margin-right: 5px;
}
.simple-keyboard .hg-row > div:last-child {
margin-right: 0;
}
.simple-keyboard .hg-row .hg-button-container {
display: flex;
}
.simple-keyboard .hg-button {
display: inline-block;
flex-grow: 1;
cursor: pointer;
}
.simple-keyboard .hg-button span {
.hg-theme-default .hg-button span {
pointer-events: none;
}
/**
* hg-theme-default theme
*/
.simple-keyboard.hg-theme-default {
/* When using option "useButtonTag" */
.hg-theme-default button.hg-button {
border-width: 0;
outline: 0;
font-size: inherit;
}
.hg-theme-default {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
background-color: rgba(0, 0, 0, 0.1);
padding: 5px;
border-radius: 5px;
}
.simple-keyboard.hg-theme-default .hg-button {
.hg-theme-default .hg-button {
display: inline-block;
flex-grow: 1;
cursor: pointer;
}
.hg-theme-default .hg-row {
display: flex;
}
.hg-theme-default .hg-row:not(:last-child) {
margin-bottom: 5px;
}
.hg-theme-default .hg-row .hg-button:not(:last-child) {
margin-right: 5px;
}
.hg-theme-default .hg-row .hg-button-container {
margin-right: 5px;
}
.hg-theme-default .hg-row > div:last-child {
margin-right: 0;
}
.hg-theme-default .hg-row .hg-button-container {
display: flex;
}
.hg-theme-default .hg-button {
box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);
height: 40px;
border-radius: 5px;
@ -72,18 +74,11 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.simple-keyboard.hg-theme-default .hg-button.hg-activeButton {
.hg-theme-default .hg-button.hg-activeButton {
background: #efefef;
}
/* When using option "useButtonTag" */
.simple-keyboard button.hg-button {
border-width: 0;
outline: 0;
font-size: inherit;
}
.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
.hg-theme-default.hg-layout-numeric .hg-button {
width: 33.3%;
height: 60px;
align-items: center;
@ -91,35 +86,35 @@ html {
justify-content: center;
}
.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {
.hg-theme-default .hg-button.hg-button-numpadadd {
height: 85px;
}
.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {
.hg-theme-default .hg-button.hg-button-numpadenter {
height: 85px;
}
.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {
.hg-theme-default .hg-button.hg-button-numpad0 {
width: 105px;
}
.simple-keyboard.hg-theme-default .hg-button.hg-button-com {
.hg-theme-default .hg-button.hg-button-com {
max-width: 85px;
}
.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
max-width: 45px;
}
.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {
.hg-theme-default .hg-button.hg-selectedButton {
background: rgba(5, 25, 70, 0.53);
color: white;
}
.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
max-width: 82px;
}
.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
max-width: 60px;
}