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

compose: Let pill-container dictate spacing of pills. 

The 2px and 6px values expressed as variables here are taken from
@terpimost's mocks in Figma.
This commit is contained in:
Karl Stolley 2024-06-19 11:25:44 -04:00 committed by Tim Abbott
parent 0844e2cba9
commit 3a4719915c
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/styles/app_variables.css
View File

@ -204,6 +204,8 @@
/* 1.4286em is 20px at 14px/1em */ /* 1.4286em is 20px at 14px/1em */
--height-input-pill: 1.4286em; --height-input-pill: 1.4286em;
--length-input-pill-image: var(--height-input-pill); --length-input-pill-image: var(--height-input-pill);
--vertical-spacing-input-pill: 2px;
--horizontal-spacing-input-pill: 6px;
/* Overlay heights for streams modal */ /* Overlay heights for streams modal */
--overlay-container-height: 95vh; --overlay-container-height: 95vh;

5
web/styles/input_pill.css
View File

@ -17,7 +17,7 @@
min-width: 0; min-width: 0;
height: var(--height-input-pill); height: var(--height-input-pill);
margin: 1px 2px; margin: 0;
color: inherit; color: inherit;
border: 1px solid transparent; border: 1px solid transparent;
@ -157,7 +157,8 @@
} }
#compose-direct-recipient .pill-container { #compose-direct-recipient .pill-container {
padding: 0 2px; gap: var(--vertical-spacing-input-pill) var(--horizontal-spacing-input-pill);
padding: var(--vertical-spacing-input-pill);
border: 1px solid hsl(0deg 0% 0% / 20%); border: 1px solid hsl(0deg 0% 0% / 20%);
background-color: hsl(0deg 0% 100%); background-color: hsl(0deg 0% 100%);