fix: mode toggle not outlined when receiving keyboard focus (#1690)
The Tab key focus
This commit is contained in:
parent
015d5670a1
commit
cd37f63a01
2 changed files with 5 additions and 5 deletions
|
@ -44,7 +44,7 @@
|
||||||
|
|
||||||
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
|
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
|
||||||
{% unless site.theme_mode %}
|
{% unless site.theme_mode %}
|
||||||
<button type="button" class="btn" aria-label="Switch Mode" id="mode-toggle">
|
<button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
|
||||||
<i class="fas fa-adjust"></i>
|
<i class="fas fa-adjust"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
|
@ -823,7 +823,10 @@ $btn-mb: 0.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-shadow: var(--sidebar-border-color) 0 0 0 1px;
|
|
||||||
|
&:not(:focus-visible) {
|
||||||
|
box-shadow: var(--sidebar-border-color) 0 0 0 1px;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--sidebar-hover-bg);
|
background-color: var(--sidebar-hover-bg);
|
||||||
|
@ -845,9 +848,6 @@ $btn-mb: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mode-toggle {
|
#mode-toggle {
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
@extend %button;
|
@extend %button;
|
||||||
@extend %sidebar-links;
|
@extend %sidebar-links;
|
||||||
@extend %sidebar-link-hover;
|
@extend %sidebar-link-hover;
|
||||||
|
|
Loading…
Reference in a new issue