120367acbb
Adds comprehensive service detail view with multiple tabs and dynamic interactions Implements client-side navigation between service list and detail views Introduces mock service data catalog for flexible component rendering Extends localization support for new service detail screens Improves user experience by adding edit capabilities and smooth view transitions
302 lines
6.5 KiB
CSS
302 lines
6.5 KiB
CSS
/**
|
|
* Drawers - Slide-in Panels
|
|
*
|
|
* Profile drawer, notifications drawer, etc.
|
|
*/
|
|
|
|
/* ===========================================
|
|
BASE DRAWER (Generic)
|
|
=========================================== */
|
|
[data-drawer] {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: var(--drawer-width, 320px);
|
|
height: 100vh;
|
|
background: var(--color-surface);
|
|
border-left: 1px solid var(--color-border);
|
|
box-shadow: var(--shadow-lg);
|
|
z-index: var(--z-drawer);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translateX(100%);
|
|
transition: transform var(--transition-normal);
|
|
}
|
|
|
|
[data-drawer].active,
|
|
[data-drawer].open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Drawer width variants */
|
|
[data-drawer="sm"] { --drawer-width: 280px; }
|
|
[data-drawer="md"] { --drawer-width: 360px; }
|
|
[data-drawer="lg"] { --drawer-width: 420px; }
|
|
[data-drawer="xl"] { --drawer-width: 480px; }
|
|
|
|
/* Legacy support for existing drawers */
|
|
swp-profile-drawer,
|
|
swp-notification-drawer,
|
|
swp-todo-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: 320px;
|
|
height: 100vh;
|
|
background: var(--color-surface);
|
|
border-left: 1px solid var(--color-border);
|
|
box-shadow: var(--shadow-lg);
|
|
z-index: var(--z-drawer);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translateX(100%);
|
|
transition: transform var(--transition-normal);
|
|
}
|
|
|
|
swp-profile-drawer.active,
|
|
swp-notification-drawer.active,
|
|
swp-todo-drawer.active {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* ===========================================
|
|
DRAWER HEADER
|
|
=========================================== */
|
|
swp-drawer-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-10) var(--spacing-12);
|
|
border-bottom: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
swp-drawer-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
font-size: var(--font-size-lg);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-drawer-title swp-count {
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-drawer-close {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
swp-drawer-close:hover {
|
|
background: var(--color-background-hover);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-drawer-close i {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* ===========================================
|
|
DRAWER CONTENT / BODY
|
|
=========================================== */
|
|
swp-drawer-content,
|
|
swp-drawer-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--spacing-8);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-5);
|
|
}
|
|
|
|
swp-drawer-divider {
|
|
height: 1px;
|
|
background: var(--color-border);
|
|
margin: var(--spacing-4) 0;
|
|
}
|
|
|
|
/* ===========================================
|
|
PROFILE SECTION
|
|
=========================================== */
|
|
swp-profile-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: var(--spacing-4) 0;
|
|
}
|
|
|
|
swp-profile-avatar-large {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-teal);
|
|
color: white;
|
|
font-size: var(--font-size-3xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: var(--spacing-3);
|
|
}
|
|
|
|
swp-profile-name-large {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
|
|
swp-profile-email {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
DRAWER MENU
|
|
=========================================== */
|
|
swp-drawer-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-1);
|
|
}
|
|
|
|
swp-drawer-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-3) var(--spacing-3);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-drawer-menu-item:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-drawer-menu-item i {
|
|
font-size: 20px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
THEME TOGGLE
|
|
=========================================== */
|
|
swp-theme-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-3);
|
|
border-radius: var(--border-radius);
|
|
background: var(--color-background);
|
|
}
|
|
|
|
swp-theme-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-theme-label i {
|
|
font-size: 20px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-toggle-switch {
|
|
position: relative;
|
|
width: 44px;
|
|
height: 24px;
|
|
}
|
|
|
|
swp-toggle-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
swp-toggle-track {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
inset: 0;
|
|
background: var(--color-border);
|
|
border-radius: 12px;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
swp-toggle-track::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 18px;
|
|
height: 18px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: transform var(--transition-fast);
|
|
}
|
|
|
|
swp-toggle-switch input:checked + swp-toggle-track {
|
|
background: var(--color-teal);
|
|
}
|
|
|
|
swp-toggle-switch input:checked + swp-toggle-track::before {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
/* ===========================================
|
|
DRAWER FOOTER
|
|
=========================================== */
|
|
swp-drawer-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-4) var(--spacing-5);
|
|
border-top: 1px solid var(--color-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
swp-drawer-action {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-2);
|
|
width: 100%;
|
|
padding: var(--spacing-3);
|
|
font-size: var(--font-size-base);
|
|
font-family: var(--font-family);
|
|
color: var(--color-text-secondary);
|
|
background: transparent;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
|
|
& i {
|
|
font-size: 18px;
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
&.logout:hover {
|
|
color: var(--color-red);
|
|
border-color: var(--color-red);
|
|
}
|
|
}
|