Zakhar Timoshenko
1492f179eb
- Implemented SCSS styles for compact board in departures. - Created styles for feature discovery modal and its elements. - Added navigation styles for desktop and mobile views. - Developed FeatureDiscovery component with guided steps for user onboarding. - Introduced freshness utility to manage data freshness based on timestamps. - Added tests for freshness utility to ensure correct behavior across various scenarios.
42 lines
3.1 KiB
SCSS
42 lines
3.1 KiB
SCSS
@mixin components {
|
|
.settingsPage { padding: 32px 0 48px; }
|
|
.settingsIntro { margin: 24px 0 32px; }
|
|
.settingsIntro h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.2; letter-spacing: -.5px; margin-bottom: 14px; }
|
|
.settingsIntro p { font-size: 16px; line-height: 1.8; color: var(--muted); }
|
|
.settingsCard { padding: 32px; border-radius: var(--card-radius); background: var(--surface); border: 1px solid var(--line); }
|
|
.themeFieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
|
|
.themeFieldset legend { padding: 0; font-size: 25px; font-weight: 750; letter-spacing: -.3px; }
|
|
.themeOptions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
|
|
.themeOption { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 2px solid transparent; border-radius: 22px; background: var(--lavender); cursor: pointer; min-width: 0; }
|
|
.themeOption:hover { border-color: var(--control-border); }
|
|
.themeOption.selected { border-color: var(--blue); background: var(--blue-soft); }
|
|
.themeOption:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
|
|
.themeRadio { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
|
|
.themeOptionTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 16px; }
|
|
.themeSymbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--surface); color: var(--blue); }
|
|
.themeIndicator { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--blue-muted); border-radius: 50%; color: var(--on-accent); flex-shrink: 0; }
|
|
.selected .themeIndicator { border-color: var(--blue); background: var(--blue); }
|
|
.themeOption > strong { font-size: 19px; line-height: 1.5; }
|
|
.themeDescription { font-size: 15px; line-height: 1.7; color: var(--blue-muted); }
|
|
.themeStatus { margin-top: 24px; color: var(--muted); font-size: 15px; line-height: 1.8; }
|
|
|
|
@media (min-width: 761px) and (max-width: 1050px) {
|
|
.settingsNavLink > span { display: none; }
|
|
}
|
|
@media (max-width: 760px) {
|
|
.settingsPage { padding: 24px 0 32px; }
|
|
.settingsIntro { margin: 20px 0 26px; }
|
|
.settingsCard { padding: 22px 18px; border-radius: 26px; }
|
|
.themeFieldset legend { font-size: 23px; }
|
|
.themeOptions { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
|
|
.themeOption { display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 5px 12px; padding: 18px; border-radius: 18px; }
|
|
.themeOptionTop { display: contents; }
|
|
.themeSymbol { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 40px; height: 40px; border-radius: 12px; }
|
|
.themeIndicator { grid-column: 3; grid-row: 1 / 3; align-self: center; }
|
|
.themeOption > strong { grid-column: 2; grid-row: 1; font-size: 18px; }
|
|
.themeDescription { grid-column: 2; grid-row: 2; }
|
|
.mobileNav { gap: 4px; padding-left: 10px; padding-right: 10px; }
|
|
.mobileNav a { padding: 0 6px; }
|
|
}
|
|
}
|