Merge pull request #7396 from christianbeeznest/GH-7378-2

Exercise: Fix legacy checkbox styling (spacing + primary checked state) - refs #7378

Author: christianbeeznest

assets/css/scss/_exercise.scss

@@ -34,18 +34,14 @@
   font-weight: normal;
 }
 
+.question_options .checkbox,
 .question_options .radio {
-  min-height: 18px;
-  margin-left: 65px;
-}
-
-.question_options .checkbox {
-  margin-left: 65px;
+  margin-left: 5px;
 }
 
 .question_options .radio input[type="radio"], .question_options .checkbox input[type="checkbox"] {
   float: left;
-  margin-left: -25px;
+  margin-right: 5px;
 }
 
 .question_options input[type="text"] {

assets/css/scss/atoms/_checkbox.scss

@@ -94,3 +94,27 @@
 .p-checkbox-input:checked + .p-checkbox-box .p-checkbox-icon {
   @apply block;
 }
+.p-checkbox.p-component {
+  @apply relative inline-flex items-center mr-2;
+}
+.p-checkbox.p-component input[type="checkbox"] {
+  @apply absolute top-0 left-0 w-5 h-5 m-0 opacity-0 cursor-pointer;
+  z-index: 2;
+}
+.p-checkbox-box {
+  @apply w-5 h-5 flex items-center justify-center border border-gray-30 rounded;
+  z-index: 1;
+}
+.p-checkbox.p-component + label,
+.p-checkbox.p-component ~ label {
+  @apply ml-2;
+}
+.p-checkbox-box .p-checkbox-icon {
+  @apply hidden;
+}
+.p-checkbox.p-component input[type="checkbox"]:checked + .p-checkbox-box {
+  @apply bg-primary border-primary;
+}
+.p-checkbox.p-component input[type="checkbox"]:checked + .p-checkbox-box .p-checkbox-icon {
+  @apply block text-white;
+}