github/simple-keyboard
github/simple-keyboard
4
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2025-05-05 05:13:00 +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 { * simple-keyboard
margin: 0; * Theme: hg-theme-default
padding: 0; */
} .hg-theme-default {
.simple-keyboard {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
width: 100%; width: 100%;
user-select: none; user-select: none;
box-sizing: border-box; box-sizing: border-box;
@ -14,50 +10,56 @@ html {
touch-action: manipulation; touch-action: manipulation;
} }
.simple-keyboard .hg-row { .hg-theme-default .hg-button span {
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 {
pointer-events: none; pointer-events: none;
} }
/** /* When using option "useButtonTag" */
* hg-theme-default theme .hg-theme-default button.hg-button {
*/ border-width: 0;
.simple-keyboard.hg-theme-default { 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); background-color: rgba(0, 0, 0, 0.1);
padding: 5px; padding: 5px;
border-radius: 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); box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);
height: 40px; height: 40px;
border-radius: 5px; border-radius: 5px;
@ -72,18 +74,11 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -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; background: #efefef;
} }
/* When using option "useButtonTag" */ .hg-theme-default.hg-layout-numeric .hg-button {
.simple-keyboard button.hg-button {
border-width: 0;
outline: 0;
font-size: inherit;
}
.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
width: 33.3%; width: 33.3%;
height: 60px; height: 60px;
align-items: center; align-items: center;
@ -91,35 +86,35 @@ html {
justify-content: center; justify-content: center;
} }
.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd { .hg-theme-default .hg-button.hg-button-numpadadd {
height: 85px; height: 85px;
} }
.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter { .hg-theme-default .hg-button.hg-button-numpadenter {
height: 85px; height: 85px;
} }
.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 { .hg-theme-default .hg-button.hg-button-numpad0 {
width: 105px; width: 105px;
} }
.simple-keyboard.hg-theme-default .hg-button.hg-button-com { .hg-theme-default .hg-button.hg-button-com {
max-width: 85px; 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; 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); background: rgba(5, 25, 70, 0.53);
color: white; 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; 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; max-width: 60px;
} }