px-react-ui-components 1.1.12 → 1.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,389 +1,389 @@
1
- .myEditorContainer {
2
- &.fullscreen {
3
- position: fixed;
4
- z-index: 9999;
5
- background: white;
6
- left: 0;
7
- top: 0;
8
- width: 100%;
9
- height: 100%;
10
- background-color: #091624c0;
11
-
12
- .myEditorContainerContent {
13
- position: absolute;
14
- top: 50%;
15
- left: 50%;
16
- transform: translate(-50%, -50%);
17
- height: 90vh;
18
- width: 95%;
19
- background: #fff;
20
- border-radius: 10px;
21
- padding: 10px;
22
-
23
- .myEditorTopBar {
24
- right: 60px;
25
- top: 15px;
26
-
27
- .myEditorTableButton {
28
- background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
29
- box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
30
-
31
- &:hover {
32
- background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
33
- box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
34
- }
35
- }
36
- }
37
-
38
- .myEditorContainerFullscreenButton{
39
- right: 15px;
40
- top: 15px;
41
- background: #7096b1;
42
- }
43
-
44
- .quill {
45
- height: calc(100% - 45px) !important;
46
- }
47
- }
48
- }
49
-
50
- .myEditorContainerContent {
51
- position: relative;
52
- height: 100%;
53
- width: 100%;
54
-
55
- .myEditorTopBar {
56
- position: absolute;
57
- right: 50px;
58
- top: 5px;
59
- z-index: 10000;
60
- display: flex;
61
- gap: 5px;
62
-
63
- .myEditorTableButton {
64
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
65
- border: none;
66
- cursor: pointer;
67
- display: flex;
68
- align-items: center;
69
- justify-content: center;
70
- width: 35px;
71
- height: 35px;
72
- border-radius: 8px;
73
- color: white;
74
- transition: all 0.3s ease;
75
- box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
76
-
77
- &:hover {
78
- transform: translateY(-2px);
79
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
80
- background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
81
- }
82
-
83
- &:active {
84
- transform: translateY(0);
85
- box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
86
- }
87
-
88
- svg {
89
- width: 18px;
90
- height: 18px;
91
- }
92
- }
93
- }
94
-
95
- .myEditorContainerFullscreenButton{
96
- position: absolute;
97
- right: 5px;
98
- top: 5px;
99
- z-index: 10000;
100
- background: #b8c1cf;
101
- border: none;
102
- cursor: pointer;
103
- display: flex;
104
- align-items: center;
105
- justify-content: center;
106
- width: 33px;
107
- height: 33px;
108
- padding: 7px;
109
- border-radius: 5px;
110
-
111
- svg{
112
- width: 100%;
113
- height: 100%;
114
- }
115
- }
116
-
117
- .quill {
118
- display: inline-block;
119
- width: 100%;
120
-
121
- .ql-toolbar {
122
- border-radius: 10px;
123
- background: #eaebec;
124
- // -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
125
- // -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
126
- box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
127
- padding: 3px !important;
128
-
129
- .ql-formats {
130
- margin: 4px;
131
- background: #d9dce1;
132
- padding: 2px;
133
- border-radius: 5px;
134
- }
135
- }
136
-
137
- .ql-container {
138
- border-radius: 0 0 10px 10px;
139
- padding-right: 2px;
140
- }
141
-
142
- .ql-editor {
143
- &::-webkit-scrollbar {
144
- width: 8px;
145
- height: 8px;
146
- }
147
-
148
- &::-webkit-scrollbar-track {
149
- background: #f1f1f1;
150
- border-radius: 4px;
151
- }
152
-
153
- &::-webkit-scrollbar-thumb {
154
- background: #888;
155
- border-radius: 4px;
156
-
157
- &:hover {
158
- background: #555;
159
- }
160
- }
161
- }
162
- }
163
-
164
- .quill-editor-container .ql-formula {
165
- display: inline-block;
166
- vertical-align: middle;
167
- padding: 0 2px;
168
- }
169
-
170
- .quill-editor-container .katex {
171
- display: inline-block;
172
- font-size: 1.1em;
173
- }
174
-
175
- .ql-snow .ql-picker.ql-font .ql-picker-label::before,
176
- .ql-snow .ql-picker.ql-font .ql-picker-item::before {
177
- content: "";
178
- }
179
-
180
- .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
181
- overflow: auto;
182
- max-height: 300px;
183
- }
184
-
185
- .ql-font-arial {
186
- font-family: Arial, sans-serif !important;
187
- }
188
-
189
- .ql-font-comic-sans {
190
- font-family: "Comic Sans MS", cursive, sans-serif !important;
191
- }
192
-
193
- .ql-font-courier-new {
194
- font-family: "Courier New", Courier, monospace !important;
195
- }
196
-
197
- .ql-font-georgia {
198
- font-family: Georgia, serif !important;
199
- }
200
-
201
- .ql-font-helvetica {
202
- font-family: Helvetica, sans-serif !important;
203
- }
204
-
205
- .ql-font-times-new-roman {
206
- font-family: "Times New Roman", Times, serif !important;
207
- }
208
-
209
- .ql-font-verdana {
210
- font-family: Verdana, sans-serif !important;
211
- }
212
-
213
- .ql-font-trebuchet-ms {
214
- font-family: "Trebuchet MS", sans-serif !important;
215
- }
216
-
217
- .ql-font-garamond {
218
- font-family: Garamond, serif !important;
219
- }
220
-
221
- .ql-font-palatino-linotype {
222
- font-family: "Palatino Linotype", serif !important;
223
- }
224
-
225
- .ql-font-consolas {
226
- font-family: Consolas, monospace !important;
227
- }
228
-
229
- .ql-font-lucida-console {
230
- font-family: "Lucida Console", monospace !important;
231
- }
232
-
233
- .ql-font-impact {
234
- font-family: Impact, sans-serif !important;
235
- }
236
-
237
- .ql-font-brush-script-mt {
238
- font-family: "Brush Script MT", cursive !important;
239
- }
240
-
241
- .ql-font-tahoma {
242
- font-family: Tahoma, sans-serif !important;
243
- }
244
-
245
- .ql-font-gill-sans {
246
- font-family: "Gill Sans", sans-serif !important;
247
- }
248
-
249
- .ql-font-franklin-gothic-medium {
250
- font-family: "Franklin Gothic Medium", sans-serif !important;
251
- }
252
-
253
- .ql-font-century-gothic {
254
- font-family: "Century Gothic", sans-serif !important;
255
- }
256
-
257
- .ql-font-bookman-old-style {
258
- font-family: "Bookman Old Style", serif !important;
259
- }
260
-
261
- .ql-font-candara {
262
- font-family: Candara, sans-serif !important;
263
- }
264
-
265
- .ql-font-didot {
266
- font-family: Didot, serif !important;
267
- }
268
-
269
- .ql-font-futura {
270
- font-family: Futura, sans-serif !important;
271
- }
272
-
273
- .ql-font-rockwell {
274
- font-family: Rockwell, serif !important;
275
- }
276
-
277
- .ql-font-baskerville {
278
- font-family: Baskerville, serif !important;
279
- }
280
-
281
- .ql-font-bodoni-mt {
282
- font-family: "Bodoni MT", serif !important;
283
- }
284
-
285
- .ql-font-copperplate {
286
- font-family: Copperplate, serif !important;
287
- }
288
-
289
- .ql-font-perpetua {
290
- font-family: Perpetua, serif !important;
291
- }
292
-
293
- .ql-font-monaco {
294
- font-family: Monaco, monospace !important;
295
- }
296
-
297
- .ql-font-century-schoolbook {
298
- font-family: "Century Schoolbook", serif !important;
299
- }
300
-
301
- .ql-font-segoe-ui {
302
- font-family: "Segoe UI", sans-serif !important;
303
- }
304
-
305
- .ql-snow .ql-toolbar button.ql-fullscreen {
306
- &:hover .ql-stroke {
307
- stroke: #06c;
308
- }
309
-
310
- .ql-stroke {
311
- stroke: #444;
312
- }
313
- }
314
- }
315
- }
316
-
317
-
318
- .ql-editor table {
319
- width: 100%;
320
- border-collapse: collapse;
321
- }
322
-
323
- .ql-editor table td,
324
- .ql-editor table th {
325
- border: 1px solid #ddd;
326
- padding: 8px;
327
- }
328
-
329
- .ql-editor table th {
330
- background-color: #f2f2f2;
331
- text-align: left;
332
- }
333
-
334
- // Resim hizalama stilleri
335
- .ql-editor {
336
- img {
337
- display: inline-block;
338
- max-width: 100%;
339
-
340
- &.align-left {
341
- float: left;
342
- margin: 0 15px 10px 0;
343
- clear: none;
344
- }
345
-
346
- &.align-right {
347
- float: right;
348
- margin: 0 0 10px 15px;
349
- clear: none;
350
- }
351
-
352
- &.align-center {
353
- display: block;
354
- margin: 10px auto;
355
- float: none;
356
- clear: both;
357
- }
358
-
359
- &.align-none {
360
- display: inline-block;
361
- margin: 0;
362
- float: none;
363
- clear: none;
364
- }
365
- }
366
-
367
- // Paragrafların resmin yanında düzgün akmasını sağla
368
- p {
369
- margin: 0 0 1em 0;
370
-
371
- &:has(img.align-left),
372
- &:has(img.align-right) {
373
- overflow: visible;
374
-
375
- // Paragraf içindeki metin resmin yanında akmalı
376
- &::after {
377
- content: "";
378
- display: table;
379
- clear: none;
380
- }
381
- }
382
- }
383
-
384
- // Resimden sonraki paragraflar da yanında akmalı
385
- img.align-left ~ p,
386
- img.align-right ~ p {
387
- overflow: visible;
388
- }
1
+ .myEditorContainer {
2
+ &.fullscreen {
3
+ position: fixed;
4
+ z-index: 9999;
5
+ background: white;
6
+ left: 0;
7
+ top: 0;
8
+ width: 100%;
9
+ height: 100%;
10
+ background-color: #091624c0;
11
+
12
+ .myEditorContainerContent {
13
+ position: absolute;
14
+ top: 50%;
15
+ left: 50%;
16
+ transform: translate(-50%, -50%);
17
+ height: 90vh;
18
+ width: 95%;
19
+ background: #fff;
20
+ border-radius: 10px;
21
+ padding: 10px;
22
+
23
+ .myEditorTopBar {
24
+ right: 60px;
25
+ top: 15px;
26
+
27
+ .myEditorTableButton {
28
+ background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
29
+ box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
30
+
31
+ &:hover {
32
+ background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
33
+ box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
34
+ }
35
+ }
36
+ }
37
+
38
+ .myEditorContainerFullscreenButton{
39
+ right: 15px;
40
+ top: 15px;
41
+ background: #7096b1;
42
+ }
43
+
44
+ .quill {
45
+ height: calc(100% - 45px) !important;
46
+ }
47
+ }
48
+ }
49
+
50
+ .myEditorContainerContent {
51
+ position: relative;
52
+ height: 100%;
53
+ width: 100%;
54
+
55
+ .myEditorTopBar {
56
+ position: absolute;
57
+ right: 50px;
58
+ top: 5px;
59
+ z-index: 10000;
60
+ display: flex;
61
+ gap: 5px;
62
+
63
+ .myEditorTableButton {
64
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
65
+ border: none;
66
+ cursor: pointer;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ width: 35px;
71
+ height: 35px;
72
+ border-radius: 8px;
73
+ color: white;
74
+ transition: all 0.3s ease;
75
+ box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
76
+
77
+ &:hover {
78
+ transform: translateY(-2px);
79
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
80
+ background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
81
+ }
82
+
83
+ &:active {
84
+ transform: translateY(0);
85
+ box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
86
+ }
87
+
88
+ svg {
89
+ width: 18px;
90
+ height: 18px;
91
+ }
92
+ }
93
+ }
94
+
95
+ .myEditorContainerFullscreenButton{
96
+ position: absolute;
97
+ right: 5px;
98
+ top: 5px;
99
+ z-index: 10000;
100
+ background: #b8c1cf;
101
+ border: none;
102
+ cursor: pointer;
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ width: 33px;
107
+ height: 33px;
108
+ padding: 7px;
109
+ border-radius: 5px;
110
+
111
+ svg{
112
+ width: 100%;
113
+ height: 100%;
114
+ }
115
+ }
116
+
117
+ .quill {
118
+ display: inline-block;
119
+ width: 100%;
120
+
121
+ .ql-toolbar {
122
+ border-radius: 10px;
123
+ background: #eaebec;
124
+ // -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
125
+ // -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
126
+ box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
127
+ padding: 3px !important;
128
+
129
+ .ql-formats {
130
+ margin: 4px;
131
+ background: #d9dce1;
132
+ padding: 2px;
133
+ border-radius: 5px;
134
+ }
135
+ }
136
+
137
+ .ql-container {
138
+ border-radius: 0 0 10px 10px;
139
+ padding-right: 2px;
140
+ }
141
+
142
+ .ql-editor {
143
+ &::-webkit-scrollbar {
144
+ width: 8px;
145
+ height: 8px;
146
+ }
147
+
148
+ &::-webkit-scrollbar-track {
149
+ background: #f1f1f1;
150
+ border-radius: 4px;
151
+ }
152
+
153
+ &::-webkit-scrollbar-thumb {
154
+ background: #888;
155
+ border-radius: 4px;
156
+
157
+ &:hover {
158
+ background: #555;
159
+ }
160
+ }
161
+ }
162
+ }
163
+
164
+ .quill-editor-container .ql-formula {
165
+ display: inline-block;
166
+ vertical-align: middle;
167
+ padding: 0 2px;
168
+ }
169
+
170
+ .quill-editor-container .katex {
171
+ display: inline-block;
172
+ font-size: 1.1em;
173
+ }
174
+
175
+ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
176
+ .ql-snow .ql-picker.ql-font .ql-picker-item::before {
177
+ content: "";
178
+ }
179
+
180
+ .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
181
+ overflow: auto;
182
+ max-height: 300px;
183
+ }
184
+
185
+ .ql-font-arial {
186
+ font-family: Arial, sans-serif !important;
187
+ }
188
+
189
+ .ql-font-comic-sans {
190
+ font-family: "Comic Sans MS", cursive, sans-serif !important;
191
+ }
192
+
193
+ .ql-font-courier-new {
194
+ font-family: "Courier New", Courier, monospace !important;
195
+ }
196
+
197
+ .ql-font-georgia {
198
+ font-family: Georgia, serif !important;
199
+ }
200
+
201
+ .ql-font-helvetica {
202
+ font-family: Helvetica, sans-serif !important;
203
+ }
204
+
205
+ .ql-font-times-new-roman {
206
+ font-family: "Times New Roman", Times, serif !important;
207
+ }
208
+
209
+ .ql-font-verdana {
210
+ font-family: Verdana, sans-serif !important;
211
+ }
212
+
213
+ .ql-font-trebuchet-ms {
214
+ font-family: "Trebuchet MS", sans-serif !important;
215
+ }
216
+
217
+ .ql-font-garamond {
218
+ font-family: Garamond, serif !important;
219
+ }
220
+
221
+ .ql-font-palatino-linotype {
222
+ font-family: "Palatino Linotype", serif !important;
223
+ }
224
+
225
+ .ql-font-consolas {
226
+ font-family: Consolas, monospace !important;
227
+ }
228
+
229
+ .ql-font-lucida-console {
230
+ font-family: "Lucida Console", monospace !important;
231
+ }
232
+
233
+ .ql-font-impact {
234
+ font-family: Impact, sans-serif !important;
235
+ }
236
+
237
+ .ql-font-brush-script-mt {
238
+ font-family: "Brush Script MT", cursive !important;
239
+ }
240
+
241
+ .ql-font-tahoma {
242
+ font-family: Tahoma, sans-serif !important;
243
+ }
244
+
245
+ .ql-font-gill-sans {
246
+ font-family: "Gill Sans", sans-serif !important;
247
+ }
248
+
249
+ .ql-font-franklin-gothic-medium {
250
+ font-family: "Franklin Gothic Medium", sans-serif !important;
251
+ }
252
+
253
+ .ql-font-century-gothic {
254
+ font-family: "Century Gothic", sans-serif !important;
255
+ }
256
+
257
+ .ql-font-bookman-old-style {
258
+ font-family: "Bookman Old Style", serif !important;
259
+ }
260
+
261
+ .ql-font-candara {
262
+ font-family: Candara, sans-serif !important;
263
+ }
264
+
265
+ .ql-font-didot {
266
+ font-family: Didot, serif !important;
267
+ }
268
+
269
+ .ql-font-futura {
270
+ font-family: Futura, sans-serif !important;
271
+ }
272
+
273
+ .ql-font-rockwell {
274
+ font-family: Rockwell, serif !important;
275
+ }
276
+
277
+ .ql-font-baskerville {
278
+ font-family: Baskerville, serif !important;
279
+ }
280
+
281
+ .ql-font-bodoni-mt {
282
+ font-family: "Bodoni MT", serif !important;
283
+ }
284
+
285
+ .ql-font-copperplate {
286
+ font-family: Copperplate, serif !important;
287
+ }
288
+
289
+ .ql-font-perpetua {
290
+ font-family: Perpetua, serif !important;
291
+ }
292
+
293
+ .ql-font-monaco {
294
+ font-family: Monaco, monospace !important;
295
+ }
296
+
297
+ .ql-font-century-schoolbook {
298
+ font-family: "Century Schoolbook", serif !important;
299
+ }
300
+
301
+ .ql-font-segoe-ui {
302
+ font-family: "Segoe UI", sans-serif !important;
303
+ }
304
+
305
+ .ql-snow .ql-toolbar button.ql-fullscreen {
306
+ &:hover .ql-stroke {
307
+ stroke: #06c;
308
+ }
309
+
310
+ .ql-stroke {
311
+ stroke: #444;
312
+ }
313
+ }
314
+ }
315
+ }
316
+
317
+
318
+ .ql-editor table {
319
+ width: 100%;
320
+ border-collapse: collapse;
321
+ }
322
+
323
+ .ql-editor table td,
324
+ .ql-editor table th {
325
+ border: 1px solid #ddd;
326
+ padding: 8px;
327
+ }
328
+
329
+ .ql-editor table th {
330
+ background-color: #f2f2f2;
331
+ text-align: left;
332
+ }
333
+
334
+ // Resim hizalama stilleri
335
+ .ql-editor {
336
+ img {
337
+ display: inline-block;
338
+ max-width: 100%;
339
+
340
+ &.align-left {
341
+ float: left;
342
+ margin: 0 15px 10px 0;
343
+ clear: none;
344
+ }
345
+
346
+ &.align-right {
347
+ float: right;
348
+ margin: 0 0 10px 15px;
349
+ clear: none;
350
+ }
351
+
352
+ &.align-center {
353
+ display: block;
354
+ margin: 10px auto;
355
+ float: none;
356
+ clear: both;
357
+ }
358
+
359
+ &.align-none {
360
+ display: inline-block;
361
+ margin: 0;
362
+ float: none;
363
+ clear: none;
364
+ }
365
+ }
366
+
367
+ // Paragrafların resmin yanında düzgün akmasını sağla
368
+ p {
369
+ margin: 0 0 1em 0;
370
+
371
+ &:has(img.align-left),
372
+ &:has(img.align-right) {
373
+ overflow: visible;
374
+
375
+ // Paragraf içindeki metin resmin yanında akmalı
376
+ &::after {
377
+ content: "";
378
+ display: table;
379
+ clear: none;
380
+ }
381
+ }
382
+ }
383
+
384
+ // Resimden sonraki paragraflar da yanında akmalı
385
+ img.align-left ~ p,
386
+ img.align-right ~ p {
387
+ overflow: visible;
388
+ }
389
389
  }