PDA

View Full Version : Theming in SASS



rh_it
13 Feb 2013, 8:06 AM
Hello everyone, I'm trying to theming extjs with SASS, everything works fine but I don't know how could I customize panel tools icons referred in tools\tool-sprites.gif and panel\tool-sprites.gif, does anybody knows how should I add the customization and feature into my mytheme.scss theme file? Is something like $panel-icon or what?
Thanks a lot

rogerfulton
13 Feb 2013, 2:59 PM
I usually just look at the extjs css and scss.

In the extjs directory, under resources/themes/stylesheets/ext4/default/util/_tools.scss



.#{$prefix}tool {
height: $tool-size;


img {
overflow: hidden;


width: $tool-size;
height: $tool-size;


cursor: pointer;


background-color: transparent;
background-repeat: no-repeat;
background-image: theme-background-image($theme-name, 'tools/tool-sprites.gif');


margin: 0;
}
}


The background image seems to be the scss you need. It generates a style .x-tool in the output. You probably just need to replace this. Haven't verified thats the scss but it looks like the prime suspect.


The output in the ext-all-debug.css ->


/* line 2, ../themes/stylesheets/ext4/default/util/_tool.scss */
.x-tool {
height: 15px; }
/* line 5, ../themes/stylesheets/ext4/default/util/_tool.scss */
.x-tool img {
overflow: hidden;
width: 15px;
height: 15px;
cursor: pointer;
background-color: transparent;
background-repeat: no-repeat;
background-image: url('../../resources/themes/images/default/tools/tool-sprites.gif');
margin: 0; }