diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index 53153470..33cf2111 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -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; } } } diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss index 7b8da846..61bb1f9d 100644 --- a/styles/elements/_tables.scss +++ b/styles/elements/_tables.scss @@ -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%; diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html new file mode 100644 index 00000000..9f1d71a2 --- /dev/null +++ b/templates/components/toggle_list.html @@ -0,0 +1,27 @@ +{% from "components/icon.html" import Icon %} + +{% macro ToggleList(item_name, item_type, length) %} +