diff --git a/packages/clay-css/src/scss/atlas/variables/_list-group.scss b/packages/clay-css/src/scss/atlas/variables/_list-group.scss index 148ea757ff..a02b657556 100644 --- a/packages/clay-css/src/scss/atlas/variables/_list-group.scss +++ b/packages/clay-css/src/scss/atlas/variables/_list-group.scss @@ -27,7 +27,6 @@ $list-group-title-link: () !default; $list-group-title-link: map-deep-merge(( border-radius: 1px, display: inline-block, - max-width: 100%, transition: box-shadow 0.15s ease-in-out, hover-color: $gray-900, focus-box-shadow: $component-focus-box-shadow, diff --git a/packages/clay-css/src/scss/components/_list-group.scss b/packages/clay-css/src/scss/components/_list-group.scss index 2d566e8d41..f72b147eec 100644 --- a/packages/clay-css/src/scss/components/_list-group.scss +++ b/packages/clay-css/src/scss/components/_list-group.scss @@ -181,8 +181,16 @@ .list-group-title:only-child { align-items: center; display: flex; - height: 32px; + min-height: 32px; margin-top: 0; + + // IE11 flexbox min-height workaround + + &::after { + content: ''; + display: block; + min-height: inherit; + } } .dropdown-action { @@ -338,4 +346,16 @@ .autofit-col .quick-action-item { margin-top: $list-group-notification-item-border-top-width - $list-group-item-flex-offset-top; } +} + +// List Group Sm + +.list-group-sm { + .list-group-item { + @include clay-container($list-group-sm-item); + } + + .quick-action-menu { + @include clay-container($list-group-sm-quick-action-menu); + } } \ No newline at end of file diff --git a/packages/clay-css/src/scss/components/_sidebar.scss b/packages/clay-css/src/scss/components/_sidebar.scss index 38219c0445..bdbcc2c8bc 100644 --- a/packages/clay-css/src/scss/components/_sidebar.scss +++ b/packages/clay-css/src/scss/components/_sidebar.scss @@ -76,7 +76,7 @@ padding-top: $sidebar-list-group-autofit-col-padding-y; .list-group-title:only-child { - height: map-get($sidebar-list-group-sticker-size, size); + min-height: map-get($sidebar-list-group-sticker-size, size); } } diff --git a/packages/clay-css/src/scss/variables/_list-group.scss b/packages/clay-css/src/scss/variables/_list-group.scss index 8ffa3dbb40..655f228a3a 100644 --- a/packages/clay-css/src/scss/variables/_list-group.scss +++ b/packages/clay-css/src/scss/variables/_list-group.scss @@ -31,6 +31,7 @@ $list-group-header-title: map-deep-merge(( $list-group-title-link: () !default; $list-group-title-link: map-deep-merge(( color: $gray-900, + max-width: 100%, hover-color: darken($gray-900, 15%) ), $list-group-title-link); @@ -38,6 +39,7 @@ $list-group-title: () !default; $list-group-title: map-deep-merge(( font-size: 1.125rem, // 18px font-weight: $font-weight-semi-bold, + line-height: $line-height-base, margin-bottom: 0, margin-top: $list-group-item-flex-list-group-title-offset-top, clay-link: $list-group-title-link @@ -129,4 +131,20 @@ $list-group-notification-item-primary: map-deep-merge(( border-bottom-left-radius: 0, border-top-left-radius: 0, active-border-left-color: theme-color-level(primary, -9) -), $list-group-notification-item-primary); \ No newline at end of file +), $list-group-notification-item-primary); + +// List Group Sm + +$list-group-sm-item: () !default; +$list-group-sm-item: map-deep-merge(( + padding-bottom: 0.40625rem, + padding-top: 0.40625rem, +), $list-group-sm-item); + +$list-group-sm-quick-action-menu: () !default; +$list-group-sm-quick-action-menu: map-deep-merge(( + margin-bottom: -0.40625rem, + margin-top: -0.40625rem, + padding-bottom: 0.40625rem, + padding-top: 0.40625rem, +), $list-group-sm-quick-action-menu); \ No newline at end of file