Put the facet heading padding in a variable

This makes it easier to customize
projectblacklight · Dec 18, 2024 · e9a920e · e9a920e
1 parent cba1179
commit e9a920e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/app/assets/builds/blacklight.css b/app/assets/builds/blacklight.css
@@ -24,10 +24,12 @@
   white-space: nowrap;
 }
 
-.modal[open] {
+dialog.modal[open] {
   display: block;
   background: none;
   border: none;
+  max-height: unset;
+  max-width: unset;
 }
 
 /* Generic layout stuff */
@@ -88,9 +90,6 @@ main {
   margin-left: 0.25rem;
   transition: background-color 0.15s ease-in-out;
 }
-.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);
   --bs-btn-hover-border-color: var(--bl-constraint-remove-hover-border-color);
@@ -245,6 +244,10 @@ main {
   --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-remove-hover-color: var(--bs-danger);
+  --bl-facet-label-indent: -15px;
+  --bl-facet-label-padding-left: 15px;
+  --bl-facet-header-padding-y: 0.5rem;
 }
 .sidenav .facet-toggle-button [data-hide-label] {
   display: inline;
@@ -280,8 +283,7 @@ main {
 .facets-header {
   display: flex;
   justify-content: space-between;
-  padding-bottom: 0.5rem;
-  padding-top: 0.5rem;
+  padding-block: var(--bl-facet-header-padding-y);
 }
 
 .facets-heading {
@@ -326,15 +328,15 @@ main {
   text-decoration: none;
 }
 .facet-values .remove:hover {
-  color: #dc3545;
+  color: var(--bl-facet-remove-hover-color);
   text-decoration: none;
 }
 .facet-values .facet-label {
   hyphens: auto;
   overflow-wrap: break-word;
-  padding-left: 15px;
+  padding-left: var(--bl-facet-label-padding-left);
   padding-right: 1em;
-  text-indent: -15px;
+  text-indent: var(--bl-facet-label-indent);
 }
 .facet-values .facet-count {
   margin-left: auto;

diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
@@ -5,6 +5,7 @@
   --bl-facet-remove-hover-color: var(--bs-danger);
   --bl-facet-label-indent: -15px;
   --bl-facet-label-padding-left: 15px;
+  --bl-facet-header-padding-y: 0.5rem;
 
   .facet-toggle-button {
     [data-hide-label] {
@@ -52,8 +53,7 @@
 .facets-header {
   display: flex;
   justify-content: space-between;
-  padding-bottom: 0.5rem;
-  padding-top: 0.5rem;
+  padding-block: var(--bl-facet-header-padding-y);
 }
 
 .facets-heading {