simditor-rails 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,575 @@
1
+ @charset "UTF-8";
2
+
3
+ $simditor-toolbar-height: 60px;
4
+
5
+ .simditor {
6
+ position: relative;
7
+
8
+ .simditor-wrapper {
9
+ position: relative;
10
+ background: #ffffff;
11
+
12
+ .simditor-placeholder {
13
+ display: none;
14
+ position: absolute;
15
+ top: $simditor-toolbar-height;
16
+ left: 0;
17
+ z-index: 0;
18
+ padding: 22px 15px;
19
+ font-size: 16px;
20
+ font-family: helvetica,Arial;
21
+ line-height: 1.5;
22
+ color: #999999;
23
+ background: transparent;
24
+ }
25
+
26
+ &.toolbar-floating {
27
+ padding-top: $simditor-toolbar-height;
28
+
29
+ .simditor-toolbar {
30
+ position: fixed;
31
+ top: 0;
32
+ z-index: 10;
33
+ box-shadow: 0 0 6px rgba(0,0,0,0.1);
34
+ }
35
+ }
36
+ }
37
+
38
+ .simditor-body {
39
+ min-height: 500px;
40
+ outline: none;
41
+ cursor: text;
42
+ position: relative;
43
+ z-index: 1;
44
+ background: transparent;
45
+
46
+ & > :first-child {
47
+ margin-top: 0!important;
48
+ }
49
+
50
+ a.selected {
51
+ background: #b3d4fd;
52
+ }
53
+
54
+ a.simditor-mention {
55
+ cursor: pointer;
56
+ }
57
+
58
+ .simditor-image {
59
+ margin: 15px 0;
60
+ cursor: pointer;
61
+ outline: none;
62
+ position: relative;
63
+
64
+ &.selected {
65
+ background: none;
66
+ box-shadow: 0 0 0 4px rgba(0,0,0,0.2);
67
+ }
68
+
69
+ img {
70
+ margin: 0;
71
+ }
72
+
73
+ .mask {
74
+ position: absolute;
75
+ background: rgba(0,0,0,0.4);
76
+ width: 100%;
77
+ height: 100%;
78
+ top: 0;
79
+ }
80
+
81
+ .simditor-image-progress-bar {
82
+ border: 1px solid #cccccc;
83
+ background: #ffffff;
84
+ padding: 2px;
85
+ margin: 0 auto;
86
+ border-radius: 10px;
87
+ position: relative;
88
+ top: -50%;
89
+ width: 100px;
90
+ color: #ffffff;
91
+
92
+ &.hint {
93
+ font-size: 12px;
94
+ background: transparent;
95
+ border: none;
96
+ text-align: center;
97
+ }
98
+
99
+ div {
100
+ width: 100px;
101
+ height: 5px;
102
+ margin: 0;
103
+ padding: 0;
104
+
105
+ span {
106
+ display: block;
107
+ margin: 0;
108
+ padding: 0;
109
+ width: 1%;
110
+ height: 100%;
111
+ background: #0f769f;
112
+ border-radius: 10px;
113
+ }
114
+ }
115
+ }
116
+
117
+ .simditor-image-resize-handle {
118
+ display: none;
119
+ }
120
+ }
121
+
122
+ .simditor-table {
123
+ position: relative;
124
+
125
+ &.resizing {
126
+ cursor: col-resize;
127
+ }
128
+
129
+ .resize-handle {
130
+ position: absolute;
131
+ left: 0;
132
+ top: 0;
133
+ width: 10px;
134
+ height: 100%;
135
+ cursor: col-resize;
136
+ }
137
+ }
138
+
139
+ pre {
140
+ min-height: 28px;
141
+ box-sizing: border-box;
142
+ -moz-box-sizing: border-box;
143
+ }
144
+
145
+ }
146
+
147
+ .simditor-paste-area {
148
+ background: transparent;
149
+ border: none;
150
+ outline: none;
151
+ }
152
+
153
+ .simditor-toolbar {
154
+ border-bottom: 1px solid #eeeeee;
155
+ background: #ffffff;
156
+ width: 100%;
157
+
158
+ & > ul {
159
+ height: $simditor-toolbar-height;
160
+ margin: 0;
161
+ padding: 0;
162
+ list-style: none;
163
+
164
+ & > li {
165
+ position: relative;
166
+ float: left;
167
+
168
+ & > span.separator {
169
+ display: block;
170
+ float: left;
171
+ background: #eeeeee;
172
+ width: 1px;
173
+ height: 18px;
174
+ margin: 20px 15px;
175
+ }
176
+
177
+ & > .toolbar-item {
178
+ display: block;
179
+ float: left;
180
+ width: 50px;
181
+ height: $simditor-toolbar-height;
182
+ outline: none;
183
+ overflow: hidden;
184
+ color: #333333;
185
+ font-size: 15px;
186
+ line-height: $simditor-toolbar-height;
187
+ text-align: center;
188
+ text-decoration: none;
189
+ margin: 0 1px;
190
+
191
+ span {
192
+ opacity: 0.6;
193
+ }
194
+
195
+ &:hover span {
196
+ opacity: 1;
197
+ }
198
+
199
+ &.active {
200
+ background: #eeeeee;
201
+
202
+ span {
203
+ opacity: 1;
204
+ }
205
+ }
206
+
207
+ &.disabled {
208
+ cursor: default;
209
+
210
+ span {
211
+ opacity: 0.3;
212
+ }
213
+ }
214
+
215
+ &.toolbar-item-title {
216
+ span:before {
217
+ content: "T";
218
+ font-size: 19px;
219
+ font-weight: bold;
220
+ font-family: 'Times New Roman';
221
+ }
222
+
223
+ &.active-h1 span:before {
224
+ content: 'H1';
225
+ font-size: 18px;
226
+ }
227
+
228
+ &.active-h2 span:before {
229
+ content: 'H2';
230
+ font-size: 18px;
231
+ }
232
+
233
+ &.active-h3 span:before {
234
+ content: 'H3';
235
+ font-size: 18px;
236
+ }
237
+ }
238
+ }
239
+
240
+ &.menu-on {
241
+ .toolbar-item {
242
+ position: relative;
243
+ z-index: 21;
244
+ background: #ffffff;
245
+ box-shadow: 0 -3px 3px rgba(0,0,0,0.2);
246
+ }
247
+
248
+ .toolbar-menu {
249
+ display: block;
250
+ }
251
+ }
252
+ }
253
+ }
254
+
255
+ .toolbar-menu {
256
+ display: none;
257
+ position: absolute;
258
+ top: $simditor-toolbar-height - 1px;
259
+ left: 1px;
260
+ z-index: 20;
261
+ background: #ffffff;
262
+ text-align: left;
263
+ box-shadow: 0 0 3px rgba(0,0,0,0.2);
264
+
265
+ ul {
266
+ min-width: 160px;
267
+ list-style: none;
268
+ margin: 0;
269
+ padding: 10px 1px;
270
+
271
+ & > li {
272
+
273
+ .menu-item {
274
+ display: block;
275
+ font-size:16px;
276
+ line-height: 2em;
277
+ padding: 0 10px;
278
+ text-decoration: none;
279
+ color: #666666;
280
+
281
+ &:hover {
282
+ background: #f6f6f6;
283
+ }
284
+
285
+ &.menu-item-h1 {
286
+ font-size: 24px;
287
+ color: #333333;
288
+ }
289
+
290
+ &.menu-item-h2 {
291
+ font-size: 22px;
292
+ color: #333333;
293
+ }
294
+
295
+ &.menu-item-h3 {
296
+ font-size: 20px;
297
+ color: #333333;
298
+ }
299
+ }
300
+
301
+ .separator {
302
+ display: block;
303
+ border-top: 1px solid #cccccc;
304
+ height: 0;
305
+ line-height: 0;
306
+ font-size: 0;
307
+ margin: 6px 0;
308
+ }
309
+ }
310
+
311
+ }
312
+
313
+ &.toolbar-menu-table {
314
+ .menu-create-table {
315
+ background: #ffffff;
316
+
317
+ table {
318
+ border: none;
319
+ border-collapse: collapse;
320
+ border-spacing: 0;
321
+ table-layout: fixed;
322
+
323
+ td {
324
+ height: 16px;
325
+ padding: 0;
326
+ border: 2px solid #ffffff;
327
+ background: #f3f3f3;
328
+ cursor: pointer;
329
+
330
+ &:before {
331
+ width: 16px;
332
+ display: block;
333
+ content: ''
334
+ }
335
+
336
+ &.selected {
337
+ background: #cfcfcf;
338
+ }
339
+ }
340
+ }
341
+ }
342
+
343
+ .menu-edit-table {
344
+ display: none;
345
+ }
346
+ }
347
+
348
+ &.toolbar-menu-image {
349
+ .menu-item-upload-image {
350
+ position: relative;
351
+ overflow: hidden;
352
+
353
+ input[type=file] {
354
+ position: absolute;
355
+ right: 0px;
356
+ top: 0px;
357
+ opacity: 0;
358
+ font-size: 100px;
359
+ cursor: pointer;
360
+ }
361
+ }
362
+ }
363
+ }
364
+ }
365
+
366
+ .simditor-popover {
367
+ display: none;
368
+ padding: 5px 8px 0;
369
+ background: #ffffff;
370
+ box-shadow: 0 1px 4px rgba(0,0,0,0.4);
371
+ border-radius: 2px;
372
+ position: absolute;
373
+ z-index: 2;
374
+
375
+ .settings-field {
376
+ margin: 0 0 5px 0;
377
+ font-size: 12px;
378
+
379
+ label {
380
+ margin: 0 2px 0 0;
381
+ }
382
+
383
+ input[type=text] {
384
+ width: 200px;
385
+ box-sizing: border-box;
386
+ font-size: 12px;
387
+ }
388
+ }
389
+
390
+ &.link-popover .btn-unlink,
391
+ &.image-popover .btn-upload {
392
+ margin: 0 0 0 5px;
393
+ color: #333333;
394
+ font-size: 14px;
395
+
396
+ span {
397
+ opacity: 0.6;
398
+ }
399
+
400
+ &:hover span {
401
+ opacity: 1;
402
+ }
403
+ }
404
+
405
+ &.image-popover .btn-upload {
406
+ position: relative;
407
+ display: inline-block;
408
+
409
+ input[type=file] {
410
+ position: absolute;
411
+ right: 0px;
412
+ top: 0px;
413
+ opacity: 0;
414
+ height: 100%;
415
+ width: 28px;
416
+ }
417
+ }
418
+ }
419
+ }
420
+
421
+ .simditor .simditor-body, .editor-style {
422
+ padding: 22px 15px 40px;
423
+ font-size: 16px;
424
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
425
+ line-height: 1.5;
426
+ color: #333;
427
+ outline: none;
428
+ word-wrap: break-word;
429
+
430
+ a{ color: #4298BA; text-decoration: none; word-break: break-all;}
431
+ a:visited{ color: #4298BA; }
432
+ a:hover{ color: #0F769F; }
433
+ a:active{ color:#9E792E; }
434
+ a:hover, a:active{ outline: 0; }
435
+
436
+ h1,h2,h3,h4,h5,h6 {
437
+ font-weight: normal;
438
+ color: #000!important;
439
+ text-align: left!important;
440
+ line-height: 1.6!important;
441
+ margin: 0.5em 0!important;
442
+ }
443
+
444
+ h1 { font-size: 1.6em!important; }
445
+ h2 { font-size: 1.4em!important; }
446
+ h3 { font-size: 1.2em!important; }
447
+ h4 { font-size: 1em!important; }
448
+ h5 { font-size: 1em!important; }
449
+ h6 { font-size: 1em!important; }
450
+
451
+ p, div {
452
+ margin:0 0 0 0;
453
+ /*margin:0 0 12px 0;*/
454
+ word-wrap: break-word;
455
+ }
456
+
457
+ b, strong {
458
+ font-weight: bold!important;
459
+ /*color: #e79852;*/
460
+ }
461
+
462
+ i, em {
463
+ font-style: italic!important;
464
+ }
465
+
466
+ u {
467
+ text-decoration: underline;
468
+ }
469
+
470
+ ul, ol {
471
+ list-style: disc outside none;
472
+ margin: 15px 0;
473
+ padding: 0 0 0 40px;
474
+ line-height: 1.6;
475
+
476
+ ul, ol {
477
+ padding-left: 25px;
478
+ margin: 0;
479
+ }
480
+
481
+ ul {
482
+ list-style: circle outside none;
483
+
484
+ ul {
485
+ list-style: square outside none;
486
+ }
487
+ }
488
+ }
489
+
490
+ ol {
491
+ list-style:decimal;
492
+ }
493
+
494
+ li p:last-child {
495
+ margin:0
496
+ }
497
+
498
+ blockquote {
499
+ border-left: 6px solid #ddd;
500
+ padding: 5px 0 5px 10px;
501
+ margin: 15px 0 15px 15px;
502
+
503
+ & > :first-child {
504
+ margin-top: 0;
505
+ }
506
+ }
507
+
508
+ pre {
509
+ padding: 5px 5px 5px 10px;
510
+ margin: 15px 0;
511
+ display: block;
512
+ font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace;
513
+ font-size:13px;
514
+ line-height: 18px;
515
+ background: #F0F0F0;
516
+ border-radius: 3px;
517
+ overflow-x: auto;
518
+ white-space: pre-wrap; /* CSS3 */
519
+ white-space: -moz-pre-wrap; /* Mozilla, post millennium */
520
+ white-space: -o-pre-wrap; /* Opera 7 */
521
+
522
+ p {
523
+ margin: 2px 0;
524
+ }
525
+ }
526
+
527
+ hr {
528
+ display: block;
529
+ height: 0px;
530
+ border: 0;
531
+ border-top: 1px solid #ccc;
532
+ margin: 15px 0;
533
+ padding: 0;
534
+ }
535
+
536
+ table {
537
+ width: 100%;
538
+ table-layout: fixed;
539
+ border-collapse: collapse;
540
+ border-spacing: 0;
541
+ margin: 15px 0;
542
+
543
+ thead {
544
+ background-color: #f9f9f9;
545
+ }
546
+
547
+ td {
548
+ min-width: 40px;
549
+ height: 30px;
550
+ border: 1px solid #ccc;
551
+ vertical-align: top;
552
+ padding: 2px 4px;
553
+ box-sizing: border-box;
554
+
555
+ &.active {
556
+ background-color: #ffffee;
557
+ }
558
+ }
559
+ }
560
+
561
+
562
+ img {
563
+ margin: 20px 0;
564
+ display: block;
565
+ -ms-interpolation-mode: bicubic;
566
+ vertical-align: bottom;
567
+ box-shadow: 0 0 8px rgba(0, 0, 0, .3);
568
+ }
569
+
570
+ @for $i from 0 through 10 {
571
+ *[data-indent="#{$i}"] {
572
+ margin-left: 40px * $i;
573
+ }
574
+ }
575
+ }
metadata ADDED
@@ -0,0 +1,50 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: simditor-rails
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.0.1
5
+ platform: ruby
6
+ authors:
7
+ - Hsu Pan
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2014-03-31 00:00:00.000000000 Z
12
+ dependencies: []
13
+ description: Rails assets wrapper for https://github.com/mycolorway/simditor
14
+ email:
15
+ - cqpanxu@gmail.com
16
+ executables: []
17
+ extensions: []
18
+ extra_rdoc_files: []
19
+ files:
20
+ - lib/simditor-rails.rb
21
+ - lib/simditor-rails/version.rb
22
+ - vendor/assets/javascripts/simditor.js
23
+ - vendor/assets/javascripts/simditor/module.coffee
24
+ - vendor/assets/javascripts/simditor/simditor.coffee
25
+ - vendor/assets/javascripts/simditor/uploader.coffee
26
+ - vendor/assets/stylesheets/simditor.scss
27
+ homepage: https://github.com/cqpx/simditor-rails
28
+ licenses: []
29
+ metadata: {}
30
+ post_install_message:
31
+ rdoc_options: []
32
+ require_paths:
33
+ - lib
34
+ required_ruby_version: !ruby/object:Gem::Requirement
35
+ requirements:
36
+ - - ">="
37
+ - !ruby/object:Gem::Version
38
+ version: '0'
39
+ required_rubygems_version: !ruby/object:Gem::Requirement
40
+ requirements:
41
+ - - ">="
42
+ - !ruby/object:Gem::Version
43
+ version: '0'
44
+ requirements: []
45
+ rubyforge_project: "[none]"
46
+ rubygems_version: 2.2.2
47
+ signing_key:
48
+ specification_version: 4
49
+ summary: A simple editor designed by mycolorway http://mycolorway.github.io/simditor/demo.html
50
+ test_files: []