fix(css): an icon-only grid button centres its icon again
Obsidian styles every `button` with `justify-content: center`, so the reset answers with `flex-start` - which also lands on a grid button and overrides the inline half of its `place-items: center`. The rail's connection dot came out pinned 12px left of centre inside its own hit area.
This commit is contained in:
@@ -201,6 +201,12 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* A grid button centres by `place-items`, which the rule above would override
|
||||||
|
for its inline axis: an icon-only button ends up pinned to its left edge. */
|
||||||
|
.beaver-root.beaver-root button:is(.grid, .inline-grid) {
|
||||||
|
justify-content: initial;
|
||||||
|
}
|
||||||
|
|
||||||
.beaver-root.beaver-root button:hover {
|
.beaver-root.beaver-root button:hover {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -89,4 +89,12 @@ describe("cascade against Obsidian", () => {
|
|||||||
expect(source).not.toMatch(/@import "tailwindcss"\s*[;l]/);
|
expect(source).not.toMatch(/@import "tailwindcss"\s*[;l]/);
|
||||||
expect(source).not.toMatch(/@import\s+"tailwindcss\/preflight/);
|
expect(source).not.toMatch(/@import\s+"tailwindcss\/preflight/);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Obsidian's own `button` rules are what the reset answers, but a grid
|
||||||
|
// button must keep centring itself or an icon-only one drifts left.
|
||||||
|
it("leaves grid buttons to their own placement", () => {
|
||||||
|
expect(source).toMatch(
|
||||||
|
/button:is\(\.grid, \.inline-grid\) \{\s*justify-content: initial/
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user