/
githubmr
/
facebook-react
Обзор
Документация
Войти
/
githubmr
/
facebook-react
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
main
packages/react-devtools-shared/src/devtools/views/Components/Components.css
78 строк
1 KB
Sebastian "Sebbie" Silbermann
[DevTools] More robust resize handling (#34036)
29 июл 2025, 18:45
Не верифицирован
29 июл 2025, 18:45
b1cbb48
Код
Авторство
О чём код?
.Components { position: relative; width: 100%; height: 100%; display: flex; flex-direction: row; background-color: var(--color-background); color: var(--color-text); font-family: var(--font-family-sans); } .Components, .Components * { box-sizing: border-box; -webkit-font-smoothing: var(--font-smoothing); } .TreeWrapper { flex: 0 0 var(--horizontal-resize-percentage); } .InspectedElementWrapper { flex: 1 1 35%; overflow-x: hidden; overflow-y: auto; } .ResizeBarWrapper { flex: 0 0 0px; position: relative; } .ResizeBar { position: absolute; /* * moving the bar out of its bounding box might cause its hitbox to overlap * with another scrollbar creating disorienting UX where you both resize and scroll * at the same time. * If you adjust this value, double check that starting resize right on this edge * doesn't also cause scroll */ left: 1px; width: 5px; height: 100%; cursor: ew-resize; } @container devtools (width < 600px) { .Components { flex-direction: column; } .TreeWrapper { flex: 0 0 var(--vertical-resize-percentage); } .InspectedElementWrapper { flex: 1 1 50%; } .ResizeBar { top: 1px; left: 0; width: 100%; height: 5px; cursor: ns-resize; } } .Loading { height: 100%; padding-left: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sans-large); color: var(--color-dim); border-left: 1px solid var(--color-border); }