Special alignment for the sort button on the checkbox column

This commit is contained in:
Rachid Mrad 2025-02-19 12:11:51 -05:00
parent 819b4a30ab
commit 0890e0afd9
No known key found for this signature in database
2 changed files with 6 additions and 3 deletions

View file

@ -103,8 +103,8 @@ th {
}
}
@include at-media(tablet-lg) {
th[data-sortable] .usa-table__header__button,
th[data-sortable] .usa-table__header__button:not([aria-sort]) {
th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button,
th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button:not([aria-sort]) {
// position next to the copy
right: auto;
// slide left to mock a margin between the copy and the icon
@ -112,6 +112,9 @@ th {
// fix vertical alignment
top: units(1.5);
}
th[data-sortable].left-align-sort-button .usa-table__header__button {
left: 0;
}
}
// Currently the 'flash' when sort is clicked,

View file

@ -45,7 +45,7 @@
<caption class="sr-only">member domains</caption>
<thead>
<tr>
<th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6"><span class="sr-only">Assigned domains</span></th>
<th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6 left-align-sort-button"><span class="sr-only">Assigned domains</span></th>
<!-- We override default sort to be name/ascending in the JSON endpoint. We add the correct aria-sort attribute here to reflect that in the UI -->
<th data-sortable="name" scope="col" role="columnheader" aria-sort="descending">Domains</th>
</tr>