CSS precompiler files?

Karl53

I downloaded updates this weekend using the download builder. I'm looking for less/sass files but I don't see any. Did I miss an option? Ditto for DataTables.

colin

Hi @Karl53 ,

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

Cheers,

Colin

Karl53

Thanks @colin, but GitHub doesn't seem to have the .SCSS files either. And Editor is not on GitHub of course.

colin

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

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

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

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

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

Thank you. That worked perfectly.