Apps, web, i18n, UI, partners, payouts, backoffice, bariki, prod infra
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
zabudko-ruandClaude Opus 5.5 committed
1 parent
45d7512d2b
commit
3489e0b816
319 files changed
+45483
-121
No files matched your search
@@ -0,0 +1,211 @@
|
||||
import type { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, CSSProperties } from 'react';
|
||||
|
||||
const cx = (...c: (string | false | null | undefined)[]) => c.filter(Boolean).join(' ');
|
||||
|
||||
export type Tone = 'home' | 'docs' | 'learn' | 'perks' | 'pink' | 'blue' | 'dark' | 'white';
|
||||
export type CategoryCode = 'HOME' | 'DOCS' | 'LEARNING' | 'PERKS';
|
||||
|
||||
/** Цвет направления (раздел 9) */
|
||||
export const CATEGORY_TONE: Record<CategoryCode, Tone> = { HOME: 'home', DOCS: 'docs', LEARNING: 'learn', PERKS: 'perks' };
|
||||
|
||||
type BtnVariant = 'dark' | 'light' | 'outline' | 'accent' | 'ghost' | 'danger';
|
||||
|
||||
export function Button({
|
||||
variant = 'dark',
|
||||
size,
|
||||
block,
|
||||
className,
|
||||
...rest
|
||||
}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: BtnVariant; size?: 'sm'; block?: boolean }) {
|
||||
return <button type="button" className={cx('bc-btn', `bc-btn--${variant}`, size && `bc-btn--${size}`, block && 'bc-btn--block', className)} {...rest} />;
|
||||
}
|
||||
|
||||
export function LinkButton({
|
||||
variant = 'dark',
|
||||
size,
|
||||
block,
|
||||
className,
|
||||
...rest
|
||||
}: AnchorHTMLAttributes<HTMLAnchorElement> & { variant?: BtnVariant; size?: 'sm'; block?: boolean }) {
|
||||
return <a className={cx('bc-btn', `bc-btn--${variant}`, size && `bc-btn--${size}`, block && 'bc-btn--block', className)} {...rest} />;
|
||||
}
|
||||
|
||||
export function Card({ tone, tight, className, style, children, as: As = 'div', ...rest }: { tone?: Tone; tight?: boolean; className?: string; style?: CSSProperties; children?: ReactNode; as?: 'div' | 'section' | 'article' } & Record<string, unknown>) {
|
||||
return (
|
||||
<As className={cx('bc-card', tight && 'bc-card--tight', tone && `bc-tone-${tone}`, className)} style={style} {...rest}>
|
||||
{children}
|
||||
</As>
|
||||
);
|
||||
}
|
||||
|
||||
export function Badge({ children, dot, style }: { children: ReactNode; dot?: boolean; style?: CSSProperties }) {
|
||||
return (
|
||||
<span className={cx('bc-badge', dot && 'bc-badge--dot')} style={style}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function Chip({ pressed, ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & { pressed?: boolean }) {
|
||||
return <button type="button" className="bc-chip" aria-pressed={pressed} {...rest} />;
|
||||
}
|
||||
|
||||
export function Segmented<T extends string>({ value, options, onChange, label }: { value: T; options: { value: T; label: ReactNode }[]; onChange: (v: T) => void; label?: string }) {
|
||||
return (
|
||||
<div className="bc-segmented" role="group" aria-label={label}>
|
||||
{options.map((o) => (
|
||||
<button key={o.value} type="button" aria-pressed={o.value === value} onClick={() => onChange(o.value)}>
|
||||
{o.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Stepper({ value, min, max, onChange, decLabel = '−', incLabel = '+' }: { value: number; min: number; max: number; onChange: (v: number) => void; decLabel?: string; incLabel?: string }) {
|
||||
return (
|
||||
<div className="bc-stepper">
|
||||
<button type="button" aria-label={decLabel} disabled={value <= min} onClick={() => onChange(Math.max(min, value - 1))}>
|
||||
−
|
||||
</button>
|
||||
<output aria-live="polite">{value}</output>
|
||||
<button type="button" aria-label={incLabel} disabled={value >= max} onClick={() => onChange(Math.min(max, value + 1))}>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Field({ label, error, children, htmlFor }: { label?: ReactNode; error?: ReactNode; children: ReactNode; htmlFor?: string }) {
|
||||
return (
|
||||
<div className="bc-field">
|
||||
{label && (
|
||||
<label className="bc-label" htmlFor={htmlFor}>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
{children}
|
||||
{error && <div className="bc-error">{error}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Spinner({ label }: { label?: string }) {
|
||||
return <div className="bc-spinner" role="status" aria-label={label} />;
|
||||
}
|
||||
|
||||
export function Center({ children }: { children: ReactNode }) {
|
||||
return <div className="bc-center">{children}</div>;
|
||||
}
|
||||
|
||||
/** «Цветок» из макета: круг + 10 лепестков */
|
||||
export function Flower({ size = 72, color = '#B8235A', rotate = -10, children, textColor = '#fff', fontSize }: { size?: number; color?: string; rotate?: number; children?: ReactNode; textColor?: string; fontSize?: number }) {
|
||||
return (
|
||||
<div className="bc-flower" style={{ width: size, height: size, transform: `rotate(${rotate}deg)` }}>
|
||||
<svg aria-hidden="true" viewBox="0 0 100 100" width={size} height={size}>
|
||||
<g fill={color}>
|
||||
<circle cx="50" cy="50" r="34" />
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
|
||||
const a = (i * Math.PI) / 5;
|
||||
return <circle key={i} cx={50 + 32 * Math.cos(a)} cy={50 + 32 * Math.sin(a)} r="16" />;
|
||||
})}
|
||||
</g>
|
||||
</svg>
|
||||
{children !== undefined && <span style={{ color: textColor, fontSize: fontSize ?? size * 0.36, transform: `rotate(${-rotate}deg)` }}>{children}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Sheet({ open, onClose, children, label }: { open: boolean; onClose: () => void; children: ReactNode; label?: string }) {
|
||||
if (!open) return null;
|
||||
return (
|
||||
<div className="bc-sheet-backdrop" onClick={onClose}>
|
||||
<div className="bc-sheet" role="dialog" aria-modal="true" aria-label={label} onClick={(e) => e.stopPropagation()}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Steps({ items }: { items: { label: ReactNode; state: 'done' | 'current' | 'todo'; meta?: ReactNode }[] }) {
|
||||
return (
|
||||
<ol className="bc-steps" style={{ listStyle: 'none', margin: 0, padding: 0 }}>
|
||||
{items.map((s, i) => (
|
||||
<li key={i} className={`bc-step bc-step--${s.state}`}>
|
||||
<span className="bc-step__dot" aria-hidden="true">
|
||||
{s.state === 'done' && <Icon name="check" size={14} />}
|
||||
</span>
|
||||
<span>
|
||||
<span className="bc-step__label">{s.label}</span>
|
||||
{s.meta && <div className="bc-small bc-muted">{s.meta}</div>}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
|
||||
// ───── иконки из макета (stroke 2, round) ─────
|
||||
|
||||
const ICONS = {
|
||||
home: 'M4 11l8-7 8 7v9H4z',
|
||||
docs: 'M7 3h7l5 5v13H7zM14 3v5h5M10 13h6M10 17h6',
|
||||
learn: 'M4 5h6a2 2 0 0 1 2 2v13a2 2 0 0 0-2-2H4zM20 5h-6a2 2 0 0 0-2 2v13a2 2 0 0 1 2-2h6z',
|
||||
gift: 'M4 8h16v4H4zM5 12h14v8H5zM12 8v12M12 8c-2-3-6-3-6 0M12 8c2-3 6-3 6 0',
|
||||
check: 'M5 12l4 4 10-10',
|
||||
arrow: 'M5 12h14M13 6l6 6-6 6',
|
||||
back: 'M19 12H5M11 18l-6-6 6-6',
|
||||
plus: 'M12 5v14M5 12h14',
|
||||
grid: 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z',
|
||||
user: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0',
|
||||
clock: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
|
||||
pin: 'M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11zM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
|
||||
camera: 'M4 8h3l2-3h6l2 3h3v11H4zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
|
||||
chat: 'M4 5h16v11H8l-4 4z',
|
||||
star: 'M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z',
|
||||
logo: 'M12 21.5a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19zM8 12.5l2.6 2.6L16 9.5',
|
||||
close: 'M6 6l12 12M18 6L6 18',
|
||||
repeat: 'M4 12a8 8 0 0 1 14-5.3L20 9M20 4v5h-5M20 12a8 8 0 0 1-14 5.3L4 15M4 20v-5h5',
|
||||
globe: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z',
|
||||
} as const;
|
||||
export type IconName = keyof typeof ICONS;
|
||||
|
||||
export const CATEGORY_ICON: Record<CategoryCode, IconName> = { HOME: 'home', DOCS: 'docs', LEARNING: 'learn', PERKS: 'gift' };
|
||||
|
||||
export function Icon({ name, size = 22, strokeWidth = 2, style, label }: { name: IconName; size?: number; strokeWidth?: number; style?: CSSProperties; label?: string }) {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={{ flex: 'none', ...style }}
|
||||
aria-hidden={label ? undefined : true}
|
||||
role={label ? 'img' : undefined}
|
||||
aria-label={label}
|
||||
>
|
||||
<path d={ICONS[name]} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function Logo({ size = 24, color = '#4A1028', text = 'Barev Club' }: { size?: number; color?: string; text?: string }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, color }}>
|
||||
<Icon name="logo" size={size} strokeWidth={2.4} />
|
||||
<div style={{ fontFamily: 'var(--bc-font-head)', fontWeight: 700, fontSize: size * 0.84 }}>{text}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Toast({ message, kind = 'info' }: { message: ReactNode; kind?: 'info' | 'error' }) {
|
||||
return (
|
||||
<div className={cx('bc-toast', kind === 'error' && 'bc-toast--error')} role={kind === 'error' ? 'alert' : 'status'}>
|
||||
{message}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,598 @@
|
||||
/*
|
||||
* Barev Club — дизайн-токены и базовые компоненты (PRD, раздел 9; макет «Лендинг v2 · плотный»).
|
||||
* Подключение: import '@barev/ui/styles.css'. Шрифты Rubik + Onest грузит приложение.
|
||||
*/
|
||||
:root {
|
||||
--bc-bg: #fbf6ee;
|
||||
--bc-surface: #ffffff;
|
||||
--bc-ink: #1e1b1a;
|
||||
--bc-ink-2: #5c5550;
|
||||
--bc-ink-3: #8a827c;
|
||||
--bc-line: #ece4d8;
|
||||
--bc-accent: #b8235a;
|
||||
--bc-plum: #4a1028;
|
||||
--bc-dark: #1e1b1a;
|
||||
--bc-dark-2: #2e2a28;
|
||||
--bc-ok: #1f7a52;
|
||||
--bc-danger: #b3261e;
|
||||
|
||||
/* направления: фон / текст на фоне */
|
||||
--bc-home: #a8c38a;
|
||||
--bc-home-ink: #1f3311;
|
||||
--bc-docs: #f9cdb0;
|
||||
--bc-docs-ink: #4d200a;
|
||||
--bc-learn: #cfc8f5;
|
||||
--bc-learn-ink: #2b1f5c;
|
||||
--bc-perks: #f7da6e;
|
||||
--bc-perks-ink: #4a1028;
|
||||
--bc-pink: #f6c3d3;
|
||||
--bc-pink-ink: #4a1028;
|
||||
--bc-blue: #bcd0f2;
|
||||
--bc-blue-ink: #12264d;
|
||||
|
||||
--bc-r-sm: 20px;
|
||||
--bc-r-md: 24px;
|
||||
--bc-r-lg: 32px;
|
||||
--bc-r-xl: 36px;
|
||||
--bc-pill: 999px;
|
||||
--bc-tap: 44px;
|
||||
|
||||
--bc-font-head: 'Rubik', system-ui, sans-serif;
|
||||
--bc-font-body: 'Onest', system-ui, sans-serif;
|
||||
--bc-shadow: 0 8px 30px rgba(30, 27, 26, 0.08);
|
||||
}
|
||||
|
||||
/* Армянский и китайский: Rubik и Onest их не содержат */
|
||||
:root:lang(hy) {
|
||||
--bc-font-head: 'Rubik', 'Noto Sans Armenian', system-ui, sans-serif;
|
||||
--bc-font-body: 'Onest', 'Noto Sans Armenian', system-ui, sans-serif;
|
||||
}
|
||||
:root:lang(zh) {
|
||||
--bc-font-head: 'Rubik', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
|
||||
--bc-font-body: 'Onest', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bc-bg);
|
||||
color: var(--bc-ink);
|
||||
font-family: var(--bc-font-body);
|
||||
font-size: 15px;
|
||||
line-height: 1.45;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--bc-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ───── типографика ───── */
|
||||
.bc-h1,
|
||||
.bc-h2,
|
||||
.bc-h3 {
|
||||
font-family: var(--bc-font-head);
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
}
|
||||
.bc-h1 {
|
||||
font-weight: 800;
|
||||
font-size: clamp(32px, 5.4vw, 74px);
|
||||
line-height: 0.98;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.bc-h2 {
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.bc-h3 {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
/* приём «жирное + курсив» */
|
||||
.bc-italic {
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
.bc-muted {
|
||||
color: var(--bc-ink-2);
|
||||
}
|
||||
.bc-small {
|
||||
font-size: 13px;
|
||||
}
|
||||
.bc-num {
|
||||
font-family: var(--bc-font-head);
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ───── кнопки-таблетки ───── */
|
||||
.bc-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
min-height: var(--bc-tap);
|
||||
height: 52px;
|
||||
padding: 0 24px;
|
||||
border-radius: var(--bc-pill);
|
||||
border: 2px solid transparent;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.08s ease, opacity 0.15s ease, background 0.15s ease;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
.bc-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.bc-btn[disabled] {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
.bc-btn--dark {
|
||||
background: var(--bc-dark);
|
||||
color: #fff;
|
||||
}
|
||||
.bc-btn--light {
|
||||
background: var(--bc-surface);
|
||||
color: var(--bc-ink);
|
||||
}
|
||||
.bc-btn--outline {
|
||||
background: transparent;
|
||||
border-color: var(--bc-ink);
|
||||
color: var(--bc-ink);
|
||||
}
|
||||
.bc-btn--accent {
|
||||
background: var(--bc-accent);
|
||||
color: #fff;
|
||||
}
|
||||
.bc-btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--bc-ink);
|
||||
padding: 0 12px;
|
||||
}
|
||||
.bc-btn--danger {
|
||||
background: transparent;
|
||||
border-color: var(--bc-danger);
|
||||
color: var(--bc-danger);
|
||||
}
|
||||
.bc-btn--sm {
|
||||
height: var(--bc-tap);
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.bc-btn--block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ───── карточки ───── */
|
||||
.bc-card {
|
||||
background: var(--bc-surface);
|
||||
border-radius: var(--bc-r-lg);
|
||||
padding: 20px;
|
||||
}
|
||||
.bc-card--tight {
|
||||
border-radius: var(--bc-r-md);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.bc-tone-home {
|
||||
background: var(--bc-home);
|
||||
color: var(--bc-home-ink);
|
||||
}
|
||||
.bc-tone-docs {
|
||||
background: var(--bc-docs);
|
||||
color: var(--bc-docs-ink);
|
||||
}
|
||||
.bc-tone-learn {
|
||||
background: var(--bc-learn);
|
||||
color: var(--bc-learn-ink);
|
||||
}
|
||||
.bc-tone-perks {
|
||||
background: var(--bc-perks);
|
||||
color: var(--bc-perks-ink);
|
||||
}
|
||||
.bc-tone-pink {
|
||||
background: var(--bc-pink);
|
||||
color: var(--bc-pink-ink);
|
||||
}
|
||||
.bc-tone-blue {
|
||||
background: var(--bc-blue);
|
||||
color: var(--bc-blue-ink);
|
||||
}
|
||||
.bc-tone-dark {
|
||||
background: var(--bc-dark);
|
||||
color: #fff;
|
||||
}
|
||||
.bc-tone-white {
|
||||
background: var(--bc-surface);
|
||||
color: var(--bc-ink);
|
||||
}
|
||||
|
||||
/* ───── бейджи и чипы ───── */
|
||||
.bc-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--bc-pill);
|
||||
background: var(--bc-surface);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bc-badge--dot::before {
|
||||
content: '';
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
.bc-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
min-height: var(--bc-tap);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--bc-pill);
|
||||
background: var(--bc-surface);
|
||||
border: 2px solid transparent;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bc-chip[aria-pressed='true'] {
|
||||
background: var(--bc-dark);
|
||||
color: #fff;
|
||||
}
|
||||
.bc-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* строка-таблетка услуги «Клининг … от N ֏» */
|
||||
.bc-row-pill {
|
||||
min-height: 46px;
|
||||
padding: 0 16px;
|
||||
border-radius: var(--bc-pill);
|
||||
background: var(--bc-surface);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
color: var(--bc-ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ───── поля ───── */
|
||||
.bc-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.bc-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--bc-ink-2);
|
||||
}
|
||||
.bc-input {
|
||||
min-height: 50px;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 18px;
|
||||
border: 2px solid var(--bc-line);
|
||||
background: var(--bc-surface);
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
}
|
||||
.bc-input:focus {
|
||||
border-color: var(--bc-ink);
|
||||
}
|
||||
textarea.bc-input {
|
||||
resize: vertical;
|
||||
min-height: 90px;
|
||||
}
|
||||
.bc-error {
|
||||
color: var(--bc-danger);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* степпер −/+ */
|
||||
.bc-stepper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
border-radius: var(--bc-pill);
|
||||
background: var(--bc-surface);
|
||||
}
|
||||
.bc-stepper button {
|
||||
width: var(--bc-tap);
|
||||
height: var(--bc-tap);
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--bc-bg);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bc-stepper button[disabled] {
|
||||
opacity: 0.35;
|
||||
}
|
||||
.bc-stepper output {
|
||||
min-width: 36px;
|
||||
text-align: center;
|
||||
font-family: var(--bc-font-head);
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* сегменты (переключатель тарифов, табы) */
|
||||
.bc-segmented {
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
gap: 4px;
|
||||
border-radius: var(--bc-pill);
|
||||
background: var(--bc-surface);
|
||||
}
|
||||
.bc-segmented button {
|
||||
flex: 1;
|
||||
min-height: 40px;
|
||||
border-radius: var(--bc-pill);
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bc-segmented button[aria-pressed='true'] {
|
||||
background: var(--bc-dark);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ───── тёмная нижняя навигация-таблетка с белой «+» ───── */
|
||||
.bc-bottomnav {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: calc(12px + env(safe-area-inset-bottom));
|
||||
transform: translateX(-50%);
|
||||
width: min(440px, calc(100% - 24px));
|
||||
height: 64px;
|
||||
padding: 0 8px;
|
||||
border-radius: var(--bc-pill);
|
||||
background: var(--bc-dark);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 10px 30px rgba(30, 27, 26, 0.25);
|
||||
z-index: 50;
|
||||
}
|
||||
.bc-bottomnav a,
|
||||
.bc-bottomnav button {
|
||||
flex: 1;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
color: #cfc8c2;
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: var(--bc-pill);
|
||||
}
|
||||
.bc-bottomnav [aria-current='page'] {
|
||||
color: #fff;
|
||||
}
|
||||
.bc-bottomnav .bc-bottomnav__plus {
|
||||
flex: none;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: var(--bc-dark);
|
||||
}
|
||||
|
||||
/* ───── «цветок» (scalloped shape) ───── */
|
||||
.bc-flower {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
}
|
||||
.bc-flower svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.bc-flower > span {
|
||||
position: relative;
|
||||
font-family: var(--bc-font-head);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ───── прочее ───── */
|
||||
.bc-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.bc-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.bc-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
.bc-divider {
|
||||
height: 1px;
|
||||
background: var(--bc-line);
|
||||
border: none;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.bc-spinner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--bc-line);
|
||||
border-top-color: var(--bc-accent);
|
||||
animation: bc-spin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes bc-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.bc-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 40vh;
|
||||
}
|
||||
.bc-sheet-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(30, 27, 26, 0.45);
|
||||
z-index: 80;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.bc-sheet {
|
||||
width: min(560px, 100%);
|
||||
max-height: 88vh;
|
||||
overflow: auto;
|
||||
background: var(--bc-bg);
|
||||
border-radius: var(--bc-r-xl) var(--bc-r-xl) 0 0;
|
||||
padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
.bc-sheet-backdrop {
|
||||
align-items: center;
|
||||
}
|
||||
.bc-sheet {
|
||||
border-radius: var(--bc-r-xl);
|
||||
}
|
||||
}
|
||||
.bc-toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: calc(12px + env(safe-area-inset-top));
|
||||
transform: translateX(-50%);
|
||||
z-index: 90;
|
||||
max-width: calc(100% - 24px);
|
||||
padding: 12px 18px;
|
||||
border-radius: var(--bc-pill);
|
||||
background: var(--bc-dark);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
box-shadow: var(--bc-shadow);
|
||||
}
|
||||
.bc-toast--error {
|
||||
background: var(--bc-danger);
|
||||
}
|
||||
|
||||
/* шкала прогресса статусов */
|
||||
.bc-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
.bc-step {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
min-height: 40px;
|
||||
}
|
||||
.bc-step__dot {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--bc-line);
|
||||
background: var(--bc-surface);
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.bc-step--done .bc-step__dot {
|
||||
background: var(--bc-ok);
|
||||
border-color: var(--bc-ok);
|
||||
color: #fff;
|
||||
}
|
||||
.bc-step--current .bc-step__dot {
|
||||
border-color: var(--bc-accent);
|
||||
box-shadow: 0 0 0 4px rgba(184, 35, 90, 0.15);
|
||||
}
|
||||
.bc-step--current .bc-step__label {
|
||||
font-weight: 700;
|
||||
}
|
||||
.bc-step--todo .bc-step__label {
|
||||
color: var(--bc-ink-3);
|
||||
}
|
||||
|
||||
/* чекбокс-строка (чек-лист исполнителя) */
|
||||
.bc-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-height: 56px;
|
||||
padding: 10px 16px;
|
||||
border-radius: var(--bc-r-sm);
|
||||
background: var(--bc-surface);
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.bc-check input {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
accent-color: var(--bc-ok);
|
||||
flex: none;
|
||||
}
|
||||
.bc-check--done {
|
||||
border-color: var(--bc-ok);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user