View Full Version : Having an issue trying to style with Sass(message box in particular)

2 Mar 2012, 9:35 AM
I've been told to change the default styling of message box to add a white body to the message box. After some hacking around I was able to accomplish this by adding $window-body-background-color: #ffffff !important; to the custom sass file.

However, as you can see below this isn't working quite right in IE 7/8. In chrome and firefox the buttons on this are spaced in the center of the blue area. I could easily do this in normal css but I'm having difficulty trying to do it "the right way" using sass.

I've tried to use most of the variables for window and toolbar(apparently the buttons are in a toolbar-footer). When I inspect it in IE's dev tools it looks like what is happening is IE sets up 3 divs above the body div. These are drawing the two side borders and something to do with the a center one which I was unable to figure out. Regardless, that div structure seems to draw over the top of the margin the toolbar has or perhaps vice versa. That appears to be where the space is being lost.

In toolbar's variable list there are some for margin which I've tried increasing but they don't appear to do anything and when I compile the scss it's telling me the files are identical which makes no sense since I changed a variable.

I suppose I could add an id to the message box and style it with normal css but that seems like more of a workaround than a true fix and I'd rather not have to add that to every message box I use on my site.

Any ideas what I'm doing wrong here?

js for the box I'm using.

title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION


2 Mar 2012, 11:23 AM
There is nothing wrong with specifying CSS within a .scss file.

2 Mar 2012, 11:59 AM
Can you expand upon that some? If you're saying what I think you are you're saying I can change a base scss file like


for example right? If that is what you're saying, in the past I have tried that but had issues where it didn't recognize what I had changed when I did a compile. Like I said, it's entirely possible I screwed something up. The getting started guide on here isn't bad but it doesn't really dive that deep into changing things like that.

Also, is there a better way to do this? It feels wrong to change that sort of file because updates to ext would over write it. I would almost imagine you would just add a new include to your my-ext-theme.scss and maybe that was where I went wrong by not doing that.

2 Mar 2012, 12:01 PM
You shouldn't change the base scss. You should have your own scss files and @import them in your app.scss file.

2 Mar 2012, 12:19 PM
Ok that makes sense. The only other question I have is would be this. Let's say I wanted to add something to the window styling. Would I exclude the base window scss and instead make a copy of it, make the changes, then include that instead? Logically that would make sense to me as the right way to alter something.

However, it looks like sass is using a namespace of some sort to call the mixin's, in this case extjs-window. I would assume it would look under a path set some where in one of the ruby config files. If so, is there a particular place I should be putting my altered file to include?

Edit: after posting I saw you said import not include. So, I would assume the answer to that question would be resources\themes\stylesheets\<my theme>\