From 3bba692ccb9a518cf6369f4dbe3b27729cc57e0d Mon Sep 17 00:00:00 2001
From: Claas Kazzer <kazzer@uni-leipzig.de>
Date: Fri, 13 Nov 2020 14:35:00 +0100
Subject: [PATCH] refs #18651 [finc: VF5.1] corrects changes from vufind master
vf5.1
* introduces variable to overwrite link decoration
* introduces variables for modal close buttons
* corrects erroneous variables
* alters layout.phtml for modal loading display inside modal-body
* changes close-x color
---
themes/finc/scss/_customVariables.scss | 13 ++
themes/finc/scss/compiled.scss | 237 +++++++++++-----------
themes/finc/templates/layout/layout.phtml | 2 +-
3 files changed, 130 insertions(+), 122 deletions(-)
diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss
index 25604076d84..cb7f32ab30c 100644
--- a/themes/finc/scss/_customVariables.scss
+++ b/themes/finc/scss/_customVariables.scss
@@ -49,6 +49,17 @@ $oil: #333;
$jet: #222;
$black: #000;
+$btn-default-color: $oil !default;
+
+// Close modal and adv search buttons
+$modal-close-bg: $white !default;
+$modal-close-bg-hover: $white !default;
+$modal-close-color: $btn-default-color !default;
+$modal-close-color-hover: $brand-danger !default;
+
+//// Anchor/Link text decoration
+$textdecoration-anchor: none !default;
+
//// FORM FEEDBACK states colors and, by default, alerts colors (i.e. alerts are
//// defined like so '$alert-success-bg: $state-success-bg;')
$state-light-text-on-dark: $white !default;
@@ -251,6 +262,8 @@ $pager-border-radius: 0 !default;
$badge-border-radius: 0 !default;
+$modal-close-br: 0 !default;
+
//// labels.scss uses no variable! Therefore it will be necessary
//// to overwite in compiled.scss!!, Fixme when done more elegantly in BS
$label-radius: 0 !default;
diff --git a/themes/finc/scss/compiled.scss b/themes/finc/scss/compiled.scss
index 3222365dc9b..5c153ecaaef 100644
--- a/themes/finc/scss/compiled.scss
+++ b/themes/finc/scss/compiled.scss
@@ -502,9 +502,10 @@ select {
// IMAGES - END
-// LINKS
-
-// a {}
+// LINKS // ANCHORS
+a {
+ text-decoration: $textdecoration-anchor;
+}
// LINKS - END
@@ -529,6 +530,81 @@ select {
&:focus {
color: lighten($btn-transparent-color, 80%);
}
+
+ &.active {
+ color: $btn-transparent-active-color;
+
+ &:focus,
+ &:hover {
+ background-color: $btn-transparent-active-color;
+ color: $black;
+ }
+ }
+}
+
+.btn-default.active,
+.btn-secondary.active {
+ &:focus,
+ &:hover {
+ background-color: $btn-active-hover-bg;
+ }
+}
+
+.btn-info {
+ &:focus,
+ &:hover {
+ background-color: $btn-info-hover-bg;
+ }
+
+ &.active {
+ &:focus,
+ &:hover {
+ background-color: $btn-info-active-hover-bg;
+ }
+ }
+}
+
+.btn-primary,
+.btn-primary.active {
+ &:focus,
+ &:hover {
+ background-color: $btn-primary-hover-bg;
+ color: $btn-primary-hover-color;
+ }
+
+ // On datalightbox:
+ &[disabled="disabled"] {
+ color: $btn-primary-disabled-color;
+ }
+}
+
+.btn-secondary {
+ &:focus,
+ &:hover {
+ border: 1px solid $btn-secondary-border-color;
+ }
+}
+
+.btn-success.active {
+ &:focus,
+ &:hover {
+ background-color: $btn-success-active-hover-bg;
+ }
+}
+
+.btn-primary.disabled {
+ &:focus,
+ &:hover {
+ background-color: $btn-primary-disabled-hover-bg;
+ color: $btn-primary-disabled-hover-color;
+ }
+}
+
+.has-error .control-label,
+.has-error .help-block,
+.sms-error .control-label,
+.sms-error .help-block {
+ color: $brand-danger;
}
////// Bookbag Toggler
@@ -1459,7 +1535,7 @@ header,
}
}
- @media only screen and (max-width: $screen-xs-max) {
+ @media only screen and (max-width: $screen-xs-max) {
.searchForm_lookfor {
max-width: 80%;
}
@@ -2401,13 +2477,24 @@ body:not(.offcanvas) .sidebar {
font-size: 1em;
// remove right padding to align with accordion arrows
padding-right: 2px;
-}
-////// light color on dark, when active (Facets + My Account) - we need the parent for specificity
-.facet.active > .badge,
-.sidebar a.active > .badge {
- background-color: transparent;
- color: $btn-primary-color;
+ &.btn-danger,
+ &.btn-info,
+ &.btn-success,
+ &.btn-transparent,
+ &.btn-warning {
+ &:focus,
+ &:hover {
+ color: $btn-badge-hover-color;
+ }
+ }
+
+ ////// light color on dark, when active (Facets + My Account) - we need the parent for specificity
+ .facet.active > &,
+ .sidebar a.active > & {
+ background-color: transparent;
+ color: $btn-primary-color;
+ }
}
//// OR- and AND-Facets, item counts - END
@@ -2528,9 +2615,10 @@ footer ul {
// Modal close button (Needs to be as fancy to override BS styles)
#modal .modal-content > .close,
#modal .modal-content > .adv-term-remove {
- background: $white;
+ background: $modal-close-bg;
border: 0;
- color: $btn-default-color;
+ border-radius: $modal-close-br;
+ color: $modal-close-color;
left: auto;
opacity: unset;
right: 0;
@@ -2545,11 +2633,10 @@ footer ul {
&:focus,
&:hover {
- background-color: $black;
- color: $white;
+ background-color: $modal-close-bg-hover;
+ color: $modal-close-color-hover;
opacity: unset;
}
-
}
// MODALS - END
@@ -2631,38 +2718,33 @@ footer ul {
.sorting_asc,
.sorting_desc {
cursor: pointer;
-}
-
-.sorting {
- color: lighten($charcoal, 5%);
-}
-
-.sorting_asc,
-.sorting_desc {
- color: $brand-primary;
-}
-.sorting .fa-fw {
- position: relative;
-}
-
-.sorting,
-.sorting_asc,
-.sorting_desc {
.fa-fw::before {
display: inline;
}
}
+
.sorting_asc,
.sorting_desc {
+ color: $brand-primary;
+
.fa-fw::before {
color: inherit;
}
}
-.sorting .fa-fw::before {
- content: '\f0dc';
+
+.sorting {
+ color: lighten($charcoal, 5%);
+
+ .fa-fw {
+ position: relative;
+
+ &::before {
+ content: '\f0dc';
+ }
+ }
}
.sorting_asc .fa-fw::before {
@@ -2673,7 +2755,6 @@ footer ul {
content: '\f0dd';
}
-
// Accessibility
a.exclude {
@@ -2709,96 +2790,10 @@ input {
}
}
-.btn-danger.badge,
-.btn-info.badge,
-.btn-success.badge,
-.btn-transparent.badge,
-.btn-warning.badge {
- &:focus,
- &:hover {
- color: $btn-badge-hover-color;
- }
-}
-
-.btn-default.active,
-.btn-secondary.active {
- &:focus,
- &:hover {
- background-color: $btn-active-hover-bg;
- }
-}
-
-.btn-info {
- &:focus,
- &:hover {
- background-color: $btn-info-hover-bg;
- }
-}
-
-.btn-info.active {
- &:focus,
- &:hover {
- background-color: $btn-info-active-hover-bg;
- }
-}
-
-.btn-primary,
-.btn-primary.active {
- &:focus,
- &:hover {
- background-color: $btn-primary-hover-bg;
- color: $btn-primary-hover-color;
- }
-
- // On datalightbox:
- &[disabled="disabled"] {
- color: $btn-primary-disabled-color;
- }
-}
-
-.btn-secondary {
- &:focus,
- &:hover {
- border: 1px solid $btn-secondary-border-color;
- }
-}
-
-.btn-success.active {
- &:focus,
- &:hover {
- background-color: $btn-success-active-hover-bg;
- }
-}
-
-.btn-transparent.active {
- color: $btn-transparent-active-color;
-
- &:focus,
- &:hover {
- background-color: $btn-transparent-active-color;
- color: $black;
- }
-}
-
// Accessibility - END
// Account
-.btn-primary.disabled {
- &:focus,
- &:hover {
- background-color: $btn-primary-disabled-hover-bg;
- color: $btn-primary-disabled-hover-color;
- }
-}
-
-.has-error .control-label,
-.has-error .help-block,
-.sms-error .control-label,
-.sms-error .help-block {
- color: $brand-danger;
-}
-
.has-error .form-control,
.sms-error .form-control {
border: 1px solid $brand-danger;
diff --git a/themes/finc/templates/layout/layout.phtml b/themes/finc/templates/layout/layout.phtml
index 8673edfdd49..2993ffd55b4 100644
--- a/themes/finc/templates/layout/layout.phtml
+++ b/themes/finc/templates/layout/layout.phtml
@@ -227,7 +227,7 @@ if (!isset($this->layout()->searchbox)) {
<?=$this->transEsc('Modal_description')?>
</div>
<div class="modal-body">
- <span id="modal-title"><?=$this->transEsc('Loading')?> ...</span>
+ <?=$this->transEsc('Loading')?> ...
</div>
</div>
</div>
--
GitLab