From 7d34f144fde449290a27f10df1c9176907965515 Mon Sep 17 00:00:00 2001
From: Scott Aslan <scottyaslan@gmail.com>
Date: Tue, 13 Aug 2019 14:09:23 -0400
Subject: [PATCH] [NIFI-6547] update hover state, font colors, border, and line
 height of tab button toggle

---
 platform/core/common/styles/_buttonToggles.scss    | 14 ++++++++++++++
 webapp/components/flow-design-system/fds-demo.html |  4 +---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/platform/core/common/styles/_buttonToggles.scss b/platform/core/common/styles/_buttonToggles.scss
index b82157beb..8788acf8d 100644
--- a/platform/core/common/styles/_buttonToggles.scss
+++ b/platform/core/common/styles/_buttonToggles.scss
@@ -112,4 +112,18 @@
         color: $grey1;
         border: 1px solid $grey4;
     }
+
+    body[fds] .tab-toggle-group > .mat-button-toggle-checked.mat-button-toggle-appearance-standard {
+        color: rgba(0, 0, 0, 0.54);
+    }
+
+    body[fds] .tab-toggle-group > .mat-button-toggle-appearance-standard {
+        color: rgba(0, 0, 0, 0.38);
+        background: transparent;
+        border-left: 0;
+    }
+
+    body[fds] .tab-toggle-group > .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+        line-height: 38px;
+    }
 }
diff --git a/webapp/components/flow-design-system/fds-demo.html b/webapp/components/flow-design-system/fds-demo.html
index 11e12203b..d7179b4a2 100644
--- a/webapp/components/flow-design-system/fds-demo.html
+++ b/webapp/components/flow-design-system/fds-demo.html
@@ -270,14 +270,12 @@ <h3 class="md-title">Usage</h3>
                 </mat-button-toggle-group>
                 <div fxLayout="row" class="pad-top-md pad-bot-md"></div>
                 <mat-button-toggle-group name="fds-administration-perspective" fxLayout="row" class="tab-toggle-group">
-                    <mat-button-toggle value="general">
+                    <mat-button-toggle disabled value="general">
                         general
                     </mat-button-toggle>
-                    <div fxLayout="row" class="pad-left-md"></div>
                     <mat-button-toggle value="users">
                         Users
                     </mat-button-toggle>
-                    <div fxLayout="row" class="pad-left-md"></div>
                     <mat-button-toggle value="workflow">
                         Workflow
                     </mat-button-toggle>