jk-keyboard.css

.jk-keyboard {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 0;
  opacity: 0.2;
  transition: 0.3s all ease-in-out;
  -webkit-transform: translate3d(0, 120%, 0);
  transform: translate3d(0, 120%, 0); }
  .jk-keyboard.open {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }

.jk-key {
  font-size: 24px;
  font-family: sans-serif;
  color: #000;
  display: block;
  text-align: center;
  position: absolute;
  width: 25vw;
  border: 1px solid #dedfe2;
  margin: -1px;
  background-color: #fafafb; }
  .jk-key.submit {
    color: #fff;
    background-color: #06bf04; }
    .jk-key.submit.disabled {
      color: #beeabe;
      background-color: #64d364; }
  .jk-key.jk-text {
    font-size: 22px; }
  .jk-key.down {
    background-color: #ededed; }
  .jk-key.jk-left-0 {
    left: 0%; }
  .jk-key.jk-left-1 {
    left: 25%; }
  .jk-key.jk-left-2 {
    left: 50%; }
  .jk-key.jk-left-3 {
    left: 75%; }
  .jk-key.jk-top-0 {
    top: 0%; }
  .jk-key.jk-top-1 {
    top: 25%; }
  .jk-key.jk-top-2 {
    top: 50%; }
  .jk-key.jk-top-3 {
    top: 75%; }

.jk-keyboard {
  height: 40vh; }

.jk-key {
  height: 10vh;
  line-height: 10vh; }
  .jk-key.jk-height-0 {
    height: 10vh;
    line-height: 10vh; }
  .jk-key.jk-height-1 {
    height: 20vh;
    line-height: 20vh; }
  .jk-key.jk-height-2 {
    height: 30vh;
    line-height: 30vh; }
  .jk-key.jk-height-3 {
    height: 40vh;
    line-height: 40vh; }