UNPKG

customerio-gist-web

Version:

Build beautiful in-app flows with no code and deliver them instantly to your app. http://customer.io

2 lines (1 loc) 1.7 kB
export declare const INBOX_CSS = "\n#gist-inbox-button {\n position: fixed;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 9998;\n border: none;\n transition: background-color 0.2s ease,\n box-shadow 0.2s ease,\n transform 0.15s ease;\n}\n#gist-inbox-button:hover {\n transform: scale(1.05);\n}\n#gist-inbox-button:active {\n transform: scale(0.93);\n}\n#gist-inbox-button svg {\n width: 24px;\n height: 24px;\n}\n#gist-inbox-button svg [fill]:not([fill=\"none\"]) {\n fill: currentColor;\n}\n#gist-inbox-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n min-width: 20px;\n height: 20px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 6px;\n box-sizing: border-box;\n}\n#gist-inbox-panel {\n position: fixed;\n width: 400px;\n max-height: 600px;\n z-index: 9999;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n user-select: none;\n -webkit-user-select: none;\n transform: translateY(8px) scale(0.96);\n opacity: 0;\n pointer-events: none;\n transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),\n opacity 0.2s ease;\n}\n#gist-inbox-panel.gist-inbox-panel--open {\n transform: translateY(0) scale(1);\n opacity: 1;\n pointer-events: auto;\n}\n#gist-inbox-messages {\n overflow-y: auto;\n flex: 1;\n}\n.gist-inbox-message-row {\n transition: background-color 0.15s ease;\n}\n@media (max-width: 424px) {\n #gist-inbox-panel {\n width: auto !important;\n left: 12px !important;\n right: 12px !important;\n }\n}\n";