fix(ionrangeslider): Bring in the shiny-preset ionrangslider rules to…

… the precompiled CSS (#750)
posit-dev · Oct 4, 2023 · 1bdde89 · 1bdde89
1 parent 15bd9b8
commit 1bdde89
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 0 deletions.
diff --git 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
@@ -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;
+}
+