diff --git a/Gruntfile.local.js b/Gruntfile.local.js index ed7d51e1847..ce8282b5600 100644 --- a/Gruntfile.local.js +++ b/Gruntfile.local.js @@ -7,7 +7,13 @@ module.exports = function(grunt) { grunt.registerTask("finna:scss", function finnaScssFunc() { const config = getFinnaSassConfig({ outputStyle: style, - quietDeps: true + quietDeps: true, + silenceDeprecations: [ + 'import', + 'color-functions', + 'global-builtin', + 'legacy-js-api' + ] }, false); grunt.config.set('dart-sass', config); grunt.task.run('dart-sass'); @@ -82,7 +88,8 @@ module.exports = function(grunt) { } config.options.includePaths = getLoadPaths('themes/' + themeList[i] + '/scss/finna.scss'); config.options.includePaths.push('vendor/'); - config.options.includePaths.push(path.resolve('themes/bootstrap3/scss/vendor')); + config.options.includePaths.push(path.resolve('themes/bootstrap5/scss/vendor')); + config.options.includePaths.push(path.resolve('themes/bootstrap5/node_modules')); sassConfig[themeList[i]] = config; } diff --git a/module/Finna/src/Finna/View/Helper/Root/LayoutClass.php b/module/Finna/src/Finna/View/Helper/Root/LayoutClass.php index c38fe5883b9..41044486918 100644 --- a/module/Finna/src/Finna/View/Helper/Root/LayoutClass.php +++ b/module/Finna/src/Finna/View/Helper/Root/LayoutClass.php @@ -40,7 +40,7 @@ * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License * @link http://vufind.org/wiki/vufind2:developer_manual Wiki */ -class LayoutClass extends \VuFind\View\Helper\Bootstrap3\LayoutClass +class LayoutClass extends \VuFind\View\Helper\Bootstrap5\LayoutClass { /** * Helper to allow easily configurable page layout -- given a broad class diff --git a/module/Finna/src/Finna/View/Helper/Root/Navibar.php b/module/Finna/src/Finna/View/Helper/Root/Navibar.php index 01478c95f36..59c94bdfdec 100644 --- a/module/Finna/src/Finna/View/Helper/Root/Navibar.php +++ b/module/Finna/src/Finna/View/Helper/Root/Navibar.php @@ -5,7 +5,7 @@ * * PHP version 8 * - * Copyright (C) The National Library of Finland 2014. + * Copyright (C) The National Library of Finland 2014-2025. * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License version 2, @@ -23,6 +23,7 @@ * @category VuFind * @package View_Helpers * @author Samuli Sillanpää + * @author Ere Maijala * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License * @link http://vufind.org Main Site */ @@ -42,6 +43,7 @@ * @category VuFind * @package View_Helpers * @author Samuli Sillanpää + * @author Ere Maijala * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License * @link http://vufind.org Main Site */ @@ -194,20 +196,25 @@ public function getMenuItemUrl(array $data) */ public function getLanguageUrl($lng) { - $url = $this->view->serverUrl(true); - $parts = parse_url($url); - - $params = []; - if (isset($parts['query'])) { - parse_str($parts['query'], $params); - $url = substr($url, 0, strpos($url, '?')); - } + $url = $this->router->getRequestUri(); + $params = $url->getQueryAsArray(); $params['lng'] = $lng; - $url .= '?' . http_build_query($params); - if (isset($parts['fragment'])) { - $url .= '#' . $parts['fragment']; - } - return $url; + $url->setQuery(http_build_query($params)); + return $url->toString(); + } + + /** + * Check if a URL points to the current page + * + * @param string $url URL + * + * @return bool + */ + public function isCurrentPage(string $url): bool + { + $requestUri = $this->router->getRequestUri(); + return $url === (string)$requestUri + || $url === $requestUri->getPath(); } /** diff --git a/themes/bootstrap5/js/account_ajax.js b/themes/bootstrap5/js/account_ajax.js index a56c6aadb77..542caae93b7 100644 --- a/themes/bootstrap5/js/account_ajax.js +++ b/themes/bootstrap5/js/account_ajax.js @@ -92,8 +92,7 @@ VuFind.register('account', function Account() { accountIconEl.dataset.bsToggle = 'tooltip'; accountIconEl.dataset.bsPlacement = 'bottom'; accountIconEl.title = VuFind.translate('account_has_alerts'); - const tooltip = bootstrap.Tooltip.getOrCreateInstance(accountIconEl); - tooltip.show(); + bootstrap.Tooltip.getOrCreateInstance(accountIconEl); } else { const tooltip = bootstrap.Tooltip.getOrCreateInstance(accountIconEl); tooltip.dispose(); diff --git a/themes/bootstrap5/js/lightbox.js b/themes/bootstrap5/js/lightbox.js index b86ccd91648..bcb164818d9 100644 --- a/themes/bootstrap5/js/lightbox.js +++ b/themes/bootstrap5/js/lightbox.js @@ -368,8 +368,8 @@ VuFind.register('lightbox', function Lightbox() { // remove nodes on whose click, the modal closes var nodesWhichAreNotCloseTargets = focusableNodes.filter(function nodeFilter(node) { return !node.hasAttribute("data-lightbox-close") && ( - !node.hasAttribute("data-dismiss") || - node.getAttribute("data-dismiss") !== "modal" + !node.hasAttribute("data-bs-dismiss") || + node.getAttribute("data-bs-dismiss") !== "modal" ); }); diff --git a/themes/custom/scss/finna.scss b/themes/custom/scss/finna.scss index 1a3c9dc01b3..8bd64535a70 100644 --- a/themes/custom/scss/finna.scss +++ b/themes/custom/scss/finna.scss @@ -1,4 +1,6 @@ -@import "../../finna2/scss/scss-functions"; +// Include Bootstrap functions first (so you can manipulate colors, SVGs, calc, etc) +@import "scss-functions"; +@import "bootstrap/scss/functions"; // Custom theme variable overrides @import "variables-custom"; @@ -6,22 +8,70 @@ // Variable overrides @import "variables"; +// Include Font Awesome +$fa-font-path: "../../bootstrap5/css/vendor/font-awesome/webfonts" !default; +@import "vendor/font-awesome/fontawesome"; +@import "vendor/font-awesome/brands"; +@import "vendor/font-awesome/regular"; +@import "vendor/font-awesome/solid"; +@import "vendor/font-awesome/v4-shims"; + // Finna Bootstrap variable overrides @import "../../finna2/scss/global/bootstrap-variable-overrides"; -// Font Awesome (loaded via include path to silence warnings from dependencies) -@import "font-awesome/font-awesome"; +// Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets) +@import "bootstrap/scss/variables"; + +// Include any map overrides here +@import "global/bootstrap-map-overrides"; + +// Include remainder of required parts +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/root"; +@import "bootstrap/scss/reboot"; + +// Optionally include any other parts as needed +@import "bootstrap/scss/accordion"; +@import "bootstrap/scss/alert"; +@import "bootstrap/scss/badge"; +@import "bootstrap/scss/breadcrumb"; +@import "bootstrap/scss/buttons"; +@import "bootstrap/scss/button-group"; +@import "bootstrap/scss/card"; +@import "bootstrap/scss/carousel"; +@import "bootstrap/scss/containers"; +@import "bootstrap/scss/dropdown"; +@import "bootstrap/scss/forms"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/helpers"; +@import "bootstrap/scss/images"; +@import "bootstrap/scss/list-group"; +@import "bootstrap/scss/modal"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/navbar"; +@import "bootstrap/scss/offcanvas"; +@import "bootstrap/scss/pagination"; +@import "bootstrap/scss/popover"; +@import "bootstrap/scss/tables"; +@import "bootstrap/scss/tooltip"; +@import "bootstrap/scss/transitions"; +@import "bootstrap/scss/type"; +@import "bootstrap/scss/utilities"; + +// Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` +@import "bootstrap/scss/utilities/api"; -// Bootstrap v3.4.1 (loaded via include path to silence warnings from dependencies) -@import "vendor/bootstrap/bootstrap"; +// Bootstrap 3 compatibility layer +@import "global/finna-bs3-compat"; // Finna variables @import "../../finna2/scss/global/variables"; -// Bootstrap3 theme components -@import "../../bootstrap3/scss/components/cookie-consent/index"; -@import "../../bootstrap3/scss/components/keyboard"; -@import "../../bootstrap3/scss/components/trees"; +// Bootstrap5 theme components +@import "../../bootstrap5/scss/components/cookie-consent/index"; +@import "../../bootstrap5/scss/components/keyboard"; +@import "../../bootstrap5/scss/components/trees"; @import "../../finna2/scss/global"; @import "../../finna2/scss/finna-other"; diff --git a/themes/custom/scss/variables.scss b/themes/custom/scss/variables.scss index 68bb5cf6d64..875bc03b2bd 100644 --- a/themes/custom/scss/variables.scss +++ b/themes/custom/scss/variables.scss @@ -3,15 +3,16 @@ // -------------------------------------------------- // Brand Colors -// $brand-primary: #00a3b5 !default; -// $brand-secondary: #B3E3E9 !default; -// $brand-third: #d8f4ed !default; -// $brand-fourth: #ebd4f0 !default; -// $brand-success: #00b270 !default; -// $brand-warning: #fff48c !default; -// $brand-danger: #ff461e !default; -// $brand-info: #b2e3ea !default; -// $logo-color: #fff !default; +// $primary: #007c90 !default; +// $secondary: #007c90 !default; +// $third: #007c90 !default; +// $fourth: #007c90 !default; +// $success: #33843B !default; +// $warning: #9E943D !default; +// $danger: #a94442 !default; +// $info: #007c90 !default; +// $info-bg-subtle: #d9edf7 !default; +// $logo-color: #fff !default; //== Custom styling //== Background @@ -356,21 +357,10 @@ // //## Define colors for form feedback states and, by default, alerts. -//$state-success-text: #2d4821 !default; -//$state-success-bg: #dff0d8 !default; -//$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; - -//$state-info-text: #31708f !default; -//$state-info-bg: #d9edf7 !default; -//$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; - -//$state-warning-text: #8a6d3b !default; -//$state-warning-bg: #fcf8e3 !default; -//$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; - -//$state-danger-text: #a94442 !default; -//$state-danger-bg: #f2dede !default; -//$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; +//$success: #33843B !default; +//$info: #007c90 !default; +//$warning: #9E943D !default; +//$danger: #a94442 !default; //== Tooltips diff --git a/themes/custom/templates/content/Additions/header-navibar.phtml b/themes/custom/templates/content/Additions/header-navibar.phtml index db5ddb741b1..752be353446 100644 --- a/themes/custom/templates/content/Additions/header-navibar.phtml +++ b/themes/custom/templates/content/Additions/header-navibar.phtml @@ -1,7 +1,7 @@ - + diff --git a/themes/finna2/js/finna-a11y.js b/themes/finna2/js/finna-a11y.js index 90f68a4485b..ae29e1272d0 100644 --- a/themes/finna2/js/finna-a11y.js +++ b/themes/finna2/js/finna-a11y.js @@ -4,32 +4,18 @@ finna.a11y = (function a11y() { * Initialize event listeners for bootstrap accessibility */ function initA11y() { - - // On dropdown open - $(document).on('shown.bs.dropdown', function dropdownOpen(event) { - var dropdown = $(event.target); - - // Set aria-expanded to true - dropdown.find('.dropdown-toggle').attr('aria-expanded', true); - - // Set focus on the first link in the dropdown - setTimeout(function shiftFocus() { - dropdown.find('.dropdown-menu li:first-child a').trigger("focus"); - }, 50); - }); - - // On dropdown close - $(document).on('hidden.bs.dropdown', function dropdownClose(event) { - var dropdown = $(event.target); - - // Set aria-expanded to false - dropdown.find('.dropdown-toggle').attr('aria-expanded', false); - - // Set focus back to dropdown toggle - dropdown.find('.dropdown-toggle').trigger("focus"); + // Focus first dropdown item when a dropdown is opened + document.addEventListener('shown.bs.dropdown', (e) => { + const dropdownEl = e.target.closest('.dropdown'); + if (dropdownEl) { + const firstItemEl = dropdownEl.querySelector(':scope > .dropdown-menu > li > .dropdown-item'); + if (firstItemEl) { + firstItemEl.focus(); + } + } }); - // Restore focus back to trigger element after lightbox is closed. + // Restore focus back to trigger element after lightbox is closed $(document).on('show.bs.modal', function triggerFocusShift() { let triggerElement = document.activeElement; $(document).one('hidden.bs.modal', function restoreFocus() { diff --git a/themes/finna2/js/finna-bs3-compat.js b/themes/finna2/js/finna-bs3-compat.js new file mode 100644 index 00000000000..adf5a9427d2 --- /dev/null +++ b/themes/finna2/js/finna-bs3-compat.js @@ -0,0 +1,126 @@ +/*global VuFind*/ +VuFind.register('finnaBootstrap3CompatibilityLayer', function finnaBootstrap3CompatibilityLayer() { + /** + * Initialize nav support + */ + function initNav() { + document.querySelectorAll('.nav').forEach((navEl) => { + if (navEl.closest('.mobile-toolbar')) { + return; + } + if (navEl.classList.contains('nav-tabs')) { + // Apply active class to tab li for back-compatibility: + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if ('attributes' !== mutation.type || mutation.attributeName !== 'class') { + return; + } + const target = mutation.target; + if (target.nodeName === 'A' && target.parentNode && target.classList.contains('active')) { + target.parentNode.classList.add('active'); + } else { + target.parentNode.classList.remove('active'); + } + }); + }); + observer.observe(navEl, { attributes: true, attributeFilter: ['class'], subtree: true }); + } + navEl.querySelectorAll(':scope > li').forEach((liEl) => { + const aEl = liEl.querySelector(':scope > a'); + if (liEl.classList.contains('dropdown__item')) { + if (aEl && !aEl.classList.contains('btn')) { + aEl.classList.add('dropdown-item'); + if (liEl.classList.contains('active')) { + aEl.classList.add('active'); + } + } + } else if (aEl) { + const oldStateA = VuFind.disableTransitions(aEl); + if (!aEl.classList.contains('btn') && !aEl.closest('.browsebar')) { + aEl.classList.add('nav-link'); + } + if (liEl.classList.contains('active')) { + aEl.classList.add('active'); + if (null === liEl.closest('.searchForm')) { + liEl.classList.remove('active'); + } + } + // Use a timeout to allow the transition to complete before restoring the state: + setTimeout(() => { VuFind.restoreTransitions(aEl, oldStateA); }, 0); + } + }); + }); + + // Reverse effects of record.js: + setTimeout( + () => { + $('.record-tabs .nav-tabs a').off('shown.bs.tab'); + document.querySelectorAll('.record-tabs .nav-tabs li').forEach((liEl) => { + liEl.removeAttribute('aria-selected'); + }); + }, + 0 + ); + } + + /** + * Initialize breadcrumb support + */ + function initBreadcrumbs() { + document.querySelectorAll('.breadcrumb li').forEach((el) => { + el.classList.add('breadcrumb-item'); + }); + } + + /** + * Initialize form element support + */ + function initFormElements() { + document.querySelectorAll('select.form-control').forEach((el) => { + el.classList.add('form-select'); + }); + } + + /** + * Initialize pagination support + */ + function initPagination() { + document.querySelectorAll('.pagination li').forEach((el) => { + el.classList.add('page-item'); + const linkEl = el.querySelector('a'); + if (linkEl) { + linkEl.classList.add('page-link'); + } else { + el.innerHTML = '' + el.innerHTML + ''; + } + }); + } + + /** + * Initialize dropdown support + */ + function initDropdownStyles() { + document.querySelectorAll('ul.dropdown-menu > li > a').forEach((el) => { + el.classList.add('dropdown-item'); + }); + document.querySelectorAll('.dropdown-menu-right').forEach((el) => { + el.classList.add('dropdown-menu-end'); + }); + } + + /** + * Initialize all back-compatibility support functions + */ + function init() { + initNav(); + initFormElements(); + initBreadcrumbs(); + initPagination(); + + initDropdownStyles(); + } + + return { + init: init + }; +}); diff --git a/themes/finna2/js/finna-feed-element.js b/themes/finna2/js/finna-feed-element.js index 5b0fc2a1480..44fe9a5692f 100644 --- a/themes/finna2/js/finna-feed-element.js +++ b/themes/finna2/js/finna-feed-element.js @@ -55,15 +55,15 @@ class FinnaFeedElement extends HTMLElement { setTitleBottom(settings) { // Move title field below image let maxH = 0; - this.querySelectorAll('.carousel-slide-header p').forEach(el => { + this.querySelectorAll('.carousel-slide-header > span').forEach(el => { el.classList.add('title-bottom'); maxH = Math.max(maxH, el.getBoundingClientRect().height); }); - this.querySelectorAll('.carousel-slide-header p').forEach(el => { + this.querySelectorAll('.carousel-slide-header > span').forEach(el => { el.style.minHeight = el.style.height = `${maxH}px`; }); this.querySelectorAll('.carousel-feed .carousel-text').forEach(el => { - const textElement = el.querySelector('div.text p'); + const textElement = el.querySelector('div.text span'); if (!textElement) { return; } diff --git a/themes/finna2/js/finna-feed-tabs.js b/themes/finna2/js/finna-feed-tabs.js index ee91fbfa022..0e59bc0dbc5 100644 --- a/themes/finna2/js/finna-feed-tabs.js +++ b/themes/finna2/js/finna-feed-tabs.js @@ -30,7 +30,7 @@ finna.feedTabs = (function finnaFeedTab() { FeedTab.prototype.setEvents = function setEvents() { var _ = this; _.anchors.forEach(function addClickListener(element) { - element.parentNode.addEventListener('click', function onFeedTabClick(e) { + element.addEventListener('click', function onFeedTabClick(e) { e.preventDefault(); _.displayTab(element); }); @@ -70,14 +70,14 @@ finna.feedTabs = (function finnaFeedTab() { _.anchors.forEach(function removeActive(el) { var parent = el.parentNode; if (el.dataset.tab === tab) { - parent.classList.add('active'); - parent.setAttribute('aria-selected', true); + el.classList.add('active'); + el.setAttribute('aria-selected', true); if (el.classList.contains('feed-accordion-anchor')) { parent.insertAdjacentElement('afterend', _.tabContent); } } else { - parent.classList.remove('active'); - parent.setAttribute('aria-selected', false); + el.classList.remove('active'); + el.setAttribute('aria-selected', false); } }); _.tabContent.feedId = tab; @@ -100,11 +100,10 @@ finna.feedTabs = (function finnaFeedTab() { if (!element.classList.contains('feed-tab-anchor')) { return; } - var parent = element.parentNode; - if ((!hash && !_.isLoading && parent.classList.contains('active')) || + if ((!hash && !_.isLoading && element.classList.contains('active')) || hash === element.dataset.tab ) { - parent.click(); + element.click(); } }); if (_.anchors[0] && !_.isLoading) { diff --git a/themes/finna2/js/finna-layout.js b/themes/finna2/js/finna-layout.js index 7479eebfca3..e9bebeab9c9 100644 --- a/themes/finna2/js/finna-layout.js +++ b/themes/finna2/js/finna-layout.js @@ -1,7 +1,5 @@ -/*global VuFind, videojs, finna, priorityNav */ +/*global VuFind, videojs, finna, priorityNav, bootstrap, unwrapJQuery, Popper */ finna.layout = (function finnaLayout() { - var currentOpenTooltips = []; - /** * Initialize a throttled resize listener */ @@ -303,50 +301,141 @@ finna.layout = (function finnaLayout() { } /** - * Initialize tooltips - * @param {jQuery} _holder Holder to look for tooltip elements from + * Initialize tooltips and popovers + * @param {HTMLElement} holder Holder to look for toggletip elements from */ - function initToolTips(_holder) { - var holder = typeof _holder === 'undefined' ? $(document) : _holder; - // other tooltips - holder.find('[data-toggle="tooltip"]') - .on('show.bs.tooltip', function onShowTooltip() { - var self = $(this); - $(this).attr('aria-expanded', 'true'); - $(currentOpenTooltips).each(function hideOtherTooltips() { - if ($(this)[0] !== self[0]) { - $(this).tooltip('hide'); - } - }); - currentOpenTooltips = [self]; - }) - .on('hidden.bs.tooltip', function onHideTooltip(e) { - $(e.target).attr('aria-expanded', 'false'); - $(e.target).data('bs.tooltip').inState.click = false; - }) - .tooltip({trigger: 'click', viewport: '.container'}) - .attr('aria-expanded', 'false'); + function initToggleTips(holder) { + holder.querySelectorAll('[data-toggle="finna-toggletip"]').forEach(toggletip => { + if (toggletip.dataset.initialized) { + return; + } + toggletip.dataset.initialized = true; + // Get the message from the data-content element + const message = toggletip.dataset.toggletipContent || ''; + const tipEl = toggletip.parentNode.querySelector('.js-status'); + if (!tipEl) { + return; + } + const tipInnerEl = tipEl.querySelector('.js-status-inner'); + if (!tipInnerEl) { + return; + } - holder.find('[data-toggle="tooltip-hover"]') - .tooltip({trigger: 'hover', delay: {show: 500, hide: 200}}); - // prevent link opening if tooltip is placed inside link element - holder.find('[data-toggle="tooltip"] > i').on('click', function onClickTooltip(event) { - event.preventDefault(); + const placement = toggletip.dataset.toggletipPlacement || 'bottom'; + const popperInst = Popper.createPopper( + toggletip, + tipEl, + { + placement: placement, + modifiers: [ + { + name: 'flip', + options: { + fallbackPlacements: ['top', 'bottom', 'left', 'right'], + }, + }, + { + name: 'preventOverflow', + options: {} + } + ], + } + ); + toggletip.addEventListener('click', () => { + if (tipEl.classList.contains('show')) { + tipEl.classList.remove('show'); + tipInnerEl.innerHTML = ''; + } else { + window.setTimeout(() => { + tipInnerEl.innerHTML = message; + tipEl.classList.add('show'); + popperInst.update(); + }, 100); + } + }); + + // Close on outside click + document.addEventListener('click', (e) => { + if (toggletip !== e.target) { + tipEl.classList.remove('show'); + tipInnerEl.innerHTML = ''; + } + }); + + // Remove toggletip on Esc + toggletip.addEventListener('keydown', (e) => { + if ((e.keyCode || e.which) === 27) { + tipEl.classList.remove('show'); + tipInnerEl.innerHTML = ''; + } + }); + + // Remove on blur + toggletip.addEventListener('blur', () => { + tipEl.classList.remove('show'); + tipInnerEl.innerHTML = ''; + }); }); - // close tooltip if user clicks anything else than tooltip button - $('html').on('click', function onClickHtml(e) { - if (typeof $(e.target).parent().data('original-title') == 'undefined' && typeof $(e.target).data('original-title') == 'undefined') { - $('[data-toggle="tooltip"]').tooltip('hide'); - currentOpenTooltips = []; + } + + /** + * Hide all tooltips when Esc is pressed + * @param {Event} e Event + */ + function tooltipKeyDownHandler(e) { + if (e.which === 27) { + document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => bootstrap.Tooltip.getOrCreateInstance(el).hide()); + } + } + + /** + * Hide all tooltips with a click outside of a tooltip trigger + */ + function tooltipClickHandler() { + document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => bootstrap.Tooltip.getOrCreateInstance(el).hide()); + } + + /** + * Initialize tooltips and popovers + * @param {jQuery} _holder Holder to look for tooltip elements from + */ + function initToolTips(_holder) { + const holder = typeof _holder === 'undefined' ? document : unwrapJQuery(_holder); + // Supports also the old data-toggle attribute + holder.querySelectorAll('[data-bs-toggle="tooltip"],[data-bs-toggle="tooltip"],[data-toggle="tooltip-hover"]').forEach(el => { + if (null === el.dataset.bsToggle) { + el.dataset.bsToggle = 'tooltip'; } - }); - // close tooltip if esc-key pressed - $('html').on('keydown', function onClickHtml(e) { - if (e.which === 27) { - $('[data-toggle="tooltip"]').tooltip('hide'); - currentOpenTooltips = []; + if (el.dataset.originalTitle) { + el.dataset.bsTitle = el.dataset.originalTitle; + if (el.dataset.html) { + el.dataset.bsHtml = el.dataset.html; + } + if (!el.dataset.bsTrigger) { + el.dataset.bsTrigger = 'click'; + } + if (el.dataset.position) { + el.dataset.bsPosition = el.dataset.position; + } + } + if (el.dataset.toggle === 'tooltip-hover') { + el.dataset.bsDelay = '{"show": 500, "hide": 200}'; + el.dataset.bsToggle = 'tooltip'; + el.dataset.bsTrigger = 'hover'; } + + bootstrap.Tooltip.getOrCreateInstance(el); + + // Prevent link from opening if tooltip is placed inside link element: + el.querySelectorAll(':scope > i, :scope > span').forEach((i) => { + i.addEventListener('click', (event) => event.preventDefault()); + }); }); + + document.addEventListener('keydown', tooltipKeyDownHandler); + document.querySelector('html').addEventListener('click', tooltipClickHandler); + + initToggleTips(holder); } /** @@ -557,14 +646,23 @@ finna.layout = (function finnaLayout() { cancelRefresh(); } }); - $('#modal').on('show.bs.modal', function onShowModal() { - if ($('#modal').find('#authcontainer').length > 0) { - $('#modal .modal-dialog').addClass('modal-lg modal-lg-dynamic'); - } - }); - $('#modal').on('hidden.bs.modal', function onHiddenModal() { - $('#modal .modal-dialog.modal-lg-dynamic').removeClass('modal-lg'); - }); + const modalEl = document.getElementById('modal'); + if (modalEl) { + modalEl.addEventListener('shown.bs.modal', () => { + if (modalEl.querySelector('#authcontainer')) { + const modalDialogEl = modalEl.querySelector('.modal-dialog'); + if (modalDialogEl) { + modalDialogEl.classList.add('modal-lg', 'modal-lg-dynamic'); + } + } + }); + modalEl.addEventListener('hidden.bs.modal', () => { + const modalDialogEl = modalEl.querySelector('.modal-dialog'); + if (modalDialogEl) { + modalDialogEl.classList.remove('modal-lg', 'modal-lg-dynamic'); + } + }); + } } /** @@ -691,6 +789,10 @@ finna.layout = (function finnaLayout() { * Initialize priority navigation */ function initPriorityNav() { + const navWrapperEl = document.querySelector('.nav-wrapper'); + if (!navWrapperEl || typeof navWrapperEl.dataset.disablePriorityNav !== 'undefined') { + return; + } priorityNav.init({ mainNavWrapper: ".nav-wrapper", mainNav: ".nav-ul", @@ -774,7 +876,7 @@ finna.layout = (function finnaLayout() { // Hide tab from accordion $loginTabs.find('.tab-pane.active').removeClass('active'); // Deactivate any tab since it can't follow the state of a collapsed accordion - $loginTabs.find('.nav-tabs li.active').removeClass('active'); + $loginTabs.find('.nav-tabs > li > a.active').removeClass('active'); // Move tab content out from accordions $tabContent.insertAfter($('.login-accordion .accordion-heading').last()); } else { @@ -792,24 +894,34 @@ finna.layout = (function finnaLayout() { * @param {string} tabId Id of the tab to activate */ function _activateLoginTab(tabId) { - var $top = $('.login-tabs'); - $top.find('.tab-pane.active').removeClass('active'); - $top.find('li.' + tabId).tab('show'); - $top.find('.' + tabId + '-tab').addClass('active'); + const tabsEl = document.querySelector('.login-tabs'); + if (tabsEl) { + const newTabEl = tabsEl.querySelector('li.' + tabId); + if (newTabEl) { + const triggerEl = newTabEl.querySelector('a'); + bootstrap.Tab.getOrCreateInstance(triggerEl).show(); + } + } _toggleLoginAccordion(tabId); } + /** + * Handle a login tab click + * @param {HTMLElement} linkEl Tab link + */ + function handleLoginTabClick(linkEl) + { + const tabEl = linkEl.closest('li'); + if (tabEl && tabEl.dataset.bsTab) { + _activateLoginTab(tabEl.dataset.bsTab); + } + } + /** * Init login tabs */ function initLoginTabs() { - // Tabs - $('.login-tabs .nav-tabs a').on('click', function recordTabsClick() { - if (!$(this).closest('li').hasClass('active')) { - _activateLoginTab(this.className); - } - return false; - }); + document.querySelectorAll('.login-tabs .nav-tabs a').forEach(linkEl => linkEl.addEventListener('click', () => handleLoginTabClick(linkEl))); // Accordion $('.login-accordion .accordion-toggle').on('click', function accordionClicked() { @@ -846,19 +958,33 @@ finna.layout = (function finnaLayout() { */ function initHelpTabs() { if ($('.help-tabs')[0]) { + $('.help-tabs').removeAttr('role'); $('.help-tab').each(function initHelpTab() { - if ($(this).hasClass('active')) { - $(this).trigger("focus"); + const $li = $(this); + if ($li.hasClass('nav-item')) { + // Already converted + return; + } + + const tabContent = $li.text(); + $li.html('') + .addClass('nav-item') + .attr('tabindex', '-1') + .removeAttr('aria-selected') + .removeAttr('role'); + + const url = $li.data('url'); + const $a = $('') + .attr('href', url) + .attr('class', 'nav-link') + .text(tabContent) + .appendTo($li); + + if ($li.hasClass('active')) { + $a.addClass('active') + .attr('aria-current', 'page') + .trigger('focus'); } - var url = $(this).data('url'); - $(this).on("keydown", function onTabEnter(event) { - if (event.which === 13) { - window.location.href = url; - } - }); - $(this).on("click", function onTabClick() { - window.location.href = url; - }); }); } } diff --git a/themes/finna2/js/finna-linked-events.js b/themes/finna2/js/finna-linked-events.js index 45cfbecdeb0..eb438657935 100644 --- a/themes/finna2/js/finna-linked-events.js +++ b/themes/finna2/js/finna-linked-events.js @@ -174,7 +174,7 @@ finna.linkedEvents = (function finnaLinkedEvents() { /** * Toggle linked events accordion * @param {jQuery} container Container containing the linked events elements - * @param {jQuery} accordion Accordion in the linked events elements + * @param {jQuery} accordion Accordion in the linked events elements * @returns {boolean} Should content be loaded */ function toggleAccordion(container, accordion) { @@ -189,7 +189,7 @@ finna.linkedEvents = (function finnaLinkedEvents() { .removeClass('active') .attr('aria-selected', false); - container.find('.event-tab.active') + container.find('.event-tab .nav-link.active') .removeClass('active') .attr('aria-selected', false); @@ -197,7 +197,7 @@ finna.linkedEvents = (function finnaLinkedEvents() { .addClass('active') .attr('aria-selected', true); - container.find('.event-tab[id="' + accordion.data('id') + '"]') + container.find('.event-tab > .nav-link[id="' + accordion.data('id') + '"]') .addClass('active') .attr('aria-selected', true); @@ -221,7 +221,7 @@ finna.linkedEvents = (function finnaLinkedEvents() { var tabParams = {}; tabParams.query = accordion.data('params'); var tabs = accordion.closest('.event-tabs'); - tabs.find('.event-tab').removeClass('active'); + tabs.find('.event-tab .nav-link').removeClass('active'); if (toggleAccordion(container, accordion)) { getEvents(tabParams, handleMultipleEvents, false, container); } @@ -243,17 +243,17 @@ finna.linkedEvents = (function finnaLinkedEvents() { */ function initEventsTabs(id) { var container = $('.linked-events-tabs[id="' + id + '"]'); - var initial = container.find($('li.nav-item.event-tab.active')); + var initial = container.find($('li.nav-item.event-tab .nav-link.active')); var initialParams = {}; initialParams.query = initial.data('params'); getEvents(initialParams, handleMultipleEvents, false, container); - container.find($('li.nav-item.event-tab')).on('click', function eventTabClick() { + container.find($('li.nav-item.event-tab .nav-link')).on('click', function eventTabClick() { if ($(this).hasClass('active')) { return false; } var params = {}; params.query = $(this).data('params'); - container.find($('li.nav-item.event-tab')).removeClass('active').attr('aria-selected', 'false'); + container.find($('li.nav-item.event-tab .nav-link')).removeClass('active').attr('aria-selected', 'false'); $(this).addClass('active').attr('aria-selected', 'true'); var accordion = container.find('.accordion[data-id="' + $(this).attr('id') + '"'); container.find('.accordion').removeClass('active'); @@ -279,7 +279,7 @@ finna.linkedEvents = (function finnaLinkedEvents() { if (container.find($('.events-searchtools-container'))[0]) { var searchClick = function onSearchClick() { - var activeParams = container.find($('.event-tab.active')).data('params'); + var activeParams = container.find($('.event-tab .nav-link.active')).data('params'); var startDate = container.find($('.event-date-start'))[0].value ? {'start': container.find($('.event-date-start'))[0].value.replace(/\./g, '-')} : ''; diff --git a/themes/finna2/js/lib/autocomplete.js b/themes/finna2/js/lib/autocomplete.js index 6a1656582bb..9b258cd0f3b 100644 --- a/themes/finna2/js/lib/autocomplete.js +++ b/themes/finna2/js/lib/autocomplete.js @@ -171,7 +171,7 @@ } else if (type === 'isbn') { item.attr('data-title', data[i].match.title); item.attr('href', data[i].match.url); - item.append('
'); + item.append('
'); item.append(document.createTextNode('ISBN: ' + data[i].match.isbn)); item.wrapInner($('')); item.prepend('
'); diff --git a/themes/finna2/scss/components.scss b/themes/finna2/scss/components.scss index 71b89c4a1cd..d2b7ebe272e 100644 --- a/themes/finna2/scss/components.scss +++ b/themes/finna2/scss/components.scss @@ -4,6 +4,7 @@ @import 'components/finna-truncate'; @import 'components/finna-tag-list'; @import 'components/finna-nav'; +@import 'components/finna-toggletip'; @import 'components/finna-tooltip-btn'; @import 'components/finna-bazaar-browse-bar'; @import 'components/finna-multi-level-nav'; diff --git a/themes/finna2/scss/components/finna-nav.scss b/themes/finna2/scss/components/finna-nav.scss index 6c6a46353aa..385d516ab61 100644 --- a/themes/finna2/scss/components/finna-nav.scss +++ b/themes/finna2/scss/components/finna-nav.scss @@ -15,28 +15,8 @@ display: flex; justify-content: center; align-items: center; - margin-bottom: -1px; - border-top: 4px solid transparent; - border-right: 1px solid transparent; - border-bottom: 1px solid $nav-tabs-border-color; - border-left: 1px solid transparent; background-color: #ededed; - &.active, - &.active-trail { - border-top: 4px solid $nav-tabs-active-color; - border-right: 1px solid $nav-tabs-border-color; - border-bottom: 1px solid $body-bg; - border-left: 1px solid $nav-tabs-border-color; - background-color: transparent; - } - > a, - > a:hover, - > a:focus { - margin: 0; - border: 0; - padding: .6em .6em; - font-size: 1em; - } + > button { padding-left: 0; color: $nav-tabs-active-color; @@ -61,7 +41,7 @@ > li > a { color: $text-color; } - > li.active > a { + > li > a.active { font-weight: bold; } } diff --git a/themes/finna2/scss/components/finna-navbar.scss b/themes/finna2/scss/components/finna-navbar.scss index 560e701e97c..32f0c6871a8 100644 --- a/themes/finna2/scss/components/finna-navbar.scss +++ b/themes/finna2/scss/components/finna-navbar.scss @@ -3,10 +3,10 @@ @media(max-width: $grid-float-breakpoint-max) { .navbar-header { display: flex; - flex-direction: row-reverse; align-items: center; + flex: 1; } - .navbar-toggle { + .navbar-toggler { position: static; display: flex; justify-content: center; @@ -17,15 +17,39 @@ height: auto; max-width: none; line-height: normal; + text-decoration: none; } - .navbar-collapse > ul > li { - border-bottom: 1px solid $gray-lighter; + .navbar-collapse { + .dropdown-toggle { + width: 100%; + } + & > ul > li { + border-bottom: 1px solid $gray-lighter; + } + .dropdown-menu { + border: 0; + box-shadow: none; + margin-top: 0; + + > li { + border: 0; + } + + .dropdown-item { + border: 0; + padding-left: 16px; + padding-right: 16px; + } + } } - .navbar-nav > li > a { - margin-top: 0; - margin-bottom: 0; - padding-top: 16px; - padding-bottom: 16px; + .navbar-nav { + margin: 0; + + & > li > a { + margin-top: 0; + margin-bottom: 0; + padding: 16px; + } } } } @@ -36,15 +60,15 @@ &::after { content: '\e612'; } - .finna-navbar-component .navbar-toggle.collapsed &::after { + .finna-navbar-component .navbar-toggler.collapsed &::after { content: '\e613'; } } // Content navbar variation with own variables for customization. -$finna-navbar-content-color: mix($brand-primary, contrast($brand-primary), 5%) !default; -$finna-navbar-content-bg: $brand-primary !default; +$finna-navbar-content-color: mix($primary, contrast($primary), 5%) !default; +$finna-navbar-content-bg: $primary !default; $finna-navbar-content-border: $finna-navbar-content-bg !default; // Navbar links @@ -94,7 +118,7 @@ $finna-navbar-content-toggle-border-color: $finna-navbar-content-border !d background-color: $finna-navbar-content-link-hover-bg; } } - > .active > a { + > .active > a, a.active { &, &:hover, &:focus { @@ -102,7 +126,7 @@ $finna-navbar-content-toggle-border-color: $finna-navbar-content-border !d background-color: $finna-navbar-content-link-active-bg; } } - > .disabled > a { + > .disabled > a, a.disabled { &, &:hover, &:focus { @@ -113,7 +137,7 @@ $finna-navbar-content-toggle-border-color: $finna-navbar-content-border !d // Dropdown menu items // Remove background color from open dropdown - > .open > a { + > .open > a, a.open { &, &:hover, &:focus { @@ -123,7 +147,7 @@ $finna-navbar-content-toggle-border-color: $finna-navbar-content-border !d } } - .navbar-toggle { + .navbar-toggler { border-color: $finna-navbar-content-toggle-border-color; &:hover, &:focus { @@ -156,7 +180,7 @@ $finna-navbar-content-toggle-border-color: $finna-navbar-content-border !d background-color: $dropdown-link-hover-bg; } } - > .active > a { + > .active > a, a.active { &, &:hover, &:focus { @@ -164,7 +188,7 @@ $finna-navbar-content-toggle-border-color: $finna-navbar-content-border !d background-color: $dropdown-link-hover-bg; } } - > .disabled > a { + > .disabled > a, a.disabled { &, &:hover, &:focus { diff --git a/themes/finna2/scss/components/finna-toggletip.scss b/themes/finna2/scss/components/finna-toggletip.scss new file mode 100644 index 00000000000..6595c3308f6 --- /dev/null +++ b/themes/finna2/scss/components/finna-toggletip.scss @@ -0,0 +1,21 @@ +.finna-toggletip { + .finna-toggletip__button { + border: none; + cursor: pointer; + background-color: transparent; + + .finna-toggletip__icon { + cursor: pointer; + } + } + + .finna-toggletip__bubble { + &:not(.show) { + display: none; + } + + .finna-toggletip__bubble--inner { + display: block; + } + } +} diff --git a/themes/finna2/scss/components/finna-truncate.scss b/themes/finna2/scss/components/finna-truncate.scss index f5125745460..5f1f68a6e59 100644 --- a/themes/finna2/scss/components/finna-truncate.scss +++ b/themes/finna2/scss/components/finna-truncate.scss @@ -1,5 +1,5 @@ .finna-truncate { - overflow: hidden; + overflow-y: clip; &.height-based > :last-child { margin-bottom: 0; } diff --git a/themes/finna2/scss/finna-other.scss b/themes/finna2/scss/finna-other.scss index 5cbd2aa2ae1..e38700c5d16 100644 --- a/themes/finna2/scss/finna-other.scss +++ b/themes/finna2/scss/finna-other.scss @@ -155,12 +155,12 @@ i.fa.fa-search.backgrounding:before { } /* Input styles */ input[type=number].input-year { - -moz-appearance:textfield; + -moz-appearance:textfield !important; width: 5em; } input[type=number].input-year::-webkit-inner-spin-button, input[type=number].input-year::-webkit-outer-spin-button { - -webkit-appearance: none; + -webkit-appearance: none !important; margin: 0; } @@ -237,7 +237,7 @@ label.list-group-item {border-radius:0;font-weight:normal;margin-top:0;padding-l } } .slider-handle { - background: $brand-primary; + background: $primary; background-image:none; border:1px solid $gray-light; box-shadow:none; @@ -292,9 +292,16 @@ label.list-group-item {border-radius:0;font-weight:normal;margin-top:0;padding-l padding-top:600px; } +// Truncate +.truncate-done { + overflow-y: hidden; + // Add a bit of padding for focus rings: + padding-top: 2px; + padding-bottom: 2px; +} + //Finna mixins .truncate-field { - overflow: hidden; display: none; &.truncate-done { display: block; @@ -312,6 +319,7 @@ label.list-group-item {border-radius:0;font-weight:normal;margin-top:0;padding-l margin-top: 5px; margin-bottom: 5px; border: none; + color: $text-color; background-color: transparent; padding: 0; &.link-buttons { @@ -428,6 +436,8 @@ label.list-group-item {border-radius:0;font-weight:normal;margin-top:0;padding-l // Inverse of .table-striped .finna-table-striped { + --#{$prefix}table-bg: transparent; + > tbody > tr:nth-of-type(even) { background-color: $table-bg-accent; } @@ -435,7 +445,6 @@ label.list-group-item {border-radius:0;font-weight:normal;margin-top:0;padding-l // Hierarchy tree .hierarchy-tree-container .hierarchy-tree-search-form { - width: 250px; margin: 0; align-items: normal; gap: 0; @@ -445,6 +454,9 @@ label.list-group-item {border-radius:0;font-weight:normal;margin-top:0;padding-l border-right: none; border-radius: 4px 0 0 4px; } + .input-group { + max-width: 250px; + } .js-load-indicator { margin: 10px; } @@ -467,6 +479,11 @@ label.list-group-item {border-radius:0;font-weight:normal;margin-top:0;padding-l } .hierarchy-tree-container { .hierarchy-tree { + outline: 0; + &:focus-visible { + box-shadow: $focus-ring-box-shadow; + } + .hierarchy-tree__children, li:not(.hierarchy-tree__collection) { padding-left: 0.7rem; } @@ -475,7 +492,7 @@ label.list-group-item {border-radius:0;font-weight:normal;margin-top:0;padding-l } button { font-size: 1.3rem; - color: $brand-primary; + color: $primary; &:hover { background-color: $gray-lighter; border-radius: 4px; diff --git a/themes/finna2/scss/finna.scss b/themes/finna2/scss/finna.scss index 7205055c959..d41da9de995 100644 --- a/themes/finna2/scss/finna.scss +++ b/themes/finna2/scss/finna.scss @@ -1,22 +1,70 @@ -/* #SCSS> */ +// Include Bootstrap functions first (so you can manipulate colors, SVGs, calc, etc) @import "scss-functions"; +@import "bootstrap/scss/functions"; +// Include Font Awesome +$fa-font-path: "../../bootstrap5/css/vendor/font-awesome/webfonts" !default; +@import "vendor/font-awesome/fontawesome"; +@import "vendor/font-awesome/regular"; +@import "vendor/font-awesome/solid"; +@import "vendor/font-awesome/v4-shims"; + +// Include any variable overrides here @import "global/bootstrap-variable-overrides"; -@import "font-awesome/font-awesome"; +// Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets) +@import "bootstrap/scss/variables"; + +// Include any map overrides here +@import "bootstrap-map-overrides"; + +// Include remainder of required parts +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/root"; +@import "bootstrap/scss/reboot"; -// Bootstrap v3.4.1 -@import "bootstrap/bootstrap"; +// Optionally include any other parts as needed +@import "bootstrap/scss/accordion"; +@import "bootstrap/scss/alert"; +@import "bootstrap/scss/badge"; +@import "bootstrap/scss/breadcrumb"; +@import "bootstrap/scss/buttons"; +@import "bootstrap/scss/button-group"; +@import "bootstrap/scss/card"; +@import "bootstrap/scss/carousel"; +@import "bootstrap/scss/containers"; +@import "bootstrap/scss/dropdown"; +@import "bootstrap/scss/forms"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/helpers"; +@import "bootstrap/scss/images"; +@import "bootstrap/scss/list-group"; +@import "bootstrap/scss/modal"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/navbar"; +@import "bootstrap/scss/offcanvas"; +@import "bootstrap/scss/pagination"; +@import "bootstrap/scss/popover"; +@import "bootstrap/scss/tables"; +@import "bootstrap/scss/tooltip"; +@import "bootstrap/scss/transitions"; +@import "bootstrap/scss/type"; +@import "bootstrap/scss/utilities"; + +// Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` +@import "bootstrap/scss/utilities/api"; + +// Bootstrap 3 compatibility layer +@import "global/finna-bs3-compat"; // Finna variables @import "global/variables"; -// Bootstrap3 theme components -@import "../../bootstrap3/scss/components/cookie-consent/index"; -@import "../../bootstrap3/scss/components/keyboard"; -@import "../../bootstrap3/scss/components/trees"; -/* <#SCSS */ - +// Bootstrap5 theme components +@import "../../bootstrap5/scss/components/cookie-consent/index"; +@import "../../bootstrap5/scss/components/keyboard"; +@import "../../bootstrap5/scss/components/trees"; @import 'global'; @import 'finna-other'; diff --git a/themes/finna2/scss/finna/advanced-search.scss b/themes/finna2/scss/finna/advanced-search.scss index 5a5d922c848..2b067cfdab5 100644 --- a/themes/finna2/scss/finna/advanced-search.scss +++ b/themes/finna2/scss/finna/advanced-search.scss @@ -26,7 +26,7 @@ bottom: -15px; left: 15px; width: 60px; - background: $brand-primary; + background: $primary; color: white; line-height: 64px; text-align: center; @@ -164,7 +164,7 @@ } #groupJoin { padding: 0px 0px 20px; - border: 2px solid $brand-primary; + border: 2px solid $primary; border-top: none; margin-top: -10px; margin-bottom: 30px; @@ -325,7 +325,7 @@ &::before { padding-left: 5px; font-size: 1.5em; - color: $brand-primary; + color: $primary; display: block; font-family: finnaicons; content: "\e00f"; diff --git a/themes/finna2/scss/finna/audio-player.scss b/themes/finna2/scss/finna/audio-player.scss index 2e95d5659db..5f9f2d12fb7 100644 --- a/themes/finna2/scss/finna/audio-player.scss +++ b/themes/finna2/scss/finna/audio-player.scss @@ -28,7 +28,7 @@ } .audio-title-wrapper { - background-color: $brand-primary; + background-color: $primary; color: white; border-radius: 5px; position: relative; @@ -45,7 +45,7 @@ display: inline-block; border-radius: 10px; text-align: center; - color: $brand-primary; + color: $primary; position: absolute; top: calc(50% - 10px); left: 5px; @@ -90,7 +90,7 @@ .vjs-audio { background: transparent; - color: $brand-primary; + color: $primary; height: 60px !important; padding: 0; width: 100%; @@ -131,7 +131,7 @@ width: 30px; height: 30px; border-radius: 15px; - background-color: $brand-primary; + background-color: $primary; color: white; left: calc((100% - 30px) / 2); } @@ -146,7 +146,7 @@ display: block; top: 0%; width: 15%; - padding: 0; + padding: 0; } .vjs-current-time { @@ -163,7 +163,7 @@ top: 0; .vjs-play-progress { - background-color: $brand-primary; + background-color: $primary; } } diff --git a/themes/finna2/scss/finna/autocomplete.scss b/themes/finna2/scss/finna/autocomplete.scss index 03def426f92..12980d262b4 100644 --- a/themes/finna2/scss/finna/autocomplete.scss +++ b/themes/finna2/scss/finna/autocomplete.scss @@ -24,7 +24,7 @@ &.first {border-top-left-radius: 10px; border-top-right-radius: 10px;} &.last {border: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;} &.selected { - background-color: $brand-primary; + background-color: $primary; color: #fff; } &:not(.loading):not(.selected):hover { diff --git a/themes/finna2/scss/finna/browse.scss b/themes/finna2/scss/finna/browse.scss index 6e93316417d..403ef3a1ca3 100644 --- a/themes/finna2/scss/finna/browse.scss +++ b/themes/finna2/scss/finna/browse.scss @@ -10,7 +10,7 @@ section.main.template-dir-search.template-name-results.browse { section.template-dir-browse { & .browse.list-group { @media (max-width: $screen-xs-max) { - margin-top: 20px; + margin-top: 20px; } a.list-group-item:hover { text-decoration: underline; @@ -19,10 +19,10 @@ section.template-dir-browse { margin-top: 20px; } &:last-child { - margin-bottom: 25px; + margin-bottom: 25px; } & a.list-group-item { - display: inline-block; + display: inline-block; } & .widen { width: 100%; @@ -33,7 +33,7 @@ section.template-dir-browse { background-color: $gray-ultralight; } & a.list-group-item.active { - background-color: $brand-primary; + background-color: $primary; } } & .list-group-item.view-record { diff --git a/themes/finna2/scss/finna/browsebar.scss b/themes/finna2/scss/finna/browsebar.scss index 2c38fa5f2a2..a143244e4f6 100644 --- a/themes/finna2/scss/finna/browsebar.scss +++ b/themes/finna2/scss/finna/browsebar.scss @@ -1,36 +1,54 @@ .browsebar { width: 100%; background-color: $finna-browsebar-background; - bottom:0; + bottom: 0; color: $finna-browsebar-link-color; + padding-top: 2px; } .browsebar .nav>li .iconlabel:before, .browsebar .nav-dropdown-label.iconlabel:before, .browsebar .dropdown-menu a.iconlabel:before{ - vertical-align: bottom; + vertical-align: center; font-size: 1.3em; - margin-right: 0.5em; + margin-right: 0.5em; } .browsebar .navbar { border-radius: 0; border: none; max-width: none; background-color: transparent; + + .nav-wrapper:not(.priority-nav) .nav-ul { + flex-direction: initial; + } } .browsebar .nav>li { line-height: normal; } -.browsebar .navbar .navbar-nav>li>a { - color: $finna-browsebar-link-color; - padding-left: 5px; - padding-right: 5px; - font-size: 1.1em; - height: 64px; - line-height: 64px; - margin-top: 0; - margin-bottom: 0; - i.fa { - margin-right: 0.5em; +.browsebar .navbar { + --#{$prefix}navbar-padding-y: 0; + + .navbar-nav { + margin: 0; + + & > li > a { + color: $finna-browsebar-link-color; + padding-left: 5px; + padding-right: 5px; + font-size: 1.1em; + height: 60px; + line-height: 60px; + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + i.fa { + margin-right: 0.5em; + } + display: inline-flex; + align-items: baseline; + gap: 0.2rem; + } } } .browsebar button .iconlabel { @@ -43,10 +61,9 @@ color: mix(#ffffff, $finna-browsebar-background, 78%); text-transform: uppercase; font-size: 0.9em; - vertical-align: middle; font-weight: 600; padding-right: 25px; - line-height: 64px; + line-height: 60px; float: left; } @media (max-width: $screen-xs-max) { @@ -64,27 +81,29 @@ .browsebar { .priority-nav__dropdown { left: 0; - top: 30px; + top: 45px; li > a.iconlabel { margin: 0px; } } + .dropdown-menu-wrapper { + display: inline-flex; + } .nav-dropdown-toggle { - height: 64px; + height: 60px; + line-height: 60px; font-size: 1.1em; border: none; background-color: transparent; color: $finna-browsebar-link-color; padding: 0; padding-left: 1em; - line-height: normal; &:before { content: "\e00d"; font-family: finnaicons; font-size: 1.3em; margin-right: 0.5em; padding-right: 3px; - vertical-align: bottom; } &:after { font-family: finnaicons; @@ -104,6 +123,8 @@ } } nav.navbar { + // `display: block` required for priority-nav + display: block; width: 100%; float: left; .nav-wrapper { diff --git a/themes/finna2/scss/finna/common.scss b/themes/finna2/scss/finna/common.scss index 6b564933bdd..22497b15857 100644 --- a/themes/finna2/scss/finna/common.scss +++ b/themes/finna2/scss/finna/common.scss @@ -27,12 +27,6 @@ } } -.input-group { - .form-control { - width: auto; - } -} - .media, .media-body { overflow: visible; @@ -150,16 +144,16 @@ /* Site status bar */ .site-status-bar { color: #fff; - background-color: $brand-info; + background-color: $info; padding-top: 0.6em; padding-bottom: 0.6em; text-align: center; z-index: 1; &.site-status-beta { - background-color: $brand-warning; + background-color: $warning; } &.site-status-disabled { - background-color: $brand-danger; + background-color: $danger; } &.site-status-production { display: none; diff --git a/themes/finna2/scss/finna/content.scss b/themes/finna2/scss/finna/content.scss index 57947b8f9c7..e327acf96b3 100644 --- a/themes/finna2/scss/finna/content.scss +++ b/themes/finna2/scss/finna/content.scss @@ -48,7 +48,7 @@ h1.content-header { text-transform: uppercase; margin: 0; padding-top: 0.4em; padding-bottom: 0em; } - p, ul, ol { + p, ul:not(.nav-tabs), ol { font-size: $content-font-size-base; line-height: $content-line-height-base; margin-bottom: 15px; @@ -106,6 +106,10 @@ h1.content-header { @media(max-width: $screen-sm){ width: 50%; } + a { + // Fixes :focus-visible + display: block; + } } .organisation-list-group { &::after { @@ -128,7 +132,6 @@ ul.nav-tabs.help-tabs { color: $header-text-color; font-size: 24px; font-weight: 500; - padding: 10px 15px; @media(max-width: $screen-lg){ font-size: 20px; } @@ -168,13 +171,13 @@ ul.nav-tabs.help-tabs { display: inline-block; padding-bottom: 0.5em; > a { - color: $brand-primary; - border: 1px solid $brand-primary; + color: $primary; + border: 1px solid $primary; padding: 0.5em; &:hover, &:focus { color: #fff; - background: $brand-primary; + background: $primary; } } } diff --git a/themes/finna2/scss/finna/external-data.scss b/themes/finna2/scss/finna/external-data.scss index c82c603c1eb..0bc9de4a10e 100644 --- a/themes/finna2/scss/finna/external-data.scss +++ b/themes/finna2/scss/finna/external-data.scss @@ -81,7 +81,7 @@ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-size: 18px; font-weight: 500; - background-color: $brand-primary; + background-color: $primary; color: white; padding: 10px; } diff --git a/themes/finna2/scss/finna/facets.scss b/themes/finna2/scss/finna/facets.scss index f94df69d977..414bfff7cc3 100644 --- a/themes/finna2/scss/finna/facets.scss +++ b/themes/finna2/scss/finna/facets.scss @@ -7,13 +7,19 @@ color: $action-link-color; } -div.facet > a { - min-width: 0; - > span.text, > span.facet-value { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - display: inline-block; +div.facet { + ul { + margin-bottom: 0; + } + + > a { + min-width: 0; + > span.text, > span.facet-value { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + display: inline-block; + } } } @@ -92,12 +98,14 @@ div.facet > a { .more-less-btn-wrapper { border-bottom: none; + padding: 1px; } .more-less-btn-wrapper .btn, a.more-narrow-toggle { display: flex; align-items: baseline; - padding: 4px 0 0 8px; + padding: 0 0 0 4px; + margin: 4px; border-radius: 0px; color: $gray; background: transparent; @@ -106,6 +114,9 @@ div.facet > a { text-transform: uppercase; text-decoration: none; box-shadow: none; + &:focus-visible { + box-shadow: $focus-ring-box-shadow; + } } .list-group-item i.fa.fa-check-square-o { @@ -170,7 +181,7 @@ span.badge.cb-facet { margin-bottom: 1rem; .facet { - padding: 3px 0 2px 8px; + padding: 3px 3px 2px 8px; display: flex; .text { flex-grow: 1; @@ -193,7 +204,7 @@ span.badge.cb-facet { display: none; } - [data-toggle="collapse"] { + [data-toggle="collapse"], [data-bs-toggle="collapse"] { cursor: pointer; } @@ -256,7 +267,6 @@ span.badge.cb-facet { margin-bottom: 5px; .btn-group { a { - border-radius: 15px; padding: 5px 10px; border: 1px solid $action-link-color; color: $action-link-color; @@ -317,7 +327,7 @@ span.badge.cb-facet { font-size: 1.2em; vertical-align: baseline; display: table-cell; - color: $brand-primary; + color: $primary; } .info { padding-left: 5px; @@ -443,68 +453,12 @@ span.badge.cb-facet { } li { - display: flex; - flex-wrap: wrap; - align-items: baseline; - // Ensure that there is enough room for a button focus outline: - padding-left: .2rem; border-bottom: none; .facet-tree__toggle-expanded { - flex: 1 1; - border: 0; - background: none; - max-width: 1.5em; - padding: 0; - - &:hover { - background-color: $list-group-hover-bg; - } - - &[aria-expanded=false] { - .facet-tree__collapse { - display: none; - } - & ~ ul { - display: none; - } - } - &[aria-expanded=true] .facet-tree__expand { - display: none; - } - } - - .facet-tree__item-container { - // Leave space for the open/close icon (see above): - width: calc(100% - 1.5em); - - .text { - // Leave space for the badge: - width: calc(100% - 1.5em); - } - - &--exclude .text { - // Leave space for the badge and exclude link: - width: calc(100% - 3.0em); - } - - .facet-value { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - display: inline; - } - } - - // Child items: - ul { - padding-left: 1rem; - flex: 1; - .facet { - // Smaller padding to make the list a bit more condensed: - padding-top: 0.3rem; - padding-bottom: 0.3rem; - } + color: $text-color; + // Fix focus ring: + margin-right: 3px; } } @@ -512,10 +466,4 @@ span.badge.cb-facet { border: 0; padding-left: .1rem; } - - // Make the first child level start a bit higher to counter the padding of top - // level items: - & > li > ul { - margin-top: -0.2rem; - } } diff --git a/themes/finna2/scss/finna/feed.scss b/themes/finna2/scss/finna/feed.scss index ba9b5d0d74a..26abbdbd637 100644 --- a/themes/finna2/scss/finna/feed.scss +++ b/themes/finna2/scss/finna/feed.scss @@ -260,33 +260,34 @@ .feed-nav-pills { width: 100%; margin-bottom: 6px; - > li { - float: left; - margin-right: 6px; - // Links rendered as pills - > a { + > .nav-item { + float: left; + margin-right: 6px; + // Links rendered as pills + > .nav-link { border-radius: $feed-nav-pills-border-radius; background-color: $feed-nav-pills-bg; color: $feed-nav-pills-color; border: $feed-nav-pills-border; padding: $feed-nav-pills-padding; - } - + li { + font-weight: normal; + } + + .nav-item { margin-bottom: 6px; - } - // Active state - &.active > a { + } + // Active state + > .nav-link.active { color: $feed-nav-pills-active-color; background-color: $feed-nav-pills-active-bg; - border-color: $feed-nav-pills-active-border; + border: $feed-nav-pills-active-border; &:hover, &:focus { - color: $feed-nav-pills-active-hover-color; - background-color: $feed-nav-pills-active-hover-bg; - border: $feed-nav-pills-active-hover-border; + color: $feed-nav-pills-active-hover-color; + background-color: $feed-nav-pills-active-hover-bg; + border: $feed-nav-pills-active-hover-border; } - } } + } } } @@ -493,7 +494,7 @@ .event-geolocation { text-transform: uppercase; font-size: 0.84em; - color: $brand-primary; + color: $primary; font-weight: bold; margin-left: 10px; &:hover { @@ -587,12 +588,18 @@ finna-feed { flex-direction: row; align-items: center; position: relative; + @media (max-width: $screen-sm-max) { + // Leave room for scroll buttons + margin-left: 1rem; + margin-right: 1rem; + } } .carousel-hover-title { font-size: 14px; font-weight: 900; color: $carousel-slide-header-color; - p { + span { + display: block; margin: 0; width: 100%; overflow-wrap: anywhere; @@ -608,7 +615,7 @@ finna-feed { position: sticky; top: 0; } - .carousel-hover-title, .carousel-slide-header p { + .carousel-hover-title, .carousel-slide-header span { overflow-wrap: break-word; } .carousel-hover-date { @@ -661,7 +668,8 @@ finna-feed { } } .carousel-slide-header { - p { + span { + display: block; .carousel-date { display: block; font-weight: 400; @@ -710,7 +718,7 @@ finna-feed { outline: none; border-radius: 50%; &.is-active { - background-color: $brand-primary; + background-color: $primary; } &:focus { outline: 2px solid $action-link-color; @@ -747,7 +755,7 @@ finna-feed.carousel.splide--ltr { z-index: 1; } } - .carousel-slide-header p:not(.title-bottom) { + .carousel-slide-header > span:not(.title-bottom) { opacity: 0; } .carousel-text.scrollable { @@ -769,7 +777,7 @@ finna-feed.carousel.splide--ltr { z-index: 1; opacity: 1; } - .carousel-slide-header p:not(.title-bottom) { + .carousel-slide-header > span:not(.title-bottom) { opacity: 0; } .carousel-text.scrollable { @@ -846,7 +854,8 @@ finna-feed.carousel.splide--ltr { &.carousel-slide-header-bottom { position: relative; } - p { + > span { + display: block; position: relative; bottom: 0; width: 100%; diff --git a/themes/finna2/scss/finna/finna-dateinput.scss b/themes/finna2/scss/finna/finna-dateinput.scss index 15c06d571e8..06a21f4097d 100644 --- a/themes/finna2/scss/finna/finna-dateinput.scss +++ b/themes/finna2/scss/finna/finna-dateinput.scss @@ -5,7 +5,7 @@ } .datepicker-toggle { padding: $padding-base-vertical 6px; - border-color: $input-border; + border-color: $input-border-color; border-width: 1px; margin-top: 0; margin-bottom: 0; @@ -18,7 +18,7 @@ display: none; background: #fff; padding: 10px; - border: 1px solid #666; + border: 1px solid $input-border-color; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: $zindex-datepicker; diff --git a/themes/finna2/scss/finna/finna-header.scss b/themes/finna2/scss/finna/finna-header.scss index 272195803e6..09647dc3c66 100644 --- a/themes/finna2/scss/finna/finna-header.scss +++ b/themes/finna2/scss/finna/finna-header.scss @@ -168,7 +168,7 @@ section.main.template-dir-feedcontent.template-name-content .container-fluid.fin line-height: 1.5em; } i { - color: $brand-primary; + color: $primary; } .btn, .dropdown { i { diff --git a/themes/finna2/scss/finna/footer.scss b/themes/finna2/scss/finna/footer.scss index 4f6e53fd559..995ffb04d02 100644 --- a/themes/finna2/scss/finna/footer.scss +++ b/themes/finna2/scss/finna/footer.scss @@ -46,6 +46,7 @@ footer { .footer-container { display: flex; width: 100%; + gap: $grid-gutter-width; } .footer-column { flex: 0 1 100%; diff --git a/themes/finna2/scss/finna/forms.scss b/themes/finna2/scss/finna/forms.scss index 23609e78943..f252be21fe6 100644 --- a/themes/finna2/scss/finna/forms.scss +++ b/themes/finna2/scss/finna/forms.scss @@ -59,7 +59,9 @@ input, input.form-control { justify-content: center; border: none; background: $btn-primary-bg; - box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.3); + &:not(:focus-visible) { + box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.3); + } &:hover { background: darken($btn-primary-bg, 5%); @@ -98,6 +100,10 @@ input, input.form-control { color: $gray; padding-left: 10px; height: 48px; + &:focus-visible { + outline: 0; + box-shadow: $focus-ring-box-shadow; + } @media (max-width: $screen-xs-max) { width: percentage(($finna-search-input-width - 0.06)); @@ -142,16 +148,18 @@ input, input.form-control { background: transparent; box-shadow: none; color: $gray; + height: 48px; margin: auto; a { color: black; } .dropdown-toggle { min-width: 110px; - display: inline-block; + display: inline-flex; + align-content: center; text-align: right; height: inherit; - padding: 8px 0px; + padding: 6px 0px; } li { text-align: left; diff --git a/themes/finna2/scss/finna/headings.scss b/themes/finna2/scss/finna/headings.scss index f23efa5911f..b98c2527018 100644 --- a/themes/finna2/scss/finna/headings.scss +++ b/themes/finna2/scss/finna/headings.scss @@ -1,10 +1,3 @@ -h1, .h1, -h2, .h2, -h3, .h3 { - margin-top: $line-height-computed; - margin-bottom: ($line-height-computed); -} - // Finna text styles .finna-main-header h3 { margin: 0; diff --git a/themes/finna2/scss/finna/highlight.scss b/themes/finna2/scss/finna/highlight.scss index 436c0667d06..5f7c95dcdd9 100644 --- a/themes/finna2/scss/finna/highlight.scss +++ b/themes/finna2/scss/finna/highlight.scss @@ -3,10 +3,10 @@ color: $gray-light; } .hljs-tag { - color: $brand-primary; + color: $primary; } .hljs-title { - color: $brand-primary; + color: $primary; } .hljs-attribute { color: #1d3e81; diff --git a/themes/finna2/scss/finna/holdings.scss b/themes/finna2/scss/finna/holdings.scss index 547aca14321..1371366c7a8 100644 --- a/themes/finna2/scss/finna/holdings.scss +++ b/themes/finna2/scss/finna/holdings.scss @@ -8,19 +8,19 @@ } } .status-available-icon { - color: $brand-success; + color: $success; } .status-unavailable-icon { - color: $brand-danger; + color: $danger; } .status-available .status-icon { - color: $brand-success; + color: $success; } .status-unavailable .status-icon { - color: $brand-danger; + color: $danger; } .status-uncertain .status-icon, .status-unknown .status-icon { - color: $brand-warning; + color: $warning; } .dedup-select { max-width: 100%; @@ -189,14 +189,14 @@ .status-available { color: $state-success-text; .icon { - color: $brand-success; + color: $success; } } .status-unavailable { - color: $brand-danger; + color: $danger; } .status-uncertain, .status-unknown { - color: $brand-warning; + color: $warning; } } .holdings-group:not(.headers+.holdings-group) { @@ -228,6 +228,10 @@ &:hover { cursor: pointer; } + &:focus-visible { + outline: 0; + box-shadow: $focus-ring-box-shadow; + } .location { flex: 1 0 40%; border-top: none; @@ -352,6 +356,7 @@ } .copy-details { padding: 8px 15px 8px 31px; + margin-top: 4px; @include clearfix(); &:nth-child(odd):not(.group-heading) { @@ -470,11 +475,6 @@ } .holdings-container.root > .header { margin-bottom: 3px; - .info { - @media (max-width: $screen-xs-max) { - float: none; - } - } } .holdings-container.collapsible > .holdings:not(.root) { padding-left: 10px; @@ -573,6 +573,7 @@ } .title-hold { float: left; + margin-left: 0; a.btn { white-space: pre-wrap; } diff --git a/themes/finna2/scss/finna/home.scss b/themes/finna2/scss/finna/home.scss index 584940be6d6..6cd5ec439ea 100644 --- a/themes/finna2/scss/finna/home.scss +++ b/themes/finna2/scss/finna/home.scss @@ -25,7 +25,7 @@ line-height: 1.4em; font-weight: bold; & .brand-third { - color: $brand-third; + color: $third; } } .introduction h3 { @@ -48,7 +48,7 @@ h1.introductionText, h2.introductionText, h3.introductionText { } } h1.introductionText > em { - color: $brand-secondary; + color: $secondary; } h2.introductionText > em, h3.introductionText > em { color: $link-color; diff --git a/themes/finna2/scss/finna/image-popup.scss b/themes/finna2/scss/finna/image-popup.scss index 9755d77baf4..0b9e514c3c6 100644 --- a/themes/finna2/scss/finna/image-popup.scss +++ b/themes/finna2/scss/finna/image-popup.scss @@ -59,6 +59,10 @@ font-size: 24px; text-shadow: 2px 2px 2px black; + &:focus-visible { + box-shadow: $focus-ring-light-box-shadow; + } + @media (min-width: $screen-sm-min) { right: -30px; } @@ -130,6 +134,7 @@ padding: 0; appearance: none; font-size: $font-size-icon-large; + color: #fff; background-color: transparent; border: none; cursor: pointer; @@ -143,9 +148,6 @@ &:last-child { border-bottom: none; } - i { - cursor: pointer; - } &.inactive { color: $gray-lighter; cursor: not-allowed; @@ -153,6 +155,12 @@ cursor: not-allowed; } } + &:focus-visible { + box-shadow: $focus-ring-light-box-shadow; + } + i { + cursor: pointer; + } } } .next-image { @@ -173,6 +181,11 @@ .paginator-canvas & { background-color: rgba(138, 138, 138, 0.9); + + &:focus-visible { + outline: 0; + box-shadow: $focus-ring-light-box-shadow; + } } .icon { text-shadow: 1px 1px 2px #555; @@ -319,6 +332,10 @@ padding: 10px; overflow-y: auto; width: 100%; + &:focus-visible { + outline: 0; + box-shadow: $focus-ring-box-shadow; + } @media (min-width: $screen-sm-min) { max-width: 400px; @@ -481,7 +498,7 @@ } .cc-rights a { - color: $brand-primary; + color: $primary; } .copyright-meaning { @@ -561,6 +578,10 @@ height: 96px; max-width: 96px; } + &:focus-visible { + outline: 0; + box-shadow: $focus-ring-light-box-shadow; + } } } .paginator-info { @@ -669,6 +690,11 @@ } .finna-popup &:not(:disabled){ color: white; + + &:focus-visible { + outline: 0; + box-shadow: $focus-ring-light-box-shadow; + } } &:disabled { background-color: #d6d6d600; @@ -710,7 +736,7 @@ font-style: initial; } &.current { - border: 0.2em solid $brand-primary; + border: 0.2em solid $primary; } &.truncate-change { opacity: 0; diff --git a/themes/finna2/scss/finna/library-cards.scss b/themes/finna2/scss/finna/library-cards.scss index d0f13c9cc30..d7d17811ad0 100644 --- a/themes/finna2/scss/finna/library-cards.scss +++ b/themes/finna2/scss/finna/library-cards.scss @@ -19,7 +19,7 @@ padding: 3px 7px; color: black; background-color: white; - border: 1px solid $input-border; + border: 1px solid $input-border-color; border-radius: $finna-button-radius; display: inline-block; margin-top: -7px; @@ -52,7 +52,7 @@ .dropdown > a { background: $body-bg; color: $gray; - border: 1px solid $input-border; + border: 1px solid $input-border-color; } } } diff --git a/themes/finna2/scss/finna/login.scss b/themes/finna2/scss/finna/login.scss index d4a29f0ab30..6a3463c5adc 100644 --- a/themes/finna2/scss/finna/login.scss +++ b/themes/finna2/scss/finna/login.scss @@ -9,7 +9,7 @@ float: left; margin-top: 0.4em; margin-left: 0.5em; - color: $brand-primary; + color: $primary; @media (max-width: $screen-xs-max) { margin-top: 0; } @@ -28,7 +28,7 @@ font-weight: bold; } .login-description-terms, .register-description { - background-color: $state-info-bg; + background-color: $info-bg-subtle; padding: 2em; padding-left: 2.5em; margin-bottom: 1em; diff --git a/themes/finna2/scss/finna/mobile-toolbar.scss b/themes/finna2/scss/finna/mobile-toolbar.scss index 82b00846876..a2a1837e264 100644 --- a/themes/finna2/scss/finna/mobile-toolbar.scss +++ b/themes/finna2/scss/finna/mobile-toolbar.scss @@ -13,7 +13,7 @@ margin-left: -36px; border: 2px solid $gray; } - .nav-pills.mobile-actions, .nav-pills.mobile-sharing { + .nav-pills.mobile-actions, .nav-pills.mobile-sharing, .nav-pills.library-link { float: left; & > li { padding-top: 0px; @@ -22,8 +22,7 @@ margin: 0; & > a { - padding: 10px 9px 0px 9px; - height: 44px; + padding: 10px; margin-top: 0px; border-radius: 0; color: $sidebar-header-text-color; @@ -39,7 +38,8 @@ } } & .nav-pills.mobile-sharing .whatsapp a, .share-buttons-toolbox a, .nav-pills.mobile-sharing .mail-record a { - display: inline-block; + display: inline-flex; + justify-content: center; padding: 8px; margin: 0px; &:hover { @@ -50,6 +50,8 @@ color: $btn-primary-color; background: $btn-primary-bg; border-radius: 0; + align-items: initial; + display: initial; } .dropdown-menu { position: absolute; @@ -71,6 +73,8 @@ color: $body-bg; padding: 6px 10px 2px 4px; line-height: 2em; + width: 100%; + display: inline-flex; } } .export-list > a { @@ -79,28 +83,9 @@ } } .nav-pills.library-link { - color: $body-bg; float: right; font-size: 1.2em; - padding-top: 5px; - padding-right: 5px; - padding-left: 5px; - height: 100%; - font-size: 1.2em; - & > li { - padding-top: 0px; - margin: 3px 0px; - } - span { - margin: 0; - text-align: right; - display: block; - line-height: 1.2em; - } - &:hover { - cursor: pointer; - background-color: rgba(255, 255, 255, 0.2); - } + line-height: 1.2em; } li.btn-bookbag-toggle a{ position: relative; diff --git a/themes/finna2/scss/finna/modal.scss b/themes/finna2/scss/finna/modal.scss index c42ab0f1e62..24d4bdcebab 100644 --- a/themes/finna2/scss/finna/modal.scss +++ b/themes/finna2/scss/finna/modal.scss @@ -29,6 +29,7 @@ top: 14px; z-index: 2; opacity: 0.8; + background: none; &:after { font-family: finnaicons; content: '\e02e'; @@ -46,15 +47,15 @@ color: $modal-header-color; font-size: $content-headings-font-size-h4; line-height: $modal-title-line-height; - border-top-left-radius: $border-radius-large - 1; - border-top-right-radius: $border-radius-large - 1; + border-top-left-radius: $modal-content-inner-border-radius; + border-top-right-radius: $modal-content-inner-border-radius; border-bottom: 1px solid $modal-header-border-color; margin: -$modal-inner-padding; - margin-bottom: $modal-title-padding; + margin-bottom: 2 * $modal-header-padding-y; padding: $modal-title-padding; // Account for close button padding-right: 45px; - min-height: ($modal-title-padding + $modal-title-line-height); + min-height: $modal-header-padding-y * $modal-title-line-height; } & .alert-success { margin-top: $modal-title-padding; diff --git a/themes/finna2/scss/finna/mylist.scss b/themes/finna2/scss/finna/mylist.scss index 4d765bb9ea3..63a2c207cab 100644 --- a/themes/finna2/scss/finna/mylist.scss +++ b/themes/finna2/scss/finna/mylist.scss @@ -55,7 +55,7 @@ > li { max-width: none; border: none; - + > a { padding: 3px 20px; &.active { @@ -75,7 +75,7 @@ white-space: nowrap; margin-right: 5px; } - + .public-favorite-list { padding: 2px; &:before { @@ -151,7 +151,9 @@ margin: 0; border-bottom: 1px solid $gray-lighter; @media (max-width: $screen-xs-max) { - @include make-row(); + margin-right: calc(-0.5 * var(--bs-gutter-x)); + margin-left: calc(-0.5 * var(--bs-gutter-x)); + @include clearfix; } } @@ -308,10 +310,10 @@ border: 1px solid $gray-lighter; .info { font-weight: bold; - color: $brand-danger; + color: $danger; i { border-radius: 50%; - border: 2px solid $brand-danger; + border: 2px solid $danger; font-size: 1em; padding: 1px; } diff --git a/themes/finna2/scss/finna/myresearch.scss b/themes/finna2/scss/finna/myresearch.scss index 012712a0269..b0279727b36 100644 --- a/themes/finna2/scss/finna/myresearch.scss +++ b/themes/finna2/scss/finna/myresearch.scss @@ -3,7 +3,9 @@ margin: 0; word-wrap: break-word; @media(max-width: $screen-xs-max) { - @include make-row(); + margin-right: calc(-0.5 * var(--bs-gutter-x)); + margin-left: calc(-0.5 * var(--bs-gutter-x)); + @include clearfix; } &:nth-child(odd) { background: $table-bg-accent; @@ -120,7 +122,7 @@ .btn-group { margin-right: 20px; .btn { - margin-right: 1px; + margin-right: calc(var(--#{$prefix}border-width) + 1px); &:last-child { margin-right: 0; } @@ -403,12 +405,6 @@ p.no-content-message { margin-top: 5px; } - .borrowing-block-container { - p.borrowing-block { - padding: 0; - margin-bottom: 0; - } - } .support-notice { margin: 0; margin-top: 5px; @@ -416,7 +412,7 @@ } .library-card-terms { - background-color: $state-info-bg; + background-color: $info-bg-subtle; padding: 2em; padding-left: 2.5em; margin-bottom: 1em; @@ -551,7 +547,9 @@ margin: 0; @media (max-width: $screen-md) { padding: 0px 15px; - @include make-row(); + margin-right: calc(-0.5 * var(--bs-gutter-x)); + margin-left: calc(-0.5 * var(--bs-gutter-x)); + @include clearfix; } .toolbar-sticky { position: sticky; @@ -646,7 +644,7 @@ form#renewals, form#update_holds, form#purge_history { border-collapse: separate; margin-top: 10px; - &:not(.fines-table) { + &:not(.fines-table):not(.library-cards):not(.search-history-table) { border-top: none; } &.online-payment { @@ -668,7 +666,6 @@ form#renewals, form#update_holds, form#purge_history { } .headers th { background: none; - border-top: 1px solid #d1d1d1; &:last-child { border-right: none; } @@ -779,7 +776,7 @@ form#renewals, form#update_holds, form#purge_history { border-top: none; } &.menu-header { - background-color: $brand-third; + background-color: $third; > h1 { text-transform: none; color: $myresearch-menu-header-font-color; @@ -845,7 +842,7 @@ form#renewals, form#update_holds, form#purge_history { } } -// Status badges +// Menu style .myresearch-menu, #my-info-dropdown-menu { a { display: flex; @@ -855,6 +852,7 @@ form#renewals, form#update_holds, form#purge_history { } &:hover { background-color: $gray-lighter; + text-decoration: none; } &:focus { background-color: $nav-link-hover-bg; @@ -863,31 +861,40 @@ form#renewals, form#update_holds, form#purge_history { margin-left: 0.5rem; } &.active { - background-color: $brand-primary; + background-color: $primary; color: #fff; } } +} +// Status badges +.myresearch-menu, #my-info-dropdown-menu { .status { float: right; .badge { border-radius: 2px; margin: 0 2px; - border: 1px solid; /* color inherited from bootstrap */ + border: 1px solid $gray-lighter; height: 22px; padding: 0 7px; + color: var(--#{$prefix}body-color); + background-color: var(--#{$prefix}body-bg); + border: 1px solid $gray-lighter; &.account-info { - color: $state-success-text; - background-color: $state-success-bg; + color: var(--#{$prefix}success-text-emphasis); + background-color: var(--#{$prefix}success-bg-subtle); + border-color: var(--#{$prefix}success-border-subtle); } &.account-warning { - color: $state-warning-text; - background-color: $state-warning-bg; + color: var(--#{$prefix}warning-text-emphasis); + background-color: var(--#{$prefix}warning-bg-subtle); + border-color: var(--#{$prefix}warning-border-subtle); } &.account-alert { - color: $state-danger-text; - background-color: $state-danger-bg; + color: var(--#{$prefix}danger-text-emphasis); + background-color: var(--#{$prefix}danger-bg-subtle); + border-color: var(--#{$prefix}danger-border-subtle); } } } diff --git a/themes/finna2/scss/finna/navigation.scss b/themes/finna2/scss/finna/navigation.scss index d5dfddf9672..efedcb1925b 100644 --- a/themes/finna2/scss/finna/navigation.scss +++ b/themes/finna2/scss/finna/navigation.scss @@ -25,9 +25,14 @@ } } -@media (max-width: $screen-md-max) { - .finna-navbar .nav >li>a { - padding: 0 6px; +@media (max-width: $screen-sm-max) { + .finna-navbar { + min-height: 64px; + + .nav > li > a { + padding-left: 6px; + padding-right: 6px; + } } } @@ -77,6 +82,29 @@ color: $action-link-color; } } + + .finna-navbar .navbar-collapse { + .dropdown-toggle { + width: 100%; + } + & > ul > li { + border-bottom: 1px solid $gray-lighter; + } + .dropdown-menu { + border: 0; + box-shadow: none; + margin-top: 0; + + & > li { + border-bottom: none; + } + .dropdown-item { + border: 0; + padding-left: 16px; + padding-right: 16px; + } + } + } } // content-navigation-menu @@ -84,22 +112,23 @@ margin: 20px 0px; } -.dropdown-toggle:focus { - outline: 1px dotted #212121; - outline: 5px auto -webkit-focus-ring-color; -} - .finna-navbar { - .navbar-nav > li > a, - .navbar-collapse.in .dropdown-menu a { - color: $header-text-color; - padding: 0 10px; + // #loginOptions.btn-uppercase included for back-compatibility + .login-button, #loginOptions .btn-uppercase { + display: block; + text-transform: uppercase; } - // remove exclamation mark from fines row - .fines-status .badge.overdue { - &:before { - content:""; - } + .nav-item > .nav-link { + display: flex; + gap: 0.25rem; + --#{$prefix}nav-link-color: #{$header-text-color}; + --#{$prefix}nav-link-hover-color: #{$header-text-hover-color}; + --#{$prefix}navbar-active-color: #{$header-text-active-color}; + } + .dropdown-menu > li > .dropdown-item.active:not(:hover) { + font-weight: bold; + --#{$prefix}dropdown-link-active-color: --#{$prefix}dropdown-link-color; + --#{$prefix}dropdown-link-active-bg: --#{$prefix}dropdown-link-bg; } } @@ -139,7 +168,6 @@ #my-info-dropdown-menu { width: 280px; background-color: $body-bg; - margin-top: 0; @include box-shadow(0 6px 12px rgba(0, 0, 0, .275)); .card-selection { @@ -160,13 +188,14 @@ display: flex; flex-direction: row; padding: 0 15px; + white-space: wrap; word-wrap: anywhere; min-height: 35px; .selected-icon { padding-right: 15px; width: 10px; align-self: center; - color: $brand-primary; + color: $primary; } > a, .barcode-container { border-bottom: 1px solid $gray-lighter; @@ -205,7 +234,7 @@ padding-left: 2rem; } .icon { - color: $brand-primary; + color: $primary; } } > li { @@ -225,8 +254,6 @@ width: 100%; &:hover { text-decoration: none; - color: $dropdown-link-hover-color; - background-color: $dropdown-link-hover-bg; } .sign-out-icon { font-size: 1.2em; @@ -296,7 +323,7 @@ } &.controls { border-radius: $finna-button-radius; - background-color: $brand-primary; + background-color: $primary; padding-top: 0px; transition: background-color .1s linear; option:checked { @@ -325,16 +352,6 @@ z-index: 1; /* this is necessary for overcome the pseudo element */ } -@media(min-width: $grid-float-breakpoint) { - .finna-navbar { - display: flex; - .navbar-collapse { - flex: 1 1 100%; - display: flex !important; // Needed to override bootstrap defaults - } - } -} - header { box-shadow : 0 1px 0 1px rgba(0,0,0,0.1); z-index: $zindex-header; diff --git a/themes/finna2/scss/finna/organisation-info.scss b/themes/finna2/scss/finna/organisation-info.scss index f6b5855a332..f5cf291ad76 100644 --- a/themes/finna2/scss/finna/organisation-info.scss +++ b/themes/finna2/scss/finna/organisation-info.scss @@ -492,7 +492,7 @@ $organisation-info-max-w: 400px !default; flex: 1; .distance { - color: $brand-success; + color: $success; } } diff --git a/themes/finna2/scss/finna/page-selectors.scss b/themes/finna2/scss/finna/page-selectors.scss index c4a3578abde..461f6700ec7 100644 --- a/themes/finna2/scss/finna/page-selectors.scss +++ b/themes/finna2/scss/finna/page-selectors.scss @@ -24,9 +24,21 @@ display: flex; flex-wrap: wrap; justify-content: center; + align-items: center; font-size: 1.1em; // paginate_button is used in DataTables + > li.paginate_button { + @extend .page-item; + > a { + @extend .page-link; + } + } + > li.paginate_button.active > a { + color: var(--#{$prefix}pagination-active-color); + @include gradient-bg(var(--#{$prefix}pagination-active-bg)); + border: none; + } > li.page-first > a, > li.page-prev > a, > li.page-next > a, diff --git a/themes/finna2/scss/finna/profile.scss b/themes/finna2/scss/finna/profile.scss index b3f42061fd8..f1b87763b8b 100644 --- a/themes/finna2/scss/finna/profile.scss +++ b/themes/finna2/scss/finna/profile.scss @@ -19,7 +19,7 @@ font-size: $font-size-large; margin: 0 10px 10px 0; .profile-icon { - color: $brand-primary; + color: $primary; padding-right: 5px; } } @@ -219,7 +219,7 @@ } .address-change-description, .messaging-settings-change-description { - background-color: $state-info-bg; + background-color: $info-bg-subtle; padding: 2em; padding-left: 2.5em; margin-bottom: 1em; diff --git a/themes/finna2/scss/finna/record.scss b/themes/finna2/scss/finna/record.scss index f411b94367f..77c41ae4ebb 100644 --- a/themes/finna2/scss/finna/record.scss +++ b/themes/finna2/scss/finna/record.scss @@ -117,6 +117,10 @@ text-transform: uppercase; } } + + .record-tabs { + clear: both; + } } a.authority { @@ -578,46 +582,56 @@ a.authority { white-space: pre-wrap; } -.nav-pills { - padding: 0px; - margin: 0px; - & a:hover { - text-decoration: none; - } - & > li:not(.share-buttons):not(.whatsapp) { - margin: 10px; - float: left; - // Links rendered as pills - & > a { - border-radius: $nav-pills-border-radius; - padding: 0px; +.record-toolbar, +.mobile-toolbar { + .nav-pills { + padding: 0px; + margin: 0px; + a:hover { + text-decoration: none; + } + > li:not(.share-buttons):not(.whatsapp) { + float: left; + // Links rendered as pills + > a, > .btn-bookbag-toggle > a { + border-radius: $nav-pills-border-radius; + } + &:not(.library-link) { + margin: 10px; + } } - } -} -// QRCode in record view -.nav-pills { - img.qrcode { - border-radius: 8px; - min-width: 150px; - } -} + // QRCode in record view + img.qrcode { + border-radius: 8px; + min-width: 150px; + } -// Share buttons -.nav-pills > li.share-buttons { - float: right; - padding-top: 5px; - .share-buttons-toolbox { - a { + // Share buttons + > li.share-buttons { + display: flex; + flex-grow: 1; + justify-content: end; + padding-top: 5px; + .share-buttons-toolbox { + a { padding-left: 5px; display: inline-block; + } } + } + } +} +.record-toolbar .nav-pills li { + > a, + > .btn-bookbag-toggle > a { + padding: 0px; } } // Request forms .ill-request-terms { - background-color: $state-info-bg; + background-color: $info-bg-subtle; padding: 2em; padding-left: 2.5em; margin-bottom: 1em; @@ -644,7 +658,7 @@ a.authority { .comment-info-icon { font-size: 1.5em; float: left; - color: $brand-primary; + color: $primary; } .comment-description { margin-top: 1em; @@ -720,7 +734,7 @@ a.authority { } } .rights-text { - color: $brand-primary; + color: $primary; } // Material provided by @@ -732,6 +746,9 @@ a.authority { } li.organisation-page-link { padding-top: 5px; + a { + display: block; + } } li.material-questions-feedback { font-weight: bold; @@ -794,7 +811,7 @@ finna-model-viewer { flex: 1 1 100%; background-color: #efefefcc; &.filedrop { - box-shadow: 0px 0px 2px 2px $brand-primary; + box-shadow: 0px 0px 2px 2px $primary; } } .options { @@ -844,7 +861,7 @@ finna-model-viewer { display: flex; justify-content: center; align-items: center; - background-color: $brand-primary; + background-color: $primary; padding: 10px 12px; font-weight: 500; line-height: 1.5; @@ -1023,21 +1040,27 @@ finna-model-viewer .object-editor { .rating__label { cursor: pointer; /* If you change the left/right padding, update the margin-right property of .rating__label--half as well. */ - padding: 0; - margin: 0; - font-size: 1.8rem; + padding: 0 0.1em; + font-size: 1rem; } /* Add padding and positioning to half star labels */ .rating__label--half { padding-right: 0; - margin-right: -0.5em; + margin-right: -0.6em; z-index: 2; + + /* Display only half of the star and ensure that the remainder cannot be hovered over */ + .rating__icon--star { + width: 0.5rem; + overflow: clip; + overflow-clip-margin: 1px; + } } /* Set default star color */ .rating__icon--star { - color: $text-color; + color: $warning; } /* If any input is checked, make its following siblings grey */ @@ -1050,7 +1073,7 @@ finna-model-viewer .object-editor { { &:hover .rating__label .rating__icon--star, &:hover .rating__label--half .rating__icon--star { - color: $text-color; + color: $warning; } /* Make hovered input's following siblings grey on hover */ .rating__input:hover ~ .rating__label .rating__icon--star, @@ -1059,6 +1082,7 @@ finna-model-viewer .object-editor { } } } + // Similar items carousel .similar-bottom { display: inline-block; diff --git a/themes/finna2/scss/finna/result-sidebar.scss b/themes/finna2/scss/finna/result-sidebar.scss index cbc01c5760a..3cdc0ff7ad8 100644 --- a/themes/finna2/scss/finna/result-sidebar.scss +++ b/themes/finna2/scss/finna/result-sidebar.scss @@ -156,6 +156,9 @@ button.list-group-item { .more-link, .less-link, .less-link-top { padding-left: 10px; } + .more-link { + margin-top: 0.5rem; + } } } diff --git a/themes/finna2/scss/finna/search-controls.scss b/themes/finna2/scss/finna/search-controls.scss index da86779af3f..8e7062e7c92 100644 --- a/themes/finna2/scss/finna/search-controls.scss +++ b/themes/finna2/scss/finna/search-controls.scss @@ -130,16 +130,10 @@ .search-tab-tip { background-color: $search-tab-tip-bg; box-shadow: 2px 2px 4px #888888; - margin-bottom: 24px; + margin-bottom: 12px; padding: 5px; position: relative; p { margin: 2px; } - @media (min-width: $screen-sm-min) { - margin-bottom: 12px; - } - @media (min-width: $screen-md-min) { - margin-bottom: 0; - } } diff --git a/themes/finna2/scss/finna/search.scss b/themes/finna2/scss/finna/search.scss index abe4aa5c66a..e81d973e1a6 100644 --- a/themes/finna2/scss/finna/search.scss +++ b/themes/finna2/scss/finna/search.scss @@ -537,19 +537,11 @@ h2 { .search-history-table { @extend .table; - @extend .table-striped; @extend .table-responsive; } table.search-history-table { table-layout: auto; - tr.oddrow { - background-color: transparent; - } - thead tr, tr.evenrow { - background-color: $table-bg-accent; - } - .history_results { white-space: nowrap; } diff --git a/themes/finna2/scss/finna/street-search.scss b/themes/finna2/scss/finna/street-search.scss index 098c21d0d86..04c759caf82 100644 --- a/themes/finna2/scss/finna/street-search.scss +++ b/themes/finna2/scss/finna/street-search.scss @@ -36,7 +36,7 @@ font-size: $font-size-h2; font-weight: 600; .highlight { - color: $brand-primary; + color: $primary; } @media(max-width: $screen-xs-max) { font-size: 18px; @@ -47,7 +47,7 @@ margin-bottom: 2em; position: relative; &:hover { - background: darken($brand-primary,5%); + background: darken($primary,5%); } &:before { content: ""; @@ -56,10 +56,10 @@ margin: auto; border-width: 0 0 9px 12px; border-style: solid; - border-color: transparent $brand-primary; + border-color: transparent $primary; } &:hover:before { - border-color: transparent darken($brand-primary,5%); + border-color: transparent darken($primary,5%); } } @@ -87,7 +87,7 @@ padding: 10px; text-transform: uppercase; font-weight: 600; - color: $brand-primary; + color: $primary; margin: auto 0; i { margin-right: 10px; @@ -129,7 +129,7 @@ } .template-name-streetsearch .introduction .introduction-text { - background-color: $brand-primary; + background-color: $primary; position: relative; display: inline-block; max-width: 450px; @@ -146,7 +146,7 @@ left: 0; border-width: 0 0 12px 12px; border-style: solid; - border-color: transparent $brand-primary; + border-color: transparent $primary; } } } diff --git a/themes/finna2/scss/finna/survey.scss b/themes/finna2/scss/finna/survey.scss index 27beddfd9f8..e862203434f 100644 --- a/themes/finna2/scss/finna/survey.scss +++ b/themes/finna2/scss/finna/survey.scss @@ -33,7 +33,7 @@ margin-bottom: 10px; } & .icon { - color: $brand-primary; + color: $primary; font-size: 40px; } & .icon-background { diff --git a/themes/finna2/scss/finna/tabs.scss b/themes/finna2/scss/finna/tabs.scss index 5ea4fba6b07..f06d12ddb13 100644 --- a/themes/finna2/scss/finna/tabs.scss +++ b/themes/finna2/scss/finna/tabs.scss @@ -3,83 +3,58 @@ { background-color: transparent; padding-bottom: 15px; - @media(max-width: $screen-sm-max) { - margin: 0px; - padding: 0px; - } - .container { - @media(max-width: $screen-xs-max) { - width: 100%; - } - .tabs-table { - display: table; - width: 100%; - } - } - ul.nav-tabs { + + ul.nav-tabs > li { + background-color: #EDEDED; + padding-bottom: 0; display: flex; - @media(max-width: $screen-xs-max) { - padding-top: 10px; + + &.with-tooltip { + display: flex; + align-items: center; + > a { + padding-right: 2.5rem; + } } - @media(max-width: 390px) { - &.many-tabs > li { - max-width: 64px; - a { - min-height: 70px; - padding: 4px 4px; - font-size: .8em; - } + > a { + flex: 1; + padding: 10px 5px; + font-size: 1em; + + // Disable isolation that would cover the tooltip button: + &:hover { + isolation: auto; } } - > li { - color: $body-bg; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - border-top: 4px solid transparent; - border-bottom: 1px solid transparent; - border-left: 1px solid transparent; - border-right: 1px solid transparent; - background-color: #EDEDED; - border-bottom: 1px solid #919191; - @media (max-width: $screen-sm) { - &:not(.many-tabs) { - flex-basis: 50%; - } + &:not(.help-tab) > a { + font-weight: 600; + } + &.active { + .tooltip-tabs_local, .tooltip-tabs_pci { + color: $gray; } - &.active { - border-top: 4px solid $main-tabs-active-color; - border-left: 1px solid $main-tabs-border-color; - border-right: 1px solid $main-tabs-border-color; - border-bottom: 1px solid $body-bg; - background-color: $main-tabs-background-color; - box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.25); - a:hover { - border: none; - } + } + + > .finna-toggletip { + display: $tooltip-tabs-default; + &.tooltip-tabs_local { + display: $tooltip-tabs-local; } - > a { - padding: 10px 5px; - margin-bottom: 0; - border: 0; - font-size: 1em; - font-weight: 600; - color: $main-tabs-text-color; - transition: none; - @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - word-break: break-word; - } + &.tooltip-tabs_pci { + display: $tooltip-tabs-pci; } - >button { + + > button { + margin-left: -2.5rem; opacity: 1; - padding-left: 0; + padding: .2em; + margin-top: 0.25rem; color: $main-tabs-active-color; - position: inherit; + display: inline-block; z-index: 200; background-color: transparent; border: none; - font-size: 18px; + font-size: 1.3rem; cursor: pointer; .icon { cursor: pointer; @@ -90,8 +65,8 @@ } .search-tabs-recommendations { - border-top: 2px solid $brand-primary; - border-bottom: 2px solid $brand-primary; + border-top: 2px solid $primary; + border-bottom: 2px solid $primary; padding: $padding-large-horizontal 0 0 0; a.title { @@ -133,7 +108,6 @@ // RSS-feed and Linked Events tabs .feed-tabs .nav-tabs, .linked-events-tabs .nav-tabs { - border-bottom: 1px solid $nav-tabs-border-color; margin-left: 6px; > li { // Make the list-items overlay the bottom border @@ -142,8 +116,6 @@ font-weight: 500; background-color: transparent; color: $nav-tabs-text-color; - border-bottom: 1px solid transparent; - margin: 0; padding: .6em 0 0 0; cursor: pointer; @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { @@ -241,7 +213,6 @@ .recordTabs.nav { margin-top: 20px; .staff-view-icon { - font-size: 1.2em; line-height: 1em; } @media (max-width: $screen-xs-max) { @@ -259,7 +230,9 @@ } } li.tab-right { - float:right + flex: 1 0; + display: flex; + justify-content: end; } } diff --git a/themes/finna2/scss/finna/terms-of-service.scss b/themes/finna2/scss/finna/terms-of-service.scss index 8ebd45d7ec4..8c4c411aa10 100644 --- a/themes/finna2/scss/finna/terms-of-service.scss +++ b/themes/finna2/scss/finna/terms-of-service.scss @@ -46,7 +46,7 @@ } .terms-of-service-info-box { - background-color: $state-info-bg; + background-color: $info-bg-subtle; padding-left: 8px; padding-right: 20px; padding-top: 10px; diff --git a/themes/finna2/scss/finna/tooltip.scss b/themes/finna2/scss/finna/tooltip.scss index a171595185a..f9d13328993 100644 --- a/themes/finna2/scss/finna/tooltip.scss +++ b/themes/finna2/scss/finna/tooltip.scss @@ -1,4 +1,4 @@ -.list-group-item , .logoutOptions , .status, .grid-image { +.list-group-item, .logoutOptions, .tooltip-dark, .grid-image { .tooltip-inner { min-width: auto; padding: 4px 8px; @@ -23,12 +23,7 @@ border-bottom-color: $gray; } } -.tooltip-tabs_local { - display: $tooltip-tabs-local; -} -.tooltip-tabs_pci { - display: $tooltip-tabs-pci; -} + .tooltip-facet { display: $tooltip-facet; display: block; @@ -91,11 +86,7 @@ display: none; } } -.finna-main-tabs ul.nav-tabs>li.active>a { - .tooltip-tabs_local, .tooltip-tabs_pci { - color: $gray; - } -} + .tooltip-myaccount { margin-left: 10px; color: $gray; diff --git a/themes/finna2/scss/finna/video-player.scss b/themes/finna2/scss/finna/video-player.scss index 0b3cef5bbf3..7983cfe6353 100644 --- a/themes/finna2/scss/finna/video-player.scss +++ b/themes/finna2/scss/finna/video-player.scss @@ -118,9 +118,9 @@ } } .active-video { - color: $brand-primary; + color: $primary; .icon { - background-color: $brand-primary; + background-color: $primary; color: white; } } diff --git a/themes/finna2/scss/global/_finna-bs3-compat.scss b/themes/finna2/scss/global/_finna-bs3-compat.scss new file mode 100644 index 00000000000..0d5048e359a --- /dev/null +++ b/themes/finna2/scss/global/_finna-bs3-compat.scss @@ -0,0 +1,857 @@ +@use "sass:color"; +@use 'sass:map'; +@use 'sass:math'; + +// *** Variables *** + +// Legacy brand colors forced from current colors: +$brand-primary: $primary; +$brand-secondary: $secondary; +$brand-success: $success; +$brand-warning: $warning; +$brand-danger: $danger; +$brand-info: $info; + +$border-radius-base: $border-radius !default; +$border-radius-large: $border-radius-lg !default; + +$breadcrumb-separator: $breadcrumb-divider !default; + +$btn-border-radius-base: $btn-border-radius; +$btn-default-color: #333 !default; +$btn-default-bg: #fff !default; +$btn-default-border: #ccc !default; +$btn-primary-color: $body-bg !default; +$btn-primary-bg: $primary !default; +$btn-primary-border: shade-color($primary, $btn-active-bg-shade-amount) !default; + +$gray-base: #000 !default; +$gray-darker: lighten($gray-base, 13.5%) !default; // #222 +$gray-dark: lighten($gray-base, 20%) !default; // #333 +$gray: lighten($gray-base, 33.5%) !default; // #555 +$gray-light: lighten($gray-base, 46.7%) !default; // #777 +$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee + +$input-height-base: $input-height !default; + +$list-group-border: $list-group-border-color !default; + +$nav-link-hover-bg: $gray-lighter !default; +$nav-link-active-bg: $primary !default; +$nav-link-padding: $nav-link-padding-y !default; + +$nav-tabs-active-link-hover-color: $gray !default; +$navbar-padding-horizontal: math.floor(math.div($grid-gutter-width, 2)) !default; +$navbar-height: 50px !default; +$navbar-nav-link-hover-color: $body-bg !default; +$navbar-nav-link-hover-bg: $body-color !default; + +$padding-base-vertical: $btn-padding-y !default; +$padding-base-horizontal: $btn-padding-x !default; + +$panel-default-border: $primary-border-subtle !default; +$panel-bg: #f5f5f5 !default; +$panel-footer-bg: $panel-bg !default; + +$screen-xs: map.get($grid-breakpoints, "xs"); +$screen-xs-min: $screen-xs; +$screen-sm: map.get($grid-breakpoints, "sm"); +$screen-sm-min: $screen-sm; +$screen-md: map.get($grid-breakpoints, "md"); +$screen-md-min: $screen-md; +$screen-lg: map.get($grid-breakpoints, "lg"); +$screen-lg-min: $screen-lg; +$screen-xl: map.get($grid-breakpoints, "xl"); +$screen-xl-min: $screen-xl; + +$screen-xs-max: ($screen-sm-min - 1); +$screen-sm-max: ($screen-md-min - 1); +$screen-md-max: ($screen-lg-min - 1); +$screen-lg-max: ($screen-xl-min - 1); + +$grid-float-breakpoint: $screen-sm-min !default; +$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default; + +$state-danger-text: var(--#{$prefix}danger) !default; +$state-danger-bg: var(--#{$prefix}danger-bg-subtle) !default; +$state-info-text: var(--#{$prefix}info) !default; +$state-info-bg: var(--#{$prefix}info-bg-subtle) !default; +$state-success-text: var(--#{$prefix}success) !default; +$state-success-bg: var(--#{$prefix}success-bg-subtle) !default; +$state-warning-text: var(--#{$prefix}warning) !default; +$state-warning-bg: var(--#{$prefix}warning-bg-subtle) !default; + +$text-color: $body-color !default; + +$modal-title-padding: $modal-header-padding !default; + +$well-bg: #f5f5f5 !default; +$well-border: darken($well-bg, 7%) !default; + +$pager-bg: $pagination-bg !default; +$pager-border: $pagination-border-color !default; +$pager-border-radius: 15px !default; +$pager-hover-bg: $pagination-hover-bg !default; +$pager-active-bg: $pagination-active-bg !default; +$pager-active-color: $pagination-active-color !default; +$pager-disabled-color: $pagination-disabled-color !default; + +$cursor-disabled: not-allowed !default; + +$table-bg-accent: var(--#{$prefix}table-accent-bg) !default; + +$line-height-computed: $line-height-base * $font-size-base; + +$legend-color: $gray-dark !default; +$legend-border-color: #e5e5e5 !default; + +$label-color: #fff !default; +$label-default-bg: $gray-light !default; +$label-primary-bg: $primary !default; +$label-success-bg: $success !default; +$label-info-bg: $info !default; +$label-warning-bg: $warning !default; +$label-danger-bg: $danger !default; + + +// *** Mixins *** +@mixin opacity($opacity) { + opacity: $opacity; +} + +@mixin label-variant($color) { + background-color: $color; + + &[href] { + &:hover, + &:focus { + background-color: darken($color, 10%); + } + } +} + + +// *** Styles *** +legend { + float: none; + border: 0; + border-bottom: 1px solid $legend-border-color; +} + +.sr-only { + @extend .visually-hidden; +} +.sr-only-focusable { + @extend .visually-hidden-focusable; +} + +.btn { + &:focus, + &.focus { + outline: dotted 1px $text-color; + } +} +.btn.btn-more { + background-color: revert; + &:hover { + background-color: revert; + border-color: #999; + } +} +.btn-default { + @include button-variant( + $btn-default-bg, + $btn-default-border, + $color: $btn-default-color, + $hover-background: $btn-default-color, + $hover-border: $btn-default-border, + $hover-color: $btn-default-bg, + $active-background: shade-color($btn-default-bg, $btn-active-bg-shade-amount), + $active-border: shade-color($btn-default-border, $btn-active-border-shade-amount), + $active-color: $btn-default-color, + ); +} +.btn-primary { + @include button-variant( + $btn-primary-bg, + $btn-primary-border, + $color: $btn-primary-color, + $hover-background: $btn-primary-color, + $hover-border: $btn-primary-border, + $hover-color: $btn-primary-bg + ); +} +.btn-group { + display: inline-block; +} +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; + > .btn, + > .btn-group { + display: table-cell; + float: none; + width: 1%; + } + > .btn-group .btn { + width: 100%; + } + + > .btn-group .dropdown-menu { + left: auto; + } +} +button.list-group-item { + width: 100%; + text-align: left; +} + +.label { + display: inline; + padding: .2em .6em .3em; + font-size: 75%; + font-weight: 700; + line-height: 1; + color: $label-color; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: .25em; +} +.label-default { + background-color: $label-default-bg; +} +.label-primary { + background-color: $label-primary-bg; +} +.label-success { + background-color: $label-success-bg; +} +.label-info { + background-color: $label-info-bg; +} +.label-warning { + background-color: $label-warning-bg; +} +.label-danger { + background-color: $label-danger-bg; +} + +.dropdown-toggle { + display: inline-flex; + align-items: center; + gap: 0.25em; +} +.dropdown-toggle::after, +/* Use double selector to force greater specificity in overriding unwanted ::after */ +.search-filter-dropdown.search-filter-dropdown .btn::after { + content: ""; + width: 0.3em; + height: 0.3em; +} +.dropdown-toggle .icon:last-child { + display: none; +} + +.navbar-form { + .form-control { + display: block; + width: 100%; + + @media (min-width: $screen-sm-min) { + display: inline-block; + width: auto; + } + } + .btn { + vertical-align: baseline; + } +} + +.form-control:not([multiple]):not([size]) { + appearance: auto; + height: $input-height; +} + +.form-select { + appearance: auto; +} + +/* Hide browser's own X button in the search field (Safari, Chrome) */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +textarea.form-control { + height: auto; +} + +@media (min-width: map.get($grid-breakpoints, "sm")) { + .form-inline { + .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .form-control, .form-group { + display: inline-block; + width: auto; + vertical-align: middle; + } + } +} + +.control-label { + @extend .form-label; +} + +.form-group { + @extend .mb-3; +} + +.input-group { + width: initial; +} + +.checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; +} +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + margin-left: -20px; +} +.radio label, .checkbox label { + min-height: 20px; + padding-left: 20px; + margin-bottom: 0; + cursor: pointer; +} + +h1, .h1, +h2, .h2, +h3:not(.popover-header), .h3 { + margin-top: $line-height-base * 1rem; + margin-bottom: math.div($line-height-base, 2) * 1rem; +} +h4, .h4, +h5, .h5, +h6, .h6 { + margin-top: math.div($line-height-base, 2) * 1rem; + margin-bottom: math.div($line-height-base, 2) * 1rem; +} + +.result.embedded .getFull.expanded { + position: relative; + padding: 10px 15px; + margin-bottom: -1px; + border: 1px solid #ddd; +} + +.footer { + clear: both; +} + +.hidden { + display: none !important; +} + +#modal .modal-content > .close { + border: 0; +} + +// See .nav > li > a in bootstrap.scss +.nav.navbar-nav button.dropdown-toggle { + color: inherit; + padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}navbar-nav-link-padding-x); + + &:hover, + &:focus { + color: $dropdown-bg; + background-color: #333; + } +} +.navbar nav { + width: 100%; + margin-bottom: 7.5px; + + > li > .nav-link { + &.active { + background-color: $nav-link-active-bg; + } + &:not(.active):hover { + --#{$prefix}nav-link-hover-color: #{$navbar-nav-link-hover-color}; + background-color: $navbar-nav-link-hover-bg; + } + } +} +.navbar-right { + justify-content: right; +} +.navbar-left { + justify-content: left; +} + +.media-body, .media-left, .media-right { + display: table-cell; + vertical-align: top; +} +.media-body { + width: 10000px; +} + +// Responsive utilities (that avoid `display: *` that would override any existing value) +@media(max-width: $screen-xs-max) { + .hidden-xs { + display: none !important; + } + :not(.visible-xs) { + &.visible-sm, &.visible-md, &.visible-lg { + display: none !important; + } + } +} +@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + .hidden-sm { + display: none !important; + } + :not(.visible-sm) { + &.visible-xs, &.visible-md, &.visible-lg { + display: none !important; + } + } +} +@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + .hidden-md { + display: none !important; + } + :not(.visible-md) { + &.visible-xs, &.visible-sm, &.visible-lg { + display: none !important; + } + } +} +@media (min-width: $screen-lg-min) { + .hidden-lg { + display: none !important; + } + :not(.visible-lg) { + &.visible-xs, &.visible-sm, &.visible-md { + display: none !important; + } + } +} + + +.hidden-print { + @extend .d-print-none; +} + +.panel { + @extend .card; +} +.panel-heading { + @extend .card-body; + background-color: #f5f5f5; + padding: 10px 15px; +} +.panel-title { + @extend .card-title; + font-size: 1.15rem; + margin: 0; + > a { + color: inherit; + } +} +.panel-body { + @extend .card-body; +} + + +// clearfix +.container, .container-fluid { + &::before, &::after { + clear: both; + display: table; + content: " "; + + // but not in header + header & { + display: none; + } + } +} + +.pager { + padding-left: 0; + margin: $line-height-base * 1rem 0; + text-align: center; + list-style: none; + @include clearfix; + li { + display: inline; + > a { + display: inline-block; + padding: 5px 14px; + background-color: $pager-bg; + border: 1px solid $pager-border; + border-radius: $pager-border-radius; + } + + > a:hover, + > a:focus { + text-decoration: none; + background-color: $pager-hover-bg; + } + } + .page-item:first-child .page-link, .page-item:last-child .page-link { + border-radius: $pager-border-radius; + } + + .next { + > a { + float: right; + } + } + + .previous { + > a, + > span { + float: left; + } + } + + .disabled { + > a, + > a:hover, + > a:focus, + > span { + color: $pager-disabled-color; + cursor: $cursor-disabled; + background-color: $pager-bg; + } + } +} + +.pagination { + margin: $line-height-base * 1rem; +} + +.list-group { + margin-bottom: 1rem; +} + +@media print { + .table { + td, + th { + box-shadow: none; + } + } +} + +.navbar-brand { + font-size: 1.4rem; + text-decoration: underline; + max-height: 64px; +} + +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} + +.keyboard-selection #keyboard-selection-button { + border: 0; +} + +.tagList .tag { + padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x); + @include border-radius(var(--#{$prefix}btn-border-radius)); +} + +@media screen and (max-width: 768px) { + .table-responsive { + > :not(caption) > * > * { + box-shadow: none; + } + > tbody > tr > *:first-child { + border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}table-border-color); + } + } +} + +// focus rings +.form-select:-moz-focusring { + color: revert; +} + +a, button, a.btn, button.btn, ul.finna-multiselect { + &:focus-visible { + outline: 0; + box-shadow: $nav-link-focus-box-shadow; + } +} + + +// Mixins +@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { + background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-repeat: repeat-x; +} + +@mixin sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} + + +// Variables +$alert-info-bg: $state-info-bg !default; +$alert-info-text: $state-info-text !default; +$input-border: $input-border-color; + +// Miscellaneous +.bg-info { + background-color: $info-bg-subtle; +} + +.dropdown-toggle.qrcodeLink::after { + display: none; +} + +// Navibar +.finna-navbar { + @extend .container-fluid; + + @media (max-width: $screen-sm-max) { + padding: 0; + } +} +@media (min-width: $screen-md-min) { + .navbar-nav.header-navbar-right { + flex-shrink: 0; + } +} + +// Dropdown icons +// Show our own: +.dropdown-toggle .icon:last-child { + display: inline-block; +} +// Hide Bootstrap's: +.dropdown-toggle::after { + display: none; +} + +// Well +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: $well-bg; + border: 1px solid $well-border; + border-radius: $border-radius-base; + @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05)); +} + +// Buttons +.btn-primary { + @include button-variant( + $btn-primary-bg, + $btn-primary-border, + $color: $btn-primary-color, + $hover-background: color.adjust($btn-primary-bg, $lightness: -10% /*, $space: hsl*/), + $hover-border: $btn-primary-border, + $hover-color: $btn-primary-color + ); +} +.btn-default { + @include button-variant( + $btn-default-bg, + $btn-default-border, + $color: $btn-default-color, + $hover-background: color.adjust($btn-default-bg, $lightness: -10% /*, $space: hsl*/), + $hover-border: $btn-default-border, + $hover-color: $btn-default-color + ); +} + +// Button groups +.btn-group { + display: inline-flex; +} + +// MyResearch selection controls +.selection-controls-bar label { + display: inline-block; + margin-bottom: 5px; +} + +// ***** The following are required for local customizations +.panel-default { + @extend .card; +} +/*.nav > li > a { + &:hover, + &:focus { + text-decoration: none; + background-color: $nav-link-hover-bg; + } +}*/ + +.finna-navbar { + .dropdown-toggle { + display: flex; + } + .nav-item { + align-content: center; + } +} + +// E.g. similar items +.list-group-item { + margin-bottom: -1px; +} + +// Spacing between instances of .media +.media { + margin-top: 15px; +} + +// Print +.visible-print.inline-block { + display: none !important; + + @media print { + display: inline-block !important; + } +} + +// left => start +.text-left { + @extend .text-start; +} +// right => end +.text-right { + @extend .text-end; +} + +// Responsive utilities (that avoid `display: *` that would override any existing value) +.hidden-xs-block { + @extend .hidden-xs; +} +.hidden-sm-block { + @extend .hidden-sm; +} +.hidden-md-block { + @extend .hidden-md; +} +.hidden-lg-block { + @extend .hidden-lg; +} +.visible-xs-block { + @extend .visible-xs; +} +.visible-sm-block { + @extend .visible-sm; +} +.visible-md-block { + @extend .visible-md; +} +.visible-lg-block { + @extend .visible-lg; +} + +// blockquote padding +blockquote { + padding: math.div($line-height-computed, 2) $line-height-computed; + font-size: $blockquote-font-size; +} + +// panels +.panel { + margin-bottom: $line-height-computed; +} +.panel-group .panel { + margin-bottom: 0; +} +.panel-group .panel + .panel { + margin-top: 5px; +} +.panel-heading { + padding: $panel-heading-padding; +} + +// tables +table { + caption-side: top; + border-spacing: 0; + + > tbody > * > * { + border-bottom: 0; + } +} + +// textarea +textarea { + resize: both; + height: auto; + + // Make sure to override the rule in bs3-compat: + &.form-control:not([multiple]):not([size]) { + height: auto; + } +} + +// dropup +.dropup .dropdown-toggle::after { + content: ""; + width: 0.3em; + height: 0.3em; + display: none; +} + +// input-group +.input-group { + flex-wrap: nowrap; +} + +.table-condensed { + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: 5px; + } + } + } +} + +// hide +.hide { + @extend .hidden; +} + +// pre +$pre-bg: #f5f5f5 !default; +$pre-border-color: #ccc !default; +pre { + padding: 10px; + background-color: $pre-bg; + border: 1px solid $pre-border-color; +} diff --git a/themes/finna2/scss/global/bootstrap-map-overrides.scss b/themes/finna2/scss/global/bootstrap-map-overrides.scss new file mode 100644 index 00000000000..60aa5b5b514 --- /dev/null +++ b/themes/finna2/scss/global/bootstrap-map-overrides.scss @@ -0,0 +1,16 @@ +// Override the grid with everything one notch larger (required e.g. for vufind-offcanvas) +$grid-breakpoints: ( + xxxs: 0, + xxs: 1px, + xs: 480px, + sm: 768px, + md: 992px, + lg: 1200px, + xl: 1400px, +); +$container-max-widths: ( + sm: 720px, + md: 960px, + lg: 1140px, + xl: 1320px +); diff --git a/themes/finna2/scss/global/bootstrap-variable-overrides.scss b/themes/finna2/scss/global/bootstrap-variable-overrides.scss index f07722c3035..ff8da0e20f7 100644 --- a/themes/finna2/scss/global/bootstrap-variable-overrides.scss +++ b/themes/finna2/scss/global/bootstrap-variable-overrides.scss @@ -12,27 +12,46 @@ $gray: #2b2b2b !default; -$gray-darker: #000 !default; -$gray-dark: #121212 !default; -$gray-light: #595959 !default; -$gray-slightly-lighter: #757575 !default; -$gray-mid-light: #919191 !default; -$gray-lighter: #d1d1d1 !default; -$gray-ultralight: #f7f7f7 !default; +$gray-darker: #000 !default; +$gray-dark: #121212 !default; +$gray-light: #595959 !default; +$gray-slightly-lighter: #757575 !default; +$gray-mid-light: #919191 !default; +$gray-lighter: #d1d1d1 !default; +$gray-ultralight: #f7f7f7 !default; // Brand Colors -$brand-primary: #007c90 !default; -$brand-secondary: #007c90 !default; -$brand-third: #007c90 !default; -$brand-fourth: #007c90 !default; -$brand-success: #33843B !default; -$brand-warning: #9E943D !default; -$brand-danger: #a94442 !default; -$brand-info: #007c90 !default; +$primary: #007c90 !default; +$secondary: #007c90 !default; +$third: #007c90 !default; +$fourth: #007c90 !default; +$success: #33843B !default; +$warning: #9E943D !default; +$danger: #a94442 !default; +$info: #007c90 !default; +$info-bg-subtle: #d9edf7 !default; -//== Custom Finna styling -$background-color: $gray-light !default; +//== Custom Finna styling +$background-color: $gray-light !default; +$warning-bg-subtle: tint-color($warning, 75%) !default; +$enable-shadows: true !default; +$btn-box-shadow: none !default; +$btn-focus-box-shadow: none !default; +$focus-ring-width: .25rem !default; +$focus-ring-color: $primary !default; +$focus-ring-opacity: 0.5 !default; +$focus-ring-blur: 0 !default; + +// These are not in Bootstrap 5, but we need them for our custom box shadow: +$focus-ring-inner-opacity: 1 !default; +$focus-ring-inner-blur: $focus-ring-blur !default; +$focus-ring-inner-width: 1px; +$focus-ring-inner-color: rgba(#fff, $focus-ring-inner-opacity) !default; + +// Dual box shadow intended to provide sufficient contrast in all situations: +$focus-ring-box-shadow: 0 0 $focus-ring-inner-blur $focus-ring-inner-width $focus-ring-inner-color, 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default; +$focus-ring-light-box-shadow: $focus-ring-box-shadow; //-- Z-index master list // @@ -44,14 +63,14 @@ $background-color: $gray-light !default; //$zindex-navbar: 1000 !default; $zindex-dropdown: 1001 !default; $zindex-popover: 1010 !default; -$zindex-tooltip: 1020 !default; +// By default tooltip has a higher z-index which allows it to pop over the navbar. +// Use the following value only if you can ensure that it doesn't get obscured by +// the navbar. +//$zindex-tooltip: 1020 !default; //$zindex-navbar-fixed: 1030 !default; //$zindex-modal-background: 1040 !default; //$zindex-modal: 1050 !default; -$fa-font-path: "../../bootstrap3/css/fonts" !default; - - //== Grid System // //## @@ -68,7 +87,8 @@ $text-color: $gray-dark !default; $body-color: $text-color !default; $link-color: #007c90 !default; // defines all link color, also for linked icons $link-hover-color: $link-color !default; -$link-hover-decoration: #fff !default; +$link-decoration: none !default; +$link-hover-decoration: none !default; $padding-base-vertical: 6px !default; $padding-base-horizontal: 12px !default; $padding-large-vertical: 10px !default; @@ -77,7 +97,7 @@ $padding-small-vertical: 5px !default; $padding-small-horizontal: 10px !default; $line-height-large: 1.33 !default; $line-height-small: 1.5 !default; -$component-active-bg: $brand-primary !default; +$component-active-bg: $primary !default; //== Navbar @@ -87,12 +107,20 @@ $component-active-bg: $brand-primary !default; // Basics of a navbar $navbar-height: 64px !default; $navbar-margin-bottom: 0px !default; -$navbar-padding-vertical: 0px !default; +$navbar-padding-vertical: 5px !default; +$navbar-padding-x: 0px !default; +$navbar-padding-y: $navbar-padding-vertical !default; $navbar-collapse-max-height: auto !default; $navbar-default-bg: #fff !default; +$navbar-toggler-focus-width: 0; +//$navbar-light-color: $primary !default; +//$navbar-light-active-color: $primary !default; +//$navbar-light-brand-color: $primary !default; +//$navbar-light-brand-hover-color: $primary !default; // Navbar links -$navbar-default-link-color: $text-color !default; // Color of link texts in navbar +$navbar-default-link-color: $text-color !default; // Color of link texts in navbar +$navbar-nav-link-padding-x: 1rem !default; //== Navs @@ -100,35 +128,42 @@ $navbar-default-link-color: $text-color !default; // Color of li //## //=== Shared nav styles -$nav-link-padding: 0px 15px !default; +//$nav-link-padding: 0px 15px !default; +$nav-link-padding-y: 1rem !default; +$nav-link-font-weight: 500; $nav-link-hover-bg: rgba(255,255,255,0.2) !default; $nav-tabs-border-color: $gray-mid-light !default; -$nav-tabs-link-hover-border-color: $gray-mid-light !default; - //== Typography // //## Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; -$font-family-serif: PT Serif !default; -$font-family-monospace: Monaco !default; -$font-family-base: $font-family-sans-serif !default; -$font-size-base: 14px !default; -$font-size-large: math.ceil(($font-size-base * 1.3)) !default; -$font-size-small: math.ceil(($font-size-base * 0.85)) !default; -$font-size-h1: math.floor(($font-size-base * 2.6)) !default; -$font-size-h2: math.floor(($font-size-base * 1.76)) !default; -$font-size-h3: math.floor(($font-size-base * 1.6)) !default; -$font-size-h4: math.floor(($font-size-base * 1.3)) !default; -$font-size-h5: $font-size-base !default; -$font-size-h6: math.floor(($font-size-base * 0.85)) !default; -$line-height-base: 1.5 !default; -$line-height-computed: math.floor(($font-size-base * $line-height-base)) !default; -$headings-font-family: $font-family-base !default; -$headings-line-height: 1.1 !default; -$headings-color: inherit !default; -$headings-font-weight: 700 !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; +$font-family-serif: PT Serif !default; +$font-family-monospace: Monaco !default; +$font-family-base: $font-family-sans-serif !default; +$font-size-base: 1rem !default; +$font-size-large: $font-size-base * 1.3 !default; +$font-size-small: $font-size-base * 0.85 !default; +$font-size-h1: $font-size-base * 2.6 !default; +$font-size-h2: $font-size-base * 1.76 !default; +$font-size-h3: $font-size-base * 1.6 !default; +$font-size-h4: $font-size-base * 1.3 !default; +$font-size-h5: $font-size-base !default; +$font-size-h6: $font-size-base * 0.85 !default; +$line-height-base: 1.5 !default; +$line-height-computed: math.floor(($font-size-base * $line-height-base)) !default; +$headings-font-family: $font-family-base !default; +$headings-line-height: 1.1 !default; +$headings-color: inherit !default; +$headings-font-weight: 700 !default; + +$h1-font-size: $font-size-h1; +$h2-font-size: $font-size-h2; +$h3-font-size: $font-size-h3; +$h4-font-size: $font-size-h4; +$h5-font-size: $font-size-h5; +$h6-font-size: $font-size-h6; //-- Iconography @@ -167,19 +202,19 @@ $btn-default-color: $text-color !default; $btn-default-bg: #fff !default; $btn-default-border: #ccc !default; $btn-primary-color: #fff !default; -$btn-primary-bg: $brand-primary !default; +$btn-primary-bg: $primary !default; $btn-primary-border: color.adjust($btn-primary-bg, $lightness: -0% /*, $space: hsl*/) !default; $btn-success-color: #fff !default; -$btn-success-bg: $brand-success !default; +$btn-success-bg: $success !default; $btn-success-border: color.adjust($btn-success-bg, $lightness: -5% /*, $space: hsl*/) !default; $btn-warning-color: $gray-light !default; -$btn-warning-bg: $brand-warning !default; +$btn-warning-bg: $warning !default; $btn-warning-border: color.adjust($btn-warning-bg, $lightness: -5% /*, $space: hsl*/) !default; $btn-danger-color: #fff !default; -$btn-danger-bg: $brand-danger !default; +$btn-danger-bg: $danger !default; $btn-danger-border: color.adjust($btn-danger-bg, $lightness: -5% /*, $space: hsl*/) !default; $btn-info-color: #fff !default; -$btn-info-bg: $brand-info !default; +$btn-info-bg: $info !default; $btn-info-border: color.adjust($btn-info-bg, $lightness: -5% /*, $space: hsl*/) !default; $btn-link-disabled-color: $gray-light !default; @@ -188,7 +223,7 @@ $btn-link-disabled-color: $gray-light !default; // //## -$input-border: #666 !default; +$input-border-color: #666 !default; $input-border-radius: $border-radius-small !default; $input-bg: #fff !default; @@ -209,6 +244,9 @@ $dropdown-link-disabled-color: $gray-light !default; $dropdown-header-color: $gray-light !default; $dropdown-caret-color: #000 !default; $dropdown-fallback-border: none !default; +$dropdown-item-padding-x: 0rem !default; +$dropdown-item-padding-y: 0rem !default; +$dropdown-header-padding-x: 1rem !default; //== Pagination @@ -217,23 +255,24 @@ $dropdown-fallback-border: none !default; $pagination-color: $link-color !default; $pagination-bg: $body-bg !default; -$pagination-border: transparent !default; +$pagination-border-color: transparent !default; -$pagination-hover-color: $brand-primary !default; +$pagination-hover-color: $primary !default; $pagination-hover-bg: #f5f5f5 !default; $pagination-hover-border: transparent !default; $pagination-active-color: #fff !default; -$pagination-active-bg: $brand-primary !default; +$pagination-active-bg: $primary !default; $pagination-active-border: transparent !default; +$pagination-font-size: 1.1em; //== Pager // //## -$pager-bg: $brand-primary !default; -$pager-hover-bg: color.adjust($brand-primary, $lightness: -0.5% /*, $space: hsl*/) !default; +$pager-bg: $primary !default; +$pager-hover-bg: color.adjust($primary, $lightness: -0.5% /*, $space: hsl*/) !default; $pager-disabled-color: $gray-mid-light !default; @@ -257,9 +296,9 @@ $tooltip-bg: $body-bg !default; $tooltip-opacity: 1 !default; //** Tooltip arrow width -$tooltip-arrow-width: 6px !default; +//$tooltip-arrow-width: 6px !default; //** Tooltip arrow color -$tooltip-arrow-color: $brand-primary !default; +$tooltip-arrow-color: $primary !default; $tooltip-header-color: color.mix($tooltip-arrow-color, contrast($tooltip-arrow-color), 5%) !default; @@ -267,7 +306,9 @@ $tooltip-header-color: color.mix($tooltip-arrow-color, contrast($tooltip- // //## -$modal-content-bg: $body-bg !default; +$modal-content-bg: $body-bg !default; +$modal-md: 768px !default; +$modal-lg: 900px !default; //== Alerts @@ -308,6 +349,7 @@ $badge-color: color.adjust($text-color, $lightness: 18% /*, $spa $badge-link-hover-color: #fff !default; $badge-bg: none !default; $badge-font-weight: 400 !default; +$badge-font-size: 0.9rem !default; //== Breadcrumbs @@ -320,8 +362,8 @@ $breadcrumb-bg : #fff !default; $breadcrumb-color : $gray-light !default; //** Text color of current page in the breadcrumb $breadcrumb-active-color : $gray-dark !default; -$breadcrumb-padding-vertical: 10px !default; -$breadcrumb-padding-horizontal: 10px !default; +$breadcrumb-padding-y : 0.5rem !default; +$breadcrumb-padding-x : 0 !default; //== Wells @@ -343,3 +385,34 @@ $cursor-disabled: pointer !default; $progress-border-radius: none !default; $panel-heading-padding: 0 !default; $panel-footer-padding: 0 !default; + +// Disable !important utilities by default: +$enable-important-utilities: false !default; + +// Disable several default icons: +$accordion-button-active-icon: none !default; +$accordion-button-active-icon-dark: none !default; +$accordion-button-icon: none !default; +$accordion-button-icon-dark: none !default; +$form-select-indicator: none !default; +$form-select-indicator-dark: none !default; +$form-switch-bg-image: none !default; +$form-switch-bg-image-dark: none !default; +$navbar-dark-toggler-icon-bg: none !default; +$navbar-light-toggler-icon-bg: none !default; + +$pagination-active-bg: $primary !default; +$pagination-active-border: $primary !default; + +$link-hover-decoration: underline !default; +$icon-link-underline-offset: inherit !default; + +// Disable dark mode for now: +$enable-dark-mode: false !default; + +// Disable smooth scroll for now (doesn't interact well with Mink tests): +$enable-smooth-scroll: false !default; + +// Disable validation icons that take a lot of room e.g. in select fields: +$enable-validation-icons: false !default; +$form-select-indicator-padding: .75rem !default; diff --git a/themes/finna2/scss/global/dropdowns-bootstrap.scss b/themes/finna2/scss/global/dropdowns-bootstrap.scss index 93f493df3a6..7e668a7a3fb 100644 --- a/themes/finna2/scss/global/dropdowns-bootstrap.scss +++ b/themes/finna2/scss/global/dropdowns-bootstrap.scss @@ -32,14 +32,21 @@ } } -.dropdown-menu > li > a { - &:focus { +.dropdown-menu > li { + &:hover, &:active { background-color: inherit; } - &:hover, - &:active { - text-decoration: none; - color: $dropdown-link-hover-color; - background-color: $dropdown-link-hover-bg; + > a { + display: block; + + &:focus { + background-color: inherit; + } + &:hover, + &:active { + text-decoration: none; + color: $dropdown-link-hover-color; + background-color: $dropdown-link-hover-bg; + } } } diff --git a/themes/finna2/scss/global/icons.scss b/themes/finna2/scss/global/icons.scss index 1e9ea63d860..85fc1833adc 100644 --- a/themes/finna2/scss/global/icons.scss +++ b/themes/finna2/scss/global/icons.scss @@ -34,7 +34,7 @@ a .icon:hover, a .icon:hover { &:before { padding-right: 3px; font-size: 1.3em; - vertical-align: text-bottom; + vertical-align: baseline; } } table .iconlabel { @@ -63,13 +63,11 @@ table .iconlabel { } .iconlabel[class*="format-1othermicrofilm"]:before, .iconlabel[class*="format-feed-othermicrofilm"]:before { - font-family: FontAwesome; - content: $fa-var-film; + @extend .fa, .fa-film; } .iconlabel[class*="format-1otherinterview"]:before, .iconlabel[class*="format-feed-otherinterview"]:before { - font-family: FontAwesome; - content: $fa-var-microphone; + @extend .fa, .fa-microphone; } .iconlabel.format-book:before, .iconlabel[class*="format-1book"]:before, @@ -220,8 +218,7 @@ table .iconlabel { .iconlabel[class*="format-1gamevideogame"]:before, .iconlabel[class*="format-2gamevideogame"]:before, .iconlabel[class*="format-feed-gamevideogame"]:before { - font-family: FontAwesome; - content: $fa-var-gamepad; + @extend .fa, .fa-gamepad; } .iconlabel.full-text-available:before { content: "\e96e"; @@ -375,29 +372,29 @@ table .iconlabel { float: right; margin-left: 4px; &.ok { - color: $brand-success; + color: $success; &:before { font-family: finnaicons; content:"\e805"; - color: $brand-success; + color: $success; margin-right: 4px; } } &.warn { - color: $brand-warning; + color: $warning; &:before { font-family: finnaicons; content:"\e8b2"; - color: $brand-warning; + color: $warning; margin-right: 4px; } } &.overdue { - color: $brand-danger; + color: $danger; &:before { font-family: finnaicons; content:"\e8b3"; - color: $brand-danger; + color: $danger; margin-right: 4px; } } @@ -413,7 +410,7 @@ table .iconlabel { // Status success .status .fa-bell.text-success:before { font-family: finnaicons; - color: $brand-success; + color: $success; content:"\e8b2"; } #account-icon .account-status-good.text-success { @@ -425,7 +422,7 @@ table .iconlabel { height: 12px; top: 65%; left: 9px; - background: $brand-success; + background: $success; border: 2px solid $header-background-color; border-radius: 50%; } @@ -433,7 +430,7 @@ table .iconlabel { // Status warning .status .fa-bell.text-warning:before { font-family: finnaicons; - color: $brand-warning; + color: $warning; content:"\e8b2"; } #account-icon .account-status-warning.text-warning { @@ -445,7 +442,7 @@ table .iconlabel { height: 12px; top: 65%; left: 9px; - background: $brand-warning; + background: $warning; border: 2px solid $header-background-color; border-radius: 50%; } @@ -453,11 +450,11 @@ table .iconlabel { // Status danger .status .fa-exclamation-triangle:before { font-family: finnaicons; - color: $brand-danger; + color: $danger; content:"\e8b0"; } .profile-status.status .fa-exclamation-triangle:before { - color: $brand-warning; + color: $warning; } #account-icon .account-status-danger.text-danger { width: auto; @@ -468,7 +465,7 @@ table .iconlabel { height: 12px; top: 65%; left: 9px; - background: $brand-danger; + background: $danger; border: 2px solid $header-background-color; border-radius: 50%; } diff --git a/themes/finna2/scss/global/navbar-bootstrap.scss b/themes/finna2/scss/global/navbar-bootstrap.scss index 1730e1cfbd8..1d3bd8da568 100644 --- a/themes/finna2/scss/global/navbar-bootstrap.scss +++ b/themes/finna2/scss/global/navbar-bootstrap.scss @@ -1,9 +1,10 @@ .navbar { - max-width: 1300px; // dont fully scale the navigation bar text + max-width: map-get($container-max-widths, "xl"); // dont fully scale the navigation bar text + min-height: $navbar-height; + .collapse-open-icon { - font-size: 10px; + font-size: $font-size-icon-tiny; vertical-align: middle; - margin-top: -2px; } .logoutOptions, #loginOptions { .my-account-icon { @@ -26,19 +27,20 @@ } } -.navbar { +.navbar .navbar-main { .dropdown .dropdown-menu > li > a > *:not(.description) { font-weight: bold; } .dropdown .dropdown-menu > li > a > .description { font-size: .9em; - display: inline-block; + display: block; width: 100%; + white-space: normal; } } .navbar-collapse { - border-top: 3px solid $brand-primary; + border-top: 3px solid $primary; @media (min-width: $grid-float-breakpoint) { border-top: 0; box-shadow: none; @@ -47,13 +49,16 @@ .navbar-brand { padding: 0; - line-height: $navbar-height; +// line-height: $navbar-height; max-width: 150px; display: flex; align-items: center; - @media (min-width: $grid-float-breakpoint) { - max-width: 200px; + + @media (max-width: $screen-sm-max) { + min-height: 64px; + } + .navbar-logo { font-size: $navbar-logo-height; color: $logo-color; @@ -65,20 +70,20 @@ } } -.navbar-toggle { +.navbar-toggler { position: absolute; z-index: 30; - right:0; + top: 0; + right: 0; height: $navbar-height; width: $navbar-height; margin:0; color: $btn-primary-color; - background-color: $brand-primary; + background-color: $primary; padding: 0; border-radius: 0; &:focus { - background: darken($brand-primary, 10%); - outline: 5px auto -webkit-focus-ring-color; + background: darken($primary, 10%); } .mobilemenu-bars, .mobilemenu-close { font-size: 24px; @@ -95,7 +100,7 @@ } @keyframes bg-blinker { 50% { - background-color: screen($brand-primary, rgba(255, 255, 255, 0.4)); + background-color: screen($primary, rgba(255, 255, 255, 0.4)); } } } @@ -104,22 +109,13 @@ margin: calc((#{$navbar-padding-vertical} / 2) - #{$navbar-padding-horizontal}); > li > a { - padding-top: $navbar-padding-vertical; - padding-bottom: $navbar-padding-vertical; - line-height: calc(#{$navbar-height} / 2); - margin-top: calc(#{$navbar-height} / 4); - margin-bottom: calc(#{$navbar-height} / 4); font-size: $navbar-font-size; - font-weight: $navbar-font-weight; - @media (min-width:$screen-md-min) { - margin-bottom: 0; - } } &.language:not(.lang-1):before { color: $navbar-default-link-color; content: ''; height: (($navbar-height) - 24); - margin-top: calc((#{$navbar-height} - (#{$navbar-height} - 24)) / 2); + margin-top: calc((#{$navbar-height} - (#{$navbar-height} - 24px)) / 2); @media (min-width: $grid-float-breakpoint) { border-left: solid 1px $navbar-default-link-color; @@ -196,20 +192,6 @@ } } } - // Uncollapse the nav - @media (min-width: $grid-float-breakpoint) { - flex-grow: 1; - flex-shrink: 1; - float: initial; - margin: 0; - - &.navbar-main { - margin-bottom: calc(#{$navbar-height} / 4); - } - } - .btn { - vertical-align: baseline; - } } .navbar-nav { @@ -235,21 +217,25 @@ // Menu position and menu carets .navbar-nav > li > .dropdown-menu { - margin-top: 0; @include border-top-radius($border-radius-base); } // Fix dropdowns in navbar for wide screen @media (min-width: $screen-md-min) { - .navbar .dropdown-menu > li > a { + .navbar li:not(#language_menu) .dropdown-menu > li > a { width: 280px; white-space: normal; transition: none; } } #language_menu { - #language_menu_dropdown_button:active { - box-shadow: none; + #language_menu_dropdown_button { + padding-top: #{$btn-padding-y}; + padding-bottom: #{$btn-padding-y}; + + &:active { + box-shadow: none; + } } .dropdown-menu { margin: 0; @@ -275,28 +261,39 @@ display: flex; flex-direction: row; align-items: baseline; + // This is required for proper positioning of dropdown menus: + position: relative; + + // Counter the responsive menu behavior for non-expandable items: + .dropdown-menu { + position: absolute; + } div.logoutOptions a:active { box-shadow: none; } div.logoutOptions, #loginOptions { padding-right: 12px; - margin-top: 8px; position: relative; } @media (max-width: $screen-sm-max) { position: absolute; - margin: 0; - line-height: $navbar-height; top: 0; + display: flex; + align-items: center; + height: $navbar-height; right: $navbar-right; - flex: 0 0; + div.logoutOptions, #loginOptions { margin-top: 0; } - .dropdown-menu > li > a { - white-space: normal; + .dropdown-menu { + margin-top: 1rem; + + > li > a { + white-space: normal; + } } } } @@ -312,6 +309,7 @@ border-width: 0 0 1px; background-color: $header-background-color; box-shadow: 0 0 3px 3px rgba(0,0,0,0.1); + .navbar-collapse > ul > li { border-bottom: 1px solid $gray-lighter; } @@ -323,12 +321,10 @@ display: inherit; } } - .navbar-collapse.in { + .navbar-collapse.show { box-shadow: 0 3px 5px $gray; -/* #SCSS> */ max-height: calc(100vh - #{#{$navbar-height}}); -/* <#SCSS */ - + overflow: scroll; } .navbar-header { padding-left: 10px; @@ -346,13 +342,3 @@ height: $navbar-logo-height; margin-right: 10px; } - -//Focus outline for dropdowns in Firefox -@supports (-moz-appearance:none) { - a.dropdown-toggle:focus { - outline: none; - } - a.dropdown-toggle:focus-visible { - outline: revert; - } -} diff --git a/themes/finna2/scss/global/navs-bootstrap.scss b/themes/finna2/scss/global/navs-bootstrap.scss index a2db0a56376..d578010c00c 100644 --- a/themes/finna2/scss/global/navs-bootstrap.scss +++ b/themes/finna2/scss/global/navs-bootstrap.scss @@ -2,24 +2,21 @@ margin-bottom: 12px; margin-top: 12px; > li { - display: block; > a { transition: background .2s ease-in-out; } } } -@media (min-width:$screen-md-min) { - .nav > li { - display: inline-block; - } -} +// TODO: clean up the tab styles below .nav-tabs { - border-bottom: 1px solid $nav-tabs-border-color; + .nav-link { + border-top: 4px solid transparent; + --#{$prefix}nav-tabs-border-radius: 0; + --#{$prefix}nav-link-hover-color: #{$nav-tabs-text-color}; + } // style 5 tabs to make sure they stay as tabs > li { - // Make the list-items overlay the bottom border - margin-bottom: -1px; > a { font-size: 1.1em; font-weight: 500; @@ -31,7 +28,6 @@ margin-bottom: 0; border-radius: 0; transition: none; - border-top: 4px solid transparent; @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { i { display: block; @@ -41,23 +37,15 @@ @media (max-width: $screen-sm-max) { font-size: .9em; } - &:hover { - color: $nav-tabs-link-hover-color; - border-color: transparent; - } } - // Active state, and its :hover to override normal :hover - &.active > a { - &, - &:hover, - &:focus { + // Active state + & > a.nav-link.active { background-color: $body-bg; - border: 1px solid $nav-tabs-border-color; + border-left: 1px solid $nav-tabs-border-color; border-top: 4px solid $nav-tabs-active-color; - border-bottom-color: transparent; + border-right: 1px solid $nav-tabs-border-color; transition: border 0.05s linear; color: $text-color; - } } } } @@ -65,37 +53,24 @@ @media (max-width:$screen-xs-max) { .nav-tabs { text-align: center; - //border-bottom: 5px solid $gray-lighter; + flex-wrap: nowrap; + #details { display: none; } > li { word-wrap: break-word; } - > li > a { - padding: 0 10px 10px; - background-color: transparent; - border: none; - border-bottom: 5px solid transparent; - margin:0; - i { - display: block; - min-height: 14px; - } - } - > li.active > a { - &, - &:hover, - &:focus { - border: none; - border-bottom: 5px solid $link-color; - } - } } } .tab-content { margin-bottom: 20px; + outline: 0; + &:focus-visible { + box-shadow: $focus-ring-box-shadow; + } + div.dataTables_info { white-space: normal; } diff --git a/themes/finna2/scss/global/tooltip-bootstrap.scss b/themes/finna2/scss/global/tooltip-bootstrap.scss index 0324c585b3b..c37e954adb7 100644 --- a/themes/finna2/scss/global/tooltip-bootstrap.scss +++ b/themes/finna2/scss/global/tooltip-bootstrap.scss @@ -1,38 +1,29 @@ .tooltip { max-width: $tooltip-max-width; - &.top { margin-top: -5px; padding: $tooltip-arrow-width 0; } - &.right { margin-left: 5px; padding: 0 $tooltip-arrow-width; } - &.bottom { margin-top: 5px; padding: $tooltip-arrow-width 0; } - &.left { margin-left: -5px; padding: 0 $tooltip-arrow-width; } - -} - -.tooltip-inner { - min-width: $tooltip-min-width; - padding: 12px 16px; - text-align: left; - font-size: 1.1em; - font-weight: normal; - box-shadow: 0px 0px 20px -10px $body-bg inset; - h4, h5, h6 { - font-size: 16px; - margin-top: 0; - margin: -12px -16px; - margin-bottom: 10px; - padding: 12px 16px 12px; - background-color: $tooltip-arrow-color; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - color: $tooltip-header-color; + &[data-popper-placement="bottom"] { + .tooltip-arrow { + --#{$prefix}tooltip-bg: #{$tooltip-arrow-color}; + } } -} -.tooltip { - &.bottom .tooltip-inner{ - box-shadow: 0px 5px 20px -4px $gray; - } - &.top .tooltip-inner{ - box-shadow: 0px -5px 20px -4px $gray; + .tooltip-inner { + min-width: $tooltip-min-width; + padding: 12px 16px; + text-align: left; + font-size: 1.1em; + font-weight: normal; + box-shadow: 0px 0px 20px 0px $gray-light; + h4, h5, h6 { + font-size: 16px; + margin-top: 0; + margin: -12px -16px; + margin-bottom: 10px; + padding: 12px 16px 12px; + background-color: $tooltip-arrow-color; + border-top-left-radius: $tooltip-border-radius; + border-top-right-radius: $tooltip-border-radius; + color: $tooltip-header-color; + } } } diff --git a/themes/finna2/scss/global/variables.scss b/themes/finna2/scss/global/variables.scss index d445682bb7e..df172a139ba 100644 --- a/themes/finna2/scss/global/variables.scss +++ b/themes/finna2/scss/global/variables.scss @@ -13,7 +13,7 @@ $logo-color: #fff !default; $aoe-brand-primary: #ccf5e7 !default; -$action-link-color: $brand-primary !default; +$action-link-color: $primary !default; // Extra extra small screen / phone (e.g. iPhone 5) $screen-xxs: 400px !default; @@ -36,6 +36,8 @@ $logo-height: 66px !default; $logo-separator-color: #fff !default; // Color of hr line under main logo $header-background-color: $body-bg !default; // Color of navigation bar top $header-text-color: $navbar-default-link-color !default; +$header-text-active-color: $header-text-color !default; +$header-text-hover-color: $header-text-color !default; $footer-background: $gray-ultralight !default; $footer-text-color: $gray !default; $finna-search-background: color.mix($body-bg, contrast($body-bg), 95%) !default; // Background color of finna searchbox section @@ -45,7 +47,7 @@ $finna-searchbox-link-color: $body-bg !default; // style searchbox link text col $finna-searchbox-link-background: rgba(1,1,1,0.6) !default; // style searchbox links (advanced search etc.) background contrast with background $finna-record-header-background: $gray-ultralight !default; $finna-feedback-color: #fff !default; -$finna-feedback-background: $brand-primary !default; +$finna-feedback-background: $primary !default; $field-margin-vertical: 20px !default; $field-margin-horizontal: 15px !default; $finna-text-shadow: 1px 1px 1px black !default; @@ -53,7 +55,7 @@ $finna-search-input-width: 0.655 !default; //== THIS is percentage Change this i $finna-button-radius: $border-radius-base !default; // Defines all button radiuses $finna-header-font-size: 1.6em !default; $record-title-font-size: 1.65em !default; -$record-holdings-title-background: $brand-primary !default; +$record-holdings-title-background: $primary !default; $record-holdings-title-color: color.mix($record-holdings-title-background, contrast($record-holdings-title-background), 5%) !default; $record-holdings-border-color: $gray-lighter !default; @@ -74,7 +76,7 @@ $infobox-text-color: $gray !default; $infobox-box-shadow: none !default; //== Finna facets -$sidebar-background: $brand-primary !default; +$sidebar-background: $primary !default; $sidebar-header-text-color: color.mix($sidebar-background, contrast($sidebar-background), 5%) !default; $sidebar-header-icon-color: #fff !default; $sidebar-border-color: color.mix($body-bg, contrast($body-bg), 80%) !default; @@ -92,12 +94,12 @@ $filterContent-background: $body-bg !default; $filterContent-border-color: color.mix($filterContent-background, contrast($filterContent-background), 80%) !default; $filterContent-text-color: $text-color !default; //Search tools -$finna-searchtools-background: $brand-primary !default; +$finna-searchtools-background: $primary !default; $finna-searchtools-color: $body-bg !default; //== Browsebar -$finna-browsebar-background: $brand-primary !default; +$finna-browsebar-background: $primary !default; $finna-browsebar-highlight-background: color.adjust($finna-browsebar-background, $lightness: -10% /*, $space: hsl*/) !default; $finna-browsebar-link-color: $body-bg !default; @@ -150,15 +152,16 @@ $myresearch-tabs-color: $gray !default; $myresearch-menu-header-font-color: #fff !default; // Finna info box -$finna-infobox-bg: color.adjust($brand-primary, $lightness: 70% /*, $space: hsl*/) !default; -$finna-infobox-border: 4px solid $brand-primary !default; -$finna-infobox-color: $brand-primary !default; +$finna-infobox-bg: color.adjust($primary, $lightness: 70% /*, $space: hsl*/) !default; +$finna-infobox-border: 4px solid $primary !default; +$finna-infobox-color: $primary !default; //== Typography // $font-size-root: 14px !default; +$font-size-icon-tiny: 0.7rem !default; $font-size-icon-small: 14px !default; $font-size-icon-large: 1.5em !default; @@ -174,7 +177,7 @@ $content-headings-font-size-h5: $content-font-size-base !default; $content-headings-font-size-h6: math.floor(($content-font-size-base * 0.875)) !default; $content-headings-line-height: $headings-line-height !default; $content-headings-color: $gray-dark !default; -$content-heading-background: $brand-secondary !default; +$content-heading-background: $secondary !default; $content-nav-bg: $gray-ultralight !default; @@ -222,8 +225,6 @@ $navbar-right: 64px !default; // Navbar links $navbar-font-size: 1.1em !default; // Font-size of navbar links $navbar-font-weight: 500 !default; // Font weight for navbar texts -// Navbar toggle -$navbar-toggle-color: $navbar-default-link-color !default; //== Navs @@ -270,6 +271,7 @@ $pagination-background: $body-bg !default; // //## //** Tooltips for Finna, set to inline or none; +$tooltip-tabs-default: inline !default; $tooltip-tabs-pci: inline !default; $tooltip-tabs-local: inline !default; $tooltip-facet: inline !default; @@ -282,13 +284,13 @@ $tooltip-eds-advanced: inline !default; $tooltip-summon-advanced: inline !default; $tooltip-button-color: $action-link-color !default; -$tooltip-min-width: 250px !default; +$tooltip-min-width: 150px !default; //== Modals // //## -$modal-header-background: $brand-primary !default; +$modal-header-background: $primary !default; $modal-header-color: color.mix($modal-header-background, contrast($modal-header-background), 5%) !default; diff --git a/themes/finna2/templates/Auth/ChoiceAuth/login.phtml b/themes/finna2/templates/Auth/ChoiceAuth/login.phtml index 26804a39dae..78e0ec9628c 100644 --- a/themes/finna2/templates/Auth/ChoiceAuth/login.phtml +++ b/themes/finna2/templates/Auth/ChoiceAuth/login.phtml @@ -12,8 +12,8 @@ diff --git a/themes/finna2/templates/Helpers/OnlinePayment/terms-CPU.phtml b/themes/finna2/templates/Helpers/OnlinePayment/terms-CPU.phtml index 3bc3ca7776d..acc57b4358b 100644 --- a/themes/finna2/templates/Helpers/OnlinePayment/terms-CPU.phtml +++ b/themes/finna2/templates/Helpers/OnlinePayment/terms-CPU.phtml @@ -14,7 +14,7 @@ - + diff --git a/themes/finna2/templates/Helpers/OnlinePayment/terms-PaytrailPaymentAPI.phtml b/themes/finna2/templates/Helpers/OnlinePayment/terms-PaytrailPaymentAPI.phtml index feea3954001..ff69c81806c 100644 --- a/themes/finna2/templates/Helpers/OnlinePayment/terms-PaytrailPaymentAPI.phtml +++ b/themes/finna2/templates/Helpers/OnlinePayment/terms-PaytrailPaymentAPI.phtml @@ -14,7 +14,7 @@ - + diff --git a/themes/finna2/templates/Helpers/OnlinePayment/terms-TurkuPaymentAPI.phtml b/themes/finna2/templates/Helpers/OnlinePayment/terms-TurkuPaymentAPI.phtml index 222347e35a4..bc20d36cbcb 100644 --- a/themes/finna2/templates/Helpers/OnlinePayment/terms-TurkuPaymentAPI.phtml +++ b/themes/finna2/templates/Helpers/OnlinePayment/terms-TurkuPaymentAPI.phtml @@ -14,7 +14,7 @@ - + diff --git a/themes/finna2/templates/Helpers/feedtabs.phtml b/themes/finna2/templates/Helpers/feedtabs.phtml index a164c5aea98..969b9c9c82c 100644 --- a/themes/finna2/templates/Helpers/feedtabs.phtml +++ b/themes/finna2/templates/Helpers/feedtabs.phtml @@ -12,8 +12,8 @@ $isActive = 0 === strcasecmp($this->active, $feed); $tabId = $this->id . '-' . $feed; ?> - diff --git a/themes/finna2/templates/Helpers/holding-callnumber.phtml b/themes/finna2/templates/Helpers/holding-callnumber.phtml index 93fddc633cb..f7cc59bb64e 100644 --- a/themes/finna2/templates/Helpers/holding-callnumber.phtml +++ b/themes/finna2/templates/Helpers/holding-callnumber.phtml @@ -24,7 +24,7 @@ qrCode): ?>
- +
@@ -33,11 +33,11 @@ return; reservationList($user)->getListsContainingRecord($this->driver)): ?>
- transEsc('Saved in')?>:
+ transEsc('Saved in')?>:
diff --git a/themes/finna2/templates/Recommend/SideFacets.phtml b/themes/finna2/templates/Recommend/SideFacets.phtml index 011494467ca..7a140dbf7f3 100644 --- a/themes/finna2/templates/Recommend/SideFacets.phtml +++ b/themes/finna2/templates/Recommend/SideFacets.phtml @@ -9,7 +9,7 @@ $resultsTotal = $results->getResultTotal(); ?> 0): ?> -

