1 |
|
2 |
|
3 | LIST_STYLE = decimal lower-alpha lower-roman
|
4 | LIST_STYLE_WIDTH = 1.2em
|
5 | LIST_STYLE_MARGIN = 0.3em
|
6 | LIST_STYLE_OUTER_WIDTH = LIST_STYLE_MARGIN + LIST_STYLE_WIDTH
|
7 | MAX_INDENT = 9
|
8 |
|
9 | resets(arr)
|
10 | unquote('list-' + join(' list-', arr))
|
11 |
|
12 | .ql-container
|
13 | box-sizing: border-box
|
14 | font-family: Helvetica, Arial, sans-serif
|
15 | font-size: 13px
|
16 | height: 100%
|
17 | margin: 0px
|
18 | position: relative
|
19 |
|
20 | .ql-container.ql-disabled
|
21 | .ql-tooltip
|
22 | visibility: hidden
|
23 |
|
24 | .ql-container:not(.ql-disabled)
|
25 | li[data-list=checked],
|
26 | li[data-list=unchecked]
|
27 | > .ql-ui
|
28 | cursor: pointer
|
29 |
|
30 | .ql-clipboard
|
31 | left: -100000px
|
32 | height: 1px
|
33 | overflow-y: hidden
|
34 | position: absolute
|
35 | top: 50%
|
36 | p
|
37 | margin: 0
|
38 | padding: 0
|
39 |
|
40 | .ql-editor
|
41 | box-sizing: border-box
|
42 | counter-reset: resets(0..MAX_INDENT)
|
43 | line-height: 1.42
|
44 | height: 100%
|
45 | outline: none
|
46 | overflow-y: auto
|
47 | padding: 12px 15px
|
48 | tab-size: 4
|
49 | -moz-tab-size: 4
|
50 | text-align: left
|
51 | white-space: pre-wrap
|
52 | word-wrap: break-word
|
53 | > *
|
54 | cursor: text
|
55 |
|
56 | p, ol, pre, blockquote, h1, h2, h3, h4, h5, h6
|
57 | margin: 0
|
58 | padding: 0
|
59 | p, h1, h2, h3, h4, h5, h6
|
60 | @supports (counter-set: none)
|
61 | counter-set: resets(0..MAX_INDENT)
|
62 | @supports not (counter-set: none)
|
63 | counter-reset: resets(0..MAX_INDENT)
|
64 | table
|
65 | border-collapse: collapse
|
66 | td
|
67 | border: 1px solid #000
|
68 | padding: 2px 5px
|
69 | ol
|
70 | padding-left: 1.5em
|
71 | li
|
72 | list-style-type: none
|
73 | padding-left: LIST_STYLE_OUTER_WIDTH
|
74 | position: relative
|
75 |
|
76 | > .ql-ui:before
|
77 | display: inline-block
|
78 | margin-left: -1*LIST_STYLE_OUTER_WIDTH
|
79 | margin-right: LIST_STYLE_MARGIN
|
80 | text-align: right
|
81 | white-space: nowrap
|
82 | width: LIST_STYLE_WIDTH
|
83 |
|
84 | li[data-list=checked],
|
85 | li[data-list=unchecked]
|
86 | > .ql-ui
|
87 | color: #777
|
88 |
|
89 | li[data-list=bullet] > .ql-ui:before
|
90 | content: '\2022'
|
91 | li[data-list=checked] > .ql-ui:before
|
92 | content: '\2611'
|
93 | li[data-list=unchecked] > .ql-ui:before
|
94 | content: '\2610'
|
95 |
|
96 | li[data-list]
|
97 | @supports (counter-set: none)
|
98 | counter-set: resets(1..MAX_INDENT)
|
99 | @supports not (counter-set: none)
|
100 | counter-reset: resets(1..MAX_INDENT)
|
101 |
|
102 | li[data-list=ordered]
|
103 | counter-increment: list-0
|
104 | > .ql-ui:before
|
105 | content: unquote('counter(list-0, ' + LIST_STYLE[0] + ')') '. '
|
106 | for num in (1..MAX_INDENT)
|
107 | li[data-list=ordered].ql-indent-{num}
|
108 | counter-increment: unquote('list-' + num)
|
109 | > .ql-ui:before
|
110 | content: unquote('counter(list-' + num + ', ' + LIST_STYLE[num%3] + ')') '. '
|
111 | if (num < MAX_INDENT)
|
112 | li[data-list].ql-indent-{num}
|
113 | @supports (counter-set: none)
|
114 | counter-set: resets((num+1)..MAX_INDENT)
|
115 | @supports not (counter-set: none)
|
116 | counter-reset: resets((num+1)..MAX_INDENT)
|
117 |
|
118 | for num in (1..MAX_INDENT)
|
119 | .ql-indent-{num}:not(.ql-direction-rtl)
|
120 | padding-left: (3*num)em
|
121 | li.ql-indent-{num}:not(.ql-direction-rtl)
|
122 | padding-left: (3*num + LIST_STYLE_OUTER_WIDTH)em
|
123 | .ql-indent-{num}.ql-direction-rtl.ql-align-right
|
124 | padding-right: (3*num)em
|
125 | li.ql-indent-{num}.ql-direction-rtl.ql-align-right
|
126 | padding-right: (3*num + LIST_STYLE_OUTER_WIDTH)em
|
127 |
|
128 | li.ql-direction-rtl
|
129 | padding-right: LIST_STYLE_OUTER_WIDTH
|
130 | > .ql-ui:before
|
131 | margin-left: LIST_STYLE_MARGIN
|
132 | margin-right: -1*LIST_STYLE_OUTER_WIDTH
|
133 | text-align: left
|
134 |
|
135 | table
|
136 | table-layout: fixed
|
137 | width: 100%
|
138 | td
|
139 | outline: none
|
140 |
|
141 | .ql-code-block-container
|
142 | font-family: monospace
|
143 |
|
144 | .ql-video
|
145 | display: block
|
146 | max-width: 100%
|
147 | .ql-video.ql-align-center
|
148 | margin: 0 auto
|
149 | .ql-video.ql-align-right
|
150 | margin: 0 0 0 auto
|
151 |
|
152 | .ql-bg-black
|
153 | background-color: rgb(0,0,0)
|
154 | .ql-bg-red
|
155 | background-color: rgb(230,0,0)
|
156 | .ql-bg-orange
|
157 | background-color: rgb(255,153,0)
|
158 | .ql-bg-yellow
|
159 | background-color: rgb(255,255,0)
|
160 | .ql-bg-green
|
161 | background-color: rgb(0,138,0)
|
162 | .ql-bg-blue
|
163 | background-color: rgb(0,102,204)
|
164 | .ql-bg-purple
|
165 | background-color: rgb(153,51,255)
|
166 |
|
167 | .ql-color-white
|
168 | color: rgb(255,255,255)
|
169 | .ql-color-red
|
170 | color: rgb(230,0,0)
|
171 | .ql-color-orange
|
172 | color: rgb(255,153,0)
|
173 | .ql-color-yellow
|
174 | color: rgb(255,255,0)
|
175 | .ql-color-green
|
176 | color: rgb(0,138,0)
|
177 | .ql-color-blue
|
178 | color: rgb(0,102,204)
|
179 | .ql-color-purple
|
180 | color: rgb(153,51,255)
|
181 |
|
182 | .ql-font-serif
|
183 | font-family: Georgia, Times New Roman, serif
|
184 | .ql-font-monospace
|
185 | font-family: Monaco, Courier New, monospace
|
186 |
|
187 | .ql-size-small
|
188 | font-size: 0.75em
|
189 | .ql-size-large
|
190 | font-size: 1.5em
|
191 | .ql-size-huge
|
192 | font-size: 2.5em
|
193 |
|
194 | .ql-direction-rtl
|
195 | direction: rtl
|
196 | text-align: inherit
|
197 |
|
198 | .ql-align-center
|
199 | text-align: center
|
200 | .ql-align-justify
|
201 | text-align: justify
|
202 | .ql-align-right
|
203 | text-align: right
|
204 |
|
205 | .ql-ui
|
206 | position: absolute
|
207 |
|
208 | .ql-editor.ql-blank::before
|
209 | color: rgba(0,0,0,0.6)
|
210 | content: attr(data-placeholder)
|
211 | font-style: italic
|
212 | left: 15px
|
213 | pointer-events: none
|
214 | position: absolute
|
215 | right: 15px
|