Files
react/packages/react-devtools-shared/src/devtools/views/DevTools.css
T
Brian Vaughn 97a8c72bf8 Wrap Components and Profiler tabs with box-size style too (#18286)
For the browser extension, these views get rendered into portals and so they don't inherit the box-sizing style from the .DevTools wrapper element. This causes views like the Profiler commit selector to subtly break.
2020-03-11 19:12:57 -07:00

61 lines
1.0 KiB
CSS

.DevTools {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: var(--color-background);
color: var(--color-text);
}
.TabBar {
flex: 0 0 auto;
display: flex;
align-items: center;
padding: 0 0.5rem;
background-color: var(--color-background);
border-top: 1px solid var(--color-border);
font-family: var(--font-family-sans);
font-size: var(--font-size-sans-large);
user-select: none;
/* Electron drag area */
-webkit-app-region: drag;
}
.Spacer {
flex: 1;
}
.TabContent {
flex: 1 1 100%;
overflow: auto;
-webkit-app-region: no-drag;
}
.DevToolsVersion {
font-size: var(--font-size-sans-normal);
margin-right: 0.5rem;
}
.DevToolsVersion:before {
font-size: var(--font-size-sans-large);
content: 'DevTools ';
}
@media screen and (max-width: 400px) {
.DevToolsVersion:before {
content: '';
}
}
@media screen and (max-width: 300px) {
.DevToolsVersion {
display: none;
}
}
.DevTools, .DevTools * {
box-sizing: border-box;
-webkit-font-smoothing: var(--font-smoothing);
}