/
githubmirror
/
components
Обзор
Документация
Войти
/
githubmirror
/
components
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/components-examples/aria/tree/tree-common.css
81 строка
2 KB
Joy Serquiña
docs(aria/tree): adds aria tree nav rtl example (#32307)
30 янв 2026, 21:05
Не верифицирован
30 янв 2026, 21:05
727a11d
Код
Авторство
О чём код?
.example-tree-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px; } .example-tree-output { padding: 10px; margin-bottom: 16px; border: 1px solid var(--mat-sys-outline); border-radius: var(--mat-sys-corner-extra-small); } .example-tree { padding: 10px; border: 1px solid var(--mat-sys-outline); border-radius: var(--mat-sys-corner-extra-small); overflow-x: scroll; min-width: 24rem; } .example-tree[aria-disabled='true'] { background-color: var(--mat-sys-surface-variant); color: var(--mat-sys-on-surface-variant); cursor: not-allowed; } .example-tree[aria-disabled='true']:focus-within { outline: 2px solid var(--mat-sys-primary); } .example-tree[aria-disabled='true'] .example-tree-item { pointer-events: none; } .example-tree-item { cursor: pointer; list-style: none; text-decoration: none; display: flex; align-items: center; gap: 1rem; padding: 0.3rem 1rem; } .example-icon { margin: 0; width: 24px; } .example-parent-icon { transition: transform 0.2s ease; } .example-tree-item[aria-expanded='true'] .example-parent-icon { transform: rotate(90deg); } .example-tree[dir='rtl'] .example-tree-item .example-parent-icon { transform: scaleX(-1); } .example-tree[dir='rtl'] .example-tree-item[aria-expanded='true'] .example-parent-icon { transform: scaleX(-1) rotate(90deg); } .example-selected-icon { visibility: hidden; margin-left: auto; } .example-tree-item[aria-current] .example-selected-icon, .example-tree-item[aria-selected='true'] .example-selected-icon { visibility: visible; } li[aria-expanded='false'] + ul[role='group'] { display: none; }