/* ============================================================ lp-kit.css — 1:1 replica of LoyaltyPlant CRM styles Extracted from /projects/ember (addons/ui, addons/lp-base). Reusable prototype kit. Values are the real rendered tokens. ============================================================ */ :root { /* colors */ --lp-dark: #1e1b1b; /* dark bar / sidebar bg (header.scss) */ --lp-text: #232829; /* $dark — text/headings */ --lp-white: #ffffff; --lp-primary: #457ce7; /* $primary */ --lp-primary-active: #3764ba; --lp-primary-disabled: #81afe7; --lp-primary-tint: rgba(69,124,231,0.1); --lp-link: #457ce7; --lp-gray-medium: #72747a; /* secondary text */ --lp-gray-light: #d7d9d9; /* borders */ --lp-gray-verylight: #f1f1f1; --lp-gray-lightest: #fafafa; --lp-success: #31ca88; --lp-danger: #b72d2a; --lp-danger-solid: #fe5000; --lp-warning: #ffb300; --lp-sidebar-hover: rgba(216,216,216,0.12); /* spacing (6px base) */ --lp-xxxs: 3px; --lp-xxs: 6px; --lp-xs: 12px; --lp-s: 18px; --lp-m: 24px; --lp-l: 30px; --lp-xl: 36px; --lp-xxl: 42px; --lp-radius: 3px; --lp-shadow-float: rgba(149,157,165,0.2) 0 8px 24px; --lp-shadow-popover: 0 2px 26px 8px rgba(0,0,0,0.07), 0 3px 9px 5px rgba(0,0,0,0.07); --lp-sidebar-w: 255px; } * { box-sizing: border-box; } @keyframes lp-spin { to { transform: rotate(360deg); } } /* custom elements default to display:inline — declare layout explicitly, otherwise bordered/block components (lp-card) render as thin inline strips */ lp-card, lp-page-header, lp-field, lp-input, lp-input-number, lp-textarea, lp-select, lp-grouped-select, lp-radio-switch, lp-collapse, lp-datetime-picker, lp-form-field, lp-tabs, lp-message, lp-topbar { display: block; } lp-btn, lp-link, lp-tag, lp-icon, lp-avatar, lp-spinner, lp-nav-item { display: inline-block; } lp-checkbox { display: inline-flex; align-self: flex-start; } /* don't stretch full-width inside a flex column (.lp-stack etc) — that leaves a dead click zone past the label */ lp-switch { display: inline-flex; align-self: flex-start; } lp-tile { display: block; flex: 1; } body { margin: 0; font-family: 'Montserrat', 'Roboto', Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--lp-text); background: var(--lp-white); } /* ---------- typography ---------- */ .lp-h1 { font-size: 24px; line-height: 36px; font-weight: 900; margin: 0; } .lp-h2 { font-size: 20px; line-height: 24px; font-weight: 900; margin: 0; } .lp-h3 { font-size: 16px; line-height: 18px; font-weight: 900; margin: 0; } .lp-h4 { font-size: 14px; line-height: 18px; font-weight: 700; margin: 0 0 10px; } .lp-large { font-size: 16px; line-height: 22px; } .lp-basic { font-size: 14px; line-height: 18px; } .lp-tiny { font-size: 12px; line-height: 18px; color: var(--lp-gray-medium); } .lp-muted { color: var(--lp-gray-medium); } .lp-label-field { font-weight: 600; font-size: 14px; margin-bottom: var(--lp-xxs); display:block; } /* ---------- app shell (sidebar redesign) ---------- */ .lp-app { display: flex; min-height: 100vh; align-items: stretch; } /* the custom element is the flex item — make it stretch */ lp-sidebar { display: flex; flex: 0 0 var(--lp-sidebar-w); transition: flex-basis .18s ease; } /* ---- collapsed sidebar (icons only) — toggled on , persisted in localStorage ---- */ .sidebar-collapsed lp-sidebar { flex-basis: 64px; } .sidebar-collapsed .lp-sidebar__logo { justify-content: center; gap: 6px; padding: 22px 8px 18px; } .sidebar-collapsed .lp-sidebar__brand { display: none; } .sidebar-collapsed .lp-nav__item { padding-left: 0; padding-right: 0; justify-content: center; gap: 0; } .sidebar-collapsed .lp-nav__item > span { display: none; } .sidebar-collapsed .lp-nav__item .caret { display: none; } .sidebar-collapsed .lp-nav__sub { display: none !important; } .sidebar-collapsed .lp-sidebar__user { justify-content: center; padding-left: 8px; padding-right: 8px; } .sidebar-collapsed .lp-sidebar__user > div:last-child { display: none; } .lp-sidebar { width: 100%; min-height: 100vh; background: var(--lp-dark); display: flex; flex-direction: column; color: #cfd0d2; } .lp-sidebar__logo { display: flex; align-items: center; gap: 8px; padding: 22px 16px 18px 24px; color: #fff; font-weight: 700; font-size: 18px; } .lp-logo-mark { width: 24px; height: 24px; flex: 0 0 24px; } .lp-sidebar__collapse { margin-left:auto; width:28px;height:28px;border-radius:6px; background:#2c2929; color:#9a9a9a; display:flex;align-items:center;justify-content:center; border:none; cursor:pointer;} .lp-nav { display: flex; flex-direction: column; padding-top: 6px; flex: 1 1 auto; } .lp-nav__item { display: flex; align-items: center; gap: 12px; padding: 11px 16px 11px 24px; color: #9a9b9e; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; font-size: 14px; position: relative; user-select: none; } .lp-nav__item .ico { width: 18px; height: 18px; opacity: .85; flex: 0 0 18px; fill: currentColor; } .lp-nav__item .caret { margin-left: auto; opacity: .55; width: 10px; height: 10px; fill: currentColor; flex: 0 0 10px; transform: rotate(-90deg); transition: transform .15s ease; } .lp-nav__item.is-section-open .caret { transform: rotate(0deg); } .lp-nav__item:hover { background: var(--lp-sidebar-hover); color: #dfe0e2; } .lp-nav__item.is-active { color: #7ea6ef; } /* "current section" parent: clearly secondary to a real active leaf — muted, no accent bar */ .lp-nav__item.is-active--parent { color: #7ea6ef; opacity: .7; } .lp-nav__item.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lp-primary); } .lp-nav__sub { display: none; flex-direction: column; } .lp-nav__sub.is-open { display: flex; } .lp-nav__sub .lp-nav__item { padding-left: 40px; font-size: 13px; } .lp-sidebar__user { display: flex; align-items: center; gap: 12px; padding: 12px 16px 14px 24px; border-top: 1px solid rgba(255,255,255,0.06); } .lp-sidebar__user .ava { width: 34px; height: 34px; border-radius: 50%; background: #d9d9d9; flex:0 0 34px;} .lp-sidebar__user .name { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; } .lp-sidebar__user .org { color: #9a9b9e; font-size: 12px; } /* ---------- content ---------- */ .lp-content { flex: 1 1 auto; padding: 32px; max-width: 100%; overflow-x: hidden; } .lp-crumb { color: var(--lp-gray-medium); font-size: 12px; margin-bottom: 4px; } .lp-page-title { margin-bottom: 24px; } .lp-stack { display: flex; flex-direction: column; gap: 24px; } .lp-row { display: flex; align-items: center; gap: 16px; } .lp-spacer { flex: 1 1 auto; } /* ---------- tabs ---------- */ .lp-tabs { display: flex; border-bottom: 1px solid var(--lp-gray-light); } .lp-tab { padding: 12px 18px; color: var(--lp-link); font-size: 16px; line-height: 22px; cursor: pointer; position: relative; background: none; border: none; } .lp-tab.is-active { color: var(--lp-text); } .lp-tab.is-active::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 4px; width: 100%; background: var(--lp-primary); } /* ---------- buttons ---------- */ .lp-btn { border-radius: var(--lp-radius); padding: 12px 24px; font-family: inherit; font-size: 16px; border: none; background: transparent; color: var(--lp-primary); cursor: pointer; font-weight: 500; } .lp-btn--primary { background: var(--lp-primary); color: #fff; } .lp-btn--primary:hover { background: var(--lp-primary); } .lp-btn--primary:active { background: var(--lp-primary-active); } .lp-btn--primary:disabled { background: var(--lp-primary-disabled); cursor: not-allowed; } .lp-btn--sm { padding: 8px 18px; font-size: 14px; line-height: 14px; } .lp-btn--danger { background: var(--lp-danger-solid); color: #fff; } .lp-btn--danger:active { background: #89221f; } .lp-link { color: var(--lp-link); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; } /* ---------- legacy raw /