Изменить целевой цвет фона перехода кнопок в начальной загрузке 4 - PullRequest
Новая
       36

Изменить целевой цвет фона перехода кнопок в начальной загрузке 4

0 голосов
/ 03 января 2019

Я хочу изменить поведение кнопки при наведении на нее курсора мыши.По умолчанию фон кнопок становится темнее при наведении на них курсора.Я хотел изменить это поведение, изменив переменные в файле _variables.scss в источнике начальной загрузки.Но единственная переменная, которую я смог найти по этому вопросу, была:

$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

, но я не мог выяснить, к каким переменным относится этот переход?Можно ли как-то изменить целевой цвет фона этого перехода?

1 Ответ

0 голосов
/ 03 января 2019

Var btn-transition не определяет цвет background-color. Он определяет CSS-свойства перехода . Это свойства, которые анимируются во время перехода.

Вы ищете button-variant @mixin. Посмотрите на параметры для mixin: 

button-variant(
  $background,
  $border,
  $hover-background: darken($background, 7.5%), 
  $hover-border: darken($border, 10%), 
  $active-background: darken($background, 10%), 
  $active-border: darken($border, 12.5%)
) { .. }

Как видите, $background и $border - обязательные параметры. Все остальные параметры необязательны. Таким образом, вы бы изменили цвета кнопки, изменив эти необязательные параметры. Например, здесь я делаю $hover-background 30% темнее (переопределяя значение по умолчанию на 7,5% темнее) ... 

@each $color, $value in $theme-colors{
  .btn-#{$color} {
    @include button-variant($value, $value, darken($value,30%), darken($value,10%), darken($value,10%), darken($value,12.5%));
  }
}

Демо: https://www.codeply.com/go/ybbHC4JUZN

Вы можете изменить параметры при необходимости.

...