abcf8ee75e
Introduces reusable view components for bookings and notifications Implements dynamic rendering of booking items and lists Adds corresponding CSS styles for new dashboard components Enhances dashboard user interface with interactive elements
194 lines
4.7 KiB
CSS
194 lines
4.7 KiB
CSS
/**
|
|
* Bookings - Booking List & Items
|
|
*
|
|
* Styling for booking components on dashboard
|
|
*/
|
|
|
|
/* ===========================================
|
|
BOOKING LIST
|
|
=========================================== */
|
|
swp-booking-list {
|
|
display: grid;
|
|
grid-template-columns: 50px 4px 1fr auto auto;
|
|
gap: var(--spacing-4);
|
|
padding: 0 var(--card-body-padding);
|
|
}
|
|
|
|
/* ===========================================
|
|
BOOKING ITEM
|
|
=========================================== */
|
|
swp-booking-item {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: subgrid;
|
|
align-items: center;
|
|
padding: var(--spacing-4);
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-lg);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
swp-booking-item:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-booking-item.completed {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
swp-booking-item.completed swp-booking-indicator {
|
|
background: var(--color-border);
|
|
}
|
|
|
|
swp-booking-item.inprogress {
|
|
background: color-mix(in srgb, var(--color-teal) 8%, var(--color-background-alt));
|
|
}
|
|
|
|
/* ===========================================
|
|
BOOKING TIME
|
|
=========================================== */
|
|
swp-booking-time {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
swp-booking-time swp-time-start {
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-family: var(--font-mono);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-booking-time swp-time-end {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-secondary);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* ===========================================
|
|
BOOKING INDICATOR
|
|
=========================================== */
|
|
swp-booking-indicator {
|
|
width: 4px;
|
|
height: 40px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
swp-booking-indicator.teal { background: var(--color-teal); }
|
|
swp-booking-indicator.blue { background: var(--color-blue); }
|
|
swp-booking-indicator.purple { background: var(--color-purple); }
|
|
swp-booking-indicator.amber { background: var(--color-amber); }
|
|
swp-booking-indicator.green { background: var(--color-green); }
|
|
|
|
/* ===========================================
|
|
BOOKING DETAILS
|
|
=========================================== */
|
|
swp-booking-details {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
swp-booking-service {
|
|
display: block;
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
swp-booking-customer {
|
|
display: block;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
BOOKING EMPLOYEE
|
|
=========================================== */
|
|
swp-booking-employee {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
swp-booking-employee swp-avatar-small {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-teal);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
swp-booking-employee span {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
BOOKING STATUS
|
|
=========================================== */
|
|
swp-booking-status {
|
|
padding: var(--spacing-2) var(--spacing-4);
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
swp-booking-status.confirmed {
|
|
background: color-mix(in srgb, var(--color-green) 15%, transparent);
|
|
color: var(--color-green);
|
|
}
|
|
|
|
swp-booking-status.pending {
|
|
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
swp-booking-status.inprogress,
|
|
swp-booking-status.in-progress {
|
|
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
swp-booking-status.completed {
|
|
background: var(--color-background-hover);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
CURRENT TIME INDICATOR
|
|
=========================================== */
|
|
swp-current-time {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-4) var(--spacing-6);
|
|
background: color-mix(in srgb, var(--color-teal) 10%, transparent);
|
|
border-radius: var(--radius-lg);
|
|
margin: 0 var(--card-body-padding) var(--spacing-4) var(--card-body-padding);
|
|
}
|
|
|
|
swp-current-time i {
|
|
font-size: var(--font-size-lg);
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
swp-current-time span {
|
|
font-size: var(--font-size-md);
|
|
color: var(--color-teal);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
swp-current-time swp-time {
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|