Make CSS selectors for the customized checkbox in booleanInput more s…

…elective (#75)
Doenet · Dec 20, 2023 · a89f0de · a89f0de
1 parent e1464d1
commit a89f0de
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/packages/doenetml/src/Viewer/renderers/booleanInput.css b/packages/doenetml/src/Viewer/renderers/booleanInput.css
@@ -1,5 +1,5 @@
 /* Customize the label (the container) */
-.container {
+.doenetml-boolean-container {
     /* display: inline-block; */
     position: relative;
     padding-left: 24px;
@@ -13,7 +13,7 @@
     user-select: none;
 }
 
-.container-disabled {
+.doenetml-boolean-container-disabled {
     cursor: not-allowed;
 }
 
@@ -30,7 +30,7 @@
 } */
 
 /* Hide the browser's default checkbox */
-.container input {
+.doenetml-boolean-container input[type='checkbox'] {
     position: absolute;
     opacity: 0;
     cursor: pointer;
@@ -39,7 +39,7 @@
 }
 
 /* Create a custom checkbox */
-.checkmark {
+.doenetml-checkmark {
     position: absolute;
     top: 0;
     left: 0;
@@ -53,46 +53,46 @@
     box-sizing: content-box;
 }
 
-.checkmark-disabled {
+.doenetml-checkmark-disabled {
     background-color: var(--mainGray);
     border-color: var(--mainGray);
 }
 
 /* On mouse-over, add a light blue background color */
-.container:hover input ~ .checkmark {
+.doenetml-boolean-container:hover input[type='checkbox'] ~ .doenetml-checkmark {
     background-color: var(--lightBlue);
 }
 
 /* On mouse-over of disabled, keep the grey background color */
-.container:hover input ~ .checkmark-disabled {
+.doenetml-boolean-container:hover input[type='checkbox'] ~ .doenetml-checkmark-disabled {
     background-color: var(--mainGray);
 }
 
 /* When the checkbox is checked, add a dark blue background */
-.container input:checked ~ .checkmark {
+.doenetml-boolean-container input[type='checkbox']:checked ~ .doenetml-checkmark {
     background-color: var(--mainBlue);
 }
 
 /* When a checkbox has focus, add a dark blue outline */
-.container:focus-within input ~ .checkmark {
+.doenetml-boolean-container:focus-within input[type='checkbox'] ~ .doenetml-checkmark {
     outline: 2px solid var(--canvastext);
     outline-offset: 2px;
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
+.doenetml-checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }
 
 /* Show the checkmark when checked */
-.container input:checked ~ .checkmark:after {
+.doenetml-boolean-container input[type='checkbox']:checked ~ .doenetml-checkmark:after {
     display: block;
 }
 
 /* Style the checkmark/indicator */
-.container .checkmark:after {
+.doenetml-boolean-container .doenetml-checkmark:after {
     left: 5px;
     top: 1px;
     width: 5px;

diff --git a/packages/doenetml/src/Viewer/renderers/booleanInput.jsx b/packages/doenetml/src/Viewer/renderers/booleanInput.jsx
@@ -611,11 +611,11 @@ export default React.memo(function BooleanInput(props) {
             />
         );
     } else {
-        let containerClass = "container";
-        let checkmarkClass = "checkmark";
+        let containerClass = "doenetml-boolean-container";
+        let checkmarkClass = "doenetml-checkmark";
         if (disabled) {
-            containerClass += " container-disabled";
-            checkmarkClass += " checkmark-disabled";
+            containerClass += " doenetml-boolean-container-disabled";
+            checkmarkClass += " doenetml-checkmark-disabled";
         }
         input = (
             <label className={containerClass}>