View Full Version : CSS Mixins

9 Aug 2012, 5:36 AM

I'm trying out the mixins. Here's what I did

// Unless you want to include all components, you must set $include-default to false// IF you set this to true, you can also remove lines 10 to 38 of this file
$include-default: false;
@import 'ext4/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include extjs-boundlist;
@include extjs-button;
@include extjs-btn-group;
@include extjs-datepicker;
@include extjs-colorpicker;
@include extjs-menu;
@include extjs-grid;
@include extjs-form;
@include extjs-form-field;
@include extjs-form-fieldset;
@include extjs-form-file;
@include extjs-form-checkboxfield;
@include extjs-form-checkboxgroup;
@include extjs-form-triggerfield;
@include extjs-form-htmleditor;
@include extjs-panel;
@include extjs-qtip;
@include extjs-slider;
@include extjs-progress;
@include extjs-toolbar;
@include extjs-window;
@include extjs-messagebox;
@include extjs-tabbar;
@include extjs-tab;
@include extjs-tree;
@include extjs-drawcomponent;
@include extjs-viewport;

@include extjs-window-ui(
$ui-header-color : #8CF719,
$ui-header-font-size : 14px

$relative-image-path-for-uis: true; // defaults to "../images/" when true

My Window is:

Ext.define('com.ideas.widgets.Window', {
extend : 'Ext.window.Window',
requires : [
ui : 'clinic-window',
//.. other config
constructor : function(config)

I've setup my files according to the structure mentioned in the theming guide.
I don't get any errors while compiling the theme files using compass but my window looks like this:

What am I doing wrong? None of my css mixins work. I tried styling buttons too but they don't work either.

I'm using Ext JS 4.1.1, sass Brainy Betty and compass 0.12.2

11 Aug 2012, 12:05 AM