fix(checkbox): align vertically (#16331)

ionic-team · Nov 15, 2018 · bd3ca42 · bd3ca42
1 parent f58a7c0
commit bd3ca42
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss
@@ -14,7 +14,7 @@ $checkbox-ios-background-color-on:        ion-color(primary, base) !default;
 $checkbox-ios-background-color-focused:   ion-color(primary, tint) !default;
 
 /// @prop - Size of the checkbox icon
-$checkbox-ios-icon-size:                  24px !default;
+$checkbox-ios-icon-size:                  26px !default;
 
 /// @prop - Border color of the checkbox icon when off
 $checkbox-ios-icon-border-color-off:      $item-ios-border-color !default;

diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss
@@ -17,7 +17,7 @@ $checkbox-md-background-color-focused:   ion-color(primary, tint) !default;
 $checkbox-md-icon-background-color-on:   ion-color(primary, base) !default;
 
 /// @prop - Size of the checkbox icon
-$checkbox-md-icon-size:                  14px !default;
+$checkbox-md-icon-size:                  18px !default;
 
 /// @prop - Width of the checkbox icon checkmark
 $checkbox-md-icon-checkmark-width:       2px !default;

diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
@@ -42,6 +42,7 @@ input {
 .checkbox-icon {
   @include border-radius(var(--border-radius));
 
+  display: block;
   position: relative;
 
   width: var(--width);
@@ -56,6 +57,7 @@ input {
   background: var(--background);
 
   contain: strict;
+  box-sizing: border-box;
 }
 
 .checkbox-icon path {