From e37301bc12807f75a1edb3c8ae92db3dbed7bb0d Mon Sep 17 00:00:00 2001 From: Derek Louie Date: Tue, 8 Mar 2016 14:28:51 -0800 Subject: [PATCH] Adding checkboxes to angular material stuff --- src/components/checkbox/checkbox-theme.scss | 63 ++++---- src/components/checkbox/checkbox.scss | 141 ++++++++++-------- .../select/demoOptionGroups/index.html | 4 +- src/components/select/select-theme.scss | 9 ++ src/components/select/select.js | 5 + src/components/select/select.scss | 17 +++ 6 files changed, 142 insertions(+), 97 deletions(-) diff --git a/src/components/checkbox/checkbox-theme.scss b/src/components/checkbox/checkbox-theme.scss index 96728c870b8..62219cb5710 100644 --- a/src/components/checkbox/checkbox-theme.scss +++ b/src/components/checkbox/checkbox-theme.scss @@ -1,3 +1,36 @@ +@mixin checkbox-primary($checkedSelector: '.md-checked') { + .md-ripple { + color: '{{primary-600}}'; + } + &#{$checkedSelector} .md-ripple { + color: '{{background-600}}'; + } + + .md-ink-ripple { + color: '{{foreground-2}}'; + } + + &#{$checkedSelector} .md-ink-ripple { + color: '{{primary-color-0.87}}'; + } + + ._md-icon { + border-color: '{{foreground-2}}'; + } + + &#{$checkedSelector} ._md-icon { + background-color: '{{primary-color-0.87}}'; + } + + &#{$checkedSelector}.md-focused ._md-container:before { + background-color: '{{primary-color-0.26}}'; + } + + &#{$checkedSelector} ._md-icon:after { + border-color: '{{primary-contrast-0.87}}'; + } +} + md-checkbox.md-THEME_NAME-theme { .md-ripple { @@ -31,35 +64,7 @@ md-checkbox.md-THEME_NAME-theme { &:not([disabled]) { &.md-primary { - .md-ripple { - color: '{{primary-600}}'; - } - &.md-checked .md-ripple { - color: '{{background-600}}'; - } - - .md-ink-ripple { - color: '{{foreground-2}}'; - } - - &.md-checked .md-ink-ripple { - color: '{{primary-color-0.87}}'; - } - - ._md-icon { - border-color: '{{foreground-2}}'; - } - &.md-checked ._md-icon { - background-color: '{{primary-color-0.87}}'; - } - - &.md-checked.md-focused ._md-container:before { - background-color: '{{primary-color-0.26}}'; - } - - &.md-checked ._md-icon:after { - border-color: '{{primary-contrast-0.87}}'; - } + @include checkbox-primary; } &.md-warn { diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss index 5f70d8f46c9..ffa8bab839a 100644 --- a/src/components/checkbox/checkbox.scss +++ b/src/components/checkbox/checkbox.scss @@ -6,46 +6,12 @@ $checkbox-border-width: 2px !default; $checkbox-text-margin: 10px !default; $checkbox-top: 12px !default; -.md-inline-form { - md-checkbox { - margin: 19px 0 18px; - } -} - -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); - - &:last-of-type { - margin-left: 0; - margin-right: 0; - } - - &.md-focused:not([disabled]) { - ._md-container:before { - left: -8px; - top: -8px; - right: -8px; - bottom: -8px; - } - - &:not(.md-checked) { - ._md-container:before { - background-color: rgba(0, 0, 0, 0.12); - } - } - } - +@mixin checkbox-container( + $checkedSelector: '.md-checked', + $width: $checkbox-width, + $height: $checkbox-height, + $border-width: $checkbox-border-width, + $border-radius: $checkbox-border-radius) { ._md-container { position: absolute; top: 50%; @@ -54,15 +20,15 @@ md-checkbox { box-sizing: border-box; display: inline-block; - width: $checkbox-width; - height: $checkbox-height; + width: $width; + height: $height; @include rtl(left, 0, auto); @include rtl(right, auto, 0); // Disable pointer events, because IE11 is always focusing the child elements instead of the // md-checkbox element. pointer-events: none; - + &:before { box-sizing: border-box; background-color: transparent; @@ -101,10 +67,6 @@ md-checkbox { } } - &.md-align-top-left > div._md-container { - top: $checkbox-top; - } - // unchecked ._md-icon { box-sizing: border-box; @@ -112,15 +74,31 @@ md-checkbox { position: absolute; top: 0; left: 0; - width: $checkbox-width; - height: $checkbox-height; - border-width: $checkbox-border-width; + width: $width; + height: $height; + border-width: $border-width; border-style: solid; - border-radius: $checkbox-border-radius; + border-radius: $border-radius; } - &.md-checked ._md-icon { + &#{$checkedSelector} ._md-icon { border: none; + + &:after { + box-sizing: border-box; + transform: rotate(45deg); + position: absolute; + left: $width / 3; + top: $width / 9; + display: table; + width: $width / 3; + height: $width * 2 / 3; + border-width: $border-width; + border-style: solid; + border-top: 0; + border-left: 0; + content: ''; + } } // disabled @@ -128,22 +106,53 @@ md-checkbox { cursor: default; } +} - &.md-checked ._md-icon:after { - box-sizing: border-box; - transform: rotate(45deg); - position: absolute; - left: $checkbox-width / 3; - top: $checkbox-width / 9; - display: table; - width: $checkbox-width / 3; - height: $checkbox-width * 2 / 3; - border-width: $checkbox-border-width; - border-style: solid; - border-top: 0; - border-left: 0; - content: ''; +.md-inline-form { + md-checkbox { + margin: 19px 0 18px; } +} + +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); + + &:last-of-type { + margin-left: 0; + margin-right: 0; + } + + &.md-focused:not([disabled]) { + ._md-container:before { + left: -8px; + top: -8px; + right: -8px; + bottom: -8px; + } + + &:not(.md-checked) { + ._md-container:before { + background-color: rgba(0, 0, 0, 0.12); + } + } + } + + &.md-align-top-left > div._md-container { + top: $checkbox-top; + } + + @include checkbox-container; ._md-label { box-sizing: border-box; diff --git a/src/components/select/demoOptionGroups/index.html b/src/components/select/demoOptionGroups/index.html index daa5570f4eb..56c6ad96106 100644 --- a/src/components/select/demoOptionGroups/index.html +++ b/src/components/select/demoOptionGroups/index.html @@ -10,7 +10,7 @@

Pick your pizza below

- + {{topping.name}} @@ -20,6 +20,6 @@

Pick your pizza below

 -

You ordered a {{size.toLowerCase()}} pizza with {{topping.toLowerCase()}}.

+

You ordered a {{size.toLowerCase()}} pizza with {{selectedToppings.join(', ')}}.

diff --git a/src/components/select/select-theme.scss b/src/components/select/select-theme.scss index ee704ff5e55..bc9c49e7603 100644 --- a/src/components/select/select-theme.scss +++ b/src/components/select/select-theme.scss @@ -75,3 +75,12 @@ md-select-menu.md-THEME_NAME-theme { } } } + + +[md-checkbox-enabled].md-THEME_NAME-theme { + @include checkbox-primary('[selected]'); + + md-option ._md-text { + color: '{{background-900-0.87}}'; + } +} diff --git a/src/components/select/select.js b/src/components/select/select.js index 43becb021d6..473bfff9a17 100755 --- a/src/components/select/select.js +++ b/src/components/select/select.js @@ -776,6 +776,11 @@ function OptionDirective($mdButtonInkRipple, $mdUtil) { var optionCtrl = ctrls[0]; var selectCtrl = ctrls[1]; + if (selectCtrl.isMultiple) { + element.attr('md-checkbox-enabled', 'true'); + element.prepend('
'); + } + if (angular.isDefined(attr.ngValue)) { scope.$watch(attr.ngValue, setOptionValue); } else if (angular.isDefined(attr.value)) { diff --git a/src/components/select/select.scss b/src/components/select/select.scss index 28fdc20104b..0f9c6e1930e 100755 --- a/src/components/select/select.scss +++ b/src/components/select/select.scss @@ -1,3 +1,6 @@ +$select-checkbox-border-radius: 2px !default; +$select-checkbox-border-width: 2px !default; +$select-checkbox-width: rem(1.4) !default; $select-option-height: 48px; $select-option-padding: 16px; $select-container-padding: 16px; @@ -228,3 +231,17 @@ md-optgroup { border: 1px solid #fff; } } + +md-select-menu[multiple] { + md-option[md-checkbox-enabled] { + @include rtl(padding-left, $select-option-padding * 2.5, $select-option-padding); + @include rtl(padding-right, $select-option-padding, $select-option-padding * 2.5); + + @include checkbox-container('[selected]'); + + ._md-container { + @include rtl(margin-left, $select-option-padding * (2 / 3), auto); + @include rtl(margin-right, auto, $select-option-padding * (2 / 3)); + } + } +}