diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 34591161558..3f1e97c00dd 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -1,39 +1,53 @@
-//$checkbox-width: 20px !default;
+//$checkbox-width: 18px !default;
//$checkbox-height: $checkbox-width !default;
//$checkbox-border-radius: 2px !default;
//$checkbox-border-width: 2px !default;
//
// ^^ defined in variables.scss
//
-$checkbox-margin: 16px !default;
-$checkbox-text-margin: 10px !default;
-$checkbox-top: 12px !default;
+$checkbox-margin-end: 16px !default;
+$checkbox-text-margin-top: 10px !default;
+$container-checkbox-margin: 3px !default;
+
+$checkbox-min-height: 48px !default;
+$checkbox-min-height-dense: 36px !default;
+$checkbox-text-margin: 36px !default;
+
+// from input.scss
+$input-container-margin-top: 18px !default;
+$input-container-padding-top: 2px !default;
+$input-padding-top: 2px !default;
+$input-padding-bottom: 1px !default;
+$input-border: 1px !default;
+
+$md-inline-alignment: $input-container-margin-top + $input-container-padding-top
+ + $input-padding-top + $input-padding-bottom + $input-border
+ - $checkbox-text-margin-top !default;
.md-inline-form {
md-checkbox {
- margin: 19px 0 18px;
+ margin-top: $md-inline-alignment;
+ margin-bottom: auto;
}
}
md-checkbox {
box-sizing: border-box;
display: inline-block;
- margin-bottom: $checkbox-margin;
white-space: nowrap;
cursor: pointer;
outline: none;
user-select: none;
position: relative;
min-width: $checkbox-width;
- min-height: $checkbox-width;
- @include rtl(margin-left, 0, $checkbox-margin);
- @include rtl(margin-right, $checkbox-margin, 0);
+ @include dense(min-height, $checkbox-min-height, $checkbox-min-height-dense);
+ @include rtl(margin-left, 0, $checkbox-margin-end);
+ @include rtl(margin-right, $checkbox-margin-end, 0);
&:last-of-type {
margin-left: 0;
margin-right: 0;
}
-
&.md-focused:not([disabled]) {
.md-container:before {
left: -8px;
@@ -49,12 +63,17 @@ md-checkbox {
}
}
- &.md-align-top-left > div.md-container {
- top: $checkbox-top;
- }
-
@include checkbox-container;
+ .md-container {
+ // Use auto for compatibility with md-checkbox padding
+ top: auto;
+ left: auto;
+ right: auto;
+ margin: $container-checkbox-margin;
+ margin-top: $checkbox-height + $container-checkbox-margin;
+ }
+
.md-label {
box-sizing: border-box;
position: relative;
@@ -62,9 +81,16 @@ md-checkbox {
vertical-align: middle;
white-space: normal;
user-select: text;
+ margin-top: $checkbox-text-margin-top;
+ margin-bottom: auto;
- @include rtl(margin-left, $checkbox-text-margin + $checkbox-width, 0);
- @include rtl(margin-right, 0, $checkbox-text-margin + $checkbox-width);
+ @include rtl-prop(margin-left, margin-right, $checkbox-text-margin, 0);
+
+ &:empty {
+ // clamp to checkbox-container margins
+ @include rtl(margin-left, $checkbox-height + ($container-checkbox-margin * 2), 0);
+ @include rtl(margin-right, 0, $checkbox-height + ($container-checkbox-margin * 2));
+ }
}
-}
+}
\ No newline at end of file
diff --git a/src/components/checkbox/demoBasicUsage/index.html b/src/components/checkbox/demoBasicUsage/index.html
index b9af630b02e..bcaa529ec88 100644
--- a/src/components/checkbox/demoBasicUsage/index.html
+++ b/src/components/checkbox/demoBasicUsage/index.html
@@ -57,6 +57,64 @@
-
+
+
+