@adactive/arc-keyboard/src/adsumKeyboard.less

Adsum Keyboard Component

@import "../../adsum-utils/less/colors-default";

.templateKeyboard {
  button.key {
    margin-top: 8px;
    margin-left: 3px;
  }

  .backspace-icon {
    background-size: 25px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .shift-icon {
    display:none !important;
    width: 76px !important;
    background-size: 25px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .spaceBar {
    width: 495.32px !important;
  }

  .spaceBar-short {
    width: 386px !important;
  }

  .zeroKey {
    width: 124px !important;
  }

  .invisible{
    opacity: 0 !important;
  }
}

@keyframes dropIn {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes activeKey {
  0% {
    background-color: white;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: white;
  }
}

@media (orientation: landscape) {
  .templateKeyboard {
    width: 100%;
    z-index: 99;
    position: relative;
    display: inline-block;
    padding: 20px 0;

    &.active {
      display: block;
    }

    .keyboard {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: flex-start;
      resize: both;
      padding: 1% 0.5%;

      .layout {
        pointer-events: none;
        opacity: 0;
        -webkit-transition: opacity 0.2s;
        transition: opacity 0.2s;
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
        position: absolute;

        &.active {
          opacity: 1;
          pointer-events: auto;
          -webkit-transition: opacity 0.2s;
          transition: opacity 0.2s;
          -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
        }
      }

      .keyboardLine {
        align-items: stretch;
        display: flex;
        flex-grow: 1;
        justify-content: center;
        text-align: center;
        outline: none;
        padding: 5px;

        .backspace-icon {
          background-image: url('./assets/img/keyboard/white-backspaceKey.png');
        }

        .shift-icon {
          background-image: url('./assets/img/keyboard/shiftKey.png');
        }
      }

      button {
        background: @white;
        border: none;
        color: @secondary-color;
        cursor: pointer;
        padding: 0;
        outline: none;
        width: 58px;
        height: 54px;
        font-size: 1.2em;
        border-radius: 5px;
        font-weight: lighter;
        text-transform: uppercase;
        margin: 4px;
        box-shadow: @passive-tertiary-shadow 5px 5px 0;

        &.disabled {
          color: #5C5C5C !important;
        }

        &.active, &:active {
          background: white;
          color: #4B5051;
          animation: bounceIn 0.5s 1;
        }

        &.wide {
          flex-grow: 1.5;
        }

        &.wider {
          flex-grow: 2;
        }

        &.widest {
          flex-grow: 2.5;
        }

        &.short {

        }

        &.keyIcon {
          background: @secondary-color;
          color: @white;
        }
      }
    }

    &.lightgrey {
      .keyboard {
        button {
          background: #c8c8cb;
          color: #000;
        }
      }
    }
  }
}

@media (orientation: portrait) {
  .templateKeyboard {
    width: 100%;
    z-index: 99;
    position: relative;
    display: inline-block;
    padding: 20px 0;

    &.active {
      display: block;
    }

    .keyboard {
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      resize: both;
      padding: 1% 0.5%;

      .layout {
        pointer-events: none;
        opacity: 0;
        -webkit-transition: opacity 0.2s;
        transition: opacity 0.2s;
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
        position: absolute;

        &.active {
          opacity: 1;
          pointer-events: auto;
          -webkit-transition: opacity 0.2s;
          transition: opacity 0.2s;
          -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
        }
      }

      .keyboardLine {
        align-items: stretch;
        display: flex;
        flex-grow: 1;
        justify-content: center;
        text-align: center;
        outline: none;
        padding: 5px 0px;

        .backspace-icon {
          background-image: url('./assets/img/keyboard/white-backspaceKey.png');
        }

        .shift-icon {
          background-image: url('./assets/img/keyboard/shiftKey.png');
        }
      }

      button {
        background: @white;
        border: none;
        color: @secondary-color;
        cursor: pointer;
        padding: 0;
        outline: none;
        width: 58px;
        height: 54px;
        font-size: 1.2em;
        border-radius: 5px;
        font-weight: lighter;
        text-transform: uppercase;
        margin: 4px;
        box-shadow: @passive-tertiary-shadow 5px 5px 0;

        &.disabled {
          color: #5C5C5C !important;
        }

        &.active, &:active {
          background: white;
          color: #4B5051;
          animation: bounceIn 0.5s 1;
        }

        &.wide {
          flex-grow: 1.5;
        }

        &.wider {
          flex-grow: 2;
        }

        &.widest {
          flex-grow: 2.5;
        }

        &.short {

        }

        &.keyIcon {
          background: @secondary-color;
          color: @white;
        }
      }
    }

    &.lightgrey {
      .keyboard {
        button {
          background: #c8c8cb;
          color: #000;
        }
      }
    }
  }
}