Skip to content

Commit

Permalink
Merge pull request #76 from studio24/feature/table-improvements
Browse files Browse the repository at this point in the history
feat: refactor table styles
  • Loading branch information
NicolaSaunders authored Sep 18, 2024
2 parents 5e32fd8 + e75429a commit 4428222
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 32 deletions.
48 changes: 33 additions & 15 deletions assets-src/styles/sass/30-base/_tables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@ table {
}


tr:nth-child(even) {
background-color: rgba($neutral-30, 0.5);
}


th,
td,
table caption {
Expand All @@ -26,22 +21,20 @@ table caption {
}


tbody tr:nth-of-type(odd) {
background-color: rgba($neutral-30, 0.5);
}


th,
td {
border: 1px solid $border-color;
vertical-align: text-top;
}


th {
&[scope="col"] {
background-color: $off-black;
color: $off-white;
}
}


td {
vertical-align: text-top;
font-weight: $emphasis;
}


Expand All @@ -56,7 +49,7 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
margin-block-start: rem(16);
max-inline-size: 100% !important;

&[role][aria-labelledby][tabindex] {
&[role][tabindex] {
animation: scroll-shadow-inset linear; /* 1 */
animation-timeline: scroll( self inline ); /* 1 */
overflow: auto;
Expand All @@ -67,5 +60,30 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
margin-block-end: 0;
margin-block-start: 0;
}

table caption {
border-bottom: 1px solid $border-color;
}

th,
th[scope="row"] ~ td,
thead td {
border-top: 0;
}

tr:last-of-type th[scope="row"],
tbody tr:last-of-type td {
border-bottom: 0;
}

tr th:first-child,
tr td:first-child {
border-left: 0;
}

tr th:last-child,
tr td:last-child {
border-right: 0;
}
}
}
5 changes: 1 addition & 4 deletions web/amplify/fundamentals/tables.html
Original file line number Diff line number Diff line change
Expand Up @@ -142,10 +142,7 @@ <h2>Responsive tables</h2>
<p>Add the following attributes to the wrapping <code>div</code>: <code>tabindex="0"</code> and <code>role="region"</code></p>
</li>
<li>
<p>Add a unique ID to the <code>caption</code> and add <code>aria-labelledby</code> to the wrapping <code>div</code> with the caption ID as the value. This will correctly label what is now an interactive <code>div</code>.</p>
</li>
<li>
<p>A JavaScript enhancement checks whether the wrapper has any overflow. If there is no overflow, the <code>tabindex</code>, <code>role</code> and <code>aria-labelledby</code> attributes are all removed; but they need to exist in the base markup in case JavaScript is not available.</p>
<p>Where possible, add a unique ID to the <code>caption</code> and add <code>aria-labelledby</code> to the wrapping <code>div</code> with the caption ID as the value. This will correctly label what is now a keyboard-interactive <code>div</code>.</p>
</li>
</ul>
</div>
Expand Down
40 changes: 28 additions & 12 deletions web/dist/styles/core.css
Original file line number Diff line number Diff line change
Expand Up @@ -963,29 +963,25 @@ table {
margin-block-start: 1rem;
}

tr:nth-child(even) {
background-color: rgba(198, 198, 198, 0.5);
}

th,
td,
table caption {
padding: 0.75rem;
text-align: start;
}

tbody tr:nth-of-type(odd) {
background-color: rgba(198, 198, 198, 0.5);
}

th,
td {
border: 1px solid #c6c6c6;
vertical-align: text-top;
}

th[scope=col] {
background-color: #252525;
color: #fcfcfc;
}

td {
vertical-align: text-top;
th {
font-weight: 600;
}

/**
Expand All @@ -1001,7 +997,7 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
margin-block-start: 1rem;
max-inline-size: 100% !important;
}
[data-component=table-wrap][role][aria-labelledby][tabindex] {
[data-component=table-wrap][role][tabindex] {
-webkit-animation: scroll-shadow-inset linear;
animation: scroll-shadow-inset linear; /* 1 */
animation-timeline: scroll(self inline); /* 1 */
Expand All @@ -1014,6 +1010,26 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
-webkit-margin-before: 0;
margin-block-start: 0;
}
[data-component=table-wrap] table caption {
border-bottom: 1px solid #c6c6c6;
}
[data-component=table-wrap] th,
[data-component=table-wrap] th[scope=row] ~ td,
[data-component=table-wrap] thead td {
border-top: 0;
}
[data-component=table-wrap] tr:last-of-type th[scope=row],
[data-component=table-wrap] tbody tr:last-of-type td {
border-bottom: 0;
}
[data-component=table-wrap] tr th:first-child,
[data-component=table-wrap] tr td:first-child {
border-left: 0;
}
[data-component=table-wrap] tr th:last-child,
[data-component=table-wrap] tr td:last-child {
border-right: 0;
}
}
/*------------------------------------*\
#Animation
Expand Down
2 changes: 1 addition & 1 deletion web/dist/styles/core.min.css

Large diffs are not rendered by default.

0 comments on commit 4428222

Please sign in to comment.