AR 15 M4
0855892643
- components/ui/Button.tsx — компонент Button (primary/secondary/ghost/danger, sm/md/lg, loading/disabled) - components/ui/CodeCopy.tsx — компонент копирования кода (clipboard API) - components/ui/Toggle.tsx — тумблер (client component, bb-toggle-track/thumb) - globals.css — CSS-классы: bb-btn, bb-input/textarea/select, bb-checkbox/radio, bb-toggle, @keyframes bb-spin - app/components/buttons/page.tsx — страница «Кнопки» (варианты, размеры, состояния, code copy, LLM-блок) - app/components/forms/page.tsx — страница «Форм-контролы» (Input/Textarea/Select/Checkbox/Radio/Toggle, LLM-блок) - foundation/logo/page.tsx — добавлен LLM-блок v1.0 - Sidebar: убраны «скоро» с Кнопок и Форм-контролов, версия Sprint 3 · v0.3.0 - docs/LLM_CONTEXT.md → версия 3.0, добавлена секция 9a с компонентами Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
151 lines
5.5 KiB
CSS
151 lines
5.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ─── Бренд-токены О!Клиника ─────────────────────────────────────────── */
|
|
/* Цвета уточняются в Sprint 2 по таблице Oracal */
|
|
:root {
|
|
/* Фирменные цвета (приблизительно — уточнить в Sprint 2) */
|
|
--brand-053m: #7ecfca; /* Основной бирюзовый (Oracal 053M) */
|
|
--brand-073m: #5b7b87; /* Тёмный серо-голубой (Oracal 073M) */
|
|
--brand-066m: #5bb5ad; /* Средний бирюзовый (Oracal 066M) */
|
|
--brand-050m: #1b4c72; /* Тёмно-синий, наружная реклама (Oracal 050M) */
|
|
--brand-081m: #c4a882; /* Бежевый (Oracal 081M) */
|
|
--brand-080m: #5c2e0e; /* Тёмно-коричневый (Oracal 080M) */
|
|
--brand-white: #ffffff;
|
|
|
|
/* UI-цвета брендбука */
|
|
--bb-sidebar-bg: #f8f9fa;
|
|
--bb-sidebar-border: #e5e7eb;
|
|
--bb-sidebar-text: #374151;
|
|
--bb-sidebar-text-muted: #6b7280;
|
|
--bb-sidebar-active-bg: #e0f5f4;
|
|
--bb-sidebar-active-text: var(--brand-053m);
|
|
--bb-sidebar-section: #9ca3af;
|
|
--bb-content-bg: #ffffff;
|
|
--bb-border: #e5e7eb;
|
|
--bb-text: #111827;
|
|
--bb-text-muted: #6b7280;
|
|
|
|
/* Шрифты */
|
|
--font-brand: 'DINPro', 'DIN Pro', Arial, sans-serif;
|
|
--font-web: 'Fira Sans', sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: #ffffff;
|
|
--color-foreground: var(--bb-text);
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-web);
|
|
background: var(--bb-content-bg);
|
|
color: var(--bb-text);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ─── Анимации ───────────────────────────────────────────────── */
|
|
@keyframes bb-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ─── Кнопки (Sprint 3) ──────────────────────────────────────── */
|
|
.bb-btn {
|
|
font-family: var(--font-web);
|
|
font-weight: 500;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
cursor: pointer;
|
|
transition: filter 0.15s, opacity 0.15s;
|
|
white-space: nowrap;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.bb-btn:hover:not(:disabled) { filter: brightness(0.9); }
|
|
.bb-btn:active:not(:disabled) { filter: brightness(0.82); }
|
|
.bb-btn:disabled { cursor: not-allowed; opacity: 0.5; }
|
|
.bb-btn:focus-visible { outline: 2px solid var(--brand-053m); outline-offset: 2px; }
|
|
|
|
.bb-btn-sm { font-size: 13px; padding: 5px 12px; border-radius: 6px; border: 1.5px solid transparent; }
|
|
.bb-btn-md { font-size: 14px; padding: 8px 18px; border-radius: 8px; border: 1.5px solid transparent; }
|
|
.bb-btn-lg { font-size: 16px; padding: 12px 26px; border-radius: 10px; border: 1.5px solid transparent; }
|
|
|
|
.bb-btn-primary { background: var(--brand-073m); color: #fff; border-color: var(--brand-073m); }
|
|
.bb-btn-secondary { background: transparent; color: var(--brand-073m); border-color: var(--brand-073m); }
|
|
.bb-btn-ghost { background: transparent; color: var(--brand-073m); border-color: transparent; }
|
|
.bb-btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
|
|
|
|
/* ─── Форм-контролы (Sprint 3) ───────────────────────────────── */
|
|
.bb-input,
|
|
.bb-textarea,
|
|
.bb-select {
|
|
font-family: var(--font-web);
|
|
font-size: 14px;
|
|
color: var(--bb-text);
|
|
background: #fff;
|
|
border: 1.5px solid var(--bb-border);
|
|
border-radius: 8px;
|
|
padding: 9px 12px;
|
|
width: 100%;
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
outline: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.bb-input:focus,
|
|
.bb-textarea:focus,
|
|
.bb-select:focus {
|
|
border-color: var(--brand-053m);
|
|
box-shadow: 0 0 0 3px rgba(126, 207, 202, 0.2);
|
|
}
|
|
.bb-input.bb-error,
|
|
.bb-textarea.bb-error,
|
|
.bb-select.bb-error { border-color: #dc2626; }
|
|
.bb-input.bb-error:focus,
|
|
.bb-textarea.bb-error:focus,
|
|
.bb-select.bb-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
|
|
.bb-input:disabled,
|
|
.bb-textarea:disabled,
|
|
.bb-select:disabled { opacity: 0.5; cursor: not-allowed; background: var(--bb-sidebar-bg); }
|
|
|
|
.bb-textarea { resize: vertical; min-height: 100px; }
|
|
.bb-select {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
padding-right: 36px;
|
|
}
|
|
|
|
.bb-checkbox,
|
|
.bb-radio {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
accent-color: var(--brand-073m);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ─── Тумблер (Sprint 3) ──────────────────────────────────────── */
|
|
.bb-toggle-track {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: 44px;
|
|
height: 24px;
|
|
border-radius: 12px;
|
|
padding: 2px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
.bb-toggle-thumb {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
transition: transform 0.2s;
|
|
}
|