// Name: List groups // // Component: `list-group` // // Modifiers: `list-group.bg-inherit` // `list-group-bordered` // `list-group-gap` // `list-group-full` // `list-group-item-dark` // // ======================================================================== // Variables // ======================================================================== $list-group-active-color : $brand-primary !default; $list-group-link-hover-bg : $bg-color-base !default; $list-group-link-disabled-color : $disabled-color-base !default; $list-group-link-disabled-bg : $gray-lightest !default; $list-group-action-active-color : $color-white; $list-group-action-active-bg : $brand-primary; $list-group-bg-inherit-item-border : rgba(0, 0, 0, 0.075) !default; $list-group-bg-inherit-item-hover-bg : rgba(0, 0, 0, 0.075) !default; $list-group-bordered-border : $border-color-base !default; $list-group-bordered-active-color : $component-active-color !default; $list-group-bordered-active-bg : $component-active-bg !default; $list-group-bordered-active-border : $list-group-bordered-active-bg !default; $list-group-hover-item-hover-bg : $list-group-link-hover-bg !default; // Component: List groups // ======================================================================== .list-group { .media { border-bottom: 0; } } a.list-group-item { color: $list-group-action-color; @include hover-focus { color: $list-group-action-hover-color; background-color: $list-group-link-hover-bg; } &.disabled { @include plain-hover-focus { color: $list-group-link-disabled-color; background-color: $list-group-link-disabled-bg; } } &.active { @include plain-hover-focus { color: $list-group-action-active-color; background-color: $list-group-action-active-bg; } } } // Modifier: `list-group.bg-inherit` // ------------------------- .list-group.bg-inherit { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1); .list-group-item { background-color: transparent; border-bottom-color: $list-group-bg-inherit-item-border; &:last-child { border-bottom-color: transparent; } &:hover { background-color: $list-group-bg-inherit-item-hover-bg; border-color: transparent; } } } // Modifier: `list-group-bordered` // ------------------------- .list-group-bordered { .list-group-item { border-color: $list-group-bordered-border; &.active, &.active:hover, &.active:focus { color: $list-group-bordered-active-color; background-color: $list-group-bordered-active-bg; border-color: $list-group-bordered-active-border; } } } // Modifier: `list-group-dividered` // ------------------------- .list-group-dividered { .list-group-item { border-top-color: $list-group-bordered-border; &.active:hover { border-top-color: $list-group-bordered-border; } } .list-group-item:last-child { border-bottom-color: $list-group-bordered-border; } .list-group-item:first-child { border-top-color: $list-group-border-color; &.active:hover { border-top-color: $list-group-border-color; } } } // Modifier: `list-group-gap` // ------------------------- .list-group-gap { .list-group-item { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1); } } // add from---v3 .list-group-item { border: 1px solid transparent; // Disabled state &.disabled { @include plain-hover-focus { // Force color to inherit for custom content .list-group-item-heading { color: inherit; } .list-group-item-text { color: $list-group-disabled-text-color; } } } // Active class on item itself, not parent &.active { @include plain-hover-focus { // Force color to inherit for custom content .list-group-item-heading, .list-group-item-heading > small, .list-group-item-heading > .small { color: inherit; } .list-group-item-text { color: $list-group-active-text-color; } } } } .list-group-item.active { @include plain-hover-focus { background-color: $list-group-active-bg; border-color: $list-group-active-border; color: $list-group-active-color; .list-group-item-heading { color: inherit; } } } // Color Modifier // ======================================================================== // Modifier: `list-group-item-dark` // ------------------------- @include list-group-item-variant(dark, $state-dark-bg, $state-dark-text); // Modifier: `list-group-hover` // ------------------------- // not suitable for list-group(no this modifier) nest in list-group(add this modifier) .list-group-hover { .list-group-item:hover { background-color: $list-group-hover-item-hover-bg; } } @include list-group-hover-item-variant(success, $state-success-bg, $state-success-text); @include list-group-hover-item-variant(info, $state-info-bg, $state-info-text); @include list-group-hover-item-variant(warning, $state-warning-bg, $state-warning-text); @include list-group-hover-item-variant(danger, $state-danger-bg, $state-danger-text); @include list-group-hover-item-variant(dark, $state-dark-bg, $state-dark-text);