From e3f19e134a6753c4fa18b6ff4ec313b7e976d04e Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 14 Dec 2021 12:38:46 +0100
Subject: [PATCH] Add a focus effekt
---
packages/app-shell/src/app-shell.js | 7 ++++-
packages/app-shell/src/auth-menu-button.js | 18 ++++++++++-
packages/app-shell/src/tugraz-logo.js | 6 +++-
packages/common/styles.js | 31 +++++++++++++++++++
.../language-select/src/language-select.js | 18 +++++++++--
5 files changed, 74 insertions(+), 6 deletions(-)
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index e5bce3cc..2056752e 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -534,6 +534,11 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
text-align: right;
padding-right: 20px;
}
+
+ header .hd1-left #lang-select{
+ margin: auto;
+ margin-right: 0px;
+ }
header .hd1-middle {
grid-area: hd1-middle;
@@ -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>
diff --git a/packages/app-shell/src/auth-menu-button.js b/packages/app-shell/src/auth-menu-button.js
index febfa533..6c70a327 100644
--- a/packages/app-shell/src/auth-menu-button.js
+++ b/packages/app-shell/src/auth-menu-button.js
@@ -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 {
@@ -130,13 +142,17 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
}
.menu a.selected { color: var(--dbp-text-light); background-color: var(--dbp-secondary-dark); }
-
+
.dropdown-item {
color: var(--dbp-text-muted-dark);
display: block;
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;
}
diff --git a/packages/app-shell/src/tugraz-logo.js b/packages/app-shell/src/tugraz-logo.js
index cf693813..70958e29 100644
--- a/packages/app-shell/src/tugraz-logo.js
+++ b/packages/app-shell/src/tugraz-logo.js
@@ -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;
}
diff --git a/packages/common/styles.js b/packages/common/styles.js
index 0b30d6ca..cb4f31d4 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -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);
+ }
`;
}
@@ -578,6 +599,16 @@ export function getRadioAndCheckboxCss() {
border-right: var(--dbp-border-dark);
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);
diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js
index d8ee2904..11332682 100644
--- a/packages/language-select/src/language-select.js
+++ b/packages/language-select/src/language-select.js
@@ -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) {
--
GitLab