mirror of
https://github.com/opf/openproject.git
synced 2026-06-14 03:30:14 +00:00
Alexander Brandon Coles
4d84e0aa1b
Add WAI-ARIA roles and relevant attributes to ensure Border Box tables have table-like semantics. This commit makes changes to the structure of the rendered markup to comply with the strict structure needed for ARIA tables. This commit also fixes BEM usage and removes some useless overrides. https://community.openproject.org/work_packages/70190
67 lines
1.2 KiB
Sass
67 lines
1.2 KiB
Sass
@import "helpers"
|
|
|
|
.op-border-box-grid
|
|
display: grid
|
|
|
|
&__header
|
|
align-self: center
|
|
|
|
&__row-item
|
|
word-break: break-word
|
|
|
|
&__header-action,
|
|
&__row-action
|
|
display: flex
|
|
align-items: flex-start
|
|
justify-content: flex-end
|
|
|
|
&__row-action
|
|
margin-top: -6px // Moving the button slightly to the top, so that the icon aligns visually with the other columns
|
|
|
|
@media screen and (min-width: $breakpoint-md)
|
|
.op-border-box-grid
|
|
// Distribute columns evenly on desktop
|
|
grid-auto-columns: minmax(0, 1fr)
|
|
grid-auto-flow: column
|
|
justify-content: flex-start
|
|
align-items: flex-start
|
|
|
|
&--has-mobile-header
|
|
display: none
|
|
|
|
&__header,
|
|
&__row-item
|
|
&:not(:first-child)
|
|
padding-left: 6px
|
|
|
|
&:not(:last-child)
|
|
padding-right: 6px
|
|
|
|
&--main-column
|
|
grid-column: span 2
|
|
|
|
&__mobile-header,
|
|
&__row-label
|
|
display: none
|
|
|
|
@media screen and (max-width: $breakpoint-md)
|
|
.op-border-box-grid
|
|
grid-template-columns: 1fr auto
|
|
grid-auto-flow: row
|
|
|
|
&--has-headers
|
|
display: none
|
|
|
|
&__header
|
|
display: none
|
|
|
|
&__row-item
|
|
grid-column: 1
|
|
|
|
&--no-mobile
|
|
display: none
|
|
|
|
&__row-action
|
|
grid-column: 2
|
|
grid-row: 1
|