You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by sc...@apache.org on 2019/07/18 14:27:50 UTC
[nifi-fds] branch master updated: NIFI-6450 - Update Table
component to use theme-defined color for highlight row
This is an automated email from the ASF dual-hosted git repository.
scottyaslan 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 355954d NIFI-6450 - Update Table component to use theme-defined color for highlight row
355954d is described below
commit 355954d8546aac7d5eb5580b47ed32d5cec2b7d5
Author: Rob Fellows <ro...@gmail.com>
AuthorDate: Thu Jul 18 10:21:36 2019 -0400
NIFI-6450 - Update Table component to use theme-defined color for highlight row
This closes #40
Signed-off-by: Scott Aslan <sc...@gmail.com>
---
platform/core/common/styles/_tables.scss | 189 +++++++++++++++----------------
1 file changed, 94 insertions(+), 95 deletions(-)
diff --git a/platform/core/common/styles/_tables.scss b/platform/core/common/styles/_tables.scss
index 66ef764..77dc5f1 100644
--- a/platform/core/common/styles/_tables.scss
+++ b/platform/core/common/styles/_tables.scss
@@ -16,113 +16,112 @@
*/
/* Tables */
+@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;
+ }
+ }
-body[fds] .td-data-table-cell {
- font-size: 13px;
- color: $grey2;
- padding: 0 28px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- height: 100%;
- line-height: 30px;
-}
-
-body[fds] .td-data-table-column {
- color: $grey3;
- font-weight: normal;
- font-size: 12px;
- height: 34px;
- line-height: 34px;
- padding: 0 28px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-body[fds] .td-data-table-row {
- height: 34px;
- border-top: 1px solid #fff;
- border-left: 1px solid #fff;
- border-right: 1px solid #fff;
- border-bottom: 1px solid $grey5;
-}
+ body[fds] .td-data-table-cell {
+ font-size: 13px;
+ color: $grey2;
+ padding: 0 28px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ height: 100%;
+ line-height: 30px;
+ }
-body[fds] .td-data-table-row.selected {
- background-color: $grey5;
- border: 1px solid $grey5;
-}
+ body[fds] .td-data-table-column {
+ color: $grey3;
+ font-weight: normal;
+ font-size: 12px;
+ height: 34px;
+ line-height: 34px;
+ padding: 0 28px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
-body[fds] .td-data-table-row:hover {
- background-color: $blue4;
- border: 1px solid $blue3;
-}
+ body[fds] .td-data-table-row {
+ height: 34px;
+ border-top: 1px solid #fff;
+ border-left: 1px solid #fff;
+ border-right: 1px solid #fff;
+ border-bottom: 1px solid $grey5;
+ }
-body[fds] .td-data-table-cell .mat-button,
-body[fds] .td-data-table-cell .mat-icon-button,
-body[fds] .td-data-table-cell .mat-raised-button {
- height: 24px;
- width: 24px;
- line-height: 0;
-
- &:disabled {
- color: $grey13;
- cursor: not-allowed;
- }
-}
+ body[fds] .td-data-table-row.selected {
+ background-color: $grey5;
+ border: 1px solid $grey5;
+ }
-body[fds] .td-data-table-cell .mat-icon-button.badge {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
-}
+ body[fds] .td-data-table-row:hover {
+ background-color: $accentColorHover;
+ border: 1px solid $accentColor;
+ }
-body[fds] .td-data-table-cell .mat-icon-button.badge[disabled] {
- opacity: 0.3;
-}
+ body[fds] .td-data-table-cell .mat-button,
+ body[fds] .td-data-table-cell .mat-icon-button,
+ body[fds] .td-data-table-cell .mat-raised-button {
+ height: 24px;
+ width: 24px;
+ line-height: 0;
+
+ &:disabled {
+ color: $grey13;
+ cursor: not-allowed;
+ }
+ }
-body[fds] td-paging-bar {
- color: $grey3;
-}
+ body[fds] .td-data-table-cell .mat-icon-button.badge {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
-body[fds] td-paging-bar mat-select .mat-select-value,
-body[fds] td-paging-bar mat-select .mat-select-arrow {
- color: $blue-grey1;
-}
+ body[fds] .td-data-table-cell .mat-icon-button.badge[disabled] {
+ opacity: 0.3;
+ }
-body[fds] .table-title {
- font-size: 20px;
- color: $grey1;
- min-width: 250px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 50%;
- margin-right: 10px;
-}
+ body[fds] td-paging-bar {
+ color: $grey3;
+ }
-body[fds] div .td-data-table {
- border-bottom: 2px solid $grey7;
- border-right: 1px transparent;
- border-left: 1px transparent;
- display: flex;
-}
+ body[fds] td-paging-bar mat-select .mat-select-value,
+ body[fds] td-paging-bar mat-select .mat-select-arrow {
+ color: $blue-grey1;
+ }
-@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;
+ body[fds] .table-title {
+ font-size: 20px;
+ color: $grey1;
+ min-width: 250px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 50%;
+ margin-right: 10px;
}
- .td-data-table-column .fa-caret-up,
- .td-data-table-column .fa-caret-down {
- color: $accentColor;
- font-size: 12px;
- margin-bottom: 2px;
+ body[fds] div .td-data-table {
+ border-bottom: 2px solid $grey7;
+ border-right: 1px transparent;
+ border-left: 1px transparent;
+ display: flex;
}
- }
}