zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-12 20:49:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

Finish tweaking the UI

Browse source
This commit is contained in:
Rachid Mrad 2025-02-06 20:01:15 -05:00
parent 5de1493949
commit ec9df83154
No known key found for this signature in database
1 changed files with 26 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/registrar/assets/src/sass/_theme/_tables.scss
View file

@ -1,5 +1,4 @@
@use "uswds-core" as *; @use "uswds-core" as *;
@use "cisa_colors" as *;
td, td,
th { th {
@ -42,13 +41,8 @@ th {
} }
} }
// The member table has an extra "expand" row, which looks like a single row. // .dotgov-table allows us to customize .usa-table on the user-facing pages,
// But the DOM disagrees - so we basically need to hide the border on both rows. // while leaving the default styles for use on the admin pages
#members__table-wrapper .dotgov-table tr:nth-last-child(2) td,
#members__table-wrapper .dotgov-table tr:nth-last-child(2) th {
border-bottom: none;
}
.dotgov-table { .dotgov-table {
width: 100%; width: 100%;
@ -96,35 +90,44 @@ th {
} }
} }
th[aria-sort], // Sortable headers
th[data-sortable][aria-sort=ascending], th[data-sortable][aria-sort=ascending],
th[data-sortable][aria-sort=descending] { th[data-sortable][aria-sort=descending] {
background-color: transparent; background-color: transparent;
.usa-table__header__button { .usa-table__header__button {
background-color: rgba(214, 233, 242, 0.6); background-color: color('accent-cool-lightest');
background-color: $theme-color-accent-cool-lightest; border-radius: units(.5);
border-radius: 4px;
// position: relative;
// left: 4px;
// top: 16px;
color: color('primary-darker'); color: color('primary-darker');
&:hover { &:hover {
background-color: rgba(214, 233, 242, 0.6); background-color: color('accent-cool-lightest');
} }
} }
} }
@include at-media(tablet-lg) { @include at-media(tablet-lg) {
th[data-sortable] .usa-table__header__button, th[data-sortable] .usa-table__header__button,
th[data-sortable] .usa-table__header__button:not([aria-sort]), th[data-sortable] .usa-table__header__button:not([aria-sort]) {
th[data-sortable][aria-sort=ascending] .usa-table__header__button, // position next to the copy
th[data-sortable][aria-sort=descending] .usa-table__header__button {
right: auto; right: auto;
top: 12px; // slide left to mock a margin between the copy and the icon
transform: translateX(10px); transform: translateX(units(1));
// fix vertical alignment
top: units(1.5);
} }
} }
// Currently the 'flash' when sort is clicked,
// this will become persistent if the double-sort bug is fixed
td[data-sort-active],
th[data-sort-active] {
background-color: color('primary-lightest');
}
}
// The member table has an extra "expand" row, which looks like a single row.
// But the DOM disagrees - so we basically need to hide the border on both rows.
#members__table-wrapper .dotgov-table tr:nth-last-child(2) td,
#members__table-wrapper .dotgov-table tr:nth-last-child(2) th {
border-bottom: none;
} }
.dotgov-table--cell-padding-2 { .dotgov-table--cell-padding-2 {