From c692d2ffea795426fbc1790d701bf9d3d7871cae Mon Sep 17 00:00:00 2001
From: Claas Kazzer <kazzer@ub.uni-leipzig.de>
Date: Fri, 16 Dec 2022 16:26:35 +0100
Subject: [PATCH] refs #22646 [finc] Corrects reset filters focus tabbing
* removes styles from containing element
* sets styles for anchor contained within
* Reset filters: unsets focus on outer elements, clarifies dropdown
* active filters revision
* streamlines scss
---
themes/finc/scss/_customVariables.scss | 4 +-
.../components/_header-active-filters.scss | 87 ++++++++++---------
2 files changed, 47 insertions(+), 44 deletions(-)
diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss
index 7cbf663f4dd..29aefe2da29 100644
--- a/themes/finc/scss/_customVariables.scss
+++ b/themes/finc/scss/_customVariables.scss
@@ -853,7 +853,7 @@ $search-filters-margin-bottom: 4px !default;
$search-filters-padding: .5rem 5px !default;
-$search-filter-remove-button-vertical-align: top !default;
+$search-filter-remove-button-vertical-align: middle !default;
$search-filter-remove-button-text-display: inline-block !default;
$search-filter-remove-button-text-max-width: 200px !default;
$search-filter-remove-button-text-overflow: hidden !default;
@@ -861,7 +861,9 @@ $search-filter-remove-button-text-text-overflow: ellipsis !default;
$search-filter-remove-button-text-white-space: nowrap !default;
$search-filter-remove-icon: '\f00d' !default;
+$search-filter-remove-icon-display: inline-block !default;
$search-filter-remove-icon-hover-color: $red !default;
+$search-filter-remove-icon-top-margin: -2px !default;
$search-filter-remove-icon-vertical-align: top !default;
$search-filter-remove-icon-in-dropdown-distance-from-right: 1rem !default;
$search-filter-remove-icon-in-dropdown-padding: 0 !default;
diff --git a/themes/finc/scss/components/_header-active-filters.scss b/themes/finc/scss/components/_header-active-filters.scss
index 91433495e65..c60fcb6286a 100644
--- a/themes/finc/scss/components/_header-active-filters.scss
+++ b/themes/finc/scss/components/_header-active-filters.scss
@@ -16,8 +16,8 @@
// set general text decoration on filters
.filters {
- & button,
- & a {
+ button,
+ a {
text-decoration: $search-filter-text-decoration;
}
}
@@ -31,24 +31,43 @@
// Outer container for all individual filters
.filters {
padding-left: $active-filters-outer-filters-container-padding-left;
- }
- // Individual filters' outer container
- // Make this the same height as .reset-filters-btn and other navigation elements
- // for better usability - keep '.filters' for specifity (overwriting BS3)
- .filters .filter-value {
- // the background filter value in BS3 is '$list-group-active-bg'
- background: $search-filter-values-remove-bg;
- height: $navigation-element-default-height;
- margin-bottom: $search-filters-margin-bottom;
- padding: $search-filters-padding;
-
- &:focus,
- &:hover {
- background: $search-filter-remove-hover-bg;
- color: $search-filter-remove-hover-color;
+ // Individual filters' outer container
+ // Make this the same height as .reset-filters-btn and other navigation elements
+ // for better usability - keep '.filters' for specifity (overwriting BS3)
+
+ // unset BS values for proper focus highlighting of contained anchor
+ .filter-value {
+ background: transparent;
+ margin: 0;
+ padding: 0;
+
+
+ // define styles for contained anchor
+ a {
+ // the background filter value in BS3 is '$list-group-active-bg'
+ background: $search-filter-values-remove-bg;
+ display: inline-block;
+ height: $navigation-element-default-height;
+ margin-bottom: $search-filters-margin-bottom;
+ padding: $search-filters-padding;
+ vertical-align: $search-filter-remove-button-vertical-align;
+
+ &:focus,
+ &:hover {
+ background: $search-filter-remove-hover-bg;
+ color: $search-filter-remove-hover-color;
+ // overwrite outline-offset ('a:focus')
+ outline-offset: 0;
+ }
+ }
}
}
+
+ // keep '.search-filter-dropdown' for specifity to overwrite BS
+ .search-filter-dropdown .dropdown-menu .filter-value a {
+ width: 100%;
+ }
}
@@ -65,16 +84,13 @@
}
-// Set focus and hover styles for individual filter items'
-// outer container ('.filters .filter-value') and filter items ('.search-filter-remove')
-.filters .filter-value,
-.search-filter-remove {
+// Set focus and hover styles for individual filter items' ('.search-filter-remove')
+.search-filter-remove,
+.search-filter-remove:visited, {
color: $search-filter-values-remove-color;
&:focus,
- &:hover,
- &:visited:focus,
- &:visited:hover {
+ &:hover {
// Keep '.active-filters' for specifity to overwrite BS
.active-filters & {
background: $search-filter-remove-hover-bg;
@@ -85,20 +101,7 @@
}
- // Make this same color as un-visited item
- &:visited {
- // Keep '.active-filters' for specifity to overwrite BS
- .active-filters & {
- color: inherit;
- text-decoration: inherit;
- }
- }
-}
-
-// Set color of individual filters when focus is on outer container
-.search-filter-remove,
-.search-filter-remove:visited {
-
+ // Set color of the individual filters when FOCUS is ON OUTER container
.filters .filter-value:focus &,
.filters .filter-value:hover & {
background: $search-filter-remove-hover-bg;
@@ -110,13 +113,9 @@
color: $search-filter-remove-icon-hover-color;
}
}
-}
-// This is the colored, button-like element with the 'x' icon
-.search-filter-remove {
- // Align with text inside the element
- vertical-align: $search-filter-remove-button-vertical-align;
+ // This is the colored, button-like element with the 'x' icon
.text {
// Create ellipsis for overlong filter text
display: $search-filter-remove-button-text-display;
@@ -130,6 +129,8 @@
// Set icon content
&::after {
content: $search-filter-remove-icon;
+ display: $search-filter-remove-icon-display;
+ margin-top: $search-filter-remove-icon-top-margin;
vertical-align: $search-filter-remove-icon-vertical-align;
// Move 'x' to the right of the buttons in dropdown
--
GitLab