diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_list-group.scss | 131 | ||||
| -rw-r--r-- | scss/_variables.scss | 35 |
2 files changed, 84 insertions, 82 deletions
diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 4d78d95c0..ec813c807 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -12,6 +12,34 @@ } +// Interactive list items +// +// Use anchor or button elements instead of `li`s or `div`s to create interactive +// list items. Includes an extra `.active` modifier class for selected items. + +.list-group-item-action { + width: 100%; // For `<button>`s (anchors become 100% by default though) + color: $list-group-link-color; + text-align: inherit; // For `<button>`s (anchors inherit) + + .list-group-item-heading { + color: $list-group-link-heading-color; + } + + // Hover state + @include hover-focus { + color: $list-group-link-hover-color; + text-decoration: none; + background-color: $list-group-hover-bg; + } + + &:active { + color: $list-group-link-active-color; + background-color: $list-group-link-active-bg; + } +} + + // Individual list items // // Use on `li`s or `div`s within the `.list-group` parent. @@ -36,43 +64,51 @@ @include border-bottom-radius($list-group-border-radius); } - &.disabled { - @include plain-hover-focus { - color: $list-group-disabled-color; - cursor: $cursor-disabled; - background-color: $list-group-disabled-bg; - - // Force color to inherit for custom content - .list-group-item-heading { - color: inherit; - } - .list-group-item-text { - color: $list-group-disabled-text-color; - } + @include hover-focus { + text-decoration: none; + } + + &.disabled, + &:disabled { + color: $list-group-disabled-color; + cursor: $cursor-disabled; + background-color: $list-group-disabled-bg; + + // Force color to inherit for custom content + .list-group-item-heading { + color: inherit; + } + .list-group-item-text { + color: $list-group-disabled-text-color; } } + // Include both here for `<a>`s and `<button>`s &.active { - @include plain-hover-focus { - z-index: 2; // Place active items above their siblings for proper border styling - color: $list-group-active-color; - text-decoration: none; // Repeat here because it inherits global a:hover otherwise - background-color: $list-group-active-bg; - border-color: $list-group-active-border; - - // 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; - } + z-index: 2; // Place active items above their siblings for proper border styling + color: $list-group-active-color; + background-color: $list-group-active-bg; + border-color: $list-group-active-border; + + // 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; } } } + +// Flush list items +// +// Remove borders and border-radius to keep list group items edge-to-edge. Most +// useful within other components (e.g., cards). + .list-group-flush { .list-group-item { border-right: 0; @@ -94,29 +130,6 @@ } -// Interactive list items -// -// Use anchor or button elements instead of `li`s or `div`s to create interactive -// list items. Includes an extra `.active` modifier class for selected items. - -.list-group-item-action { - width: 100%; // For `<button>`s (anchors become 100% by default though) - color: $list-group-link-color; - text-align: inherit; // For `<button>`s (anchors inherit) - - .list-group-item-heading { - color: $list-group-link-heading-color; - } - - // Hover state - @include hover-focus { - color: $list-group-link-hover-color; - text-decoration: none; - background-color: $list-group-hover-bg; - } -} - - // Contextual variants // // Add modifier classes to change text and background color on individual items. @@ -126,17 +139,3 @@ @include list-group-item-variant(info, $state-info-bg, $state-info-text); @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text); - - -// Custom content options -// -// Extra classes for creating well-formatted content within `.list-group-item`s. - -.list-group-item-heading { - margin-top: 0; - margin-bottom: $list-group-item-heading-margin-bottom; -} -.list-group-item-text { - margin-bottom: 0; - line-height: 1.3; -} diff --git a/scss/_variables.scss b/scss/_variables.scss index 9acf61827..948ac0354 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -866,28 +866,31 @@ $progress-bar-info-bg: $brand-info !default; // List group -$list-group-bg: $white !default; -$list-group-border-color: rgba($black,.125) !default; -$list-group-border-width: $border-width !default; -$list-group-border-radius: $border-radius !default; +$list-group-color: $body-color !default; +$list-group-bg: $white !default; +$list-group-border-color: rgba($black,.125) !default; +$list-group-border-width: $border-width !default; +$list-group-border-radius: $border-radius !default; -$list-group-hover-bg: $gray-lightest !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border: $list-group-active-bg !default; -$list-group-active-text-color: lighten($list-group-active-bg, 50%) !default; +$list-group-item-padding-x: 1.25rem !default; +$list-group-item-padding-y: .75rem !default; + +$list-group-hover-bg: $gray-lightest !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border: $list-group-active-bg !default; +$list-group-active-text-color: lighten($list-group-active-bg, 50%) !default; $list-group-disabled-color: $gray-light !default; -$list-group-disabled-bg: $gray-lighter !default; +$list-group-disabled-bg: $list-group-bg !default; $list-group-disabled-text-color: $list-group-disabled-color !default; -$list-group-link-color: $gray !default; -$list-group-link-hover-color: $list-group-link-color !default; -$list-group-link-heading-color: $gray-dark !default; +$list-group-link-color: $gray !default; +$list-group-link-heading-color: $gray-dark !default; +$list-group-link-hover-color: $list-group-link-color !default; -$list-group-item-padding-x: 1.25rem !default; -$list-group-item-padding-y: .75rem !default; -$list-group-item-heading-margin-bottom: 5px !default; +$list-group-link-active-color: $list-group-color !default; +$list-group-link-active-bg: $gray-lighter !default; // Image thumbnails |