phx-react
Version:
PHX REACT
10 lines • 16.2 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var StyledEditorLayout = function (_a) {
var editorHeight = _a.editorHeight;
return (react_1["default"].createElement("style", null, "\n .editor-height {\n height: ".concat(editorHeight || 'calc(100vh - 220px)', ";\n resize: vertical;\n }\n.prose {\n\t max-width: 100%;\n}\n .prose strong, .prose b {\n\t color: inherit !important;\n}\n .prose [style*='color:'] * {\n\t color: inherit !important;\n}\n a {\n\t color: #193fe9 !important;\n\t cursor: pointer;\n}\n a:hover {\n\t opacity: 0.8;\n\t animation-duration: 0.3s;\n}\n\n.prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n}\n.prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-lead);\n font-size: 1.25em;\n line-height: 1.6;\n margin-top: 1.2em;\n margin-bottom: 1.2em;\n}\n.prose :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-links);\n text-decoration: underline;\n font-weight: 500;\n}\n.prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-bold);\n font-weight: 600;\n}\n.prose :where(a strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: inherit;\n}\n.prose :where(blockquote strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: inherit;\n}\n.prose :where(thead th strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: inherit;\n}\n.prose :where(ol):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n list-style-type: decimal;\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n padding-inline-start: 1.625em;\n}\n.prose :where(ol[type='A']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n list-style-type: upper-alpha;\n}\n.prose :where(ol[type='a']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n list-style-type: lower-alpha;\n}\n.prose :where(ol[type='A' s]):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n list-style-type: upper-alpha;\n}\n.prose :where(ol[type='a' s]):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n list-style-type: lower-alpha;\n}\n.prose :where(ol[type='I']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n list-style-type: upper-roman;\n}\n.prose :where(ol[type='i']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n list-style-type: lower-roman;\n}\n.prose :where(ol[type='I' s]):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n list-style-type: upper-roman;\n}\n.prose :where(ol[type='i' s]):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n list-style-type: lower-roman;\n}\n.prose :where(ol[type='1']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n list-style-type: decimal;\n}\n.prose :where(ul):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n list-style-type: disc;\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n padding-inline-start: 1.625em;\n}\n.prose :where(ol > li):not(:where([class~='not-prose'], [class~='not-prose'] *))::marker {\n font-weight: 400;\n color: var(--tw-prose-counters);\n}\n.prose :where(ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *))::marker {\n color: var(--tw-prose-bullets);\n}\n.prose :where(dt):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n margin-top: 1.25em;\n}\n.prose :where(hr):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n border-color: var(--tw-prose-hr);\n border-top-width: 1px;\n margin-top: 3em;\n margin-bottom: 3em;\n}\n.prose :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n font-weight: 500;\n font-style: italic;\n color: var(--tw-prose-quotes);\n border-inline-start-width: 0.25rem;\n border-inline-start-color: var(--tw-prose-quote-borders);\n margin-top: 1.6em;\n margin-bottom: 1.6em;\n padding-inline-start: 1em;\n}\n.prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {\n content: open-quote;\n}\n.prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {\n content: close-quote;\n}\n.prose :where(h1):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-headings);\n font-weight: 800;\n font-size: 2.25em;\n margin-top: 0;\n margin-bottom: 0.8888889em;\n line-height: 1.1111111;\n}\n.prose :where(h1 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n font-weight: 900;\n color: inherit;\n}\n.prose :where(h2):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-headings);\n font-weight: 700;\n font-size: 1.5em;\n margin-top: 2em;\n margin-bottom: 1em;\n line-height: 1.3333333;\n}\n.prose :where(h2 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n font-weight: 800;\n color: inherit;\n}\n.prose :where(h3):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n font-size: 1.25em;\n margin-top: 1.6em;\n margin-bottom: 0.6em;\n line-height: 1.6;\n}\n.prose :where(h3 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n font-weight: 700;\n color: inherit;\n}\n.prose :where(h4):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n line-height: 1.5;\n}\n.prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n font-weight: 700;\n color: inherit;\n}\n.prose :where(img):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose :where(picture):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n display: block;\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose :where(video):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose :where(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n font-weight: 500;\n font-family: inherit;\n color: var(--tw-prose-kbd);\n box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);\n font-size: 0.875em;\n border-radius: 0.3125rem;\n padding-top: 0.1875em;\n padding-inline-end: 0.375em;\n padding-bottom: 0.1875em;\n padding-inline-start: 0.375em;\n}\n.prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-code);\n font-weight: 600;\n font-size: 0.875em;\n}\n.prose :where(a code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: inherit;\n}\n.prose :where(h1 code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: inherit;\n}\n.prose :where(h2 code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: inherit;\n font-size: 0.875em;\n}\n.prose :where(h3 code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: inherit;\n font-size: 0.9em;\n}\n.prose :where(h4 code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: inherit;\n}\n.prose :where(blockquote code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: inherit;\n}\n.prose :where(thead th code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: inherit;\n}\n.prose :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-pre-code);\n background-color: var(--tw-prose-pre-bg);\n overflow-x: auto;\n font-weight: 400;\n font-size: 0.875em;\n line-height: 1.7142857;\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n border-radius: 0.375rem;\n padding-top: 0.8571429em;\n padding-inline-end: 1.1428571em;\n padding-bottom: 0.8571429em;\n padding-inline-start: 1.1428571em;\n}\n.prose :where(pre code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n background-color: transparent;\n border-width: 0;\n border-radius: 0;\n padding: 0;\n font-weight: inherit;\n color: inherit;\n font-size: inherit;\n font-family: inherit;\n line-height: inherit;\n}\n.prose :where(pre code):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {\n content: none;\n}\n.prose :where(pre code):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {\n content: none;\n}\n.prose :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n width: 100%;\n table-layout: auto;\n margin-top: 2em;\n margin-bottom: 2em;\n font-size: 0.875em;\n line-height: 1.7142857;\n}\n.prose :where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n border-bottom-width: 1px;\n border-bottom-color: var(--tw-prose-th-borders);\n}\n.prose :where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n vertical-align: bottom;\n padding-inline-end: 0.5714286em;\n padding-bottom: 0.5714286em;\n padding-inline-start: 0.5714286em;\n}\n.prose :where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n border-bottom-width: 1px;\n border-bottom-color: var(--tw-prose-td-borders);\n}\n.prose :where(tbody tr:last-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n border-bottom-width: 0;\n}\n.prose :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n vertical-align: baseline;\n}\n.prose :where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n border-top-width: 1px;\n border-top-color: var(--tw-prose-th-borders);\n}\n.prose :where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n vertical-align: top;\n}\n.prose :where(th, td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n text-align: start;\n}\n.prose :where(figure > *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose :where(figcaption):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n color: var(--tw-prose-captions);\n font-size: 0.875em;\n line-height: 1.4285714;\n margin-top: 0.8571429em;\n}\n.react-colorful__saturation {\n border-radius: 4px !important;\n margin-bottom: 0.5rem;\n}\n.react-colorful__hue {\n border-radius: 4px !important;\n margin-bottom: 0.5rem;\n}\n.react-colorful__alpha-gradient {\n border-radius: 4px !important;\n}\n.prose {\n --tw-prose-body: #374151;\n --tw-prose-headings: #111827;\n --tw-prose-lead: #4b5563;\n --tw-prose-links: #111827;\n --tw-prose-bold: #111827;\n --tw-prose-bullets: #333;\n --tw-prose-counters: #333;\n --tw-prose-hr: #e5e7eb;\n --tw-prose-quotes: #111827;\n --tw-prose-quote-borders: #e5e7eb;\n --tw-prose-captions: #6b7280;\n --tw-prose-kbd: #111827;\n --tw-prose-kbd-shadows: 17 24 39;\n --tw-prose-code: #111827;\n --tw-prose-pre-code: #e5e7eb;\n --tw-prose-pre-bg: #1f2937;\n --tw-prose-th-borders: #d1d5db;\n --tw-prose-td-borders: #e5e7eb;\n --tw-prose-invert-body: #d1d5db;\n --tw-prose-invert-headings: #fff;\n --tw-prose-invert-lead: #9ca3af;\n --tw-prose-invert-links: #fff;\n --tw-prose-invert-bold: #fff;\n --tw-prose-invert-counters: #9ca3af;\n --tw-prose-invert-bullets: #4b5563;\n --tw-prose-invert-hr: #374151;\n --tw-prose-invert-quotes: #f3f4f6;\n --tw-prose-invert-quote-borders: #374151;\n --tw-prose-invert-captions: #9ca3af;\n --tw-prose-invert-kbd: #fff;\n --tw-prose-invert-kbd-shadows: 255 255 255;\n --tw-prose-invert-code: #fff;\n --tw-prose-invert-pre-code: #d1d5db;\n --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n --tw-prose-invert-th-borders: #4b5563;\n --tw-prose-invert-td-borders: #374151;\n font-size: 1rem;\n line-height: 1.75;\n}\n.prose :where(picture > img):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose :where(li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n}\n.prose :where(ol > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n padding-inline-start: 0.375em;\n}\n.prose :where(ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n padding-inline-start: 0.375em;\n}\n.prose :where(.prose > ul > li p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 0.75em;\n margin-bottom: 0.75em;\n}\n.prose :where(.prose > ul > li > p:first-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 1.25em;\n}\n.prose :where(.prose > ul > li > p:last-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-bottom: 1.25em;\n}\n.prose :where(.prose > ol > li > p:first-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 1.25em;\n}\n.prose :where(.prose > ol > li > p:last-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-bottom: 1.25em;\n}\n.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 0.75em;\n margin-bottom: 0.75em;\n}\n.prose :where(dl):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n}\n.prose :where(dd):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 0.5em;\n padding-inline-start: 1.625em;\n}\n.prose :where(hr + *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 0;\n}\n.prose :where(h2 + *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 0;\n}\n.prose :where(h3 + *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 0;\n}\n.prose :where(h4 + *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 0;\n}\n.prose :where(thead th:first-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n padding-inline-start: 0;\n}\n.prose :where(thead th:last-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n padding-inline-end: 0;\n}\n.prose :where(tbody td, tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n padding-top: 0.5714286em;\n padding-inline-end: 0.5714286em;\n padding-bottom: 0.5714286em;\n padding-inline-start: 0.5714286em;\n}\n.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n padding-inline-start: 0;\n}\n.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n padding-inline-end: 0;\n}\n.prose :where(figure):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose :where(.prose > :first-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-top: 0;\n}\n.prose :where(.prose > :last-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {\n margin-bottom: 0;\n}\n\n.phx-editor .prose {\n font-size: 12px;\n}\n\n .phx-editor input::-webkit-outer-spin-button, .phx-editor input::-webkit-inner-spin-button {\n\t -webkit-appearance: none;\n\t margin: 0;\n}\n .phx-editor input[type='number'] {\n\t -moz-appearance: textfield;\n}\n .phx-editor img[data-loading='true'] {\n\t opacity: 0.5;\n\t filter: blur(2px);\n\t transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;\n}\n .phx-editor img:not([data-loading]) {\n\t opacity: 1;\n\t filter: blur(0);\n\t transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;\n}\n .phx-editor img {\n\t -webkit-user-drag: none;\n\t -khtml-user-drag: none;\n\t -moz-user-drag: none;\n\t -o-user-drag: none;\n\t user-drag: none;\n}\n\n.phx-editor .ProseMirror p.is-editor-empty:first-child::before {\n color: #9ca3af;\n content: attr(data-placeholder);\n float: left;\n height: 0;\n pointer-events: none;\n}\n ")));
};
exports["default"] = StyledEditorLayout;
//# sourceMappingURL=EditorStyle.js.map