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

Add a focus effekt

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