button styling updated

surveydown-dev · Sep 24, 2024 · 77c8e2d · 77c8e2d
1 parent 48af78b
commit 77c8e2d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 19 deletions.
diff --git a/R/ui.R b/R/ui.R
@@ -223,12 +223,13 @@ sd_question <- function(
     } else if (type == "mc_buttons") {
 
         output <- shinyWidgets::radioGroupButtons(
-            inputId  = id,
-            label    = markdown_to_html(label),
-            choices  = list_name_md_to_html(option),
-            selected = character(0),
-            width    = width,
-            status   = status
+            inputId    = id,
+            label      = markdown_to_html(label),
+            choices    = list_name_md_to_html(option),
+            direction  = direction,
+            selected   = character(0),
+            width      = width,
+            status     = status
         )
 
         output <- shiny::tagAppendChild(output, shiny::tags$script(shiny::HTML(sprintf("

diff --git a/inst/css/surveydown.css b/inst/css/surveydown.css
@@ -49,12 +49,14 @@ p, .form-group, .control-label {
 }
 
 /* Button group styling */
-.radio-group-buttons,
-.checkbox-group-buttons,
-.btn-group-container-sw {
-  display: inline-flex;
-  overflow: hidden;
-  border-radius: 4px;
+.radio-group-buttons .btn-group-container-sw,
+.checkbox-group-buttons .btn-group-container-sw {
+  display: flex;
+  row-gap: 5px;
+}
+
+.checkbox-group-buttons .btn-group-container-sw {
+  column-gap: 5px;
 }
 
 .radio-group-buttons .btn,
@@ -64,8 +66,6 @@ p, .form-group, .control-label {
   background-color: color-mix(in srgb, var(--theme-color) 10%, white);
   color: var(--theme-color);
   transition: all 0.3s ease;
-  margin-right: -1px;
-  position: relative;
 }
 
 .radio-group-buttons .btn:hover,
@@ -161,11 +161,6 @@ p, .form-group, .control-label {
   flex-wrap: wrap;
 }
 
-/* Styles for multiple choice buttons (gap: 0.5rem) */
-.checkbox-group-buttons .btn-group-container-sw {
-  gap: 0.5rem;
-}
-
 /* Page Navigation Buttons */
 .btn-primary,
 .btn-primary:hover,