1 |
|
2 |
|
3 | controlHeight = 24px
|
4 | inputPaddingWidth = 5px
|
5 | inputPaddingHeight = 3px
|
6 |
|
7 | colorItemMargin = 2px
|
8 | colorItemSize = 16px
|
9 | colorItemsPerRow = 7
|
10 |
|
11 |
|
12 | .ql-{themeName}.ql-toolbar, .ql-{themeName} .ql-toolbar
|
13 | &:after
|
14 | clear: both
|
15 | content: ''
|
16 | display: table
|
17 |
|
18 | button
|
19 | background: none
|
20 | border: none
|
21 | cursor: pointer
|
22 | display: inline-block
|
23 | float: left
|
24 | height: controlHeight
|
25 | padding: inputPaddingHeight inputPaddingWidth
|
26 | width: controlHeight + (inputPaddingWidth - inputPaddingHeight)*2
|
27 |
|
28 | svg
|
29 | float: left
|
30 | height: 100%
|
31 |
|
32 | &:active:hover
|
33 | outline: none
|
34 |
|
35 | input.ql-image[type=file]
|
36 | display: none
|
37 |
|
38 | button:hover, button:focus, button.ql-active,
|
39 | .ql-picker-label:hover, .ql-picker-label.ql-active,
|
40 | .ql-picker-item:hover, .ql-picker-item.ql-selected
|
41 | color: activeColor
|
42 | .ql-fill, .ql-stroke.ql-fill
|
43 | fill: activeColor
|
44 | .ql-stroke, .ql-stroke-miter
|
45 | stroke: activeColor
|
46 |
|
47 |
|
48 | @media (pointer: coarse)
|
49 | .ql-{themeName}.ql-toolbar, .ql-{themeName} .ql-toolbar
|
50 | button:hover:not(.ql-active)
|
51 | color: inactiveColor
|
52 | .ql-fill, .ql-stroke.ql-fill
|
53 | fill: inactiveColor
|
54 | .ql-stroke, .ql-stroke-miter
|
55 | stroke: inactiveColor
|
56 |
|
57 | .ql-{themeName}
|
58 | box-sizing: border-box
|
59 | *
|
60 | box-sizing: border-box
|
61 |
|
62 | .ql-hidden
|
63 | display: none
|
64 | .ql-out-bottom, .ql-out-top
|
65 | visibility: hidden
|
66 |
|
67 | .ql-tooltip
|
68 | position: absolute
|
69 | transform: translateY(10px)
|
70 | a
|
71 | cursor: pointer
|
72 | text-decoration: none
|
73 | .ql-tooltip.ql-flip
|
74 | transform: translateY(-10px)
|
75 |
|
76 | .ql-formats
|
77 | &:after
|
78 | clear: both
|
79 | content: ''
|
80 | display: table
|
81 | display: inline-block
|
82 | vertical-align: middle
|
83 |
|
84 | .ql-stroke
|
85 | fill: none
|
86 | stroke: inactiveColor
|
87 | stroke-linecap: round
|
88 | stroke-linejoin: round
|
89 | stroke-width: 2
|
90 | .ql-stroke-miter
|
91 | fill: none
|
92 | stroke: inactiveColor
|
93 | stroke-miterlimit: 10
|
94 | stroke-width: 2
|
95 |
|
96 | .ql-fill, .ql-stroke.ql-fill
|
97 | fill: inactiveColor
|
98 |
|
99 | .ql-empty
|
100 | fill: none
|
101 | .ql-even
|
102 | fill-rule: evenodd
|
103 | .ql-thin, .ql-stroke.ql-thin
|
104 | stroke-width: 1
|
105 | .ql-transparent
|
106 | opacity: 0.4
|
107 |
|
108 | .ql-direction
|
109 | svg:last-child
|
110 | display: none
|
111 | .ql-direction.ql-active
|
112 | svg:last-child
|
113 | display: inline
|
114 | svg:first-child
|
115 | display: none
|
116 |
|
117 | .ql-editor
|
118 | h1
|
119 | font-size: 2em
|
120 | h2
|
121 | font-size: 1.5em
|
122 | h3
|
123 | font-size: 1.17em
|
124 | h4
|
125 | font-size: 1em
|
126 | h5
|
127 | font-size: 0.83em
|
128 | h6
|
129 | font-size: 0.67em
|
130 | a
|
131 | text-decoration: underline
|
132 | blockquote
|
133 | border-left: 4px solid #ccc
|
134 | margin-bottom: 5px
|
135 | margin-top: 5px
|
136 | padding-left: 16px
|
137 | code, .ql-code-block-container
|
138 | background-color: #f0f0f0
|
139 | border-radius: 3px
|
140 | .ql-code-block-container
|
141 | margin-bottom: 5px
|
142 | margin-top: 5px
|
143 | padding: 5px 10px
|
144 | code
|
145 | font-size: 85%
|
146 | padding: 2px 4px
|
147 | .ql-code-block-container
|
148 | background-color: #23241f
|
149 | color: #f8f8f2
|
150 | overflow: visible
|
151 | img
|
152 | max-width: 100%
|
153 |
|
154 | .ql-picker
|
155 | color: inactiveColor
|
156 | display: inline-block
|
157 | float: left
|
158 | font-size: 14px
|
159 | font-weight: 500
|
160 | height: controlHeight
|
161 | position: relative
|
162 | vertical-align: middle
|
163 | .ql-picker-label
|
164 | cursor: pointer
|
165 | display: inline-block
|
166 | height: 100%
|
167 | padding-left: 8px
|
168 | padding-right: 2px
|
169 | position: relative
|
170 | width: 100%
|
171 | &::before
|
172 | display: inline-block
|
173 | line-height: 22px
|
174 | .ql-picker-options
|
175 | background-color: backgroundColor
|
176 | display: none
|
177 | min-width: 100%
|
178 | padding: 4px 8px
|
179 | position: absolute
|
180 | white-space: nowrap
|
181 | .ql-picker-item
|
182 | cursor: pointer
|
183 | display: block
|
184 | padding-bottom: 5px
|
185 | padding-top: 5px
|
186 | .ql-picker.ql-expanded
|
187 | .ql-picker-label
|
188 | color: borderColor
|
189 | z-index: 2
|
190 | .ql-fill
|
191 | fill: borderColor
|
192 | .ql-stroke
|
193 | stroke: borderColor
|
194 | .ql-picker-options
|
195 | display: block
|
196 | margin-top: -1px
|
197 | top: 100%
|
198 | z-index: 1
|
199 |
|
200 | .ql-color-picker, .ql-icon-picker
|
201 | width: controlHeight + 4
|
202 | .ql-picker-label
|
203 | padding: 2px 4px
|
204 | svg
|
205 | right: 4px
|
206 | .ql-icon-picker
|
207 | .ql-picker-options
|
208 | padding: 4px 0px
|
209 | .ql-picker-item
|
210 | height: controlHeight
|
211 | width: controlHeight
|
212 | padding: 2px 4px
|
213 | .ql-color-picker
|
214 | .ql-picker-options
|
215 | padding: inputPaddingHeight inputPaddingWidth
|
216 | width: (colorItemSize + 2*colorItemMargin) * colorItemsPerRow + 2*inputPaddingWidth + 2 // +2 for the border
|
217 | .ql-picker-item
|
218 | border: 1px solid transparent
|
219 | float: left
|
220 | height: colorItemSize
|
221 | margin: colorItemMargin
|
222 | padding: 0px
|
223 | width: colorItemSize
|
224 |
|
225 | .ql-picker:not(.ql-color-picker):not(.ql-icon-picker)
|
226 | svg
|
227 | position: absolute
|
228 | margin-top: -9px
|
229 | right: 0
|
230 | top: 50%
|
231 | width: 18px
|
232 |
|
233 | .ql-picker.ql-header, .ql-picker.ql-font, .ql-picker.ql-size
|
234 | .ql-picker-label[data-label]:not([data-label='']),
|
235 | .ql-picker-item[data-label]:not([data-label=''])
|
236 | &::before
|
237 | content: attr(data-label)
|
238 |
|
239 | .ql-picker.ql-header
|
240 | width: 98px
|
241 | .ql-picker-label::before,
|
242 | .ql-picker-item::before
|
243 | content: 'Normal'
|
244 | for num in (1..6)
|
245 | .ql-picker-label[data-value=\"{num}\"]::before,
|
246 | .ql-picker-item[data-value=\"{num}\"]::before
|
247 | content: 'Heading ' + num
|
248 | .ql-picker-item[data-value="1"]::before
|
249 | font-size: 2em
|
250 | .ql-picker-item[data-value="2"]::before
|
251 | font-size: 1.5em
|
252 | .ql-picker-item[data-value="3"]::before
|
253 | font-size: 1.17em
|
254 | .ql-picker-item[data-value="4"]::before
|
255 | font-size: 1em
|
256 | .ql-picker-item[data-value="5"]::before
|
257 | font-size: 0.83em
|
258 | .ql-picker-item[data-value="6"]::before
|
259 | font-size: 0.67em
|
260 |
|
261 | .ql-picker.ql-font
|
262 | width: 108px
|
263 | .ql-picker-label::before,
|
264 | .ql-picker-item::before
|
265 | content: 'Sans Serif'
|
266 | .ql-picker-label[data-value=serif]::before,
|
267 | .ql-picker-item[data-value=serif]::before
|
268 | content: 'Serif'
|
269 | .ql-picker-label[data-value=monospace]::before,
|
270 | .ql-picker-item[data-value=monospace]::before
|
271 | content: 'Monospace'
|
272 | .ql-picker-item[data-value=serif]::before
|
273 | font-family: Georgia, Times New Roman, serif
|
274 | .ql-picker-item[data-value=monospace]::before
|
275 | font-family: Monaco, Courier New, monospace
|
276 |
|
277 | .ql-picker.ql-size
|
278 | width: 98px
|
279 | .ql-picker-label::before,
|
280 | .ql-picker-item::before
|
281 | content: 'Normal'
|
282 | .ql-picker-label[data-value=small]::before,
|
283 | .ql-picker-item[data-value=small]::before
|
284 | content: 'Small'
|
285 | .ql-picker-label[data-value=large]::before,
|
286 | .ql-picker-item[data-value=large]::before
|
287 | content: 'Large'
|
288 | .ql-picker-label[data-value=huge]::before,
|
289 | .ql-picker-item[data-value=huge]::before
|
290 | content: 'Huge'
|
291 | .ql-picker-item[data-value=small]::before
|
292 | font-size: 10px
|
293 | .ql-picker-item[data-value=large]::before
|
294 | font-size: 18px
|
295 | .ql-picker-item[data-value=huge]::before
|
296 | font-size: 32px
|
297 |
|
298 | .ql-color-picker.ql-background
|
299 | .ql-picker-item
|
300 | background-color: #fff
|
301 | .ql-color-picker.ql-color
|
302 | .ql-picker-item
|
303 | background-color: #000
|
304 |
|
305 | .ql-code-block-container
|
306 | position: relative
|
307 | .ql-ui
|
308 | right: 5px
|
309 | top: 5px
|