[NIFI-6547] update hover state, font colors, border, and line height of tab button toggle
This closes #51.
diff --git a/platform/core/common/styles/_buttonToggles.scss b/platform/core/common/styles/_buttonToggles.scss
index b82157b..8788acf 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 37e82df..3966ed7 100644
--- a/webapp/components/flow-design-system/fds-demo.html
+++ b/webapp/components/flow-design-system/fds-demo.html
@@ -270,14 +270,12 @@
</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>
