From 710071157751dc9aac1b531d283c1ae756a3c902 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 Oct 2013 13:45:32 -0700 Subject: unnest the list-group-item link variation for #11085 and #11088 --- less/list-group.less | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) (limited to 'less/list-group.less') diff --git a/less/list-group.less b/less/list-group.less index 46cda4085..2cee52973 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -39,21 +39,21 @@ > .badge + .badge { margin-right: 5px; } +} - // Linked list items - a& { - color: @list-group-link-color; +// Linked list items +a.list-group-item { + color: @list-group-link-color; - .list-group-item-heading { - color: @list-group-link-heading-color; - } + .list-group-item-heading { + color: @list-group-link-heading-color; + } - // Hover state - &:hover, - &:focus { - text-decoration: none; - background-color: @list-group-hover-bg; - } + // Hover state + &:hover, + &:focus { + text-decoration: none; + background-color: @list-group-hover-bg; } // Active class on item itself, not parent -- cgit v1.2.3 From 0c2055ef381d55388540496996788861fa04b7d8 Mon Sep 17 00:00:00 2001 From: Aaron Borden Date: Wed, 16 Oct 2013 19:02:04 -0700 Subject: Adding contextual styles to list-items --- less/list-group.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'less/list-group.less') diff --git a/less/list-group.less b/less/list-group.less index 2cee52973..cf4ce3eea 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -41,6 +41,11 @@ } } +// Contextual variants +.list-group-item-variant(success; @state-success-bg; @state-success-border); +.list-group-item-variant(danger; @state-danger-bg; @state-danger-border); +.list-group-item-variant(warning; @state-warning-bg; @state-warning-border); + // Linked list items a.list-group-item { color: @list-group-link-color; -- cgit v1.2.3 From 07de53c644b315852c5f315ab91bfd6d65660d50 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Dec 2013 14:09:03 -0800 Subject: Contextual list group cleanup * Adds nav link to sidebar for contextual classes * Refactors to use prefixed classes, like .list-group-item-info, instead of chained classes * Adds default and linked variations to example in docs --- less/list-group.less | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) (limited to 'less/list-group.less') diff --git a/less/list-group.less b/less/list-group.less index cf4ce3eea..35fff05d4 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -2,17 +2,21 @@ // List groups // -------------------------------------------------- + // Base class // // Easily usable on
    ,
      , or
      . + .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 } + // Individual list items -// ------------------------- +// +// Use on `li`s or `div`s within the `.list-group` parent. .list-group-item { position: relative; @@ -41,12 +45,12 @@ } } -// Contextual variants -.list-group-item-variant(success; @state-success-bg; @state-success-border); -.list-group-item-variant(danger; @state-danger-bg; @state-danger-border); -.list-group-item-variant(warning; @state-warning-bg; @state-warning-border); // Linked list items +// +// Use anchor elements instead of `li`s or `div`s to create linked list items. +// Includes an extra `.active` modifier class for showing selected items. + a.list-group-item { color: @list-group-link-color; @@ -80,8 +84,21 @@ a.list-group-item { } } + +// Contextual variants +// +// Add modifier classes to change text and background color on individual items. +// Organizationally, this must come after the `:hover` states. + +.list-group-item-variant(success; @state-success-bg; @state-success-text); +.list-group-item-variant(warning; @state-warning-bg; @state-warning-text); +.list-group-item-variant(danger; @state-danger-bg; @state-danger-text); +.list-group-item-variant(info; @state-info-bg; @state-info-text); + + // Custom content options -// ------------------------- +// +// Extra classes for creating well-formatted content within `.list-group-item`s. .list-group-item-heading { margin-top: 0; -- cgit v1.2.3