New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: clean up button-group styles #246
Conversation
} | ||
|
||
&:not(:last-child) { | ||
border-bottom-right-radius: 0; | ||
border-top-right-radius: 0; | ||
} | ||
|
||
&--active { | ||
z-index: 1; /* Make the active button's border take precedence. */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Doesn't make sense, don't know why it's needed at all.
Dist CSS Diffdiff --git a/packages/core/dist/css/default/default.css b/packages/core/dist-branch/css/default/default.css
index 4266566..1e0eba0 100644
--- a/packages/core/dist/css/default/default.css
+++ b/packages/core/dist-branch/css/default/default.css
@@ -293,7 +293,7 @@
--ifm-button-border-radius: calc(
var(--ifm-global-radius) * var(--ifm-button-size-multiplier)
);
- --ifm-button-group-margin: 2px;
+ --ifm-button-group-spacing: 2px;
--ifm-card-background-color: var(--ifm-background-surface-color);
--ifm-card-border-radius: calc(var(--ifm-global-radius) * 2);
--ifm-card-horizontal-spacing: var(--ifm-global-spacing);
@@ -2006,12 +2006,12 @@ hr {
.button-group {
display: inline-flex;
+ gap: var(--ifm-button-group-spacing);
}
.button-group > .button:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
- margin-left: var(--ifm-button-group-margin);
}
.button-group > .button:not(:last-child) {
@@ -2019,10 +2019,6 @@ hr {
border-top-right-radius: 0;
}
-.button-group > .button--active {
- z-index: 1; /* Make the active button's border take precedence. */
- }
-
.button-group--block {
display: flex;
justify-content: stretch; |
Size Change: -684 B (0%) Total Size: 569 kB
ℹ️ View Unchanged
|
✅ Deploy Preview for infima ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Support for gap
seems inadequate: only 88%. Should we have some policies about what percentage we aim to support? (I also don't know if it can be mitigated through autoprefixing/etc. but from the dist CSS it seems unlikely)
It's a pretty big support (eg |
OK let's do this 👍
|
No description provided.