93 lines
1.9 KiB
SCSS
93 lines
1.9 KiB
SCSS
|
/**
|
||
|
|
* Inventory Summary Component Styles
|
||
|
|
* Touch-optimized for kiosk (Raspberry Pi 5) and mobile PWA
|
||
|
|
* Consistent with dashboard-summary component styling
|
||
|
|
*/
|
||
|
|
|
||
|
|
// Touch-optimized sizing
|
||
|
|
$touch-target-min: 48px;
|
||
|
|
$kiosk-font-primary: 20px;
|
||
|
|
$mobile-font-primary: 16px;
|
||
|
|
$spacing-unit: 8px;
|
||
|
|
|
||
|
|
// Status colors — high contrast for workshop/bright environments
|
||
|
|
$color-healthy: #4ade70; // Green — stock OK
|
||
|
|
$color-low: #facc15; // Amber — low stock
|
||
|
|
$color-critical: #f87171; // Red — critical stock
|
||
|
|
|
||
|
|
.inventory-summary {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: $spacing-unit * 2;
|
||
|
|
padding: $spacing-unit * 2;
|
||
|
|
overflow-x: auto;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
padding: $spacing-unit;
|
||
|
|
gap: $spacing-unit;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: $spacing-unit;
|
||
|
|
min-height: $touch-target-min;
|
||
|
|
padding: $spacing-unit $spacing-unit * 2;
|
||
|
|
border-radius: 12px;
|
||
|
|
background-color: rgba(255, 255, 255, 0.05);
|
||
|
|
white-space: nowrap;
|
||
|
|
transition: background-color 0.3s ease;
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
padding: $spacing-unit;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
mat-icon {
|
||
|
|
font-size: 22px !important;
|
||
|
|
width: 22px !important;
|
||
|
|
height: 22px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.metric-value {
|
||
|
|
font-size: $kiosk-font-primary;
|
||
|
|
font-weight: 600;
|
||
|
|
line-height: 1.2;
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
font-size: $mobile-font-primary;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.metric-label {
|
||
|
|
font-size: 12px;
|
||
|
|
color: rgba(255, 255, 255, 0.7);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
font-size: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Low stock states
|
||
|
|
.low-stock {
|
||
|
|
&.has-alerts {
|
||
|
|
background-color: rgba($color-low, 0.15);
|
||
|
|
|
||
|
|
mat-icon {
|
||
|
|
color: $color-low;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.has-critical {
|
||
|
|
background-color: rgba($color-critical, 0.15);
|
||
|
|
|
||
|
|
mat-icon {
|
||
|
|
color: $color-critical;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|