Fix subpanel styling

- add hover colors
- fix loading spinner
This commit is contained in:
Jack Anderson 2024-12-05 16:47:06 +00:00
parent f4929db4af
commit 22d216657f
3 changed files with 61 additions and 2 deletions

View file

@ -62,7 +62,7 @@
</div>
<div *ngIf="statistics.loading && loading" class="widget-entry-loading">
<scrm-inline-loading-spinner></scrm-inline-loading-spinner>
<scrm-inline-loading-spinner klass="d-flex flex-row"></scrm-inline-loading-spinner>
</div>
</ng-container>

View file

@ -50,6 +50,7 @@ $pale-bue-grey: #9e9ba8;
$dim-grey: dimgrey;
$lightgray: lightgray;
$extra-light-grey: #dee2e6;
$highlight-grey: #9f9e9e;
$geyser-blue: #d7dde1;
$cool-blue: #76858f;
@ -84,6 +85,7 @@ $coral-pink: #eb6657;
$suite-logo-pink: #e67062;
$bright-purple: #8d74cc;
$highlight-purple: #b9a2f2;
$wild-willow-green: #c6ca6b;
$light-green: #93ae8a;

View file

@ -153,7 +153,34 @@ div.widget-panel .panel-card .card-header {
}
&:hover,
&:hover{
border-bottom: 1px solid $highlight-grey;
.grid-widget {
background-color: inherit;
.widget-entry-icon {
svg {
fill: $highlight-grey;
stroke: $highlight-grey;
}
}
.sub-panel-banner-button-title {
.widget-entry-label {
font-size: .62rem;
color: $highlight-grey;
font-weight: 900;
}
}
.sub-panel-banner-value {
.widget-entry-value {
color: $highlight-grey;
}
}
}
}
&.sub-panel-banner-button-active {
border-bottom: 1px solid $bright-purple;
@ -169,6 +196,7 @@ div.widget-panel .panel-card .card-header {
.sub-panel-banner-button-title {
.widget-entry-label {
font-size: .62rem;
color: $bright-purple;
font-weight: 900;
}
@ -180,6 +208,35 @@ div.widget-panel .panel-card .card-header {
}
}
}
&:hover {
border-bottom: 1px solid $highlight-purple;
.grid-widget {
background-color: inherit;
.widget-entry-icon {
svg {
fill: $highlight-purple;
stroke: $highlight-purple;
}
}
.sub-panel-banner-button-title {
.widget-entry-label {
font-size: .62rem;
color: $highlight-purple;
font-weight: 900;
}
}
.sub-panel-banner-value {
.widget-entry-value {
color: $highlight-purple;
}
}
}
}
}
}