/
githubmr
/
facebook-react
Обзор
Документация
Войти
/
githubmr
/
facebook-react
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
main
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.css
61 строка
1 KB
Sebastian Markbåge
[DevTools] Give a distinct color to the root (#34690)
02 окт 2025, 21:37
Не верифицирован
02 окт 2025, 21:37
2e68dc7
Код
Авторство
О чём код?
.SuspenseScrubber { position: relative; width: 100%; height: 1.5rem; border-radius: 0.75rem; padding: 0.25rem; box-sizing: border-box; display: flex; align-items: center; } .SuspenseScrubber:has(.SuspenseScrubberInput:focus-visible) { outline: 2px solid var(--color-button-background-focus); } .SuspenseScrubberInput { position: absolute; width: 100%; opacity: 0; height: 0px; overflow: hidden; } .SuspenseScrubberInput:focus { outline: none; } .SuspenseScrubberStep { cursor: pointer; flex: 1; height: 100%; padding-right: 1px; /* we use this instead of flex gap to make every pixel clickable */ display: flex; align-items: center; } .SuspenseScrubberStep:last-child { padding-right: 0; } .SuspenseScrubberBead { flex: 1; height: 0.5rem; background: var(--color-background-selected); border-radius: 0.5rem; background: var(--color-selected-tree-highlight-active); transition: all 0.3s ease-in-out; } .SuspenseScrubberBeadSelected { height: 1rem; background: var(--color-background-selected); } .SuspenseScrubberBeadTransition { background: var(--color-component-name); } .SuspenseScrubberStepHighlight > .SuspenseScrubberBead, .SuspenseScrubberStep:hover > .SuspenseScrubberBead { height: 0.75rem; }