diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html index 3ac274f6b9..534ab8b93c 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html @@ -17,15 +17,18 @@ role="row"> -
+
- {{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }} + role="columnheader"> + {{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}
@@ -109,9 +112,7 @@ - {{ 'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate }} diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss index cbb1e417d9..004d27d9fd 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss @@ -288,11 +288,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; /* stylelint-disable-next-line no-duplicate-selectors */ .adf-datatable-cell, .adf-datatable-cell-header { - flex: 1; + flex: 1 1 0%; padding: 0; align-items: center; display: flex; align-self: stretch; + min-width: 0; + min-height: 48px; &:first-child { margin-left: 15px; @@ -300,25 +302,66 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } &.adf-drag-column { - flex: 0; + flex: 0 0 24px; + width: 24px; + padding: 0; + min-height: 100%; + position: relative; + } + } + + .adf-datatable-cell-container { + overflow: hidden; + min-height: inherit; + align-items: center; + display: flex; + width: 100%; + padding: 0 10px; + } + + .adf-datatable-cell-value { + word-break: break-word; + display: block; + width: 100%; + + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + padding: 17px 10px 10px; + } + } + + .adf-drag-handle { + cursor: grab; + width: 24px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.6; + transition: opacity 0.2s ease, background-color 0.2s ease; + user-select: none; + user-select: none; + touch-action: none; + position: absolute; + left: 0; + top: 0; + + &:hover { + opacity: 0.8; + background-color: rgba(0, 0, 0, 0.03); } - .adf-datatable-cell-container { - overflow: hidden; - min-height: inherit; - align-items: center; - display: flex; - width: 100%; - padding: 0 10px; + &:active { + cursor: grabbing; + opacity: 1; + background-color: rgba(0, 0, 0, 0.08); } - .adf-datatable-cell-value { - word-break: break-word; - display: block; - - @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - padding: 17px 10px 10px; - } + &::after { + content: '⋮⋮'; + font-size: 16px; + color: currentcolor; + opacity: 0.7; + line-height: 1; } }