SuiteCRM/SuiteCRM-Core
2
0
Fork 0
mirror of https://github.com/SuiteCRM/SuiteCRM-Core.git synced 2025-08-30 02:52:22 +08:00
Code Issues Projects Packages Activity Actions

Fix subpanel styling

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

2
core/app/core/src/lib/components/grid-widget/grid-widget.component.html
View file

@ -62,7 +62,7 @@
</div> </div>
<div *ngIf="statistics.loading && loading" class="widget-entry-loading"> <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> </div>
</ng-container> </ng-container>

2
core/app/shell/src/themes/suite8/css/abstracts/_variables.scss
View file

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

59
core/app/shell/src/themes/suite8/css/components/_subpanel.scss
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 { &.sub-panel-banner-button-active {
border-bottom: 1px solid $bright-purple; border-bottom: 1px solid $bright-purple;
@ -169,6 +196,7 @@ div.widget-panel .panel-card .card-header {
.sub-panel-banner-button-title { .sub-panel-banner-button-title {
.widget-entry-label { .widget-entry-label {
font-size: .62rem;
color: $bright-purple; color: $bright-purple;
font-weight: 900; 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;
}
}
}
}
} }
} }