development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-27 04:49:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Couple of styling updates to quick pick (#208242)

Browse source 
1. Separator descriptions no longer include opacity so that contrast ratio is satisfied
2. The separators are now a little taller so that they stand out compared to regular items
This commit is contained in:
Tyler James Leonhardt 2024-03-20 12:23:04 -07:00 committed by GitHub
parent fb14b695a7
commit d6474a0560
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/vs/platform/quickinput/browser/media/quickInput.css
View file

@ -59,7 +59,7 @@
.quick-input-header {
display: flex;
padding: 8px 6px 6px 6px;
padding: 8px 6px 2px 6px;
}
.quick-input-widget.hidden-input .quick-input-header {
@ -323,12 +323,21 @@
background: none;
}
/* Quick input separators as full-row item */
.quick-input-list .quick-input-list-separator-as-item {
font-weight: 600;
padding: 4px 6px;
font-size: 12px;
}
/* Quick input separators as full-row item */
.quick-input-list .quick-input-list-separator-as-item .label-name {
font-weight: 600;
}
.quick-input-list .quick-input-list-separator-as-item .label-description {
/* Override default description opacity so we don't have a contrast ratio issue. */
opacity: 1 !important;
}
/* Hide border when the item becomes the sticky one */
.quick-input-list .monaco-tree-sticky-row .quick-input-list-entry.quick-input-list-separator-as-item.quick-input-list-separator-border {
border-top-style: none;

5
src/vs/platform/quickinput/browser/quickInputTree.ts
View file

@ -277,9 +277,8 @@ class QuickPickSeparatorElement extends BaseQuickPickItemElement {
class QuickInputItemDelegate implements IListVirtualDelegate<IQuickPickElement> {
getHeight(element: IQuickPickElement): number {
if (!element.item) {
// must be a separator
return 24;
if (element instanceof QuickPickSeparatorElement) {
return 30;
}
return element.saneDetail ? 44 : 22;
}