Align checkbox indent line with the checkboxes (#3421)

* initial changes * update based on design review * Update further based on design review
ONSdigital · Nov 13, 2024 · 31db5cc · 31db5cc
1 parent 0799182
commit 31db5cc
Show file tree

Hide file tree

Showing 55 changed files with 107 additions and 107 deletions.
diff --git a/...r-test__components_checkboxes_example-checkboxes-error_0_document_0_desktop.png b/...r-test__components_checkboxes_example-checkboxes-error_0_document_0_desktop.png
diff --git a/...vr-test__components_checkboxes_example-checkboxes-error_0_document_1_tablet.png b/...vr-test__components_checkboxes_example-checkboxes-error_0_document_1_tablet.png
diff --git a/...vr-test__components_checkboxes_example-checkboxes-error_0_document_2_mobile.png b/...vr-test__components_checkboxes_example-checkboxes-error_0_document_2_mobile.png
diff --git a/...s_example-checkboxes-with-revealed-checkboxes-expanded_0_document_0_desktop.png b/...s_example-checkboxes-with-revealed-checkboxes-expanded_0_document_0_desktop.png
diff --git a/...es_example-checkboxes-with-revealed-checkboxes-expanded_0_document_1_tablet.png b/...es_example-checkboxes-with-revealed-checkboxes-expanded_0_document_1_tablet.png
diff --git a/...es_example-checkboxes-with-revealed-checkboxes-expanded_0_document_2_mobile.png b/...es_example-checkboxes-with-revealed-checkboxes-expanded_0_document_2_mobile.png
diff --git a/...boxes_example-checkboxes-with-revealed-radios-expanded_0_document_0_desktop.png b/...boxes_example-checkboxes-with-revealed-radios-expanded_0_document_0_desktop.png
diff --git a/...kboxes_example-checkboxes-with-revealed-radios-expanded_0_document_1_tablet.png b/...kboxes_example-checkboxes-with-revealed-radios-expanded_0_document_1_tablet.png
diff --git a/...kboxes_example-checkboxes-with-revealed-radios-expanded_0_document_2_mobile.png b/...kboxes_example-checkboxes-with-revealed-radios-expanded_0_document_2_mobile.png
diff --git a/...boxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png b/...boxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png
diff --git a/...kboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png b/...kboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png
diff --git a/...kboxes_example-checkboxes-with-revealed-select-expanded_0_document_2_mobile.png b/...kboxes_example-checkboxes-with-revealed-select-expanded_0_document_2_mobile.png
diff --git a/...es_example-checkboxes-with-revealed-text-area-expanded_0_document_0_desktop.png b/...es_example-checkboxes-with-revealed-text-area-expanded_0_document_0_desktop.png
diff --git a/...xes_example-checkboxes-with-revealed-text-area-expanded_0_document_1_tablet.png b/...xes_example-checkboxes-with-revealed-text-area-expanded_0_document_1_tablet.png
diff --git a/...xes_example-checkboxes-with-revealed-text-area-expanded_0_document_2_mobile.png b/...xes_example-checkboxes-with-revealed-text-area-expanded_0_document_2_mobile.png
diff --git a/...s_example-checkboxes-with-revealed-text-input-expanded_0_document_0_desktop.png b/...s_example-checkboxes-with-revealed-text-input-expanded_0_document_0_desktop.png
diff --git a/...es_example-checkboxes-with-revealed-text-input-expanded_0_document_1_tablet.png b/...es_example-checkboxes-with-revealed-text-input-expanded_0_document_1_tablet.png
diff --git a/...es_example-checkboxes-with-revealed-text-input-expanded_0_document_2_mobile.png b/...es_example-checkboxes-with-revealed-text-input-expanded_0_document_2_mobile.png
diff --git a/..._checkboxes_example-checkboxes-with-visible-text-input_0_document_0_desktop.png b/..._checkboxes_example-checkboxes-with-visible-text-input_0_document_0_desktop.png
diff --git a/...s_checkboxes_example-checkboxes-with-visible-text-input_0_document_1_tablet.png b/...s_checkboxes_example-checkboxes-with-visible-text-input_0_document_1_tablet.png
diff --git a/...s_checkboxes_example-checkboxes-with-visible-text-input_0_document_2_mobile.png b/...s_checkboxes_example-checkboxes-with-visible-text-input_0_document_2_mobile.png
diff --git a/...nents_radios_example-radios-with-clear-button-expanded_0_document_0_desktop.png b/...nents_radios_example-radios-with-clear-button-expanded_0_document_0_desktop.png
diff --git a/...onents_radios_example-radios-with-clear-button-expanded_0_document_1_tablet.png b/...onents_radios_example-radios-with-clear-button-expanded_0_document_1_tablet.png
diff --git a/...onents_radios_example-radios-with-clear-button-expanded_0_document_2_mobile.png b/...onents_radios_example-radios-with-clear-button-expanded_0_document_2_mobile.png
diff --git a/...s-vr-test__components_radios_example-radios-with-error_0_document_0_desktop.png b/...s-vr-test__components_radios_example-radios-with-error_0_document_0_desktop.png
diff --git a/...ds-vr-test__components_radios_example-radios-with-error_0_document_1_tablet.png b/...ds-vr-test__components_radios_example-radios-with-error_0_document_1_tablet.png
diff --git a/...ds-vr-test__components_radios_example-radios-with-error_0_document_2_mobile.png b/...ds-vr-test__components_radios_example-radios-with-error_0_document_2_mobile.png
diff --git a/...adios_example-radios-with-revealed-checkboxes-expanded_0_document_0_desktop.png b/...adios_example-radios-with-revealed-checkboxes-expanded_0_document_0_desktop.png
diff --git a/...radios_example-radios-with-revealed-checkboxes-expanded_0_document_1_tablet.png b/...radios_example-radios-with-revealed-checkboxes-expanded_0_document_1_tablet.png
diff --git a/...radios_example-radios-with-revealed-checkboxes-expanded_0_document_2_mobile.png b/...radios_example-radios-with-revealed-checkboxes-expanded_0_document_2_mobile.png
diff --git a/...ts_radios_example-radios-with-revealed-radios-expanded_0_document_0_desktop.png b/...ts_radios_example-radios-with-revealed-radios-expanded_0_document_0_desktop.png
diff --git a/...nts_radios_example-radios-with-revealed-radios-expanded_0_document_1_tablet.png b/...nts_radios_example-radios-with-revealed-radios-expanded_0_document_1_tablet.png
diff --git a/...nts_radios_example-radios-with-revealed-radios-expanded_0_document_2_mobile.png b/...nts_radios_example-radios-with-revealed-radios-expanded_0_document_2_mobile.png
diff --git a/...ts_radios_example-radios-with-revealed-select-expanded_0_document_0_desktop.png b/...ts_radios_example-radios-with-revealed-select-expanded_0_document_0_desktop.png
diff --git a/...nts_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png b/...nts_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png
diff --git a/...nts_radios_example-radios-with-revealed-select-expanded_0_document_2_mobile.png b/...nts_radios_example-radios-with-revealed-select-expanded_0_document_2_mobile.png
diff --git a/...radios_example-radios-with-revealed-text-area-expanded_0_document_0_desktop.png b/...radios_example-radios-with-revealed-text-area-expanded_0_document_0_desktop.png
diff --git a/..._radios_example-radios-with-revealed-text-area-expanded_0_document_1_tablet.png b/..._radios_example-radios-with-revealed-text-area-expanded_0_document_1_tablet.png
diff --git a/..._radios_example-radios-with-revealed-text-area-expanded_0_document_2_mobile.png b/..._radios_example-radios-with-revealed-text-area-expanded_0_document_2_mobile.png
diff --git a/...adios_example-radios-with-revealed-text-input-expanded_0_document_0_desktop.png b/...adios_example-radios-with-revealed-text-input-expanded_0_document_0_desktop.png
diff --git a/...radios_example-radios-with-revealed-text-input-expanded_0_document_1_tablet.png b/...radios_example-radios-with-revealed-text-input-expanded_0_document_1_tablet.png
diff --git a/...radios_example-radios-with-revealed-text-input-expanded_0_document_2_mobile.png b/...radios_example-radios-with-revealed-text-input-expanded_0_document_2_mobile.png
diff --git a/...mponents_radios_example-radios-with-visible-text-input_0_document_0_desktop.png b/...mponents_radios_example-radios-with-visible-text-input_0_document_0_desktop.png
diff --git a/...omponents_radios_example-radios-with-visible-text-input_0_document_1_tablet.png b/...omponents_radios_example-radios-with-visible-text-input_0_document_1_tablet.png
diff --git a/...omponents_radios_example-radios-with-visible-text-input_0_document_2_mobile.png b/...omponents_radios_example-radios-with-visible-text-input_0_document_2_mobile.png
diff --git a/...t__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png b/...t__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png
diff --git a/...st__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png b/...st__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png
diff --git a/...st__patterns_correct-errors_example-errors-proto-errors_0_document_2_mobile.png b/...st__patterns_correct-errors_example-errors-proto-errors_0_document_2_mobile.png
diff --git a/...-vr-test__patterns_correct-errors_example-errors-proto_0_document_0_desktop.png b/...-vr-test__patterns_correct-errors_example-errors-proto_0_document_0_desktop.png
diff --git a/...s-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png b/...s-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png
diff --git a/...s-vr-test__patterns_correct-errors_example-errors-proto_0_document_2_mobile.png b/...s-vr-test__patterns_correct-errors_example-errors-proto_0_document_2_mobile.png
diff --git a/...r-test__patterns_feedback_example-feedback-form-errors_0_document_0_desktop.png b/...r-test__patterns_feedback_example-feedback-form-errors_0_document_0_desktop.png
diff --git a/...vr-test__patterns_feedback_example-feedback-form-errors_0_document_1_tablet.png b/...vr-test__patterns_feedback_example-feedback-form-errors_0_document_1_tablet.png
diff --git a/...vr-test__patterns_feedback_example-feedback-form-errors_0_document_2_mobile.png b/...vr-test__patterns_feedback_example-feedback-form-errors_0_document_2_mobile.png
diff --git a/src/components/checkboxes/_checkbox.scss b/src/components/checkboxes/_checkbox.scss
@@ -107,7 +107,7 @@ $checkbox-padding: 10px;
         }
 
         .ons-checkbox__other {
-            margin: 0.5rem 0 0.5rem 0.5rem;
+            margin: 0.5rem 0 0.5rem 0.625rem;
         }
     }
 
@@ -170,8 +170,8 @@ $checkbox-padding: 10px;
     &__other {
         border-left: 4px solid var(--ons-color-borders-indent);
         display: block;
-        margin: 0 1rem 0.5rem;
-        padding: 0 $checkbox-padding $checkbox-padding $checkbox-padding * 2 - 1;
+        margin: 0 1.1875rem 0.5rem;
+        padding: 0 $checkbox-padding $checkbox-padding $checkbox-padding * 2;
     }
 
     &__input:checked + &__label::before {