Skip to content

Commit

Permalink
Improve styling of column resize handles
Browse files Browse the repository at this point in the history
- Only show resize divider on table header
- Use same color for resize divider as for dividers of data
- Add bottom border on header to better match overall style

Closes #71
  • Loading branch information
martin-fleck-at committed Mar 5, 2024
1 parent d1400a1 commit bd9cb67
Showing 1 changed file with 22 additions and 0 deletions.
22 changes: 22 additions & 0 deletions media/memory-table.css
Expand Up @@ -14,6 +14,7 @@
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

.memory-inspector-table thead th,
.memory-inspector-table .group-separator > td {
border-bottom: 2px solid var(--vscode-editor-lineHighlightBorder);
}
Expand Down Expand Up @@ -83,3 +84,24 @@
.radix-prefix {
opacity: .6;
}

/* == Resize Handle == */

.memory-inspector-table span.p-column-resizer:before {
content: '';
position: absolute;
border-right: 2px solid var(--vscode-editor-lineHighlightBorder);
z-index: 0;
transform: translateX(-50%); /* center of span */
height: 100%;
width: 100%;
transition: border-right .1s ease-out;
}

.memory-inspector-table span.p-column-resizer:hover:before {
border-right: 2px solid var(--vscode-sash-hoverBorder);
}

.memory-inspector-table .p-column-resizer-helper {
width: 2px;
}

0 comments on commit bd9cb67

Please sign in to comment.