diff --git a/scripts/htmlDependencies.R b/scripts/htmlDependencies.R index fd1ebdaa1..a432a8ef3 100755 --- a/scripts/htmlDependencies.R +++ b/scripts/htmlDependencies.R @@ -134,6 +134,21 @@ shiny_theme <- bslib::bs_theme(version = 5, preset = "shiny") # Save iorange slider dep # Get _dynamic_ ionrangeslider dep ion_dep <- shiny:::ionRangeSliderDependencyCSS(shiny_theme) +ion_dep_css <- fs::path(ion_dep$src$file, ion_dep$stylesheet) +# Preset="shiny" additional ionRangeSlider rules +ion_preset_rules <- system.file("builtin", "bs5", "shiny", "ionrangeslider", "_rules.scss", package = "bslib") +ion_preset_compiled <- + sass::sass_partial( + readLines(ion_preset_rules), + shiny_theme, + write_attachments = FALSE, + cache = FALSE + ) +# Append preset styles to the base ionRangeSlider CSS +cat( + c("\n\n/* shiny preset styles */\n\n", ion_preset_compiled), + file = ion_dep_css, sep = "\n", append = TRUE +) if (inherits(ion_dep, "html_dependency")) { ion_dep <- list(ion_dep) } diff --git a/shiny/www/shared/ionrangeslider/css/ion.rangeSlider.css b/shiny/www/shared/ionrangeslider/css/ion.rangeSlider.css index 8bd3f34bc..9decf1b46 100644 --- a/shiny/www/shared/ionrangeslider/css/ion.rangeSlider.css +++ b/shiny/www/shared/ionrangeslider/css/ion.rangeSlider.css @@ -290,3 +290,69 @@ .irs--shiny .irs-grid-pol.small { background-color: transparent; } + + +/* shiny preset styles */ + + +/*-- scss:defaults --*/ +.irs.irs--shiny { + margin-top: 3px; +} + +.irs.irs--shiny .irs-min, +.irs.irs--shiny .irs-max, +.irs.irs--shiny .irs-from, +.irs.irs--shiny .irs-to, +.irs.irs--shiny .irs-single { + padding: 3px 6px; + top: -3px; +} + +.irs.irs--shiny .irs-handle { + top: 23px; +} + +.irs.irs--shiny .irs-bar { + top: 31px; + height: 3px; + border: none; +} + +.irs.irs--shiny .irs-line { + border-radius: 8px; +} + +.irs.irs--shiny .irs-grid-pol { + height: 6px; +} + +.irs.irs--shiny .irs-grid-text { + bottom: 8px; +} + +.irs.irs--shiny .irs-handle:focus-visible, +.irs.irs--shiny .irs-handle:active { + color: #005688; + background-color: #005688; + border-color: #005688; + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(0, 123, 194, 0.25); +} + +.irs.irs--shiny ~ .slider-animate-container { + text-align: left; +} + +.irs.irs--shiny ~ .slider-animate-container .slider-animate-button { + opacity: 1; +} + +.irs.irs--shiny.irs-with-grid ~ .slider-animate-container { + margin-top: -5px; +} + +.irs.irs--shiny:not(.irs-with-grid) ~ .slider-animate-container { + margin-top: 5px; +} +