diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss index 8e174a81124b..8205c29d22f6 100644 --- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss @@ -19,8 +19,7 @@ @use '@angular/material' as mat; @mixin styles() { - /* other classes and styles */ - + /* Nifi classes and styles */ html, body { height: 100%; @@ -37,11 +36,6 @@ text-underline-offset: 3px; } - .mat-mdc-form-field-infix { - min-width: 180px !important; - width: 180px !important; - } - .tooltip { max-height: 70vh; max-width: 500px; @@ -99,15 +93,6 @@ cursor: pointer; } - .copy-button:hover { - cursor: pointer; - } - - .dialog-tab-content, - .dialog-content { - height: 50vh; - } - .flex-2 { display: flex; flex: 2; @@ -125,341 +110,20 @@ transform: rotate(-45deg); } - /* overriding 3rd party styles */ - - .mat-mdc-dialog-actions { - border: none !important; - } - - .mat-tree { - display: inline !important; - background-color: unset !important; - } - - .mat-mdc-card-header-text { - width: 100%; - } - - // center input text in form fields - .mdc-text-field--outlined .mat-mdc-form-field-infix { - line-height: 24px; - } - - .mat-expansion-panel-body { - overflow-y: auto; - } - - .mat-expansion-panel-header.mat-expanded { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - - .mat-content.mat-content-hide-toggle { - margin-right: 0 !important; - height: 48px; - } - - .mat-mdc-menu-panel { - max-width: 420px; - - .fa { - width: 14px; - height: 14px; - text-align: center; - } - - .icon { - display: inline-block; - width: 14px; - text-align: center; - } - } - - .cdk-drag-disabled { - cursor: not-allowed !important; - } - - .cdk-drag-placeholder { - opacity: 0; - } - - .cdk-drop-list-dragging { - cursor: grabbing; - } - - .cdk-drag:hover { - cursor: grab; - } - - .cdk-list { - min-height: 34px; - border-radius: 4px; - overflow: hidden; - display: block; - user-select: none; - } - - span.grip { - width: 12px; - height: 36px; - display: block; - line-height: 6px; - letter-spacing: 1px; - } - - .cdk-drag:hover { - span.grip::after { - content: '.. .. .. .. ..'; - } - } + /* end Nifi classes and styles */ - .cdk-drag-disabled { - font-style: italic; - } - - .cdk-drag:hover { - span.grip::after { - content: '.. .. .. .. ..'; - } - } - - .mdc-notched-outline__notch { - border-right: none; - } + /* overriding 3rd party styles */ .CodeMirror-hints { z-index: 1000 !important; overflow-y: scroll !important; } - .mat-mdc-tab-header { - user-select: none; - } - - .mat-mdc-icon-button { - &.mat-mdc-button-base.mdc-icon-button { - padding: 0; - } - } - - mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button { - padding: 11px; //center the mat-icon-button inside the date picker form field - } - - .mat-mdc-paginator { - background-color: unset !important; - } - - .mdc-dialog__content { - font-size: 14px !important; - } - - .mat-mdc-menu-content { - height: 100%; - } - - .mat-mdc-menu-content .mat-mdc-menu-item { - min-height: 2.25rem; - } - - .mat-typography.text-base { - font-family: var(--mat-sys-body-medium-font); - line-height: var(--mat-sys-body-medium-line-height); - font-size: var(--mat-sys-body-medium-size); - font-weight: var(--mat-sys-body-medium-weight); - letter-spacing: normal; - - h2 { - margin: unset; - line-height: 28px; - font-size: 18px; - font-weight: 700; - } - - h3 { - margin: 0 0 16px; - line-height: 28px; - font-size: 20px; - font-weight: 700; - } - - h4 { - margin: unset; - line-height: 20px; - font-size: 14px; - font-weight: 400; - } - - a { - letter-spacing: normal; - } - - .mdc-text-field--outlined .mdc-floating-label { - font-size: var(--mat-sys-body-medium-size); - letter-spacing: normal; - line-height: normal; - } - - .mat-mdc-select { - font-size: var(--mat-sys-body-medium-size); - letter-spacing: normal; - line-height: normal; - } - - .mat-mdc-option { - font-size: var(--mat-sys-body-medium-size); - letter-spacing: normal; - line-height: normal; - } - - .mat-mdc-form-field { - font-size: var(--mat-sys-body-medium-size); - letter-spacing: normal; - line-height: normal; - } - - .mat-tree-node, - .mat-nested-tree-node { - font-size: var(--mat-sys-body-medium-size); - letter-spacing: normal; - line-height: normal; - } - - .mat-mdc-header-cell { - font-weight: 700; - } - - .mat-expansion-panel-header { - font-size: var(--mat-sys-body-medium-size); - letter-spacing: normal; - line-height: normal; - font-weight: 700; - } - - .mat-expansion-panel-content { - font-size: var(--mat-sys-body-medium-size); - letter-spacing: normal; - line-height: 20px; - } - - .mat-mdc-menu-content, - .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text { - --mat-menu-item-label-text-weight: var(--mat-sys-body-medium-weight); - } - - .mdc-list-item__primary-text { - font-size: var(--mat-sys-body-medium-size); - letter-spacing: normal; - line-height: normal; - } - - .mat-drawer { - color: var(--mat-app-text-color); - } - } - - // markdown styles - .mat-typography.text-base markdown { - h1 { - margin: 16px 0; - line-height: 28px; - font-size: 20px; - font-weight: 700; - } - - h2 { - margin: 16px 0; - line-height: 28px; - font-size: 18px; - font-weight: 700; - } - - h3 { - margin: 16px 0; - line-height: 28px; - font-size: 16px; - font-weight: 600; - } - - h4 { - margin: unset; - line-height: 20px; - font-size: 14px; - font-weight: 600; - } - - h5 { - margin: unset; - line-height: 20px; - font-size: 12px; - font-weight: 400; - } - - h6 { - margin: unset; - line-height: 12px; - font-size: 10px; - font-weight: 400; - } - - ul { - list-style: disc outside; - margin: 1em; - } - - ol { - list-style: auto outside; - margin: 1em; - } - - p { - margin: 8px 0; - } - - table { - display: table; - border-width: 1px; - margin-bottom: 1em; - width: 100%; - table-layout: fixed; - text-align: left; - border-collapse: separate; - border-spacing: 0; - - th { - user-select: none; - } - - td, - th { - border-bottom-width: 1px; - border-bottom-style: solid; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - cursor: default; - text-wrap: wrap; - padding: 8px; - word-break: break-word; - } - - th { - text-transform: uppercase; - } - - ul { - list-style-type: disc; - list-style-position: inside; - text-wrap: wrap; - word-break: break-all; - } - } - } + /* end overriding 3rd party styles */ } @mixin generate-material-theme() { /* semantic color classes */ - .primary-contrast { color: var(--mat-sys-on-primary); fill: var(--mat-sys-on-primary); @@ -529,7 +193,9 @@ fill: var(--nf-disabled); } - /* other classes and styles */ + /* end semantic color classes */ + + /* Nifi classes and styles */ .tooltip { background-color: var(--mat-sys-background); @@ -565,6 +231,8 @@ opacity: var(--nf-zero-opactiy) !important; } + /* end Nifi classes and styles */ + /* overriding 3rd party styles */ *:not([class^='mat-']):not([class^='mdc-']):not([class^='resizable-triangle']):not([class^='CodeMirror-cursor']) { @@ -581,221 +249,5 @@ border-color: var(--mat-sys-outline); } - * { - // markdown styles - markdown { - table { - th { - @extend .neutral-contrast; - } - - tbody { - tr:hover { - background-color: var( - --mat-menu-item-hover-state-layer-color, - color-mix( - in srgb, - var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), - transparent - ) - ) !important; - } - } - } - } - } - - .mat-datepicker-content { - box-shadow: - 0px 2px 4px -1px rgba(0, 0, 0, 0.2), - 0px 4px 5px 0px rgba(0, 0, 0, 0.14), - 0px 1px 10px 0px rgba(0, 0, 0, 0.12); - } - - .cdk-drop-list-dragging { - background-color: var(--mat-sys-secondary) !important; - } - - .cdk-drop-list { - background: var(--mat-sys-surface-container-low); - } - - .cdk-drag { - color: var(--mat-sys-on-surface); - background: var(--mat-sys-surface); - } - - .cdk-drag-disabled { - color: var(--nf-disabled); - background: var(--mat-sys-background) !important; - } - - span.grip { - color: var(--mat-sys-on-surface); - } - - ngx-skeleton-loader .skeleton-loader { - background: var(--mat-sys-outline); - } - - .markdown-clipboard-toolbar { - opacity: 0; - transition: opacity 250ms ease-out; - } - - .markdown-clipboard-toolbar.hover { - opacity: 1; - } - - .searchable-overlay { - .mat-mdc-form-field { - width: 100%; - } - - .search-filter { - .mdc-text-field--focused { - outline: none; - border-radius: 6px; - border-color: var(--mat-sys-primary); - } - - @include mat.form-field-overrides( - ( - outlined-container-shape: 6px - ) - ); - - button.primary-icon-button { - @include mat.icon-button-overrides( - ( - state-layer-size: 16px, - icon-size: 10px - ) - ); - } - - .fa { - display: flex; - justify-content: center; - color: inherit; - } - } - - &.mat-mdc-select-panel, - .mat-mdc-menu-content { - padding: 0 0 8px 0; - } - } - - //form-field - .mat-mdc-form-field-icon-prefix { - .fa { - font-size: 16px; - color: var(--themed-reusable-text-primary); - padding: 0 4px 0 0; - } - } - - .mdc-text-field--outlined, - .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper { - padding-left: 12px; - padding-right: 12px; - } - - // mat-select - @include mat.select-overrides( - ( - trigger-text-size: var(--mat-sys-body-medium-size), - trigger-text-line-height: 16px, - trigger-text-tracking: normal - ) - ); - - // mat-select panel appearance - .mat-mdc-select-panel { - margin-top: 8px; - border-color: var(--mat-sys-outline); - border-width: 1px; - border-top-left-radius: 6px !important; - border-top-right-radius: 6px !important; - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - } - - // mat-option - .mat-mdc-option[disabled] { - color: var(--nf-disabled); - opacity: 1; - } - - // mat-select mat-option sizing, alignment, typography - .mat-mdc-option { - min-height: 32px; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 12px; - padding-right: 12px; - font-weight: 400; - - .mdc-list-item__primary-text { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap !important; - font-weight: 500; - color: inherit; - } - - .fa { - font-size: 16px; - min-width: 16px; - flex: 0 0 16px; - color: inherit; - margin-right: 4px; - } - } - - /* progress-bar status overrides */ - - .progress-bar-success { - @include mat.progress-bar-overrides( - ( - active-indicator-color: var(--nf-success-default) - ) - ); - } - - .progress-bar-caution { - @include mat.progress-bar-overrides( - ( - active-indicator-color: var(--nf-caution-default) - ) - ); - } - - .progress-bar-error { - @include mat.progress-bar-overrides( - ( - active-indicator-color: var(--mat-sys-error) - ) - ); - } - - // buttons - .mdc-button:disabled { - pointer-events: auto; - cursor: not-allowed; - } - - // mat-card - @include mat.card-overrides( - ( - title-text-size: 16px, - title-text-line-height: 20px, - title-text-weight: 600, - subtitle-text-size: 14px, - subtitle-text-line-height: 20px, - subtitle-text-tracking: normal, - subtitle-text-weight: 400 - ) - ); + /* end overriding 3rd party styles */ } diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_button.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_button.scss new file mode 100644 index 000000000000..9152906b1590 --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_button.scss @@ -0,0 +1,92 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + @include mat.button-overrides( + ( + filled-container-shape: 4px, + filled-label-text-tracking: normal, + filled-label-text-weight: 400, + outlined-container-shape: 4px, + outlined-label-text-tracking: normal, + outlined-label-text-weight: 400, + outlined-horizontal-padding: 15px, + outlined-container-height: 32px, + text-container-shape: 4px, + text-label-text-tracking: normal, + text-label-text-weight: 400 + ) + ); + + .mdc-button:disabled { + pointer-events: auto; + cursor: not-allowed; + } + + @include mat.icon-button-overrides( + ( + state-layer-size: 36px, + icon-size: 14px + ) + ); + + .mat-mdc-icon-button { + &.mat-mdc-button-base.mdc-icon-button { + padding: 0; + } + } + + .primary-icon-button { + @include mat.icon-button-overrides( + ( + icon-color: var(--md-ref-palette-primary-40) + ) + ); + } + + .error-button { + @include mat.button-overrides( + ( + filled-container-color: var(--md-ref-palette-error-40), + filled-label-text-color: var(--md-ref-palette-error-100) + ) + ); + } + } + + .darkMode { + .primary-icon-button { + @include mat.icon-button-overrides( + ( + icon-color: var(--md-ref-palette-primary-80) + ) + ); + } + + .error-button { + @include mat.button-overrides( + ( + filled-container-color: var(--md-ref-palette-error-50), + filled-label-text-color: var(--md-ref-palette-error-100) + ) + ); + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_card.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_card.scss new file mode 100644 index 000000000000..dc0a52aa0d7b --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_card.scss @@ -0,0 +1,38 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + @include mat.card-overrides( + ( + title-text-size: 16px, + title-text-line-height: 20px, + title-text-weight: 600, + subtitle-text-size: 14px, + subtitle-text-line-height: 20px, + subtitle-text-tracking: normal, + subtitle-text-weight: 400 + ) + ); + + .mat-mdc-card-header-text { + width: 100%; + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_checkbox.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_checkbox.scss new file mode 100644 index 000000000000..10aa378ee5ea --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_checkbox.scss @@ -0,0 +1,40 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + .tertiary-checkbox { + @include mat.checkbox-overrides( + ( + selected-icon-color: var(--md-ref-palette-tertiary-40) + ) + ); + } + } + + .darkMode { + .tertiary-checkbox { + @include mat.checkbox-overrides( + ( + selected-icon-color: var(--md-ref-palette-tertiary-70) + ) + ); + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_date-picker.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_date-picker.scss new file mode 100644 index 000000000000..aeb473651f2a --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_date-picker.scss @@ -0,0 +1,33 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button { + padding: 11px; + } + + .mat-datepicker-content { + box-shadow: + 0px 2px 4px -1px rgba(0, 0, 0, 0.2), + 0px 4px 5px 0px rgba(0, 0, 0, 0.14), + 0px 1px 10px 0px rgba(0, 0, 0, 0.12); + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_dialog.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_dialog.scss new file mode 100644 index 000000000000..c896be361c47 --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_dialog.scss @@ -0,0 +1,39 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + @include mat.dialog-overrides( + ( + content-padding: 20px 24px, + headline-padding: 0 24px 9px, + container-shape: 6px + ) + ); + + .dialog-tab-content, + .dialog-content { + height: 50vh; + } + + .mat-mdc-dialog-actions { + border: none !important; + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_drag-and-drop.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_drag-and-drop.scss new file mode 100644 index 000000000000..fdc1ec97e3d5 --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_drag-and-drop.scss @@ -0,0 +1,107 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + .cdk-drop-list { + background: var(--mat-sys-surface-container-low); + } + + .cdk-drag { + color: var(--mat-sys-on-surface); + background: var(--mat-sys-surface); + } + + .cdk-drag-disabled { + cursor: not-allowed !important; + color: var(--nf-disabled); + background: var(--mat-sys-background) !important; + } + + .cdk-drag-placeholder { + opacity: 0; + } + + .cdk-drop-list-dragging { + cursor: grabbing; + background-color: var(--mat-sys-secondary) !important; + } + + .cdk-drag:hover { + cursor: grab; + } + + .cdk-list { + min-height: 34px; + border-radius: 4px; + overflow: hidden; + display: block; + user-select: none; + } + + span.grip { + width: 12px; + height: 36px; + display: block; + line-height: 6px; + letter-spacing: 1px; + color: var(--mat-sys-on-surface); + } + + .cdk-drag:hover { + span.grip::after { + content: '.. .. .. .. ..'; + } + } + + .cdk-drag-disabled { + font-style: italic; + } + + .cdk-drag:hover { + span.grip::after { + content: '.. .. .. .. ..'; + } + } + } + + .darkMode { + .cdk-drop-list-dragging { + background-color: var(--mat-sys-secondary) !important; + } + + .cdk-drop-list { + background: var(--mat-sys-surface-container-low); + } + + .cdk-drag { + color: var(--mat-sys-on-surface); + background: var(--mat-sys-surface); + } + + .cdk-drag-disabled { + color: var(--nf-disabled); + background: var(--mat-sys-background) !important; + } + + span.grip { + color: var(--mat-sys-on-surface); + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_expansion-panel.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_expansion-panel.scss new file mode 100644 index 000000000000..097464ad23d0 --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_expansion-panel.scss @@ -0,0 +1,43 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + @include mat.expansion-overrides( + ( + container-shape: 6px, + header-expanded-state-height: 50px + ) + ); + + .mat-expansion-panel-body { + overflow-y: auto; + } + + .mat-expansion-panel-header.mat-expanded { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + .mat-content.mat-content-hide-toggle { + margin-right: 0 !important; + height: 48px; + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_form-field.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_form-field.scss new file mode 100644 index 000000000000..1af383b2f17c --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_form-field.scss @@ -0,0 +1,35 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + .mdc-notched-outline__notch { + border-right: none; + } + + .mat-mdc-form-field-infix { + min-width: 180px !important; + width: 180px !important; + } + + .mdc-text-field--outlined .mat-mdc-form-field-infix { + line-height: 24px; + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_markdown.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_markdown.scss new file mode 100644 index 000000000000..bd653170b037 --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_markdown.scss @@ -0,0 +1,176 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + .mat-typography.text-base markdown { + h1 { + margin: 16px 0; + line-height: 28px; + font-size: 20px; + font-weight: 700; + } + + h2 { + margin: 16px 0; + line-height: 28px; + font-size: 18px; + font-weight: 700; + } + + h3 { + margin: 16px 0; + line-height: 28px; + font-size: 16px; + font-weight: 600; + } + + h4 { + margin: unset; + line-height: 20px; + font-size: 14px; + font-weight: 600; + } + + h5 { + margin: unset; + line-height: 20px; + font-size: 12px; + font-weight: 400; + } + + h6 { + margin: unset; + line-height: 12px; + font-size: 10px; + font-weight: 400; + } + + ul { + list-style: disc outside; + margin: 1em; + } + + ol { + list-style: auto outside; + margin: 1em; + } + + p { + margin: 8px 0; + } + + table { + display: table; + border-width: 1px; + margin-bottom: 1em; + width: 100%; + table-layout: fixed; + text-align: left; + border-collapse: separate; + border-spacing: 0; + + th { + user-select: none; + } + + td, + th { + border-bottom-width: 1px; + border-bottom-style: solid; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: default; + text-wrap: wrap; + padding: 8px; + word-break: break-word; + } + + th { + text-transform: uppercase; + } + + ul { + list-style-type: disc; + list-style-position: inside; + text-wrap: wrap; + word-break: break-all; + } + } + } + + .markdown-clipboard-toolbar { + opacity: 0; + transition: opacity 250ms ease-out; + } + + .markdown-clipboard-toolbar.hover { + opacity: 1; + } + + * { + markdown { + table { + th { + @extend .neutral-contrast !optional; + } + + tbody { + tr:hover { + background-color: var( + --mat-menu-item-hover-state-layer-color, + color-mix( + in srgb, + var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), + transparent + ) + ) !important; + } + } + } + } + } + } + + .darkMode { + * { + markdown { + table { + th { + @extend .neutral-contrast !optional; + } + + tbody { + tr:hover { + background-color: var( + --mat-menu-item-hover-state-layer-color, + color-mix( + in srgb, + var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), + transparent + ) + ) !important; + } + } + } + } + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_menu.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_menu.scss new file mode 100644 index 000000000000..097c140b3a8b --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_menu.scss @@ -0,0 +1,53 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + @include mat.menu-overrides( + ( + divider-top-spacing: 0, + divider-bottom-spacing: 0 + ) + ); + + .mat-mdc-menu-panel { + max-width: 420px; + + .fa { + width: 14px; + height: 14px; + text-align: center; + } + + .icon { + display: inline-block; + width: 14px; + text-align: center; + } + } + + .mat-mdc-menu-content { + height: 100%; + } + + .mat-mdc-menu-content .mat-mdc-menu-item { + min-height: 2.25rem; + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_option.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_option.scss new file mode 100644 index 000000000000..dc24f5109faf --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_option.scss @@ -0,0 +1,33 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + .mat-mdc-option[disabled] { + color: var(--nf-disabled); + opacity: 1; + } + } + + .darkMode { + .mat-mdc-option[disabled] { + color: var(--nf-disabled); + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_paginator.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_paginator.scss new file mode 100644 index 000000000000..83a37b0a8df1 --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_paginator.scss @@ -0,0 +1,32 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + .mat-mdc-paginator { + background-color: unset !important; + } + } + + .darkMode { + .mat-mdc-paginator { + background-color: unset !important; + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-bar.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-bar.scss new file mode 100644 index 000000000000..f3c0d8703f3a --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-bar.scss @@ -0,0 +1,72 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + .progress-bar-success { + @include mat.progress-bar-overrides( + ( + active-indicator-color: var(--nf-success-default) + ) + ); + } + + .progress-bar-caution { + @include mat.progress-bar-overrides( + ( + active-indicator-color: var(--nf-caution-default) + ) + ); + } + + .progress-bar-error { + @include mat.progress-bar-overrides( + ( + active-indicator-color: var(--mat-sys-error) + ) + ); + } + } + + .darkMode { + .progress-bar-success { + @include mat.progress-bar-overrides( + ( + active-indicator-color: var(--nf-success-default) + ) + ); + } + + .progress-bar-caution { + @include mat.progress-bar-overrides( + ( + active-indicator-color: var(--nf-caution-default) + ) + ); + } + + .progress-bar-error { + @include mat.progress-bar-overrides( + ( + active-indicator-color: var(--mat-sys-error) + ) + ); + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-spinner.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-spinner.scss new file mode 100644 index 000000000000..be6d9b4c1a46 --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-spinner.scss @@ -0,0 +1,40 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + .tertiary-spinner { + @include mat.progress-spinner-overrides( + ( + active-indicator-color: var(--md-ref-palette-tertiary-40) + ) + ); + } + } + + .darkMode { + .tertiary-spinner { + @include mat.progress-spinner-overrides( + ( + active-indicator-color: var(--md-ref-palette-tertiary-70) + ) + ); + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_searchable-overlay.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_searchable-overlay.scss new file mode 100644 index 000000000000..45096106d7ca --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_searchable-overlay.scss @@ -0,0 +1,108 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + .searchable-overlay { + .mat-mdc-form-field { + width: 100%; + } + + .mat-mdc-option { + min-height: 32px; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 12px; + padding-right: 12px; + + .mdc-list-item__primary-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap !important; + } + + .fa { + font-size: 16px; + min-width: 16px; + flex: 0 0 16px; + color: inherit; + margin-right: 4px; + } + } + + .mat-mdc-form-field-icon-prefix { + .fa { + font-size: 16px; + color: var(--mat-app-text-color); + padding: 0 4px 0 0; + } + } + + .search-filter { + .mdc-text-field--focused { + outline: none; + border-radius: 6px; + border-color: var(--mat-sys-primary); + } + + @include mat.form-field-overrides( + ( + outlined-container-shape: 6px + ) + ); + + button.primary-icon-button { + @include mat.icon-button-overrides( + ( + state-layer-size: 16px, + icon-size: 10px + ) + ); + } + + .fa { + display: flex; + justify-content: center; + color: inherit; + } + } + + &.mat-mdc-select-panel, + .mat-mdc-menu-content { + padding: 0 0 8px 0; + } + } + } + + .darkMode { + .searchable-overlay { + .mat-mdc-form-field-icon-prefix { + .fa { + color: var(--mat-app-text-color); + } + } + + .search-filter { + .mdc-text-field--focused { + border-color: var(--mat-sys-primary); + } + } + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_sidenav.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_sidenav.scss new file mode 100644 index 000000000000..c01b5b50ed3f --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_sidenav.scss @@ -0,0 +1,29 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + @include mat.sidenav-overrides( + ( + container-width: auto, + container-shape: 0 + ) + ); + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_skeleton.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_skeleton.scss new file mode 100644 index 000000000000..77116a750bfd --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_skeleton.scss @@ -0,0 +1,32 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + ngx-skeleton-loader .skeleton-loader { + background: var(--mat-sys-outline); + } + } + + .darkMode { + ngx-skeleton-loader .skeleton-loader { + background: var(--mat-sys-outline); + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_snackbar.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_snackbar.scss new file mode 100644 index 000000000000..5c57f232a910 --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_snackbar.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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + @include mat.snack-bar-overrides( + ( + button-color: var(--md-ref-palette-secondary-80) + ) + ); + } + + .darkMode { + @include mat.snack-bar-overrides( + ( + button-color: #004849 + ) + ); + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_status-variant.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_status-variant.scss new file mode 100644 index 000000000000..b50a1a1a1aad --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_status-variant.scss @@ -0,0 +1,116 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + // NOTE: The following styles are for the status badge and status banner components. The `.status-variant` class should only be applied to a div or span element that should adhear to the variant color and background. + .status-variant { + &.neutral { + color: var(--mat-sys-on-surface); + background-color: var(--mat-sys-surface-dim); + } + &.critical { + color: var(--mat-sys-on-error); + background-color: var(--mat-sys-error); + } + &.caution { + color: var(--nf-caution-contrast); + background-color: var(--nf-caution-default); + } + &.success { + color: var(--nf-success-contrast); + background-color: var(--nf-success-default); + } + &.info { + color: var(--nf-success-contrast); + background-color: var(--nf-success-variant); + } + + .fa { + &.neutral { + color: var(--mat-sys-on-surface); + } + + &.critical { + color: var(--mat-sys-on-error); + } + + &.caution { + color: var(--nf-caution-contrast); + } + + &.success { + color: var(--nf-success-contrast); + } + + &.info { + color: var(--nf-success-contrast); + } + } + } + } + + .darkMode { + // NOTE: The following styles are for the status badge and status banner components. The `.status-variant` class should only be applied to a div or span element that should adhear to the variant color and background. + .status-variant { + &.neutral { + color: var(--mat-sys-on-surface); + background-color: var(--mat-sys-surface-dim); + } + &.critical { + color: var(--mat-sys-on-error); + background-color: var(--mat-sys-error); + } + &.caution { + color: var(--nf-caution-contrast); + background-color: var(--nf-caution-default); + } + &.success { + color: var(--nf-success-contrast); + background-color: var(--nf-success-default); + } + &.info { + color: var(--nf-success-contrast); + background-color: var(--nf-success-variant); + } + + .fa { + &.neutral { + color: var(--mat-sys-on-surface); + } + + &.critical { + color: var(--mat-sys-on-error); + } + + &.caution { + color: var(--nf-caution-contrast); + } + + &.success { + color: var(--nf-success-contrast); + } + + &.info { + color: var(--nf-success-contrast); + } + } + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tab.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tab.scss new file mode 100644 index 000000000000..0affca85925b --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tab.scss @@ -0,0 +1,34 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + @include mat.tabs-overrides( + ( + label-text-tracking: normal, + label-text-weight: 400, + container-height: 36px + ) + ); + + .mat-mdc-tab-header { + user-select: none; + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tree.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tree.scss new file mode 100644 index 000000000000..8a92ecdd8383 --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tree.scss @@ -0,0 +1,33 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@mixin generate-material-theme() { + :root { + .mat-tree { + display: inline !important; + background-color: unset !important; + } + } + + .darkMode { + .mat-tree { + background-color: unset !important; + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_typography.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_typography.scss new file mode 100644 index 000000000000..b829b839527b --- /dev/null +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_typography.scss @@ -0,0 +1,141 @@ +/*! + * 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. + */ + +@use '@angular/material' as mat; + +@use '@fontsource/inter' as inter-normal; +@use '@fontsource/inter/400.css' as inter-400; +@use '@fontsource/inter/400-italic.css' as inter-italic; +@use '@fontsource/inter/700.css' as inter-700; + +@layer base { + @font-face { + font-family: 'Inter'; + } +} + +@mixin generate-material-theme() { + :root { + .mat-typography.text-base { + font-family: var(--mat-sys-body-medium-font); + line-height: var(--mat-sys-body-medium-line-height); + font-size: var(--mat-sys-body-medium-size); + font-weight: var(--mat-sys-body-medium-weight); + letter-spacing: normal; + + h2 { + margin: unset; + line-height: 28px; + font-size: 18px; + font-weight: 700; + } + + h3 { + margin: 0 0 16px; + line-height: 28px; + font-size: 20px; + font-weight: 700; + } + + h4 { + margin: unset; + line-height: 20px; + font-size: 14px; + font-weight: 400; + } + + a { + letter-spacing: normal; + } + + .mdc-text-field--outlined .mdc-floating-label { + font-size: var(--mat-sys-body-medium-size); + letter-spacing: normal; + line-height: normal; + } + + .mat-mdc-select { + font-size: var(--mat-sys-body-medium-size); + letter-spacing: normal; + line-height: normal; + } + + .mat-mdc-option { + font-size: var(--mat-sys-body-medium-size); + letter-spacing: normal; + line-height: normal; + } + + .mat-mdc-form-field { + font-size: var(--mat-sys-body-medium-size); + letter-spacing: normal; + line-height: normal; + } + + .mdc-dialog__content { + font-size: var(--mat-sys-body-medium-size) !important; + } + + .mat-tree-node, + .mat-nested-tree-node { + font-size: var(--mat-sys-body-medium-size); + letter-spacing: normal; + line-height: normal; + } + + .mat-mdc-header-cell { + font-weight: 700; + } + + .mat-expansion-panel-header { + font-size: var(--mat-sys-body-medium-size); + letter-spacing: normal; + line-height: normal; + font-weight: 700; + } + + .mat-expansion-panel-content { + font-size: var(--mat-sys-body-medium-size); + letter-spacing: normal; + line-height: 20px; + } + + .mat-mdc-menu-content, + .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text { + --mat-menu-item-label-text-weight: var(--mat-sys-body-medium-weight); + } + + .mdc-list-item__primary-text { + font-size: var(--mat-sys-body-medium-size); + letter-spacing: normal; + line-height: normal; + } + + .mat-drawer { + color: var(--mat-app-text-color); + } + } + } + + .darkMode { + .mat-typography.text-base { + .mat-drawer { + color: var(--mat-app-text-color); + } + } + } +} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss index e84a58b109c4..42ceeb695c28 100644 --- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss @@ -18,16 +18,28 @@ @use 'sass:map'; @use '@angular/material' as mat; -@use '@fontsource/inter' as inter-normal; -@use '@fontsource/inter/400.css' as inter-400; -@use '@fontsource/inter/400-italic.css' as inter-italic; -@use '@fontsource/inter/700.css' as inter-700; - -@layer base { - @font-face { - font-family: 'Inter'; - } -} +@use './components/button' as buttons; +@use './components/card' as card; +@use './components/checkbox' as checkbox; +@use './components/date-picker' as date-picker; +@use './components/dialog' as dialog; +@use './components/drag-and-drop' as drag-and-drop; +@use './components/expansion-panel' as expansion; +@use './components/form-field' as form-field; +@use './components/markdown' as markdown; +@use './components/menu' as menu; +@use './components/option' as option; +@use './components/paginator' as paginator; +@use './components/progress-bar' as progress-bar; +@use './components/progress-spinner' as progress-spinner; +@use './components/searchable-overlay' as searchable-overlay; +@use './components/sidenav' as sidenav; +@use './components/skeleton' as skeleton; +@use './components/snackbar' as snackbar; +@use './components/status-variant' as status-variant; +@use './components/tab' as tab; +@use './components/tree' as tree; +@use './components/typography' as typography; :root { /* Material Design color palettes and typography for light mode. These are used by Angular Material SASS api's to define the theme for all Angular Material components. These variable should NOT be referenced outside of the theme file. */ @@ -262,151 +274,6 @@ inverse-tertiary: var(--md-ref-palette-tertiary-80) ) ); - - @include mat.sidenav-overrides( - ( - container-width: auto, - container-shape: 0 - ) - ); - - @include mat.expansion-overrides( - ( - container-shape: 6px, - header-expanded-state-height: 50px - ) - ); - - @include mat.menu-overrides( - ( - divider-top-spacing: 0, - divider-bottom-spacing: 0 - ) - ); - - @include mat.dialog-overrides( - ( - content-padding: 20px 24px, - headline-padding: 0 24px 9px, - container-shape: 6px - ) - ); - - @include mat.icon-button-overrides( - ( - state-layer-size: 36px, - icon-size: 14px - ) - ); - - @include mat.button-overrides( - ( - filled-container-shape: 4px, - filled-label-text-tracking: normal, - filled-label-text-weight: 400, - outlined-container-shape: 4px, - outlined-label-text-tracking: normal, - outlined-label-text-weight: 400, - outlined-horizontal-padding: 15px, - outlined-container-height: 32px, - text-container-shape: 4px, - text-label-text-tracking: normal, - text-label-text-weight: 400 - ) - ); - - @include mat.tabs-overrides( - ( - label-text-tracking: normal, - label-text-weight: 400, - container-height: 36px - ) - ); - - @include mat.snack-bar-overrides( - ( - button-color: var(--md-ref-palette-secondary-80) - ) - ); - - .tertiary-checkbox { - @include mat.checkbox-overrides( - ( - selected-icon-color: var(--md-ref-palette-tertiary-40) - ) - ); - } - - .primary-icon-button { - @include mat.icon-button-overrides( - ( - icon-color: var(--md-ref-palette-primary-40) - ) - ); - } - - .error-button { - @include mat.button-overrides( - ( - filled-container-color: var(--md-ref-palette-error-40), - filled-label-text-color: var(--md-ref-palette-error-100) - ) - ); - } - - .tertiary-spinner { - @include mat.progress-spinner-overrides( - ( - active-indicator-color: var(--md-ref-palette-tertiary-40) - ) - ); - } - - // NOTE: The following styles are for the status badge and status banner components. The `.status-variant` class should only be applied to a div or span element that should adhear to the variant color and background. - .status-variant { - &.neutral { - color: var(--mat-sys-on-surface); - background-color: var(--mat-sys-surface-dim); - } - &.critical { - color: var(--mat-sys-on-error); - background-color: var(--mat-sys-error); - } - &.caution { - color: var(--nf-caution-contrast); - background-color: var(--nf-caution-default); - } - &.success { - color: var(--nf-success-contrast); - background-color: var(--nf-success-default); - } - &.info { - color: var(--nf-success-contrast); - background-color: var(--nf-success-variant); - } - - .fa { - &.neutral { - color: var(--mat-sys-on-surface); - } - - &.critical { - color: var(--mat-sys-on-error); - } - - &.caution { - color: var(--nf-caution-contrast); - } - - &.success { - color: var(--nf-success-contrast); - } - - &.info { - color: var(--nf-success-contrast); - } - } - } } // Note: Color palettes are generated from primary: #6750a4 @@ -801,149 +668,27 @@ html { inverse-tertiary: var(--md-ref-palette-tertiary-70) ) ); - - @include mat.sidenav-overrides( - ( - container-width: auto, - container-shape: 0 - ) - ); - - @include mat.expansion-overrides( - ( - container-shape: 6px, - header-expanded-state-height: 50px - ) - ); - - @include mat.menu-overrides( - ( - divider-top-spacing: 0, - divider-bottom-spacing: 0 - ) - ); - - @include mat.dialog-overrides( - ( - content-padding: 20px 24px, - headline-padding: 0 24px 9px, - container-shape: 6px - ) - ); - - @include mat.icon-button-overrides( - ( - state-layer-size: 36px, - icon-size: 14px - ) - ); - - @include mat.button-overrides( - ( - filled-container-shape: 4px, - filled-label-text-tracking: normal, - filled-label-text-weight: 400, - outlined-container-shape: 4px, - outlined-label-text-tracking: normal, - outlined-label-text-weight: 400, - outlined-horizontal-padding: 15px, - outlined-container-height: 32px, - text-container-shape: 4px, - text-label-text-tracking: normal, - text-label-text-weight: 400 - ) - ); - - @include mat.tabs-overrides( - ( - label-text-tracking: normal, - label-text-weight: 400, - container-height: 36px - ) - ); - - @include mat.snack-bar-overrides( - ( - button-color: #004849 - ) - ); - - .tertiary-checkbox { - @include mat.checkbox-overrides( - ( - selected-icon-color: var(--md-ref-palette-tertiary-70) - ) - ); - } - - .primary-icon-button { - @include mat.icon-button-overrides( - ( - icon-color: var(--md-ref-palette-primary-80) - ) - ); - } - - .error-button { - @include mat.button-overrides( - ( - filled-container-color: var(--md-ref-palette-error-50), - filled-label-text-color: var(--md-ref-palette-error-100) - ) - ); - } - - .tertiary-spinner { - @include mat.progress-spinner-overrides( - ( - active-indicator-color: var(--md-ref-palette-tertiary-70) - ) - ); - } - - // NOTE: The following styles are for the status badge and status banner components. The `.status-variant` class should only be applied to a div or span element that should adhear to the variant color and background. - .status-variant { - &.neutral { - color: var(--mat-sys-on-surface); - background-color: var(--mat-sys-surface-dim); - } - &.critical { - color: var(--mat-sys-on-error); - background-color: var(--mat-sys-error); - } - &.caution { - color: var(--nf-caution-contrast); - background-color: var(--nf-caution-default); - } - &.success { - color: var(--nf-success-contrast); - background-color: var(--nf-success-default); - } - &.info { - color: var(--nf-success-contrast); - background-color: var(--nf-success-variant); - } - - .fa { - &.neutral { - color: var(--mat-sys-on-surface); - } - - &.critical { - color: var(--mat-sys-on-error); - } - - &.caution { - color: var(--nf-caution-contrast); - } - - &.success { - color: var(--nf-success-contrast); - } - - &.info { - color: var(--nf-success-contrast); - } - } - } } + +@include buttons.generate-material-theme(); +@include card.generate-material-theme(); +@include checkbox.generate-material-theme(); +@include date-picker.generate-material-theme(); +@include dialog.generate-material-theme(); +@include drag-and-drop.generate-material-theme(); +@include expansion.generate-material-theme(); +@include form-field.generate-material-theme(); +@include markdown.generate-material-theme(); +@include menu.generate-material-theme(); +@include option.generate-material-theme(); +@include paginator.generate-material-theme(); +@include progress-bar.generate-material-theme(); +@include progress-spinner.generate-material-theme(); +@include searchable-overlay.generate-material-theme(); +@include sidenav.generate-material-theme(); +@include skeleton.generate-material-theme(); +@include snackbar.generate-material-theme(); +@include status-variant.generate-material-theme(); +@include tab.generate-material-theme(); +@include tree.generate-material-theme(); +@include typography.generate-material-theme(); diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss index fa8ca4075154..2374626356c7 100644 --- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss +++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss @@ -18,6 +18,26 @@ @use 'sass:map'; @use '@angular/material' as mat; +// --------------------------------------------------------------------------- +// OPTION 1: Do nothing to use Angular Material with no component overrides +// --------------------------------------------------------------------------- + +//--------------------------------------------------------------------------- +// OPTION 2: Reuse NiFi's existing component customizations +// --------------------------------------------------------------------------- +// Import partials from ./components/ and call their generate-material-theme() +// mixin. These encapsulate the overrides used by the default NiFi theme +// (material.scss). You can import as many or as few as you need. +@use './components/dialog' as dialog; + +// --------------------------------------------------------------------------- +// OPTION 3: Write your own component overrides from scratch +// --------------------------------------------------------------------------- +// Angular Material exposes per-component *-overrides() mixins that accept a +// map of token overrides. Each component has its own set of tokens. +// +// To discover available tokens for a component, consult the Angular Material +// source or docs: https://material.angular.io/guide/theming#component-styles @layer base { //fonts are loaded by the browser @font-face { @@ -257,45 +277,6 @@ inverse-tertiary: var(--md-ref-palette-tertiary-80) ) ); - - @include mat.snack-bar-overrides( - ( - button-color: var(--md-ref-palette-secondary-80) - ) - ); - - .tertiary-checkbox { - @include mat.checkbox-overrides( - ( - selected-icon-color: var(--md-ref-palette-tertiary-40) - ) - ); - } - - .primary-icon-button { - @include mat.icon-button-overrides( - ( - icon-color: var(--md-ref-palette-primary-40) - ) - ); - } - - .error-button { - @include mat.button-overrides( - ( - filled-container-color: var(--md-ref-palette-error-40), - filled-label-text-color: var(--md-ref-palette-error-100) - ) - ); - } - - .tertiary-spinner { - @include mat.progress-spinner-overrides( - ( - active-indicator-color: var(--md-ref-palette-tertiary-40) - ) - ); - } } // Note: Color palettes are generated from primary: #6750a4 @@ -694,43 +675,6 @@ html { inverse-tertiary: var(--md-ref-palette-tertiary-70) ) ); - - @include mat.snack-bar-overrides( - ( - button-color: #004849 - ) - ); - - .tertiary-checkbox { - @include mat.checkbox-overrides( - ( - selected-icon-color: var(--md-ref-palette-tertiary-70) - ) - ); - } - - .primary-icon-button { - @include mat.icon-button-overrides( - ( - icon-color: var(--md-ref-palette-primary-80) - ) - ); - } - - .error-button { - @include mat.button-overrides( - ( - filled-container-color: var(--md-ref-palette-error-50), - filled-label-text-color: var(--md-ref-palette-error-100) - ) - ); - } - - .tertiary-spinner { - @include mat.progress-spinner-overrides( - ( - active-indicator-color: var(--md-ref-palette-tertiary-70) - ) - ); - } } + +@include dialog.generate-material-theme(); diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/components/copy-button/copy-button.component.ts b/nifi-frontend/src/main/frontend/libs/shared/src/components/copy-button/copy-button.component.ts index 5097454d5372..0abd65ce54b1 100644 --- a/nifi-frontend/src/main/frontend/libs/shared/src/components/copy-button/copy-button.component.ts +++ b/nifi-frontend/src/main/frontend/libs/shared/src/components/copy-button/copy-button.component.ts @@ -20,7 +20,9 @@ import { MatIconButton } from '@angular/material/button'; @Component({ selector: 'copy-button', - template: ` `, + template: ` `, imports: [MatIconButton] }) export class CopyButtonComponent {} diff --git a/nifi-frontend/src/main/frontend/libs/shared/src/components/searchable-select/searchable-select.component.scss b/nifi-frontend/src/main/frontend/libs/shared/src/components/searchable-select/searchable-select.component.scss index 617fa12ade1b..b104bf9783db 100644 --- a/nifi-frontend/src/main/frontend/libs/shared/src/components/searchable-select/searchable-select.component.scss +++ b/nifi-frontend/src/main/frontend/libs/shared/src/components/searchable-select/searchable-select.component.scss @@ -23,6 +23,12 @@ .mat-mdc-form-field { width: 100%; } + + .mdc-text-field--outlined, + .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper { + padding-left: 12px; + padding-right: 12px; + } } .searchable-overlay {