From 8f11c127758eb6ce2758a6cd842f91bd37d4faa6 Mon Sep 17 00:00:00 2001
From: Claas Kazzer <kazzer@uni-leipzig.de>
Date: Thu, 17 Nov 2022 10:54:00 +0100
Subject: [PATCH] refs #22562 [finc] VF 6 New SCSS Variables for more items
---
themes/finc/scss/_customVariables.scss | 11 +++++++++++
.../components/_header-active-filters.scss | 2 ++
themes/finc/scss/components/_pagination.scss | 18 +++++++++++++++++-
themes/finc/scss/components/_sidebar.scss | 6 ++++--
4 files changed, 34 insertions(+), 3 deletions(-)
diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss
index 1d355f789bb..fe67f2cfa78 100644
--- a/themes/finc/scss/_customVariables.scss
+++ b/themes/finc/scss/_customVariables.scss
@@ -834,6 +834,9 @@ $search-filter-text-decoration: none !default;
$search-filter-remove-hover-bg: $search-filter-remove-all-bg !default;
$search-filter-remove-hover-color: $search-filter-remove-all-color !default;
+// Note: the background value in BS3 is '$list-group-active-bg' = '$component-active-bg' = '$brand-primary';
+// we insert new value here to make it overwritable in themes
+$search-filter-values-remove-bg: $brand-primary !default;
$search-filter-values-remove-color: $white !default;
$search-filters-margin-bottom: 4px !default;
@@ -1024,6 +1027,13 @@ $adv-search-links-button-margin-bottom: em(3px) !default;
$pager-margin-bottom: 0 !default;
$pager-margin-top-xs: em(40px) !default;
+$pager-bg: $silver !default;
+$pager-hover-bg: $brand-primary;
+$pager-hover-color: $black;
+$pager-border: $border-default-styles !default;
+$pager-border-radius: 0 !default;
+
+
@@ -1095,6 +1105,7 @@ $sidebar-my-account-danger-success-warning-background: transparent !default;
$sidebar-my-account-danger-success-warning-padding: 0 !default;
// Sidebar item hover effect (doesn't exist in VF out-of-the-box); active is for selected facets
+$sidebar-item-hover-color: $link-hover-color !default;
$sidebar-item-hover-bg: transparentize($brand-secondary, .9) !default;
$sidebar-item-active-hover-bg: transparentize($brand-primary, .1) !default;
diff --git a/themes/finc/scss/components/_header-active-filters.scss b/themes/finc/scss/components/_header-active-filters.scss
index a09485d69e9..91433495e65 100644
--- a/themes/finc/scss/components/_header-active-filters.scss
+++ b/themes/finc/scss/components/_header-active-filters.scss
@@ -37,6 +37,8 @@
// 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;
diff --git a/themes/finc/scss/components/_pagination.scss b/themes/finc/scss/components/_pagination.scss
index db46743ca7c..0458be07084 100644
--- a/themes/finc/scss/components/_pagination.scss
+++ b/themes/finc/scss/components/_pagination.scss
@@ -12,7 +12,7 @@
display: none;
}
-// Fix pagination on XS to display fewer items and remove first and last
+ // Fix pagination on XS to display fewer items and remove first and last
@media (max-width: $screen-xs-max) {
li {
// hide last and first page buttons
@@ -42,5 +42,21 @@
.disabled {
display: none;
}
+
+ li {
+ > a,
+ > span {
+ background-color: $pager-bg;
+ border: 1px solid $pager-border;
+ border-radius: $pager-border-radius;
+ }
+
+ > a:hover,
+ > a:focus {
+ background-color: $pager-hover-bg;
+ color: $pager-hover-color;
+ text-decoration: $btn-text-decoration;
+ }
+ }
}
diff --git a/themes/finc/scss/components/_sidebar.scss b/themes/finc/scss/components/_sidebar.scss
index 8a481519eca..2d75b1571c4 100644
--- a/themes/finc/scss/components/_sidebar.scss
+++ b/themes/finc/scss/components/_sidebar.scss
@@ -162,10 +162,12 @@
}
// Create hover-effect
-.facet {
+.facet,
+.facet a {
&:hover:not(.button),
&:focus:not(.button) {
background: $sidebar-item-hover-bg;
+ color: $sidebar-item-hover-color;
.active-filters & {
background: $sidebar-item-active-hover-bg;
@@ -175,8 +177,8 @@
// Active facet hover color
&.active:hover:not(.button),
&.active:focus:not(.button) {
- color: $sidebar-facet-active-hover-color;
background: $sidebar-item-active-hover-bg;
+ color: $sidebar-facet-active-hover-color;
// color icon too
.fa {
--
GitLab