@atlassian/aui/src/less/aui-focus.less

Atlassian User Interface library

@import (reference) './imports/aui-theme/core/colors';
@import (reference) './imports/aui-theme/core/borders';
@import (reference) './imports/mixins/focus';

// Get rid of the outline style on <button> and <input> elements in Firefox.
// This doesn't have to be in our general mixin, since it only affects those two elements.
// See http://wtfhtmlcss.com/#buttons-firefox-outline.
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
}

// Affect browser's focussed-element outline colour
:focus {
    // NOTE: these are all separate because Legacy Edge does not respect the CSS var in the multivalued `outline` prop.
    outline-width: 2px;
    outline-style: solid;
    outline-color: @aui-focus-ring-color;
    outline-offset: 1px;
    // only affects Firefox, but... hey, maybe one day other browsers will support it, too!
    -moz-outline-radius: @aui-border-radius-small;
    outline-radius: @aui-border-radius-small;
}

// Remove default focus styles for mouse users ONLY if
// :focus-visible is supported on this platform.
html:not(.aui-no-focusvisible) :focus:not(:focus-visible) {
    outline: unset;
    outline-offset: unset;
}

// Affect the potential CSS standard pseudo-selector
html:not(.aui-no-focusvisible) :focus-visible {
    #aui.with-focus-ring();
}