PLANET-7660: Fix checkbox mark alignement

Ref: https://jira.greenpeace.org/browse/PLANET-7660 Refactor code
greenpeace · Nov 14, 2024 · b85ea4a · b85ea4a
1 parent 0686d3a
commit b85ea4a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/assets/src/scss/base/_variables.scss b/assets/src/scss/base/_variables.scss
@@ -6,6 +6,9 @@ $large-width:             992px;
 $extra-large-width:       1200px;
 $extra-extra-large-width: 1600px;
 
+// Override html selectors
+$checkbox-size: 20px;
+
 // Spacing
 @function space($base) {
   @return $base * 8px;

diff --git a/assets/src/scss/layout/_forms.scss b/assets/src/scss/layout/_forms.scss
@@ -34,8 +34,8 @@
 
       &:before {
         content: "";
-        width: 20px;
-        height: 20px;
+        width: $checkbox-size;
+        height: $checkbox-size;
         background: var(--white);
         border: 1px solid var(--grey-500);
         border-radius: 2px;
@@ -62,8 +62,8 @@
         transform: rotate(-45deg) scale(-1, 1);
         border-bottom: 2px solid var(--grey-900);
         border-right: 2px solid var(--grey-900);
-        top: calc(((100% - $sp-2x) / 2) + 5px);
-        left: $sp-x;
+        top: calc($checkbox-size / 2);
+        left: calc($checkbox-size / 2 - $sp-1x / 2);
         height: 8px;
         width: 12px;
 

diff --git a/assets/src/scss/pages/post/_comments-form.scss b/assets/src/scss/pages/post/_comments-form.scss
@@ -43,11 +43,14 @@
     font-family: var(--font-family-primary);
   }
   margin-bottom: 8px;
+  position: relative;
 
   #gdpr-comments-checkbox {
     display: inline-block;
     margin-inline-end: 8px;
-    width: inherit;
+    width: $checkbox-size !important;
+    height: $checkbox-size;
+    top: calc($sp-1 - 1px);
   }
 
   #gdpr-comments-label {