Skip to content

Commit

Permalink
Fix border radius on mixed type buttons (saadeghi#1159)
Browse files Browse the repository at this point in the history
* Fix border radius on mixed type buttons

Currently, if you have buttons of different types (`a` vs `button` for example), the button styling breaks because the selectors depend on the button type:

Change to using child selectors as this doesn't care what type of child exists.

* bring back `:not` selectors for button

because otherwise, border radius of first and last children will be wrong

Co-authored-by: Pouya Saadeghi <pouya.saadeghi@gmail.com>
  • Loading branch information
danawoodman and saadeghi committed Sep 21, 2022
1 parent 1991b0d commit 7ed3b35
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions src/utilities/styled/button.css
@@ -1,35 +1,35 @@
/* group */
.btn-group,
.btn-group.btn-group-horizontal {
.btn:not(:first-of-type):not(:last-of-type) {
.btn:not(:first-child):not(:last-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn:first-of-type:not(:last-of-type) {
.btn:first-child:not(:last-child) {
@apply -ml-px -mt-0;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
border-bottom-right-radius: 0;
}
.btn:last-of-type:not(:first-of-type) {
.btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
}
.btn-group.btn-group-vertical {
.btn:first-of-type:not(:last-of-type) {
.btn:first-child:not(:last-child) {
@apply -ml-0 -mt-px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn:last-of-type:not(:first-of-type) {
.btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
Expand Down

0 comments on commit 7ed3b35

Please sign in to comment.