diff options
| author | Anton <info@ensostudio.ru> | 2022-02-01 00:54:39 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2022-02-09 04:11:46 +0300 |
| commit | 761c4ff2353a42cbf325a3e1910921ced758e059 (patch) | |
| tree | f8ee692c1dd1b337afaff709f61352f15fc34e0c /scss | |
| parent | da9c007139eccffdb635ee7320160fb44701feed (diff) | |
Fix overriding styles of `.list-group-item-action`
~~~html
<style>
.list-group-item-action {color: blue;}
.list-group-item {color: red;}
</style>
<p class="list-group-item">red text!</p>
<p class="list-group-item list-group-item-action">still red text!</p>
~~~
because `.list-group-item` declared after `.list-group-item-action` (order in attribute `class` no effect)
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_list-group.scss | 51 |
1 files changed, 24 insertions, 27 deletions
diff --git a/scss/_list-group.scss b/scss/_list-group.scss index dcd61d2b5e..fbc8a3d364 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -23,33 +23,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-action-color; - text-align: inherit; // For `<button>`s (anchors inherit) - - // Hover state - &:hover, - &:focus { - z-index: 1; // Place hover/focus items above their siblings for proper border styling - color: $list-group-action-hover-color; - text-decoration: none; - background-color: $list-group-hover-bg; - } - - &:active { - color: $list-group-action-active-color; - background-color: $list-group-action-active-bg; - } -} - - // Individual list items // // Use on `li`s or `div`s within the `.list-group` parent. @@ -96,6 +69,30 @@ } } +// 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-action-color; + text-align: inherit; // For `<button>`s (anchors inherit) + + // Hover state + &:hover, + &:focus { + z-index: 1; // Place hover/focus items above their siblings for proper border styling + color: $list-group-action-hover-color; + text-decoration: none; + background-color: $list-group-hover-bg; + } + + &:active { + color: $list-group-action-active-color; + background-color: $list-group-action-active-bg; + } +} // Horizontal // |