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 @@
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..beeb184336b 100644 --- a/src/components/select/select-theme.scss +++ b/src/components/select/select-theme.scss @@ -75,3 +75,19 @@ md-select-menu.md-THEME_NAME-theme { } } } + +md-select-menu.md-THEME_NAME-theme[multiple] { + md-option { + &:before { + color: '{{foreground-2}}'; + } + &[selected] { + &:before { + background-color: '{{primary-color-0.87}}'; + } + &:after { + border-color: '{{primary-contrast-0.87}}'; + } + } + } +} diff --git a/src/components/select/select.scss b/src/components/select/select.scss index 28fdc20104b..03329319ffc 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,45 @@ md-optgroup { border: 1px solid #fff; } } + +md-select-menu[multiple] { + md-option { + height: $select-option-height; + padding-bottom: 0; + padding-left: ($select-option-padding * 2) + ($select-option-padding / 2); + padding-right: $select-option-padding; + padding-top: 2px; + + &:before { + border: 2px solid; + border-radius: $select-checkbox-border-radius; + content: ''; + height: $select-checkbox-width; + left: $select-option-padding * (2 / 3); + position: absolute; + top: 50%; + transform: translateY(-50%); + width: $select-checkbox-width; + } + &[selected] { + &:before { + border-color: transparent; + } + &:after { + border-left-color: transparent; + border-top-color: transparent; + border-style: solid; + border-width: $select-checkbox-border-width; + box-sizing: border-box; + content: ''; + display: table; + height: $select-checkbox-width - 1; + left: $select-option-padding + 1; + position: absolute; + top: $select-option-padding + 1; + transform: rotate(45deg); + width: $select-checkbox-width * (3/7); + } + } + } +}