mirror of
https://github.com/Cleanuparr/Cleanuparr.git
synced 2026-03-26 10:03:12 -04:00
100 lines
2.5 KiB
SCSS
100 lines
2.5 KiB
SCSS
// =============================================================================
|
|
// Shared Settings Page Layout
|
|
// Used by all settings pages for consistent form structure.
|
|
// Usage: @use 'settings-layout' as *;
|
|
// =============================================================================
|
|
|
|
// Apply to :host of settings page components to center the full page
|
|
@mixin settings-page {
|
|
display: block;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@mixin settings-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-6);
|
|
|
|
// Staggered entrance animation for cards and accordions
|
|
> app-card,
|
|
> app-accordion {
|
|
animation: slide-up var(--duration-normal) var(--ease-default) backwards;
|
|
}
|
|
|
|
> :nth-child(1) { animation-delay: 0ms; }
|
|
> :nth-child(2) { animation-delay: 80ms; }
|
|
> :nth-child(3) { animation-delay: 160ms; }
|
|
> :nth-child(4) { animation-delay: 240ms; }
|
|
> :nth-child(5) { animation-delay: 320ms; }
|
|
> :nth-child(6) { animation-delay: 400ms; }
|
|
> :nth-child(7) { animation-delay: 480ms; }
|
|
}
|
|
|
|
// Stacked single-column form layout (preferred for settings pages)
|
|
@mixin form-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-5);
|
|
|
|
// Constrain text/number/select inputs to prevent overly wide fields
|
|
> app-input,
|
|
> app-number-input,
|
|
> app-select {
|
|
max-width: 400px;
|
|
}
|
|
}
|
|
|
|
// Inline row for related fields (e.g. scheduling dropdowns, numeric settings)
|
|
@mixin form-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
// Visual divider between logical groups within a card
|
|
@mixin form-divider {
|
|
height: 1px;
|
|
background: var(--divider);
|
|
margin: var(--space-1) 0;
|
|
}
|
|
|
|
// Legacy grid layout - kept for modals and backward compat
|
|
@mixin form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
@mixin form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-3);
|
|
padding: var(--space-4) var(--space-2);
|
|
|
|
// Sticky at bottom of scroll container (shell__content)
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: var(--z-sticky);
|
|
|
|
// Transparent — button floats over content without blocking it
|
|
background: transparent;
|
|
pointer-events: none;
|
|
|
|
// Re-enable pointer events on the button itself
|
|
> * {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
}
|
|
|
|
@mixin form-section {
|
|
margin-top: var(--space-5);
|
|
}
|
|
|
|
@mixin modal-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|