diff options
author | Blake Gentry <blakesgentry@gmail.com> | 2017-01-06 21:10:24 +0300 |
---|---|---|
committer | Blake Gentry <blakesgentry@gmail.com> | 2017-01-06 21:10:24 +0300 |
commit | f82164992580fca0c3e3dde7d6d097784a514e5b (patch) | |
tree | bb3ff36c326d696623203563a53cab5982970ad8 /assets/stylesheets/bootstrap/_list-group.scss | |
parent | 023043a2da9098e7b8521a2ac62b7b5a470c40d9 (diff) |
rake update[v4.0.0-alpha.6]
Diffstat (limited to 'assets/stylesheets/bootstrap/_list-group.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_list-group.scss | 142 |
1 files changed, 79 insertions, 63 deletions
diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss index 1e0d112..ec813c8 100644 --- a/assets/stylesheets/bootstrap/_list-group.scss +++ b/assets/stylesheets/bootstrap/_list-group.scss @@ -3,19 +3,52 @@ // Easily usable on <ul>, <ol>, or <div>. .list-group { + display: flex; + flex-direction: column; + // No need to set list-style: none; since .list-group-item is block level padding-left: 0; // reset padding because ul and ol margin-bottom: 0; } +// 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. .list-group-item { position: relative; - display: block; + display: flex; + flex-flow: row wrap; + align-items: center; padding: $list-group-item-padding-y $list-group-item-padding-x; // Place the border on the list items and negative margin up for better styling margin-bottom: -$list-group-border-width; @@ -31,71 +64,68 @@ @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; border-left: 0; border-radius: 0; } -} - -// 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; + &:first-child { + .list-group-item:first-child { + border-top: 0; + } } - // Hover state - @include hover-focus { - color: $list-group-link-hover-color; - text-decoration: none; - background-color: $list-group-hover-bg; + &:last-child { + .list-group-item:last-child { + border-bottom: 0; + } } } @@ -109,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; -} |