ChrisChen/ROLAC
1
0
Fork 0
Code Issues 66 Pull Requests Actions Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Chris Chen
2026-05-25 17:32:18 -07:00
parent 9b28fbcfb6
commit d5648315a0
262 changed files with 32074 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
APP/src/app/shared/styles/ui-utils.scss
+271
View File
@@ -0,0 +1,271 @@
// =============================================================================
// UI Utility Classes
// =============================================================================
// Centralized SCSS for utility classes used by UiUtilsService
// These classes provide consistent styling across all components
// =============================================================================
// Status Badge Classes
// =============================================================================
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
kendo-svgicon {
width: 12px;
height: 12px;
}
// Status variants
&.status-active {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
}
&.status-pending {
background: rgba(251, 191, 36, 0.1);
color: #d97706;
}
&.status-completed {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
}
&.status-cancelled {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
}
}
// =============================================================================
// Priority Badge Classes
// =============================================================================
.priority-badge {
padding: 0.125rem 0.5rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
// Priority variants
&.priority-high {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
}
&.priority-medium {
background: rgba(251, 191, 36, 0.1);
color: #d97706;
}
&.priority-low {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
}
}
// =============================================================================
// Role Badge Classes
// =============================================================================
.role-badge {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
kendo-svgicon {
width: 12px;
height: 12px;
}
// Role variants
&.role-buyer {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
}
&.role-seller {
background: rgba(168, 85, 247, 0.1);
color: #9333ea;
}
&.role-agent {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
}
&.role-escrow {
background: rgba(245, 158, 11, 0.1);
color: #d97706;
}
&.role-lender {
background: rgba(139, 69, 19, 0.1);
color: #8b4513;
}
&.role-coordinator {
background: rgba(75, 85, 99, 0.1);
color: #4b5563;
}
&.role-default {
background: rgba(107, 114, 128, 0.1);
color: #6b7280;
}
}
// =============================================================================
// Task Status Classes (for transaction-detail component)
// =============================================================================
.task-status {
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
&.task-completed {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
}
&.task-in-progress {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
}
&.task-pending {
background: rgba(251, 191, 36, 0.1);
color: #d97706;
}
&.task-cancelled {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
}
}
// =============================================================================
// Utility Mixins (for consistent styling)
// =============================================================================
@mixin badge-base {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-weight: 600;
text-transform: uppercase;
}
@mixin status-colors($bg-color, $text-color) {
background: rgba($bg-color, 0.1);
color: $text-color;
}
// =============================================================================
// Responsive Design
// =============================================================================
@media (max-width: 768px) {
.status-badge,
.role-badge {
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
}
.priority-badge {
font-size: 0.7rem;
padding: 0.1rem 0.4rem;
}
}
// =============================================================================
// Dark Mode Support (if needed in the future)
// =============================================================================
@media (prefers-color-scheme: dark) {
.status-badge {
&.status-active {
background: rgba(34, 197, 94, 0.2);
color: #4ade80;
}
&.status-pending {
background: rgba(251, 191, 36, 0.2);
color: #fbbf24;
}
&.status-completed {
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
}
&.status-cancelled {
background: rgba(239, 68, 68, 0.2);
color: #f87171;
}
}
.priority-badge {
&.priority-high {
background: rgba(239, 68, 68, 0.2);
color: #f87171;
}
&.priority-medium {
background: rgba(251, 191, 36, 0.2);
color: #fbbf24;
}
&.priority-low {
background: rgba(34, 197, 94, 0.2);
color: #4ade80;
}
}
.role-badge {
&.role-buyer {
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
}
&.role-seller {
background: rgba(168, 85, 247, 0.2);
color: #a78bfa;
}
&.role-agent {
background: rgba(34, 197, 94, 0.2);
color: #4ade80;
}
&.role-escrow {
background: rgba(245, 158, 11, 0.2);
color: #fbbf24;
}
&.role-lender {
background: rgba(139, 69, 19, 0.2);
color: #d97706;
}
&.role-coordinator {
background: rgba(75, 85, 99, 0.2);
color: #9ca3af;
}
&.role-default {
background: rgba(107, 114, 128, 0.2);
color: #9ca3af;
}
}
}