transEsc($this->slot('side-facet-caption')->get('Narrow Search')) ?>slot('side-facet-caption')->get() && !$this->translationEmpty('tooltip_facet_html')): ?>icon('help') ?>icon('sidefacets-close', 'sidefacets-close-icon') ?>

+

transEsc($this->slot('side-facet-caption')->get('Narrow Search')) ?>slot('side-facet-caption')->get() && !$this->translationEmpty('tooltip_facet_html')): ?>icon('help') ?>icon('sidefacets-close', 'sidefacets-close-icon') ?>

transEsc('page_reload_on_select_hint') ?> getParams()->getCheckboxFacets(); ?> @@ -67,11 +67,11 @@ if ($this->fromStreetSearch) { $dataTarget = 'side-collapse-' . $escTitle; ?>
- -
+
context($this)->renderInContext( 'Recommend/SideFacets/facet.phtml', diff --git a/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml b/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml index 9d54a7492b7..fa79f8417ae 100644 --- a/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml +++ b/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml @@ -26,7 +26,7 @@ $extraUrlFields = $results->getUrlQuery()->getParamsWithConfiguredDefaults(); ?>
-

transEsc($this->slot('side-facet-caption')->get('Narrow Search')) ?>slot('side-facet-caption')->get() && !$this->translationEmpty('tooltip_facet_html')): ?>icon('help') ?>icon('sidefacets-close', 'sidefacets-close-icon') ?>

+

transEsc($this->slot('side-facet-caption')->get('Narrow Search')) ?>slot('side-facet-caption')->get() && !$this->translationEmpty('tooltip_facet_html')): ?>icon('help') ?>icon('sidefacets-close', 'sidefacets-close-icon') ?>

getCheckboxFacets(); ?> 0): @@ -87,11 +87,11 @@ $rangeFacets = $this->recommend->getAllRangeFacets(); ?> $dataTarget = 'side-collapse-' . $escAttrField; ?>
- -
+