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
92 lines
2.2 KiB
CSS
92 lines
2.2 KiB
CSS
/**
|
|
* Notifications CSS
|
|
*
|
|
* Styling for notification components on dashboard
|
|
*/
|
|
|
|
/* ===========================================
|
|
NOTIFICATION LIST
|
|
=========================================== */
|
|
swp-notification-list {
|
|
display: grid;
|
|
grid-template-columns: 50px 1fr;
|
|
gap: var(--spacing-4) var(--spacing-6);
|
|
padding: 0 var(--card-body-padding);
|
|
}
|
|
|
|
/* ===========================================
|
|
NOTIFICATION ITEM
|
|
=========================================== */
|
|
swp-notification-item {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: subgrid;
|
|
align-items: center;
|
|
padding: var(--spacing-5) var(--spacing-6);
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-xl);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
swp-notification-item:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-notification-item.unread {
|
|
background: color-mix(in srgb, var(--color-teal) 5%, var(--color-background-alt));
|
|
}
|
|
|
|
swp-notification-item.unread:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
/* ===========================================
|
|
NOTIFICATION ICON
|
|
=========================================== */
|
|
swp-notification-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--color-background-hover);
|
|
border-radius: var(--radius-xl);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
|
|
swp-notification-item.unread swp-notification-icon {
|
|
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
/* ===========================================
|
|
NOTIFICATION CONTENT
|
|
=========================================== */
|
|
swp-notification-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
swp-notification-text {
|
|
display: block;
|
|
font-size: var(--font-size-md);
|
|
color: var(--color-text);
|
|
line-height: var(--line-height-snug);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
swp-notification-text strong {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
swp-notification-time {
|
|
display: block;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-secondary);
|
|
margin-top: var(--spacing-1);
|
|
}
|