Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Scale font-size for .small buttons. 

Fixes #30895.
The root font-size for the app has always been 16px, and it remains the
same when switching between 14px and 16px mode. This leads to
`.small` buttons looking relatively smaller to their surroundings in
16px mode. So, if we use a unit that changes when switching between
modes, we will have to multiple that value by (16/14) so that we don't
change the existing behaviour for the 14px mode and make things smaller.
This commit only affects `.small` buttons, the same named class is used
in other places but does not use rem unit there and therefore does not
require any changes.
The original plan was to use em instead of rem and multiply it by
(16/14 * 0.8), but since em depends on the parent element, there was a
case in the poll button widget where 1em was equal to 16px in the dense
14px mode. While, the right thing to do might have been some refactor to
make it work as desired, the safest thing to do right now might be to
use the --base-font-size-px variable directly for the 9.0 release.
This commit is contained in:
Shubham Padia 2024-07-16 03:18:34 +00:00 committed by Tim Abbott
parent 16623bf3b7
commit 15ea879899
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/styles/app_components.css
View File

@ -149,7 +149,18 @@ input::placeholder {
}
&.small {
font-size: 0.8rem;
/* This value was 0.8rem in the past. When using rem,
the root font size was 16px when the base font-size was
14px. Now, we have two modes, one with 14px base
font-size and one with 16px base font-size. We multiply
by (16 / 14 * 0.8 = 0.9143) so rem equivalent value
will remain the same in the legacy 14px mode, while
scaling the size up for 16px mode. The font-size will
resolve in pixels.
TODO: Refactor this part to either use `em` or `rem`
and not this temporary hack of using calc() and
variables. */
font-size: calc(0.9143 * var(--base-font-size-px));
min-width: inherit;
padding: 6px 10px;
}