Cleaned up CSS vars and reduced font size a bit
Brian Vaughn committed
Feb 8, 2019 at 20:27 UTC
f3f497f40fff89e3554a95837ef3d56d16fc5499
5 files changed
+11
-6
src/devtools/views/Element.css
+1
-1
@@ -5,7 +5,7 @@
5
cursor: pointer;
6
position: relative;
7
white-space: nowrap;
8
- line-height: 20px;
8
+ line-height: var(--line-height-data);
9
display: flex;
10
align-items: center;
11
}
src/devtools/views/SelectedElement.css
+1
-1
@@ -11,7 +11,7 @@
11
flex: 0 0 42px;
12
display: flex;
13
align-items: center;
14
- font-size: 16px;
14
+ font-size: var(--font-size-large);
15
border-bottom: 1px solid var(--color-border);
16
padding: 0.5rem;
17
}
src/devtools/views/Tree.css
+1
-1
@@ -10,7 +10,7 @@
10
flex: 0 0 42px;
11
display: flex;
12
align-items: center;
13
- font-size: 16px;
13
+ font-size: var(--font-size-large);
14
border-bottom: 1px solid var(--color-border);
15
padding: 0.5rem;
16
}
src/devtools/views/Tree.js
+5
-1
@@ -79,6 +79,10 @@ export default function Tree(props: Props) {
79
[baseDepth, numElements, getElementAtIndex]
80
);
81
82
+ const itemSize = parseInt(
83
+ getComputedStyle(document.body).getPropertyValue('--line-height-data')
84
+ );
85
+
86
return (
87
<div className={styles.Tree}>
88
<div className={styles.SearchInput}>
@@ -98,7 +102,7 @@ export default function Tree(props: Props) {
102
height={height}
103
itemCount={numElements}
104
itemData={itemData}
101
- itemSize={20}
105
+ itemSize={itemSize}
106
ref={listRef}
107
width={width}
108
>
src/devtools/views/root.css
+3
-2
@@ -45,8 +45,9 @@
45
--color-tree-node-selected: var(--theme-light-tree-node-selected);
46
--color-tree-node-hover: var(--theme-light-tree-node-hover);
47
48
- --font-size-normal: 12px;
49
- --line-height-data: 1.5rem;
48
+ --font-size-normal: 11px;
49
+ --font-size-large: 15px;
50
+ --line-height-data: 18px;
51
52
/* GitHub.com system fonts */
53
--font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,