diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss
index 8a18c4aa6020f37255be86ae286d2daa5b109e17..20bf82481b3b5ece330271dba3b2cb0a347328c1 100644
--- a/themes/finc/scss/_customVariables.scss
+++ b/themes/finc/scss/_customVariables.scss
@@ -1,7 +1,6 @@
// Use this file to set variables for your theme or re-define variables from parent themes
// see variables.scss for default values
-
// *****************************************************************
// ************ Imports ********************************************
// *****************************************************************
@@ -17,46 +16,66 @@
// **** 00 **** Common colors referenced elsewhere in the code *****
// *****************************************************************
-$white: #fff !default;
-$ghost: #fafafa !default;
-$snow: #f9f9f9 !default; // use $snow preferentially, rather than $ghost, $vapor ...
-$vapor: #f6f6f6 !default;
+$white: #fff !default;
+$ghost: #fafafa !default;
+$snow: #f9f9f9 !default; // use $snow preferentially, rather than $ghost, $vapor ...
+$vapor: #f6f6f6 !default;
$white-smoke: #f5f5f5 !default;
-$silver: #efefef !default;
-$smoke: #eee !default;
-$gainsboro: #ddd !default;
-$iron: #ccc !default;
-$base: #aaa !default;
-$aluminum: #999 !default;
-$jumbo: #888 !default;
-$monsoon: #777 !default;
-$steel: #666 !default;
-$charcoal: #555 !default;
-$tuatara: #444 !default;
-$oil: #333 !default;
-$jet: #222 !default;
-$black: #000 !default;
-
-$red: #f00 !default;
+$silver: #efefef !default;
+$smoke: #eee !default;
+$gainsboro: #ddd !default;
+$iron: #ccc !default;
+$base: #aaa !default;
+$aluminum: #999 !default;
+$jumbo: #888 !default;
+$monsoon: #777 !default;
+$steel: #666 !default;
+$charcoal: #555 !default;
+$tuatara: #444 !default;
+$oil: #333 !default;
+$jet: #222 !default;
+$black: #000 !default;
+
+$red: #f00 !default;
// Reset filters button, this color is hard-coded into Bootstrap for '.toolbar-btn',
// '.record-nav .cart-add', '.record-nav .cart-remove', '.reset-filters-btn' and the bulk action buttons
$lightgrey-transparent: rgba(0, 0, 0, .05);
+// *****************************************************************
+// **** 05 **** Re-define BS Screen Widths for use in finc *********
+// *****************************************************************
+// copies from bootstrap3/scss/vendor/bootstrap/variables
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+$screen-xs-min: 480px !default;
+$screen-sm-min: 768px !default;
+$screen-md-min: 992px !default;
+$screen-lg-min: 1200px !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm-min - 1) !default;
+$screen-sm-max: ($screen-md-min - 1) !default;
+$screen-md-max: ($screen-lg-min - 1) !default;
+
+
// *****************************************************************
// **** A0 **** Theme basic colors *********************************
// *****************************************************************
-$brand-primary: #204563 !default;
-$brand-secondary: #e7e7e7 !default;
-$brand-danger: #cc4b37 !default; // darker red = #a94442
+$brand-primary: #204563 !default;
+$brand-secondary: #e7e7e7 !default;
+$brand-danger: #cc4b37 !default; // darker red = #a94442
$brand-danger-transparent: transparentize($brand-danger, .1) !default; // used e.g. for invalid form fields
-$brand-info: #083152 !default;
-$brand-success: #085218 !default; // darker green = #3c763d
-$brand-warning: #f08a24 !default;
+$brand-info: #083152 !default;
+$brand-success: #085218 !default; // darker green = #3c763d
+$brand-warning: #f08a24 !default;
$traffic-light-yellow: #ff0 !default;
-$road-sign-yellow: #fdda16 !default;
+$road-sign-yellow: #fdda16 !default;
// Global background color for active items (e.g., navs or dropdowns).
$component-active-bg: $brand-primary !default;
@@ -66,7 +85,8 @@ $component-active-bg: $brand-primary !default;
$default-disabled-color: $gainsboro !default;
$pagination-disabled-color: $default-disabled-color !default;
-
+// overlay colors (modal & offcanvas)
+$overlay-color: rgba($black, 0.3) !default;
// *****************************************************************
@@ -97,8 +117,6 @@ $font-size-breadcrumbs: ($font-size-base * .85) !default;
$line-height-base: 1.5 !default;
-
-
// *****************************************************************
// **** A5 **** General dimensions *********************************
// *****************************************************************
@@ -112,8 +130,8 @@ $screen-wcag-above-mini-below-xs-viewports-min: 360px !default;
$screen-wcag-mini-viewports-max: $screen-wcag-above-mini-below-xs-viewports-min - 1px !default;
$screen-wcag-above-mini-below-xs-viewports-max: 479px !default;
-
-
+// Set the default width up to which Offcanvas settings should apply
+$offcanvas-default-max-width: $screen-xs-max !default; // Use '$screen-sm-max' for installations where XS = SM;
// The general gutter width (padding between columns) is calculated
@@ -148,8 +166,6 @@ $thumbnail-width-medium: 100px !default;
$thumbnail-width-large: 160px !default;
-
-
// *****************************************************************
// **** B0 **** Radii **********************************************
// *****************************************************************
@@ -174,8 +190,6 @@ $label-radius: 0 !default;
$toolbar-button-radius: 0 !default;
-
-
// *****************************************************************
// **** B5 **** Border styles **************************************
// *****************************************************************
@@ -196,9 +210,6 @@ $border-right-width: 1px !default;
$margin-right-width: inherit !default;
-
-
-
// *****************************************************************
// **** C0 **** Default anchor/link styles general *****************
// *****************************************************************
@@ -213,7 +224,6 @@ $link-on-dark-bg-color: invert($link-color) !default;
$mainbody-link-text-decoration: $link-text-decoration !default;
-
// *****************************************************************
// **** C5 **** Button styles **************************************
// *****************************************************************
@@ -288,8 +298,6 @@ $button-top-padding: 6px !default;
// For radii, see above
-
-
// *****************************************************************
// **** D0 **** Feedback state colors ******************************
// ************ Alert colors ***************************************
@@ -322,8 +330,6 @@ $state-link-hover-bg: $white !default;
$state-link-hover-color: $black !default;
-
-
// *****************************************************************
// **** D5 **** Highlighter in search results colors ***************
// *****************************************************************
@@ -334,8 +340,6 @@ $state-link-hover-color: $black !default;
// }
-
-
// *****************************************************************
// **** E0 **** Tooltips colors ************************************
// *****************************************************************
@@ -346,8 +350,6 @@ $tooltip-arrow-color: $tooltip-bg !default;
$tooltip-inner-padding: .75em !default;
-
-
// *****************************************************************
// **** E5 **** Badge styles ***************************************
// *****************************************************************
@@ -362,8 +364,6 @@ $badge-link-hover-color: saturate($brand-danger, 50%) !default;
$sidebar-badge-fa-color: darken($brand-secondary, 40%) !default;
-
-
// *****************************************************************
// **** F0 **** Alerts/Feedback state ******************************
// *****************************************************************
@@ -371,12 +371,10 @@ $sidebar-badge-fa-color: darken($brand-secondary, 40%) !default;
$state-link-text-decoration: $link-text-decoration !default;
$state-inside-holding-info-margin-left: 1rem !default;
-$state-inside-holding-info-margin-right: 1rem !default;
+$state-inside-holding-info-margin-right: 1rem !default;
$state-inside-holding-info-margin-top: 1rem !default;
-
-
// *****************************************************************
// **** F5 **** Outlines (focus, accessibility etc.) ***************
// *****************************************************************
@@ -387,8 +385,6 @@ $outline-default-size: 1px !default;
$outline-default-style: solid !default;
-
-
// *****************************************************************
// **** G0 **** Form elements **************************************
// *****************************************************************
@@ -502,8 +498,6 @@ $select-in-header-border: 0 !default;
$select-search-form-sm-max-width: 140px !default;
-
-
// *****************************************************************
// **** H0 **** Non-form Labels (result list etc.) *****************
// *****************************************************************
@@ -530,8 +524,6 @@ $label-result-format-status-padding: .5em !default; // for default see _labels.s
}
-
-
// *****************************************************************
// **** H5 **** Dropdowns ******************************************
// *****************************************************************
@@ -569,8 +561,6 @@ $dropdown-rvk-list-item-icon-font-family: 'FontAwesome', sans-serif !default;
$dropdown-rvk-list-item-icon-margin-right: .5em !default;
-
-
// *****************************************************************
// **** I0 **** Accordions/Collapse elements ***********************
// *****************************************************************
@@ -587,8 +577,6 @@ $accordion-toggler-icon-float: right !default;
$accordion-toggler-icon-font-family: FontAwesome, sans-serif !default;
-
-
// *****************************************************************
// **** I5 **** Slick slider elements ******************************
// ************ Carousels ******************************************
@@ -641,7 +629,6 @@ $similar-items-carousel-pause-button-left-distance: 1rem !default;
$similar-items-carousel-pause-button-z-index: 6000 !default;
-
// *****************************************************************
// **** J0 **** Tables *********************************************
// *****************************************************************
@@ -652,10 +639,6 @@ $table-layout: auto !default;
$table-in-tabs-width: 100% !default;
-
-
-
-
// *****************************************************************
// **** J5 **** Headings *******************************************
// *****************************************************************
@@ -689,8 +672,6 @@ $h4-margin-top-sidebar-sm-only: ($grid-gutter-width / 2) !default;
$h4-text-align-sidebar-xs-sm: center !default;
-
-
// *****************************************************************
// **** K0 **** Body and main container colors *********************
// *****************************************************************
@@ -700,8 +681,6 @@ $body-bg: $snow !default;
$main-bg: $white !default;
-
-
// *****************************************************************
// **** K5 **** Header and navbar *********************************
// *****************************************************************
@@ -750,7 +729,7 @@ $hamburger-menu-margin-left-xs: 0 !default;
$hamburger-menu-margin-right-xs: 0 !default;
// This is for the menu items in the header incl. language, My account etc
-$header-menu-flex-sm-up: 1 0 35% !default;
+$header-menu-flex-sm-up: 1 0 35% !default;
$header-menu-flex-adv-srch-sm-up: 1 0 100% !default;
$header-menu-flex-order-sm-up: 3 !default;
$header-menu-padding-top-sm-up: 6px !default;
@@ -796,7 +775,6 @@ $language-selector-one-language-only-btn-text-align-xs: left !default;
$icon-exclamation-triangle-in-header-padding: 0 !default;
-
// *****************************************************************
// **** L5 **** Search box ************************************
// *****************************************************************
@@ -839,7 +817,6 @@ $search-form-btn-form-control-float-xs: left !default;
$search-form-advanced-search-button-border: 1px solid $oil !default;
-
// *****************************************************************
// **** M0 **** Content box ****************************************
// *****************************************************************
@@ -855,7 +832,6 @@ $content-box-border: 1px solid $brand-primary !default;
$content-box-background-color: inherit !default;
-
// *****************************************************************
// **** M5 **** Advanced Search ************************************
// *****************************************************************
@@ -896,12 +872,11 @@ $adv-search-links-anchor-padding-right-sm-up: .5em !default;
$adv-search-links-sm-to-md-max-max-width: 470px !default;
// Advanced Search Box Container in Result List
-$adv-search-box-display: flex !default;
-$adv-search-box-margin-bottom: $content-box-margin-bottom !default;
-$adv-search-box-padding: $content-box-padding !default;
-$adv-search-box-border: $content-box-border !default;
-$adv-search-box-background-color: $content-box-background-color !default;
-
+$adv-search-box-display: flex !default;
+$adv-search-box-margin-bottom: $content-box-margin-bottom !default;
+$adv-search-box-padding: $content-box-padding !default;
+$adv-search-box-border: $content-box-border !default;
+$adv-search-box-background-color: $content-box-background-color !default;
// *****************************************************************
@@ -909,12 +884,12 @@ $adv-search-box-background-color: $content-box-background-color
// *****************************************************************
// Outer container for filter names and reset button;
// in searchbox without squashing right-hand menu;
-$active-filters-outer-container-display: $content-box-display !default;
-$active-filters-outer-container-margin-bottom: $content-box-margin-bottom !default;
-$active-filters-outer-container-padding: $content-box-padding !default;
+$active-filters-outer-container-display: $content-box-display !default;
+$active-filters-outer-container-margin-bottom: $content-box-margin-bottom !default;
+$active-filters-outer-container-padding: $content-box-padding !default;
-$active-filters-outer-container-border: $content-box-border !default;
-$active-filters-outer-container-background-color: $content-box-background-color !default;
+$active-filters-outer-container-border: $content-box-border !default;
+$active-filters-outer-container-background-color: $content-box-background-color !default;
// Define padding of filters' container for better alignment
@@ -998,9 +973,6 @@ $breadcrumbs-top-margin: 0 !default;
$breadcrumbs-top-padding: 10px !default;
-
-
-
// *****************************************************************
// **** O0 **** Main content block *********************************
// *****************************************************************
@@ -1008,8 +980,6 @@ $breadcrumbs-top-padding: 10px !default;
$content-xs-padding-top: 1.5rem !default;
-
-
// *****************************************************************
// **** O5 **** Result list, Favorites and other lists *************
// *****************************************************************
@@ -1074,10 +1044,6 @@ $result-list-access-icon-inner-width: auto !default;
$result-list-access-icon-inner-display-xs: block !default;
-
-
-
-
// *****************************************************************
// **** P0 **** Search control elements ****************************
// *****************************************************************
@@ -1147,8 +1113,6 @@ $pager-border-radius: 0 !default;
$pager-text-decoration: none !default;
-
-
// *****************************************************************
// **** Q0 **** Bookbag ********************************************
// *****************************************************************
@@ -1160,7 +1124,7 @@ $book-bag-add-to-in-sidebar-toggler-background: transparent !default;
$book-bag-add-to-in-sidebar-toggler-border-radius: 0 !default;
$book-bag-add-to-in-sidebar-toggler-color: $brand-primary !default;
$record-view-toolbar-button-padding-add-to-bookbag: 1.2rem !default;
-$book-bag-add-to-in-sidebar-toggler-padding: $record-view-toolbar-button-padding $record-view-toolbar-button-padding-add-to-bookbag !default;
+$book-bag-add-to-in-sidebar-toggler-padding: $record-view-toolbar-button-padding $record-view-toolbar-button-padding-add-to-bookbag !default;
$book-bag-add-to-in-sidebar-toggler-text-align-xs: left !default;
$book-bag-add-to-in-sidebar-toggler-text-decoration: none !default;
$book-bag-add-to-in-sidebar-toggler-width: 100% !default;
@@ -1169,7 +1133,6 @@ $book-bag-add-to-icon-content: '\f067' !default;
$book-bag-remove-from-icon-content: '\f068' !default;
-
// *****************************************************************
// **** Q5 **** Bulk Action Toolbar ********************************
// *****************************************************************
@@ -1188,9 +1151,6 @@ $bulk-action-record-view-checkbox-container-margin-right: .5em !default;
$bulk-action-record-view-checkbox-input-margin-top: $input-top-margin !default;
-
-
-
// *****************************************************************
// **** R0 **** Sidebar elements ***********************************
// *****************************************************************
@@ -1262,10 +1222,6 @@ $icon-with-text-success-color: $brand-success !default;
$icon-with-text-warning-color: $brand-warning !default;
-
-
-
-
// *****************************************************************
// **** S0 **** Record tabs ****************************************
// *****************************************************************
@@ -1288,10 +1244,6 @@ $record-tabs-availability-column-a-xs-sm-margin-top: 6px !default;
$record-tabs-availability-column-a-xs-sm-word-break: break-word !default;
-
-
-
-
// *****************************************************************
// **** S5 **** Off-canvas *****************************************
// *****************************************************************
@@ -1315,8 +1267,8 @@ $off-canvas-left-media-icon-on-right-sm-up-padding-right: 0 !default;
// Padding to make left/right sidebar button edges visible
$off-canvas-active-sidebar-padding: 2px !default;
-
-
+// Z-Index of overlay
+$off-canvas-overlay-z-index: 3 !default;
// *****************************************************************
@@ -1351,9 +1303,6 @@ $modal-dialog-close-button-left-sm-up-rtl: -60px !default;
$modal-dialog-close-button-focus-hover-opacity: unset !default;
-
-
-
// *****************************************************************
// **** T5 **** Footer elements ************************************
// *****************************************************************
@@ -1370,9 +1319,6 @@ $footer-poweredby-font-size: small !default;
$footer-link-text-decoration: $link-text-decoration !default;
-
-
-
// *****************************************************************
// **** U0 **** Home page ******************************************
// *****************************************************************
@@ -1394,8 +1340,6 @@ $home-page-browse-item-active-focus-hover-text-decoration: underline !default;
$home-facet-list-column-count: 3 !default;
-
-
// *****************************************************************
// **** U5 **** Hierarchy Tree/JS tree *****************************
// *****************************************************************
@@ -1453,9 +1397,6 @@ $jstree-clicked-hover-color: $black !default;
$jstree-clicked-hover-focus-color: $jstree-clicked-hover-color !default;
-
-
-
// *****************************************************************
// **** V0 **** Resolver links, 'traffic lights' *******************
// *****************************************************************
@@ -1489,10 +1430,6 @@ $traffic-light-access-open-inner-second-background-color: $gainsboro !default;
$traffic-light-access-open-inner-last-background-color: $brand-success !default;
-
-
-
-
// *****************************************************************
// **** V5 **** Admin panel for translations ***********************
// *****************************************************************
@@ -1515,9 +1452,6 @@ $translation-form-sorting-asc-icon: '\f0de' !default;
$translation-form-sorting-desc-icon: '\f0dd' !default;
-
-
-
// *****************************************************************
// **** W0 **** AMSL sources ***************************************
// *****************************************************************
@@ -1529,9 +1463,6 @@ $amsl-sources-list-li-top-level-list-padding-bottom: .5em !default;
$amsl-sources-list-panel-body-span-margin: 10px 15px 10px 0 !default;
-
-
-
// *****************************************************************
// **** Z5 **** Activate On Demand - Plugins ***********************
// *****************************************************************
diff --git a/themes/finc/scss/components/_modal.scss b/themes/finc/scss/components/_modal.scss
index ffaccb591718a296a5e609a2729ae6a9c3581ea4..a35f244599c612893009b644d3cd4b57eb9cb749 100644
--- a/themes/finc/scss/components/_modal.scss
+++ b/themes/finc/scss/components/_modal.scss
@@ -71,3 +71,8 @@
.modal .table-resp-data td {
word-break: break-word;
}
+
+// set overlay-color
+#modal {
+ background-color: $overlay-color;
+}
diff --git a/themes/finc/scss/components/_offcanvas.scss b/themes/finc/scss/components/_offcanvas.scss
index f7c083d9fa74697094c633595c5c652aae9dfc41..73ea760d9344f7bd12497712a8f7cc57879d53a5 100644
--- a/themes/finc/scss/components/_offcanvas.scss
+++ b/themes/finc/scss/components/_offcanvas.scss
@@ -30,8 +30,6 @@
}
-
-
// *****************************************************************
// ************ Off-canvas in Sidebar ******************************
// *****************************************************************
@@ -82,7 +80,6 @@
}
-
// *****************************************************************
// ************ Sidebar with offcanvas active **********************
// *****************************************************************
@@ -101,6 +98,39 @@
}
+// *****************************************************************
+// ************ Offcanvas Overlay **********************************
+// *****************************************************************
+.offcanvas-overlay {
+ // Overwrite BS Theme components/offcanvass.scss lines 32ff
+ // so definitions will be valid for tablet too
+ @media screen and (max-width: $offcanvas-default-max-width) {
+ background-color: $overlay-color;
+ cursor: pointer;
+ display: none;
+ height: 100%;
+ opacity: 0;
+ position: fixed;
+ top: 0;
+ transition: opacity .5s;
+ width: 100%;
+ z-index: $off-canvas-overlay-z-index;
+
+ .offcanvas.active & {
+ display: block;
+ opacity: 1;
+ transition: opacity .5s;
+ }
+
+ .offcanvas.active.offcanvas-left & {
+ right: -$offcanvas-offset;
+ }
+
+ .offcanvas.active.offcanvas-right & {
+ left: -$offcanvas-offset;
+ }
+ }
+}
// *****************************************************************
// ************ Tabs View in Result List ***************************