8000 fix(ListGroup): fix the position of `.list-group-item-action` and add… · coreui/coreui@4c5f1ec · GitHub
[go: up one dir, main page]
Skip to content

Commit 4c5f1ec

Browse files
mrholekmrholek
committed
fix(ListGroup): fix the position of .list-group-item-action and add a guard rail on the active state
1 parent 0daf274 commit 4c5f1ec

File tree

1 file changed

+27
-25
lines changed

1 file changed

+27
-25
lines changed

‎scss/_list-group.scss‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -48,31 +48,6 @@
4848
}
4949
}
5050

51-
// Interactive list items
52-
//
53-
// Use anchor or button elements instead of `li`s or `div`s to create interactive
54-
// list items. Includes an extra `.active` modifier class for selected items.
55-
56-
.list-group-item-action {
57-
width: 100%; // For `<button>`s (anchors become 100% by default though)
58-
color: var(--#{$prefix}list-group-action-color);
59-
text-align: inherit; // For `<button>`s (anchors inherit)
60-
61-
// Hover state
62-
&:hover,
63-
&:focus {
64-
z-index: 1; // Place hover/focus items above their siblings for proper border styling
65-
color: var(--#{$prefix}list-group-action-hover-color);
66-
text-decoration: none;
67-
background-color: var(--#{$prefix}list-group-action-hover-bg);
68-
}
69-
70-
&:active {
71-
color: var(--#{$prefix}list-group-action-active-color);
72-
background-color: var(--#{$prefix}list-group-action-active-bg);
73-
}
74-
}
75-
7651
// Individual list items
7752
//
7853
// Use on `li`s or `div`s within the `.list-group` parent.
@@ -120,6 +95,33 @@
12095
}
12196
}
12297

98+
// Interactive list items
99+
//
100+
// Use anchor or button elements instead of `li`s or `div`s to create interactive
101+
// list items. Includes an extra `.active` modifier class for selected items.
102+
103+
.list-group-item-action {
104+
width: 100%; // For `<button>`s (anchors become 100% by default though)
105+
color: var(--#{$prefix}list-group-action-color);
106+
text-align: inherit; // For `<button>`s (anchors inherit)
107+
108+
&:not(.active) {
109+
// Hover state
110+
&:hover,
111+
&:focus {
112+
z-index: 1; // Place hover/focus items above their siblings for proper border styling
113+
color: var(--#{$prefix}list-group-action-hover-color);
114+
text-decoration: none;
115+
background-color: var(--#{$prefix}list-group-action-hover-bg);
116+
}
117+
118+
&:active {
119+
color: var(--#{$prefix}list-group-action-active-color);
120+
background-color: var(--#{$prefix}list-group-action-active-bg);
121+
}
122+
}
123+
}
124+
123125
// Horizontal
124126
//
125127
// Change the layout of list group items from vertical (default) to horizontal.

0 commit comments

Comments
 (0)
0