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
274 lines
6 KiB
CSS
274 lines
6 KiB
CSS
/**
|
|
* Services Styles
|
|
*
|
|
* Feature-specific styling only.
|
|
* Reuses:
|
|
* - swp-stat-card (stats.css)
|
|
* - swp-data-table (components.css)
|
|
* - swp-sticky-header, swp-page-container (page.css)
|
|
* - swp-row-toggle (components.css)
|
|
* - swp-btn (components.css)
|
|
* - swp-detail-grid, swp-edit-section (components.css)
|
|
* - swp-tags-row, swp-tag (components.css)
|
|
* - swp-status-indicator (components.css)
|
|
* - swp-fact-boxes-inline (components.css)
|
|
* - view-fade-out (components.css)
|
|
*/
|
|
|
|
/* ===========================================
|
|
SERVICES HEADER (Search + Button)
|
|
=========================================== */
|
|
|
|
swp-services-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--section-gap);
|
|
}
|
|
|
|
swp-services-header swp-btn-group {
|
|
display: flex;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
swp-search-input {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
min-width: 280px;
|
|
|
|
i {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
input {
|
|
border: none;
|
|
background: transparent;
|
|
outline: none;
|
|
box-shadow: none;
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
width: 100%;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
}
|
|
|
|
&:focus-within {
|
|
border-color: var(--color-teal);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
SERVICES LIST TABLE
|
|
=========================================== */
|
|
|
|
swp-card.services-list {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Table columns: Service(1fr) | Varighed(100px) | Pris(100px) | Caret(40px) */
|
|
swp-card.services-list swp-data-table {
|
|
grid-template-columns: 1fr 100px 100px 40px;
|
|
}
|
|
|
|
swp-card.services-list swp-data-table-header,
|
|
swp-card.services-list swp-data-table-row,
|
|
swp-card.services-list swp-category-row {
|
|
padding: 0 var(--spacing-10);
|
|
}
|
|
|
|
swp-card.services-list swp-data-table-header swp-data-table-cell {
|
|
padding-top: var(--spacing-5);
|
|
padding-bottom: var(--spacing-5);
|
|
}
|
|
|
|
swp-card.services-list swp-data-table-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
swp-card.services-list swp-data-table-cell {
|
|
padding: var(--spacing-5) 0;
|
|
|
|
&:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Mono font for duration and price columns */
|
|
swp-card.services-list swp-data-table-row swp-data-table-cell:nth-child(2),
|
|
swp-card.services-list swp-data-table-row swp-data-table-cell:nth-child(3) {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* ===========================================
|
|
CATEGORY ROW
|
|
=========================================== */
|
|
|
|
swp-category-row {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: subgrid;
|
|
background: var(--bg-blue-subtle);
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--color-border);
|
|
border-left: 4px solid var(--color-blue);
|
|
}
|
|
|
|
swp-category-row:hover {
|
|
background: var(--bg-blue-medium);
|
|
}
|
|
|
|
swp-category-row swp-data-table-cell {
|
|
padding: var(--spacing-5) 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
swp-category-row swp-data-table-cell:first-child {
|
|
font-weight: var(--font-weight-semibold);
|
|
font-size: var(--font-size-base);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-category-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--color-blue);
|
|
background: var(--bg-blue-medium);
|
|
border-radius: var(--radius-sm);
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
swp-category-row:hover swp-category-toggle {
|
|
background: var(--bg-blue-strong);
|
|
}
|
|
|
|
swp-category-toggle i {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
swp-category-row[data-expanded="false"] swp-category-toggle i {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.category-name {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.category-count {
|
|
color: var(--color-text-tertiary);
|
|
font-weight: var(--font-weight-normal);
|
|
font-size: var(--font-size-xs);
|
|
margin-left: var(--spacing-2);
|
|
}
|
|
|
|
/* Category edit icon */
|
|
swp-category-edit {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
color: var(--color-text-tertiary);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
swp-category-row:hover swp-category-edit {
|
|
opacity: 1;
|
|
}
|
|
|
|
swp-category-edit:hover {
|
|
color: var(--color-blue);
|
|
background: var(--bg-blue-medium);
|
|
}
|
|
|
|
/* ===========================================
|
|
SERVICE ROW (indented under category)
|
|
=========================================== */
|
|
|
|
swp-card.services-list swp-data-table-row swp-data-table-cell:first-child {
|
|
padding-left: 56px;
|
|
}
|
|
|
|
/* ===========================================
|
|
SERVICE ROW HOVER
|
|
=========================================== */
|
|
|
|
swp-card.services-list swp-data-table-row:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-card.services-list swp-data-table-row:hover swp-row-toggle {
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
/* ===========================================
|
|
VIEW CONTAINERS (List / Detail)
|
|
=========================================== */
|
|
|
|
swp-services-list-view,
|
|
swp-service-detail-view {
|
|
transition: opacity 100ms ease;
|
|
}
|
|
|
|
swp-service-detail-view {
|
|
display: none;
|
|
}
|
|
|
|
/* ===========================================
|
|
SERVICE DETAIL HEADER
|
|
=========================================== */
|
|
|
|
swp-service-detail-header {
|
|
display: flex;
|
|
gap: var(--spacing-6);
|
|
padding: var(--spacing-6) 0;
|
|
}
|
|
|
|
swp-service-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
swp-service-name-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
swp-service-name {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
outline: none;
|
|
|
|
&:focus {
|
|
border-bottom: 1px dashed var(--color-teal);
|
|
}
|
|
}
|