From 80fd327b0d8a2148029e8757bc96598c488a0e0a Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Tue, 18 Jul 2023 09:39:04 -0400 Subject: [PATCH 1/2] fix(shiny-preset): Adjust slider handle size and position to better center on line and bar --- inst/builtin/bs5/shiny/ionrangeslider/_rules.scss | 2 +- inst/builtin/bs5/shiny/ionrangeslider/_variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/inst/builtin/bs5/shiny/ionrangeslider/_rules.scss b/inst/builtin/bs5/shiny/ionrangeslider/_rules.scss index 4846af8fb..3ffccfaa1 100644 --- a/inst/builtin/bs5/shiny/ionrangeslider/_rules.scss +++ b/inst/builtin/bs5/shiny/ionrangeslider/_rules.scss @@ -13,7 +13,7 @@ } .irs-handle { - top: $handle_radius; + top: $handle_radius + 1px; } .irs-bar { diff --git a/inst/builtin/bs5/shiny/ionrangeslider/_variables.scss b/inst/builtin/bs5/shiny/ionrangeslider/_variables.scss index 0e5abd378..9d8ef6eb9 100644 --- a/inst/builtin/bs5/shiny/ionrangeslider/_variables.scss +++ b/inst/builtin/bs5/shiny/ionrangeslider/_variables.scss @@ -14,7 +14,7 @@ $handle_color_hover: tint-color($handle_color, 15%) !default; $handle_border: none !default; $handle_box_shadow: none !default; $handle_radius: $top - 10px !default; -$handle_height: 19px !default; +$handle_height: 18px !default; $handle_width: $handle_height !default; $bar_color: $component-active-bg !default; From a3325d546d05dfd7f99ce8aa2d5b8b70add875a2 Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Tue, 18 Jul 2023 14:33:28 -0400 Subject: [PATCH 2/2] feat(shiny-preset): Center slider handle without changing size --- inst/builtin/bs5/shiny/ionrangeslider/_rules.scss | 2 +- inst/builtin/bs5/shiny/ionrangeslider/_variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/inst/builtin/bs5/shiny/ionrangeslider/_rules.scss b/inst/builtin/bs5/shiny/ionrangeslider/_rules.scss index 3ffccfaa1..0c6feeb30 100644 --- a/inst/builtin/bs5/shiny/ionrangeslider/_rules.scss +++ b/inst/builtin/bs5/shiny/ionrangeslider/_rules.scss @@ -13,7 +13,7 @@ } .irs-handle { - top: $handle_radius + 1px; + top: $top - ($handle_height / 2) + ($line_height / 2); } .irs-bar { diff --git a/inst/builtin/bs5/shiny/ionrangeslider/_variables.scss b/inst/builtin/bs5/shiny/ionrangeslider/_variables.scss index 9d8ef6eb9..0e5abd378 100644 --- a/inst/builtin/bs5/shiny/ionrangeslider/_variables.scss +++ b/inst/builtin/bs5/shiny/ionrangeslider/_variables.scss @@ -14,7 +14,7 @@ $handle_color_hover: tint-color($handle_color, 15%) !default; $handle_border: none !default; $handle_box_shadow: none !default; $handle_radius: $top - 10px !default; -$handle_height: 18px !default; +$handle_height: 19px !default; $handle_width: $handle_height !default; $bar_color: $component-active-bg !default;