diff --git a/app/assets/builds/blacklight.css b/app/assets/builds/blacklight.css index bafbc131c0..67586a0613 100644 --- a/app/assets/builds/blacklight.css +++ b/app/assets/builds/blacklight.css @@ -1,133 +1,25 @@ -@charset "UTF-8"; /* This is the default blacklight theme. */ /* This file is generated by Blacklight. You probably don't want to edit this file directly, or you'll have to manually merge your changes if later versions of Blacklight change this file. Instead, use your own CSS file which over-rides things in this file. Or of course you can choose not to use the Blacklight CSS file at all in your local app. */ -.visually-hidden-xs { - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; -} -.visually-hidden-xs:not(caption) { - position: absolute !important; -} - -@media (max-width: 575.98px) { - .visually-hidden-sm { - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; - } - .visually-hidden-sm:not(caption) { - position: absolute !important; - } -} - -@media (max-width: 767.98px) { - .visually-hidden-md { - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; - } - .visually-hidden-md:not(caption) { - position: absolute !important; - } -} - -@media (max-width: 991.98px) { - .visually-hidden-lg { - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; - } - .visually-hidden-lg:not(caption) { - position: absolute !important; - } -} - -@media (max-width: 1199.98px) { - .visually-hidden-xl { - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; - } - .visually-hidden-xl:not(caption) { - position: absolute !important; - } -} - -@media (max-width: 1399.98px) { - .visually-hidden-xxl { - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; - } - .visually-hidden-xxl:not(caption) { - position: absolute !important; - } -} - -/* Warning! If you want to change these, just copy them into your own theme css. But you want to remove the !default, which only will set them if not already set. */ -/* for compatability with BS < 5.3 */ :root { - --bs-secondary-color: rgba(33, 37, 41, 0.75); /* for compatability with BS < 5.3 */ + --bl-logo-image: url("blacklight/logo.png"); + --bl-logo-width: 150px; + --bl-logo-height: 50px; + --bs-secondary-color: rgba( + 33, + 37, + 41, + 0.75 + ); /* for compatability with BS < 5.3 */ --bl-main-padding-y: 0.5rem; --bl-constraint-remove-hover-bg: #bb2d3b; --bl-constraint-remove-hover-border-color: #bb2d3b; --bl-field-name-color: var(--bs-secondary-color); } -.facet-field-heading { - border-bottom: 0; -} -.facet-field-heading button { - font-weight: 500; -} -.facet-field-heading button::after { - content: "❯"; - float: right; - transform: rotate(90deg); -} -.facet-field-heading button.collapsed { - border-bottom: 0; -} -.facet-field-heading button.collapsed::after { - transform: rotate(0deg); - transition: transform 0.1s ease; -} - .page-link { white-space: nowrap; } @@ -148,13 +40,13 @@ main { */ .navbar-logo { /* The main logo image for the Blacklight instance */ - background: transparent image_url("blacklight/logo.png") no-repeat top left; - background-size: 150px 50px; - height: 50px; + background: transparent var(--bl-logo-image) no-repeat top left; + background-size: var(--bl-logo-width) var(--bl-logo-height); + height: var(--bl-logo-height); overflow: hidden; text-indent: 100%; white-space: nowrap; - width: 150px; + width: var(--bl-logo-width); } .navbar-search { @@ -173,42 +65,31 @@ main { gap: 0.5rem 0.25rem; } +.applied-filter { + --separator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); +} .applied-filter .constraint-value { cursor: default; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + max-width: clamp(288px, 30vw, 500px); } -@media (max-width: 576px) { - .applied-filter .constraint-value { - max-width: 288px; - } -} -@media (min-width: 576px) and (max-width: 575.98px) { - .applied-filter .constraint-value { - max-width: 288px; - } -} -@media (min-width: 768px) and (max-width: 767.98px) { - .applied-filter .constraint-value { - max-width: 384px; - } -} -@media (min-width: 992px) { - .applied-filter .constraint-value { - max-width: 496px; - } -} -.applied-filter .constraint-value:hover, .applied-filter .constraint-value:active { - background-color: #6c757d; - border-color: #6c757d; - box-shadow: none; +.applied-filter .constraint-value .filter-name:after { + background-color: var(--bs-btn-color); + content: ""; + mask: var(--separator-icon); + mask-repeat: no-repeat; + display: inline-block; + height: 1.1rem; + width: 1.25rem; + vertical-align: text-bottom; + margin-right: -0.2rem; + margin-left: 0.25rem; + transition: background-color 0.15s ease-in-out; } -.applied-filter .filter-name:after { - color: #adb5bd; - content: "❯"; - font-size: 90%; - padding-left: 0.3em; +.applied-filter .constraint-value:hover .filter-name:after { + background-color: var(--bs-btn-hover-color); } .applied-filter .remove { --bs-btn-hover-bg: var(--bl-constraint-remove-hover-bg); @@ -226,31 +107,20 @@ main { .sort-pagination, .pagination-search-widgets { border-bottom: var(--bs-border-width) solid var(--bs-border-color); - margin-bottom: 1em; - padding-bottom: 1em; -} - -.pagination-search-widgets { - padding-top: 1px; - padding-bottom: 1rem; } .sort-pagination .dropdown-toggle { cursor: pointer; } +.no-js .btn-group:focus-within .dropdown-menu { + display: block; /* show menu when tabbing to it, without Javascript */ +} + .view-type { display: inline-block; } -.search-input-group { - width: 80%; -} -@media (max-width: ) { - .search-input-group { - width: auto; - } -} .modal_form { margin-bottom: 0; } @@ -293,14 +163,6 @@ main { .documents-list .document .document-main-section { flex-grow: 1; } -.documents-list .document .index-document-functions { - margin-bottom: 1.5rem; -} -@media (min-width: 576px) { - .documents-list .document .index-document-functions { - margin-bottom: 0; - } -} .documents-list .document .document-thumbnail { flex-grow: 0; margin-bottom: 3rem; @@ -314,10 +176,6 @@ main { padding-left: 0; } -.record-padding { - margin-top: 0.5rem; -} - @media (max-width: 575.98px) { .pagination { flex-wrap: wrap; @@ -325,7 +183,8 @@ main { } .group-key { - border-bottom: 1px solid rgb(62.9310344828, 73, 83.0689655172); + --bl-border-color: var(--bs-gray-600); + border-bottom: 1px solid var(--bl-border-color); clear: right; } @@ -333,201 +192,73 @@ main { border-bottom: 0; } -.more-in-group { - float: right; +.bookmark-toggle { + /* override for line 21. + Creates weird spacing in toolbar when min-width is set to 8rem */ } - -label.toggle-bookmark { - font-weight: inherit; - min-width: 8.5em; -} - -div.toggle-bookmark { - cursor: pointer; -} - -/* override for line 3. -Creates weird spacing in toolbar when min-width is set to 8rem */ -.header-tools label.toggle-bookmark { - min-width: 2rem; -} - .no-js .bookmark-toggle input[type=submit] { display: inline; } -.no-js .bookmark-toggle div.toggle-bookmark { +.no-js .bookmark-toggle .toggle-bookmark { display: none; } .bookmark-toggle input[type=submit] { display: none; } - -.toggle-bookmark .blacklight-icons svg { +.bookmark-toggle .toggle-bookmark { + cursor: pointer; +} +.bookmark-toggle .toggle-bookmark .toggle-bookmark-label { + font-weight: inherit; + min-width: 8.5em; +} +.bookmark-toggle .toggle-bookmark .toggle-bookmark-label .blacklight-icons svg { height: 1.25rem; width: 1.25rem; overflow: visible; fill: var(--bs-primary); } -.toggle-bookmark .blacklight-icons svg.bookmark-checked { +.bookmark-toggle .toggle-bookmark .toggle-bookmark-label .blacklight-icons svg.bookmark-checked { display: none; } - -.toggle-bookmark[type=checkbox]:checked + span svg.bookmark-checked { +.bookmark-toggle .toggle-bookmark .toggle-bookmark-input:checked + span svg.bookmark-checked { display: inherit; } -.toggle-bookmark[type=checkbox]:checked + span svg.bookmark-unchecked { +.bookmark-toggle .toggle-bookmark .toggle-bookmark-input:checked + span svg.bookmark-unchecked { display: none; } +.bookmark-toggle .header-tools .toggle-bookmark-label { + min-width: 2rem; +} .dl-invert dt { font-weight: normal; color: var(--bl-field-name-color); } -@media (max-width: 768px) { - .dl-invert dt { - text-align: left; - } -} @media (min-width: 768px) { .dl-invert dt { - text-align: right; + text-align: end; } } .sidenav { - --bl-facet-active-bg: #198754; - --bl-facet-active-item-color: #198754; - --bl-facet-margin-bottom: 1rem; + --bl-facet-active-bg: var(--bs-success); + --bl-facet-active-item-color: var(--bs-success); --bl-facet-remove-color: var(--bs-secondary-color); - --bl-facet-limit-body-padding: 1rem; - --bl-facets-smallish-padding: 0.25rem; - --bl-facets-smallish-border: var(--bs-border-width) solid - var(--bs-border-color); - --bl-facets-smallish-margin-bottom: 1rem; - --bl-facets-smallish-border-radius: 0.375rem; -} -.sidenav .navbar-toggler { - --bs-navbar-toggler-padding-x: 0.75rem; - --bs-navbar-toggler-padding-y: 0.25rem; - --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15); - --bs-navbar-toggler-border-radius: var(--bs-border-radius); - color: rgba(var(--bs-emphasis-color-rgb), 1); -} -.sidenav .navbar-toggler:hover, .sidenav .navbar-toggler:focus { - color: rgba(var(--bs-emphasis-color-rgb), 1); -} -.sidenav .navbar-toggler [data-hide-label] { +} +.sidenav .facet-toggle-button [data-hide-label] { display: inline; } -.sidenav .navbar-toggler [data-show-label] { +.sidenav .facet-toggle-button [data-show-label] { display: none; } -.sidenav .navbar-toggler[aria-expanded=false] [data-hide-label] { +.sidenav .facet-toggle-button[aria-expanded=false] [data-hide-label] { display: none; } -.sidenav .navbar-toggler[aria-expanded=false] [data-show-label] { +.sidenav .facet-toggle-button[aria-expanded=false] [data-show-label] { display: inline; } -@media (max-width: 575.98px) { - .facets-toggleable { - border: var(--bl-facets-smallish-border); - padding: var(--bl-facets-smallish-padding); - margin-bottom: var(--bl-facets-smallish-margin-bottom); - border-radius: var(--bl-facets-smallish-border-radius); - } -} -@media (min-width: 576px) { - .facets-toggleable .facets-collapse { - display: block !important; - width: 100%; - } - .facets-toggleable .navbar-toggler { - display: none; - } -} -@media (max-width: 767.98px) { - .facets-toggleable-sm { - border: var(--bl-facets-smallish-border); - padding: var(--bl-facets-smallish-padding); - margin-bottom: var(--bl-facets-smallish-margin-bottom); - border-radius: var(--bl-facets-smallish-border-radius); - } -} -@media (min-width: 768px) { - .facets-toggleable-sm .facets-collapse { - display: block !important; - width: 100%; - } - .facets-toggleable-sm .navbar-toggler { - display: none; - } -} -@media (max-width: 991.98px) { - .facets-toggleable-md { - border: var(--bl-facets-smallish-border); - padding: var(--bl-facets-smallish-padding); - margin-bottom: var(--bl-facets-smallish-margin-bottom); - border-radius: var(--bl-facets-smallish-border-radius); - } -} -@media (min-width: 992px) { - .facets-toggleable-md .facets-collapse { - display: block !important; - width: 100%; - } - .facets-toggleable-md .navbar-toggler { - display: none; - } -} -@media (max-width: 1199.98px) { - .facets-toggleable-lg { - border: var(--bl-facets-smallish-border); - padding: var(--bl-facets-smallish-padding); - margin-bottom: var(--bl-facets-smallish-margin-bottom); - border-radius: var(--bl-facets-smallish-border-radius); - } -} -@media (min-width: 1200px) { - .facets-toggleable-lg .facets-collapse { - display: block !important; - width: 100%; - } - .facets-toggleable-lg .navbar-toggler { - display: none; - } -} -@media (max-width: 1399.98px) { - .facets-toggleable-xl { - border: var(--bl-facets-smallish-border); - padding: var(--bl-facets-smallish-padding); - margin-bottom: var(--bl-facets-smallish-margin-bottom); - border-radius: var(--bl-facets-smallish-border-radius); - } -} -@media (min-width: 1400px) { - .facets-toggleable-xl .facets-collapse { - display: block !important; - width: 100%; - } - .facets-toggleable-xl .navbar-toggler { - display: none; - } -} -.facets-toggleable-xxl { - border: var(--bl-facets-smallish-border); - padding: var(--bl-facets-smallish-padding); - margin-bottom: var(--bl-facets-smallish-margin-bottom); - border-radius: var(--bl-facets-smallish-border-radius); -} -.facets-toggleable-xxl .facets-collapse { - display: block !important; - width: 100%; -} -.facets-toggleable-xxl .navbar-toggler { - display: none; -} - @media (max-width: 991.98px) { .no-js #sidebar { order: 6 !important; @@ -558,20 +289,17 @@ Creates weird spacing in toolbar when min-width is set to 8rem */ } .facet-limit { - margin-bottom: var(--bl-facet-margin-bottom); -} -.facet-limit .card-body { - padding: var(--bl-facet-limit-body-padding); + --bs-accordion-btn-bg: var(--bs-gray-100); + --bs-btn-hover-bg: var(--bs-gray-200); + --bs-accordion-active-bg: var(--bs-accordion-btn-bg); } .facet-limit-active { - border-color: #198754; -} -.facet-limit-active .card-header { - background-color: var(--bl-facet-active-bg); -} -.facet-limit-active .card-header .btn { - color: #fff; + --bs-accordion-btn-bg: var(--bl-facet-active-bg); + --bs-btn-hover-bg: var(--bs-accordion-btn-bg); + --bs-accordion-btn-color: var(--bs-light); + --bs-btn-hover-color: var(--bs-accordion-btn-color); + --bs-accordion-active-color: var(--bs-accordion-btn-color); } .facet-values { @@ -585,7 +313,7 @@ Creates weird spacing in toolbar when min-width is set to 8rem */ align-items: flex-start; padding: 3px 0; } -.facet-values li[role=treeitem] { +.facet-values li.treeitem { display: block; } .facet-values li .selected { @@ -632,11 +360,7 @@ Creates weird spacing in toolbar when min-width is set to 8rem */ /* Sidenav -------------------------------------------------- */ -.facet-pagination.top { - padding: 1rem; -} - -.pivot-facet.show, .no-js .btn-group:focus-within .pivot-facet.dropdown-menu { +.pivot-facet.show { display: flex; } @@ -649,25 +373,25 @@ Creates weird spacing in toolbar when min-width is set to 8rem */ .pivot-facet .facet-toggle-handle { margin-inline-start: -1.5rem; } -.facet-toggle-handle.collapsed .show, .facet-toggle-handle.collapsed .no-js .btn-group:focus-within .dropdown-menu, .no-js .btn-group:focus-within .facet-toggle-handle.collapsed .dropdown-menu { +.facet-toggle-handle.collapsed .show { display: flex; } .facet-toggle-handle.collapsed .hide { display: none; } -.facet-toggle-handle .show, .facet-toggle-handle .no-js .btn-group:focus-within .dropdown-menu, .no-js .btn-group:focus-within .facet-toggle-handle .dropdown-menu { +.facet-toggle-handle .show { display: none; } .facet-toggle-handle .hide { display: flex; } -.facet-toggle-handle .show .icon, .facet-toggle-handle .no-js .btn-group:focus-within .dropdown-menu .icon, .no-js .btn-group:focus-within .facet-toggle-handle .dropdown-menu .icon, +.facet-toggle-handle .show .icon, .facet-toggle-handle .hide .icon { width: 1em; height: 1em; padding: 0.375rem 0.75rem; } -.facet-toggle-handle .show .icon, .facet-toggle-handle .no-js .btn-group:focus-within .dropdown-menu .icon, .no-js .btn-group:focus-within .facet-toggle-handle .dropdown-menu .icon { +.facet-toggle-handle .show .icon { background: transparent url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16"%3e%3cpath d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" /%3e%3cpath d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" /%3e%3c/svg%3e') center/1em auto no-repeat; } .facet-toggle-handle .hide .icon { @@ -694,7 +418,7 @@ Creates weird spacing in toolbar when min-width is set to 8rem */ } .modal-content .facet-pagination.top { - display: none; + display: none; /* Doesn't display in a modal, but would display on a new page (e.g. without Javascript) */ } .modal-content .page-sidebar { display: none; @@ -710,39 +434,7 @@ Creates weird spacing in toolbar when min-width is set to 8rem */ display: none; } -.btn.btn-icon { - padding: 0.375rem; -} -.btn.btn-icon.btn-sm { - padding: 0.25rem; -} - .remove .bi { height: 1em; width: 1em; } - -auto-complete [aria-selected=true], -auto-complete [role=option]:hover { - background-color: var(--bs-tertiary-bg); -} - -auto-complete { - position: relative; - flex-grow: 3; -} -auto-complete ul { - list-style-type: none; - position: absolute; - background-color: var(--bs-body-bg); - padding-left: 0; - border: 1px solid var(--bs-border-color-translucent); - border-radius: var(--bs-border-radius); -} -auto-complete [role=option] { - padding: 0.25rem 1.5rem; -} - -.no-js #autocomplete-popup { - display: none; -} diff --git a/app/assets/stylesheets/blacklight/build.scss b/app/assets/stylesheets/blacklight/build.scss index e47dce5b46..8cf1c485b9 100644 --- a/app/assets/stylesheets/blacklight/build.scss +++ b/app/assets/stylesheets/blacklight/build.scss @@ -1,5 +1,4 @@ @import "bootstrap/scss/functions"; @import "bootstrap/scss/mixins/breakpoints"; -@import "bootstrap/scss/mixins/visually-hidden"; @import "bootstrap/scss/variables"; @import "blacklight"; diff --git a/app/views/layouts/blacklight/base.html.erb b/app/views/layouts/blacklight/base.html.erb index cbdd44021c..bdc5498e79 100644 --- a/app/views/layouts/blacklight/base.html.erb +++ b/app/views/layouts/blacklight/base.html.erb @@ -12,7 +12,6 @@ <%= opensearch_description_tag application_name, opensearch_catalog_url(format: 'xml') %> <%= favicon_link_tag %> <%= stylesheet_link_tag "application", media: "all", "data-turbo-track": "reload" %> - <%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" unless defined? Propshaft %> <% if defined? Importmap %> <%= javascript_importmap_tags %> diff --git a/lib/generators/blacklight/assets/importmap_generator.rb b/lib/generators/blacklight/assets/importmap_generator.rb index 62c21abd54..f8d856c703 100644 --- a/lib/generators/blacklight/assets/importmap_generator.rb +++ b/lib/generators/blacklight/assets/importmap_generator.rb @@ -49,8 +49,10 @@ def add_stylesheet else append_to_file 'app/assets/stylesheets/application.css' do <<~CONTENT - @import url("blacklight.css"); - @import stylesheet_path("blacklight.css"); + /* + *= require blacklight + */ + @import url(https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css); CONTENT end end diff --git a/package.json b/package.json index 9c5a9357aa..827b403b78 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ }, "type": "module", "scripts": { - "build": "sass ./app/assets/stylesheets/blacklight/build.scss:./app/assets/builds/blacklight.css --no-source-map --load-path=node_modules", + "build": "sass ./app/assets/stylesheets/blacklight/build.scss:./app/assets/builds/blacklight.css --no-source-map --load-path=node_modules --quiet-deps", "prepare": "rollup --config rollup.config.js --sourcemap && ESM=true rollup --config rollup.config.js --sourcemap" }, "repository": {