company flows
This commit is contained in:
parent
6541284a4c
commit
cc3f3f3de5
17 changed files with 1960 additions and 66 deletions
|
|
@ -282,6 +282,73 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.company-domain-recheck { padding:0; display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:#7357F6; font-size:12px; font-weight:600; cursor:pointer; }
|
||||
.company-domain-placeholder { margin-top:16px; padding:32px; display:grid; justify-items:center; gap:8px; border:1px dashed #E4E1E8; border-radius:12px; background:#FAFAFC; color:#8d8792; font-size:13px; text-align:center; }
|
||||
|
||||
.company-people { padding:8px 0 24px; }
|
||||
.company-people-head { margin-bottom:20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
|
||||
.company-people-head h1 { margin:0 0 8px; font:700 clamp(28px,3vw,36px)/1.15 "DM Sans"; letter-spacing:-.6px; color:#1a1628; }
|
||||
.company-people-head p { margin:0; color:#77758A; font-size:14px; }
|
||||
.company-people-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
|
||||
.people-import-btn { min-height:40px; opacity:.55; cursor:not-allowed; }
|
||||
.people-tabs { margin-bottom:14px; display:flex; flex-wrap:wrap; gap:18px; border-bottom:1px solid #ECE9F2; }
|
||||
.people-tabs button { padding:10px 2px 12px; border:0; border-bottom:2px solid transparent; background:transparent; color:#8d8792; font-size:13px; font-weight:600; cursor:pointer; }
|
||||
.people-tabs button em { margin-left:6px; color:#b4afba; font-style:normal; font-weight:500; }
|
||||
.people-tabs button.active { color:#e15b45; border-bottom-color:#e15b45; }
|
||||
.people-tabs button.active em { color:#e15b45; }
|
||||
.people-filters { margin-bottom:14px; display:flex; gap:10px; }
|
||||
.people-search { flex:1; min-width:0; height:40px; padding:0 12px; display:flex; align-items:center; gap:8px; border:1px solid #E1DFE7; border-radius:10px; background:#fff; color:#8d8792; }
|
||||
.people-search input { width:100%; border:0; outline:0; background:transparent; font-size:13px; color:#1a1628; }
|
||||
.people-filters select { height:40px; padding:0 12px; border:1px solid #E1DFE7; border-radius:10px; background:#fff; font-size:13px; color:#4a4652; }
|
||||
.people-table-wrap { border:1px solid #ECE9F2; border-radius:16px; background:#fff; overflow:auto; box-shadow:0 8px 28px rgba(20,18,30,0.04); }
|
||||
.people-table { width:100%; border-collapse:collapse; font-size:13px; }
|
||||
.people-table th { padding:12px 14px; text-align:left; color:#8d8792; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid #F0EEF5; background:#FAFAFC; }
|
||||
.people-table td { padding:12px 14px; border-bottom:1px solid #F5F3F8; color:#3d3948; vertical-align:middle; }
|
||||
.people-table tr:last-child td { border-bottom:0; }
|
||||
.people-table-empty { padding:28px 14px !important; text-align:center; color:#8d8792; }
|
||||
.people-name-cell { display:flex; align-items:center; gap:10px; font-weight:600; color:#1a1628; }
|
||||
.people-avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#F0EBFF; color:#7357F6; font-size:11px; font-weight:700; flex-shrink:0; }
|
||||
.people-status { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
|
||||
.people-status-active { background:#EEF8F1; color:#2f6b43; }
|
||||
.people-status-invited { background:#FFF4E5; color:#c4842d; }
|
||||
.people-status-suspended { background:#FFF0EB; color:#b04a38; }
|
||||
.people-row-menu { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#8d8792; cursor:pointer; }
|
||||
.people-row-menu:hover { background:#F6F2FF; color:#7357F6; }
|
||||
.people-drawer-scrim { position:fixed; inset:0; z-index:40; display:flex; justify-content:flex-end; background:rgba(20,18,30,0.28); backdrop-filter:blur(2px); }
|
||||
.people-drawer { width:min(440px,100%); height:100%; padding:24px 24px 28px; display:flex; flex-direction:column; background:#fff; box-shadow:-12px 0 40px rgba(20,18,30,0.12); overflow:auto; }
|
||||
.people-drawer-head { margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
|
||||
.people-drawer-head h2 { margin:0; font:700 22px/1.2 "DM Sans"; color:#1a1628; }
|
||||
.people-drawer-close { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:8px; background:#F5F3F8; color:#6f6c7b; cursor:pointer; }
|
||||
.people-drawer-form { display:grid; gap:16px; }
|
||||
.people-drawer-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
|
||||
.people-drawer-form label,.people-groups-field { display:grid; gap:6px; font-size:12px; font-weight:600; color:#4a4652; }
|
||||
.people-drawer-form label span,.people-groups-field legend span { color:#e15b45; }
|
||||
.people-drawer-form input,.people-drawer-form select { height:42px; padding:0 12px; border:1px solid #E1DFE7; border-radius:10px; background:#fff; font-size:13px; color:#1a1628; }
|
||||
.people-drawer-form small { color:#8d8792; font-weight:500; line-height:1.4; }
|
||||
.people-email-field { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
|
||||
.people-email-field span { color:#8d8792; font-size:13px; font-weight:600; }
|
||||
.people-groups-field { margin:0; padding:0; border:0; }
|
||||
.people-groups-field legend { margin-bottom:6px; font-size:12px; font-weight:600; color:#4a4652; }
|
||||
.people-groups-options { display:flex; flex-wrap:wrap; gap:8px; }
|
||||
.people-group-chip { padding:6px 12px; border:1px solid #E1DFE7; border-radius:999px; background:#fff; color:#6f6c7b; font-size:12px; font-weight:600; cursor:pointer; }
|
||||
.people-group-chip.active { border-color:#C8B8FF; background:#F6F2FF; color:#5a4fcf; }
|
||||
.people-toggle-row { display:flex !important; align-items:flex-start; justify-content:space-between; gap:12px; }
|
||||
.people-toggle-row strong { display:block; margin-bottom:2px; font-size:13px; color:#1a1628; }
|
||||
.people-toggle-row input { width:18px; height:18px; margin-top:4px; accent-color:#7357F6; }
|
||||
.people-drawer-actions { margin-top:8px; display:flex; justify-content:flex-end; gap:10px; }
|
||||
.group-avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; font-size:12px; font-weight:700; flex-shrink:0; }
|
||||
.group-avatar.tone-green { background:#E8F7F3; color:#2d8a72; }
|
||||
.group-avatar.tone-violet { background:#F0EBFF; color:#7357F6; }
|
||||
.group-avatar.tone-blue { background:#E8F0FF; color:#4f6fd8; }
|
||||
.group-avatar.tone-amber { background:#FFF4E5; color:#c4842d; }
|
||||
.group-avatar.tone-coral { background:#FFF0EB; color:#e15b45; }
|
||||
.group-avatar.tone-teal { background:#E8F7F3; color:#2d8a72; }
|
||||
.group-type-badge,.alias-type-badge { display:inline-flex; padding:4px 10px; border-radius:999px; background:#EEF4FF; color:#4f6fd8; font-size:11px; font-weight:600; }
|
||||
.group-member-count { display:inline-flex; align-items:center; gap:5px; color:#6f6c7b; font-size:12px; font-weight:600; }
|
||||
.alias-address-cell { display:flex; align-items:center; gap:8px; font-weight:600; color:#1a1628; }
|
||||
.alias-address-cell svg { color:#8d8792; }
|
||||
.org-member-picker { max-height:220px; overflow:auto; display:grid; gap:6px; padding:10px; border:1px solid #ECE9F2; border-radius:10px; background:#FAFAFC; }
|
||||
.org-member-picker-empty { margin:0; color:#8d8792; font-size:12px; }
|
||||
.org-member-picker-row { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:center; font-size:13px; color:#3d3948; cursor:pointer; }
|
||||
.org-member-picker-row small { grid-column:2; color:#8d8792; font-size:11px; }
|
||||
|
||||
.dns-copy { flex-shrink:0; border:0; border-radius:7px; padding:4px; background:#f7f3f1; color:#8c8790; cursor:pointer; }
|
||||
.dns-copy:hover { background:#fff0eb; color:var(--coral); }
|
||||
.dashboard-scrim { display:none; }
|
||||
|
|
@ -541,14 +608,15 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.dns-copy { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; border:1px solid #ece7e3; border-radius:8px; background:white; color:#67677a; }
|
||||
.link-button { border:0; background:transparent; color:var(--coral); font:inherit; font-weight:600; cursor:pointer; padding:0; }
|
||||
.dashboard { grid-template-columns:228px minmax(0,1fr); background:var(--canvas); }
|
||||
.dashboard-sidebar { width:228px; min-height:100vh; max-height:100vh; padding:var(--space-4) var(--space-3) var(--space-3); display:flex; flex-direction:column; overflow:auto; border-right:0; color:#d7d3e2; background:linear-gradient(180deg,#171329 0%,#120f24 55%,#100d20 100%); box-shadow:inset -1px 0 0 #ffffff08; position:sticky; top:0; }
|
||||
.dashboard-brand-row { padding:0 6px 2px; }
|
||||
.dashboard-sidebar { width:228px; min-height:100vh; max-height:100vh; padding:var(--space-4) var(--space-3) var(--space-3); display:flex; flex-direction:column; overflow:hidden; border-right:0; color:#d7d3e2; background:linear-gradient(180deg,#171329 0%,#120f24 55%,#100d20 100%); box-shadow:inset -1px 0 0 #ffffff08; position:sticky; top:0; }
|
||||
.dashboard-brand-row { flex-shrink:0; padding:0 6px 2px; }
|
||||
.dashboard-sidebar-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
|
||||
.dashboard-brand-row>button { color:#c8c3d4; }
|
||||
.dashboard-sidebar .brand { color:#fff; font-size:17px; }
|
||||
.dashboard-sidebar .brand-mark { background:#fff; }
|
||||
.dashboard-sidebar .robot-eyes i { background:#1c1730; }
|
||||
.dashboard-sidebar .robot-smile { border-color:#1c1730; }
|
||||
.dashboard-compose-wrap { margin:var(--space-4) var(--space-1) 0; display:flex; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-accent); }
|
||||
.dashboard-compose-wrap { flex-shrink:0; margin:var(--space-4) var(--space-1) 0; display:flex; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-accent); }
|
||||
.dashboard-compose { flex:1; min-height:40px; padding:0 var(--space-3); display:flex; align-items:center; border:0; color:#fff; background:linear-gradient(180deg,#ff806d 0%,#ff5c55 100%); font-size:var(--text-meta); font-weight:700; transition:filter var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard); }
|
||||
.dashboard-compose-main { display:flex; align-items:center; gap:var(--space-2); }
|
||||
.dashboard-compose-menu { width:38px; min-height:40px; display:grid; place-items:center; border:0; border-left:1px solid rgba(255,255,255,0.22); background:linear-gradient(180deg,#ff7860 0%,#ff554e 100%); color:#fff; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue