trumbowyg.scss (18405B)
1 /** 2 * Trumbowyg v2.10.0 - A lightweight WYSIWYG editor 3 * Default stylesheet for Trumbowyg editor 4 * ------------------------ 5 * @link http://alex-d.github.io/Trumbowyg 6 * @license MIT 7 * @author Alexandre Demode (Alex-D) 8 * Twitter : @AlexandreDemode 9 * Website : alex-d.fr 10 */ 11 12 $light-color: #ecf0f1 !default; 13 $dark-color: #222 !default; 14 15 $modal-submit-color: #2ecc71 !default; 16 $modal-reset-color: #EEE !default; 17 18 $transition-duration: 150ms !default; 19 $slow-transition-duration: 300ms !default; 20 21 #trumbowyg-icons { 22 overflow: hidden; 23 visibility: hidden; 24 height: 0; 25 width: 0; 26 27 svg { 28 height: 0; 29 width: 0; 30 } 31 } 32 33 .trumbowyg-box { 34 *, 35 *::before, 36 *::after { 37 box-sizing: border-box; 38 } 39 40 svg { 41 width: 17px; 42 height: 100%; 43 fill: $dark-color; 44 } 45 } 46 47 .trumbowyg-box, 48 .trumbowyg-editor { 49 display: block; 50 position: relative; 51 border: 1px solid #DDD; 52 width: 100%; 53 min-height: 300px; 54 margin: 17px auto; 55 } 56 57 .trumbowyg-box .trumbowyg-editor { 58 margin: 0 auto; 59 } 60 61 .trumbowyg-box.trumbowyg-fullscreen { 62 background: #FEFEFE; 63 border: none !important; 64 } 65 66 .trumbowyg-editor, 67 .trumbowyg-textarea { 68 position: relative; 69 box-sizing: border-box; 70 padding: 20px; 71 min-height: 300px; 72 width: 100%; 73 border-style: none; 74 resize: none; 75 outline: none; 76 overflow: auto; 77 78 &.trumbowyg-autogrow-on-enter { 79 transition: height $slow-transition-duration ease-out; 80 } 81 } 82 83 .trumbowyg-box-blur .trumbowyg-editor { 84 *, 85 &::before { 86 color: transparent !important; 87 text-shadow: 0 0 7px #333; 88 89 @media screen and (min-width: 0 \0) { 90 color: rgba(200, 200, 200, 0.6) !important; 91 } 92 @supports (-ms-accelerator:true) { 93 color: rgba(200, 200, 200, 0.6) !important; 94 } 95 } 96 img, 97 hr { 98 opacity: 0.2; 99 } 100 } 101 102 .trumbowyg-textarea { 103 position: relative; 104 display: block; 105 overflow: auto; 106 border: none; 107 font-size: 14px; 108 font-family: "Inconsolata", "Consolas", "Courier", "Courier New", sans-serif; 109 line-height: 18px; 110 } 111 112 .trumbowyg-box.trumbowyg-editor-visible { 113 .trumbowyg-textarea { 114 height: 1px !important; 115 width: 25%; 116 min-height: 0 !important; 117 padding: 0 !important; 118 background: none; 119 opacity: 0 !important; 120 } 121 } 122 123 .trumbowyg-box.trumbowyg-editor-hidden { 124 .trumbowyg-textarea { 125 display: block; 126 } 127 .trumbowyg-editor { 128 display: none; 129 } 130 } 131 132 .trumbowyg-box.trumbowyg-disabled { 133 .trumbowyg-textarea { 134 opacity: 0.8; 135 background: none; 136 } 137 } 138 139 .trumbowyg-editor[contenteditable=true]:empty:not(:focus)::before { 140 content: attr(placeholder); 141 color: #999; 142 pointer-events: none; 143 } 144 145 .trumbowyg-button-pane { 146 width: 100%; 147 min-height: 36px; 148 background: $light-color; 149 border-bottom: 1px solid darken($light-color, 7%); 150 margin: 0; 151 padding: 0 5px; 152 position: relative; 153 list-style-type: none; 154 line-height: 10px; 155 backface-visibility: hidden; 156 z-index: 11; 157 158 &::after { 159 content: " "; 160 display: block; 161 position: absolute; 162 top: 36px; 163 left: 0; 164 right: 0; 165 width: 100%; 166 height: 1px; 167 background: darken($light-color, 7%); 168 } 169 170 .trumbowyg-button-group { 171 display: inline-block; 172 173 .trumbowyg-fullscreen-button svg { 174 color: transparent; 175 } 176 177 &::after { 178 content: " "; 179 display: inline-block; 180 width: 1px; 181 background: darken($light-color, 7%); 182 margin: 0 5px; 183 height: 35px; 184 vertical-align: top; 185 } 186 187 &:last-child::after { 188 content: none; 189 } 190 } 191 192 button { 193 display: inline-block; 194 position: relative; 195 width: 35px; 196 height: 35px; 197 padding: 1px 6px !important; 198 margin-bottom: 1px; 199 overflow: hidden; 200 border: none; 201 cursor: pointer; 202 background: none; 203 vertical-align: middle; 204 transition: background-color $transition-duration, opacity $transition-duration; 205 206 &.trumbowyg-textual-button { 207 width: auto; 208 line-height: 35px; 209 user-select: none; 210 } 211 } 212 213 &.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active), 214 button.trumbowyg-disable, 215 .trumbowyg-disabled & button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button) { 216 opacity: 0.2; 217 cursor: default; 218 } 219 &.trumbowyg-disable, 220 .trumbowyg-disabled & { 221 .trumbowyg-button-group::before { 222 background: darken($light-color, 3%); 223 } 224 } 225 226 button:not(.trumbowyg-disable):hover, 227 button:not(.trumbowyg-disable):focus, 228 button.trumbowyg-active { 229 background-color: #FFF; 230 outline: none; 231 } 232 233 .trumbowyg-open-dropdown { 234 &::after { 235 display: block; 236 content: " "; 237 position: absolute; 238 top: 25px; 239 right: 3px; 240 height: 0; 241 width: 0; 242 border: 3px solid transparent; 243 border-top-color: #555; 244 } 245 246 &.trumbowyg-textual-button { 247 padding-left: 10px !important; 248 padding-right: 18px !important; 249 250 &::after { 251 top: 17px; 252 right: 7px; 253 } 254 } 255 } 256 257 .trumbowyg-right { 258 float: right; 259 } 260 } 261 262 .trumbowyg-dropdown { 263 width: 200px; 264 border: 1px solid $light-color; 265 padding: 5px 0; 266 border-top: none; 267 background: #FFF; 268 margin-left: -1px; 269 box-shadow: rgba(0, 0, 0, .1) 0 2px 3px; 270 z-index: 12; 271 272 button { 273 display: block; 274 width: 100%; 275 height: 35px; 276 line-height: 35px; 277 text-decoration: none; 278 background: #FFF; 279 padding: 0 10px; 280 color: #333 !important; 281 border: none; 282 cursor: pointer; 283 text-align: left; 284 font-size: 15px; 285 transition: all $transition-duration; 286 287 &:hover, 288 &:focus { 289 background: $light-color; 290 } 291 292 svg { 293 float: left; 294 margin-right: 14px; 295 } 296 } 297 } 298 299 /* Modal box */ 300 .trumbowyg-modal { 301 position: absolute; 302 top: 0; 303 left: 50%; 304 transform: translateX(-50%); 305 max-width: 520px; 306 width: 100%; 307 height: 350px; 308 z-index: 12; 309 overflow: hidden; 310 backface-visibility: hidden; 311 } 312 313 .trumbowyg-modal-box { 314 position: absolute; 315 top: 0; 316 left: 50%; 317 transform: translateX(-50%); 318 max-width: 500px; 319 width: calc(100% - 20px); 320 padding-bottom: 45px; 321 z-index: 1; 322 background-color: #FFF; 323 text-align: center; 324 font-size: 14px; 325 box-shadow: rgba(0, 0, 0, .2) 0 2px 3px; 326 backface-visibility: hidden; 327 328 .trumbowyg-modal-title { 329 font-size: 24px; 330 font-weight: bold; 331 margin: 0 0 20px; 332 padding: 15px 0 13px; 333 display: block; 334 border-bottom: 1px solid #EEE; 335 color: #333; 336 background: lighten($light-color, 5%); 337 } 338 339 .trumbowyg-progress { 340 width: 100%; 341 height: 3px; 342 position: absolute; 343 top: 58px; 344 345 .trumbowyg-progress-bar { 346 background: #2BC06A; 347 width: 0; 348 height: 100%; 349 transition: width $transition-duration linear; 350 } 351 } 352 353 label { 354 display: block; 355 position: relative; 356 margin: 15px 12px; 357 height: 29px; 358 line-height: 29px; 359 overflow: hidden; 360 361 .trumbowyg-input-infos { 362 display: block; 363 text-align: left; 364 height: 25px; 365 line-height: 25px; 366 transition: all 150ms; 367 368 span { 369 display: block; 370 color: darken($light-color, 45%); 371 background-color: lighten($light-color, 5%); 372 border: 1px solid #DEDEDE; 373 padding: 0 7px; 374 width: 150px; 375 } 376 span.trumbowyg-msg-error { 377 color: #e74c3c; 378 } 379 } 380 381 &.trumbowyg-input-error { 382 input, 383 textarea { 384 border: 1px solid #e74c3c; 385 } 386 387 .trumbowyg-input-infos { 388 margin-top: -27px; 389 } 390 } 391 392 input { 393 position: absolute; 394 top: 0; 395 right: 0; 396 height: 27px; 397 line-height: 27px; 398 border: 1px solid #DEDEDE; 399 background: #fff; 400 font-size: 14px; 401 max-width: 330px; 402 width: 70%; 403 padding: 0 7px; 404 transition: all $transition-duration; 405 406 &:hover, 407 &:focus { 408 outline: none; 409 border: 1px solid #95a5a6; 410 } 411 &:focus { 412 background: lighten($light-color, 5%); 413 } 414 } 415 416 input[type="checkbox"]{ 417 left: 5px; 418 top: 5px; 419 right: auto; 420 421 + .trumbowyg-input-infos span{ 422 width: auto; 423 padding-left: 25px; 424 } 425 } 426 } 427 428 .error { 429 margin-top: 25px; 430 display: block; 431 color: red; 432 } 433 434 .trumbowyg-modal-button { 435 position: absolute; 436 bottom: 10px; 437 right: 0; 438 text-decoration: none; 439 color: #FFF; 440 display: block; 441 width: 100px; 442 height: 35px; 443 line-height: 33px; 444 margin: 0 10px; 445 background-color: #333; 446 border: none; 447 cursor: pointer; 448 font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif; 449 font-size: 16px; 450 transition: all $transition-duration; 451 452 &.trumbowyg-modal-submit { 453 right: 110px; 454 background: darken($modal-submit-color, 3%); 455 456 &:hover, 457 &:focus { 458 background: lighten($modal-submit-color, 5%); 459 outline: none; 460 } 461 &:active { 462 background: darken($modal-submit-color, 10%); 463 } 464 } 465 466 &.trumbowyg-modal-reset { 467 color: #555; 468 background: darken($modal-reset-color, 3%); 469 470 &:hover, 471 &:focus { 472 background: lighten($modal-reset-color, 5%); 473 outline: none; 474 } 475 &:active { 476 background: darken($modal-reset-color, 10%); 477 } 478 } 479 } 480 } 481 482 .trumbowyg-overlay { 483 position: absolute; 484 background-color: rgba(255, 255, 255, 0.5); 485 height: 100%; 486 width: 100%; 487 left: 0; 488 display: none; 489 top: 0; 490 z-index: 10; 491 } 492 493 /** 494 * Fullscreen 495 */ 496 body.trumbowyg-body-fullscreen { 497 overflow: hidden; 498 } 499 500 .trumbowyg-fullscreen { 501 position: fixed; 502 top: 0; 503 left: 0; 504 width: 100%; 505 height: 100%; 506 margin: 0; 507 padding: 0; 508 z-index: 99999; 509 510 &.trumbowyg-box, 511 .trumbowyg-editor { 512 border: none; 513 } 514 .trumbowyg-editor, 515 .trumbowyg-textarea { 516 height: calc(100% - 37px) !important; 517 overflow: auto; 518 } 519 .trumbowyg-overlay { 520 height: 100% !important; 521 } 522 .trumbowyg-button-group .trumbowyg-fullscreen-button svg { 523 color: $dark-color; 524 fill: transparent; 525 } 526 } 527 528 .trumbowyg-editor { 529 object, 530 embed, 531 video, 532 img { 533 max-width: 100%; 534 } 535 video, 536 img { 537 height: auto; 538 } 539 img { 540 cursor: move; 541 } 542 543 /* 544 * lset for resetCss option 545 */ 546 &.trumbowyg-reset-css { 547 background: #FEFEFE !important; 548 font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important; 549 font-size: 14px !important; 550 line-height: 1.45em !important; 551 color: #333; 552 553 a { 554 color: #15c !important; 555 text-decoration: underline !important; 556 } 557 558 div, 559 p, 560 ul, 561 ol, 562 blockquote { 563 box-shadow: none !important; 564 background: none !important; 565 margin: 0 !important; 566 margin-bottom: 15px !important; 567 line-height: 1.4em !important; 568 font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important; 569 font-size: 14px !important; 570 border: none; 571 } 572 iframe, 573 object, 574 hr { 575 margin-bottom: 15px !important; 576 } 577 blockquote { 578 margin-left: 32px !important; 579 font-style: italic !important; 580 color: #555; 581 } 582 ul { 583 list-style: disc; 584 } 585 ul, 586 ol { 587 padding-left: 20px !important; 588 } 589 ul ul, 590 ol ol, 591 ul ol, 592 ol ul { 593 border: none; 594 margin: 2px !important; 595 padding: 0 !important; 596 padding-left: 24px !important; 597 } 598 hr { 599 display: block; 600 height: 1px; 601 border: none; 602 border-top: 1px solid #CCC; 603 } 604 605 h1, 606 h2, 607 h3, 608 h4 { 609 color: #111; 610 background: none; 611 margin: 0 !important; 612 padding: 0 !important; 613 font-weight: bold; 614 } 615 616 h1 { 617 font-size: 32px !important; 618 line-height: 38px !important; 619 margin-bottom: 20px !important; 620 } 621 h2 { 622 font-size: 26px !important; 623 line-height: 34px !important; 624 margin-bottom: 15px !important; 625 } 626 h3 { 627 font-size: 22px !important; 628 line-height: 28px !important; 629 margin-bottom: 7px !important; 630 } 631 h4 { 632 font-size: 16px !important; 633 line-height: 22px !important; 634 margin-bottom: 7px !important; 635 } 636 } 637 } 638 639 /* 640 * Dark theme 641 */ 642 .trumbowyg-dark { 643 .trumbowyg-textarea { 644 background: #111; 645 color: #ddd; 646 } 647 .trumbowyg-box { 648 border: 1px solid lighten($dark-color, 7%); 649 650 &.trumbowyg-fullscreen { 651 background: #111; 652 } 653 &.trumbowyg-box-blur .trumbowyg-editor { 654 *, 655 &::before { 656 text-shadow: 0 0 7px #ccc; 657 658 @media screen and (min-width: 0 \0 659 ) { 660 color: rgba(20, 20, 20, 0.6) !important; 661 } 662 @supports (-ms-accelerator:true) { 663 color: rgba(20, 20, 20, 0.6) !important; 664 } 665 } 666 } 667 668 svg { 669 fill: $light-color; 670 color: $light-color; 671 } 672 } 673 .trumbowyg-button-pane { 674 background-color: $dark-color; 675 border-bottom-color: lighten($dark-color, 7%); 676 677 &::after { 678 background: lighten($dark-color, 7%); 679 } 680 681 .trumbowyg-button-group:not(:empty) { 682 &::after { 683 background-color: lighten($dark-color, 7%); 684 } 685 .trumbowyg-fullscreen-button svg { 686 color: transparent; 687 } 688 } 689 690 &.trumbowyg-disable { 691 .trumbowyg-button-group::after { 692 background-color: lighten($dark-color, 3%); 693 } 694 } 695 696 button:not(.trumbowyg-disable):hover, 697 button:not(.trumbowyg-disable):focus, 698 button.trumbowyg-active { 699 background-color: #333; 700 } 701 702 .trumbowyg-open-dropdown::after { 703 border-top-color: #fff; 704 } 705 } 706 .trumbowyg-fullscreen { 707 .trumbowyg-button-group .trumbowyg-fullscreen-button svg { 708 color: $light-color; 709 fill: transparent; 710 } 711 } 712 713 .trumbowyg-dropdown { 714 border-color: $dark-color; 715 background: #333; 716 box-shadow: rgba(0, 0, 0, .3) 0 2px 3px; 717 718 button { 719 background: #333; 720 color: #fff !important; 721 722 &:hover, 723 &:focus { 724 background: $dark-color; 725 } 726 } 727 } 728 729 // Modal box 730 .trumbowyg-modal-box { 731 background-color: $dark-color; 732 733 .trumbowyg-modal-title { 734 border-bottom: 1px solid #555; 735 color: #fff; 736 background: lighten($dark-color, 10%); 737 } 738 739 label { 740 display: block; 741 position: relative; 742 margin: 15px 12px; 743 height: 27px; 744 line-height: 27px; 745 overflow: hidden; 746 747 .trumbowyg-input-infos { 748 span { 749 color: #eee; 750 background-color: lighten($dark-color, 5%); 751 border-color: $dark-color; 752 } 753 span.trumbowyg-msg-error { 754 color: #e74c3c; 755 } 756 } 757 758 &.trumbowyg-input-error { 759 input, 760 textarea { 761 border-color: #e74c3c; 762 } 763 } 764 765 input { 766 border-color: $dark-color; 767 color: #eee; 768 background: #333; 769 770 &:hover, 771 &:focus { 772 border-color: lighten($dark-color, 25%); 773 } 774 &:focus { 775 background-color: lighten($dark-color, 5%); 776 } 777 } 778 } 779 780 .trumbowyg-modal-button { 781 &.trumbowyg-modal-submit { 782 background: darken($modal-submit-color, 20%); 783 784 &:hover, 785 &:focus { 786 background: darken($modal-submit-color, 10%); 787 } 788 &:active { 789 background: darken($modal-submit-color, 25%); 790 } 791 } 792 &.trumbowyg-modal-reset { 793 background: #333; 794 color: #ccc; 795 796 &:hover, 797 &:focus { 798 background: #444; 799 } 800 &:active { 801 background: #111; 802 } 803 } 804 } 805 } 806 .trumbowyg-overlay { 807 background-color: rgba(15, 15, 15, 0.6); 808 } 809 }