diff options
author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2016-02-19 19:23:15 +0300 |
---|---|---|
committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2016-02-19 19:23:15 +0300 |
commit | 59a78d6f71e79f73a954a87a4b3769d9c85c49f2 (patch) | |
tree | 1c2e4c2cc719b946aa2e930293494a4440f0b551 /assets/stylesheets/bootstrap/_list-group.scss | |
parent | 76dfa96d6a6f519abb00f27680fbafa2714900d5 (diff) |
rake update[v4-dev]
Diffstat (limited to 'assets/stylesheets/bootstrap/_list-group.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_list-group.scss | 83 |
1 files changed, 33 insertions, 50 deletions
diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss index 5115e56..d7e2ec5 100644 --- a/assets/stylesheets/bootstrap/_list-group.scss +++ b/assets/stylesheets/bootstrap/_list-group.scss @@ -16,67 +16,21 @@ .list-group-item { position: relative; display: block; - padding: .75rem 1.25rem; + 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; background-color: $list-group-bg; border: $list-group-border-width solid $list-group-border-color; - // Round the first and last items &:first-child { @include border-top-radius($list-group-border-radius); } + &:last-child { margin-bottom: 0; @include border-bottom-radius($list-group-border-radius); } -} - -.list-group-flush { - .list-group-item { - border-width: $list-group-border-width 0; - border-radius: 0; - } - - &:first-child { - .list-group-item:first-child { - border-top: 0; - } - } - - &:last-child { - .list-group-item:last-child { - border-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. - -a.list-group-item, -button.list-group-item { - width: 100%; - color: $list-group-link-color; - text-align: 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; - } -} - -.list-group-item { - // Disabled state &.disabled { @include plain-hover-focus { color: $list-group-disabled-color; @@ -93,11 +47,11 @@ button.list-group-item { } } - // Active class on item itself, not parent &.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; @@ -114,6 +68,35 @@ button.list-group-item { } } +.list-group-flush { + .list-group-item { + 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; + } + + // Hover state + @include hover-focus { + color: $list-group-link-hover-color; + text-decoration: none; + background-color: $list-group-hover-bg; + } +} + // Contextual variants // @@ -132,7 +115,7 @@ button.list-group-item { .list-group-item-heading { margin-top: 0; - margin-bottom: 5px; + margin-bottom: $list-group-item-heading-margin-bottom; } .list-group-item-text { margin-bottom: 0; |