Repository: nifi-registry Updated Branches: refs/heads/master 1b02b37cd -> e195632ce
[NIFIREG-100] create and leverage FDS SASS theming mixin This closes #101. Signed-off-by: Kevin Doran <kdo...@apache.org> Project: http://git-wip-us.apache.org/repos/asf/nifi-registry/repo Commit: http://git-wip-us.apache.org/repos/asf/nifi-registry/commit/e195632c Tree: http://git-wip-us.apache.org/repos/asf/nifi-registry/tree/e195632c Diff: http://git-wip-us.apache.org/repos/asf/nifi-registry/diff/e195632c Branch: refs/heads/master Commit: e195632ce0cfab366d8dd9a0511fb61a32415297 Parents: 1b02b37 Author: Scott Aslan <scottyas...@gmail.com> Authored: Wed Feb 14 15:44:46 2018 -0500 Committer: Kevin Doran <kdo...@apache.org> Committed: Mon Mar 5 18:21:10 2018 -0500 ---------------------------------------------------------------------- .../src/main/frontend/karma.conf.js | 2 +- .../platform/core/common/styles/_buttons.scss | 379 ++++++++++--------- .../core/common/styles/_expansionPanels.scss | 77 ++-- .../core/common/styles/_globalVars.scss | 18 +- .../platform/core/common/styles/_menus.scss | 194 +++++----- .../core/common/styles/fluid-design-system.scss | 22 -- .../main/platform/core/theming/_all-theme.scss | 36 ++ .../src/main/webapp/theming/nf-registry.scss | 24 ++ 8 files changed, 398 insertions(+), 354 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/e195632c/nifi-registry-web-ui/src/main/frontend/karma.conf.js ---------------------------------------------------------------------- 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 @@ module.exports = function (config) { 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: { http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/e195632c/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss ---------------------------------------------------------------------- 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; - -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[disabled] { - opacity: .6; - 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-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.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-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.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-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.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-warn { - border: 1px solid $errorColor; - background-color: $errorColor; - 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.mat-button-focus { - color: $buttonFontWarnColorSelected; - background-color: $errorColor; - 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-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.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; -} +@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.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-button-toggle-disabled .mat-button-toggle-label-content { + cursor: not-allowed; + } + + 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: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[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: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[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: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[disabled] { + color: $buttonFontRegularColorDisabled; + background-color: $buttonBgColorRegularDisabled; + border: 1px solid $buttonBorderColorRegularDisabled; + } + + 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 $warnColor; + } + + 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: $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: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[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 http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/e195632c/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss ---------------------------------------------------------------------- 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; -} - -body[fds] .td-expansion-panel-header-content { - height: 80px !important; - padding: 0px 30px !important; - border-bottom: 1px solid $grey7; -} - -body[fds] .td-expansion-content form { - padding: 15px 10px 20px 20px; -} - -body[fds] .md-subhead { - font-size: 18px; - color: $grey3; -} - -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:hover:not(.mat-disabled) { - background: $blue4; -} - -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; +@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:not(:last-of-type) .td-expanded { + margin-bottom: 0px; + } + + body[fds] .td-expansion-panel-header-content { + height: 80px !important; + padding: 0px 30px !important; + border-bottom: 1px solid $grey7; + } + + body[fds] .td-expansion-content form { + padding: 15px 10px 20px 20px; + } + + body[fds] .md-subhead { + font-size: 18px; + color: $grey3; + } + + 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:hover:not(.mat-disabled) { + background: $blue4; + } + + 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; + } } http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/e195632c/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss ---------------------------------------------------------------------- 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 @@ $grey2: #666666; $grey3: #999999; $grey4: #CCCCCC; $grey5: #EEEEEE; -$grey6: #F8F9F9; // or #FAFAFA +$grey6: #F8F9F9; $grey7: #DDDDDD; $grey8: #CFD3D7; $grey9: #b2b8c1; @@ -62,22 +60,10 @@ $rose1: #9E737D; $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 http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/e195632c/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss ---------------------------------------------------------------------- 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; -} - -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: #ffffff; - background-color: #808793; -} - -body[fds] .mat-menu-item[disabled] { - color: rgba(0, 0, 0, 0.38); - background-color: #ffffff; - 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: #ffffff; -} - -body[fds] .mat-menu-item:hover:not([disabled]) .fa { - 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] .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; -} - -.fds-primary-dropdown-button-menu .cdk-focused { - color: $buttonFontPrimaryColorSelected; - background-color: $buttonBgColorPrimarySelected; -} - -.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: #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; +@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; + } + + 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: #ffffff; + background-color: #808793; + } + + body[fds] .mat-menu-item[disabled] { + color: rgba(0, 0, 0, 0.38); + background-color: #ffffff; + 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: #ffffff; + } + + body[fds] .mat-menu-item:hover:not([disabled]) .fa { + 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] .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; + } + + 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: #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; + } } http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/e195632c/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss ---------------------------------------------------------------------- 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); http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/e195632c/nifi-registry-web-ui/src/main/platform/core/theming/_all-theme.scss ---------------------------------------------------------------------- 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); + +} http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/e195632c/nifi-registry-web-ui/src/main/webapp/theming/nf-registry.scss ---------------------------------------------------------------------- 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);