Mixins default focus question

support
#1

Hello,

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
#4

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.

2 Likes
#5

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.

Screenshot 2021-02-04 at 16.28.53
Screenshot 2021-02-04 at 16.28.53728×309 12.2 KB

1 Like
#6

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.)

4 Likes
#7

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.

#8

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

3 Likes
#9

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