[mod] Added stylised outline
This commit removes all outline: none, as this makes keyboard navigation near impossible Instead, a mixin and element rules are used to style the outline
This commit is contained in:
parent
583007fd04
commit
6a609b632a
@ -38,3 +38,11 @@
|
|||||||
color: var(--color-btn-font);
|
color: var(--color-btn-font);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.focus-outline (@zIndex: 5000, @color: var(--color-base-font)) {
|
||||||
|
&:focus {
|
||||||
|
outline: 1.5px solid @color;
|
||||||
|
outline-offset: 3px;
|
||||||
|
z-index: @zIndex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -77,7 +77,6 @@ table {
|
|||||||
|
|
||||||
select:focus,
|
select:focus,
|
||||||
input:focus {
|
input:focus {
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 1px 1px var(--color-btn-background);
|
box-shadow: 0 0 1px 1px var(--color-btn-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -157,7 +157,7 @@ button.category_button {
|
|||||||
padding: 0.8rem 0.2rem;
|
padding: 0.8rem 0.2rem;
|
||||||
background: none repeat scroll 0 0 var(--color-search-background);
|
background: none repeat scroll 0 0 var(--color-search-background);
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
.focus-outline;
|
||||||
color: var(--color-search-font);
|
color: var(--color-search-font);
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
@ -182,7 +182,7 @@ html.no-js #clear_search.hide_if_nojs {
|
|||||||
padding: 0.8rem;
|
padding: 0.8rem;
|
||||||
background: none repeat scroll 0 0 var(--color-search-background);
|
background: none repeat scroll 0 0 var(--color-search-background);
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
.focus-outline;
|
||||||
color: var(--color-search-font);
|
color: var(--color-search-font);
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
@ -173,6 +173,13 @@ article[data-vim-selected].category-social {
|
|||||||
.rounded-corners;
|
.rounded-corners;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
.focus-outline;
|
||||||
|
}
|
||||||
|
|
||||||
.result {
|
.result {
|
||||||
margin: @results-margin 0;
|
margin: @results-margin 0;
|
||||||
padding: @result-padding;
|
padding: @result-padding;
|
||||||
@ -199,7 +206,6 @@ article[data-vim-selected].category-social {
|
|||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -467,7 +473,6 @@ article[data-vim-selected].category-social {
|
|||||||
|
|
||||||
& > a {
|
& > a {
|
||||||
position: relative;
|
position: relative;
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
@ -366,7 +366,6 @@ select {
|
|||||||
background-size: 2rem;
|
background-size: 2rem;
|
||||||
background-origin: content-box;
|
background-origin: content-box;
|
||||||
background-color: var(--color-toolkit-select-background);
|
background-color: var(--color-toolkit-select-background);
|
||||||
outline: medium none;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
.rounded-corners-tiny;
|
.rounded-corners-tiny;
|
||||||
|
|
||||||
@ -412,12 +411,6 @@ input.checkbox-onoff[type="checkbox"] {
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
/* focus & hover */
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus::after {
|
&:focus::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user