SASS: Entrada de texto no permitiendo botón de estilo

votos
0

Así que tengo un botón de búsqueda cuyo estilo se debe cambiar cuando el usuario entra en la entrada como el número de pedido y dirección de correo electrónico, pero eso no sucede.

Soy incapaz de identificar con éxito, a través de la consola donde reside el problema. En la versión dev, funciona con éxito y lleva en este estilo:

@import '../global/style_elements.scss';
@import '../global/constants.scss';
@import '../global/fonts.scss';

button {
  font-family: $font-family;
}

.saved-for-later .submit-button,
.address-modal .submit-button,
.lookup-modal .submit-button,
.payment-modal .submit-button,
.payment-select-modal .submit-button,
.subscription-modal .submit-button,
.checkout-step .right-col a.next-step-btn,
.link-btn,
.checkout-modal a,
.checkout-modal .submit-button {
  font-size: 1em;
  line-height: 1.31;
  letter-spacing: 0.4px;
  @include font-bold;
  text-transform: capitalize;
  display: block;
  // Fix for 1px shifting bug in Chrome:
  // https://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
  transform: translateZ(0);
}

.checkout-step .right-col a:not(.next-step-btn .v-
) {
  @include bottom-border-link;
}

.link-btn {
  display: inline;
  &:focus {
    outline: -webkit-focus-ring-color auto 5px;
  }
}

.saved-for-later .submit-button,
.address-modal .submit-button,
.lookup-modal .submit-button,
.payment-modal .submit-button,
.payment-select-modal .submit-button,
.subscription-modal .submit-button,
.checkout-step .right-col .next-step-btn,
.link-btn,
.checkout-modal a,
.checkout-modal .submit-button {
  transition: opacity 0.3s ease;
  background-color: $base-button-color;
  color: $base-font-inverted-color;
  text-align: center;
  padding: 15px;
  border: 0;
  border-radius: $border-radius-default;
  cursor: pointer;
  opacity: 1;

  &:not([disabled]):hover {
    opacity: 0.7;
  }

  &[disabled] {
    background-color: $lighter-gray;
    cursor: default;
  }

  &:hover {
    outline: 0;
  }

  &:focus {
    outline-offset: 1px;
  }

  &:-moz-focusring {
    outline-color: black;
  }
}

Por lo que debe ser habilitante cuando la persona entra en sus credenciales, pero eso no está sucediendo y yo soy claro por qué.

Esta es una aplicación Reaccionar-Redux.

¿Alguien podría proporcionar algunas herramientas de depuración para identificar cuál es el problema podría ser?

Publicado el 19/09/2018 a las 17:11
fuente por usuario
En otros idiomas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more