Tweaked a few styles
Brian Vaughn committed
Jun 1, 2019 at 09:19 UTC
ab7ae785114c9bb9b950883318977d0cf638bc0f
4 files changed
+16
-5
src/devtools/views/Components/Badge.js
+3
-2
@@ -5,12 +5,13 @@ import styles from './Badge.css';
5
6
type Props = {|
7
children: string | null,
8
+ className?: string,
9
|};
10
10
-export default function Badge({ children }: Props) {
11
+export default function Badge({ children, className }: Props) {
12
if (children === null) {
13
return null;
14
}
15
15
- return <div className={styles.Badge}>{children}</div>;
16
+ return <div className={`${styles.Badge} ${className || ''}`}>{children}</div>;
17
}
src/devtools/views/Components/Element.css
+8
@@ -64,3 +64,11 @@
64
flex: 0 0 1rem;
65
color: var(--color-expand-collapse-toggle);
66
}
67
+
68
+.Padding {
69
+ width: 0.25rem;
70
+}
71
+
72
+.Badge {
73
+ margin-left: 0.25rem;
74
+}
src/devtools/views/Components/Element.js
+4
-3
@@ -120,17 +120,17 @@ export default function ElementView({ data, index, style }: Props) {
120
121
// Left padding presents the appearance of a nested tree structure.
122
// We must use padding rather than margin/left because of the selected background color.
123
- paddingLeft: `calc(${depth} * var(--indentation-size) + 0.25rem)`,
123
+ paddingLeft: `calc(${depth} * var(--indentation-size))`,
124
125
// TODO Animate horizontal axis compression so it's smoother.
126
// transition: 'padding-left 250ms',
127
}}
128
data-depth={depth}
129
>
130
+ <span className={styles.Padding} />
131
{ownerID === null ? (
132
<ExpandCollapseToggle element={element} store={store} />
133
) : null}
133
-
134
<span className={styles.Bracket}><</span>
135
<DisplayName displayName={displayName} id={((id: any): number)} />
136
{key && (
@@ -142,7 +142,8 @@ export default function ElementView({ data, index, style }: Props) {
142
</Fragment>
143
)}
144
<span className={styles.Bracket}>></span>
145
- <Badge>{badge}</Badge>
145
+ <Badge className={styles.Badge}>{badge}</Badge>
146
+ <span className={styles.Padding} />
147
</div>
148
);
149
}
src/devtools/views/Components/SelectedElement.css
+1
@@ -98,4 +98,5 @@
98
display: flex;
99
align-items: center;
100
margin-left: 0.5rem;
101
+ padding: 0;
102
}