fix(radio-checkbox): fix alignment of input with text (#58)

fix #51
wework · Mar 18, 2019 · 414e672 · 414e672
1 parent 21cfe1b
commit 414e672
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/packages/core/src/components/radio-checkbox/_radio-checkbox.scss b/packages/core/src/components/radio-checkbox/_radio-checkbox.scss
@@ -1,6 +1,6 @@
 @include exports('ray-radio-checkbox') {
   $ray-radio-checkbox-border-width: 3px;
-  $ray-radio-checkbox-width: 1rem;
+  $ray-radio-checkbox-size: 16px;
 
   .#{$ray-class-prefix}radio,
   .#{$ray-class-prefix}checkbox {
@@ -18,13 +18,14 @@
         content: '';
         background-color: $ray-color-white;
         border: $ray-radio-checkbox-border-width double $ray-color-black;
-        width: $ray-radio-checkbox-width;
-        height: $ray-radio-checkbox-width;
+        width: $ray-radio-checkbox-size;
+        height: $ray-radio-checkbox-size;
         position: relative;
         transition: box-shadow 0.15s ease;
         display: inline-block;
         margin-right: 1rem;
-        top: 4px;
+        // centers the input with the first line of text in the label
+        top: ($ray-field-line-height - $ray-radio-checkbox-size) / 2;
       }
 
       &:focus {