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

@@ -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;

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;

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')?>&nbsp;...</span>
+        <?=$this->transEsc('Loading')?>&nbsp;...
       </div>
     </div>
   </div>