diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html index a26806aa53b2..c3e46272849d 100644 --- a/src/demo-app/list/list-demo.html +++ b/src/demo-app/list/list-demo.html @@ -31,7 +31,7 @@

{{message.from}}

{{message.subject}} -- {{message.message}}

- + @@ -87,10 +87,11 @@

Nav lists

- + folder {{ link.name }} Description + diff --git a/src/lib/divider/BUILD.bazel b/src/lib/divider/BUILD.bazel index 3cc8e5f7e901..19b106a011d3 100644 --- a/src/lib/divider/BUILD.bazel +++ b/src/lib/divider/BUILD.bazel @@ -16,6 +16,13 @@ ng_module( ) +sass_library( + name = "divider_scss_lib", + srcs = ["divider.scss"], + deps = ["//src/lib/core:core_scss_lib"], +) + + sass_binary( name = "divider_scss", src = "divider.scss", diff --git a/src/lib/divider/divider.scss b/src/lib/divider/divider.scss index da8e5c620b87..e7445cfb39ac 100644 --- a/src/lib/divider/divider.scss +++ b/src/lib/divider/divider.scss @@ -1,6 +1,19 @@ $mat-divider-width: 1px; $mat-divider-inset-margin: 80px; +// This mixin provides the correct offset for an inset divider based on the +// size of the parent class (e.g. avatar vs icon) +@mixin mat-inset-divider-offset($offset, $padding) { + $mat-inset-divider-offset: #{(2 * $padding) + $offset}; + margin-left: $mat-inset-divider-offset; + width: calc(100% - #{$mat-inset-divider-offset}); + + [dir='rtl'] & { + margin-left: auto; + margin-right: $mat-inset-divider-offset; + } +} + .mat-divider { display: block; margin: 0; diff --git a/src/lib/list/BUILD.bazel b/src/lib/list/BUILD.bazel index 7f289c229224..2fa7394d8cf1 100644 --- a/src/lib/list/BUILD.bazel +++ b/src/lib/list/BUILD.bazel @@ -23,7 +23,7 @@ ng_module( sass_binary( name = "list_scss", src = "list.scss", - deps = ["//src/lib/core:core_scss_lib"], + deps = ["//src/lib/core:core_scss_lib", "//src/lib/divider:divider_scss_lib"], ) # TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir. diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss index 6c8583e9d534..52f6b8b1b5a8 100644 --- a/src/lib/list/list.scss +++ b/src/lib/list/list.scss @@ -1,9 +1,11 @@ @import '../core/style/variables'; @import '../core/style/list-common'; @import '../core/style/layout-common'; +@import '../divider/divider'; $mat-list-side-padding: 16px; +$mat-list-icon-padding: 4px; $mat-list-avatar-size: 40px; // Normal list variables @@ -131,6 +133,10 @@ $mat-list-item-inset-divider-offset: 72px; width: $mat-list-avatar-size; height: $mat-list-avatar-size; border-radius: 50%; + + ~ .mat-divider-inset { + @include mat-inset-divider-offset($mat-list-avatar-size, $mat-list-side-padding); + } } .mat-list-icon { @@ -140,7 +146,12 @@ $mat-list-item-inset-divider-offset: 72px; font-size: $icon-size; box-sizing: content-box; border-radius: 50%; - padding: 4px; + padding: $mat-list-icon-padding; + + ~ .mat-divider-inset { + @include mat-inset-divider-offset($icon-size + (2 * $mat-list-icon-padding), + $mat-list-side-padding); + } } .mat-divider { @@ -148,21 +159,15 @@ $mat-list-item-inset-divider-offset: 72px; bottom: 0; left: 0; width: 100%; + margin: 0; [dir='rtl'] & { - left: auto; - right: 0; + margin-left: auto; + margin-right: 0; } &.mat-divider-inset { - left: $mat-list-item-inset-divider-offset; - width: calc(100% - #{$mat-list-item-inset-divider-offset}); - margin: 0; - - [dir='rtl'] & { - left: auto; - right: $mat-list-item-inset-divider-offset; - } + position: absolute; // necessary to override card styles } } }