[NIFIREG-100] create and leverage FDS SASS theming mixin
This closes #101.
Signed-off-by: Kevin Doran <kdoran@apache.org>
diff --git a/nifi-registry-web-ui/src/main/frontend/karma.conf.js b/nifi-registry-web-ui/src/main/frontend/karma.conf.js
index 27a521d..ca61a89 100644
--- a/nifi-registry-web-ui/src/main/frontend/karma.conf.js
+++ b/nifi-registry-web-ui/src/main/frontend/karma.conf.js
@@ -140,7 +140,7 @@
exclude: [],
preprocessors: {
- 'webapp/**/!(*spec|*mock|*stub|*config|*extras|*fds-demo).js': 'coverage'
+ 'webapp/**/!(*spec|*mock|*stub|*config|*extras).js': 'coverage'
},
reporters: ['kjhtml', 'spec', 'coverage'],
coverageReporter: {
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss
index 8b316ea..a9c9627 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss
@@ -17,187 +17,198 @@
/* Buttons */
-$buttonFontColor: #FFFFFF;
-$buttonFontColorDisabled: #D1E8D1;
-$buttonBgColorPrimary: $primaryColor;
-$buttonBgColorPrimaryHover: $primaryColorHover;
-$buttonBgColorPrimaryDisabled: $primaryColor;
-$buttonBgColorPrimarySelected: $primaryColor;
-$buttonBgColorSecondary: #FFFFFF;
-$buttonBgColorSecondaryHover: $primaryColorHover;
-$buttonBgColorSecondarySelected: #FFFFFF;
-$buttonBgColorRegular: #FFFFFF;
-$buttonBgColorRegularHover: #808793;
-$buttonBgColorRegularDisabled: #808793;
-$buttonBgColorRegularSelected: #FFFFFF;
-$buttonBorderColorSecondary: $primaryColor;
-$buttonBorderColorSecondaryHover: $buttonBgColorSecondaryHover;
-$buttonBorderColorSecondaryDisabled: $buttonBgColorSecondaryHover;
-$buttonBorderColorSecondarySelected: $primaryColor;
-$buttonBorderColorRegular: #CFD3D7;
-$buttonBorderColorRegularHover: $buttonBgColorRegularHover;
-$buttonBorderColorRegularDisabled: $buttonBgColorRegularHover;
-$buttonBorderColorRegularSelected: #CFD3D7;
-$buttonFontPrimaryColor: $buttonFontColor;
-$buttonFontPrimaryColorHover: $buttonFontColor;
-$buttonFontPrimaryColorDisabled: $buttonFontColorDisabled;
-$buttonFontPrimaryColorSelected: $buttonFontColor;
-$buttonFontSecondaryColor: $primaryColorHover;
-$buttonFontSecondaryColorHover: $buttonFontColor;
-$buttonFontSecondaryColorDisabled: $buttonFontColorDisabled;
-$buttonFontSecondaryColorSelected: $primaryColorHover;
-$buttonFontRegularColor: $descriptionTextColor;
-$buttonFontRegularColorHover: $buttonFontColor;
-$buttonFontRegularColorDisabled: $buttonFontColorDisabled;
-$buttonFontRegularColorSelected: $bodyTextColor;
-$buttonFontWarnColor: $buttonFontColor;
-$buttonFontWarnColorHover: $buttonFontColor;
-$buttonFontWarnColorDisabled: $buttonFontColorDisabled;
-$buttonFontWarnColorSelected: $buttonFontColor;
-$buttonFontCriticalColor: $buttonFontColor;
-$buttonFontCriticalColorHover: $buttonFontColor;
-$buttonFontCriticalColorDisabled: $buttonFontColorDisabled;
-$buttonFontCriticalColorSelected: $buttonFontColor;
+@mixin fds-buttons-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);
+ $buttonFontColor: #FFFFFF;
+ $buttonFontColorDisabled: #D1E8D1;
+ $buttonBgColorPrimary: $primaryColor;
+ $buttonBgColorPrimaryHover: $primaryColorHover;
+ $buttonBgColorPrimaryDisabled: $primaryColor;
+ $buttonBgColorPrimarySelected: $primaryColor;
+ $buttonBgColorSecondary: #FFFFFF;
+ $buttonBgColorSecondaryHover: $primaryColorHover;
+ $buttonBgColorSecondarySelected: #FFFFFF;
+ $buttonBgColorRegular: #FFFFFF;
+ $buttonBgColorRegularHover: #808793;
+ $buttonBgColorRegularDisabled: #808793;
+ $buttonBgColorRegularSelected: #FFFFFF;
+ $buttonBorderColorSecondary: $primaryColor;
+ $buttonBorderColorSecondaryHover: $buttonBgColorSecondaryHover;
+ $buttonBorderColorSecondaryDisabled: $buttonBgColorSecondaryHover;
+ $buttonBorderColorSecondarySelected: $primaryColor;
+ $buttonBorderColorRegular: #CFD3D7;
+ $buttonBorderColorRegularHover: $buttonBgColorRegularHover;
+ $buttonBorderColorRegularDisabled: $buttonBgColorRegularHover;
+ $buttonBorderColorRegularSelected: #CFD3D7;
+ $buttonFontPrimaryColor: $buttonFontColor;
+ $buttonFontPrimaryColorHover: $buttonFontColor;
+ $buttonFontPrimaryColorDisabled: $buttonFontColorDisabled;
+ $buttonFontPrimaryColorSelected: $buttonFontColor;
+ $buttonFontSecondaryColor: $primaryColorHover;
+ $buttonFontSecondaryColorHover: $buttonFontColor;
+ $buttonFontSecondaryColorDisabled: $buttonFontColorDisabled;
+ $buttonFontSecondaryColorSelected: $primaryColorHover;
+ $buttonFontRegularColor: $descriptionTextColor;
+ $buttonFontRegularColorHover: $buttonFontColor;
+ $buttonFontRegularColorDisabled: $buttonFontColorDisabled;
+ $buttonFontRegularColorSelected: $bodyTextColor;
+ $buttonFontWarnColor: $buttonFontColor;
+ $buttonFontWarnColorHover: $buttonFontColor;
+ $buttonFontWarnColorDisabled: $buttonFontColorDisabled;
+ $buttonFontWarnColorSelected: $buttonFontColor;
+ $buttonFontCriticalColor: $buttonFontColor;
+ $buttonFontCriticalColorHover: $buttonFontColor;
+ $buttonFontCriticalColorDisabled: $buttonFontColorDisabled;
+ $buttonFontCriticalColorSelected: $buttonFontColor;
-body[fds] .mat-raised-button {
- height: 34px;
- font-family: $fontPrimary;
- font-weight: normal;
- font-size: 14px;
- text-transform: uppercase;
- line-height: normal;
- box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
-}
+ body[fds] .mat-raised-button {
+ height: 34px;
+ font-family: $fontPrimary;
+ font-weight: normal;
+ font-size: 14px;
+ text-transform: uppercase;
+ line-height: normal;
+ box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+ }
-body[fds] .mat-raised-button.cdk-focused:focus {
- box-shadow: 0px 0px 2px 0px rgba(19, 145, 193, 1);
-}
+ body[fds] .mat-raised-button.cdk-focused:focus {
+ box-shadow: 0px 0px 2px 0px rgba(19, 145, 193, 1);
+ }
-body[fds] .mat-raised-button[disabled] {
- opacity: .6;
- cursor: not-allowed;
-}
+ body[fds] .mat-raised-button[disabled] {
+ opacity: .6;
+ cursor: not-allowed;
+ }
-body[fds] .mat-button-toggle-disabled .mat-button-toggle-label-content {
- cursor: not-allowed;
-}
+ body[fds] .mat-button-toggle-disabled .mat-button-toggle-label-content {
+ cursor: not-allowed;
+ }
-body[fds] .mat-button-focus-overlay {
- background-color: transparent;
-}
+ body[fds] .mat-button-focus-overlay {
+ background-color: transparent;
+ }
-body[fds] .mat-raised-button.mat-fds-primary {
- border: 1px solid $buttonBgColorPrimary;
- background-color: $buttonBgColorPrimary;
- color: $buttonFontPrimaryColor;
-}
+ body[fds] .mat-raised-button.mat-fds-primary {
+ border: 1px solid $buttonBgColorPrimary;
+ background-color: $buttonBgColorPrimary;
+ color: $buttonFontPrimaryColor;
+ }
-body[fds] .mat-raised-button.mat-fds-primary:hover {
- background-color: $buttonBgColorPrimaryHover;
- color: $buttonFontPrimaryColorHover;
-}
+ body[fds] .mat-raised-button.mat-fds-primary:hover {
+ background-color: $buttonBgColorPrimaryHover;
+ color: $buttonFontPrimaryColorHover;
+ }
-body[fds] .mat-raised-button.mat-fds-primary.mat-button-focus {
- color: $buttonFontPrimaryColorSelected;
- background-color: $buttonBgColorPrimarySelected;
-}
+ body[fds] .mat-raised-button.mat-fds-primary.mat-button-focus {
+ color: $buttonFontPrimaryColorSelected;
+ background-color: $buttonBgColorPrimarySelected;
+ }
-body[fds] .mat-raised-button.mat-fds-primary[disabled] {
- color: $buttonFontPrimaryColorDisabled;
- background-color: $buttonBgColorPrimaryDisabled;
- color: $buttonFontPrimaryColorDisabled;
-}
+ body[fds] .mat-raised-button.mat-fds-primary[disabled] {
+ color: $buttonFontPrimaryColorDisabled;
+ background-color: $buttonBgColorPrimaryDisabled;
+ color: $buttonFontPrimaryColorDisabled;
+ }
-body[fds] .mat-raised-button.mat-fds-secondary {
- color: $buttonFontSecondaryColor;
- border: 1px solid $buttonBorderColorSecondary;
-}
+ body[fds] .mat-raised-button.mat-fds-secondary {
+ color: $buttonFontSecondaryColor;
+ border: 1px solid $buttonBorderColorSecondary;
+ }
-body[fds] .mat-raised-button.mat-fds-secondary:hover:not([disabled]) {
- color: $buttonFontSecondaryColorHover;
- background-color: $buttonBgColorSecondaryHover;
- border: 1px solid $buttonBorderColorSecondaryHover;
-}
+ body[fds] .mat-raised-button.mat-fds-secondary:hover:not([disabled]) {
+ color: $buttonFontSecondaryColorHover;
+ background-color: $buttonBgColorSecondaryHover;
+ border: 1px solid $buttonBorderColorSecondaryHover;
+ }
-body[fds] .mat-raised-button.mat-fds-secondary.mat-button-focus {
- color: $buttonFontSecondaryColorSelected;
- background-color: $buttonBgColorSecondarySelected;
- border: 1px solid $buttonBorderColorSecondarySelected;
-}
+ body[fds] .mat-raised-button.mat-fds-secondary.mat-button-focus {
+ color: $buttonFontSecondaryColorSelected;
+ background-color: $buttonBgColorSecondarySelected;
+ border: 1px solid $buttonBorderColorSecondarySelected;
+ }
-body[fds] .mat-raised-button.mat-fds-secondary[disabled] {
- color: $buttonFontPrimaryColorDisabled;
- background-color: $buttonBgColorPrimaryDisabled;
-}
+ body[fds] .mat-raised-button.mat-fds-secondary[disabled] {
+ color: $buttonFontPrimaryColorDisabled;
+ background-color: $buttonBgColorPrimaryDisabled;
+ }
-body[fds] .mat-raised-button.mat-fds-regular {
- color: $buttonFontRegularColor;
- background-color: $buttonBgColorRegular;
- border: 1px solid $buttonBorderColorRegular;
-}
+ body[fds] .mat-raised-button.mat-fds-regular {
+ color: $buttonFontRegularColor;
+ background-color: $buttonBgColorRegular;
+ border: 1px solid $buttonBorderColorRegular;
+ }
-body[fds] .mat-raised-button.mat-fds-regular:hover {
- color: $buttonFontRegularColorHover;
- background-color: $buttonBgColorRegularHover;
- border: 1px solid $buttonBorderColorRegularHover;
-}
+ body[fds] .mat-raised-button.mat-fds-regular:hover {
+ color: $buttonFontRegularColorHover;
+ background-color: $buttonBgColorRegularHover;
+ border: 1px solid $buttonBorderColorRegularHover;
+ }
-body[fds] .mat-raised-button.mat-fds-regular.mat-button-focus {
- color: $buttonFontRegularColorSelected;
- background-color: $buttonBgColorRegularSelected;
- border: 1px solid $buttonBorderColorRegularSelected;
-}
+ body[fds] .mat-raised-button.mat-fds-regular.mat-button-focus {
+ color: $buttonFontRegularColorSelected;
+ background-color: $buttonBgColorRegularSelected;
+ border: 1px solid $buttonBorderColorRegularSelected;
+ }
-body[fds] .mat-raised-button.mat-fds-regular[disabled] {
- color: $buttonFontRegularColorDisabled;
- background-color: $buttonBgColorRegularDisabled;
- border: 1px solid $buttonBorderColorRegularDisabled;
-}
+ body[fds] .mat-raised-button.mat-fds-regular[disabled] {
+ color: $buttonFontRegularColorDisabled;
+ background-color: $buttonBgColorRegularDisabled;
+ border: 1px solid $buttonBorderColorRegularDisabled;
+ }
-body[fds] .mat-raised-button.mat-fds-warn {
- border: 1px solid $errorColor;
- background-color: $errorColor;
- color: $buttonFontWarnColor;
-}
+ body[fds] .mat-raised-button.mat-fds-warn {
+ border: 1px solid $warnColor;
+ background-color: $warnColor;
+ color: $buttonFontWarnColor;
+ }
-body[fds] .mat-raised-button.mat-fds-warn:hover {
- color: $buttonFontWarnColorHover;
- background-color: $red2;
- border: 1px solid $errorColor;
-}
+ body[fds] .mat-raised-button.mat-fds-warn:hover {
+ color: $buttonFontWarnColorHover;
+ background-color: $red2;
+ border: 1px solid $warnColor;
+ }
-body[fds] .mat-raised-button.mat-fds-warn.mat-button-focus {
- color: $buttonFontWarnColorSelected;
- background-color: $errorColor;
- border: 1px solid $buttonBorderColorRegularSelected;
-}
+ body[fds] .mat-raised-button.mat-fds-warn.mat-button-focus {
+ color: $buttonFontWarnColorSelected;
+ background-color: $warnColor;
+ border: 1px solid $buttonBorderColorRegularSelected;
+ }
-body[fds] .mat-raised-button.mat-fds-warn[disabled] {
- color: $buttonFontWarnColorDisabled;
- background-color: $errorColor;
- border: 1px solid $errorColor;
-}
+ body[fds] .mat-raised-button.mat-fds-warn[disabled] {
+ color: $buttonFontWarnColorDisabled;
+ background-color: $warnColor;
+ border: 1px solid $warnColor;
+ }
-body[fds] .mat-raised-button.mat-fds-critical {
- color: $buttonFontCriticalColor;
- background-color: $orange1;
- border: 1px solid $orange1;
-}
+ body[fds] .mat-raised-button.mat-fds-critical {
+ color: $buttonFontCriticalColor;
+ background-color: $orange1;
+ border: 1px solid $orange1;
+ }
-body[fds] .mat-raised-button.mat-fds-critical:hover {
- color: $buttonFontCriticalColorHover;
- background-color: $orange2;
- border: 1px solid $orange2;
-}
+ body[fds] .mat-raised-button.mat-fds-critical:hover {
+ color: $buttonFontCriticalColorHover;
+ background-color: $orange2;
+ border: 1px solid $orange2;
+ }
-body[fds] .mat-raised-button.mat-fds-critical.mat-button-focus {
- color: $buttonFontCriticalColorSelected;
- background-color: $orange2;
- border: 1px solid $buttonBorderColorRegularSelected;
-}
+ body[fds] .mat-raised-button.mat-fds-critical.mat-button-focus {
+ color: $buttonFontCriticalColorSelected;
+ background-color: $orange2;
+ border: 1px solid $buttonBorderColorRegularSelected;
+ }
-body[fds] .mat-raised-button.mat-fds-critical[disabled] {
- color: $buttonFontCriticalColorDisabled;
- background-color: $orange1;
- border: 1px solid $orange1;
-}
+ body[fds] .mat-raised-button.mat-fds-critical[disabled] {
+ color: $buttonFontCriticalColorDisabled;
+ background-color: $orange1;
+ border: 1px solid $orange1;
+ }
+
+ .fds-primary-dropdown-button-menu .cdk-focused {
+ color: $buttonFontPrimaryColorSelected;
+ background-color: $buttonBgColorPrimarySelected;
+ }
+}
\ No newline at end of file
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss
index 7b06102..fdf9d4f 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss
@@ -17,39 +17,46 @@
/* Expansion Panels */
-body[fds] td-expansion-panel:not(:last-of-type) .td-expanded {
- margin-bottom: 0px;
-}
+@mixin fds-expansion-panels-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-expansion-panel-header-content {
- height: 80px !important;
- padding: 0px 30px !important;
- border-bottom: 1px solid $grey7;
-}
+ body[fds] td-expansion-panel:not(:last-of-type) .td-expanded {
+ margin-bottom: 0px;
+ }
-body[fds] .td-expansion-content form {
- padding: 15px 10px 20px 20px;
-}
+ body[fds] .td-expansion-panel-header-content {
+ height: 80px !important;
+ padding: 0px 30px !important;
+ border-bottom: 1px solid $grey7;
+ }
-body[fds] .md-subhead {
- font-size: 18px;
- color: $grey3;
-}
+ body[fds] .td-expansion-content form {
+ padding: 15px 10px 20px 20px;
+ }
-body[fds] td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content mat-icon.td-expand-icon {
- font-size: 28px;
- color: $blue-grey1;
- font-weight: bold;
-}
+ body[fds] .md-subhead {
+ font-size: 18px;
+ color: $grey3;
+ }
-body[fds] td-expansion-panel .td-expansion-panel-header:hover:not(.mat-disabled) {
- background: $blue4;
-}
+ body[fds] td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content mat-icon.td-expand-icon {
+ font-size: 28px;
+ color: $blue-grey1;
+ font-weight: bold;
+ }
-body[fds] td-expansion-panel .td-expansion-panel-header:focus {
- background: #FFFFFF;
-}
+ body[fds] td-expansion-panel .td-expansion-panel-header:hover:not(.mat-disabled) {
+ background: $blue4;
+ }
-body[fds] td-expansion-panel .td-expansion-panel-header:focus .td-expansion-panel-header-content {
- border-bottom: 1px solid $primaryColor;
+ body[fds] td-expansion-panel .td-expansion-panel-header:focus {
+ background: #FFFFFF;
+ }
+
+ body[fds] td-expansion-panel .td-expansion-panel-header:focus .td-expansion-panel-header-content {
+ border-bottom: 1px solid $primaryColor;
+ }
}
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss
index 86df2ef..aede0a3 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss
@@ -15,8 +15,6 @@
* limitations under the License.
*/
-/* Begin Global Variables */
-
/* Text */
$fontPrimary: "Roboto",
@@ -35,7 +33,7 @@
$grey3: #999999;
$grey4: #CCCCCC;
$grey5: #EEEEEE;
-$grey6: #F8F9F9; // or #FAFAFA
+$grey6: #F8F9F9;
$grey7: #DDDDDD;
$grey8: #CFD3D7;
$grey9: #b2b8c1;
@@ -62,22 +60,10 @@
$rose2: #915D69;
$blue-grey1: #6B8791;
$blue-grey2: #B2C1C6;
-
-/* Set FDS theme */
-
-$primaryColor: $rose1; //$green2
-$primaryColorHover: $rose2; //$green3
-$secondaryColor: $rose1; //$green1
-$accentColor: $blue7; //$orange1
-$accentColorHover: $grey4; //$orange2
-$warnColor: $red1;
-$errorColor: $warnColor;
-$warningColor: $accentColor;
$bodyTextColor: $grey1;
$pageHeaderTextColor: $grey1;
$subHeaderTextColor: $grey2;
$descriptionTextColor: $grey2;
$linkColor: $blue-grey1;
$linkColorDisabled: $grey1;
-
-/*End Global Variables */
+$warnColor: $red1;
\ No newline at end of file
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss
index fdd9194..3f5aadf 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss
@@ -17,100 +17,102 @@
/* Menus */
-body[fds] .mat-menu-panel {
- border-radius: 2px;
-}
+@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-item {
- font-size: 14px;
- color: $bodyTextColor;
- min-width: 200px;
- text-transform: none;
- height: 24px;
- line-height: 24px;
-}
+ body[fds] .mat-menu-panel {
+ border-radius: 2px;
+ }
-body[fds] .regular-button-menu .mat-menu-item:hover {
- color: #ffffff;
- background-color: #808793;
-}
+ body[fds] .mat-menu-item {
+ font-size: 14px;
+ color: $bodyTextColor;
+ min-width: 200px;
+ text-transform: none;
+ height: 24px;
+ line-height: 24px;
+ }
-body[fds] .mat-menu-item[disabled] {
- color: rgba(0, 0, 0, 0.38);
- background-color: #ffffff;
- cursor: not-allowed;
-}
+ body[fds] .regular-button-menu .mat-menu-item:hover {
+ color: #ffffff;
+ background-color: #808793;
+ }
-body[fds] .mat-menu-item .mat-icon {
- font-size: 14px;
-}
+ body[fds] .mat-menu-item[disabled] {
+ color: rgba(0, 0, 0, 0.38);
+ background-color: #ffffff;
+ cursor: not-allowed;
+ }
-body[fds] .mat-menu-item .fa {
- font-size: 14px;
- width: 1em;
- height: 1em;
-}
+ body[fds] .mat-menu-item .mat-icon {
+ font-size: 14px;
+ }
-body[fds] .mat-menu-item[disabled] .mat-icon {
- color: rgba(0, 0, 0, 0.38);
-}
+ body[fds] .mat-menu-item .fa {
+ font-size: 14px;
+ width: 1em;
+ height: 1em;
+ }
-body[fds] .mat-menu-item[disabled] .fa {
- color: rgba(0, 0, 0, 0.38);
-}
+ body[fds] .mat-menu-item[disabled] .mat-icon {
+ color: rgba(0, 0, 0, 0.38);
+ }
-body[fds] .mat-menu-item:hover:not([disabled]) .mat-icon {
- color: #ffffff;
-}
+ body[fds] .mat-menu-item[disabled] .fa {
+ color: rgba(0, 0, 0, 0.38);
+ }
-body[fds] .mat-menu-item:hover:not([disabled]) .fa {
- color: #ffffff;
-}
+ body[fds] .mat-menu-item:hover:not([disabled]) .mat-icon {
+ color: #ffffff;
+ }
-body[fds] .mat-menu-item:hover:not([disabled]),
-body[fds] .mat-menu-item:focus:not([disabled]) {
- color: #ffffff;
- background-color: #808793;
-}
+ body[fds] .mat-menu-item:hover:not([disabled]) .fa {
+ color: #ffffff;
+ }
-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: #FFFFFF;
- background-color: $primaryColorHover;
-}
+ body[fds] .mat-menu-item:hover:not([disabled]),
+ body[fds] .mat-menu-item:focus:not([disabled]) {
+ color: #ffffff;
+ background-color: #808793;
+ }
-.fds-primary-dropdown-button-menu .cdk-focused {
- color: $buttonFontPrimaryColorSelected;
- background-color: $buttonBgColorPrimarySelected;
-}
+ 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: #FFFFFF;
+ background-color: $primaryColorHover;
+ }
-.mat-raised-button .mat-button-wrapper i {
- padding-left: 10px;
-}
+ .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-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] .mat-autocomplete-panel.mat-autocomplete-panel-below {
+ top: 0;
+ }
-body[fds] .regular-button-menu .mat-option:hover {
- color: #ffffff;
- background-color: #808793;
-}
+ body[fds] .regular-button-menu .mat-option:hover {
+ color: #ffffff;
+ background-color: #808793;
+ }
-body[fds] .mat-option:hover:not([disabled]),
-body[fds] .mat-option:focus:not([disabled]) {
- color: #ffffff;
- background-color: #808793;
-}
+ body[fds] .mat-option:hover:not([disabled]),
+ body[fds] .mat-option:focus:not([disabled]) {
+ color: #ffffff;
+ background-color: #808793;
+ }
-body[fds] .mat-select-underline {
- display: none;
+ body[fds] .mat-select-underline {
+ display: none;
+ }
}
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss
index 7075f92..b04cb46 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss
@@ -15,12 +15,9 @@
* limitations under the License.
*/
-@import '../../../..//node_modules/@angular/material/theming';
-@import '../../../../node_modules/@covalent/core/theming/all-theme';
@import 'globalVars';
@import 'basicElements';
@import 'helperClasses';
-@import 'buttons';
@import 'buttonToggles';
@import 'checkboxes';
@import 'radios';
@@ -33,25 +30,6 @@
@import 'sideNav';
@import 'stepper';
@import 'tooltips';
-@import 'expansionPanels';
-@import 'menus';
@import 'tables';
@import '../../dialogs/fds-dialog-component';
@import '../../snackbars/coaster/coaster.component';
-// Include the base styles for Angular Material core. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-@include mat-core;
-// Define the palettes
-$fds-base-palette: (50: #89df79, 100: $primaryColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $primaryColor, 600: $primaryColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
-$fds-accent-palette: (50: #89df79, 100: $accentColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $accentColor, 600: $accentColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
-$fds-warn-palette: (50: #81410f, 100: #D14A50, 200: #af5814, 300: #c66317, 400: #dd6f19, 500: $warnColor, 600: $warnColor, 700: #eea66e, 800: #f1b485, 900: #f4c29b, A100: #ec9857, A200: #89df79, A400: #89df79, A700: #f6d0b2, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
-$fds-primary: mat-palette($fds-base-palette, 500, 100, 500);
-$fds-accent: mat-palette($fds-accent-palette, 500, 100, 500);
-$fds-warn: mat-palette($fds-warn-palette, 500, 100, 500);
-// Optionally specify a default, lighter, and darker hue.
-$fds-theme: mat-light-theme($fds-primary, $fds-accent, $fds-warn);
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include angular-material-theme($fds-theme);
-@include covalent-theme($fds-theme);
diff --git a/nifi-registry-web-ui/src/main/platform/core/theming/_all-theme.scss b/nifi-registry-web-ui/src/main/platform/core/theming/_all-theme.scss
new file mode 100644
index 0000000..747ab8b
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/theming/_all-theme.scss
@@ -0,0 +1,36 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements. See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import '../../../node_modules/@angular/material/theming';
+@import '../../../node_modules/@covalent/core/theming/all-theme';
+@import '../common/styles/buttons';
+@import '../common/styles/expansionPanels';
+@import '../common/styles/menus';
+
+// Create a theme.
+@mixin fds-theme($theme) {
+
+ // Include theme styles for core and each component used in your app.
+ // Alternatively, you can import and @include the theme mixins for each component
+ // that you are using.
+ @include angular-material-theme($theme);
+ @include covalent-theme($theme);
+ @include fds-buttons-theme($theme);
+ @include fds-expansion-panels-theme($theme);
+ @include fds-menus-theme($theme);
+
+}
diff --git a/nifi-registry-web-ui/src/main/webapp/theming/nf-registry.scss b/nifi-registry-web-ui/src/main/webapp/theming/nf-registry.scss
index 1c0afed..0d70b20 100644
--- a/nifi-registry-web-ui/src/main/webapp/theming/nf-registry.scss
+++ b/nifi-registry-web-ui/src/main/webapp/theming/nf-registry.scss
@@ -20,9 +20,33 @@
* <link href='/stylesheets/nifi-flow-registry.css' media='screen, projection' rel='stylesheet' type='text/css' /> */
@import '../../platform/core/common/styles/globalVars';
+@import '../../platform/core/theming/all-theme';
@import 'structureElements';
@import 'helperClasses';
@import 'components/administration/structureElements';
@import 'components/administration/users/structureElements';
@import 'components/administration/workflow/structureElements';
@import 'components/explorer/grid-list/structureElements';
+
+$primaryColor: $rose1; //$green2
+$primaryColorHover: $rose2; //$green3
+$accentColor: $blue7; //$orange1
+$accentColorHover: $grey4; //$orange2
+
+// Include the base styles for Angular Material core. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+@include mat-core;
+
+// Define the palettes
+$fds-base-palette: (50: #89df79, 100: $primaryColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $primaryColor, 600: $primaryColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
+$fds-accent-palette: (50: #89df79, 100: $accentColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $accentColor, 600: $accentColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
+$fds-warn-palette: (50: #81410f, 100: #D14A50, 200: #af5814, 300: #c66317, 400: #dd6f19, 500: $warnColor, 600: $warnColor, 700: #eea66e, 800: #f1b485, 900: #f4c29b, A100: #ec9857, A200: #89df79, A400: #89df79, A700: #f6d0b2, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
+$fds-primary: mat-palette($fds-base-palette, 500, 100, 500);
+$fds-accent: mat-palette($fds-accent-palette, 500, 100, 500);
+$fds-warn: mat-palette($fds-warn-palette, 500, 100, 500);
+
+// Define the theme (Optionally specify a default, lighter, and darker hue.)
+$fds-theme: mat-light-theme($fds-primary, $fds-accent, $fds-warn);
+
+// FDS theme mixin
+@include fds-theme($fds-theme);
