diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_list-group.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_list-group.scss | 94 |
1 files changed, 46 insertions, 48 deletions
diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss index 7cb83aa..d909022 100644 --- a/assets/stylesheets/bootstrap/_list-group.scss +++ b/assets/stylesheets/bootstrap/_list-group.scss @@ -1,16 +1,11 @@ -// -// List groups -// -------------------------------------------------- - - // Base class // // Easily usable on <ul>, <ol>, or <div>. .list-group { // No need to set list-style: none; since .list-group-item is block level - margin-bottom: 20px; padding-left: 0; // reset padding because ul and ol + margin-bottom: 0; } @@ -21,11 +16,11 @@ .list-group-item { position: relative; display: block; - padding: 10px 15px; + padding: .75rem 1.25rem; // Place the border on the list items and negative margin up for better styling - margin-bottom: -1px; + margin-bottom: -.0625rem; background-color: $list-group-bg; - border: 1px solid $list-group-border; + border: .0625rem solid $list-group-border; // Round the first and last items &:first-child { @@ -37,14 +32,23 @@ } } +.list-group-flush { + .list-group-item { + border-width: .0625rem 0; + border-radius: 0; + } +} + // Interactive list items // -// Use anchor or button elements instead of `li`s or `div`s to create interactive items. -// Includes an extra `.active` modifier class for showing selected 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. a.list-group-item, button.list-group-item { + width: 100%; + text-align: inherit; color: $list-group-link-color; .list-group-item-heading { @@ -52,54 +56,48 @@ button.list-group-item { } // Hover state - &:hover, - &:focus { - text-decoration: none; + @include hover-focus { color: $list-group-link-hover-color; + text-decoration: none; background-color: $list-group-hover-bg; } } -button.list-group-item { - width: 100%; - text-align: left; -} - .list-group-item { // Disabled state - &.disabled, - &.disabled:hover, - &.disabled:focus { - background-color: $list-group-disabled-bg; - color: $list-group-disabled-color; - cursor: $cursor-disabled; - - // Force color to inherit for custom content - .list-group-item-heading { - color: inherit; - } - .list-group-item-text { - color: $list-group-disabled-text-color; + &.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; + } } } // Active class on item itself, not parent - &.active, - &.active:hover, - &.active:focus { - 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; + &.active { + @include plain-hover-focus { + 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; + } } } } |