diff --git a/src/_patterns/00-nds/01-atoms/tables/table-default/table-default.scss b/src/_patterns/00-nds/01-atoms/tables/table-default/table-default.scss index eafc5c99..5e94c6eb 100644 --- a/src/_patterns/00-nds/01-atoms/tables/table-default/table-default.scss +++ b/src/_patterns/00-nds/01-atoms/tables/table-default/table-default.scss @@ -1,32 +1,48 @@ table { - width: 100%; - margin: $s-1 0; - border: $border-block; - border-collapse: collapse; - border-radius: 0; - border-spacing: 0px; background: $white; + border-collapse: separate; + border-spacing: 0; + border: $border-block; + margin: $s-1 0; overflow: hidden; + width: 100%; + + // Apply a border to the right of all but the last column + th:not(:last-child), + td:not(:last-child) { + border-right: $border-block; + } + + // Apply a border to the bottom of all but the last row + >thead>tr:not(:last-child)>th, + >thead>tr:not(:last-child)>td, + >tbody>tr:not(:last-child)>th, + >tbody>tr:not(:last-child)>td, + >tfoot>tr:not(:last-child)>th, + >tfoot>tr:not(:last-child)>td, + >tr:not(:last-child)>td, + >tr:not(:last-child)>th, + >thead:not(:last-child), + >tbody:not(:last-child), + >tfoot:not(:last-child) { + border-bottom: $border-block; + } caption { - @include font-size($font-size-heading-3); - color: $type-heading; - font-style: $font-style-heading-3; - font-weight: $font-weight-medium; - line-height: $line-height-heading; - margin-bottom: $s-1; + caption-side: bottom; + font-size: $s-1 - $s-2px; + line-height: $line-height-medium; + margin-top: $s-0-50; + font-style: italic; text-align: left; } thead { background-color: $color-theme-1-1-1; - border-collapse: separate; - border-color: inherit; - border-radius: 0 0 0 0; color: $white; display: table-header-group; font-weight: $font-weight-semibold; vertical-align: middle; th, td { - border: 0; + border: $s-1px solid $color-theme-1-1-1 !important; color: $white; font-weight: $font-weight-bold; a { @@ -78,7 +94,7 @@ table { } } th, td { - border: $border-block; + // border: $border-block; color: $type-body; line-height: normal; padding: $s-1; @@ -89,26 +105,14 @@ table { } } tr { - border-color: inherit; display: table-row; vertical-align: inherit; - &:last-child { - td { - border-bottom: 0; - } - } } tbody { th { font-weight: $font-weight-bold; } } - thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { - border-radius: 0 0 0 0; - } - thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child { - border-radius: 0 0 0 0; - } &.collapsed { tbody { tr { @@ -139,7 +143,6 @@ table { transform: translateY(-50%); height: $before-size; width: $before-size; - border-radius: 100%; background: $type-heading; color: $white; @extend %fa-icon; diff --git a/src/_patterns/00-nds/02-molecules/components/component-process-list/component-process-list.scss b/src/_patterns/00-nds/02-molecules/components/component-process-list/component-process-list.scss index e6cbe0b6..694f5935 100644 --- a/src/_patterns/00-nds/02-molecules/components/component-process-list/component-process-list.scss +++ b/src/_patterns/00-nds/02-molecules/components/component-process-list/component-process-list.scss @@ -26,7 +26,7 @@ } .component--process-list__item { - border-left: $s-0-50 solid $border-light-blue; + border-left: $s-0-50 solid transparentize($color-theme-1-1-1, 0.8); padding-bottom: $s-1-75; padding-left: $s-2; @@ -50,7 +50,7 @@ @include flex; background-color: #fff; border-radius: 50%; - border: $s-0-50 - $s-3px solid $niaid-blue; + border: $s-0-50 - $s-3px solid $color-theme-1-1-1; box-shadow: 0 0 0 $s-0-75 - $s-4px $grey-light; content: ''; font-size: $s-1; diff --git a/src/css/global/_variables.scss b/src/css/global/_variables.scss index 0eba7f61..bbb88ff3 100644 --- a/src/css/global/_variables.scss +++ b/src/css/global/_variables.scss @@ -61,7 +61,6 @@ $status-warning-light: #FFF9F2; /**** COLORS > MISC ****/ $border-light: $grey-200; -$border-light-blue: #c5d3e7; /**** COLORS > INPUT ****/ $input-border: $grey-700; diff --git a/src/css/global/theme-styles/_corners.scss b/src/css/global/theme-styles/_corners.scss index 47fce406..15206763 100644 --- a/src/css/global/theme-styles/_corners.scss +++ b/src/css/global/theme-styles/_corners.scss @@ -108,15 +108,6 @@ } table { border-radius: $corner-radius; - thead { - border-radius: $corner-radius $corner-radius 0 0; - } - thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { - border-radius: $corner-radius 0 0 0; - } - thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child { - border-radius: 0 0 0 $corner-radius; - } } .text-nds { &.text--badge,