vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-06-01 03:14:35 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: improve design-system selector dropdown layout and visual clarity

Browse source 
- Increase dropdown width from 340px to 400px for better breathing room
- Increase max-height from 280px to 320px to show more options
- Increase search input height from 34px to 38px for better proportions
- Increase search input font-size from 12px to 13px for better readability
- Increase search input padding from 10px to 12px for better touch targets
- Increase dropdown padding from 7px to 10px for less cramped appearance
- Improve spacing between search and list (6px → 8px)
- Improve spacing between groups (6px/7px → 8px/8px)
- Improve group label padding for better visual hierarchy

Fixes #2981
This commit is contained in:
xxiaoxiong 2026-05-26 21:15:25 +08:00
parent 86b15515d0
commit cfa92dbb3c
1 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
apps/web/src/styles/home/home-hero.css
View file

@ -1283,10 +1283,10 @@
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-menu { .home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-menu {
left: 0; left: 0;
bottom: calc(100% + 9px); bottom: calc(100% + 9px);
width: min(340px, calc(100vw - 32px)); width: min(400px, calc(100vw - 32px));
max-width: min(340px, calc(100vw - 32px)); max-width: min(400px, calc(100vw - 32px));
max-height: min(280px, calc(100vh - 240px)); max-height: min(320px, calc(100vh - 240px));
padding: 7px; padding: 10px;
border-color: color-mix(in srgb, var(--border) 70%, transparent); border-color: color-mix(in srgb, var(--border) 70%, transparent);
border-radius: 13px; border-radius: 13px;
background: color-mix(in srgb, var(--bg-panel) 98%, white); background: color-mix(in srgb, var(--bg-panel) 98%, white);
@ -1303,7 +1303,7 @@
} }
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-search { .home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-search {
margin: 0; margin: 0;
padding: 0 0 6px; padding: 0 0 8px;
background: color-mix(in srgb, var(--bg-panel) 98%, white); background: color-mix(in srgb, var(--bg-panel) 98%, white);
} }
.home-hero__footer-select-search input { .home-hero__footer-select-search input {
@ -1321,13 +1321,13 @@
padding: 0 12px; padding: 0 12px;
} }
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-search input { .home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-search input {
height: 34px; height: 38px;
border-color: color-mix(in srgb, var(--border) 74%, transparent); border-color: color-mix(in srgb, var(--border) 74%, transparent);
border-radius: 9px; border-radius: 9px;
color: var(--text); color: var(--text);
font-size: 12px; font-size: 13px;
font-weight: 600; font-weight: 600;
padding: 0 10px; padding: 0 12px;
box-shadow: box-shadow:
inset 0 1px 0 color-mix(in srgb, white 70%, transparent), inset 0 1px 0 color-mix(in srgb, white 70%, transparent),
0 1px 2px rgba(15, 23, 42, 0.04); 0 1px 2px rgba(15, 23, 42, 0.04);
@ -1350,7 +1350,7 @@
font-weight: 650; font-weight: 650;
} }
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-count { .home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-count {
padding: 7px 3px 0; padding: 8px 3px 0;
color: var(--text-muted); color: var(--text-muted);
font-size: 11.5px; font-size: 11.5px;
font-weight: 700; font-weight: 700;
@ -1361,8 +1361,8 @@
border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent); border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
} }
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-group + .home-hero__footer-select-group { .home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-group + .home-hero__footer-select-group {
margin-top: 6px; margin-top: 8px;
padding-top: 7px; padding-top: 8px;
} }
.home-hero__footer-select-group-label { .home-hero__footer-select-group-label {
padding: 7px 4px 6px; padding: 7px 4px 6px;
@ -1373,7 +1373,7 @@
text-transform: uppercase; text-transform: uppercase;
} }
.home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-group-label { .home-hero__footer-option--select[data-field-name='designSystem'] .home-hero__footer-select-group-label {
padding: 3px 3px 5px; padding: 4px 3px 6px;
color: color-mix(in srgb, var(--text-muted) 82%, transparent); color: color-mix(in srgb, var(--text-muted) 82%, transparent);
font-size: 9.5px; font-size: 9.5px;
font-weight: 800; font-weight: 800;