You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by mc...@apache.org on 2019/07/22 13:53:47 UTC
[nifi-fds] 05/06: [NIFI-6459[ Drop down menu updates
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
commit 8b9dea8388f0557f005a6d82529393cfb2cf3dc2
Author: Scott Aslan <sc...@gmail.com>
AuthorDate: Fri Jul 19 13:45:02 2019 -0400
[NIFI-6459[ Drop down menu updates
---
platform/core/common/styles/_menus.scss | 197 +++++++++++----------
platform/core/common/styles/_tables.scss | 1 -
webapp/components/flow-design-system/fds-demo.html | 36 ++--
3 files changed, 117 insertions(+), 117 deletions(-)
diff --git a/platform/core/common/styles/_menus.scss b/platform/core/common/styles/_menus.scss
index 7c9dc57..43d8637 100644
--- a/platform/core/common/styles/_menus.scss
+++ b/platform/core/common/styles/_menus.scss
@@ -18,102 +18,103 @@
/* Menus */
@mixin fds-menus-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] .mat-menu-panel {
- border-radius: 2px;
- max-width: unset;
- }
-
- body[fds] .mat-menu-item {
- font-size: 14px;
- color: $bodyTextColor;
- min-width: 200px;
- text-transform: none;
- height: 24px;
- line-height: 24px;
- }
-
- body[fds] .regular-button-menu .mat-menu-item:hover {
- color: #fff;
- background-color: #808793;
- }
-
- body[fds] .mat-menu-item[disabled] {
- color: rgba(0, 0, 0, 0.38);
- background-color: #fff;
- cursor: not-allowed;
- }
-
- body[fds] .mat-menu-item .mat-icon {
- font-size: 14px;
- }
-
- body[fds] .mat-menu-item .fa {
- font-size: 14px;
- width: 1em;
- height: 1em;
- }
-
- body[fds] .mat-menu-item[disabled] .mat-icon {
- color: rgba(0, 0, 0, 0.38);
- }
-
- body[fds] .mat-menu-item[disabled] .fa {
- color: rgba(0, 0, 0, 0.38);
- }
-
- body[fds] .mat-menu-item:hover:not([disabled]) .mat-icon {
- color: #fff;
- }
-
- body[fds] .mat-menu-item:hover:not([disabled]) .fa {
- color: #fff;
- }
-
- body[fds] .mat-menu-item:hover:not([disabled]),
- body[fds] .mat-menu-item:focus:not([disabled]) {
- color: #fff;
- background-color: #808793;
- }
-
- body[fds] .fds-primary-dropdown-button-menu .mat-menu-item:hover:not([disabled]),
- body[fds] .fds-primary-dropdown-button-menu .mat-menu-item:focus:not([disabled]) {
- color: #fff;
- background-color: $primaryColorHover;
- }
-
- .mat-raised-button .mat-button-wrapper i {
- padding-left: 10px;
- }
-
- body[fds] .mat-option {
- font-size: 14px;
- color: $bodyTextColor;
- text-transform: none;
- height: 24px;
- line-height: 24px;
- }
-
- body[fds] .mat-autocomplete-panel.mat-autocomplete-panel-below {
- top: 0;
- }
-
- body[fds] .regular-button-menu .mat-option:hover {
- color: #fff;
- background-color: #808793;
- }
-
- body[fds] .mat-option:hover:not([disabled]),
- body[fds] .mat-option:focus:not([disabled]) {
- color: #fff;
- background-color: #808793;
- }
-
- body[fds] .mat-select-underline {
- display: none;
- }
+ $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] .mat-menu-panel {
+ border-radius: 2px;
+ max-width: unset;
+ }
+
+ body[fds] .mat-menu-item {
+ font-size: 14px;
+ color: $bodyTextColor;
+ min-width: 200px;
+ text-transform: none;
+ height: 24px;
+ line-height: 24px;
+ }
+
+ body[fds] .regular-button-menu .mat-menu-item:hover {
+ color: #fff;
+ background-color: #808793;
+ }
+
+ body[fds] .mat-menu-item[disabled] {
+ color: rgba(0, 0, 0, 0.38);
+ background-color: #fff;
+ cursor: not-allowed;
+ }
+
+ body[fds] .mat-menu-item .mat-icon {
+ font-size: 14px;
+ }
+
+ body[fds] .mat-menu-item .fa {
+ font-size: 14px;
+ width: 1em;
+ height: 1em;
+ }
+
+ body[fds] .mat-menu-item[disabled] .mat-icon {
+ color: rgba(0, 0, 0, 0.38);
+ }
+
+ body[fds] .mat-menu-item[disabled] .fa {
+ color: rgba(0, 0, 0, 0.38);
+ }
+
+ body[fds] .mat-menu-item:hover:not([disabled]) .mat-icon {
+ color: #fff;
+ }
+
+ body[fds] .mat-menu-item:hover:not([disabled]) .fa {
+ color: #fff;
+ }
+
+ body[fds] .mat-menu-item:hover:not([disabled]),
+ body[fds] .mat-menu-item:focus:not([disabled]) {
+ color: #fff;
+ background-color: #808793;
+ }
+
+ body[fds] .fds-primary-dropdown-button-menu .mat-menu-item:hover:not([disabled]),
+ body[fds] .fds-primary-dropdown-button-menu .mat-menu-item:focus:not([disabled]) {
+ color: #fff;
+ background-color: $primaryColorHover;
+ }
+
+ .mat-raised-button .mat-button-wrapper i {
+ padding-left: 10px;
+ margin-top: -3px;
+ }
+
+ body[fds] .mat-option {
+ font-size: 14px;
+ color: $bodyTextColor;
+ text-transform: none;
+ height: 24px;
+ line-height: 24px;
+ }
+
+ body[fds] .mat-autocomplete-panel.mat-autocomplete-panel-below {
+ top: 0;
+ }
+
+ body[fds] .regular-button-menu .mat-option:hover {
+ color: #fff;
+ background-color: #808793;
+ }
+
+ body[fds] .mat-option:hover:not([disabled]),
+ body[fds] .mat-option:focus:not([disabled]) {
+ color: #fff;
+ background-color: #808793;
+ }
+
+ body[fds] .mat-select-underline {
+ display: none;
+ }
}
diff --git a/platform/core/common/styles/_tables.scss b/platform/core/common/styles/_tables.scss
index 77dc5f1..42914ed 100644
--- a/platform/core/common/styles/_tables.scss
+++ b/platform/core/common/styles/_tables.scss
@@ -31,7 +31,6 @@
.td-data-table-column .fa-caret-down {
color: $accentColor;
font-size: 12px;
- margin-bottom: 2px;
}
}
diff --git a/webapp/components/flow-design-system/fds-demo.html b/webapp/components/flow-design-system/fds-demo.html
index 2a6d5db..11e1220 100644
--- a/webapp/components/flow-design-system/fds-demo.html
+++ b/webapp/components/flow-design-system/fds-demo.html
@@ -2591,15 +2591,6 @@ limitations under the License.
<button mat-menu-item> Help </button>
<button mat-menu-item disabled> Sign Out </button>
</mat-menu>
- <button color="fds-regular" mat-raised-button [matMenuTriggerFor]="posXMenu">
- Before<i class="fa fa-caret-down" aria-hidden="true"></i>
- </button>
- <mat-menu xPosition="before" #posXMenu="matMenu">
- <button mat-menu-item> Refresh </button>
- <button mat-menu-item> Settings </button>
- <button mat-menu-item> Help </button>
- <button mat-menu-item disabled> Sign Out </button>
- </mat-menu>
<button color="fds-regular" mat-raised-button [matMenuTriggerFor]="aboveMenu">
Above<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
@@ -2637,6 +2628,15 @@ limitations under the License.
<span>Option 2</span>
</button>
</mat-menu>
+ <button color="fds-regular" mat-raised-button [matMenuTriggerFor]="posXMenu">
+ Before<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu xPosition="before" #posXMenu="matMenu">
+ <button mat-menu-item> Refresh </button>
+ <button mat-menu-item> Settings </button>
+ <button mat-menu-item> Help </button>
+ <button mat-menu-item disabled> Sign Out </button>
+ </mat-menu>
<h3 class="md-title">Usage</h3>
<p>HTML:</p>
<pre lang="html">
@@ -2650,15 +2650,6 @@ limitations under the License.
<button mat-menu-item> Help </button>
<button mat-menu-item disabled> Sign Out </button>
</mat-menu>
- <button color="fds-regular" mat-raised-button [matMenuTriggerFor]="posXMenu">
- Before<i class="fa fa-caret-down" aria-hidden="true"></i>
- </button>
- <mat-menu xPosition="before" #posXMenu="matMenu">
- <button mat-menu-item> Refresh </button>
- <button mat-menu-item> Settings </button>
- <button mat-menu-item> Help </button>
- <button mat-menu-item disabled> Sign Out </button>
- </mat-menu>
<button color="fds-regular" mat-raised-button [matMenuTriggerFor]="aboveMenu">
Above<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
@@ -2696,6 +2687,15 @@ limitations under the License.
<span>Option 2</span>
</button>
</mat-menu>
+ <button color="fds-regular" mat-raised-button [matMenuTriggerFor]="posXMenu">
+ Before<i class="fa fa-caret-down" aria-hidden="true"></i>
+ </button>
+ <mat-menu xPosition="before" #posXMenu="matMenu">
+ <button mat-menu-item> Refresh </button>
+ <button mat-menu-item> Settings </button>
+ <button mat-menu-item> Help </button>
+ <button mat-menu-item disabled> Sign Out </button>
+ </mat-menu>
]]>
</pre>
</mat-card-content>