Привет!
Сегодня я изучал возможность создания pull request для добавления настройки, позволяющей отключать эффект нажатия на кнопки. Лично я считаю, что это выглядит довольно плохо, но наверняка есть люди, которым это нравится.
Я не думаю, что команда планирует полностью убрать этот эффект, поэтому я планировал изучить возможность добавления настройки сайта, а затем использовать её в SCSS-файле кнопок .
Мне кажется, что нет простого файла, где можно просто создать настройку и присвоить ей свойство. Так ли это? Если нет, то как мне это сделать и как затем использовать это в SCSS-файле?
Спасибо за любую помощь!
Falco
24.Июль.2022 04:17:32
2
Разве это нельзя переопределить через компонент темы?
Кажется, я забыл про компоненты для этой конкретной проблемы, ха-ха.
Но в будущем возможно ли создать настройки? Я сейчас исправлю проблему на своей стороне.
РЕДАКТИРОВАНИЕ: Только что попробовал исправить это на своей стороне, но не сработало.
Don
24.Июль.2022 08:47:44
4
Здравствуйте,
Если я правильно понимаю, вы хотите изменить состояние :active этой кнопки.
Для перехода цвета существует миксин linear-gradient.
//noinspection CssOptimizeSimilarProperties
@mixin linear-gradient($start-color, $end-color) {
background-color: $start-color;
background-image: linear-gradient(to bottom, $start-color, $end-color);
}
linear-gradient используется, когда кнопка находится в активном состоянии. Как вы можете увидеть в файле buttons.css:
Весь этот блок представляет собой миксин кнопки по умолчанию.
@mixin btn(
$text-color: var(--primary),
$bg-color: var(--primary-low),
$icon-color: var(--primary-high),
$hover-text-color: var(--secondary),
$hover-bg-color: var(--primary-medium),
$hover-icon-color: var(--primary-low)
) {
@include form-item-sizing;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
font-weight: normal;
color: $text-color;
background: $bg-color;
cursor: pointer;
transition: all 0.25s;
.d-icon {
color: $icon-color;
show original
А переменные цветов меняются только для других кнопок, таких как .btn-primary и ниже:
.btn-primary {
@include btn(
$text-color: var(--secondary),
$bg-color: var(--tertiary),
$icon-color: var(--secondary),
$hover-bg-color: var(--tertiary-hover),
$hover-icon-color: var(--secondary)
);
}
Таким образом, вы можете переопределить вывод миксина linear-gradient, указав классы active.
Что-то вроде этого должно сработать.
Мы должны указывать классы типов кнопок, так как переменные цветов различаются, поэтому мы не можем применять это глобально.
// Кнопка по умолчанию
.btn {
&:active,
&.btn-active {
background-image: none;
border-bottom-color: transparent;
background-color: var(--primary-medium);
}
// Основная кнопка
&.btn-primary {
&:active,
&.btn-active {
background-color: var(--tertiary-hover);
}
}
// Кнопка Danger и ✘
&.btn-danger,
&.cancel {
&:active,
&.btn-active {
background-color: var(--danger-hover);
}
}
// Кнопка ✔
&.ok {
&:active,
&.btn-active {
background-color: var(--success-hover);
}
}
}
До
После
