/
githubmirror
/
components
Обзор
Документация
Войти
/
githubmirror
/
components
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.css
71 строка
1 KB
Kristiyan Kostadinov
docs(material/table): use CSS transition for animation (#30454)
06 фев 2025, 18:54
Не верифицирован
06 фев 2025, 18:54
bb2829d
Код
Авторство
О чём код?
table { width: 100%; } tr.example-detail-row { height: 0; } tr.example-element-row { cursor: pointer; } tr.example-element-row:not(.example-expanded-row):hover { background: whitesmoke; } tr.example-element-row:not(.example-expanded-row):active { background: #efefef; } .example-element-row td { border-bottom-width: 0; } .example-element-detail-wrapper { overflow: hidden; display: grid; grid-template-rows: 0fr; grid-template-columns: 100%; transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1); } .example-element-detail-wrapper-expanded { grid-template-rows: 1fr; } .example-element-detail { display: flex; min-height: 0; } .example-element-diagram { min-width: 80px; border: 2px solid black; padding: 8px; font-weight: lighter; margin: 8px 0; height: 104px; } .example-element-symbol { font-weight: bold; font-size: 40px; line-height: normal; } .example-element-description { padding: 16px; } .example-element-description-attribution { opacity: 0.5; } .example-toggle-button { transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1); } .example-toggle-button-expanded { transform: rotate(180deg); }