5e3811347c
Implements new service detail tabs for prices, duration, and rules Extends localization support for Danish and English translations Adds dynamic view components for managing service-specific configurations Introduces flexible pricing, duration, and booking rule management Enhances service management with granular configuration options
428 lines
9.2 KiB
CSS
428 lines
9.2 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);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
PRICE MODE TOGGLE (Priser tab)
|
|
=========================================== */
|
|
|
|
swp-price-mode {
|
|
display: flex;
|
|
gap: 0;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
margin-bottom: var(--spacing-6);
|
|
width: fit-content;
|
|
}
|
|
|
|
swp-price-mode-btn {
|
|
padding: var(--spacing-3) var(--spacing-6);
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
background: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
transition: all var(--transition-fast);
|
|
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--color-background-alt);
|
|
}
|
|
|
|
&.active {
|
|
background: var(--color-teal);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
PRICE MATRIX TABLE (Priser tab)
|
|
=========================================== */
|
|
|
|
swp-price-matrix {
|
|
display: block;
|
|
}
|
|
|
|
swp-data-table.price-matrix {
|
|
grid-template-columns: 3fr repeat(4, 2fr);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
|
|
swp-data-table.price-matrix swp-data-table-cell:first-child {
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
swp-data-table.price-matrix span[contenteditable="true"] {
|
|
outline: none;
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
border-radius: var(--radius-sm);
|
|
|
|
&:hover {
|
|
background: var(--color-background-alt);
|
|
}
|
|
|
|
&:focus {
|
|
background: var(--color-surface);
|
|
box-shadow: 0 0 0 2px var(--color-teal);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
DURATION LIST (Varighed tab)
|
|
=========================================== */
|
|
|
|
swp-duration-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
|
|
swp-duration-item {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto auto;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-4);
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-md);
|
|
transition: background var(--transition-fast);
|
|
|
|
&:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
}
|
|
|
|
swp-duration-name {
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-duration-value {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
|
|
span[contenteditable="true"] {
|
|
outline: none;
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
border-radius: var(--radius-sm);
|
|
min-width: 40px;
|
|
text-align: right;
|
|
|
|
&:hover {
|
|
background: var(--color-background);
|
|
}
|
|
|
|
&:focus {
|
|
background: var(--color-surface);
|
|
box-shadow: 0 0 0 2px var(--color-teal);
|
|
}
|
|
}
|
|
}
|
|
|
|
swp-duration-unit {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
swp-duration-delete {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text-tertiary);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
opacity: 0;
|
|
|
|
&:hover {
|
|
color: var(--color-red);
|
|
background: var(--bg-red-subtle);
|
|
}
|
|
}
|
|
|
|
swp-duration-item:hover swp-duration-delete {
|
|
opacity: 1;
|
|
}
|