solid-command-palette
Version:
Add a command palette to your Solid.js App
2 lines (1 loc) • 4.09 kB
CSS
._kbdShortcut_v1zud_1{display:flex;gap:12px}._kbdGroup_v1zud_6{display:flex;gap:5px}._kbdKey_v1zud_11{background-color:#f1f5f9;color:#1e293b;border:1px solid #cbd5e1;border-radius:5px;font-family:var(--scp-kbd-font-family, sans-serif);font-size:inherit;text-transform:capitalize;padding:5px 8px}._scrollShape_1199m_1{--scp-scroll-shape-height: 60px;width:35%;height:var(--scp-scroll-shape-height);position:absolute;inset-inline-start:50%;transform:translate(-50%)}._scrollShape_1199m_1[data-direction=up]{inset-block-start:calc(-1 * var(--scp-scroll-shape-height))}._scrollShape_1199m_1[data-direction=down]{inset-block-start:100%}._scrollShape_1199m_1[data-direction=up][data-status=running]{cursor:n-resize}._scrollShape_1199m_1[data-direction=down][data-status=running]{cursor:s-resize}._visuallyHidden_1rdqz_1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;word-wrap:normal;border:0}._stripSpace_1rdqz_14{margin:0;padding:0}._resultWrapper_m81ar_1{flex:1;overflow:auto;overscroll-behavior:contain}._resultList_m81ar_7{list-style:none}._resultItem_m81ar_11{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;padding-block:15px;padding-inline:var(--scp-gutter-space-inline)}._resultItem_m81ar_11._activeItem_m81ar_21{background-color:#f1f5f9}._resultTitle_m81ar_25{color:#1e293b;font-weight:400}._resultSubtitle_m81ar_30{color:#64748b;font-size:13px;font-weight:300;margin-block-start:7px}._resultShortcut_m81ar_37{font-size:.75rem}._footer_14oge_1{display:flex;gap:15px;color:#64748b;font-size:.85rem;border-block-start:.5px solid #e2e8f0;padding-block:10px;padding-inline:var(--scp-gutter-space-inline)}._group_14oge_11{display:inline-flex;align-items:center;gap:5px}._shortcut_14oge_17{background-color:#f1f5f9;color:#0f172a;border:1px solid #cbd5e1;border-radius:3px;font-size:.75rem;padding:3px 2px;line-height:0}._runShortcut_14oge_27{padding-inline:5px}._icon_14oge_31{width:1em;height:1em}._iconArrow_14oge_36[data-arrow-direction=down],._iconReturn_14oge_40{transform:rotateX(180deg)}._wrapper_1lhwr_1{position:fixed;inset:0;display:flex;justify-content:center}._wrapper_1lhwr_1 *{box-sizing:border-box}._palette_1lhwr_12{position:relative;margin-block-start:100px;height:max-content}._panel_1lhwr_18{--scp-gutter-space-inline: 20px;display:flex;flex-direction:column;background-color:#fff;width:600px;height:max-content;max-height:350px;border:.5px solid #e2e8f0;border-radius:8px;box-shadow:0 0 50px -12px #00000040;overflow:hidden;scrollbar-gutter:stable;font-family:inherit;transform-origin:50%}._animEnter_1lhwr_36 ._panel_1lhwr_18{opacity:0;transform:translateY(50px) scaleX(.95)}@media (prefers-reduced-motion: reduce){._animEnter_1lhwr_36 ._panel_1lhwr_18{transform:none}}._animEnterActive_1lhwr_47 ._panel_1lhwr_18{opacity:1;transition:opacity,transform .2s}._animExit_1lhwr_52 ._panel_1lhwr_18{opacity:1}._animExitActive_1lhwr_56 ._panel_1lhwr_18{opacity:0;transform:translateY(70px) scaleX(.8);transition:opacity,transform .3s,.2s}@media (prefers-reduced-motion: reduce){._animExitActive_1lhwr_56 ._panel_1lhwr_18{transform:none}}._searchForm_1lhwr_68{display:grid;grid-template-columns:1fr auto;align-items:center;border-block-end:.5px solid #e2e8f0}._searchInput_1lhwr_75{grid-row:1;grid-column:1 / -1;appearance:none;width:100%;border:none;padding-block:20px;padding-inline-start:var(--scp-gutter-space-inline);padding-inline-end:80px;font-size:20px;font-family:inherit;outline:0}._searchInput_1lhwr_75::-webkit-search-cancel-button,._searchInput_1lhwr_75::-webkit-search-decoration,._searchInput_1lhwr_75::-webkit-search-results-button,._searchInput_1lhwr_75::-webkit-search-results-decoration{display:none}._closeBtn_1lhwr_96{grid-row:1;grid-column:2;appearance:none;background:transparent;border:none;border-radius:5px;padding:0;margin-inline-end:var(--scp-gutter-space-inline)}._closeBtn_1lhwr_96:focus-visible{outline-offset:3px;outline-color:#94a3b8}