Skip to content
Snippets Groups Projects
Commit e3f19e13 authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Add a focus effekt

parent 2238124c
Branches
No related tags found
No related merge requests found
Pipeline #73319 failed
......@@ -535,6 +535,11 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
padding-right: 20px;
}
header .hd1-left #lang-select{
margin: auto;
margin-right: 0px;
}
header .hd1-middle {
grid-area: hd1-middle;
background-color: var(--dbp-text-dark);
......@@ -861,7 +866,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
<header>
<slot name="header">
<div class="hd1-left">
<dbp-language-select lang="${this.lang}"></dbp-language-select>
<dbp-language-select id="lang-select" lang="${this.lang}"></dbp-language-select>
</div>
<div class="hd1-middle">
</div>
......
......@@ -98,6 +98,18 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
color: currentColor;
cursor: pointer;
text-decoration: none;
display: block;
}
input::-moz-focus-inner { border: 0; }
:focus-visible{
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: 0px 0px 9px 2px var(--dbp-accent-dark);
}
.dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu {
......@@ -137,6 +149,10 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
font-size: 0.875rem;
line-height: 1.5;
padding: 0.375rem 1rem;
margin-left: 0.5em;
margin-right: 0.5em;
padding-left: 0.5em;
padding-right: 0.5em;
position: relative;
}
......
......@@ -54,7 +54,11 @@ export class TUGrazLogo extends AdapterLitElement {
overflow: visible;
}
a:hover path, a:focus path {
a{
display:block;
}
a:focus path {
fill:#000 !important;
transition:none;
}
......
......@@ -117,6 +117,17 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
font-family: inherit;
}
input::-moz-focus-inner { border: 0; }
:focus-visible{
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: 0px 0px 9px 2px var(--dbp-accent-dark);
}
.control {
box-sizing: border-box;
clear: both;
......@@ -425,6 +436,7 @@ export function getButtonCSS() {
text-align: center;
white-space: nowrap;
font-size: inherit;
font-weight: bolder;
font-family: inherit;
transition: background-color 0.15s ease 0s, color 0.15s ease 0s;
background: none;
......@@ -469,6 +481,15 @@ export function getButtonCSS() {
opacity: .4;
cursor: not-allowed;
}
button:focus-visible{
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: 0px 0px 9px 2px var(--dbp-accent-dark);
}
`;
}
......@@ -579,6 +600,16 @@ export function getRadioAndCheckboxCss() {
border-width: 0 2px 2px 0;
}
.button-container input[type="checkbox"]:focus-visible ~ .checkmark{
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: 0px 0px 9px 2px var(--dbp-accent-dark);
}
.button-container input[type="checkbox"]:disabled ~ .checkmark {
border-color: var(--dbp-text-muted-light);
background-color: var(--dbp-text-muted-light);
......
......@@ -78,8 +78,8 @@ export class LanguageSelect extends AdapterLitElement {
static get styles() {
// language=css
return [commonStyles.getThemeCSS(),
css`
return css`
${commonStyles.getThemeCSS()}
:host {
display: inline-block;
}
......@@ -91,8 +91,20 @@ export class LanguageSelect extends AdapterLitElement {
transition: background-color 0.15s, color 0.15s;
color: var(--dbp-text-dark);
}
input::-moz-focus-inner { border: 0; }
:focus-visible{
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: 0px 0px 9px 2px var(--dbp-accent-dark);
}
`
];
;
}
onClick(e) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment