pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: use lists for application environment table

Browse Source
This commit is contained in:
dandds
2019-04-12 09:58:47 -04:00
committed by George Drummond
parent 3ce7d18f7a
commit 171898c753
4 changed files with 113 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
styles/components/_accordion_table.scss
View File

@@ -1,65 +1,78 @@
.accordion-table {
table {
thead th {
text-transform: uppercase;
border-bottom: 1px solid $color-gray-lightest;
border-top: none;
&.accordion-table-list {
display: table;
width: 100%;
}
.accordion-table__head {
padding: 0.8rem 1.6rem;
font-weight: 700;
color: $color-gray;
text-transform: uppercase;
background-color: $color-gray-lightest;
border-bottom: 1px solid $color-gray-lightest;
border-top: none;
}
thead th {
text-transform: uppercase;
border-bottom: 1px solid $color-gray-lightest;
border-top: none;
}
th, td {
white-space: nowrap;
button {
margin: 0;
}
}
th, td {
white-space: nowrap;
.accordion-table__items {
.accordion-table__item__toggler {
@include icon-link-color($color-blue, $color-gray-lightest);
float: right;
margin-left: -$gap;
color: $color-blue;
button {
margin: 0;
.icon {
@include icon-size(12);
margin-right: $gap;
}
.open-indicator {
position: absolute;
bottom: 0;
left: 5 * $gap;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid $color-blue-light;
}
}
.accordion-table__items {
.accordion-table__item__toggler {
@include icon-link-color($color-blue, $color-gray-lightest);
float: right;
margin-left: -$gap;
color: $color-blue;
th, td, tr {
border-bottom: 1px dashed $color-gray-lightest;
}
.icon {
@include icon-size(12);
margin-right: $gap;
th[scope=rowgroup] {
position: relative;
}
.accordion-table__item__expanded {
margin-left: 2 * $gap;
th, td {
.icon-link {
font-weight: $font-normal;
font-size: $base-font-size;
}
.open-indicator {
position: absolute;
bottom: 0;
left: 5 * $gap;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid $color-blue-light;
}
}
th, td, tr {
border-bottom: 1px dashed $color-gray-lightest;
}
th[scope=rowgroup] {
position: relative;
}
.accordion-table__item__expanded {
margin-left: 2 * $gap;
th, td {
.icon-link {
font-weight: $font-normal;
font-size: $base-font-size;
}
border-bottom: 1px dashed $color-white;
background-color: $color-gray-lightest;
}
border-bottom: 1px dashed $color-white;
background-color: $color-gray-lightest;
}
}
}

2
styles/elements/_tables.scss
View File

@@ -4,7 +4,7 @@
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss
*/
table {
table {
@include panel-margin;
min-width: 100%;