545d6606a6
Enhances employee hours view with dynamic weekly schedule rendering Updates toggle slider and theme switch components with improved interactions Adds more flexible notification and settings configurations for employees Improves user experience by streamlining UI controls and schedule display
183 lines
3.9 KiB
CSS
183 lines
3.9 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;
|
|
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);
|
|
}
|