+
{{ phone.number }}
{{ phone.type }}
diff --git a/src/components/list/list-base.scss b/src/components/list/list-base.scss
new file mode 100644
index 00000000000..491221809dc
--- /dev/null
+++ b/src/components/list/list-base.scss
@@ -0,0 +1,286 @@
+/** External component calculations */
+$md-checkbox-width: 3 * $baseline-grid !default;
+//TODO(devversion): use shared variable from buttons.scss
+$md-button-spacing: $button-left-right-padding + rem(0.800) !default;
+
+/** Static List Item Variables */
+$md-list-item-indention: $baseline-grid * 7 !default;
+$md-list-item-padding: $baseline-grid * 2 !default;
+$md-list-item-h3-margin: 0 0 0px 0 !default;
+$md-list-item-h4-margin: 3px 0 1px 0 !default;
+$md-list-item-h4-font-weight: 400 !default;
+$md-list-item-p-margin: 0 0 0 0 !default;
+$md-list-item-subheader-height: 6 * $baseline-grid !default;
+
+/** Resets the checkbox component */
+@mixin md-reset-checkbox() {
+ md-checkbox {
+ align-self: center;
+ margin: 0;
+
+ .md-label {
+ display: none;
+ }
+ }
+}
+
+/** Resets the switch component to properly align */
+@mixin md-reset-switch() {
+ md-switch {
+ margin-top: 0;
+ margin-bottom: 0;
+
+ @include rtl-prop(margin-right, margin-left, -6px);
+ }
+}
+
+/** Reset browsers default paragraph styles */
+@mixin md-reset-paragraph() {
+ p {
+ margin: 0;
+ flex: 1;
+ }
+}
+
+/** Reset default md-button behavior like uppercase and text alignment */
+@mixin md-reset-button() {
+ &.md-button {
+ font-size: inherit;
+ text-transform: none;
+
+ @include rtl(text-align, left, right);
+
+ &, > .md-ripple-container {
+ border-radius: 0;
+ margin: 0;
+ padding: 0;
+ }
+ }
+}
+
+/** Mixin to overwrite the size of an md-icon element */
+@mixin md-icon-size($icon-size) {
+ min-width: $icon-size;
+ min-height: $icon-size;
+ height: $icon-size;
+ width: $icon-size;
+
+ svg {
+ width: $icon-size;
+ height: $icon-size;
+ }
+}
+
+/** Creates an overlaying button, which will be used to execute the primary action */
+@mixin md-button-wrap() {
+ &.md-button-wrap {
+ position: relative;
+
+ .md-button-wrap-executor {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ height: 100%;
+ width: 100%;
+
+ @include md-reset-button();
+ }
+ }
+}
+
+/**
+ * Mixin to style user specified content inside of the list item.
+ */
+@mixin md-list-item-content($_list-icon-width, $_list-avatar-width, $_list-avatar-padding-dense) {
+
+ .md-avatar, .md-avatar-icon, > md-icon:first-child {
+ box-sizing: content-box;
+ margin-top: $baseline-grid;
+ margin-bottom: $baseline-grid;
+ border-radius: 50%;
+ @include rtl-prop(margin-left, margin-right, 0);
+ }
+
+ .md-avatar {
+ width: $_list-avatar-width;
+ height: $_list-avatar-width;
+ @include rtl-prop(margin-right, margin-left, $md-list-item-indention - $_list-avatar-width);
+ }
+
+ .md-avatar-icon {
+ $avatar-icon-width: $_list-icon-width + ($_list-avatar-padding-dense * 2);
+ padding: $_list-avatar-padding-dense;
+
+ @include md-icon-size($_list-icon-width);
+ @include rtl-prop(margin-right, margin-left, $md-list-item-indention - $avatar-icon-width);
+ }
+
+ > md-icon:first-child:not(.md-avatar-icon) {
+ @include md-icon-size($_list-icon-width);
+ @include rtl-prop(margin-right, margin-left, $md-list-item-indention - $_list-icon-width);
+ }
+
+ md-checkbox {
+ width: $md-checkbox-width;
+ }
+
+ > md-checkbox:first-child {
+ @include rtl-prop(margin-right, margin-left, $md-list-item-indention - $md-checkbox-width);
+ }
+
+ .md-button:last-of-type {
+ @include rtl-prop(margin-right, margin-left, 0px);
+ }
+}
+
+/**
+ * Mixin to enable multi-line support in the current list item.
+ */
+@mixin md-list-item-multi-line($_list-height-2, $_list-height-3, $_list-title-font-size,
+ $_list-title-line-height, $_list-subtitle-font-size,
+ $_list-subtitle-line-height) {
+
+ &.md-2-line {
+ min-height: $_list-height-2;
+ @include ie11-min-height-flexbug($_list-height-2);
+ }
+
+ &.md-3-line {
+ min-height: $_list-height-3;
+ @include ie11-min-height-flexbug($_list-height-3);
+
+ &.md-list-item-content, .md-list-item-content {
+ > md-icon:first-child, > .md-avatar, > .md-avatar-icon {
+ margin-top: $baseline-grid * 2;
+ margin-bottom: auto;
+ }
+ }
+ }
+
+ &.md-3-line, &.md-2-line {
+ text-overflow: ellipsis;
+ overflow: hidden;
+
+ &.md-offset {
+ @include rtl-prop(margin-left, margin-right, $md-list-item-indention);
+ }
+
+ &.md-long-text {
+ margin-top: $baseline-grid;
+ margin-bottom: $baseline-grid;
+ }
+
+ &.md-list-item-content, .md-list-item-content {
+
+ h3 {
+ font-size: $_list-title-font-size;
+ font-weight: 400;
+ letter-spacing: 0.010em;
+ margin: $md-list-item-h3-margin;
+ line-height: $_list-title-line-height;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ h4 {
+ font-size: $_list-subtitle-font-size;
+ letter-spacing: 0.010em;
+ margin: $md-list-item-h4-margin;
+ font-weight: $md-list-item-h4-font-weight;
+ line-height: $_list-title-line-height;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ p {
+ font-size: $_list-subtitle-font-size;
+ font-weight: 500;
+ letter-spacing: 0.010em;
+ margin: $md-list-item-p-margin;
+ line-height: $_list-subtitle-line-height;
+ }
+
+ }
+ }
+}
+
+
+/**
+ * Creates the basic md-list with the specific dynamic variables.
+ */
+@mixin md-list($_list-font-size, $_list-padding-vertical) {
+ display: block;
+ padding: $_list-padding-vertical 0;
+ font-size: $_list-font-size;
+
+ .md-subheader {
+ font-size: $body-font-size-base;
+ font-weight: 500;
+ letter-spacing: 0.010em;
+ height: $md-list-item-subheader-height;
+ }
+}
+
+/**
+ * Creates the md-list-item styles with the specific dynamic variables.
+ */
+@mixin md-list-item($_list-height-base, $_list-height-2, $_list-height-3, $_list-avatar-width,
+ $_list-icon-width, $_list-title-font-size, $_list-title-line-height,
+ $_list-subtitle-font-size, $_list-subtitle-line-height,
+ $_list-avatar-padding-dense) {
+
+ position: relative;
+ display: flex;
+ flex: 1;
+
+ min-height: $_list-height-base;
+ @include ie11-min-height-flexbug($_list-height-base);
+
+ &.md-clickable {
+ cursor: pointer;
+ }
+
+ .md-secondary-container {
+ display: flex;
+ align-items: center;
+
+ /** Move Container to the End */
+ margin: auto;
+ @include rtl(margin-right, 0, auto);
+ @include rtl(margin-left, auto, 0);
+
+ // md-checkbox should have same spacing as other secondary buttons.
+ md-checkbox:not(:last-child) {
+ @include rtl-prop(margin-right, margin-left, $md-button-spacing);
+ }
+ }
+
+ @include md-button-wrap();
+ @include md-reset-checkbox();
+ @include md-reset-switch();
+ @include md-reset-paragraph();
+ @include md-list-item-multi-line(
+ $_list-height-2, $_list-height-3, $_list-title-font-size, $_list-title-line-height,
+ $_list-subtitle-font-size, $_list-subtitle-line-height
+ );
+
+ &.md-list-item-content, .md-list-item-content {
+ /** Vertical Alignment */
+ display: flex;
+ flex: 1;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+
+ padding: 0 $md-list-item-padding;
+
+ /** Custom styling for child content */
+ @include md-list-item-content(
+ $_list-icon-width, $_list-avatar-width, $_list-avatar-padding-dense
+ );
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/list/list.js b/src/components/list/list.js
index 2310907fbd5..96fa645a4b9 100644
--- a/src/components/list/list.js
+++ b/src/components/list/list.js
@@ -244,6 +244,7 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
wrapIn('div');
} else if (!tEl[0].querySelector('md-button:not(.md-secondary):not(.md-exclude)')) {
tEl.addClass('md-no-proxy');
+ tEl.addClass('md-list-item-content');
}
}
@@ -300,20 +301,16 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
function wrapIn(type) {
if (type == 'div') {
- itemContainer = angular.element('
');
+ itemContainer = angular.element('
');
itemContainer.append(tEl.contents());
tEl.addClass('md-proxy-focus');
} else {
// Element which holds the default list-item content.
- itemContainer = angular.element(
- '
'
- );
+ itemContainer = angular.element('
');
// Button which shows ripple and executes primary action.
var buttonWrap = angular.element(
- '
'
+ '
'
);
buttonWrap[0].setAttribute('aria-label', tEl[0].textContent);
@@ -327,11 +324,10 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
buttonWrap.addClass('md-no-focus');
}
- // Append the button wrap before our list-item content, because it will overlay in relative.
- itemContainer.prepend(buttonWrap);
- itemContainer.children().eq(1).append(tEl.contents());
+ itemContainer.append(tEl.contents());
- tEl.addClass('_md-button-wrap');
+ tEl.addClass('md-button-wrap');
+ tEl.prepend(buttonWrap)
}
tEl[0].setAttribute('tabindex', '-1');
@@ -349,9 +345,11 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
}
function wrapSecondaryItem(secondaryItem, container) {
- // If the current secondary item is not a button, but contains a ng-click attribute,
- // the secondary item will be automatically wrapped inside of a button.
- if (secondaryItem && !isButton(secondaryItem) && secondaryItem.hasAttribute('ng-click')) {
+ // If the current secondary item is not a button or proxied element,
+ // but contains a ng-click attribute, the secondary item will be automatically
+ // wrapped inside of a button.
+ if (secondaryItem && !isButton(secondaryItem) && !isProxiedElement(secondaryItem)
+ && secondaryItem.hasAttribute('ng-click')) {
$mdAria.expect(secondaryItem, 'aria-label');
var buttonWrapper = angular.element('');
@@ -367,7 +365,8 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
secondaryItem = buttonWrapper[0];
}
- if (secondaryItem && (!hasClickEvent(secondaryItem) || (!tAttrs.ngClick && isProxiedElement(secondaryItem)))) {
+ if (secondaryItem && !tAttrs.ngClick && !hasClickEvent(secondaryItem)
+ && isProxiedElement(secondaryItem)) {
// In this case we remove the secondary class, so we can identify it later, when we searching for the
// proxy items.
angular.element(secondaryItem).removeClass('md-secondary');
@@ -428,7 +427,7 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
var proxies = [],
firstElement = $element[0].firstElementChild,
- isButtonWrap = $element.hasClass('_md-button-wrap'),
+ isButtonWrap = $element.hasClass('md-button-wrap'),
clickChild = isButtonWrap ? firstElement.firstElementChild : firstElement,
hasClick = clickChild && hasClickEvent(clickChild);
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index 4991a10c529..81cd25cfc23 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -1,420 +1,90 @@
-$dense-baseline-grid: $baseline-grid / 2 !default;
-
-$list-h3-margin: 0 0 0px 0 !default;
-$list-h4-margin: 3px 0 1px 0 !default;
-$list-h4-font-weight: 400 !default;
-$list-header-line-height: 1.2em !default;
-$list-p-margin: 0 0 0 0 !default;
-$list-p-line-height: 1.6em !default;
-
-$list-padding-top: $baseline-grid !default;
-$list-padding-right: 0px !default;
-$list-padding-left: 0px !default;
-$list-padding-bottom: $baseline-grid !default;
-
-$item-padding-top: 0px !default;
-$item-padding-right: 0px !default;
-$item-padding-left: 0px !default;
-$item-padding-bottom: 0px !default;
-$list-item-padding-vertical: 0px !default;
-$list-item-padding-horizontal: $baseline-grid * 2 !default;
-$list-item-primary-width: $baseline-grid * 7 !default;
-$list-item-primary-avatar-width: $baseline-grid * 5 !default;
-$list-item-primary-icon-width: $baseline-grid * 3 !default;
-$list-item-secondary-left-margin: $baseline-grid * 2 !default;
-$list-item-secondary-button-width: $baseline-grid * 6 !default;
-$list-item-inset-divider-offset: 9 * $baseline-grid !default;
-$list-item-height: 6 * $baseline-grid !default;
-$list-item-two-line-height: 9 * $baseline-grid !default;
-$list-item-three-line-height: 11 * $baseline-grid !default;
-
-$list-item-dense-height: 12 * $dense-baseline-grid !default;
-$list-item-dense-two-line-height: 15 * $dense-baseline-grid !default;
-$list-item-dense-three-line-height: 19 * $dense-baseline-grid !default;
-$list-item-dense-primary-icon-width: $dense-baseline-grid * 5 !default;
-$list-item-dense-primary-avatar-width: $dense-baseline-grid * 9 !default;
-$list-item-dense-header-font-size: round($subhead-font-size-base * 0.8) !default;
-$list-item-dense-font-size: round($body-font-size-base * 0.85) !default;
-$list-item-dense-line-height: 1.05 !default;
+/**
+ * Dynamic variables which can change due higher pixel density.
+ */
+$md-list-item-height-1: 6 * $baseline-grid !default;
+$md-list-item-height-2: 9 * $baseline-grid !default;
+$md-list-item-height-3: 11 * $baseline-grid !default;
+$md-list-item-font-size: rem(1.6);
+$md-list-item-avatar-width: $baseline-grid * 5 !default;
+$md-list-item-icon-width: $baseline-grid * 3 !default;
+$md-list-item-title-font-size: $subhead-font-size-base !default;
+$md-list-item-subtitle-font-size: $body-font-size-base !default;
+$md-list-item-title-line-height: 1.2em !default;
+$md-list-item-subtitle-line-height: 1.6em;
+$md-list-padding-vertical: $baseline-grid !default;
+$md-list-item-avatar-padding: $baseline-grid !default;
+
+/**
+ * High Pixel Density mode for the list component.
+ */
+$md-list-item-dense-dpi: 192;
+
+//TODO(devversion): make function generic and use for other components
+@function dense($pixels) {
+ $densePixels: ($pixels * 160) / $md-list-item-dense-dpi;
+ @return round(($densePixels * 10) / 10);
+}
+/** Dynamic variables in high density pixels */
+$md-list-item-height-1-dense: dense($md-list-item-height-1);
+$md-list-item-height-2-dense: dense($md-list-item-height-2);
+$md-list-item-height-3-dense: 9.5 * $baseline-grid;
+$md-list-item-font-size-dense: dense($md-list-item-font-size);
+$md-list-item-avatar-width-dense: 4.5 * $baseline-grid;
+$md-list-item-icon-width-dense: dense($md-list-item-icon-width);
+$md-list-item-title-font-size-dense: dense($subhead-font-size-base);
+$md-list-item-subtitle-font-size-dense: dense($body-font-size-base);
+$md-list-item-title-line-height-dense: 1.05em;
+$md-list-item-subtitle-line-height-dense: $md-list-item-title-line-height-dense;
+$md-list-padding-vertical-dense: $baseline-grid / 2;
+$md-list-item-avatar-padding-dense: $baseline-grid;
+
+/**
+ * Basic List Component
+ */
md-list {
- display: block;
- padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
-
- .md-subheader {
- font-size: $body-font-size-base;
- font-weight: 500;
- letter-spacing: 0.010em;
- line-height: $list-header-line-height;
- }
-
- &.md-dense {
- md-list-item {
- &,
- .md-list-item-inner {
- min-height: $list-item-dense-height;
- @include ie11-min-height-flexbug($list-item-dense-height);
-
-
- // Layout for controls in primary or secondary divs, or auto-infered first child
-
- md-icon:first-child {
- width: $list-item-dense-primary-icon-width;
- height: $list-item-dense-primary-icon-width;
- }
-
- > md-icon:first-child:not(.md-avatar-icon) {
- @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-icon-width);
- }
- .md-avatar, .md-avatar-icon {
- @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-avatar-width);
- }
- .md-avatar {
- flex: none;
- width: $list-item-dense-primary-avatar-width;
- height: $list-item-dense-primary-avatar-width;
- }
- }
-
- &.md-2-line,
- &.md-3-line {
- &, & > .md-no-style {
- .md-list-item-text {
- &.md-offset {
- @include rtl-prop(margin-left, margin-right, $list-item-primary-width);
- }
-
- h3,
- h4,
- p {
- line-height: $list-item-dense-line-height;
- font-size: $list-item-dense-font-size;
- }
-
- h3 {
- font-size: $list-item-dense-header-font-size;
- }
- }
- }
- }
-
- &.md-2-line {
- &, & > .md-no-style {
- min-height: $list-item-dense-two-line-height;
- @include ie11-min-height-flexbug($list-item-dense-two-line-height);
-
- > .md-avatar, .md-avatar-icon {
- margin-top: $baseline-grid * 1.5;
- }
- }
- }
-
- &.md-3-line {
- &, & > .md-no-style {
-
- min-height: $list-item-dense-three-line-height;
- @include ie11-min-height-flexbug($list-item-dense-three-line-height);
-
- > md-icon:first-child,
- > .md-avatar {
- margin-top: $baseline-grid * 2;
- }
- }
- }
- }
- }
+ @include md-list(
+ $md-list-item-font-size,
+ $md-list-padding-vertical
+ );
}
md-list-item {
- // Ensure nested dividers are properly positioned
- position: relative;
-
- &.md-proxy-focus.md-focused .md-no-style {
- transition: background-color 0.15s linear;
- }
-
- &._md-button-wrap {
- position: relative;
-
- > div.md-button:first-child {
- // Layout - Vertically align the item content.
- display: flex;
- align-items: center;
- justify-content: flex-start;
-
- padding: 0 16px;
- margin: 0;
-
- // The button should not inherit the parents background color.
- background-color: initial;
-
- font-weight: 400;
- @include rtl(text-align, left, right);
- border: medium none;
-
- // The button executor should fill the whole list item.
- > .md-button:first-child {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
-
- margin: 0;
- padding: 0;
- }
-
- .md-list-item-inner {
- // The list item content should fill the complete width.
- width: 100%;
- min-height: inherit;
- }
-
- }
-
- }
-
- &.md-no-proxy,
- .md-no-style {
- position: relative;
- padding: $list-item-padding-vertical $list-item-padding-horizontal;
-
- // Layout [flex='auto']
- flex: 1 1 auto;
-
- &.md-button {
- font-size: inherit;
- height: inherit;
- @include rtl(text-align, left, right);
- text-transform: none;
- width: 100%;
- white-space: normal;
- flex-direction: inherit;
- align-items: inherit;
- border-radius: 0;
- margin: 0;
-
- & > .md-ripple-container {
- border-radius: 0;
- }
- }
- &:focus {
- outline: none
- }
- }
- &.md-clickable:hover {
- cursor: pointer;
- }
-
- md-divider {
- position: absolute;
- bottom: 0;
- @include rtl-prop(left, right, 0);
- width: 100%;
- &[md-inset] {
- @include rtl-prop(left, right, $list-item-inset-divider-offset);
- width: calc(100% - #{$list-item-inset-divider-offset});
- margin: 0 !important;
- }
- }
-
- &,
- .md-list-item-inner {
-
- // Layout [flex layout-align='start center']
- display: flex;
- justify-content: flex-start;
- align-items: center;
-
- min-height: $list-item-height;
- @include ie11-min-height-flexbug($list-item-height);
-
- height: auto;
-
- // Layout for controls in primary or secondary divs, or auto-infered first child
- & > div.md-primary > md-icon:not(.md-avatar-icon),
- & > div.md-secondary > md-icon:not(.md-avatar-icon),
- & > md-icon:first-child:not(.md-avatar-icon),
- > md-icon.md-secondary:not(.md-avatar-icon) {
- width: $list-item-primary-icon-width;
- margin-top: 16px;
- margin-bottom: 12px;
- box-sizing: content-box;
- }
- & > div.md-primary > md-checkbox,
- & > div.md-secondary > md-checkbox,
- & > md-checkbox,
- md-checkbox.md-secondary {
- align-self: center;
- .md-label {
- display: none;
- }
- }
-
- & > md-icon:first-child:not(.md-avatar-icon) {
- @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-icon-width);
- }
-
- & .md-avatar, .md-avatar-icon {
- margin-top: $baseline-grid;
- margin-bottom: $baseline-grid;
- @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-avatar-width);
- border-radius: 50%;
- box-sizing: content-box;
- }
- & .md-avatar {
- flex: none;
- width: $list-item-primary-avatar-width;
- height: $list-item-primary-avatar-width;
- }
- & .md-avatar-icon {
- padding: 8px;
-
- // Set the width/height to the same as the icon to fix issue on iOS Safari where the
- // height: 100% was causing it to be larger than it's parent
- svg {
- width: $icon-size;
- height: $icon-size;
- }
- }
-
- & > md-checkbox {
- width: 3 * $baseline-grid;
- @include rtl(margin-left, 3px, 29px);
- @include rtl(margin-right, 29px, 3px);
- margin-top: 16px;
- }
-
- .md-secondary-container {
- display: flex;
- align-items: center;
-
- // The secondary container is now static and needs to be aligned at the end of its parent.
- // - Using an absolute position will cause much issues with the overflow.
- // - Using a flex-filler, which pushes the container to the end of the parent is working
- // but breaks the users list-item layout.
- // Using margin auto to move them to the end of the list item is more elegant, because it has
- // a lower priority than the flex filler and isn't introducing overflow issues again.
- // The margin on the top is also important to align multiple secondary items vertical correctly.
- margin: auto;
-
- @include rtl(margin-right, 0, auto);
- @include rtl(margin-left, auto, 0);
-
- .md-button, .md-icon-button {
- &:last-of-type {
- // Reset 6px margin for the button.
- @include rtl-prop(margin-right, margin-left, 0px);
- }
- }
-
- md-checkbox {
- margin-top: 0;
- margin-bottom: 0;
-
- &:last-child {
- width: 3 * $baseline-grid;
- @include rtl-prop(margin-right, margin-left, 0);
- }
- }
-
- md-switch {
- margin-top: 0;
- margin-bottom: 0;
-
- @include rtl-prop(margin-right, margin-left, -6px);
- }
- }
-
- & > p, & > .md-list-item-inner > p {
- flex: 1 1 auto;
- margin: 0;
- }
- }
-
- &.md-2-line,
- &.md-3-line {
- &, & > .md-no-style {
- align-items: flex-start;
- justify-content: center;
-
- &.md-long-text {
- margin-top: $baseline-grid;
- margin-bottom: $baseline-grid;
- }
-
- .md-list-item-text {
- flex: 1 1 auto;
- margin: auto;
- text-overflow: ellipsis;
- overflow: hidden;
-
- &.md-offset {
- @include rtl-prop(margin-left, margin-right, $list-item-primary-width);
- }
-
- h3 {
- font-size: $subhead-font-size-base;
- font-weight: 400;
- letter-spacing: 0.010em;
- margin: $list-h3-margin;
- line-height: $list-header-line-height;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- h4 {
- font-size: $body-font-size-base;
- letter-spacing: 0.010em;
- margin: $list-h4-margin;
- font-weight: $list-h4-font-weight;
- line-height: $list-header-line-height;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- p {
- font-size: $body-font-size-base;
- font-weight: 500;
- letter-spacing: 0.010em;
- margin: $list-p-margin;
- line-height: $list-p-line-height;
- }
- }
- }
- }
-
- &.md-2-line {
- &, & > .md-no-style {
- height: auto;
-
- min-height: $list-item-two-line-height;
- @include ie11-min-height-flexbug($list-item-two-line-height);
-
- > .md-avatar, .md-avatar-icon {
- margin-top: $baseline-grid * 1.5;
- }
-
- > md-icon:first-child {
- align-self: flex-start;
- }
-
- .md-list-item-text {
- flex: 1 1 auto;
- }
- }
- }
-
- &.md-3-line {
- &, & > .md-no-style {
- height: auto;
-
- min-height: $list-item-three-line-height;
- @include ie11-min-height-flexbug($list-item-three-line-height);
+ @include md-list-item(
+ $md-list-item-height-1,
+ $md-list-item-height-2,
+ $md-list-item-height-3,
+ $md-list-item-avatar-width,
+ $md-list-item-icon-width,
+ $md-list-item-title-font-size,
+ $md-list-item-title-line-height,
+ $md-list-item-subtitle-font-size,
+ $md-list-item-subtitle-line-height,
+ $md-list-item-avatar-padding
+ );
+}
- > md-icon:first-child,
- > .md-avatar {
- margin-top: $baseline-grid * 2;
- }
- }
- }
+/**
+ * List Component in Dense Mode
+ */
+md-list.md-dense {
+ @include md-list(
+ $md-list-item-font-size-dense,
+ $md-list-padding-vertical-dense
+ );
}
+
+md-list.md-dense md-list-item {
+ @include md-list-item(
+ $md-list-item-height-1-dense,
+ $md-list-item-height-2-dense,
+ $md-list-item-height-3-dense,
+ $md-list-item-avatar-width-dense,
+ $md-list-item-icon-width-dense,
+ $md-list-item-title-font-size-dense,
+ $md-list-item-title-line-height-dense,
+ $md-list-item-subtitle-font-size-dense,
+ $md-list-item-subtitle-line-height-dense,
+ $md-list-item-avatar-padding-dense
+ );
+}
\ No newline at end of file
diff --git a/src/components/list/list.spec.js b/src/components/list/list.spec.js
index 84d9271309b..de46872dad3 100644
--- a/src/components/list/list.spec.js
+++ b/src/components/list/list.spec.js
@@ -334,6 +334,53 @@ describe('mdListItem directive', function() {
expect(iconButton.firstElementChild.hasAttribute('ng-show')).toBe(false);
});
+ it('should not create a parent button for proxied secondary elements with ng-click', function() {
+ var listItem = setup(
+ '' +
+ 'Hello World
' +
+ '' +
+ '');
+
+ // First child is our button wrap
+ var firstChild = listItem.children().eq(0);
+ expect(firstChild[0].nodeName).toBe('DIV');
+
+ expect(listItem).toHaveClass('_md-button-wrap');
+
+ // It should contain three elements, the button overlay, inner content
+ // and the secondary container.
+ expect(firstChild.children().length).toBe(3);
+
+ var secondaryContainer = firstChild.children().eq(2);
+ expect(secondaryContainer).toHaveClass('md-secondary-container');
+
+ // The secondary container should contain the md-checkbox, without any button as parent.
+ var checkboxItem = secondaryContainer.children()[0];
+
+ expect(checkboxItem.nodeName).toBe('MD-CHECKBOX');
+ expect(checkboxItem.hasAttribute('ng-click')).toBe(true);
+ });
+
+ it('should not use as a proxied element when using ng-click on the element', function() {
+ var listItem = setup(
+ '' +
+ 'Hello World
' +
+ '' +
+ '');
+
+ var checkboxEl = listItem.find('md-checkbox');
+
+ expect($rootScope.isChecked).toBeFalsy();
+
+ var clickListener = listItem[0].querySelector('div');
+
+ clickListener.click();
+ expect($rootScope.isChecked).toBeFalsy();
+
+ checkboxEl[0].click();
+ expect($rootScope.isChecked).toBeTruthy();
+ });
+
it('moves multiple md-secondary items outside of the button', function() {
var listItem = setup(
'' +
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
index 0122fb5df20..5dd8e8cee54 100644
--- a/src/components/toolbar/toolbar.scss
+++ b/src/components/toolbar/toolbar.scss
@@ -74,7 +74,7 @@ md-toolbar {
}
~ md-content {
- > md-list {
+ > md-list, md-list.md-dense {
padding: 0;
md-list-item:last-child {