simditoredit-rails 0.0.1

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.
@@ -0,0 +1,675 @@
1
+ @charset "UTF-8";
2
+
3
+ $simditor-button-height: 40px;
4
+
5
+ .simditor {
6
+ position: relative;
7
+ border: 1px solid #c9d8db;
8
+
9
+ .simditor-wrapper {
10
+ position: relative;
11
+ background: #ffffff;
12
+ overflow: hidden;
13
+
14
+ .simditor-placeholder {
15
+ display: none;
16
+ position: absolute;
17
+ left: 0;
18
+ z-index: 0;
19
+ padding: 22px 15px;
20
+ font-size: 16px;
21
+ font-family: arial, sans-serif;
22
+ line-height: 1.5;
23
+ color: #999999;
24
+ background: transparent;
25
+ }
26
+
27
+ &.toolbar-floating {
28
+ .simditor-toolbar {
29
+ position: fixed;
30
+ top: 0;
31
+ z-index: 10;
32
+ box-shadow: 0 0 6px rgba(0,0,0,0.1);
33
+ }
34
+ }
35
+
36
+ .simditor-image-loading {
37
+ width: 100%;
38
+ height: 100%;
39
+ margin: 0 5px;
40
+ background: rgba(0,0,0,0.4);
41
+ position: absolute;
42
+ top: 0;
43
+ left: 0;
44
+ z-index: 2;
45
+
46
+ span {
47
+ width: 30px;
48
+ height: 30px;
49
+ background: #ffffff asset-url('loading-upload.gif') no-repeat center center;
50
+ border-radius: 30px;
51
+ position: absolute;
52
+ top: 50%;
53
+ left: 50%;
54
+ margin: -15px 0 0 -15px;
55
+ box-shadow: 0 0 8px rgba(0,0,0,0.4);
56
+ }
57
+
58
+ &.uploading span {
59
+ background: #ffffff;
60
+ color: #333333;
61
+ font-size: 14px;
62
+ line-height: 30px;
63
+ text-align: center;
64
+ }
65
+ }
66
+ }
67
+
68
+ .simditor-body {
69
+ padding: 22px 15px 40px;
70
+ min-height: 300px;
71
+ outline: none;
72
+ cursor: text;
73
+ position: relative;
74
+ z-index: 1;
75
+ background: transparent;
76
+
77
+ a.selected {
78
+ background: #b3d4fd;
79
+ }
80
+
81
+ a.simditor-mention {
82
+ cursor: pointer;
83
+ }
84
+
85
+ .simditor-table {
86
+ position: relative;
87
+
88
+ &.resizing {
89
+ cursor: col-resize;
90
+ }
91
+
92
+ .simditor-resize-handle {
93
+ position: absolute;
94
+ left: 0;
95
+ top: 0;
96
+ width: 10px;
97
+ height: 100%;
98
+ cursor: col-resize;
99
+ }
100
+ }
101
+
102
+ pre {
103
+ /*min-height: 28px;*/
104
+ box-sizing: border-box;
105
+ -moz-box-sizing: border-box;
106
+ }
107
+
108
+ img {
109
+ cursor: pointer;
110
+
111
+ &.selected {
112
+ box-shadow: 0 0 0 4px #cccccc;
113
+ }
114
+ }
115
+ }
116
+
117
+ .simditor-paste-area,
118
+ .simditor-clean-paste-area {
119
+ background: transparent;
120
+ border: none;
121
+ outline: none;
122
+ resize: none;
123
+ padding: 0;
124
+ margin: 0;
125
+ }
126
+
127
+ .simditor-toolbar {
128
+ border-bottom: 1px solid #eeeeee;
129
+ background: #ffffff;
130
+ width: 100%;
131
+
132
+ & > ul {
133
+ margin: 0;
134
+ padding: 0 0 0 6px;
135
+ list-style: none;
136
+
137
+ &:after {
138
+ content:"";
139
+ display:table;
140
+ clear:both;
141
+ }
142
+
143
+ & > li {
144
+ position: relative;
145
+ float: left;
146
+
147
+ & > span.separator {
148
+ display: block;
149
+ float: left;
150
+ background: #cfcfcf;
151
+ width: 1px;
152
+ height: 18px;
153
+ margin: ($simditor-button-height - 18px) / 2 15px;
154
+ }
155
+
156
+ & > .toolbar-item {
157
+ display: block;
158
+ float: left;
159
+ width: 50px;
160
+ height: $simditor-button-height;
161
+ outline: none;
162
+ overflow: hidden;
163
+ color: #333333;
164
+ font-size: 15px;
165
+ line-height: $simditor-button-height;
166
+ text-align: center;
167
+ text-decoration: none;
168
+
169
+ span {
170
+ opacity: 0.6;
171
+
172
+ &.fa {
173
+ display: inline;
174
+ line-height: normal;
175
+ }
176
+ }
177
+
178
+ &:hover span {
179
+ opacity: 1;
180
+ }
181
+
182
+ &.active {
183
+ background: #eeeeee;
184
+
185
+ span {
186
+ opacity: 1;
187
+ }
188
+ }
189
+
190
+ &.disabled {
191
+ cursor: default;
192
+
193
+ span {
194
+ opacity: 0.3;
195
+ }
196
+ }
197
+
198
+ &.toolbar-item-title {
199
+ span:before {
200
+ content: "T";
201
+ font-size: 19px;
202
+ font-weight: bold;
203
+ font-family: 'Times New Roman';
204
+ }
205
+
206
+ &.active-h1 span:before {
207
+ content: 'H1';
208
+ font-size: 18px;
209
+ }
210
+
211
+ &.active-h2 span:before {
212
+ content: 'H2';
213
+ font-size: 18px;
214
+ }
215
+
216
+ &.active-h3 span:before {
217
+ content: 'H3';
218
+ font-size: 18px;
219
+ }
220
+ }
221
+
222
+ &.toolbar-item-color {
223
+ font-size: 14px;
224
+ position: relative;
225
+
226
+ span:before {
227
+ position: relative;
228
+ top: -2px;
229
+ }
230
+
231
+ &:after {
232
+ content: '';
233
+ display: block;
234
+ width: 14px;
235
+ height: 4px;
236
+ background: #cccccc;
237
+ position: absolute;
238
+ top: 26px;
239
+ left: 50%;
240
+ margin: 0 0 0 -7px;
241
+ }
242
+
243
+ &:hover:after {
244
+ background: #999999;
245
+ }
246
+
247
+ &.disabled:after {
248
+ background: #dfdfdf;
249
+ }
250
+ }
251
+ }
252
+
253
+ &.menu-on {
254
+ .toolbar-item {
255
+ position: relative;
256
+ z-index: 21;
257
+ background: #ffffff;
258
+ box-shadow: 0 -3px 3px rgba(0,0,0,0.2);
259
+
260
+ span {
261
+ opacity: 1;
262
+ }
263
+
264
+ &.toolbar-item-color:after {
265
+ background: #999999;
266
+ }
267
+ }
268
+
269
+ .toolbar-menu {
270
+ display: block;
271
+ }
272
+ }
273
+ }
274
+ }
275
+
276
+ .toolbar-menu {
277
+ display: none;
278
+ position: absolute;
279
+ top: $simditor-button-height;
280
+ left: 0;
281
+ z-index: 20;
282
+ background: #ffffff;
283
+ text-align: left;
284
+ box-shadow: 0 0 3px rgba(0,0,0,0.2);
285
+
286
+ ul {
287
+ min-width: 160px;
288
+ list-style: none;
289
+ margin: 0;
290
+ padding: 10px 1px;
291
+
292
+ & > li {
293
+
294
+ .menu-item {
295
+ display: block;
296
+ font-size:16px;
297
+ line-height: 2em;
298
+ padding: 0 10px;
299
+ text-decoration: none;
300
+ color: #666666;
301
+
302
+ &:hover {
303
+ background: #f6f6f6;
304
+ }
305
+
306
+ &.menu-item-h1 {
307
+ font-size: 24px;
308
+ color: #333333;
309
+ }
310
+
311
+ &.menu-item-h2 {
312
+ font-size: 22px;
313
+ color: #333333;
314
+ }
315
+
316
+ &.menu-item-h3 {
317
+ font-size: 20px;
318
+ color: #333333;
319
+ }
320
+ }
321
+
322
+ .separator {
323
+ display: block;
324
+ border-top: 1px solid #cccccc;
325
+ height: 0;
326
+ line-height: 0;
327
+ font-size: 0;
328
+ margin: 6px 0;
329
+ }
330
+ }
331
+
332
+ }
333
+
334
+ &.toolbar-menu-color {
335
+ width: 96px;
336
+
337
+ .color-list {
338
+ padding: 10px 6px 10px 10px;
339
+ min-width: 0;
340
+
341
+ li {
342
+ float: left;
343
+ margin: 0 4px 4px 0;
344
+
345
+ .font-color {
346
+ display: block;
347
+ width: 16px;
348
+ height: 16px;
349
+ background: #dfdfdf;
350
+ border-radius: 2px;
351
+
352
+ &:hover {
353
+ opacity: 0.8;
354
+ }
355
+ }
356
+
357
+ $font-colors: #ef6559 #e28b41 #c8a732 #209361 #418caf #7071ac #aa8773 #777777;
358
+ $i: 1;
359
+ @each $color in $font-colors {
360
+ .font-color-#{$i} {
361
+ background: $color;
362
+ }
363
+ $i: $i + 1;
364
+ }
365
+
366
+
367
+ &.remove-color {
368
+ padding: 5px 4px 0 0;
369
+ margin: 0;
370
+ float: none;
371
+ text-align: center;
372
+ line-height: 12px;
373
+ clear: both;
374
+
375
+ .link-remove-color {
376
+ font-size: 12px;
377
+ color: #666666;
378
+ &:hover {
379
+ color: #999999;
380
+ }
381
+ }
382
+ }
383
+ }
384
+ }
385
+ }
386
+
387
+ &.toolbar-menu-table {
388
+ .menu-create-table {
389
+ background: #ffffff;
390
+
391
+ table {
392
+ border: none;
393
+ border-collapse: collapse;
394
+ border-spacing: 0;
395
+ table-layout: fixed;
396
+
397
+ td {
398
+ height: 16px;
399
+ padding: 0;
400
+ border: 2px solid #ffffff;
401
+ background: #f3f3f3;
402
+ cursor: pointer;
403
+
404
+ &:before {
405
+ width: 16px;
406
+ display: block;
407
+ content: ''
408
+ }
409
+
410
+ &.selected {
411
+ background: #cfcfcf;
412
+ }
413
+ }
414
+ }
415
+ }
416
+
417
+ .menu-edit-table {
418
+ display: none;
419
+ }
420
+ }
421
+
422
+ &.toolbar-menu-image {
423
+ .menu-item-upload-image {
424
+ position: relative;
425
+ overflow: hidden;
426
+
427
+ input[type=file] {
428
+ position: absolute;
429
+ right: 0px;
430
+ top: 0px;
431
+ opacity: 0;
432
+ font-size: 100px;
433
+ cursor: pointer;
434
+ }
435
+ }
436
+ }
437
+ }
438
+ }
439
+
440
+ .simditor-popover {
441
+ display: none;
442
+ padding: 5px 8px 0;
443
+ background: #ffffff;
444
+ box-shadow: 0 1px 4px rgba(0,0,0,0.4);
445
+ border-radius: 2px;
446
+ position: absolute;
447
+ z-index: 2;
448
+
449
+ .settings-field {
450
+ margin: 0 0 5px 0;
451
+ font-size: 12px;
452
+ height: 25px;
453
+ line-height: 25px;
454
+
455
+ label {
456
+ margin: 0 8px 0 0;
457
+ float: left;
458
+ }
459
+
460
+ input[type=text] {
461
+ float: left;
462
+ width: 200px;
463
+ box-sizing: border-box;
464
+ font-size: 12px;
465
+ }
466
+ }
467
+
468
+ &.link-popover .btn-unlink,
469
+ &.image-popover .btn-upload {
470
+ float: left;
471
+ margin: 0 0 0 8px;
472
+ color: #333333;
473
+ font-size: 14px;
474
+
475
+ span {
476
+ opacity: 0.6;
477
+ }
478
+
479
+ &:hover span {
480
+ opacity: 1;
481
+ }
482
+ }
483
+
484
+ &.image-popover .btn-upload {
485
+ position: relative;
486
+ display: inline-block;
487
+ overflow: hidden;
488
+
489
+ input[type=file] {
490
+ position: absolute;
491
+ right: 0px;
492
+ top: 0px;
493
+ opacity: 0;
494
+ height: 100%;
495
+ width: 28px;
496
+ }
497
+ }
498
+ }
499
+
500
+ &.simditor-mobile {
501
+ .simditor-toolbar > ul > li > .toolbar-item {
502
+ width: 46px;
503
+ }
504
+
505
+ .simditor-wrapper.toolbar-floating .simditor-toolbar {
506
+ position: absolute;
507
+ top: 0;
508
+ z-index: 10;
509
+ box-shadow: 0 0 6px rgba(0,0,0,0.1);
510
+ }
511
+ }
512
+ }
513
+
514
+
515
+
516
+ .simditor .simditor-body, .editor-style {
517
+ font-size: 16px;
518
+ font-family: arial, sans-serif;
519
+ line-height: 1.6;
520
+ color: #333;
521
+ outline: none;
522
+ word-wrap: break-word;
523
+
524
+ & > :first-child {
525
+ margin-top: 0!important;
526
+ }
527
+
528
+ a{ color: #4298BA; text-decoration: none; word-break: break-all;}
529
+ a:visited{ color: #4298BA; }
530
+ a:hover{ color: #0F769F; }
531
+ a:active{ color:#9E792E; }
532
+ a:hover, a:active{ outline: 0; }
533
+
534
+ h1,h2,h3,h4,h5,h6 {
535
+ font-weight: normal;
536
+ margin: 40px 0 20px;
537
+ color: #000000;
538
+ }
539
+
540
+ h1 { font-size: 24px; }
541
+ h2 { font-size: 22px; }
542
+ h3 { font-size: 20px; }
543
+ h4 { font-size: 18px; }
544
+ h5 { font-size: 16px; }
545
+ h6 { font-size: 16px; }
546
+
547
+ p, div {
548
+ word-wrap: break-word;
549
+ margin: 0 0 15px 0;
550
+ color: #333;
551
+ word-wrap: break-word;
552
+ }
553
+
554
+ b, strong {
555
+ font-weight: bold;
556
+ }
557
+
558
+ i, em {
559
+ font-style: italic;
560
+ }
561
+
562
+ u {
563
+ text-decoration: underline;
564
+ }
565
+
566
+ strike, del {
567
+ text-decoration: line-through;
568
+ }
569
+
570
+ ul, ol {
571
+ list-style:disc outside none;
572
+ margin: 15px 0;
573
+ padding: 0 0 0 40px;
574
+ line-height: 1.6;
575
+
576
+ ul, ol {
577
+ padding-left: 30px;
578
+ }
579
+
580
+ ul {
581
+ list-style: circle outside none;
582
+
583
+ ul {
584
+ list-style: square outside none;
585
+ }
586
+ }
587
+ }
588
+
589
+ ol {
590
+ list-style:decimal;
591
+ }
592
+
593
+ blockquote {
594
+ border-left: 6px solid #ddd;
595
+ padding: 5px 0 5px 10px;
596
+ margin: 15px 0 15px 15px;
597
+
598
+ & > :first-child {
599
+ margin-top: 0;
600
+ }
601
+ }
602
+
603
+ pre {
604
+ padding: 10px 5px 10px 10px;
605
+ margin: 15px 0;
606
+ display: block;
607
+ line-height: 18px;
608
+ background: #F0F0F0;
609
+ border-radius: 3px;
610
+ font-size:13px;
611
+ font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace;
612
+ /*overflow-x: auto;*/
613
+ white-space: pre;
614
+ word-wrap: break-word;
615
+ }
616
+
617
+ code {
618
+ display: inline-block;
619
+ padding: 0 4px;
620
+ margin: 0 5px;
621
+ background: #eeeeee;
622
+ border-radius: 3px;
623
+ font-size:13px;
624
+ font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace;
625
+ }
626
+
627
+ hr {
628
+ display: block;
629
+ height: 0px;
630
+ border: 0;
631
+ border-top: 1px solid #ccc;
632
+ margin: 15px 0;
633
+ padding: 0;
634
+ }
635
+
636
+ table {
637
+ width: 100%;
638
+ table-layout: fixed;
639
+ border-collapse: collapse;
640
+ border-spacing: 0;
641
+ margin: 15px 0;
642
+
643
+ thead {
644
+ background-color: #f9f9f9;
645
+ }
646
+
647
+ td {
648
+ min-width: 40px;
649
+ height: 30px;
650
+ border: 1px solid #ccc;
651
+ vertical-align: top;
652
+ padding: 2px 4px;
653
+ box-sizing: border-box;
654
+
655
+ &.active {
656
+ background-color: #ffffee;
657
+ }
658
+ }
659
+ }
660
+
661
+
662
+ img {
663
+ max-width: 800px;
664
+ margin: 0 5px;
665
+ vertical-align: middle;
666
+ }
667
+
668
+ @for $i from 0 through 10 {
669
+ *[data-indent="#{$i}"] {
670
+ margin-left: 40px * $i;
671
+ }
672
+ }
673
+ }
674
+
675
+