source: spip-zone/_plugins_/bootstrap/trunk/bootstrap/css/list-group.less @ 90741

Last change on this file since 90741 was 90741, checked in by cedric@…, 4 years ago

BS 3.3.5 dans la place, work in progress
le plugin passe en v3 dev
On s'occupera de la couche de compat BSv2 dans un second temps

File size: 3.1 KB
Line 
1//
2// List groups
3// --------------------------------------------------
4
5
6// Base class
7//
8// Easily usable on <ul>, <ol>, or <div>.
9
10.list-group {
11  // No need to set list-style: none; since .list-group-item is block level
12  margin-bottom: 20px;
13  padding-left: 0; // reset padding because ul and ol
14}
15
16
17// Individual list items
18//
19// Use on `li`s or `div`s within the `.list-group` parent.
20
21.list-group-item {
22  position: relative;
23  display: block;
24  padding: 10px 15px;
25  // Place the border on the list items and negative margin up for better styling
26  margin-bottom: -1px;
27  background-color: @list-group-bg;
28  border: 1px solid @list-group-border;
29
30  // Round the first and last items
31  &:first-child {
32    .border-top-radius(@list-group-border-radius);
33  }
34  &:last-child {
35    margin-bottom: 0;
36    .border-bottom-radius(@list-group-border-radius);
37  }
38}
39
40
41// Interactive list items
42//
43// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
44// Includes an extra `.active` modifier class for showing selected items.
45
46a.list-group-item,
47button.list-group-item {
48  color: @list-group-link-color;
49
50  .list-group-item-heading {
51    color: @list-group-link-heading-color;
52  }
53
54  // Hover state
55  &:hover,
56  &:focus {
57    text-decoration: none;
58    color: @list-group-link-hover-color;
59    background-color: @list-group-hover-bg;
60  }
61}
62
63button.list-group-item {
64  width: 100%;
65  text-align: left;
66}
67
68.list-group-item {
69  // Disabled state
70  &.disabled,
71  &.disabled:hover,
72  &.disabled:focus {
73    background-color: @list-group-disabled-bg;
74    color: @list-group-disabled-color;
75    cursor: @cursor-disabled;
76
77    // Force color to inherit for custom content
78    .list-group-item-heading {
79      color: inherit;
80    }
81    .list-group-item-text {
82      color: @list-group-disabled-text-color;
83    }
84  }
85
86  // Active class on item itself, not parent
87  &.active,
88  &.active:hover,
89  &.active:focus {
90    z-index: 2; // Place active items above their siblings for proper border styling
91    color: @list-group-active-color;
92    background-color: @list-group-active-bg;
93    border-color: @list-group-active-border;
94
95    // Force color to inherit for custom content
96    .list-group-item-heading,
97    .list-group-item-heading > small,
98    .list-group-item-heading > .small {
99      color: inherit;
100    }
101    .list-group-item-text {
102      color: @list-group-active-text-color;
103    }
104  }
105}
106
107
108// Contextual variants
109//
110// Add modifier classes to change text and background color on individual items.
111// Organizationally, this must come after the `:hover` states.
112
113.list-group-item-variant(success; @state-success-bg; @state-success-text);
114.list-group-item-variant(info; @state-info-bg; @state-info-text);
115.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
116.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
117
118
119// Custom content options
120//
121// Extra classes for creating well-formatted content within `.list-group-item`s.
122
123.list-group-item-heading {
124  margin-top: 0;
125  margin-bottom: 5px;
126}
127.list-group-item-text {
128  margin-bottom: 0;
129  line-height: 1.3;
130}
Note: See TracBrowser for help on using the repository browser.