From b1d2c53c4be9b64ae8145e574aeee3531210297d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Popovics=20Andr=C3=A1s?= Date: Tue, 26 Sep 2017 15:38:31 +0100 Subject: [PATCH] [ADF-1585] - Fix datatable styles (#2374) * Unify datatable hover and selection color * Fix prebuilt styles collision --- .../ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css | 4 ++-- .../ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css | 4 ++-- .../ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css | 4 ++-- .../ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css | 4 ++-- .../ng2-alfresco-core/prebuilt-themes/adf-green-orange.css | 4 ++-- .../ng2-alfresco-core/prebuilt-themes/adf-green-purple.css | 4 ++-- .../ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css | 4 ++-- .../ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css | 4 ++-- .../ng2-alfresco-core/prebuilt-themes/adf-purple-green.css | 4 ++-- .../src/components/datatable/datatable.component.scss | 5 +++-- 10 files changed, 21 insertions(+), 20 deletions(-) diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css index 85e1f98dd4..be77bb7f2f 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css @@ -2351,9 +2351,9 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: background-color; } .adf-data-table tbody tr:hover { - background-color: #eeeeee; } + background-color: rgba(0, 0, 0, 0.04); } .adf-data-table tbody tr.is-selected, .adf-data-table tbody tr.is-selected:hover { - background-color: #e0f7fa; } + background-color: #e0e0e0; } .adf-data-table tbody tr:focus { outline-offset: -1px; outline-width: 1px; diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css index 72eb92b5a6..6dbb7a6a35 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css @@ -2351,9 +2351,9 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: background-color; } .adf-data-table tbody tr:hover { - background-color: #eeeeee; } + background-color: rgba(0, 0, 0, 0.04); } .adf-data-table tbody tr.is-selected, .adf-data-table tbody tr.is-selected:hover { - background-color: #e0f7fa; } + background-color: #e0e0e0; } .adf-data-table tbody tr:focus { outline-offset: -1px; outline-width: 1px; diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css index a906ee281b..65a3027c67 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css @@ -2351,9 +2351,9 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: background-color; } .adf-data-table tbody tr:hover { - background-color: #eeeeee; } + background-color: rgba(0, 0, 0, 0.04); } .adf-data-table tbody tr.is-selected, .adf-data-table tbody tr.is-selected:hover { - background-color: #e0f7fa; } + background-color: #e0e0e0; } .adf-data-table tbody tr:focus { outline-offset: -1px; outline-width: 1px; diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css index fe1279c908..6f1370b526 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css @@ -2351,9 +2351,9 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: background-color; } .adf-data-table tbody tr:hover { - background-color: #eeeeee; } + background-color: rgba(0, 0, 0, 0.04); } .adf-data-table tbody tr.is-selected, .adf-data-table tbody tr.is-selected:hover { - background-color: #e0f7fa; } + background-color: #e0e0e0; } .adf-data-table tbody tr:focus { outline-offset: -1px; outline-width: 1px; diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css index 2bfb1c3693..ee6ea3a7a2 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css @@ -2351,9 +2351,9 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: background-color; } .adf-data-table tbody tr:hover { - background-color: #eeeeee; } + background-color: rgba(0, 0, 0, 0.04); } .adf-data-table tbody tr.is-selected, .adf-data-table tbody tr.is-selected:hover { - background-color: #e0f7fa; } + background-color: #e0e0e0; } .adf-data-table tbody tr:focus { outline-offset: -1px; outline-width: 1px; diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css index d671823808..adacb1f9cc 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css @@ -2351,9 +2351,9 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: background-color; } .adf-data-table tbody tr:hover { - background-color: #eeeeee; } + background-color: rgba(0, 0, 0, 0.04); } .adf-data-table tbody tr.is-selected, .adf-data-table tbody tr.is-selected:hover { - background-color: #e0f7fa; } + background-color: #e0e0e0; } .adf-data-table tbody tr:focus { outline-offset: -1px; outline-width: 1px; diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css index b1b7c1861c..6155b0b081 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css @@ -2351,9 +2351,9 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: background-color; } .adf-data-table tbody tr:hover { - background-color: #eeeeee; } + background-color: rgba(0, 0, 0, 0.04); } .adf-data-table tbody tr.is-selected, .adf-data-table tbody tr.is-selected:hover { - background-color: #e0f7fa; } + background-color: #e0e0e0; } .adf-data-table tbody tr:focus { outline-offset: -1px; outline-width: 1px; diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css index 7cd88b64af..edda7a8c33 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css @@ -2351,9 +2351,9 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: background-color; } .adf-data-table tbody tr:hover { - background-color: #eeeeee; } + background-color: rgba(255, 255, 255, 0.04); } .adf-data-table tbody tr.is-selected, .adf-data-table tbody tr.is-selected:hover { - background-color: #e0f7fa; } + background-color: #212121; } .adf-data-table tbody tr:focus { outline-offset: -1px; outline-width: 1px; diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css index f15948521b..bf0eb37d79 100644 --- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css +++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css @@ -2351,9 +2351,9 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: background-color; } .adf-data-table tbody tr:hover { - background-color: #eeeeee; } + background-color: rgba(255, 255, 255, 0.04); } .adf-data-table tbody tr.is-selected, .adf-data-table tbody tr.is-selected:hover { - background-color: #e0f7fa; } + background-color: #212121; } .adf-data-table tbody tr:focus { outline-offset: -1px; outline-width: 1px; diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss index 8def0cb090..0a33f5b17a 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss @@ -1,6 +1,7 @@ @mixin mat-datatable-theme($theme) { $foreground: map-get($theme, foreground); + $background: map-get($theme, background); $primary: map-get($theme, primary); $data-table-font-size: 14px !default; @@ -10,8 +11,8 @@ $data-table-header-sorted-color: mat-color($foreground, text) !default; $data-table-header-sorted-icon-hover-color: mat-color($foreground, disabled-text) !default; $data-table-divider-color: mat-color($foreground, text, .07) !default; - $data-table-hover-color: #eeeeee !default; - $data-table-selection-color: #e0f7fa !default; + $data-table-hover-color: mat-color($background, 'hover') !default; + $data-table-selection-color: mat-color($background, 'selected-button') !default; $data-table-dividers: 1px solid $data-table-divider-color !default; $data-table-row-height: 56px !default; // $data-table-last-row-height: 56px !default;