Skip to content

Commit

Permalink
Allow active facet header color to be set with a css property
Browse files Browse the repository at this point in the history
Fixes #3174
  • Loading branch information
jcoyne committed Aug 6, 2024
1 parent 7dd3d98 commit 1e30a3e
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 13 deletions.
12 changes: 1 addition & 11 deletions app/assets/stylesheets/blacklight/_facets.scss
Original file line number Diff line number Diff line change
Expand Up @@ -110,19 +110,9 @@

.facet-limit-active {
border-color: $facet-active-border !important;

.card-header {
--bs-btn-color: #{$facet-active-header-color};
background-color: $facet-active-bg !important;

.btn {
@if function-exists(color-contrast) {
color: color-contrast($facet-active-bg);
}

@if function-exists(color-yiq) {
color: color-yiq($facet-active-bg);
}
}
}
}

Expand Down
22 changes: 20 additions & 2 deletions app/assets/stylesheets/blacklight/blacklight_defaults.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,35 @@
/* 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. */

$logo-image: image_url('blacklight/logo.png') !default;
$logo-image: image_url("blacklight/logo.png") !default;
$logo-width: 150px !default;
$logo-height: 50px !default;

// the default bootstrap font-family list includes "Segoe UI Emoji", which, on windows
// renders our remove icon as an emoji-sized x instead of what we see on all other platforms...
// so, for now (until we replace it with an SVG icon or something), we get to override bootstrap:
$remove-icon-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default;
$remove-icon-font-family:
system-ui,
-apple-system,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
"Liberation Sans",
sans-serif !default;

$facet-active-border: $success !default;
$facet-active-bg: $success !default;
$facet-active-item-color: $success !default;
$facet-active-header-color: $black;
/* Bootstrap 5+ */
@if function-exists(color-contrast) {
$facet-active-header-color: color-contrast($facet-active-bg);
}
/* Bootstrap 4 */
@if function-exists(color-yiq) {
$facet-active-header-color: color-yiq($facet-active-bg);
}

/* for compatability with BS < 5.3 */
$body-secondary-color: rgba($body-color, 0.75) !default;
Expand Down

0 comments on commit 1e30a3e

Please sign in to comment.