Improve input feedback styles and add focus style to checkboxes.

The correct/incorrect/partial-correct and focus box-shadows are also
made a bit more pronounced by removing the blur radius and making the
spread radius a tad bigger.  Basically, the same box-shadow used by
bootstrap for buttons and inputs.

To make this work well the margins between buttons and inputs needed to
be increased a bit so that the box-shadows of the two don't overlap.

The focus style has also been added to checkboxes.  I think this style
accidentally didn't get added for checkboxes when the
correct/incorrect/partially-correct styles were added for checkboxes.
This caused an undesirable lack of style when a checkbox was focused
that could be confusing (@Alex-Jordan observed this a while back).

The focus colors have been synchronized with those of MathQuill.
MathQuill will also need a change to its style so that MathQuill inputs
have the same box-shadow when focused.

Author: drgrice1

htdocs/js/MathQuill/mqeditor.js

@@ -137,7 +137,7 @@
 			// Find the preview button container, and add the equation editor button to that.
 			const buttonContainer = document.getElementById(`${answerLabel}-latexentry-button-container`);
 			if (buttonContainer) {
-				buttonContainer.classList.add('d-flex', 'gap-1');
+				buttonContainer.classList.add('d-flex', 'gap-2');
 				buttonContainer.prepend(button);
 				innerContainer.append(buttonContainer);
 			} else {
@@ -146,7 +146,7 @@
 
 			// Create a collapse to hold the editor.
 			const collapse = document.createElement('div');
-			collapse.classList.add('collapse', 'mt-1');
+			collapse.classList.add('collapse', 'mt-2');
 			collapse.id = `${answerLabel}-equation-editor`;
 
 			let blinkInterval;
@@ -221,7 +221,7 @@
 				'pt-0',
 				'pb-2',
 				'px-2',
-				'gap-1',
+				'gap-2',
 				'bg-white',
 				'border-top-0'
 			);

htdocs/js/MathView/mathview.js

@@ -94,7 +94,7 @@
 				// Find the preview button container, and wrap it in the inner container.
 				const buttonContainer = container.nextElementSibling;
 				if (buttonContainer && buttonContainer.classList.contains('latexentry-button-container')) {
-					buttonContainer.classList.add('d-flex', 'justify-content-end', 'gap-1');
+					buttonContainer.classList.add('d-flex', 'justify-content-end', 'gap-2');
 					buttonContainer.append(this.button);
 					innerContainer.append(buttonContainer);
 				} else {
@@ -171,7 +171,7 @@
 				inputGroup.append(this.inputTextBox);
 
 				const footer = document.createElement('div');
-				footer.classList.add('d-flex', 'justify-content-end', 'gap-1', 'mt-2');
+				footer.classList.add('d-flex', 'justify-content-end', 'gap-2', 'mt-2');
 
 				const insertButton = document.createElement('button');
 				insertButton.type = 'button';

htdocs/js/Problem/problem.scss

@@ -73,27 +73,27 @@
 	span[id^='mq-answer'],
 	.graphtool-container {
 		&.correct:not(:focus):not(.mq-focused) {
-			border-color: rgba(81, 153, 81, 1); /* green */
+			border-color: rgba(81, 153, 81, 0.8); /* green */
 			outline: 0;
 			box-shadow:
 				inset 0 0 2px 1px rgba(0, 0, 0, 0.25),
-				0 0 8px 2px rgba(81, 153, 81, 1);
+				0 0 0 0.2rem rgba(81, 153, 81, 0.5);
 		}
 
 		&.incorrect:not(:focus):not(.mq-focused) {
-			border-color: rgba(191, 84, 84, 1); /* red */
+			border-color: rgba(191, 84, 84, 0.8); /* red */
 			outline: 0;
 			box-shadow:
 				inset 0 0 2px 1px rgba(0, 0, 0, 0.25),
-				0 0 8px 2px rgba(191, 84, 84, 1);
+				0 0 0 0.2rem rgba(191, 84, 84, 0.5);
 		}
 
 		&.partially-correct:not(:focus):not(.mq-focused) {
 			border-color: rgba(255, 193, 7, 1); /* yellow */
 			outline: 0;
 			box-shadow:
 				inset 0 0 2px 1px rgba(0, 0, 0, 0.25),
-				0 0 8px 2px rgba(255, 193, 7, 1);
+				0 0 0 0.2rem rgba(255, 193, 7, 0.8);
 		}
 	}
 
@@ -116,14 +116,15 @@
 
 	input[type='text'],
 	input[type='radio'],
+	input[type='checkbox'],
 	textarea,
 	select {
 		&:focus {
-			border-color: rgba(82, 168, 236, 0.8);
+			border-color: rgba(112, 154, 192, 0.8);
 			outline: 0;
 			box-shadow:
-				inset 0 1px 1px rgba(0, 0, 0, 0.075),
-				0 0 8px 2px rgba(82, 168, 236, 0.6);
+				inset 0 1px 1px rgba(0, 0, 0, 0.25),
+				0 0 0 0.2rem rgba(136, 187, 221, 0.8);
 		}
 	}
 

macros/PG.pl

@@ -840,7 +840,7 @@ =head2 ENDDOCUMENT
 =item *
 
 C<btnAddClass>: This is a string containing additional space separated CSS
-classes to add to the feedback button. This is "ms-1" by default. Macros can
+classes to add to the feedback button. This is "ms-2" by default. Macros can
 change this to affect positioning of the button. This generally should not be
 used to change the appearance of the button.
 
@@ -1037,7 +1037,7 @@ sub ENDDOCUMENT {
 					resultTitle      => maketext('Answer Preview'),
 					resultClass      => '',
 					btnClass         => 'btn-info',
-					btnAddClass      => 'ms-1',
+					btnAddClass      => 'ms-2',
 					feedbackElements => Mojo::Collection->new,
 					insertElement    => undef,
 					insertMethod     => 'append',    # Can be append, append_content, prepend, or prepend_content.

macros/core/PGessaymacros.pl

@@ -134,7 +134,7 @@ sub NAMED_ESSAY_BOX {
 			)
 			. tag(
 				'div',
-				class                        => 'latexentry-button-container d-flex gap-1 mt-1',
+				class                        => 'latexentry-button-container d-flex gap-2 mt-2',
 				id                           => "$name-latexentry-button-container",
 				data_feedback_insert_element => $name,
 				tag(