Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit ba36c66

Browse filesBrowse files
committed
fix(Button Group): .btn-group-vertical border radius with dropdown as first element
1 parent b2f5ecd commit ba36c66
Copy full SHA for ba36c66

File tree

2 files changed

+8
-3
lines changed
Filter options

2 files changed

+8
-3
lines changed

‎docs/content/components/button-group.md

Copy file name to clipboardExpand all lines: docs/content/components/button-group.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,8 +205,6 @@ Create a set of buttons that appear vertically stacked rather than horizontally.
205205
{{< example >}}
206206
<div class="docs-example">
207207
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
208-
<button type="button" class="btn btn-primary">Button</button>
209-
<button type="button" class="btn btn-primary">Button</button>
210208
<div class="btn-group" role="group">
211209
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-coreui-toggle="dropdown" aria-expanded="false">
212210
Dropdown
@@ -216,6 +214,8 @@ Create a set of buttons that appear vertically stacked rather than horizontally.
216214
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
217215
</ul>
218216
</div>
217+
<button type="button" class="btn btn-primary">Button</button>
218+
<button type="button" class="btn btn-primary">Button</button>
219219
<div class="btn-group dropstart" role="group">
220220
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-coreui-toggle="dropdown" aria-expanded="false">
221221
Dropdown

‎scss/_button-group.scss

Copy file name to clipboardExpand all lines: scss/_button-group.scss
+6-1Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,12 @@
135135
@include border-bottom-radius(0);
136136
}
137137

138-
> .btn ~ .btn,
138+
// The top radius should be 0 if the button is:
139+
// - the "third or more" child
140+
// - the second child and the previous element isn't `.btn-check` (making it the first child visually)
141+
// - part of a btn-group which isn't the first child
142+
> .btn:nth-child(n + 3),
143+
> :not(.btn-check) + .btn,
139144
> .btn-group:not(:first-child) > .btn {
140145
@include border-top-radius(0);
141146
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.