Skip to content

Commit

Permalink
Merge pull request #2079 from coveo/fix-ADUI-7311-firefox-focus
Browse files Browse the repository at this point in the history
fix(focus): override outline for Firefox
GermainBergeron authored Jul 14, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 7155052 + 81d32dc commit 9908c41
Showing 4 changed files with 33 additions and 3 deletions.
16 changes: 15 additions & 1 deletion packages/vapor/scss/controls/numeric-input.scss
Original file line number Diff line number Diff line change
@@ -19,6 +19,10 @@ $numeric-input-buttons-border-radius: 4px;
border: $default-border;
border-radius: $border-radius;
box-shadow: inset 0 0 3px 0 rgba(var(--black-rgb), $transparency-5);

&:focus {
@include focus-border(0);
}
}

button {
@@ -41,7 +45,17 @@ $numeric-input-buttons-border-radius: 4px;
}

&:focus {
@include focus-border(2px);
@include focus-border(0);
}
}
}
// override the style of the focus for numeric inputs in Firefox
@supports (-moz-appearance: none) {
.numeric-input {
input:focus,
button:focus {
outline-style: solid;
outline-offset: -2px;
}
}
}
9 changes: 8 additions & 1 deletion packages/vapor/scss/elements/btn.scss
Original file line number Diff line number Diff line change
@@ -44,7 +44,6 @@
color: var(--navy-blue-80);
text-decoration: none;
background-color: var(--white);
outline-color: var(--bright-turquoise-40);
}

&:hover {
@@ -285,3 +284,11 @@ button {
color: var(--rain-forest-green-30);
}
}

// override the style of the focus for buttons in Firefox
@supports (-moz-appearance: none) {
.btn:focus {
outline-style: solid;
outline-offset: -2px;
}
}
7 changes: 7 additions & 0 deletions packages/vapor/scss/elements/links.scss
Original file line number Diff line number Diff line change
@@ -55,3 +55,10 @@ a {
text-decoration: underline;
}
}

// override the style of the focus for links in Firefox
@supports (-moz-appearance: none) {
.link:focus {
outline-style: solid;
}
}
4 changes: 3 additions & 1 deletion packages/vapor/scss/helpers.scss
Original file line number Diff line number Diff line change
@@ -17,6 +17,8 @@ $browser-context: 13; // Default
}

@mixin focus-border($offset) {
outline: 2px auto var(--digital-blue-20);
outline-width: 2px;
outline-style: auto;
outline-color: var(--bright-turquoise-40);
outline-offset: $offset;
}

0 comments on commit 9908c41

Please sign in to comment.