File modules/editor/trumbowyg/ui/sass/trumbowyg.scss

Last commit: Tue Aug 28 00:33:27 2018 +0200	Jan Dankert	Editoren für Markdown (SimpleMDE) und HTML (Trumbowyg) installiert.


     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 }



Download modules/editor/trumbowyg/ui/sass/trumbowyg.scss


History
Tue, 28 Aug 2018 00:33:27 +0200	Jan Dankert	Editoren für Markdown (SimpleMDE) und HTML (Trumbowyg) installiert.