SASS: ввод текста не включает стилизацию кнопок - PullRequest
Новая
       11

SASS: ввод текста не включает стилизацию кнопок

0 голосов
/ 19 сентября 2018

Итак, у меня есть кнопка поиска, стиль которой должен измениться, когда пользователь вводит данные, такие как номер заказа и адрес электронной почты, но этого не происходит.

Я не могу определить успешно через консоль, где находится проблема,В версии для разработчиков он работает успешно и принимает следующий стиль: 

@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;
  }
}

Поэтому он должен быть включен, когда человек вводит свои учетные данные, но этого не происходит, и мне неясно, почему.

Это приложение React-Redux.

Может ли кто-нибудь предоставить некоторые средства отладки, чтобы определить, в чем может быть проблема?

...