CSS: Fixed floating search icon on mobile

Also updated styles to use logical elements instead of conditional rules
for altered search boxes.
Related to #2504

diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index a6f890e3cc4778db3304d3c3b851f3986be6f362..67df4171499f841407d927e05e443346a0df762d 100644 (file)
--- a/resources/sass/_forms.scss
+++ b/resources/sass/_forms.scss
@@ -441,12 +441,8 @@ input[type=color] {
     padding: 0;
     cursor: pointer;
     position: absolute;
-    left: 8px;
-    top: 9px;
-    @include rtl {
-      right: 8px;
-      left: auto;
-    }
+    inset-inline-start: 8px;
+    top: 10px;
   }
   input {
     display: block;

diff --git a/resources/views/search/all.blade.php b/resources/views/search/all.blade.php
index 64325d4c1bf08cee9efac6da8329cc7b9633a3c0..2d410dbd1b000d9e435b971b6f1d2b4bd6fe6e74 100644 (file)
--- a/resources/views/search/all.blade.php
+++ b/resources/views/search/all.blade.php
@@ -79,7 +79,9 @@
 
                     <form action="{{ url('/search') }}" method="GET"  class="search-box flexible hide-over-l">
                         <input value="{{$searchTerm}}" type="text" name="term" placeholder="{{ trans('common.search') }}">
-                        <button type="submit">@icon('search')</button>
+                        <button type="submit"
+                                aria-label="{{ trans('common.search') }}"
+                                tabindex="-1">@icon('search')</button>
                     </form>
 
                     <h6 class="text-muted">{{ trans_choice('entities.search_total_results_found', $totalResults, ['count' => $totalResults]) }}</h6>