Replies

• colin Posts: 15,240Questions: 1Answers: 2,599

  August 2018

  Hi @Karl53 ,

  If you want the source files you can go to the github repo,

  Cheers,

  Colin
• Karl53 Posts: 72Questions: 29Answers: 0

  August 2018

  Thanks @colin, but GitHub doesn't seem to have the .SCSS files either. And Editor is not on GitHub of course.
• colin Posts: 15,240Questions: 1Answers: 2,599

  August 2018 edited August 2018

  Hi,

  Sorry, here is the direct link.

  For Editor the SCSS files are in /css/scss in the download package.

  Allan (posting as Colin )
• Karl53 Posts: 72Questions: 29Answers: 0

  August 2018

  Thanks Allan. FYI, the v1.74 JS+CSS build here has the SCSS subfolder.

  The Editor build created with the download builder does not have the SCSS folder. Just DataTables and Editor selected for download. No compression or concatenation selected. And no styling framework selected either.
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  August 2018

  You are correct - the download builder really just focuses on getting constructed files for you do to a quick include rather than the original source.

  Allan
• Karl53 Posts: 72Questions: 29Answers: 0

  September 2018

  The root SCSS file seems to be missing in the Editor's SCSS source. I'm trying to build editor.dataTables.css. I created my own build script, but I have two issues:

  1. A lot of the initial css code is missing when compared to the Editor distribution css file. Distribution starts with

  div.DTE {
    position: relative;
  }
  

  and I don't see this rule in the SCSS source

  1. I also get this build error in lightbox.scss

  Compilation Error
  Error: Invalid CSS after "      *top: 50%;": expected "}", was "#position: absolute"
          on line 14 of sass/c:\wwwroot\fin-calcs4\scss\Editor\lightbox.scss
  

  This is my build order:

  @import "mixins";
  @import "fields";
  @import "main";
  @import "bubble";
  @import "inline";
  @import "lightbox";
  @import "envelope";
  @import "datatable";
  @import "upload";
  @import "datetime";
  @import "processing";

  Any assistance would be appreciated. I want to build a single CSS file and then eliminate the features I'm not using.

  (The integration of DataTables' scss worked great.)
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  September 2018

  It looks like the main entry point SCSS files haven't been included in the download for some reason. Assuming you are using the DataTables styling, this is the file you are missing (editor.dataTables.scss):

  @import 'mixins.scss';
  
  div.DTE {
      position: relative;
  
      div.DTE_Header {
          position: absolute;
          top: 0;
          left: 0;
          height: 52px;
          width: 100%;
          background-color: #e8e9eb;
          border-bottom: 1px solid rgba(0,0,0, 0.15);
          padding: 16px 10px 2px 16px;
          font-size: 1.3em;
          @include box-sizing(border-box);
      }
      
      div.DTE_Body {
          position: relative;
      }
  
      div.DTE_Footer {
          position: absolute;
          bottom: 0;
          left: 0;
          height: 52px;
          width: 100%;
          background-color: #e8e9eb;
          border-top: 1px solid rgba(0,0,0, 0.15);
          padding: 10px;
          @include box-sizing(border-box);
      }
  
      div.DTE_Form_Info {
          margin-bottom: 0.5em;
          display: none;
      }
  
      div.DTE_Form_Content {
          position: relative;
          padding: 10px;
      }
  
      div.DTE_Form_Error {
          float: left;
          padding: 5px;
          display: none;
          color: #b11f1f;
      }
  
      button.btn,
      div.DTE_Form_Buttons button {
          position: relative;
          text-align: center;
          display: block;
          margin-top: 0;
          padding: 0.5em 1em;
          cursor: pointer;
          float: right;
          margin-left: 0.75em;
          color: inherit;
  
          font-size: 14px;
          border: 1px solid #999;
  
          @include border-radius( 2px );
          @include box-shadow( 1px, 1px, 3px, #ccc );
          @include two-stop-gradient( #ffffff, #dcdcdc );
  
          &:hover {
              border: 1px solid #666;
              @include box-shadow( 1px, 1px, 3px, #999 );
              @include two-stop-gradient( #eaeaea, #cccccc );
          }
  
          &:active {
              @include box-shadow( 1px, 1px, 3px, #999, true );
          }
  
          &:focus {
              border: 1px solid #426c9e;
              text-shadow: 0 1px 0 #c4def1;
              @include two-stop-gradient(#bddef4, #79ace9);
              outline: none;
  
              &:after {
                  // Can't animate the background gradient, so we use a white block
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background: white;
                  display: block;
                  content: " ";
  
                  @include animation( 1s, buttonPulse );
              }
          }
      }
  
      &.DTE_Action_Create {}
  
      &.DTE_Action_Edit {}
  
      &.DTE_Action_Remove div.DTE_Body_Content {
          text-align: center;
          padding: 20px 0;
      }
  }
  
  @include keyframe( buttonPulse ) {
      0% { opacity: 0; }
      100% { opacity: 0.2; }
  }
  
  // TableTools container position for the default Editor styles
  div.DTTT_container {
      float: left;
  }
  
  
  @import 'fields.scss';
  @import 'main.scss';
  @import 'bubble.scss';
  @import 'inline.scss';
  @import 'lightbox.scss';
  @import 'envelope.scss';
  @import 'datatable.scss';
  @import 'upload.scss';
  @import 'datetime.scss';
  @import 'processing.scss';
  

  Allan
• Karl53 Posts: 72Questions: 29Answers: 0

  September 2018

  Thank you. That worked perfectly.