DDBPRO-20

Deutsche-Digitale-Bibliothek · Jun 17, 2024 · 4da4c27 · 4da4c27
1 parent cadc40c
commit 4da4c27
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 16 deletions.
diff --git a/web/themes/custom/ddbp/src/scss/elements/_form.scss b/web/themes/custom/ddbp/src/scss/elements/_form.scss
@@ -41,6 +41,7 @@ input[type='search'] {
     -webkit-appearance: none;
 }
 
+input[type='name'],
 input[type='email'],
 input[type='number'],
 input[type='password'],
@@ -52,6 +53,7 @@ select {
     @include rsa(height, 50px, 57px);
 }
 
+input[type='name'],
 input[type='email'],
 input[type='password'],
 input[type='search'],
@@ -69,22 +71,30 @@ textarea {
 
     &:focus {
         background: $color-white;
-        border: 1px solid rgba($color-black, 0.42) !important;
-        box-shadow: none;
+        border: 1px solid $color-focus !important;
+        box-shadow: 0 0 20px $color-focus;
         outline: none;
     }
-
-    &:invalid {
-        box-shadow: none;
-    }
-
+
     .form-item--error &, &.error {
         border-color: $color-error;
         background-color: rgba($color-error, 0.1);
         color: $color-error;
     }
 }
 
+input[type='search'] {
+    &:focus {
+        box-shadow: none;
+    }
+
+    @include bp(l) {
+      &:focus {
+        box-shadow: 0 0 20px $color-focus;
+      }
+    }
+}
+
 textarea {
     @include spacing(padding, very-small, top bottom);
     min-height: 250px;
@@ -190,6 +200,14 @@ select {
     input {
         @include spacing(margin, tiny, right);
         @include rsa(margin-top, 2px, 3px);
+
+        &:focus {
+          outline: 1px solid $color-focus;
+        }
+
+        &:focus:not(:focus-visible) {
+          outline: none;
+        }
     }
 
     .description {
@@ -204,6 +222,7 @@ select {
     .form-item-checkbox__label {
         display: inline-flex;
         align-items: flex-start;
+        vertical-align: middle;
     }
 
     #terms_and_conditions-error {

diff --git a/web/themes/custom/ddbp/src/scss/layout/_sidebar.scss b/web/themes/custom/ddbp/src/scss/layout/_sidebar.scss
@@ -31,6 +31,11 @@
     @include bp(l) {
         display: block;
     }
+
+    &:focus,
+    &:focus:not(:focus-visible) {
+      border-left: 6px solid $color-main !important;
+    }
 }
 
 .sidebar__content-menu {

diff --git a/web/themes/custom/ddbp/src/scss/views/_view-header.scss b/web/themes/custom/ddbp/src/scss/views/_view-header.scss
@@ -113,12 +113,6 @@
     overflow: hidden;
     transition: height $duration-medium $easing-default;
 
-    // we can't use :focus style on the button (button shadow can't overflow) so we check if parent is focused
-    &:not(.view-header__link--open):focus-within {
-        border: 1px solid $color-focus !important;
-        box-shadow: 0 0 20px $color-focus;
-    }
-
     &:not(.view-header__link--open):focus-within:has(button:not(:focus-visible)) {
         border: 1px solid $color-darken !important;
         box-shadow: 0 0 0 transparent;
@@ -136,7 +130,29 @@
         font-size: inherit;
         font-weight: font-weight(semi-bold);
         line-height: inherit;
-    }
+
+        &:focus {
+          outline: none;
+          border: none !important;
+          box-shadow: none;
+        }
+
+        &:focus:not(:focus-visible) {
+            border: none !important;
+            box-shadow: none;
+        }
+
+        &:focus > span {
+          outline: none;
+          border: 1px solid $color-focus !important;
+          box-shadow: 0 0 20px $color-focus;
+        }
+
+        &:focus:not(:focus-visible) > span {
+            border: none !important;
+            box-shadow: 0 0 0 transparent;
+        }
+     }
 
     button {
         // arrow

diff --git a/web/themes/custom/ddbp/templates/partials/view-header.html.twig b/web/themes/custom/ddbp/templates/partials/view-header.html.twig
@@ -19,13 +19,13 @@
           <div class="view-header__link-wrapper">
             <div class="view-header__link">
               <button aria-expanded="false" aria-controls="{{ linkUrlText|clean_class }}">
-                {{ linkText }}
+                <span>{{ linkText }}</span>
               </button>
               <div id="{{ linkUrlText|clean_class }}"
                    class="view-header__link-select"
                    aria-hidden="true">
                 <a href="{{ linkUrl }}">
-                  {{ linkUrlText }}
+                  <span>{{ linkUrlText }}</span>
                 </a>
               </div>
             </div>