[nifi-fds] branch master updated: [NIFI-6261] Create a mixin to leverage the theme color in the .td-data-table-cell classes.

[mc...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

mcgilman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/nifi-fds.git


The following commit(s) were added to refs/heads/master by this push:
     new 2139e8d  [NIFI-6261] Create a mixin to leverage the theme color in the .td-data-table-cell classes.
2139e8d is described below

commit 2139e8d0bd5ba06e40ca64ff66312d7e4c7e35af
Author: Scott Aslan <sc...@gmail.com>
AuthorDate: Fri May 3 14:59:29 2019 -0400

    [NIFI-6261] Create a mixin to leverage the theme color in the .td-data-table-cell classes.
    
    This closes #19
---
 platform/core/common/styles/_tables.scss | 36 ++++++++++++++++++++------------
 platform/core/theming/_all-theme.scss    |  2 ++
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/platform/core/common/styles/_tables.scss b/platform/core/common/styles/_tables.scss
index cc2af89..66ef764 100644
--- a/platform/core/common/styles/_tables.scss
+++ b/platform/core/common/styles/_tables.scss
@@ -54,12 +54,8 @@ body[fds] .td-data-table-row.selected {
 }
 
 body[fds] .td-data-table-row:hover {
-  background-color: $grey6;
-  border: 1px solid $blue-grey2;
-}
-
-body[fds] .td-data-table-cell .mat-icon-button {
-  color: $linkColor;
+  background-color: $blue4;
+  border: 1px solid $blue3;
 }
 
 body[fds] .td-data-table-cell .mat-button,
@@ -84,13 +80,6 @@ body[fds] .td-data-table-cell .mat-icon-button.badge[disabled] {
   opacity: 0.3;
 }
 
-body[fds] .td-data-table-column .fa-caret-up,
-body[fds] .td-data-table-column .fa-caret-down {
-  color: $blue-grey1;
-  font-size: 12px;
-  margin-bottom: 2px;
-}
-
 body[fds] td-paging-bar {
   color: $grey3;
 }
@@ -115,4 +104,25 @@ body[fds] div .td-data-table {
   border-bottom: 2px solid $grey7;
   border-right: 1px transparent;
   border-left: 1px transparent;
+  display: flex;
+}
+
+@mixin fds-tables-theme($theme) {
+  $primaryColor: map-get(map-get($theme, primary), 500);
+  $primaryColorHover: map-get(map-get($theme, primary), 100);
+  $accentColor: map-get(map-get($theme, accent), 500);
+  $accentColorHover: map-get(map-get($theme, accent), 100);
+
+  body[fds] {
+    .td-data-table-cell .mat-icon-button {
+      color: $accentColor;
+    }
+
+    .td-data-table-column .fa-caret-up,
+    .td-data-table-column .fa-caret-down {
+      color: $accentColor;
+      font-size: 12px;
+      margin-bottom: 2px;
+    }
+  }
 }
diff --git a/platform/core/theming/_all-theme.scss b/platform/core/theming/_all-theme.scss
index b3977f5..f19a91b 100644
--- a/platform/core/theming/_all-theme.scss
+++ b/platform/core/theming/_all-theme.scss
@@ -22,6 +22,7 @@
 @import '../common/styles/menus';
 @import '../common/styles/inputs';
 @import '../common/styles/checkboxes';
+@import '../common/styles/tables';
 
 // Create a theme.
 @mixin fds-theme($theme) {
@@ -35,4 +36,5 @@
   @include fds-menus-theme($theme);
   @include fds-input-element-theme($theme);
   @include fds-checkboxes-theme($theme);
+  @include fds-tables-theme($theme);
 }