From 211ba1a4a0a8bf66e4d78874af0eecf764b33091 Mon Sep 17 00:00:00 2001
From: Scott Finkel <60365779+sf0319@users.noreply.github.com>
Date: Wed, 15 Nov 2023 01:06:48 -0800
Subject: [PATCH] Added dropdowns for the Request tab.
---
internal/resources/webform/webform-sample.css | 39 +++++++++++++++++++
.../resources/webform/webform-template.html | 32 +++++++++------
2 files changed, 60 insertions(+), 11 deletions(-)
diff --git a/internal/resources/webform/webform-sample.css b/internal/resources/webform/webform-sample.css
index 5fc7302..17cf41f 100644
--- a/internal/resources/webform/webform-sample.css
+++ b/internal/resources/webform/webform-sample.css
@@ -763,3 +763,42 @@ button#grpc-history-clear, button#grpc-history-save {
padding: 1em;
margin-bottom: 1em;
}
+
+/* Style for the checkbox and label */
+.toggle-label {
+ display: block;
+ cursor: pointer;
+ padding: 3px 5px 3px 5px;
+}
+
+/* Default state of the toggle-content (hidden) */
+.toggle-content {
+ display: none;
+ padding: 5px 20px;
+}
+
+/* Style for the arrow */
+.arrow {
+ float: left;
+ transition: transform 0.2s ease-in-out; /* Added transition */
+}
+
+/* Hide the checkbox */
+.markdown-collapsible input[type="checkbox"] {
+ display: none;
+}
+
+/* Show content when checkbox is checked */
+.markdown-collapsible input[type="checkbox"]:checked ~ .toggle-content {
+ display: block;
+}
+
+/* Rotate arrow for checked state */
+.markdown-collapsible input[type="checkbox"]:checked + .toggle-label .arrow {
+ transform: rotate(90deg);
+}
+
+/* Rotate arrow for unchecked state */
+.markdown-collapsible input[type="checkbox"]:not(:checked) + .toggle-label .arrow {
+ transform: rotate(0deg);
+}
\ No newline at end of file
diff --git a/internal/resources/webform/webform-template.html b/internal/resources/webform/webform-template.html
index 79e5df4..ae882e1 100644
--- a/internal/resources/webform/webform-template.html
+++ b/internal/resources/webform/webform-template.html
@@ -51,20 +51,30 @@ Examples
History