scottyaslan commented on code in PR #8465:
URL: https://github.com/apache/nifi/pull/8465#discussion_r1513275440
##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss:
##########
@@ -334,6 +335,9 @@ $appFontPath: '~roboto-fontface/fonts';
.refresh-timestamp {
color: $warn-palette-A400;
}
+ .skeleton-loader{
Review Comment:
Please add a blank line between `.refresh-timestamp` and `.skeleton-loader`
class rules.
##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss:
##########
@@ -334,6 +335,9 @@ $appFontPath: '~roboto-fontface/fonts';
.refresh-timestamp {
color: $warn-palette-A400;
}
+ .skeleton-loader{
+ background: $canvas-primary-palette-500 !important;
Review Comment:
Two comments here:
1. Please use `$canvas-primary-palette-400`. It is already defined above and
is the color we have been using for similar elements.
2. We typically try to avoid using `!important`. The way to do that is to
have a more specific selector. In this case that will require us to wrap all of
these `@mixin nifi-colors` rules under the `.mat-app-background` class since
that is the class on the `<body></body>`. So it would look like:
```
.mat-app-background {
a {
color: $accent-palette-A400;
text-decoration-color: $primary-palette-200;
}
a:hover {
text-decoration-color: $accent-palette-A400;
}
.tooltip {
background-color: $canvas-primary-palette-900;
border-color: $canvas-primary-palette-200;
box-shadow: 0 2px 5px $canvas-primary-palette-50;
color: $canvas-primary-palette-200;
}
.property-editor {
background-color: $canvas-primary-palette-900;
box-shadow: 0 2px 5px $canvas-primary-palette-50;
}
.disabled {
color: $primary-palette-500 !important;
fill: $primary-palette-500 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
.enabled {
color: $accent-palette-A200 !important;
fill: $accent-palette-A200 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
.stopped {
color: $warn-palette-200 !important;
fill: $warn-palette-200 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
.running {
color: $canvas-accent-palette-200 !important;
fill: $canvas-accent-palette-200 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
.has-errors,
.invalid {
color: $canvas-accent-palette-A200 !important;
fill: $canvas-accent-palette-A200 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
.validating {
color: $canvas-primary-palette-400 !important;
fill: $canvas-primary-palette-400 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
.transmitting {
color: $accent-palette-A200 !important;
fill: $accent-palette-A200 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
.not-transmitting {
color: $primary-palette-500 !important;
fill: $primary-palette-500 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
.up-to-date {
color: $canvas-accent-palette-400 !important;
fill: $canvas-accent-palette-400 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
.locally-modified,
.sync-failure {
color: $warn-palette-A100 !important;
fill: $warn-palette-A100 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
.stale,
.locally-modified-and-stale {
color: $warn-palette-300 !important;
fill: $warn-palette-300 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
}
.zero {
color: $accent-palette-A100 !important;
fill: $accent-palette-A100 !important;
text-shadow: none !important;
}
.blank,
.unset,
.sensitive {
color: $canvas-primary-palette-400 !important;
}
button.nifi-button {
border: 1px solid $primary-palette-200;
background-color: $primary-palette-50;
color: $accent-palette-A400;
}
button.nifi-button:hover {
border-color: $accent-palette-A400;
}
button:disabled {
color: $primary-palette-200 !important;
cursor: not-allowed;
}
button.nifi-button:disabled {
border: 1px solid $primary-palette-200;
i {
color: $primary-palette-200 !important;
}
}
.value,
.refresh-timestamp {
color: $warn-palette-A400;
}
.skeleton-loader {
background: $canvas-primary-palette-400;
}
}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
