source: src/components/editor/styles.ts@ 5d6f37a

main
Last change on this file since 5d6f37a was 5d6f37a, checked in by Naum Shapkarovski <naumshapkarovski@…>, 7 weeks ago

add customer
  • Property mode set to 100644
File size: 8.2 KB
RevLine 
[5d6f37a]1import { styled, alpha } from '@mui/material/styles';
2import Box from '@mui/material/Box';
3
4// ----------------------------------------------------------------------
5
6export const StyledEditor = styled(Box)(({ theme }) => ({
7 overflow: 'hidden',
8 position: 'relative',
9 borderRadius: theme.shape.borderRadius,
10 border: `solid 1px ${alpha(theme.palette.grey[500], 0.2)}`,
11 '& .ql-container.ql-snow': {
12 border: 'none',
13 ...theme.typography.body2,
14 fontFamily: theme.typography.fontFamily,
15 },
16 '& .ql-editor': {
17 minHeight: 160,
18 maxHeight: 640,
19 backgroundColor: alpha(theme.palette.grey[500], 0.08),
20 '&.ql-blank::before': {
21 fontStyle: 'normal',
22 color: theme.palette.text.disabled,
23 },
24 '& pre.ql-syntax': {
25 ...theme.typography.body2,
26 padding: theme.spacing(2),
27 borderRadius: theme.shape.borderRadius,
28 backgroundColor: theme.palette.grey[900],
29 },
30 '& h1': {
31 ...theme.typography.h1,
32 },
33 '& h2': {
34 ...theme.typography.h2,
35 },
36 '& h3': {
37 ...theme.typography.h3,
38 },
39 '& h4': {
40 ...theme.typography.h4,
41 },
42 '& h5': {
43 ...theme.typography.h5,
44 },
45 '& h6': {
46 ...theme.typography.h6,
47 },
48 '& p, li': {
49 ...theme.typography.body2,
50 },
51 },
52}));
53
54export const StyledEditorToolbar = styled('div')(({ theme }) => {
55 const isRTL = theme.direction === 'rtl';
56
57 return {
58 '& .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill':
59 {
60 fill: theme.palette.primary.main,
61 },
62 '& .ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected':
63 {
64 color: theme.palette.primary.main,
65 },
66 '& .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter':
67 {
68 stroke: theme.palette.primary.main,
69 },
70 '& .ql-stroke': {
71 stroke: theme.palette.text.primary,
72 },
73 '& .ql-fill, .ql-stroke.ql-fill': {
74 fill: theme.palette.text.primary,
75 },
76 '& .ql-picker, .ql-picker-options, .ql-picker-item, .ql-picker-label, button': {
77 '&:focus': { outline: 'none' },
78 },
79 '& .ql-toolbar.ql-snow': {
80 border: 'none',
81 borderBottom: `solid 1px ${alpha(theme.palette.grey[500], 0.2)}`,
82 '& .ql-formats': {
83 '&:not(:last-of-type)': {
84 marginRight: theme.spacing(2),
85 },
86 },
87
88 // Button
89 '& button': {
90 padding: 0,
91 display: 'flex',
92 alignItems: 'center',
93 justifyContent: 'center',
94 borderRadius: 4,
95 color: theme.palette.text.primary,
96 },
97
98 // Icon svg
99 '& button svg, span svg': {
100 width: 20,
101 height: 20,
102 },
103
104 // Select
105 '& .ql-picker-label': {
106 ...theme.typography.subtitle2,
107 color: theme.palette.text.primary,
108 '& .ql-stroke': {
109 stroke: theme.palette.text.primary,
110 },
111 },
112 '& .ql-picker-label svg': {
113 ...(isRTL && {
114 right: '0 !important',
115 left: 'auto !important',
116 }),
117 },
118 '& .ql-color,& .ql-background,& .ql-align ': {
119 '& .ql-picker-label': {
120 padding: 0,
121 display: 'flex',
122 alignItems: 'center',
123 justifyContent: 'center',
124 },
125 },
126 '& .ql-expanded': {
127 '& .ql-picker-label': {
128 borderRadius: 4,
129 color: theme.palette.text.disabled,
130 borderColor: 'transparent !important',
131 backgroundColor: theme.palette.action.focus,
132 '& .ql-stroke': { stroke: theme.palette.text.disabled },
133 },
134 '& .ql-picker-options': {
135 padding: 0,
136 marginTop: 4,
137 border: 'none',
138 maxHeight: 200,
139 overflow: 'auto',
140 boxShadow: theme.customShadows.z20,
141 borderRadius: theme.shape.borderRadius,
142 backgroundColor: theme.palette.background.paper,
143 },
144 '& .ql-picker-item': {
145 color: theme.palette.text.primary,
146 },
147
148 // Align
149 '&.ql-align': {
150 '& .ql-picker-options': { padding: 0, display: 'flex' },
151 '& .ql-picker-item': {
152 width: 32,
153 height: 32,
154 display: 'flex',
155 alignItems: 'center',
156 justifyContent: 'center',
157 },
158 },
159 // Color & Background
160 '&.ql-color, &.ql-background': {
161 '& .ql-picker-options': { padding: 8 },
162 '& .ql-picker-item': {
163 margin: 3,
164 borderRadius: 4,
165 '&.ql-selected': { border: 'solid 1px black' },
166 },
167 },
168 // Font, Size, Header
169 '&.ql-font, &.ql-size, &.ql-header': {
170 '& .ql-picker-options': {
171 padding: theme.spacing(1, 0),
172 },
173 '& .ql-picker-item': {
174 padding: theme.spacing(0.5, 1.5),
175 },
176 },
177 },
178 },
179 };
180});
Note: See TracBrowser for help on using the repository browser.