Ext JS Splitter Color (SASS, 4.2.2)

Question

Having tried just about everything Im at a loss how to change the color of splitter bars using SASS for Ext JS 4.2.2 - they always appear as a white bar.

Say I have a hbox or vbox layout with two flex items and a splitter, the bar created by the splitter to allow the components to be resized proportionately to one another is always white- is there anyway this can be changed through a SASS config?

Many thanks!

Does Ext have any sass variable to style splitter backgrounds? — SW4, Oct 02 '13 at 21:12

score 2 · Accepted Answer · edited Jul 10 '15 at 15:53

2

/resources/themes/stylesheets/ext4/default/util/_splitter.scss indicates that it doesn't use a variable

@mixin extjs-splitter {
    .#{$prefix}splitter {
        .#{$prefix}collapse-el {
            position: absolute;

            cursor: pointer;

            background-color: transparent;
            background-repeat: no-repeat !important;
        }
    }
}

You'll have to override it in CSS, or create your own theme.

CSS

.x-splitter-vertical {
    background-color: #abc;
}

edited Jul 10 '15 at 15:53

Mr. Polywhirl

42,981
12
84
132

answered Oct 03 '13 at 01:20

Ruan Mendes

90,375
31
153
217

Thanks for the answer - I added the above but no luck I'm afraid. Incidentally its a vertical split so cursor:pointer suggests this isnt the right css to change (it should be ew-resize) – SW4 Oct 03 '13 at 08:01
1

Adding div .x-splitter-vertical{background:#HEX;} seems to do the trick – SW4 Oct 03 '13 at 08:06
Of course you can do that in CSS as I mentioned, but you asked about SASS variables, not CSS. – Ruan Mendes Oct 05 '13 at 19:17
Now you've added the CSS code from my comment above, I'll accept the answer to help future viewers – SW4 Oct 08 '13 at 21:39

Ext JS Splitter Color (SASS, 4.2.2)

1 Answers1