.float-right { float: right; } .accordion-table { .usa-alert { margin: $gap*2; margin-bottom: 0; } ul { padding-left: 0; } &.accordion-table-list { display: table; width: 100%; } .accordion-table__head { padding: $gap $gap*2; font-size: $small-font-size; font-weight: 700; color: $color-gray; 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; } } .accordion-table__item-content { padding-top: $gap*2; padding-right: $gap; padding-left: $gap*2; padding-bottom: $gap*3; } .accordion-table__items { margin: 0; li { list-style-type: none; font-weight: $font-bold; border-bottom: 1px solid $color-gray-lightest; margin: 0; .icon-link--large { padding-top: $gap*.5; padding-bottom: $gap*.5; } ul { margin-top: 0; margin-bottom: 0; background-color: $color-gray-lightest; li { border-bottom: 1px solid $color-gray-lighter; } } } .accordion-table__item__toggler { @include icon-link-color($color-blue, $color-gray-lightest); float: right; color: $color-blue; padding: $gap; .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; } } th, td, tr { border-bottom: 1px dashed $color-gray-lightest; } th[scope=rowgroup] { position: relative; } .accordion-table__item__expanded { font-size: $small-font-size; font-weight: $font-normal; background-color: $color-gray-lightest; padding: $gap*2 $gap*7 $gap*5 $gap*4; th, td { .icon-link { font-weight: $font-normal; font-size: $base-font-size; } border-bottom: 1px dashed $color-white; } .accordion-table__item__expanded_first { float: left; } } } } #application-members { .accordion-table { .accordion-table__head { } .accordion-table__item-content, .accordion-table__head { display: flex; & > span { flex-grow: 3; display: flex; flex-basis: 0; &.icon-link { flex-grow: 1; } } } span { flex-grow: 1; flex-basis: 0; } } }