View Full Version : SASS generated style sheet ruins file upload styling?

18 Oct 2011, 6:07 AM
Hi there!

I am getting started with SASS/Compass generated themes for ExtJS 4. I am putting variable into my .scss and seeing the changes and tweaking as I go forward. However, somewhere along the way, my file upload field's button deformed. I can see the "real" control that is normally hidden under the button. The outer container looks like my button styling, but within that from left to right it lists the Browse..., followed by a short native file control (textbox and brose button styled like the browser does).

The thing that's confusing is that I haven't really changed much but colors yet.


$base-color: #313840;

$panel-header-color: #f0f0f0;
$panel-body-background-color: #f0f0f0;

$button-toolbar-background-gradient: 'glossy-button-over';
$button-toolbar-background-color: #e0e0e0;
$button-toolbar-background-color-over: adjust-color(#FFD700, $hue: -5deg, $saturation: 44.444%, $lightness: 8.824%) !default;
$button-toolbar-background-color-focus: $button-toolbar-background-color-over;
$button-toolbar-background-color-pressed: adjust-color($base-color, $hue: -1.138deg, $saturation: -11.47%, $lightness: -2.353%) !default;
$button-toolbar-color: #000000 !default;
$button-toolbar-color-over: $button-toolbar-color !default;
$button-toolbar-color-focus: $button-toolbar-color-over;
$button-toolbar-color-pressed: #FFFFFF !default;

$button-default-background-gradient: 'glossy-button-over';
$button-default-background-color: #e0e0e0;
$button-default-background-color-over: adjust-color(#FFD700, $hue: -5deg, $saturation: 44.444%, $lightness: 8.824%) !default;
$button-default-background-color-focus: $button-toolbar-background-color-over;
$button-default-background-color-pressed: adjust-color($base-color, $hue: -1.138deg, $saturation: -11.47%, $lightness: -2.353%) !default;
$button-default-color: #000000 !default;
$button-default-color-over: $button-toolbar-color !default;
$button-default-color-focus: $button-toolbar-color-over;
$button-default-color-pressed: #FFFFFF !default;
$button-default-border-color: #000000;
$button-default-border-color-over: #000000;
$button-default-border-color-focus: $button-default-border-color-over !default;
$button-default-border-color-pressed: #FFFFFF;
$button-default-border-color-disabled: #000000;

Any ideas? My next step is to start slowly commenting out until I get back to base, unless someone recognizes this and can point me more directly at the problem.

18 Oct 2011, 6:12 AM
Update: I commented out ALL the above, generated a style sheet from SASS/Compass and the problem persists. So I am effectively generating the same style sheet I downloaded from Ext. So the generated theme, using all defaults, is producing something different from the ext-all.css with respect to the file upload control.

So...yeah. Help?

18 Oct 2011, 6:19 AM

18 Oct 2011, 6:55 AM
Figured it out. So I made the mistake of REPLACING ext-all.css with my custom theme. Turns out, BOTH should be included so that the custom theme can override ext-all where appropriate, but many other things are not changed. The new theme is an override, not a replacement for ext-all.css.