33c338345e
Introduces a new Settings page with configurable modules: - General company information - Calendar and booking settings - Billing and payment configurations - Tracking and analytics integrations Implements modular ViewComponents for each settings section Enhances user experience with toggle switches and detailed configuration options
396 lines
8.1 KiB
CSS
396 lines
8.1 KiB
CSS
/**
|
|
* Form Controls - Toggles, Checkboxes, Inputs
|
|
*
|
|
* Reusable form control components used across the application.
|
|
*/
|
|
|
|
/* ===========================================
|
|
TOGGLE SLIDER (Yes/No switch)
|
|
=========================================== */
|
|
swp-toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-3) 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
swp-toggle-label {
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-toggle-description {
|
|
display: block;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
margin-top: var(--spacing-1);
|
|
}
|
|
|
|
swp-toggle-slider {
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
flex-shrink: 0;
|
|
background: var(--color-background);
|
|
border-radius: 6px;
|
|
border: 1px solid var(--color-border);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
swp-toggle-slider::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: calc(50% - 4px);
|
|
height: calc(100% - 4px);
|
|
background: color-mix(in srgb, var(--color-green) 18%, white);
|
|
border-radius: 4px;
|
|
transition: transform 200ms ease, background 200ms ease;
|
|
}
|
|
|
|
swp-toggle-slider[data-value="no"]::before {
|
|
transform: translateX(calc(100% + 4px));
|
|
background: color-mix(in srgb, var(--color-red) 18%, white);
|
|
}
|
|
|
|
swp-toggle-option {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 5px 16px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
transition: color 150ms ease;
|
|
user-select: none;
|
|
}
|
|
|
|
swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
|
|
color: var(--color-green);
|
|
font-weight: 600;
|
|
}
|
|
|
|
swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
|
|
color: var(--color-red);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ===========================================
|
|
TOGGLE OPTIONS (Tab-style selector)
|
|
=========================================== */
|
|
swp-toggle-options {
|
|
display: flex;
|
|
gap: 0;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
|
|
swp-toggle-option {
|
|
flex: 1;
|
|
padding: 10px 16px;
|
|
text-align: center;
|
|
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);
|
|
}
|
|
|
|
&.selected {
|
|
background: var(--color-teal);
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
CHECKBOX LIST
|
|
=========================================== */
|
|
swp-checkbox-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-1);
|
|
}
|
|
|
|
swp-checkbox-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
|
|
&:hover {
|
|
background: var(--color-background-alt);
|
|
}
|
|
|
|
&.checked swp-checkbox-box {
|
|
background: var(--color-teal);
|
|
border-color: var(--color-teal);
|
|
|
|
& svg {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
swp-checkbox-box {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
transition: all var(--transition-fast);
|
|
|
|
& svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
fill: white;
|
|
opacity: 0;
|
|
transition: opacity var(--transition-fast);
|
|
}
|
|
}
|
|
|
|
swp-checkbox-text {
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Intro text for checkbox lists (e.g. notifications) */
|
|
swp-notification-intro {
|
|
display: block;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: var(--spacing-5);
|
|
}
|
|
|
|
/* ===========================================
|
|
SELECT DROPDOWN
|
|
=========================================== */
|
|
swp-select {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
swp-select button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
font-size: var(--font-size-base);
|
|
font-family: inherit;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-background-alt);
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
width: 100%;
|
|
|
|
&:hover {
|
|
background: var(--color-background);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-teal);
|
|
}
|
|
}
|
|
|
|
swp-select-value {
|
|
flex: 1;
|
|
text-align: left;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-select button i {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-base);
|
|
transition: transform 150ms ease;
|
|
}
|
|
|
|
swp-select.open button i {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
swp-select-dropdown {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
z-index: 100;
|
|
margin-top: var(--spacing-1);
|
|
padding: var(--spacing-2);
|
|
min-width: 100%;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-lg);
|
|
max-height: 280px;
|
|
overflow-y: auto;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
swp-select.open swp-select-dropdown {
|
|
display: flex;
|
|
}
|
|
|
|
swp-select-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: background 150ms ease;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text);
|
|
|
|
&:hover {
|
|
background: var(--color-background);
|
|
}
|
|
|
|
&.selected {
|
|
background: var(--bg-teal-subtle);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
&.highlighted {
|
|
background: var(--color-background-alt);
|
|
outline: 2px solid var(--color-teal);
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
COLOR DOT (for color pickers)
|
|
=========================================== */
|
|
swp-color-dot {
|
|
width: 18px;
|
|
height: 12px;
|
|
border-radius: 3px;
|
|
flex-shrink: 0;
|
|
background: var(--b-primary);
|
|
}
|
|
|
|
/* ===========================================
|
|
TIME RANGE SLIDER (Dual-handle range input)
|
|
=========================================== */
|
|
swp-time-range {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
swp-time-range-slider {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
swp-time-range-track {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: var(--color-border);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
swp-time-range-fill {
|
|
position: absolute;
|
|
height: 4px;
|
|
background: var(--color-teal);
|
|
border-radius: 2px;
|
|
cursor: grab;
|
|
|
|
&:active {
|
|
cursor: grabbing;
|
|
}
|
|
}
|
|
|
|
swp-time-range-slider input[type="range"] {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 4px;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
margin: 0;
|
|
|
|
&::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 14px;
|
|
height: 14px;
|
|
background: var(--color-teal);
|
|
border: 2px solid white;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: var(--color-teal);
|
|
border: 2px solid white;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
}
|
|
}
|
|
|
|
swp-time-range-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
min-width: 100px;
|
|
text-align: center;
|
|
background: var(--color-background-alt);
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-time-range-times {
|
|
font-size: 13px;
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
swp-time-range-duration {
|
|
font-size: 11px;
|
|
font-family: var(--font-mono);
|
|
color: var(--color-text-secondary);
|
|
white-space: nowrap;
|
|
}
|