diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss index 270c202f8405..b5d90a4f2132 100644 --- a/packages/components/src/components/data-table/_data-table-core.scss +++ b/packages/components/src/components/data-table/_data-table-core.scss @@ -110,14 +110,6 @@ background-color: $ui-03; } - .#{$prefix}--data-table.#{$prefix}--data-table--sort th { - padding: 0; - } - - .#{$prefix}--data-table.#{$prefix}--data-table--sort .#{$prefix}--table-sort { - padding-left: $spacing-05; - } - .#{$prefix}--data-table th:last-of-type { // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position position: static; diff --git a/packages/components/src/components/data-table/_data-table-sort.scss b/packages/components/src/components/data-table/_data-table-sort.scss index 21246faeee2a..78825528bc72 100644 --- a/packages/components/src/components/data-table/_data-table-sort.scss +++ b/packages/components/src/components/data-table/_data-table-sort.scss @@ -16,8 +16,10 @@ // ------------------------------------- // Sortable table // ------------------------------------- - .#{$prefix}--data-table--sort th { + .#{$prefix}--data-table--sort th, + .#{$prefix}--data-table th[aria-sort] { height: $layout-04; + padding: 0; border-top: none; border-bottom: none; } @@ -33,8 +35,8 @@ justify-content: space-between; width: 100%; min-height: 100%; + padding-left: $spacing-05; color: $text-01; - font: inherit; line-height: 1; background-color: $ui-03; @@ -56,10 +58,18 @@ opacity: 1; } + // Override for when `isSortable` is set on `DataTable` as well as `TableHeader` + .#{$prefix}--data-table.#{$prefix}--data-table--sort + th + > .#{$prefix}--table-header-label { + padding-right: $spacing-05; + padding-left: $spacing-05; + } + // ------------------------------------- // Th > Button > Span (span required for flex bugs in Safari) // ------------------------------------- - .#{$prefix}--data-table--sort th .#{$prefix}--table-sort__flex { + th .#{$prefix}--table-sort__flex { display: flex; align-items: center; justify-content: space-between;