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 @@ - + +
+
+
+ Default Spacing +
+ + Checkbox 1: {{ data.cb1 }} + +
+ + Checkbox 2 (md-warn)
+ + Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit. + Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna, + sit amet dapibus tortor ligula non nibh. + +
+ {{ data.cb2 }} +
+
+ + Checkbox: Disabled + +
+
+
+ Dense Spacing with "md-dense" +
+ + Checkbox 1: {{ data.cb1 }} + +
+ + Checkbox 2 (md-warn)
+ + Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit. + Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna, + sit amet dapibus tortor ligula non nibh. + +
+ {{ data.cb2 }} +
+
+ + Checkbox: Disabled + +
+
diff --git a/src/core/style/mixins.scss b/src/core/style/mixins.scss index b8deefc5302..cafcb4478f9 100644 --- a/src/core/style/mixins.scss +++ b/src/core/style/mixins.scss @@ -321,3 +321,19 @@ } } } + +@mixin dense($prop, $normal, $dense) { + #{$prop}: $normal; + .md-dense > &:not(.md-dense-disabled), + .md-dense :not(.md-dense-disabled) &:not(.md-dense-disabled) { + #{$prop}: $dense; + } +} + +@mixin dense-rtl($prop, $ltr-normal, $rtl-normal, $ltr-dense, $rtl-dense) { + @include rtl($prop, $ltr-normal, $rtl-normal); + .md-dense > &:not(.md-dense-disabled), + .md-dense :not(.md-dense-disabled) &:not(.md-dense-disabled) { + @include rtl($prop, $ltr-dense, $rtl-dense); + } +} diff --git a/src/core/style/variables.scss b/src/core/style/variables.scss index 055ae6c245b..cf8a32573c1 100644 --- a/src/core/style/variables.scss +++ b/src/core/style/variables.scss @@ -127,7 +127,7 @@ $button-fab-padding: rem(1.60) !default; // Shared Checkbox variables -$checkbox-width: 20px !default; +$checkbox-width: 18px !default; $checkbox-height: $checkbox-width !default; $checkbox-border-radius: 2px !default; $checkbox-border-width: 2px !default;