Вопрос по умолчанию Mixins focus

Поддержка
1

Здравствуйте,

В последнем обновлении стиля фокуса интерфейса появился новый миксин, который добавляет обводку для полей ввода, элементов выбора и других компонентов. Это отлично для доступности, но у нас используется border-radius: 4px для полей ввода. Возможно ли переопределить миксины или добавить border-radius: 0 в основной файл mixins.scss, чтобы при фокусе значение border-radius менялось с 4px на 0?

Слева показано текущее состояние, справа — после применения border-radius: 0 :arrow_down:

Screenshot 2021-02-04 at 15.22.25
Screenshot 2021-02-04 at 15.22.25143×131 1.53 KB
Screenshot 2021-02-04 at 15.22.45
Screenshot 2021-02-04 at 15.22.45151×130 1.29 KB

Спасибо! :slight_smile:

@mixin default-focus() {
  border-color: var(--tertiary);
+ border-radius: 0;
  outline: 1px solid var(--tertiary);
  outline-offset: 0;
}
4

У нас есть внутренняя тема со скруглёнными углами кнопок, и я не вижу у вас подобной проблемы. Не могли бы вы предоставить немного больше контекста, например, более крупный скриншот, чтобы я мог понять, о какой именно кнопке идёт речь? Дайте знать, если вы используете публичную тему — я уверен, что это можно исправить.

6

А, понятно. Думаю, лучший вариант — решить это в вашей теме, поскольку в ядре для всех элементов ввода уже установлено значение границы (border) равным 0:

https://github.com/discourse/discourse/blob/master/app/assets/stylesheets/common/base/discourse.scss#L228-L228

Поэтому в вашей теме вы можете переопределить свойство border-radius для элемента ввода в состоянии фокуса в том же месте, где вы сейчас устанавливаете его значение.

Если вы хотите сохранить скруглённые углы при фокусе, можно сделать вот так:

input {
  border-radius: 4px;
  &:focus {
    outline: none;
    box-shadow: 0px 0px 0px 1px var(--tertiary);
  }
}

(Свойство outline не поддерживает скруглённые углы, поэтому в примере выше оно заменяется на тень с жёсткими краями.)

7

Спасибо большое! :slight_smile: Я это сделаю. Ещё один вопрос… Не является ли это плохой практикой, если я отключу контур? Имею в виду по соображениям доступности.

8

Я думаю, что это допустимо, учитывая, что для стилизации элемента в фокусе вы будете использовать что-то другое.