Replies: 1 comment 2 replies
-
|
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
|
Beta Was this translation helpful? Give feedback.
-
Hi, thank you for Mantine. 👏👏👏
I am sure this is not a bug, but it went against my expectations so I wanted to check in with some Mantine experts to get some clarity.
Basically I would like to get insight on what is the intended way to size a component like Menu.
I am using Mantine's Menu in multiple places but want to make it smaller in one instance - basically smaller padding and smaller font-sizes. I know that Mantine declares font-sizes as vars, eg:
--mantine-font-size-md: calc(1rem*var(--mantine-scale))
and then uses those vars in the component CSS, and uses--mantine-scale
in padding as well.My expectation was that setting the
--mantine-scale
variable on an element or component would affect its font-size, which it doesn't. This is just how calcs work it seems, they are calculated right where they are declared. So I cannot scale or size a component like Menu by setting--mantine-scale
on it because all the font-size vars have already been calculated. The padding in Mantine Menu does change, because it uses calc directly instead of a padding var.It seems that in order to size my menu, I have the following options:
--mantine-scale
at the component's root.Am I missing anything? Is there a clear correct approach to take? Any insight would be greatly appreciated.
Beta Was this translation helpful? Give feedback.
All reactions