acciones.component.scss 1.84 KB
.acciones-mobile {
  line-height: 0.5em;
  color: orange;
  font-size: 1.25em
}

.botonera-lateral {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 402px;
  &.teclado{
      top: 449px;
      z-index: 100000;
  }
  .row{
      margin: 0 !important;
      pointer-events: none;
  }

  .container{
      @media (min-width: 768px){
          display: grid !important;
      }
  }

  button{
      pointer-events: all;
      background-color: #DDD;
  }

  .teclado-activar {
      background-color: #17d236 !important;
      color: #FFF !important;
  }
  div[ladda]{
      background-color: #DDD;
  }

  button, .btn-group-toggle{
      background-color: #DDD;
      color: #000;
      text-transform: uppercase;
      min-width: 109px;
      &:hover{
          color: #FFF;
          .boton-activar-teclado{
              color: #FFF;
          }
          background-color: #000;
      }
  }
  
  
  .btn-group-toggle{
      pointer-events: all;
      &.active{
          background-color: transparent;
          .boton-activar-teclado{
              color: #FFF;
          }
      }
      
      .boton-activar-teclado{
          cursor: pointer;
          color: #000;
          background-color: transparent;
      }

      input{
          display: none;
      }
  }

  .guardado{
      animation:guardado 4s 1;
      -webkit-animation:guardado 4s 1; /* Safari and Chrome */
  }

  @keyframes guardado
  {
      0%      {background:#DDD; color: #000;}
      25%     {background:#28a745; color: #FFF;}
      75%     {background:#28a745; color: #FFF;}
      100%    {background:#DDD; color: #000;}
  }

  @-webkit-keyframes guardado /* Safari and Chrome */
  {
      0%      {background:#DDD; color: #000;}
      25%     {background:#28a745; color: #FFF;}
      75%     {background:#28a745; color: #FFF;}
      100%    {background:#DDD; color: #000;}
  }
}