Mixins default focus question


The last update uniform focus style has a new mixin which is add an outline the input fields, selections and other… This is a great for accessibility but we use a border-radius: 4px on input fields. Is that possible to override mixins or add a border-radius: 0 into the core mixins.scss and this generate border-radius: 4px to 0 on focus?

On the left it looks like now and right is after border-radius: 0; :arrow_down:

Screenshot 2021-02-04 at 15.22.25 Screenshot 2021-02-04 at 15.22.45

Thank you! :slight_smile:

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

We have an internal theme that has rounded corners for buttons, and I don’t see a similar issue as yours. Can you provide maybe a bit more context, i.e. a larger screenshot so I can see which button this is? Let me know if you are using a public theme, I’m sure this is fixable.


This is not a button. This is the text input fields, dropdowns, textarea etc…The screenshot is the composer category selector. But we use border-radius: 4px; on all input fields. :slight_smile: We use modern fakebook theme. You can see it on https://vaperina.cc.

1 Like

Ah, I see. I think your best bet is to handle this in your theme, because core already has the border set to 0 for all input elements:


So, in your theme, what you can do is override the focused input element’s border-radius in the same place where you are now setting it to a value.

If you want to keep the rounded corners on focus, you could also do something like this:

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

(The outline property cannot have rounded corners, so the above switches to using a solid shadow to replace it.)


Thank you so much! :slight_smile: I will do this. One more question… Is that not a bad practice if i disable the outline? I mean the accessibility reason.

I think it’s OK given that you would be using something else to style the element in focus.


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.