fix(checkbox): Alignment fix to center in all tables (#504)

carbon-design-system · Jan 16, 2018 · 460015f · 460015f
1 parent 5888289
commit 460015f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss
@@ -33,14 +33,14 @@
     cursor: pointer;
     position: relative;
     padding-left: rem(25px);
+    min-height: rem(16px);
   }
 
   .#{$prefix}--checkbox-label::before {
     box-sizing: border-box;
     content: '';
     position: absolute;
     left: 0;
-    top: -2px;
     height: rem(18px);
     width: rem(18px);
     border: $checkbox-border-width solid $ui-05;
@@ -56,8 +56,9 @@
     border-bottom: 2px solid $inverse-01;
     transform: scale(0) rotate(-45deg);
     position: absolute;
-    top: 2px;
-    left: 3px;
+    left: rem(3px);
+    top: 50%;
+    margin-top: rem(-5px);
   }
 
   .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::before,
@@ -91,7 +92,7 @@
     border-bottom: 2px solid $inverse-01;
     opacity: 1;
     width: rem(12px);
-    top: rem(1px);
+    margin-top: rem(-6px);
   }
 
   .#{$prefix}--checkbox-appearance {
@@ -103,7 +104,12 @@
     margin-right: 0.5rem;
     background-color: $ui-01;
     border: $checkbox-border-width solid $ui-05;
-    min-width: 18px;
+    min-width: rem(18px);
+  }
+
+  // Backwards compatibilty for old checkbox html using .#{$prefix}--checkbox-appearance
+  .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label .#{$prefix}--checkbox-appearance {
+    top: rem(-1px);
   }
 
   .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-appearance,

diff --git a/src/components/data-table-v2/_data-table-v2-core.scss b/src/components/data-table-v2/_data-table-v2-core.scss
@@ -70,8 +70,7 @@
 
   // Overrrides
   .#{$prefix}--checkbox-label {
-    margin-top: rem(-8px);
-    padding-left: rem(22px);
+    padding-left: rem(28px);
   }
 
   .#{$prefix}--overflow-menu {