web: update to extjs 4.0.2a
This commit is contained in:
Damien Churchill
parent
713953ec03
commit
07b6db0c98
|
|
@ -407,7 +407,7 @@ If you are unsure which license is appropriate for your use, please contact the
|
|||
(function() {
|
||||
|
||||
|
||||
var version = '4.0.2', Version;
|
||||
var version = '4.0.2a', Version;
|
||||
Ext.Version = Version = Ext.extend(Object, {
|
||||
|
||||
|
||||
|
|
@ -5085,7 +5085,7 @@ window.undefined = window.undefined;
|
|||
document.execCommand("BackgroundImageCache", false, true);
|
||||
} catch(e) {}
|
||||
|
||||
Ext.setVersion('extjs', '4.0.2');
|
||||
Ext.setVersion('extjs', '4.0.2a');
|
||||
Ext.apply(Ext, {
|
||||
|
||||
SSL_SECURE_URL : Ext.isSecure && isIE ? 'javascript:""' : 'about:blank',
|
||||
|
|
@ -15609,10 +15609,15 @@ Ext.define('Ext.layout.Layout', {
|
|||
},
|
||||
|
||||
beforeLayout : function() {
|
||||
this.renderItems(this.getLayoutItems(), this.getRenderTarget());
|
||||
this.renderChildren();
|
||||
return true;
|
||||
},
|
||||
|
||||
renderChildren: function () {
|
||||
var me = this;
|
||||
me.renderItems(me.getLayoutItems(), me.getRenderTarget());
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Iterates over all passed items, ensuring they are rendered. If the items are already rendered,
|
||||
|
|
@ -18500,6 +18505,9 @@ Ext.define('Ext.AbstractComponent', {
|
|||
|
||||
rendered: false,
|
||||
|
||||
|
||||
componentLayoutCounter: 0,
|
||||
|
||||
weight: 0,
|
||||
|
||||
trimRe: /^\s+|\s+$/g,
|
||||
|
|
@ -18636,7 +18644,10 @@ Ext.define('Ext.AbstractComponent', {
|
|||
|
||||
if (layout && me.flex) {
|
||||
state.flex = me.flex;
|
||||
if (layout.perpendicularPrefix) {
|
||||
state[layout.perpendicularPrefix] = me['get' + layout.perpendicularPrefixCap]();
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
else if (layout && me.anchor) {
|
||||
|
|
@ -18908,6 +18919,12 @@ Ext.define('Ext.AbstractComponent', {
|
|||
|
||||
if (!me.ownerCt || (me.height || me.width)) {
|
||||
me.setSize(me.width, me.height);
|
||||
} else {
|
||||
|
||||
|
||||
|
||||
|
||||
me.renderChildren();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -18933,6 +18950,15 @@ Ext.define('Ext.AbstractComponent', {
|
|||
}
|
||||
},
|
||||
|
||||
renderChildren: function () {
|
||||
var me = this,
|
||||
layout = me.getComponentLayout();
|
||||
|
||||
me.suspendLayout = true;
|
||||
layout.renderChildren();
|
||||
delete me.suspendLayout;
|
||||
},
|
||||
|
||||
frameCls: Ext.baseCSSPrefix + 'frame',
|
||||
|
||||
frameElementCls: {
|
||||
|
|
@ -20287,6 +20313,7 @@ Ext.define('Ext.AbstractComponent', {
|
|||
|
||||
|
||||
afterComponentLayout: function(width, height, isSetSize, callingContainer) {
|
||||
++this.componentLayoutCounter;
|
||||
this.fireEvent('resize', this, width, height);
|
||||
},
|
||||
|
||||
|
|
@ -27860,10 +27887,10 @@ Ext.define('Ext.layout.container.Container', {
|
|||
|
||||
|
||||
layoutItem: function(item, box) {
|
||||
box = box || {};
|
||||
if (item.componentLayout.initialized !== true) {
|
||||
this.setItemSize(item, box.width || item.width || undefined, box.height || item.height || undefined);
|
||||
|
||||
if (box) {
|
||||
item.doComponentLayout(box.width, box.height);
|
||||
} else {
|
||||
item.doComponentLayout();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -27976,16 +28003,12 @@ Ext.define('Ext.layout.container.Auto', {
|
|||
},
|
||||
|
||||
configureItem: function(item) {
|
||||
this.callParent(arguments);
|
||||
|
||||
|
||||
|
||||
if (this.type === 'autocontainer') {
|
||||
item.layoutManagedHeight = 2;
|
||||
item.layoutManagedWidth = 2;
|
||||
}
|
||||
|
||||
this.callParent(arguments);
|
||||
}
|
||||
});
|
||||
|
||||
Ext.define('Ext.container.AbstractContainer', {
|
||||
|
|
@ -28018,6 +28041,9 @@ Ext.define('Ext.container.AbstractContainer', {
|
|||
|
||||
isContainer : true,
|
||||
|
||||
|
||||
layoutCounter : 0,
|
||||
|
||||
baseCls: Ext.baseCSSPrefix + 'container',
|
||||
|
||||
|
||||
|
|
@ -28072,6 +28098,20 @@ Ext.define('Ext.container.AbstractContainer', {
|
|||
this.callParent();
|
||||
},
|
||||
|
||||
renderChildren: function () {
|
||||
var me = this,
|
||||
layout = me.getLayout();
|
||||
|
||||
me.callParent();
|
||||
|
||||
|
||||
if (layout) {
|
||||
me.suspendLayout = true;
|
||||
layout.renderChildren();
|
||||
delete me.suspendLayout;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
setLayout : function(layout) {
|
||||
var currentLayout = this.layout;
|
||||
|
|
@ -28124,6 +28164,7 @@ Ext.define('Ext.container.AbstractContainer', {
|
|||
|
||||
|
||||
afterLayout : function(layout) {
|
||||
++this.layoutCounter;
|
||||
this.fireEvent('afterlayout', this, layout);
|
||||
},
|
||||
|
||||
|
|
@ -31183,7 +31224,12 @@ Ext.define('Ext.layout.container.Box', {
|
|||
for (i = 0; i < visibleCount; i++) {
|
||||
child = visibleItems[i];
|
||||
childPerpendicular = child[perpendicularPrefix];
|
||||
if (!child.flex || !(me.align == 'stretch' || me.align == 'stretchmax')) {
|
||||
if (child.componentLayout.initialized !== true) {
|
||||
me.layoutItem(child);
|
||||
}
|
||||
}
|
||||
|
||||
childMargins = child.margins;
|
||||
parallelMargins = childMargins[me.parallelBefore] + childMargins[me.parallelAfter];
|
||||
|
||||
|
|
@ -37550,10 +37596,14 @@ Ext.define('Ext.panel.Panel', {
|
|||
me.callParent(arguments);
|
||||
},
|
||||
|
||||
afterRender: function() {
|
||||
afterComponentLayout: function() {
|
||||
var me = this;
|
||||
me.callParent(arguments);
|
||||
if (me.collapsed) {
|
||||
|
||||
|
||||
|
||||
|
||||
if (me.collapsed && me.componentLayoutCounter == 1) {
|
||||
me.collapsed = false;
|
||||
me.collapse(null, false, true);
|
||||
}
|
||||
|
|
@ -57336,7 +57386,7 @@ Ext.define('Ext.layout.container.AbstractCard', {
|
|||
|
||||
beforeLayout: function() {
|
||||
var me = this;
|
||||
me.activeItem = me.getActiveItem();
|
||||
me.getActiveItem();
|
||||
if (me.activeItem && me.deferredRender) {
|
||||
me.renderItems([me.activeItem], me.getRenderTarget());
|
||||
return true;
|
||||
|
|
@ -57346,6 +57396,11 @@ Ext.define('Ext.layout.container.AbstractCard', {
|
|||
}
|
||||
},
|
||||
|
||||
renderChildren: function () {
|
||||
this.getActiveItem();
|
||||
this.callParent();
|
||||
},
|
||||
|
||||
onLayout: function() {
|
||||
var me = this,
|
||||
activeItem = me.activeItem,
|
||||
|
|
@ -74020,6 +74075,7 @@ Ext.define('Ext.grid.Lockable', {
|
|||
var me = this,
|
||||
width = me.lockedGrid.headerCt.getFullWidth(true);
|
||||
me.lockedGrid.setWidth(width);
|
||||
me.doComponentLayout();
|
||||
},
|
||||
|
||||
onLockedHeaderResize: function() {
|
||||
|
|
@ -74655,15 +74711,6 @@ Ext.define('Ext.panel.Table', {
|
|||
view,
|
||||
border = me.border;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
me.injectView = Ext.Function.createThrottled(me.injectView, 30, me);
|
||||
|
||||
if (me.hideHeaders) {
|
||||
border = false;
|
||||
}
|
||||
|
|
@ -74782,7 +74829,21 @@ Ext.define('Ext.panel.Table', {
|
|||
|
||||
view = me.getView();
|
||||
|
||||
if (view) {
|
||||
view.on({
|
||||
afterrender: function () {
|
||||
|
||||
view.el.scroll = Ext.Function.bind(me.elScroll, me);
|
||||
|
||||
|
||||
me.mon(view.el, {
|
||||
mousewheel: me.onMouseWheel,
|
||||
scope: me
|
||||
});
|
||||
},
|
||||
single: true
|
||||
});
|
||||
this.items = [view];
|
||||
|
||||
me.mon(view.store, {
|
||||
load: me.onStoreLoad,
|
||||
scope: me
|
||||
|
|
@ -74853,7 +74914,7 @@ Ext.define('Ext.panel.Table', {
|
|||
'beforeselect'
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
me.callParent(arguments);
|
||||
},
|
||||
|
||||
|
|
@ -75061,48 +75122,6 @@ Ext.define('Ext.panel.Table', {
|
|||
},
|
||||
|
||||
|
||||
injectView: function() {
|
||||
if (!this.hasView && !this.collapsed) {
|
||||
var me = this,
|
||||
view = me.getView();
|
||||
|
||||
me.hasView = true;
|
||||
me.add(view);
|
||||
|
||||
function viewReady () {
|
||||
|
||||
view.el.scroll = Ext.Function.bind(me.elScroll, me);
|
||||
|
||||
|
||||
me.mon(view.el, {
|
||||
mousewheel: me.onMouseWheel,
|
||||
scope: me
|
||||
});
|
||||
if (!me.height) {
|
||||
me.doComponentLayout();
|
||||
}
|
||||
}
|
||||
|
||||
if (view.rendered) {
|
||||
viewReady();
|
||||
} else {
|
||||
view.on({
|
||||
afterrender: viewReady,
|
||||
single: true
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
afterExpand: function() {
|
||||
|
||||
this.callParent(arguments);
|
||||
if (!this.hasView) {
|
||||
this.injectView();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
|
||||
var me = this,
|
||||
header;
|
||||
|
|
@ -75206,9 +75225,6 @@ Ext.define('Ext.panel.Table', {
|
|||
me.callParent(arguments);
|
||||
|
||||
|
||||
me.injectView();
|
||||
|
||||
|
||||
if (!me.changingScrollBars) {
|
||||
me.determineScrollbars();
|
||||
}
|
||||
|
|
@ -75346,7 +75362,7 @@ Ext.define('Ext.panel.Table', {
|
|||
var me = this,
|
||||
vertScroller = me.getVerticalScroller(),
|
||||
horizScroller = me.getHorizontalScroller(),
|
||||
scrollDelta = me.scrollDelta / -5,
|
||||
scrollDelta = -me.scrollDelta,
|
||||
deltas = e.getWheelDeltas(),
|
||||
deltaX = scrollDelta * deltas.x,
|
||||
deltaY = scrollDelta * deltas.y,
|
||||
|
|
@ -82395,6 +82411,8 @@ Ext.define('Ext.layout.container.Border', {
|
|||
|
||||
|
||||
this.shadowLayout.beforeLayout();
|
||||
|
||||
|
||||
},
|
||||
|
||||
renderItems: function(items, target) {
|
||||
|
|
@ -82403,6 +82421,14 @@ Ext.define('Ext.layout.container.Border', {
|
|||
renderItem: function(item) {
|
||||
},
|
||||
|
||||
renderChildren: function() {
|
||||
if (!this.borderLayoutInitialized) {
|
||||
this.initializeBorderLayout();
|
||||
}
|
||||
|
||||
this.shadowLayout.renderChildren();
|
||||
},
|
||||
|
||||
|
||||
getVisibleItems: function() {
|
||||
return Ext.ComponentQuery.query(':not([slideOutAnim])', this.callParent(arguments));
|
||||
|
|
@ -83452,9 +83478,9 @@ Ext.define('Ext.layout.container.Column', {
|
|||
item = items[i];
|
||||
if (item.columnWidth) {
|
||||
columnWidth = Math.floor(item.columnWidth * availableWidth) - parallelMargins[i];
|
||||
if (item.getWidth() != columnWidth) {
|
||||
me.setItemSize(item, columnWidth, item.height);
|
||||
}
|
||||
} else {
|
||||
me.layoutItem(item);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -83479,13 +83505,11 @@ Ext.define('Ext.layout.container.Column', {
|
|||
},
|
||||
|
||||
configureItem: function(item) {
|
||||
this.callParent(arguments);
|
||||
|
||||
if (item.columnWidth) {
|
||||
item.layoutManagedWidth = 1;
|
||||
} else {
|
||||
item.layoutManagedWidth = 2;
|
||||
}
|
||||
item.layoutManagedHeight = 2;
|
||||
this.callParent(arguments);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -624,7 +624,7 @@ If you are unsure which license is appropriate for your use, please contact the
|
|||
(function() {
|
||||
|
||||
// Current core version
|
||||
var version = '4.0.2', Version;
|
||||
var version = '4.0.2a', Version;
|
||||
Ext.Version = Version = Ext.extend(Object, {
|
||||
|
||||
/**
|
||||
|
|
@ -8931,7 +8931,7 @@ window.undefined = window.undefined;
|
|||
document.execCommand("BackgroundImageCache", false, true);
|
||||
} catch(e) {}
|
||||
|
||||
Ext.setVersion('extjs', '4.0.2');
|
||||
Ext.setVersion('extjs', '4.0.2a');
|
||||
Ext.apply(Ext, {
|
||||
/**
|
||||
* URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
|
||||
|
|
@ -24009,10 +24009,15 @@ Ext.define('Ext.layout.Layout', {
|
|||
},
|
||||
|
||||
beforeLayout : function() {
|
||||
this.renderItems(this.getLayoutItems(), this.getRenderTarget());
|
||||
this.renderChildren();
|
||||
return true;
|
||||
},
|
||||
|
||||
renderChildren: function () {
|
||||
var me = this;
|
||||
me.renderItems(me.getLayoutItems(), me.getRenderTarget());
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Iterates over all passed items, ensuring they are rendered. If the items are already rendered,
|
||||
|
|
@ -27907,6 +27912,14 @@ and a property `descEl` referencing the `div` Element which contains the descrip
|
|||
*/
|
||||
rendered: false,
|
||||
|
||||
/**
|
||||
* The number of component layout calls made on this object.
|
||||
* @property componentLayoutCounter
|
||||
* @type {Number}
|
||||
* @private
|
||||
*/
|
||||
componentLayoutCounter: 0,
|
||||
|
||||
weight: 0,
|
||||
|
||||
trimRe: /^\s+|\s+$/g,
|
||||
|
|
@ -28161,7 +28174,13 @@ and a property `descEl` referencing the `div` Element which contains the descrip
|
|||
// If we have flex, only store the perpendicular dimension.
|
||||
if (layout && me.flex) {
|
||||
state.flex = me.flex;
|
||||
if (layout.perpendicularPrefix) {
|
||||
state[layout.perpendicularPrefix] = me['get' + layout.perpendicularPrefixCap]();
|
||||
} else {
|
||||
if (Ext.isDefined(Ext.global.console)) {
|
||||
Ext.global.console.warn('Ext.Component: Specified a flex value on a component not inside a Box layout');
|
||||
}
|
||||
}
|
||||
}
|
||||
// If we have anchor, only store dimensions which are *not* being anchored
|
||||
else if (layout && me.anchor) {
|
||||
|
|
@ -28443,6 +28462,12 @@ and a property `descEl` referencing the `div` Element which contains the descrip
|
|||
// Set the size if a size is configured, or if this is the outermost Container
|
||||
if (!me.ownerCt || (me.height || me.width)) {
|
||||
me.setSize(me.width, me.height);
|
||||
} else {
|
||||
// It is expected that child items be rendered before this method returns and
|
||||
// the afterrender event fires. Since we aren't going to do the layout now, we
|
||||
// must render the child items. This is handled implicitly above in the layout
|
||||
// caused by setSize.
|
||||
me.renderChildren();
|
||||
}
|
||||
|
||||
// For floaters, calculate x and y if they aren't defined by aligning
|
||||
|
|
@ -28468,6 +28493,15 @@ and a property `descEl` referencing the `div` Element which contains the descrip
|
|||
}
|
||||
},
|
||||
|
||||
renderChildren: function () {
|
||||
var me = this,
|
||||
layout = me.getComponentLayout();
|
||||
|
||||
me.suspendLayout = true;
|
||||
layout.renderChildren();
|
||||
delete me.suspendLayout;
|
||||
},
|
||||
|
||||
frameCls: Ext.baseCSSPrefix + 'frame',
|
||||
|
||||
frameElementCls: {
|
||||
|
|
@ -30077,6 +30111,7 @@ alert(t.getXTypes()); // alerts 'component/field/textfield'
|
|||
* @param {Ext.Component} callingContainer Container requesting the layout. Only used when isSetSize is false.
|
||||
*/
|
||||
afterComponentLayout: function(width, height, isSetSize, callingContainer) {
|
||||
++this.componentLayoutCounter;
|
||||
this.fireEvent('resize', this, width, height);
|
||||
},
|
||||
|
||||
|
|
@ -41937,10 +41972,10 @@ Ext.define('Ext.layout.container.Container', {
|
|||
/* End Definitions */
|
||||
|
||||
layoutItem: function(item, box) {
|
||||
box = box || {};
|
||||
if (item.componentLayout.initialized !== true) {
|
||||
this.setItemSize(item, box.width || item.width || undefined, box.height || item.height || undefined);
|
||||
// item.doComponentLayout(box.width || item.width || undefined, box.height || item.height || undefined);
|
||||
if (box) {
|
||||
item.doComponentLayout(box.width, box.height);
|
||||
} else {
|
||||
item.doComponentLayout();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -42089,16 +42124,12 @@ Ext.define('Ext.layout.container.Auto', {
|
|||
},
|
||||
|
||||
configureItem: function(item) {
|
||||
this.callParent(arguments);
|
||||
|
||||
// Auto layout does not manage any dimensions.
|
||||
// We have to check our type, because this could be called as a superclass method in a subclass
|
||||
if (this.type === 'autocontainer') {
|
||||
item.layoutManagedHeight = 2;
|
||||
item.layoutManagedWidth = 2;
|
||||
}
|
||||
|
||||
this.callParent(arguments);
|
||||
}
|
||||
});
|
||||
/**
|
||||
* @class Ext.container.AbstractContainer
|
||||
|
|
@ -42276,6 +42307,14 @@ items: [
|
|||
|
||||
isContainer : true,
|
||||
|
||||
/**
|
||||
* The number of container layout calls made on this object.
|
||||
* @property layoutCounter
|
||||
* @type {Number}
|
||||
* @private
|
||||
*/
|
||||
layoutCounter : 0,
|
||||
|
||||
baseCls: Ext.baseCSSPrefix + 'container',
|
||||
|
||||
/**
|
||||
|
|
@ -42394,6 +42433,20 @@ items: [
|
|||
this.callParent();
|
||||
},
|
||||
|
||||
renderChildren: function () {
|
||||
var me = this,
|
||||
layout = me.getLayout();
|
||||
|
||||
me.callParent();
|
||||
// this component's elements exist, so now create the child components' elements
|
||||
|
||||
if (layout) {
|
||||
me.suspendLayout = true;
|
||||
layout.renderChildren();
|
||||
delete me.suspendLayout;
|
||||
}
|
||||
},
|
||||
|
||||
// @private
|
||||
setLayout : function(layout) {
|
||||
var currentLayout = this.layout;
|
||||
|
|
@ -42454,6 +42507,7 @@ items: [
|
|||
|
||||
// @private
|
||||
afterLayout : function(layout) {
|
||||
++this.layoutCounter;
|
||||
this.fireEvent('afterlayout', this, layout);
|
||||
},
|
||||
|
||||
|
|
@ -47055,7 +47109,12 @@ Ext.define('Ext.layout.container.Box', {
|
|||
for (i = 0; i < visibleCount; i++) {
|
||||
child = visibleItems[i];
|
||||
childPerpendicular = child[perpendicularPrefix];
|
||||
if (!child.flex || !(me.align == 'stretch' || me.align == 'stretchmax')) {
|
||||
if (child.componentLayout.initialized !== true) {
|
||||
me.layoutItem(child);
|
||||
}
|
||||
}
|
||||
|
||||
childMargins = child.margins;
|
||||
parallelMargins = childMargins[me.parallelBefore] + childMargins[me.parallelAfter];
|
||||
|
||||
|
|
@ -55764,10 +55823,14 @@ each of the buttons in the fbar.
|
|||
me.callParent(arguments);
|
||||
},
|
||||
|
||||
afterRender: function() {
|
||||
afterComponentLayout: function() {
|
||||
var me = this;
|
||||
me.callParent(arguments);
|
||||
if (me.collapsed) {
|
||||
|
||||
// Instate the collapsed state on our first component layout. We need to wait for
|
||||
// this moment so that we have established at least some of our size (from our
|
||||
// ownerCt).
|
||||
if (me.collapsed && me.componentLayoutCounter == 1) {
|
||||
me.collapsed = false;
|
||||
me.collapse(null, false, true);
|
||||
}
|
||||
|
|
@ -82572,7 +82635,7 @@ Ext.define('Ext.layout.container.AbstractCard', {
|
|||
|
||||
beforeLayout: function() {
|
||||
var me = this;
|
||||
me.activeItem = me.getActiveItem();
|
||||
me.getActiveItem();
|
||||
if (me.activeItem && me.deferredRender) {
|
||||
me.renderItems([me.activeItem], me.getRenderTarget());
|
||||
return true;
|
||||
|
|
@ -82582,6 +82645,11 @@ Ext.define('Ext.layout.container.AbstractCard', {
|
|||
}
|
||||
},
|
||||
|
||||
renderChildren: function () {
|
||||
this.getActiveItem();
|
||||
this.callParent();
|
||||
},
|
||||
|
||||
onLayout: function() {
|
||||
var me = this,
|
||||
activeItem = me.activeItem,
|
||||
|
|
@ -107951,6 +108019,7 @@ Ext.define('Ext.grid.Lockable', {
|
|||
var me = this,
|
||||
width = me.lockedGrid.headerCt.getFullWidth(true);
|
||||
me.lockedGrid.setWidth(width);
|
||||
me.doComponentLayout();
|
||||
},
|
||||
|
||||
onLockedHeaderResize: function() {
|
||||
|
|
@ -108693,15 +108762,6 @@ Ext.define('Ext.panel.Table', {
|
|||
view,
|
||||
border = me.border;
|
||||
|
||||
// We cannot buffer this because that will wait for the 30msec from afterLayout (or what
|
||||
// ever event triggers it) and we may be in the middle of an animation; that is a bad
|
||||
// time to injectView because it causes a layout (by calling add on the container). A
|
||||
// throttled func will be called immediately on first call and then block subsequent
|
||||
// (rapid fire) calls for 30msec before allowing another call to go through. Similar
|
||||
// results, but the action moves from the trailing edge of the interval to the leading
|
||||
// edge.
|
||||
me.injectView = Ext.Function.createThrottled(me.injectView, 30, me);
|
||||
|
||||
if (me.hideHeaders) {
|
||||
border = false;
|
||||
}
|
||||
|
|
@ -108834,7 +108894,21 @@ Ext.define('Ext.panel.Table', {
|
|||
// getView converts viewConfig into a View instance
|
||||
view = me.getView();
|
||||
|
||||
if (view) {
|
||||
view.on({
|
||||
afterrender: function () {
|
||||
// hijack the view el's scroll method
|
||||
view.el.scroll = Ext.Function.bind(me.elScroll, me);
|
||||
// We use to listen to document.body wheel events, but that's a
|
||||
// little much. We scope just to the view now.
|
||||
me.mon(view.el, {
|
||||
mousewheel: me.onMouseWheel,
|
||||
scope: me
|
||||
});
|
||||
},
|
||||
single: true
|
||||
});
|
||||
this.items = [view];
|
||||
|
||||
me.mon(view.store, {
|
||||
load: me.onStoreLoad,
|
||||
scope: me
|
||||
|
|
@ -109093,7 +109167,7 @@ Ext.define('Ext.panel.Table', {
|
|||
'beforeselect'
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
me.callParent(arguments);
|
||||
},
|
||||
|
||||
|
|
@ -109314,52 +109388,6 @@ Ext.define('Ext.panel.Table', {
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Called after this Component has achieved its correct initial size, after all layouts have done their thing.
|
||||
* This is so we can add the View only after the initial size is known. This method is throttled 30ms.
|
||||
*/
|
||||
injectView: function() {
|
||||
if (!this.hasView && !this.collapsed) {
|
||||
var me = this,
|
||||
view = me.getView();
|
||||
|
||||
me.hasView = true;
|
||||
me.add(view);
|
||||
|
||||
function viewReady () {
|
||||
// hijack the view el's scroll method
|
||||
view.el.scroll = Ext.Function.bind(me.elScroll, me);
|
||||
// We use to listen to document.body wheel events, but that's a
|
||||
// little much. We scope just to the view now.
|
||||
me.mon(view.el, {
|
||||
mousewheel: me.onMouseWheel,
|
||||
scope: me
|
||||
});
|
||||
if (!me.height) {
|
||||
me.doComponentLayout();
|
||||
}
|
||||
}
|
||||
|
||||
if (view.rendered) {
|
||||
viewReady();
|
||||
} else {
|
||||
view.on({
|
||||
afterrender: viewReady,
|
||||
single: true
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
afterExpand: function() {
|
||||
// TODO - this is *not* called when part of an accordion!
|
||||
this.callParent(arguments);
|
||||
if (!this.hasView) {
|
||||
this.injectView();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Process UI events from the view. Propagate them to whatever internal Components need to process them
|
||||
|
|
@ -109474,9 +109502,6 @@ Ext.define('Ext.panel.Table', {
|
|||
var me = this;
|
||||
me.callParent(arguments);
|
||||
|
||||
// Insert the View the first time the Panel has a Component layout performed.
|
||||
me.injectView();
|
||||
|
||||
// Avoid recursion
|
||||
if (!me.changingScrollBars) {
|
||||
me.determineScrollbars();
|
||||
|
|
@ -109626,7 +109651,7 @@ Ext.define('Ext.panel.Table', {
|
|||
var me = this,
|
||||
vertScroller = me.getVerticalScroller(),
|
||||
horizScroller = me.getHorizontalScroller(),
|
||||
scrollDelta = me.scrollDelta / -5,
|
||||
scrollDelta = -me.scrollDelta,
|
||||
deltas = e.getWheelDeltas(),
|
||||
deltaX = scrollDelta * deltas.x,
|
||||
deltaY = scrollDelta * deltas.y,
|
||||
|
|
@ -119315,6 +119340,8 @@ Ext.define('Ext.layout.container.Border', {
|
|||
|
||||
// Delegate this operation to the shadow "V" or "H" box layout.
|
||||
this.shadowLayout.beforeLayout();
|
||||
|
||||
// note: don't call base because that does a renderItems again
|
||||
},
|
||||
|
||||
renderItems: function(items, target) {
|
||||
|
|
@ -119325,6 +119352,14 @@ Ext.define('Ext.layout.container.Border', {
|
|||
Ext.Error.raise('This should not be called');
|
||||
},
|
||||
|
||||
renderChildren: function() {
|
||||
if (!this.borderLayoutInitialized) {
|
||||
this.initializeBorderLayout();
|
||||
}
|
||||
|
||||
this.shadowLayout.renderChildren();
|
||||
},
|
||||
|
||||
/*
|
||||
* Gathers items for a layout operation. Injected into child Box layouts through configuration.
|
||||
* We must not include child items which are floated over the layout (are primed with a slide out animation)
|
||||
|
|
@ -120589,9 +120624,9 @@ Ext.define('Ext.layout.container.Column', {
|
|||
item = items[i];
|
||||
if (item.columnWidth) {
|
||||
columnWidth = Math.floor(item.columnWidth * availableWidth) - parallelMargins[i];
|
||||
if (item.getWidth() != columnWidth) {
|
||||
me.setItemSize(item, columnWidth, item.height);
|
||||
}
|
||||
} else {
|
||||
me.layoutItem(item);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -120616,13 +120651,11 @@ Ext.define('Ext.layout.container.Column', {
|
|||
},
|
||||
|
||||
configureItem: function(item) {
|
||||
this.callParent(arguments);
|
||||
|
||||
if (item.columnWidth) {
|
||||
item.layoutManagedWidth = 1;
|
||||
} else {
|
||||
item.layoutManagedWidth = 2;
|
||||
}
|
||||
item.layoutManagedHeight = 2;
|
||||
this.callParent(arguments);
|
||||
}
|
||||
});
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -612,7 +612,7 @@ If you are unsure which license is appropriate for your use, please contact the
|
|||
(function() {
|
||||
|
||||
// Current core version
|
||||
var version = '4.0.2', Version;
|
||||
var version = '4.0.2a', Version;
|
||||
Ext.Version = Version = Ext.extend(Object, {
|
||||
|
||||
/**
|
||||
|
|
@ -8616,7 +8616,7 @@ window.undefined = window.undefined;
|
|||
document.execCommand("BackgroundImageCache", false, true);
|
||||
} catch(e) {}
|
||||
|
||||
Ext.setVersion('extjs', '4.0.2');
|
||||
Ext.setVersion('extjs', '4.0.2a');
|
||||
Ext.apply(Ext, {
|
||||
/**
|
||||
* URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
|
||||
|
|
|
|||
|
|
@ -624,7 +624,7 @@ If you are unsure which license is appropriate for your use, please contact the
|
|||
(function() {
|
||||
|
||||
// Current core version
|
||||
var version = '4.0.2', Version;
|
||||
var version = '4.0.2a', Version;
|
||||
Ext.Version = Version = Ext.extend(Object, {
|
||||
|
||||
/**
|
||||
|
|
@ -8931,7 +8931,7 @@ window.undefined = window.undefined;
|
|||
document.execCommand("BackgroundImageCache", false, true);
|
||||
} catch(e) {}
|
||||
|
||||
Ext.setVersion('extjs', '4.0.2');
|
||||
Ext.setVersion('extjs', '4.0.2a');
|
||||
Ext.apply(Ext, {
|
||||
/**
|
||||
* URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,6 @@
|
|||
# include the utils rb file which has extra functionality for the ext theme
|
||||
dir = File.dirname(__FILE__)
|
||||
require File.join(dir, 'lib', 'utils.rb')
|
||||
|
||||
# register ext4 as a compass framework
|
||||
Compass::Frameworks.register 'ext4', dir
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
module ExtJS4
|
||||
module SassExtensions
|
||||
module Functions
|
||||
module Utils
|
||||
def parsebox(list, n)
|
||||
assert_type n, :Number
|
||||
if !n.int?
|
||||
raise ArgumentError.new("List index #{n} must be an integer")
|
||||
elsif n.to_i < 1
|
||||
raise ArgumentError.new("List index #{n} must be greater than or equal to 1")
|
||||
elsif n.to_i > 4
|
||||
raise ArgumentError.new("A box string can't contain more then 4")
|
||||
end
|
||||
|
||||
new_list = list.clone.to_a
|
||||
size = new_list.size
|
||||
|
||||
if n.to_i >= size
|
||||
if size == 1
|
||||
new_list[1] = new_list[0]
|
||||
new_list[2] = new_list[0]
|
||||
new_list[3] = new_list[0]
|
||||
elsif size == 2
|
||||
new_list[2] = new_list[0]
|
||||
new_list[3] = new_list[1]
|
||||
elsif size == 3
|
||||
new_list[3] = new_list[1]
|
||||
end
|
||||
end
|
||||
|
||||
new_list.to_a[n.to_i - 1]
|
||||
end
|
||||
|
||||
def parseint(value)
|
||||
Sass::Script::Number.new(value.to_i)
|
||||
end
|
||||
|
||||
# Returns a background-image property for a specified images for the theme
|
||||
def theme_image(theme, path, without_url = false, relative = false)
|
||||
path = path.value
|
||||
theme = theme.value
|
||||
without_url = (without_url.class == FalseClass) ? without_url : without_url.value
|
||||
|
||||
relative_path = "../images/"
|
||||
|
||||
if relative
|
||||
if relative.class == Sass::Script::String
|
||||
relative_path = relative.value
|
||||
relative = true
|
||||
elsif relative.class == FalseClass || relative.class == TrueClass
|
||||
relative = relative
|
||||
else
|
||||
relative = relative.value
|
||||
end
|
||||
else
|
||||
relative = false
|
||||
end
|
||||
|
||||
if relative
|
||||
image_path = File.join(relative_path, theme, path)
|
||||
else
|
||||
images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
|
||||
image_path = File.join(images_path, path)
|
||||
end
|
||||
|
||||
if !without_url
|
||||
url = "url('#{image_path}')"
|
||||
else
|
||||
url = "#{image_path}"
|
||||
end
|
||||
|
||||
Sass::Script::String.new(url)
|
||||
end
|
||||
|
||||
def theme_image_exists(path)
|
||||
result = false
|
||||
|
||||
where_to_look = path.value.gsub('../../resources', 'resources')
|
||||
|
||||
if where_to_look && FileTest.exists?("#{where_to_look}")
|
||||
result = true
|
||||
end
|
||||
|
||||
return Sass::Script::Bool.new(result)
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
module Sass::Script::Functions
|
||||
include ExtJS4::SassExtensions::Functions::Utils
|
||||
end
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
@import "compass/css3";
|
||||
@import "blueprint/typography";
|
||||
|
||||
$include-default: true !default;
|
||||
$include-default-uis: true !default;
|
||||
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
//core
|
||||
@import 'core';
|
||||
|
||||
//layout
|
||||
@import 'layout/layout';
|
||||
|
||||
//utils
|
||||
@import 'util/tool';
|
||||
@import 'util/messagebox';
|
||||
@import 'util/splitter';
|
||||
@import 'util/resizable';
|
||||
@import 'util/dragdrop';
|
||||
@import 'util/scroller';
|
||||
@import 'util/focus';
|
||||
|
||||
//widgets
|
||||
@import 'widgets';
|
||||
|
||||
@if $scope-reset-css {
|
||||
.#{$prefix}reset {
|
||||
@if $include-default {
|
||||
@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-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-dragdrop;
|
||||
@include extjs-resizable;
|
||||
@include extjs-splitter;
|
||||
@include extjs-layout;
|
||||
@include extjs-tool;
|
||||
@include extjs-scroller;
|
||||
|
||||
@include extjs-html;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@if $include-default {
|
||||
@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-dragdrop;
|
||||
@include extjs-resizable;
|
||||
@include extjs-splitter;
|
||||
@include extjs-layout;
|
||||
@include extjs-tool;
|
||||
@include extjs-scroller;
|
||||
|
||||
@include extjs-html;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import 'core/reset';
|
||||
@import 'core/core';
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
@function min($value1, $value2) {
|
||||
@if $value1 > $value2 {
|
||||
@return $value2;
|
||||
}
|
||||
@else if $value2 > $value1 {
|
||||
@return $value1;
|
||||
}
|
||||
@return $value1;
|
||||
}
|
||||
|
||||
@function max($value1, $value2) {
|
||||
@if $value1 > $value2 {
|
||||
@return $value1;
|
||||
}
|
||||
@else if $value2 > $value1 {
|
||||
@return $value2;
|
||||
}
|
||||
@return $value1;
|
||||
}
|
||||
|
||||
@function top($box) {
|
||||
@return parsebox($box, 1);
|
||||
}
|
||||
@function right($box) {
|
||||
@return parsebox($box, 2);
|
||||
}
|
||||
@function bottom($box) {
|
||||
@return parsebox($box, 3);
|
||||
}
|
||||
@function left($box) {
|
||||
@return parsebox($box, 4);
|
||||
}
|
||||
@function vertical($box) {
|
||||
@return top($box) + bottom($box);
|
||||
}
|
||||
@function horizontal($box) {
|
||||
@return left($box) + right($box);
|
||||
}
|
||||
@function boxmax($box) {
|
||||
@return max(max(top($box), right($box)), max(bottom($box), left($box)));
|
||||
}
|
||||
@function boxmin($box) {
|
||||
@return min(min(top($box), right($box)), min(bottom($box), left($box)));
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
@import 'mixins/background-gradient';
|
||||
@import 'mixins/theme-background-image';
|
||||
@import 'mixins/inner-border';
|
||||
@import 'mixins/frame';
|
||||
|
||||
@mixin no-select {
|
||||
-moz-user-select:none;
|
||||
-khtml-user-select:none;
|
||||
-webkit-user-select:ignore;
|
||||
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
@mixin important-no-border-radius {
|
||||
//we need to hard code this so we can declare !important
|
||||
-moz-border-radius: 0 !important;
|
||||
-webkit-border-radius: 0 !important;
|
||||
-o-border-radius: 0 !important;
|
||||
-ms-border-radius: 0 !important;
|
||||
-khtml-border-radius: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
@import 'variables/core';
|
||||
|
||||
$mix-color: desaturate(lighten($base-color, 37), 5) !default;
|
||||
|
||||
@import 'variables/focus';
|
||||
@import 'variables/panel';
|
||||
@import 'variables/grid';
|
||||
@import 'variables/button';
|
||||
@import 'variables/pickers';
|
||||
@import 'variables/toolbar';
|
||||
@import 'variables/form';
|
||||
@import 'variables/menu';
|
||||
@import 'variables/window';
|
||||
@import 'variables/tabs';
|
||||
@import 'variables/qtip';
|
||||
@import 'variables/progress-bar';
|
||||
@import 'variables/btn-group';
|
||||
@import 'variables/boundlist';
|
||||
@import 'variables/tree';
|
||||
@import 'variables/layout';
|
||||
@import 'variables/loadmask';
|
||||
@import 'variables/htmleditor';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
@import 'widgets/boundlist';
|
||||
@import 'widgets/button';
|
||||
@import 'widgets/btn-group';
|
||||
@import 'widgets/datepicker';
|
||||
@import 'widgets/colorpicker';
|
||||
@import 'widgets/menu';
|
||||
@import 'widgets/panel';
|
||||
@import 'widgets/toolbar';
|
||||
@import 'widgets/form';
|
||||
@import 'widgets/qtip';
|
||||
@import 'widgets/window';
|
||||
@import 'widgets/tabbar';
|
||||
@import 'widgets/tab';
|
||||
@import 'widgets/slider';
|
||||
@import 'widgets/grid';
|
||||
@import 'widgets/tree';
|
||||
@import 'widgets/loadmask';
|
||||
@import 'widgets/progress-bar';
|
||||
@import 'widgets/drawcomponent';
|
||||
@import 'widgets/viewport';
|
||||
|
||||
@import 'widgets/html';
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
.#{$prefix}body {
|
||||
color: $color;
|
||||
font-size: $font-size;
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
.#{$prefix}clear {
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
height: 0;
|
||||
width: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}layer {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.#{$prefix}shim {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
@include opacity(0);
|
||||
}
|
||||
|
||||
.#{$prefix}hide-display {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.#{$prefix}hide-visibility {
|
||||
visibility:hidden !important;
|
||||
}
|
||||
|
||||
.#{$prefix}item-disabled {
|
||||
@include opacity(0.4);
|
||||
}
|
||||
|
||||
.#{$prefix}ie6 .#{$prefix}item-disabled {
|
||||
filter:none;
|
||||
}
|
||||
|
||||
.#{$prefix}hidden,
|
||||
.#{$prefix}hide-offsets {
|
||||
display: block !important;
|
||||
position: absolute!important;
|
||||
left: -10000px!important;
|
||||
top: -10000px!important;
|
||||
}
|
||||
|
||||
.#{$prefix}hide-nosize {
|
||||
height: 0!important;
|
||||
width: 0!important;
|
||||
}
|
||||
|
||||
.#{$prefix}masked-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
.#{$prefix}ie6 .#{$prefix}masked select,
|
||||
.#{$prefix}ie6.#{$prefix}body-masked select {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for the three schemes for showing shadows under an element: CSS3, IE blur transform, or 9 point framing with images.
|
||||
.#{$prefix}css-shadow {
|
||||
position: absolute;
|
||||
@include border-radius($window-border-radius);
|
||||
}
|
||||
|
||||
.#{$prefix}ie-shadow {
|
||||
background-color:#777;
|
||||
display: none;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow {
|
||||
display: none;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow * {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow * {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
clear: none;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
/* top bottom */
|
||||
.#{$prefix}frame-shadow .xstc,
|
||||
.#{$prefix}frame-shadow .xsbc {
|
||||
height: 6px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xsc {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xsml {
|
||||
background: transparent repeat-y 0 0;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xsmr {
|
||||
background: transparent repeat-y -6px 0;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xstl {
|
||||
background: transparent no-repeat 0 0;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xstc {
|
||||
background: transparent repeat-x 0 -30px;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xstr {
|
||||
background: transparent repeat-x 0 -18px;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xsbl {
|
||||
background: transparent no-repeat 0 -12px;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xsbc {
|
||||
background: transparent repeat-x 0 -36px;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xsbr {
|
||||
background: transparent repeat-x 0 -6px;
|
||||
}
|
||||
.#{$prefix}frame-shadow .xstl,
|
||||
.#{$prefix}frame-shadow .xstc,
|
||||
.#{$prefix}frame-shadow .xstr,
|
||||
.#{$prefix}frame-shadow .xsbl,
|
||||
.#{$prefix}frame-shadow .xsbc,
|
||||
.#{$prefix}frame-shadow .xsbr {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
float: left;
|
||||
|
||||
@if $include-shadow-images {
|
||||
@include theme-background-image($theme-name, 'shared/shadow.png');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xsml,
|
||||
.#{$prefix}frame-shadow .xsmr {
|
||||
width: 6px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
|
||||
@if $include-shadow-images {
|
||||
@include theme-background-image($theme-name, 'shared/shadow-lr.png');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xsmc {
|
||||
float: left;
|
||||
height: 100%;
|
||||
|
||||
@if $include-shadow-images {
|
||||
@include theme-background-image($theme-name, 'shared/shadow-c.png');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}frame-shadow .xst,
|
||||
.#{$prefix}frame-shadow .xsb {
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
//box wrap - Ext.get("foo").boxWrap();
|
||||
.x-box-tl {
|
||||
background: transparent no-repeat 0 0;
|
||||
zoom:1;
|
||||
}
|
||||
|
||||
.x-box-tc {
|
||||
height: 8px;
|
||||
background: transparent repeat-x 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.x-box-tr {
|
||||
background: transparent no-repeat right -8px;
|
||||
}
|
||||
|
||||
.x-box-ml {
|
||||
background: transparent repeat-y 0;
|
||||
padding-left: 4px;
|
||||
overflow: hidden;
|
||||
zoom:1;
|
||||
}
|
||||
|
||||
.x-box-mc {
|
||||
background: repeat-x 0 -16px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.x-box-mc h3 {
|
||||
margin: 0 0 4px 0;
|
||||
zoom:1;
|
||||
}
|
||||
|
||||
.x-box-mr {
|
||||
background: transparent repeat-y right;
|
||||
padding-right: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.x-box-bl {
|
||||
background: transparent no-repeat 0 -16px;
|
||||
zoom:1;
|
||||
}
|
||||
|
||||
.x-box-bc {
|
||||
background: transparent repeat-x 0 -8px;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.x-box-br {
|
||||
background: transparent no-repeat right -24px;
|
||||
}
|
||||
|
||||
.x-box-tl, .x-box-bl {
|
||||
padding-left: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.x-box-tr, .x-box-br {
|
||||
padding-right: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.x-box-tl {
|
||||
@include theme-background-image($theme-name, 'box/corners.gif');
|
||||
}
|
||||
|
||||
.x-box-tc {
|
||||
@include theme-background-image($theme-name, 'box/tb.gif');
|
||||
}
|
||||
|
||||
.x-box-tr {
|
||||
@include theme-background-image($theme-name, 'box/corners.gif');
|
||||
}
|
||||
|
||||
.x-box-ml {
|
||||
@include theme-background-image($theme-name, 'box/l.gif');
|
||||
}
|
||||
|
||||
.x-box-mc {
|
||||
background-color: #eee;
|
||||
@include theme-background-image($theme-name, 'box/tb.gif');
|
||||
font-family: "Myriad Pro","Myriad Web","Tahoma","Helvetica","Arial",sans-serif;
|
||||
color: #393939;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.x-box-mc h3 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.x-box-mr {
|
||||
@include theme-background-image($theme-name, 'box/r.gif');
|
||||
}
|
||||
|
||||
.x-box-bl {
|
||||
@include theme-background-image($theme-name, 'box/corners.gif');
|
||||
}
|
||||
|
||||
.x-box-bc {
|
||||
@include theme-background-image($theme-name, 'box/tb.gif');
|
||||
}
|
||||
|
||||
.x-box-br {
|
||||
@include theme-background-image($theme-name, 'box/corners.gif');
|
||||
}
|
||||
|
||||
.x-box-blue .x-box-bl, .x-box-blue .x-box-br, .x-box-blue .x-box-tl, .x-box-blue .x-box-tr {
|
||||
@include theme-background-image($theme-name, 'box/corners-blue.gif');
|
||||
}
|
||||
|
||||
.x-box-blue .x-box-bc, .x-box-blue .x-box-mc, .x-box-blue .x-box-tc {
|
||||
@include theme-background-image($theme-name, 'box/tb-blue.gif');
|
||||
}
|
||||
|
||||
.x-box-blue .x-box-mc {
|
||||
background-color: #c3daf9;
|
||||
}
|
||||
|
||||
.x-box-blue .x-box-mc h3 {
|
||||
color: #17385b;
|
||||
}
|
||||
|
||||
.x-box-blue .x-box-ml {
|
||||
@include theme-background-image($theme-name, 'box/l-blue.gif');
|
||||
}
|
||||
|
||||
.x-box-blue .x-box-mr {
|
||||
@include theme-background-image($theme-name, 'box/r-blue.gif');
|
||||
}
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
@if $scope-reset-css {
|
||||
.#{$prefix}reset {
|
||||
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
|
||||
h4, h5, h6, pre, code, form, fieldset, legend,
|
||||
input, textarea, p, blockquote, th, td {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
fieldset, img {
|
||||
border:0;
|
||||
}
|
||||
|
||||
address, caption, cite, code,
|
||||
dfn, em, strong, th, var {
|
||||
font-style:normal;
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
caption, th {
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content:"";
|
||||
}
|
||||
|
||||
abbr, acronym {
|
||||
border:0;
|
||||
font-variant:normal;
|
||||
}
|
||||
|
||||
sup {
|
||||
vertical-align:text-top;
|
||||
}
|
||||
|
||||
sub {
|
||||
vertical-align:text-bottom;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
font-family:inherit;
|
||||
font-size:inherit;
|
||||
font-weight:inherit;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
|
||||
h4, h5, h6, pre, code, form, fieldset, legend,
|
||||
input, textarea, p, blockquote, th, td {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
fieldset, img {
|
||||
border:0;
|
||||
}
|
||||
|
||||
address, caption, cite, code,
|
||||
dfn, em, strong, th, var {
|
||||
font-style:normal;
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
caption, th {
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content:"";
|
||||
}
|
||||
|
||||
abbr, acronym {
|
||||
border:0;
|
||||
font-variant:normal;
|
||||
}
|
||||
|
||||
sup {
|
||||
vertical-align:text-top;
|
||||
}
|
||||
|
||||
sub {
|
||||
vertical-align:text-bottom;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
font-family:inherit;
|
||||
font-size:inherit;
|
||||
font-weight:inherit;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline:none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}border-box .#{$prefix}reset,
|
||||
.#{$prefix}border-box .#{$prefix}reset * {
|
||||
box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
-ms-box-sizing:border-box;
|
||||
-webkit-box-sizing:border-box;
|
||||
}
|
||||
|
|
@ -0,0 +1,305 @@
|
|||
@mixin extjs-layout {
|
||||
.#{$prefix}docked {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dock Layouts
|
||||
* @todo move this somewhere else?
|
||||
*/
|
||||
.#{$prefix}docked-top {
|
||||
border-bottom-width: 0 !important;
|
||||
}
|
||||
|
||||
.#{$prefix}docked-bottom {
|
||||
border-top-width: 0 !important;
|
||||
}
|
||||
|
||||
.#{$prefix}docked-left {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
|
||||
.#{$prefix}docked-right {
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
.#{$prefix}docked-noborder-top {
|
||||
border-top-width: 0 !important;
|
||||
}
|
||||
|
||||
.#{$prefix}docked-noborder-right {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
|
||||
.#{$prefix}docked-noborder-bottom {
|
||||
border-bottom-width: 0 !important;
|
||||
}
|
||||
|
||||
.#{$prefix}docked-noborder-left {
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
.#{$prefix}box-inner {
|
||||
overflow:hidden;
|
||||
|
||||
zoom:1;
|
||||
|
||||
position:relative;
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.#{$prefix}box-item {
|
||||
position:absolute !important;
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.#{$prefix}box-layout-ct,
|
||||
.#{$prefix}border-layout-ct {
|
||||
overflow: hidden;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.#{$prefix}overflow-hidden {
|
||||
overflow:hidden !important;
|
||||
}
|
||||
|
||||
.#{$prefix}inline-children > * {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.#{$prefix}abs-layout-item {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.#{$prefix}border-layout-ct {
|
||||
background-color: $border-layout-ct-background;
|
||||
}
|
||||
|
||||
.#{$prefix}border-region-slide-in {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.#{$prefix}region-collapsed-placeholder {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.#{$prefix}accordion-hd .#{$prefix}panel-header-text {
|
||||
color: $accordion-header-color;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.#{$prefix}accordion-hd {
|
||||
.#{$prefix}tool-collapse-top,
|
||||
.#{$prefix}tool-collapse-right,
|
||||
.#{$prefix}tool-collapse-bottom,
|
||||
.#{$prefix}tool-collapse-left {
|
||||
background-position: 0 -255px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-expand-top,
|
||||
.#{$prefix}tool-expand-right,
|
||||
.#{$prefix}tool-expand-bottom,
|
||||
.#{$prefix}tool-expand-left {
|
||||
background-position: 0 -240px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-over {
|
||||
.#{$prefix}tool-collapse-top,
|
||||
.#{$prefix}tool-collapse-right,
|
||||
.#{$prefix}tool-collapse-bottom,
|
||||
.#{$prefix}tool-collapse-left {
|
||||
background-position: -15px -255px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tool-over {
|
||||
.#{$prefix}tool-expand-top,
|
||||
.#{$prefix}tool-expand-right,
|
||||
.#{$prefix}tool-expand-bottom,
|
||||
.#{$prefix}tool-expand-left {
|
||||
background-position: -15px -240px;
|
||||
}
|
||||
}
|
||||
|
||||
background: $accordion-header-background-color !important;
|
||||
@include single-box-shadow($accordion-header-background-color, 0, 0, 0, 0, true);
|
||||
}
|
||||
|
||||
.#{$prefix}accordion-hd {
|
||||
border-width: 1px 0 1px 0 !important;
|
||||
padding: 4px 5px 5px 5px;
|
||||
border-top-color: $panel-header-inner-border-color !important;
|
||||
}
|
||||
|
||||
.#{$prefix}accordion-body {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
.#{$prefix}accordion-hd-sibling-expanded {
|
||||
border-top-color: $panel-border-color !important;
|
||||
@include single-box-shadow($panel-header-inner-border-color, 0, 1px, 0, 0, true);
|
||||
}
|
||||
|
||||
.#{$prefix}accordion-hd-last-collapsed {
|
||||
border-bottom-color: $accordion-header-background-color !important;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-tl,
|
||||
.#{$prefix}frame-tr,
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bl,
|
||||
.#{$prefix}frame-br,
|
||||
.#{$prefix}frame-bc {
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bc {
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.#{$prefix}frame-mc {
|
||||
position: relative;
|
||||
background-repeat: repeat-x;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Classes for horizontal Box layout scroller.
|
||||
// Uses the *TAB* scroller image because it's all we have.
|
||||
// This will not work well in other cases
|
||||
.#{$prefix}box-scroller-left {
|
||||
float: left;
|
||||
height: 100%;
|
||||
|
||||
z-index: 5;
|
||||
|
||||
.#{$prefix}toolbar-scroll-left,
|
||||
.#{$prefix}tabbar-scroll-left {
|
||||
width: 18px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: $tab-height;
|
||||
background: transparent no-repeat -18px 0;
|
||||
@include theme-background-image($theme-name, 'tab-bar/scroll-left.gif');
|
||||
}
|
||||
.#{$prefix}toolbar-scroll-left-hover {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.#{$prefix}toolbar-scroll-left-disabled,
|
||||
.#{$prefix}tabbar-scroll-left-disabled {
|
||||
background-position: -18px 0;
|
||||
@include opacity(.5);
|
||||
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-scroll-left {
|
||||
@include theme-background-image($theme-name, 'toolbar/scroll-left.gif');
|
||||
background-position: -14px 0;
|
||||
}
|
||||
.#{$prefix}toolbar-scroll-left-hover {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.#{$prefix}toolbar-scroll-left-disabled {
|
||||
background-position: -14px 0;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-scroll-left {
|
||||
width: 14px;
|
||||
height: 22px;
|
||||
|
||||
border-bottom: 1px solid #8db2e3;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}horizontal-box-overflow-body {
|
||||
float: left;
|
||||
}
|
||||
.#{$prefix}box-scroller-right {
|
||||
float: right;
|
||||
height: 100%;
|
||||
|
||||
z-index: 5;
|
||||
|
||||
.#{$prefix}toolbar-scroll-right,
|
||||
.#{$prefix}tabbar-scroll-right {
|
||||
width: 18px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: $tab-height;
|
||||
background: transparent no-repeat 0 0;
|
||||
@include theme-background-image($theme-name, 'tab-bar/scroll-right.gif');
|
||||
}
|
||||
.#{$prefix}toolbar-scroll-right-hover {
|
||||
background-position: -18px 0;
|
||||
}
|
||||
.#{$prefix}toolbar-scroll-right-disabled,
|
||||
.#{$prefix}tabbar-scroll-right-disabled {
|
||||
background-position: 0 0;
|
||||
@include opacity(.5);
|
||||
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-scroll-right {
|
||||
@include theme-background-image($theme-name, 'toolbar/scroll-right.gif');
|
||||
}
|
||||
.#{$prefix}toolbar-scroll-right-hover {
|
||||
background-position: -14px 0;
|
||||
}
|
||||
.#{$prefix}toolbar-scroll-right-disabled {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-scroll-right {
|
||||
width: 14px;
|
||||
height: 22px;
|
||||
|
||||
border-bottom: 1px solid #8db2e3;
|
||||
}
|
||||
}
|
||||
|
||||
// Classes for vertical Box layout scroller
|
||||
.#{$prefix}box-scroller-top {
|
||||
.#{$prefix}box-scroller {
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
.#{$prefix}menu-scroll-top {
|
||||
background: transparent no-repeat center center;
|
||||
@include theme-background-image($theme-name, 'layout/mini-top.gif');
|
||||
height: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.#{$prefix}box-scroller-bottom {
|
||||
.#{$prefix}box-scroller {
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
.#{$prefix}menu-scroll-bottom {
|
||||
background: transparent no-repeat center center;
|
||||
@include theme-background-image($theme-name, 'layout/mini-bottom.gif');
|
||||
height: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}box-menu-right {
|
||||
float: right;
|
||||
padding-right: $toolbar-horizontal-spacing;
|
||||
}
|
||||
|
||||
.#{$prefix}column {
|
||||
float: left;
|
||||
}
|
||||
@if $include-ie {
|
||||
.#{$prefix}ie6 .#{$prefix}column {
|
||||
display: inline; /*prevent IE6 double-margin bug*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
/**
|
||||
* @mixin background-gradient
|
||||
*
|
||||
* @param {Color} $background-color The background color of the gradient
|
||||
* @param {String/List} $type The type of gradient to be used. Can either be a String which is a predefined gradient, or it can
|
||||
* can be a list of color_stops. If none is set, it will still set the `background-color` to the $background-color.
|
||||
* @param {String} $direction The direction of the gradient. Can either me `top` or `left`. (defaults to `top`)
|
||||
*/
|
||||
@mixin background-gradient($bg-color, $type: $base-gradient, $direction: top) {
|
||||
background-image: none;
|
||||
background-color: $bg-color;
|
||||
|
||||
@if $base-gradient != null and $bg-color != transparent {
|
||||
//color_stops
|
||||
@if type-of($type) == "list" {
|
||||
@include background-image(linear-gradient($direction, $type));
|
||||
}
|
||||
|
||||
//default gradients
|
||||
@else if $type == bevel {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
lighten($bg-color, 15%),
|
||||
lighten($bg-color, 8%) 30%,
|
||||
$bg-color 65%,
|
||||
darken($bg-color, 6%)
|
||||
)));
|
||||
} @else if $type == glossy {
|
||||
@include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%))));
|
||||
} @else if $type == recessed {
|
||||
@include background-image(linear-gradient($direction, color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%))));
|
||||
} @else if $type == matte {
|
||||
@include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 3%), darken($bg-color, 4%))));
|
||||
} @else if $type == matte-reverse {
|
||||
@include background-image(linear-gradient($direction, color_stops(darken($bg-color, 6%), lighten($bg-color, 4%))));
|
||||
} @else if $type == glossy-toolbar {
|
||||
@include background-image(linear-gradient($direction, color_stops(#F0F5FA, #DAE6F4 2%, #CEDDEF)));
|
||||
}
|
||||
|
||||
//ext3.3 gradients
|
||||
@else if $type == panel-header {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
adjust-color($bg-color, $hue: -0.857deg, $saturation: -1.63%, $lightness: 3.529%),
|
||||
adjust-color($bg-color, $hue: 0.158deg, $saturation: -1.21%, $lightness: 0.392%) 45%,
|
||||
adjust-color($bg-color, $hue: 1.154deg, $saturation: 0.607%, $lightness: -7.647%) 46%,
|
||||
adjust-color($bg-color, $hue: 1.154deg, $saturation: 0.607%, $lightness: -7.647%) 50%,
|
||||
adjust-color($bg-color, $hue: 1.444deg, $saturation: -1.136%, $lightness: -4.706%) 51%,
|
||||
$bg-color
|
||||
)));
|
||||
} @else if $type == tabbar {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
adjust-color($bg-color, $hue: 0.0deg, $saturation: 1.604%, $lightness: 4.706%),
|
||||
$bg-color
|
||||
)));
|
||||
} @else if $type == tab {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
adjust-color($bg-color, $hue: 1.382deg, $saturation: -18.571%, $lightness: -4.902%),
|
||||
adjust-color($bg-color, $hue: 0.43deg, $saturation: -10.311%, $lightness: -2.157%) 25%,
|
||||
$bg-color 45%
|
||||
)));
|
||||
} @else if $type == tab-active {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
adjust-color($bg-color, $hue: -212.903deg, $saturation: -88.571%, $lightness: 6.863%),
|
||||
adjust-color($bg-color, $hue: 0.43deg, $saturation: -6.753%, $lightness: 4.706%) 25%,
|
||||
$bg-color 45%
|
||||
)));
|
||||
} @else if $type == tab-over {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
adjust-color($bg-color, $hue: 4.462deg, $saturation: -9.524%, $lightness: -3.725%),
|
||||
adjust-color($bg-color, $hue: 2.272deg, $saturation: 0.0%, $lightness: -1.569%) 25%,
|
||||
$bg-color 45%
|
||||
)));
|
||||
} @else if $type == tab-disabled {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
$bg-color,
|
||||
adjust-color($bg-color, $hue: -0.267deg, $saturation: 18.571%, $lightness: 2.941%)
|
||||
)));
|
||||
} @else if $type == grid-header {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: 20.392%),
|
||||
adjust-color($bg-color, $hue: 220.0deg, $saturation: 5.66%, $lightness: 12.353%)
|
||||
)));
|
||||
} @else if $type == grid-header-over {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%),
|
||||
adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%) 39%,
|
||||
adjust-color($bg-color, $hue: 0.372deg, $saturation: 0.101%, $lightness: 10.196%) 40%,
|
||||
adjust-color($bg-color, $hue: 0.372deg, $saturation: 0.101%, $lightness: 10.196%)
|
||||
)));
|
||||
} @else if $type == grid-row-over {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%),
|
||||
$bg-color
|
||||
)));
|
||||
} @else if $type == grid-cell-special {
|
||||
@include background-image(linear-gradient(left, color_stops(
|
||||
$bg-color,
|
||||
darken($bg-color, 5)
|
||||
)));
|
||||
} @else if $type == glossy-button or $type == glossy-button-disabled {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
$bg-color,
|
||||
adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -2.353%) 48%,
|
||||
adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -11.373%) 52%,
|
||||
adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -9.412%)
|
||||
)));
|
||||
} @else if $type == glossy-button-over {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
$bg-color,
|
||||
adjust-color($bg-color, $hue: 1.754deg, $saturation: 0.0%, $lightness: -2.157%) 48%,
|
||||
adjust-color($bg-color, $hue: 5.833deg, $saturation: -35.135%, $lightness: -9.216%) 52%,
|
||||
adjust-color($bg-color, $hue: 5.833deg, $saturation: -27.273%, $lightness: -7.647%)
|
||||
)));
|
||||
} @else if $type == glossy-button-pressed {
|
||||
@include background-image(linear-gradient($direction, color_stops(
|
||||
$bg-color,
|
||||
adjust-color($bg-color, $hue: -1.839deg, $saturation: -2.18%, $lightness: 2.157%) 48%,
|
||||
adjust-color($bg-color, $hue: -2.032deg, $saturation: 37.871%, $lightness: -4.706%) 52%,
|
||||
adjust-color($bg-color, $hue: -1.641deg, $saturation: 36.301%, $lightness: -2.549%)
|
||||
)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
/**
|
||||
*
|
||||
*/
|
||||
@mixin color-by-background($bg-color, $contrast: 70%, $default-color: null, $bevel-text: true) {
|
||||
@if ($default-color != null) {
|
||||
color: $default-color;
|
||||
} @else {
|
||||
@if (lightness($bg-color) > 40) {
|
||||
color: darken($bg-color, $contrast);
|
||||
}
|
||||
@else {
|
||||
color: lighten($bg-color, $contrast)
|
||||
}
|
||||
}
|
||||
|
||||
@if ($bevel-text != false) {
|
||||
@if (lightness($bg-color) < 40) {
|
||||
@include text-shadow(rgba(0,0,0,.5) 0 -1px 0);
|
||||
} @else {
|
||||
@include text-shadow(rgba(255,255,255,.25) 0 1px 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
@mixin x-frame(
|
||||
$cls,
|
||||
$ui: null,
|
||||
$border-radius: 0px,
|
||||
$border-width: 0px,
|
||||
$padding: null,
|
||||
$background-color: null,
|
||||
$background-gradient: null,
|
||||
$table: false,
|
||||
$background-direction: top
|
||||
) {
|
||||
$cls-ui: $cls;
|
||||
@if $ui != null {
|
||||
$cls-ui: $cls + '-' + $ui;
|
||||
}
|
||||
|
||||
$vertical: false;
|
||||
@if $background-direction == left or $background-direction == right {
|
||||
$vertical: true;
|
||||
}
|
||||
|
||||
$frame-top: max(top($border-radius), right($border-radius));
|
||||
$frame-right: max(right($border-radius), bottom($border-radius));
|
||||
$frame-bottom: max(bottom($border-radius), left($border-radius));
|
||||
$frame-left: max(left($border-radius), top($border-radius));
|
||||
|
||||
$padding-top: 0;
|
||||
$padding-right: 0;
|
||||
$padding-bottom: 0;
|
||||
$padding-left: 0;
|
||||
|
||||
@if $padding == null {
|
||||
$padding-top: $frame-top - top($border-width);
|
||||
$padding-right: $frame-right - right($border-width);
|
||||
$padding-bottom: $frame-bottom - bottom($border-width);
|
||||
$padding-left: $frame-left - left($border-width);
|
||||
}
|
||||
@else {
|
||||
$padding-top: top($padding);
|
||||
$padding-right: right($padding);
|
||||
$padding-bottom: bottom($padding);
|
||||
$padding-left: left($padding);
|
||||
}
|
||||
|
||||
@if $padding-top < $frame-top {
|
||||
$padding-top: $frame-top - top($border-width);
|
||||
}
|
||||
@if $padding-right < $frame-right {
|
||||
$padding-right: $frame-right - right($border-width);
|
||||
}
|
||||
@if $padding-bottom < $frame-bottom {
|
||||
$padding-bottom: $frame-bottom - bottom($border-width);
|
||||
}
|
||||
@if $padding-left < $frame-left {
|
||||
$padding-left: $frame-left - left($border-width);
|
||||
}
|
||||
|
||||
.#{$prefix}#{$cls-ui} {
|
||||
@if $supports-border-radius {
|
||||
@if length($border-radius) == 2 {
|
||||
@include border-top-left-radius(nth($border-radius, 1));
|
||||
@include border-top-right-radius(nth($border-radius, 2));
|
||||
} @else if length($border-radius) == 3 {
|
||||
@include border-top-left-radius(nth($border-radius, 1));
|
||||
@include border-top-right-radius(nth($border-radius, 2));
|
||||
@include border-bottom-right-radius(nth($border-radius, 3));
|
||||
} @else if length($border-radius) == 4 {
|
||||
@include border-top-left-radius(nth($border-radius, 1));
|
||||
@include border-top-right-radius(nth($border-radius, 2));
|
||||
@include border-bottom-right-radius(nth($border-radius, 3));
|
||||
@include border-bottom-left-radius(nth($border-radius, 4));
|
||||
} @else {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
padding: $padding-top $padding-right $padding-bottom $padding-left;
|
||||
border-width: $border-width;
|
||||
border-style: solid;
|
||||
@if $background-color != null {
|
||||
@if $supports-gradients and $background-gradient != null {
|
||||
@include background-gradient($background-color, $background-gradient, $background-direction);
|
||||
}
|
||||
@else {
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if not $supports-gradients or $compile-all {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}#{$cls-ui}-mc {
|
||||
@if $background-gradient != null {
|
||||
@include theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis);
|
||||
}
|
||||
@if $background-color != null {
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if not $supports-border-radius or $compile-all {
|
||||
.#{$prefix}nbr {
|
||||
.#{$prefix}#{$cls-ui} {
|
||||
padding: 0 !important;
|
||||
border-width: 0 !important;
|
||||
@include border-radius(0px);
|
||||
@if $background-color != null {
|
||||
background-color: transparent;
|
||||
}
|
||||
@else {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@function pad($radius) {
|
||||
$radius: boxmax($radius);
|
||||
$radius: parseint($radius);
|
||||
@if $radius > 10 {
|
||||
@return $radius;
|
||||
}
|
||||
@else {
|
||||
@return "0" + $radius;
|
||||
}
|
||||
}
|
||||
|
||||
$type: '100';
|
||||
@if $table == true {
|
||||
$type: '110';
|
||||
}
|
||||
$direction: '100';
|
||||
@if $vertical == true {
|
||||
$direction: '110';
|
||||
}
|
||||
|
||||
$left: $type + pad(top($border-radius)) + pad(right($border-radius)) + 'px';
|
||||
$top: $direction + pad(bottom($border-radius)) + pad(left($border-radius)) + 'px';
|
||||
background-position: unquote($left) unquote($top);
|
||||
}
|
||||
|
||||
.#{$prefix}#{$cls-ui}-tl,
|
||||
.#{$prefix}#{$cls-ui}-bl,
|
||||
.#{$prefix}#{$cls-ui}-tr,
|
||||
.#{$prefix}#{$cls-ui}-br,
|
||||
.#{$prefix}#{$cls-ui}-tc,
|
||||
.#{$prefix}#{$cls-ui}-bc,
|
||||
.#{$prefix}#{$cls-ui}-ml,
|
||||
.#{$prefix}#{$cls-ui}-mr {
|
||||
zoom:1;
|
||||
|
||||
@if $background-color != transparent {
|
||||
@include theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-corners.gif', false, $relative-image-path-for-uis);
|
||||
}
|
||||
}
|
||||
|
||||
@if $vertical == true {
|
||||
.#{$prefix}#{$cls-ui}-tc,
|
||||
.#{$prefix}#{$cls-ui}-bc {
|
||||
zoom:1;
|
||||
|
||||
@if $background-color != transparent {
|
||||
@include theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
|
||||
background-position: 0 0;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
.#{$prefix}#{$cls-ui}-ml,
|
||||
.#{$prefix}#{$cls-ui}-mr {
|
||||
zoom:1;
|
||||
|
||||
@if $background-color != transparent {
|
||||
@include theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
|
||||
background-position: 0 0;
|
||||
@if $background-gradient == null {
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$padding-top: $padding-top - $frame-top;
|
||||
$padding-right: $padding-right - $frame-right;
|
||||
$padding-bottom: $padding-bottom - $frame-bottom;
|
||||
$padding-left: $padding-left - $frame-left;
|
||||
|
||||
|
||||
@if $padding-top < 0 {
|
||||
$padding-top: 0;
|
||||
}
|
||||
@if $padding-right < 0 {
|
||||
$padding-right: 0;
|
||||
}
|
||||
@if $padding-bottom < 0 {
|
||||
$padding-bottom: 0;
|
||||
}
|
||||
@if $padding-left < 0 {
|
||||
$padding-left: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}#{$cls-ui}-mc {
|
||||
padding: $padding-top $padding-right $padding-bottom $padding-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
@function inner-border-spread($width) {
|
||||
$top: top($width);
|
||||
$right: right($width);
|
||||
$bottom: bottom($width);
|
||||
$left: left($width);
|
||||
|
||||
@return min(($top + $bottom) / 2, ($left + $right) / 2);
|
||||
}
|
||||
|
||||
@function inner-border-hoff($width, $spread) {
|
||||
$left: left($width);
|
||||
$right: right($width);
|
||||
|
||||
@if $right <= 0 {
|
||||
@return $left - $spread;
|
||||
}
|
||||
@else {
|
||||
@return $spread - $right;
|
||||
}
|
||||
}
|
||||
|
||||
@function inner-border-voff($width, $spread) {
|
||||
$top: top($width);
|
||||
$bottom: bottom($width);
|
||||
|
||||
@if $bottom <= 0 {
|
||||
@return $top - $spread;
|
||||
}
|
||||
@else {
|
||||
@return $spread - $bottom;
|
||||
}
|
||||
}
|
||||
|
||||
@function even($number) {
|
||||
@return ceil($number / 2) == ($number / 2);
|
||||
}
|
||||
|
||||
@function odd($number) {
|
||||
@return ceil($number / 2) != ($number / 2);
|
||||
}
|
||||
|
||||
@function inner-border-usesingle-width($width) {
|
||||
$top: top($width);
|
||||
$right: right($width);
|
||||
$bottom: bottom($width);
|
||||
$left: left($width);
|
||||
|
||||
@if $top == 0 {
|
||||
@if $left + $right == 0 {
|
||||
@return true;
|
||||
}
|
||||
@if $bottom >= $left + $right {
|
||||
@return true;
|
||||
}
|
||||
}
|
||||
|
||||
@if $bottom == 0 {
|
||||
@if $left + $right == 0 {
|
||||
@return true;
|
||||
}
|
||||
@if $top >= $left + $right {
|
||||
@return true;
|
||||
}
|
||||
}
|
||||
|
||||
@if $left == 0 {
|
||||
@if $top + $bottom == 0 {
|
||||
@return true;
|
||||
}
|
||||
@if $right >= $top + $bottom {
|
||||
@return true;
|
||||
}
|
||||
}
|
||||
|
||||
@if $right == 0 {
|
||||
@if $top + $bottom == 0 {
|
||||
@return true;
|
||||
}
|
||||
@if $left >= $top + $bottom {
|
||||
@return true;
|
||||
}
|
||||
}
|
||||
|
||||
@if $top + $bottom == $left + $right and even($top) == even($bottom) and even($left) == even($right) {
|
||||
@return true;
|
||||
}
|
||||
|
||||
@return false;
|
||||
}
|
||||
|
||||
@function inner-border-usesingle-color($color) {
|
||||
$top: top($color);
|
||||
$right: right($color);
|
||||
$bottom: bottom($color);
|
||||
$left: left($color);
|
||||
|
||||
@if $top == $right == $bottom == $left {
|
||||
@return true;
|
||||
}
|
||||
|
||||
@return false;
|
||||
}
|
||||
|
||||
@function inner-border-usesingle($width, $color) {
|
||||
@if inner-border-usesingle-color($color) and inner-border-usesingle-width($width) {
|
||||
@return true;
|
||||
}
|
||||
@return false;
|
||||
}
|
||||
|
||||
@mixin inner-border($width: 1px, $color: #fff, $blur: 0px) {
|
||||
@if inner-border-usesingle($width, $color) {
|
||||
$spread: inner-border-spread($width);
|
||||
$hoff: inner-border-hoff($width, $spread);
|
||||
$voff: inner-border-voff($width, $spread);
|
||||
@include single-box-shadow($color-top, $hoff, $voff, $blur, $spread, true);
|
||||
}
|
||||
@else {
|
||||
$width-top: top($width);
|
||||
$width-right: right($width);
|
||||
$width-bottom: bottom($width);
|
||||
$width-left: left($width);
|
||||
|
||||
$color-top: top($color);
|
||||
$color-right: right($color);
|
||||
$color-bottom: bottom($color);
|
||||
$color-left: left($color);
|
||||
|
||||
$shadow-top: false;
|
||||
$shadow-right: false;
|
||||
$shadow-bottom: false;
|
||||
$shadow-left: false;
|
||||
|
||||
@if $width-top > 0 {
|
||||
$shadow-top: $color-top 0 $width-top $blur 0 inset;
|
||||
}
|
||||
@if $width-right > 0 {
|
||||
$shadow-right: $color-right (-1 * $width-right) 0 $blur 0 inset;
|
||||
}
|
||||
@if $width-bottom > 0 {
|
||||
$shadow-bottom: $color-bottom 0 (-1 * $width-bottom) $blur 0 inset;
|
||||
}
|
||||
@if $width-left > 0 {
|
||||
$shadow-left: $color-left $width-left 0 $blur 0 inset;
|
||||
}
|
||||
|
||||
@include box-shadow($shadow-top, $shadow-bottom, $shadow-right, $shadow-left);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/**
|
||||
* Method which inserts a full background-image property for a theme image.
|
||||
* It checks if the file exists and if it doesn't, it'll throw an error.
|
||||
* By default it will not include the background-image property if it is not found,
|
||||
* but this can be changed by changing the default value of $include-missing-images to
|
||||
* be true.
|
||||
*/
|
||||
@mixin theme-background-image($theme-name, $path, $without-url: false, $relative: false) {
|
||||
$exists_image: theme-image($theme-name, $path, true, false);
|
||||
|
||||
@if $exists_image {
|
||||
$exists: theme_image_exists($exists_image);
|
||||
|
||||
@if $exists or $include-missing-images {
|
||||
background-image: theme-image($theme-name, $path, $without-url, $relative);
|
||||
}
|
||||
@else {
|
||||
@warn "@theme-background-image: Theme image not found: #{$exists_image}";
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@warn "@theme-background-image: No arguments passed";
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
@mixin extjs-dragdrop {
|
||||
.#{$prefix}dd-drag-proxy {
|
||||
|
||||
}
|
||||
|
||||
.#{$prefix}dd-drag-repair {
|
||||
.#{$prefix}dd-drag-ghost {
|
||||
@include opacity(.6);
|
||||
}
|
||||
|
||||
.#{$prefix}dd-drop-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}dd-drag-ghost {
|
||||
@include opacity(.85);
|
||||
|
||||
padding: 5px;
|
||||
padding-left: 20px;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
color: #000;
|
||||
font: normal ceil($font-size * .9) $font-family;
|
||||
|
||||
border: 1px solid;
|
||||
border-color: #ddd #bbb #bbb #ddd;
|
||||
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.#{$prefix}dd-drop-icon {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
background-color: transparent;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.#{$prefix}view-selector {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
width: 0;
|
||||
|
||||
background-color: #c3daf9;
|
||||
border: 1px dotted #3399bb;
|
||||
|
||||
@include opacity(.5);
|
||||
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.#{$prefix}dd-drop-nodrop .#{$prefix}dd-drop-icon {
|
||||
@include theme-background-image($theme-name, 'dd/drop-no.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}dd-drop-ok .#{$prefix}dd-drop-icon {
|
||||
@include theme-background-image($theme-name, 'dd/drop-yes.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}dd-drop-ok-add .#{$prefix}dd-drop-icon {
|
||||
@include theme-background-image($theme-name, 'dd/drop-add.gif');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
.#{$prefix}focus-element {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.#{$prefix}focus-frame {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 100000000;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.#{$prefix}focus-frame-top,
|
||||
.#{$prefix}focus-frame-bottom,
|
||||
.#{$prefix}focus-frame-left,
|
||||
.#{$prefix}focus-frame-right {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.#{$prefix}focus-frame-top,
|
||||
.#{$prefix}focus-frame-bottom {
|
||||
border-top: $focus-frame-style $focus-frame-width $focus-frame-color;
|
||||
height: $focus-frame-width;
|
||||
}
|
||||
|
||||
.#{$prefix}focus-frame-left,
|
||||
.#{$prefix}focus-frame-right {
|
||||
border-left: $focus-frame-style $focus-frame-width $focus-frame-color;
|
||||
width: $focus-frame-width;
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
@mixin extjs-messagebox {
|
||||
.#{$prefix}message-box .#{$prefix}window-body {
|
||||
background-color: $window-background-color;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.#{$prefix}message-box .ext-mb-textarea {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.#{$prefix}message-box .#{$prefix}progress-wrap {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.#{$prefix}message-box .ext-mb-icon {
|
||||
width: 47px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.#{$prefix}message-box .ext-mb-info,
|
||||
.#{$prefix}message-box .ext-mb-warning,
|
||||
.#{$prefix}message-box .ext-mb-question,
|
||||
.#{$prefix}message-box .ext-mb-error {
|
||||
background: transparent no-repeat top left;
|
||||
}
|
||||
|
||||
.ext-gecko2 .ext-mb-fix-cursor {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.#{$prefix}message-box .#{$prefix}msg-box-wait {
|
||||
@include theme-background-image($theme-name, 'shared/blue-loading.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}message-box .ext-mb-info {
|
||||
@include theme-background-image($theme-name, 'shared/icon-info.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}message-box .ext-mb-warning {
|
||||
@include theme-background-image($theme-name, 'shared/icon-warning.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}message-box .ext-mb-question {
|
||||
@include theme-background-image($theme-name, 'shared/icon-question.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}message-box .ext-mb-error {
|
||||
@include theme-background-image($theme-name, 'shared/icon-error.gif');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
@mixin extjs-resizable {
|
||||
.#{$prefix}resizable-handle {
|
||||
position: absolute;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
font-size: 1px;
|
||||
line-height: 6px;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
zoom: 1;
|
||||
|
||||
@include opacity(0);
|
||||
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-east {
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-over {
|
||||
.#{$prefix}resizable-handle-east {
|
||||
cursor: e-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-south {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-over {
|
||||
.#{$prefix}resizable-handle-south {
|
||||
cursor: s-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-west {
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-over {
|
||||
.#{$prefix}resizable-handle-west {
|
||||
cursor: w-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-north {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-over {
|
||||
.#{$prefix}resizable-handle-north {
|
||||
cursor: n-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-southeast {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-over {
|
||||
.#{$prefix}resizable-handle-southeast {
|
||||
cursor: se-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-northwest {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-over {
|
||||
.#{$prefix}resizable-handle-northwest {
|
||||
cursor: nw-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-northeast {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-over {
|
||||
.#{$prefix}resizable-handle-northeast {
|
||||
cursor: ne-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-southwest {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-over {
|
||||
.#{$prefix}resizable-handle-southwest {
|
||||
cursor: sw-resize;
|
||||
}
|
||||
}
|
||||
|
||||
/*IE rounding error*/
|
||||
.#{$prefix}ie {
|
||||
.#{$prefix}resizable-handle-east {
|
||||
margin-right: -1px; /*IE rounding error*/
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-south {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-over .#{$prefix}resizable-handle, .#{$prefix}resizable-pinned .#{$prefix}resizable-handle{
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
.#{$prefix}window .#{$prefix}window-handle {
|
||||
@include opacity(0);
|
||||
}
|
||||
|
||||
.#{$prefix}window-collapsed .#{$prefix}window-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-proxy {
|
||||
border: 1px dashed #3b5a82;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
z-index: 50000;
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: none;
|
||||
|
||||
z-index: 200000;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
@include opacity(0);
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-over,
|
||||
.#{$prefix}resizable-pinned {
|
||||
.#{$prefix}resizable-handle-east,
|
||||
.#{$prefix}resizable-handle-west {
|
||||
background-position: left;
|
||||
@include theme-background-image($theme-name, 'sizer/e-handle.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-south,
|
||||
.#{$prefix}resizable-handle-north {
|
||||
background-position: top;
|
||||
@include theme-background-image($theme-name, 'sizer/s-handle.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-southeast {
|
||||
background-position: top left;
|
||||
@include theme-background-image($theme-name, 'sizer/se-handle.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-northwest {
|
||||
background-position: bottom right;
|
||||
@include theme-background-image($theme-name, 'sizer/nw-handle.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-northeast {
|
||||
background-position: bottom left;
|
||||
@include theme-background-image($theme-name, 'sizer/ne-handle.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}resizable-handle-southwest {
|
||||
background-position: top right;
|
||||
@include theme-background-image($theme-name, 'sizer/sw-handle.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
@mixin extjs-scroller {
|
||||
.#{$prefix}horizontal-scroller-present .#{$prefix}grid-body {
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
|
||||
.#{$prefix}vertical-scroller-present .#{$prefix}grid-body {
|
||||
border-right-width: 0px;
|
||||
}
|
||||
|
||||
.#{$prefix}scroller {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.#{$prefix}scroller-vertical {
|
||||
border: 1px solid $panel-border-color;
|
||||
border-top-color: $grid-header-background-color;
|
||||
}
|
||||
|
||||
.#{$prefix}scroller-horizontal {
|
||||
border: 1px solid $panel-border-color;
|
||||
}
|
||||
|
||||
.#{$prefix}vertical-scroller-present .#{$prefix}scroller-horizontal {
|
||||
border-right-width: 0px;
|
||||
}
|
||||
|
||||
.#{$prefix}scroller-ct {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
|
||||
/*
|
||||
In IE9 (only), the border-box style causes the scroller-ct to be 0px in the
|
||||
perpendicular dimension and breaks the scroll as well as offsets it by the left
|
||||
offset that we use to try and keep some size on this element. This works on all
|
||||
browsers (including IE9).
|
||||
*/
|
||||
box-sizing: content-box !important;
|
||||
-ms-box-sizing: content-box !important;
|
||||
-moz-box-sizing: content-box !important;
|
||||
-webkit-box-sizing: content-box !important;
|
||||
}
|
||||
|
||||
.#{$prefix}scroller-vertical .#{$prefix}scroller-ct {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.#{$prefix}scroller-horizontal .#{$prefix}scroller-ct {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
@mixin extjs-splitter {
|
||||
.#{$prefix}splitter {
|
||||
.#{$prefix}collapse-el {
|
||||
position: absolute;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}layout-split-left,
|
||||
.#{$prefix}layout-split-right {
|
||||
top: 50%;
|
||||
|
||||
margin-top: -17px;
|
||||
|
||||
width: 5px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.#{$prefix}layout-split-top,
|
||||
.#{$prefix}layout-split-bottom {
|
||||
left: 50%;
|
||||
|
||||
width: 35px;
|
||||
height: 5px;
|
||||
|
||||
margin-left: -17px;
|
||||
}
|
||||
|
||||
.#{$prefix}layout-split-left {
|
||||
background: no-repeat top right;
|
||||
@include theme-background-image($theme-name, 'util/splitter/mini-left.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}layout-split-right {
|
||||
background: no-repeat top left;
|
||||
@include theme-background-image($theme-name, 'util/splitter/mini-right.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}layout-split-top {
|
||||
background: no-repeat top left;
|
||||
@include theme-background-image($theme-name, 'util/splitter/mini-top.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}layout-split-bottom {
|
||||
background: no-repeat top left;
|
||||
@include theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}splitter-collapsed {
|
||||
.#{$prefix}layout-split-left {
|
||||
background: no-repeat top left;
|
||||
@include theme-background-image($theme-name, 'util/splitter/mini-right.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}layout-split-right {
|
||||
background: no-repeat top right;
|
||||
@include theme-background-image($theme-name, 'util/splitter/mini-left.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}layout-split-top {
|
||||
background: no-repeat top left;
|
||||
@include theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}layout-split-bottom {
|
||||
background: no-repeat top left;
|
||||
@include theme-background-image($theme-name, 'util/splitter/mini-top.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}splitter-horizontal {
|
||||
cursor: e-resize;
|
||||
cursor: row-resize;
|
||||
font-size:1px;
|
||||
}
|
||||
.#{$prefix}splitter-vertical {
|
||||
cursor: e-resize;
|
||||
cursor: col-resize;
|
||||
font-size:1px;
|
||||
}
|
||||
.#{$prefix}splitter-collapsed {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.#{$prefix}splitter-active {
|
||||
z-index: 4;
|
||||
font-size:1px;
|
||||
background-color: rgb(180, 180, 180);
|
||||
@include opacity(0.8);
|
||||
}
|
||||
.#{$prefix}splitter-active {
|
||||
.#{$prefix}collapse-el {
|
||||
@include opacity(0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}proxy-el {
|
||||
position: absolute;
|
||||
background: rgb(180, 180, 180);
|
||||
@include opacity(0.8);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,295 @@
|
|||
@mixin extjs-tool {
|
||||
.#{$prefix}tool {
|
||||
height: $tool-size;
|
||||
|
||||
img {
|
||||
overflow: hidden;
|
||||
|
||||
width: $tool-size;
|
||||
height: $tool-size;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
@include theme-background-image($theme-name, 'tools/tool-sprites.gif');
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-horizontal,
|
||||
.#{$prefix}window-header-horizontal {
|
||||
.#{$prefix}tool {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-vertical,
|
||||
.#{$prefix}window-header-vertical {
|
||||
.#{$prefix}tool {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tool-placeholder {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-toggle {
|
||||
background-position: 0 -60px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-over {
|
||||
.#{$prefix}tool-toggle {
|
||||
background-position: -15px -60px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}panel-collapsed,
|
||||
.#{$prefix}fieldset-collapsed {
|
||||
.#{$prefix}tool-toggle {
|
||||
background-position: 0 -75px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-over {
|
||||
.#{$prefix}tool-toggle {
|
||||
background-position: -15px -75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tool-close {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-minimize {
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-maximize {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-restore {
|
||||
background-position: 0 -45px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-gear {
|
||||
background-position: 0 -90px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-prev {
|
||||
background-position: 0 -105px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-next {
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-pin {
|
||||
background-position: 0 -135px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-unpin {
|
||||
background-position: 0 -150px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-right {
|
||||
background-position: 0 -165px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-left {
|
||||
background-position: 0 -180px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-help {
|
||||
background-position: 0 -300px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-save {
|
||||
background-position: 0 -285px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-search {
|
||||
background-position: 0 -270px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-minus {
|
||||
background-position: 0 -255px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-plus {
|
||||
background-position: 0 -240px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-refresh {
|
||||
background-position: 0 -225px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-up {
|
||||
background-position: 0 -210px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-down {
|
||||
background-position: 0 -195px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-move {
|
||||
background-position: 0 -375px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-resize {
|
||||
background-position: 0 -360px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-collapse {
|
||||
background-position: 0 -345px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-expand {
|
||||
background-position: 0 -330px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-print {
|
||||
background-position: 0 -315px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-expand-bottom,
|
||||
.#{$prefix}tool-collapse-bottom {
|
||||
background-position: 0 -195px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-expand-top,
|
||||
.#{$prefix}tool-collapse-top {
|
||||
background-position: 0 -210px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-expand-left,
|
||||
.#{$prefix}tool-collapse-left {
|
||||
background-position: 0 -180px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-expand-right,
|
||||
.#{$prefix}tool-collapse-right {
|
||||
background-position: 0 -165px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-over {
|
||||
.#{$prefix}tool-close {
|
||||
background-position: -15px 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-minimize {
|
||||
background-position: -15px -15px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-maximize {
|
||||
background-position: -15px -30px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-restore {
|
||||
background-position: -15px -45px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-gear {
|
||||
background-position: -15px -90px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-prev {
|
||||
background-position: -15px -105px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-next {
|
||||
background-position: -15px -120px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-pin {
|
||||
background-position: -15px -135px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-unpin {
|
||||
background-position: -15px -150px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-right {
|
||||
background-position: -15px -165px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-left {
|
||||
background-position: -15px -180px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-down {
|
||||
background-position: -15px -195px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-up {
|
||||
background-position: -15px -210px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-refresh {
|
||||
background-position: -15px -225px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-plus {
|
||||
background-position: -15px -240px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-minus {
|
||||
background-position: -15px -255px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-search {
|
||||
background-position: -15px -270px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-save {
|
||||
background-position: -15px -285px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-help {
|
||||
background-position: -15px -300px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-print {
|
||||
background-position: -15px -315px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-expand {
|
||||
background-position: -15px -330px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-collapse {
|
||||
background-position: -15px -345px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-resize {
|
||||
background-position: -15px -360px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-move {
|
||||
background-position: -15px -375px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-expand-bottom,
|
||||
.#{$prefix}tool-collapse-bottom {
|
||||
background-position: -15px -195px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-expand-top,
|
||||
.#{$prefix}tool-collapse-top {
|
||||
background-position: -15px -210px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-expand-left,
|
||||
.#{$prefix}tool-collapse-left {
|
||||
background-position: -15px -180px;
|
||||
}
|
||||
|
||||
.#{$prefix}tool-expand-right,
|
||||
.#{$prefix}tool-collapse-right {
|
||||
background-position: -15px -165px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
//background
|
||||
$boundlist-background-color: #fff !default;
|
||||
|
||||
//borders
|
||||
$boundlist-border-color: adjust-color($base-color, $hue: 0.58deg, $saturation: 25.146%, $lightness: -6.471%) !default;
|
||||
$boundlist-border-width: 1px !default;
|
||||
$boundlist-border-style: solid !default;
|
||||
|
||||
$boundlist-item-padding: 2px !default;
|
||||
$boundlist-item-border-width: 1px !default;
|
||||
$boundlist-item-border-style: dotted !default;
|
||||
$boundlist-item-border-color: $boundlist-background-color !default;
|
||||
|
||||
$boundlist-item-over-border-color: adjust-color($base-color, $hue: 6.952deg, $saturation: 5.848%, $lightness: -6.471%) !default;
|
||||
$boundlist-item-selected-border-color: darken($boundlist-item-over-border-color, 5) !default;
|
||||
|
||||
$boundlist-item-over-background-color: adjust-color($base-color, $hue: 3.188deg, $saturation: 0.542%, $lightness: 7.843%) !default;
|
||||
$boundlist-item-selected-background-color: darken($boundlist-item-over-background-color, 5) !default;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
$btn-group-background-color: #d0def0 !default;
|
||||
$btn-group-margin: 2px 0 !default;
|
||||
$btn-group-border-color: #b7c8d7 !default;
|
||||
$btn-group-border-radius: 2px !default;
|
||||
$btn-group-border-width: 1px !default;
|
||||
$btn-group-padding: 0 1px !default;
|
||||
|
||||
$btn-group-inner-border-width: 1px !default;
|
||||
$btn-group-inner-border-color: #e3ebf5 !default;
|
||||
|
||||
$btn-group-header-margin: 2px 2px 0 2px !default;
|
||||
$btn-group-header-font: normal ceil($font-size * .9) $font-family !default;
|
||||
$btn-group-header-color: #3E6AAA !default;
|
||||
$btn-group-header-padding: 1px 0 !default;
|
||||
$btn-group-header-background-color: #c2d8f0 !default;
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
$button-arrow-size: 12px !default;
|
||||
$button-split-size: 14px !default;
|
||||
$button-icon-spacing: 4px !default;
|
||||
|
||||
$button-small-border-radius: 3px !default;
|
||||
$button-small-border-width: 1px !default;
|
||||
$button-small-padding: 2px !default;
|
||||
$button-small-text-padding: 4px;
|
||||
$button-small-font-size: ceil($font-size * .9) !default; //11px
|
||||
$button-small-font-size-over: $button-small-font-size !default;
|
||||
$button-small-font-size-focus: $button-small-font-size-over;
|
||||
$button-small-font-size-pressed: $button-small-font-size !default;
|
||||
$button-small-font-size-disabled: $button-small-font-size !default;
|
||||
$button-small-font-weight: normal !default;
|
||||
$button-small-font-weight-over: $button-small-font-weight !default;
|
||||
$button-small-font-weight-focus: $button-small-font-weight-over;
|
||||
$button-small-font-weight-pressed: $button-small-font-weight !default;
|
||||
$button-small-font-weight-disabled: $button-small-font-weight !default;
|
||||
$button-small-font-family: $font-family !default;
|
||||
$button-small-font-family-over: $button-small-font-family !default;
|
||||
$button-small-font-family-focus: $button-small-font-family-over;
|
||||
$button-small-font-family-pressed: $button-small-font-family !default;
|
||||
$button-small-font-family-disabled: $button-small-font-family !default;
|
||||
$button-small-icon-size: 16px !default;
|
||||
|
||||
$button-medium-border-radius: 3px !default;
|
||||
$button-medium-border-width: 1px !default;
|
||||
$button-medium-padding: 3px !default;
|
||||
$button-medium-text-padding: 3px;
|
||||
$button-medium-font-size: ceil($font-size * .9) !default; //11px
|
||||
$button-medium-font-size-over: $button-medium-font-size !default;
|
||||
$button-medium-font-size-focus: $button-medium-font-size-over;
|
||||
$button-medium-font-size-pressed: $button-medium-font-size !default;
|
||||
$button-medium-font-size-disabled: $button-medium-font-size !default;
|
||||
$button-medium-font-weight: normal !default;
|
||||
$button-medium-font-weight-over: $button-medium-font-weight !default;
|
||||
$button-medium-font-weight-focus: $button-medium-font-weight-over;
|
||||
$button-medium-font-weight-pressed: $button-medium-font-weight !default;
|
||||
$button-medium-font-weight-disabled: $button-medium-font-weight !default;
|
||||
$button-medium-font-family: $font-family !default;
|
||||
$button-medium-font-family-over: $button-medium-font-family !default;
|
||||
$button-medium-font-family-focus: $button-medium-font-family-over;
|
||||
$button-medium-font-family-pressed: $button-medium-font-family !default;
|
||||
$button-medium-font-family-disabled: $button-medium-font-family !default;
|
||||
$button-medium-icon-size: 24px !default;
|
||||
|
||||
$button-large-border-radius: 3px !default;
|
||||
$button-large-border-width: 1px !default;
|
||||
$button-large-padding: 3px !default;
|
||||
$button-large-text-padding: 3px;
|
||||
$button-large-font-size: ceil($font-size * .9) !default; //11px
|
||||
$button-large-font-size-over: $button-large-font-size !default;
|
||||
$button-large-font-size-focus: $button-large-font-size-over;
|
||||
$button-large-font-size-pressed: $button-large-font-size !default;
|
||||
$button-large-font-size-disabled: $button-large-font-size !default;
|
||||
$button-large-font-weight: normal !default;
|
||||
$button-large-font-weight-over: $button-large-font-weight !default;
|
||||
$button-large-font-weight-focus: $button-large-font-weight-over;
|
||||
$button-large-font-weight-pressed: $button-large-font-weight !default;
|
||||
$button-large-font-weight-disabled: $button-large-font-weight !default;
|
||||
$button-large-font-family: $font-family !default;
|
||||
$button-large-font-family-over: $button-large-font-family !default;
|
||||
$button-large-font-family-focus: $button-large-font-family-over;
|
||||
$button-large-font-family-pressed: $button-large-font-family !default;
|
||||
$button-large-font-family-disabled: $button-large-font-family !default;
|
||||
$button-large-icon-size: 32px !default;
|
||||
|
||||
//base colors for the default button
|
||||
$button-default-base-color: adjust-color($neutral-color, $hue: 0deg, $saturation: -55.556%, $lightness: 12.745%) !default; //F7F7F7
|
||||
$button-default-base-color-over: adjust-color($base-color, $hue: -6.667deg, $saturation: 44.444%, $lightness: 10.588%) !default; //E4F3FF
|
||||
$button-default-base-color-focus: $button-default-base-color-over !default;
|
||||
$button-default-base-color-pressed: adjust-color($base-color, $hue: -0.725deg, $saturation: -9.556%, $lightness: -3.725%) !default; //B6CBE4
|
||||
$button-default-base-color-disabled: adjust-color($base-color, $hue: 0deg, $saturation: -55.556%, $lightness: 12.745%) !default; //F7F7F7
|
||||
|
||||
$button-default-border-color: adjust-color($button-default-base-color, $hue: 0deg, $saturation: 0%, $lightness: -18.039%) !default;
|
||||
$button-default-border-color-over: adjust-color($button-default-base-color-over, $hue: 8.177deg, $saturation: -28.283%, $lightness: -12.745%) !default;
|
||||
$button-default-border-color-focus: $button-default-border-color-over !default;
|
||||
$button-default-border-color-pressed: adjust-color($button-default-base-color-pressed, $hue: 2.317deg, $saturation: 6.756%, $lightness: -5.294%) !default;
|
||||
$button-default-border-color-disabled: adjust-color($button-default-base-color-disabled, $hue: 0deg, $saturation: 0%, $lightness: -8.627%) !default;
|
||||
|
||||
$button-default-background-color: $button-default-base-color !default;
|
||||
$button-default-background-color-over: $button-default-base-color-over !default;
|
||||
$button-default-background-color-focus: $button-default-background-color-over !default;
|
||||
$button-default-background-color-pressed: $button-default-base-color-pressed !default;
|
||||
$button-default-background-color-disabled: $button-default-base-color-disabled !default;
|
||||
|
||||
$button-default-background-gradient: 'glossy-button' !default;
|
||||
$button-default-background-gradient-over: 'glossy-button-over' !default;
|
||||
$button-default-background-gradient-focus: $button-default-background-gradient-over !default;
|
||||
$button-default-background-gradient-pressed: 'glossy-button-pressed' !default;
|
||||
$button-default-background-gradient-disabled: 'glossy-button-disabled' !default;
|
||||
|
||||
$button-default-background-gradient-color-stops: null !default;
|
||||
$button-default-background-gradient-color-stops-over: $button-default-background-gradient-color-stops !default;
|
||||
$button-default-background-gradient-color-stops-focus: $button-default-background-gradient-color-stops-over !default;
|
||||
$button-default-background-gradient-color-stops-pressed: $button-default-background-gradient-color-stops !default;
|
||||
$button-default-background-gradient-color-stops-disabled: $button-default-background-gradient-color-stops !default;
|
||||
|
||||
$button-default-color: #333 !default;
|
||||
$button-default-color-over: $button-default-color !default;
|
||||
$button-default-color-focus: $button-default-color-over !default;
|
||||
$button-default-color-pressed: $button-default-color !default;
|
||||
$button-default-color-disabled: lighten($button-default-color, 35) !default;
|
||||
|
||||
/**
|
||||
* Toolbar buttons
|
||||
*/
|
||||
$button-toolbar-arrow-size: 12px !default;
|
||||
$button-toolbar-split-size: 12px !default;
|
||||
|
||||
$button-toolbar-base-color: adjust-color($base-color, $hue: -213.333deg, $saturation: -55.556%, $lightness: 3.333%) !default;
|
||||
|
||||
$button-toolbar-border-color: transparent !default;
|
||||
$button-toolbar-border-color-over: adjust-color($base-color, $hue: 0.084deg, $saturation: -9.891%, $lightness: -18.039%) !default;
|
||||
$button-toolbar-border-color-focus: $button-toolbar-border-color-over;
|
||||
$button-toolbar-border-color-pressed: adjust-color($base-color, $hue: 0.721deg, $saturation: -17.014%, $lightness: -21.765%) !default;
|
||||
$button-toolbar-border-color-disabled: transparent !default;
|
||||
|
||||
$button-toolbar-background-color: transparent !default;
|
||||
$button-toolbar-background-color-over: adjust-color($base-color, $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-background-color-disabled: transparent !default;
|
||||
|
||||
$button-toolbar-background-gradient: null !default;
|
||||
$button-toolbar-background-gradient-over: 'glossy-button-over' !default;
|
||||
$button-toolbar-background-gradient-focus: $button-toolbar-background-gradient-over;
|
||||
$button-toolbar-background-gradient-pressed: 'glossy-button-pressed' !default;
|
||||
$button-toolbar-background-gradient-disabled: null !default;
|
||||
|
||||
$button-toolbar-background-gradient-color-stops: null !default;
|
||||
$button-toolbar-background-gradient-color-stops-over: null !default;
|
||||
$button-toolbar-background-gradient-color-stops-focus: $button-toolbar-background-gradient-color-stops-over;
|
||||
$button-toolbar-background-gradient-color-stops-pressed: null !default;
|
||||
$button-toolbar-background-gradient-color-stops-disabled: null !default;
|
||||
|
||||
$button-toolbar-color: #333 !default;
|
||||
$button-toolbar-color-over: $button-toolbar-color !default;
|
||||
$button-toolbar-color-focus: $button-toolbar-color-over;
|
||||
$button-toolbar-color-pressed: $button-toolbar-color !default;
|
||||
$button-toolbar-color-disabled: lighten($button-toolbar-color, 35) !default;
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
/**
|
||||
* @var {string} $prefix
|
||||
* The prefix to be applied to all CSS selectors. If this is changed, it must also be changed in your
|
||||
* JavaScript application.
|
||||
*/
|
||||
$prefix: 'x-' !default;
|
||||
|
||||
/**
|
||||
* @var {string} $theme-name
|
||||
* The name of the theme. This must match the the output directory of the images.
|
||||
* (defaults to 'default')
|
||||
*/
|
||||
$theme-name: 'default' !default;
|
||||
|
||||
/**
|
||||
* @var {boolean/string} $relative-image-path-for-uis
|
||||
* True to use a relative image path for all new UIs. If true, the path will be "../images/".
|
||||
* It can also be a string of the path value.
|
||||
* It defaults to false, which means it will look for the images in the ExtJS SDK folder.
|
||||
*/
|
||||
$relative-image-path-for-uis: false !default;
|
||||
|
||||
$color: #000 !default;
|
||||
|
||||
/**
|
||||
* @var {string} $font-family
|
||||
* The default font-family to be used throughout the theme.
|
||||
*/
|
||||
$font-family: tahoma,arial,verdana,sans-serif !default;
|
||||
|
||||
$font-size : 12px !default;
|
||||
|
||||
/**
|
||||
* @var {string} $base-gradient
|
||||
* The base gradient to be used throughout the theme.
|
||||
*/
|
||||
$base-gradient: 'matte' !default;
|
||||
|
||||
/**
|
||||
* @var {color} $base-color
|
||||
* The base color to be used throughout the theme.
|
||||
*/
|
||||
$base-color : #C0D4ED !default;
|
||||
$neutral-color: #eeeeee !default;
|
||||
|
||||
/**
|
||||
* @var {boolean} $include-not-found-images
|
||||
* True to include files which are not found when compiling your SASS
|
||||
*/
|
||||
$include-missing-images: false !default;
|
||||
|
||||
/**
|
||||
* @var {boolean} $include-ie
|
||||
* True to include Internet Explorer specific rules
|
||||
*/
|
||||
$include-ie: true !default;
|
||||
|
||||
/**
|
||||
* @var {boolean} $include-ff
|
||||
* True to include Firefox specific rules
|
||||
*/
|
||||
$include-ff: true !default;
|
||||
|
||||
/**
|
||||
* @var {boolean} $include-chrome
|
||||
* True to include Chrome specific rules
|
||||
*/
|
||||
$include-chrome: true !default;
|
||||
|
||||
/**
|
||||
* @var {boolean} $include-safari
|
||||
* True to include Safari specific rules
|
||||
*/
|
||||
$include-safari: true !default;
|
||||
|
||||
/**
|
||||
* @var {boolean} $include-opera
|
||||
* True to include Opera specific rules
|
||||
*/
|
||||
$include-opera: true !default;
|
||||
|
||||
/**
|
||||
* @var {boolean} $include-webkit
|
||||
* True to include Webkit specific rules
|
||||
*/
|
||||
$include-webkit: true !default;
|
||||
|
||||
$supports-border-radius: true !default;
|
||||
$supports-gradients: true !default;
|
||||
|
||||
/**
|
||||
* @var {boolean} $compile-all
|
||||
* True to copile all CSS, even if above include rules are false
|
||||
*/
|
||||
$compile-all: true !default;
|
||||
|
||||
/**
|
||||
* @var {boolean} $scope-reset-css
|
||||
* True to scope the reset CSS within the $prefix variable.
|
||||
*/
|
||||
$scope-reset-css: false !default;
|
||||
|
||||
/**
|
||||
* @var {color} $css-shadow-background-color
|
||||
* The base color for CSS shadows
|
||||
*/
|
||||
$css-shadow-background-color: #ccc !default;
|
||||
|
||||
|
||||
/**
|
||||
* @var {color} $include-shadow-images
|
||||
* True to include all shadow images.
|
||||
*/
|
||||
$include-shadow-images: true !default;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
$focus-frame-color: rgb(21, 66, 139);
|
||||
$focus-frame-style: solid;
|
||||
$focus-frame-width: 2px;
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
/**
|
||||
* @class Ext.form.*
|
||||
*/
|
||||
|
||||
/**
|
||||
* @class Ext.form.field.Base
|
||||
*/
|
||||
|
||||
$form-field-height: 22px !default;
|
||||
$form-toolbar-field-height: 20px !default;
|
||||
|
||||
//padding
|
||||
$form-field-padding: 1px 3px !default;
|
||||
|
||||
//fonts
|
||||
$form-field-font-size: $font-size !default;
|
||||
|
||||
$form-field-font-family: $font-family !default;
|
||||
$form-field-font-weight: normal !default;
|
||||
$form-field-font: $form-field-font-weight $form-field-font-size $form-field-font-family !default;
|
||||
$form-field-color: #000 !default;
|
||||
|
||||
$form-field-empty-color: gray !default;
|
||||
|
||||
//border
|
||||
$form-field-border-color: #B5B8C8 !default;
|
||||
$form-field-border-width: 1px !default;
|
||||
|
||||
$form-field-focus-border-color: adjust-color($base-color, $hue: -4.322deg, $saturation: -1.065%, $lightness: -16.863%) !default;
|
||||
$form-field-invalid-border-color: #c30 !default;
|
||||
|
||||
//background
|
||||
$form-field-background-color: #fff !default;
|
||||
$form-field-background-image: 'form/text-bg.gif' !default;
|
||||
|
||||
$form-field-invalid-background-color: #fff !default;
|
||||
$form-field-invalid-background-image: 'grid/invalid_line.gif' !default;
|
||||
$form-field-invalid-background-repeat: repeat-x !default;
|
||||
$form-field-invalid-background-position: bottom !default;
|
||||
|
||||
/**
|
||||
* @class Ext.form.field.TextArea
|
||||
*/
|
||||
$form-textarea-padding: 2px 3px !default;
|
||||
|
||||
/**
|
||||
* @class Ext.form.Label
|
||||
*/
|
||||
$form-label-font-weight: normal !default;
|
||||
$form-label-font-size: $font-size !default;
|
||||
$form-label-font-family: $font-family !default;
|
||||
$form-label-font: $form-label-font-weight $form-label-font-size $form-label-font-family !default;
|
||||
|
||||
/**
|
||||
* @class Ext.form.field.Checkbox
|
||||
*/
|
||||
$form-checkbox-image: 'form/checkbox.gif' !default;
|
||||
$form-checkbox-size: 13px !default;
|
||||
|
||||
/**
|
||||
* @class Ext.form.field.Radio
|
||||
*/
|
||||
$form-radio-image: 'form/radio.gif' !default;
|
||||
|
||||
|
||||
/**
|
||||
* Error messages
|
||||
*/
|
||||
//icons
|
||||
$form-exclamation-icon: 'form/exclamation.gif' !default;
|
||||
|
||||
//font
|
||||
$form-error-msg-color: #c0272b !default;
|
||||
$form-error-msg-font-weight: normal !default;
|
||||
$form-error-msg-font-size: ceil($font-size * .9) !default;
|
||||
$form-error-msg-font-family: $font-family !default;
|
||||
$form-error-msg-font: $form-error-msg-font-weight $form-error-msg-font-size $form-error-msg-font-family !default;
|
||||
$form-error-msg-line-height: 16px !default;
|
||||
|
||||
/**
|
||||
* Trigger Field
|
||||
*/
|
||||
$form-trigger-width: 17px !default;
|
||||
$form-trigger-height: $form-field-height !default;
|
||||
$form-toolbar-trigger-height: $form-toolbar-field-height !default;
|
||||
|
||||
$form-trigger-border-bottom-width: 1px !default;
|
||||
$form-trigger-border-bottom-style: solid !default;
|
||||
$form-trigger-border-bottom-color: $form-field-border-color !default;
|
||||
$form-trigger-border-bottom: $form-trigger-border-bottom-width $form-trigger-border-bottom-style $form-trigger-border-bottom-color !default;
|
||||
|
||||
$form-trigger-border-bottom-color-over: adjust-color($base-color, $hue: -4.322deg, $saturation: -1.065%, $lightness: -16.863%) !default;
|
||||
$form-trigger-border-bottom-color-focus: adjust-color($base-color, $hue: -4.322deg, $saturation: -1.065%, $lightness: -16.863%) !default;
|
||||
$form-trigger-border-bottom-color-focus-over: null !default;
|
||||
$form-trigger-border-bottom-color-pressed: null !default;
|
||||
|
||||
$form-trigger-icon-background-position: 7px 6px !default;
|
||||
|
||||
/**
|
||||
* Fieldsets
|
||||
*/
|
||||
$fieldset-header-font-size: ceil($font-size * .9) !default;
|
||||
$fieldset-header-font-weight: bold !default;
|
||||
$fieldset-header-font-family: $font-family !default;
|
||||
$fieldset-header-font: $fieldset-header-font-size $fieldset-header-font-weight $fieldset-header-font-family !default;
|
||||
$fieldset-header-color: adjust-color($base-color, $hue: 3.785deg, $saturation: 18.194%, $lightness: -52.745%) !default;
|
||||
|
||||
$fieldset-border-width: 1px !default;
|
||||
$fieldset-border-style: solid !default;
|
||||
$fieldset-border-color: $form-field-border-color !default;
|
||||
$fieldset-border: $fieldset-border-width $fieldset-border-style $fieldset-border-color !default;
|
||||
|
||||
$fieldset-padding: 10px !default;
|
||||
$fieldset-header-padding: 0 3px !default;
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
// ===============================
|
||||
// ========= GRID BASE ===========
|
||||
// ===============================
|
||||
$grid-base-color: $base-color !default;
|
||||
|
||||
// ===============================
|
||||
// ========= GRID HEADER =========
|
||||
// ===============================
|
||||
$grid-header-background-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: -16.078%) !default;
|
||||
$grid-header-background-gradient: 'grid-header' !default;
|
||||
$grid-header-border-color: $neutral-color !default;
|
||||
$grid-header-over-border-color: adjust-color(#C0D4ED, $hue: -0.175deg, $saturation: 25.296%, $lightness: -2.549%) !default;
|
||||
$grid-header-over-background-color: $grid-header-over-border-color !default;
|
||||
$grid-header-over-background-gradient: 'grid-header-over' !default;
|
||||
$grid-header-background-color: $grid-base-color !default;
|
||||
$grid-header-padding: 0px 6px !default;
|
||||
$grid-header-trigger-height: 22px !default;
|
||||
$grid-header-trigger-width: 14px !default;
|
||||
$grid-header-color: null !default;
|
||||
|
||||
// ===============================
|
||||
// ========= GRID ROWS ===========
|
||||
// ===============================
|
||||
$grid-row-cell-color: null !default;
|
||||
$grid-row-cell-font: normal ceil($font-size * .9) $font-family !default;
|
||||
$grid-row-padding: 0 1px !default;
|
||||
|
||||
//row wrap
|
||||
$grid-row-wrap-border-color: #ededed !default;
|
||||
$grid-row-wrap-border-width: 1px 0 !default;
|
||||
$grid-row-wrap-border-style: solid !default;
|
||||
|
||||
//row body
|
||||
$grid-row-body-font: normal 11px/13px $font-family !default;
|
||||
$grid-row-body-padding: 4px !default;
|
||||
|
||||
//row cell
|
||||
$grid-row-cell-background: #fff !default;
|
||||
$grid-row-cell-border-color: $grid-row-wrap-border-color !default;
|
||||
$grid-row-cell-border-style: solid !default;
|
||||
$grid-row-cell-border-width: 1px 0 !default;
|
||||
|
||||
//row cell alt
|
||||
$grid-row-cell-alt-background: darken($grid-row-cell-background, 2) !default;
|
||||
|
||||
//row cell over
|
||||
$grid-row-cell-over-border-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: -6.667%) !default;
|
||||
$grid-row-cell-over-background-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: 0.392%) !default;
|
||||
$grid-row-cell-over-background-gradient: 'grid-row-over' !default;
|
||||
|
||||
//row cell selected
|
||||
$grid-row-cell-selected-border-style: dotted !default;
|
||||
$grid-row-cell-selected-border-color: adjust-color($base-color, $hue: 6.952deg, $saturation: 5.848%, $lightness: -6.471%) !default;
|
||||
$grid-row-cell-selected-background-color: adjust-color($base-color, $hue: 3.188deg, $saturation: 0.542%, $lightness: 7.843%) !default;
|
||||
|
||||
//row cell focus
|
||||
$grid-row-cell-focus-border-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: -6.667%) !default;
|
||||
$grid-row-cell-focus-background-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: 0.392%) !default;
|
||||
$grid-row-cell-focus-background-gradient: 'grid-row-over' !default;
|
||||
|
||||
//standard cells
|
||||
$grid-cell-font: normal 13px $font-family !default;
|
||||
$grid-cell-inner-padding: 3px 6px !default;
|
||||
|
||||
//special cell
|
||||
$grid-cell-special-over-background-color: adjust-color($base-color, $hue: -0.476deg, $saturation: 25.214%, $lightness: 5.686%) !default;
|
||||
|
||||
//cell with col lines
|
||||
$grid-cell-with-col-lines-border-color: adjust-color($base-color, $hue: 0deg, $saturation: -55.556%, $lightness: -2.549%) !default;
|
||||
|
||||
// ===============================
|
||||
// ======== GROUPED GRID =========
|
||||
// ===============================
|
||||
$grid-grouped-header-background-color: #fff;
|
||||
$grid-grouped-header-border-width: 0 0 2px 0;
|
||||
$grid-grouped-header-border-style: solid;
|
||||
$grid-grouped-header-border-color: adjust-color($base-color, $hue: 0.844deg, $saturation: 7.644%, $lightness: -8.627%);
|
||||
$grid-grouped-header-padding: 6px 0 0 0;
|
||||
|
||||
$grid-grouped-title-color: adjust-color($base-color, $hue: 0.952deg, $saturation: -6.718%, $lightness: -41.961%);
|
||||
$grid-grouped-title-font: bold ceil($font-size * .9) $font-family;
|
||||
$grid-grouped-title-padding: 4px 4px 4px 17px;
|
||||
|
||||
// ===============================
|
||||
// ========= ROW EDITOR ==========
|
||||
// ===============================
|
||||
$grid-row-editor-background-color: adjust-color($base-color, $hue: 1deg, $saturation: 11%, $lightness: 11%) !default;
|
||||
$grid-row-editor-border-color: $panel-border-color !default;
|
||||
$grid-row-editor-border-width: 1px !default;
|
||||
$grid-row-editor-border: $grid-row-editor-border-width solid $grid-row-editor-border-color !important;
|
||||
$grid-row-editor-font: $grid-row-cell-font !important;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
$html-editor-border-color: $form-field-border-color !default;
|
||||
$html-editor-background-color: $form-field-background-color !default;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
$border-layout-ct-background: adjust-color($base-color, $hue: 3.188deg, $saturation: 0.542%, $lightness: 7.843%) !default;
|
||||
|
||||
$accordion-header-color: #000 !default;
|
||||
$accordion-header-background-color: #d9e7f8 !default;
|
||||
$accordion-header-background-gradient: null !default;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
$loadmask-opacity: 0.5 !default;
|
||||
$loadmask-backgorund: #ccc !default;
|
||||
|
||||
$loadmask-msg-padding: 2px !default;
|
||||
$loadmask-msg-border-color: $panel-header-border-color !default;
|
||||
$loadmask-msg-background-color: $panel-base-color !default;
|
||||
$loadmask-msg-background-gradient: null !default;
|
||||
|
||||
$loadmask-msg-inner-padding: 5px 10px 5px 25px !default;
|
||||
$loadmask-msg-inner-icon: 'grid/loading.gif' !default;
|
||||
$loadmask-msg-inner-border-color: adjust-color($base-color, $hue: 1.111deg, $saturation: -14.017%, $lightness: -9.608%) !default;
|
||||
$loadmask-msg-inner-background-color: #eee !default;
|
||||
$loadmask-msg-inner-color: #222 !default;
|
||||
$loadmask-msg-inner-font-size: ceil($font-size * .9) !default; //11px
|
||||
$loadmask-msg-inner-font-weight: normal !default;
|
||||
$loadmask-msg-inner-font-family: $font-family !default;
|
||||
$loadmask-msg-inner-font: $loadmask-msg-inner-font-weight $loadmask-msg-inner-font-size $loadmask-msg-inner-font-family !default;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
//backgrounds
|
||||
$menu-background-color: #F0F0F0 !default;
|
||||
$menu-item-active-background-image: 'menu/menu-item-active-bg.gif';
|
||||
$menu-item-active-background-color: #D9E8FB !default;
|
||||
|
||||
//border
|
||||
$menu-item-active-border-color: #A9CBF5 !default;
|
||||
$menu-separator-border-color: #E0E0E0 !default;
|
||||
$menu-separator-background-color: #FFF !default;
|
||||
|
||||
//sizes
|
||||
$menu-item-indent: 27px !default;
|
||||
$menu-padding: 2px !default;
|
||||
|
||||
//text
|
||||
$menu-text-color: #222 !default;
|
||||
|
||||
//icons
|
||||
$menu-icon-arrow: 'menu/menu-parent.gif';
|
||||
$menu-icon-checked: 'menu/checked.gif';
|
||||
$menu-icon-group-checked: 'menu/group-checked.gif';
|
||||
$menu-icon-unchecked: 'menu/unchecked.gif';
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
// TODO: Change value to $include-default-uis !default;
|
||||
$include-panel-uis: true;
|
||||
|
||||
// ===============================
|
||||
// ========= BASE PANEL ==========
|
||||
// ===============================
|
||||
$panel-border-radius: null !default;
|
||||
$panel-border-width: 1px !default;
|
||||
$panel-base-color: adjust-color($base-color, $hue: 0deg, $saturation: 0.542%, $lightness: 7.843%) !default; //#DFE8F6
|
||||
$panel-border-color: adjust-color($base-color, $hue: 0deg, $saturation: 7.644%, $lightness: -8.627%) !default;
|
||||
|
||||
// ===============================
|
||||
// ========= PANEL BODY ==========
|
||||
// ===============================
|
||||
$panel-body-border-style: solid !default;
|
||||
$panel-body-background-color: #fff !default;
|
||||
$panel-body-color: #000 !default;
|
||||
$panel-body-border-color: $panel-border-color !default;
|
||||
$panel-body-font-size: 12px !default;
|
||||
|
||||
// ===============================
|
||||
// ======== PANEL TOOLS ==========
|
||||
// ===============================
|
||||
$tool-size: 15px !default;
|
||||
|
||||
// ===============================
|
||||
// ======== PANEL HEADER =========
|
||||
// ===============================
|
||||
$panel-header-border-width: 1px !default;
|
||||
$panel-header-border-style: solid !default;
|
||||
$panel-header-inner-border: true !default;
|
||||
$panel-header-inner-border-width: 1px 0 0 !default;
|
||||
|
||||
//padding
|
||||
$panel-header-padding: 5px 4px 4px 5px !default;
|
||||
|
||||
//fonts
|
||||
$panel-header-font-size: ceil($font-size * .9) !default; //11px
|
||||
$panel-header-line-height: $tool-size !default;
|
||||
$panel-header-font-weight: bold !default;
|
||||
$panel-header-font-family: $font-family !default;
|
||||
|
||||
//background
|
||||
$panel-header-background-gradient: 'panel-header' !default;
|
||||
|
||||
// UI defaults
|
||||
$panel-header-border-color: $panel-border-color !default;
|
||||
$panel-header-inner-border-color: adjust-color($panel-base-color, $hue: 0deg, $saturation: -6.098%, $lightness: 4.902%) !default;
|
||||
$panel-header-color: adjust-color($panel-base-color, $hue: 0deg, $saturation: 38.347%, $lightness: -63.725%) !default;
|
||||
$panel-header-background-color: adjust-color($panel-base-color, $hue: 0deg, $saturation: 6.402%, $lightness: -4.51%) !default;
|
||||
|
||||
// ===============================
|
||||
// ======== FRAMED PANEL =========
|
||||
// ===============================
|
||||
$frame-base-color: $panel-base-color !default;
|
||||
|
||||
//border
|
||||
$panel-frame-border-radius: 4px !default;
|
||||
$panel-frame-border-width: 1px !default;
|
||||
$panel-frame-border-style: solid !default;
|
||||
$panel-frame-padding: 4px !default;
|
||||
|
||||
// UI defaults
|
||||
$panel-frame-background-color: $frame-base-color !default;
|
||||
$panel-frame-border-color: $panel-border-color !default;
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
// color picker
|
||||
$colorpicker-item-border-color: #aca899 !default;
|
||||
$colorpicker-over-border-color: #8bb8f3 !default;
|
||||
$colorpicker-over-background-color: #deecfd !default;
|
||||
|
||||
// date picker
|
||||
$datepicker-base-color: $base-color !default;
|
||||
|
||||
$datepicker-border-color: adjust-color($datepicker-base-color, $hue: 5.926deg, $saturation: 4.444%, $lightness: -57.647%) !default; //#1b376c
|
||||
$datepicker-border-width: 1px !default;
|
||||
$datepicker-border-style: solid !default;
|
||||
$datepicker-border: $datepicker-border-width $datepicker-border-style $datepicker-border-color !default;
|
||||
$datepicker-background-color: #ffffff !default;
|
||||
|
||||
$datepicker-next-image: 'shared/right-btn.gif' !default;
|
||||
$datepicker-prev-image: 'shared/left-btn.gif' !default;
|
||||
$datepicker-month-arrow-image: 'button/s-arrow-light.gif' !default;
|
||||
$datepicker-tool-sprite-image: 'tools/tool-sprites.gif' !default;
|
||||
|
||||
$datepicker-header-background-color: adjust-color($datepicker-base-color, $hue: 5.768deg, $saturation: 0.419%, $lightness: -52.941%) !default; //#23427c
|
||||
$datepicker-header-background-gradient: matte !default;
|
||||
|
||||
$datepicker-monthpicker-color: #fff !default;
|
||||
|
||||
$datepicker-th-color: adjust-color($datepicker-base-color, $hue: 5.586deg, $saturation: -4.167%, $lightness: -55.882%) !default; //#233d6d
|
||||
$datepicker-th-font-family: $font-family !default;
|
||||
$datepicker-th-font-size: 10px !default;
|
||||
$datepicker-th-font-weight: normal !default;
|
||||
$datepicker-th-font: $datepicker-th-font-weight $datepicker-th-font-size $font-family !default;
|
||||
$datepicker-th-background-color: adjust-color($datepicker-base-color, $hue: -1.19deg, $saturation: 22.222%, $lightness: 8.824%) !default; //#dfecfb
|
||||
$datepicker-th-background-gradient: matte !default;
|
||||
$datepicker-th-border-bottom-color: darken($datepicker-th-background-color, 10) !default;
|
||||
$datepicker-th-text-align: right !default;
|
||||
|
||||
$datepicker-td-height: 17px !default;
|
||||
|
||||
//item
|
||||
$datepicker-item-color: #000 !default;
|
||||
$datepicker-item-border-width: 1px !default;
|
||||
$datepicker-item-border-style: solid !default;
|
||||
$datepicker-item-border-color: #fff !default;
|
||||
$datepicker-item-border: $datepicker-item-border-width $datepicker-item-border-style $datepicker-item-border-color !default;
|
||||
|
||||
$datepicker-item-hover-background-color: adjust-color($datepicker-base-color, $hue: -0.606deg, $saturation: 38.73%, $lightness: 9.02%) !default; //#ddecfe
|
||||
|
||||
$datepicker-today-item-border-color: darkred !default;
|
||||
|
||||
$datepicker-selected-item-border-width: 1px !default;
|
||||
$datepicker-selected-item-border-style: solid !default;
|
||||
$datepicker-selected-item-border-color: adjust-color($datepicker-base-color, $hue: 0.853deg, $saturation: 5.008%, $lightness: -11.961%) !default; //#8db2e3
|
||||
$datepicker-selected-item-border: $datepicker-selected-item-border-width $datepicker-selected-item-border-style $datepicker-selected-item-border-color !default;
|
||||
$datepicker-selected-item-background-color: adjust-color($datepicker-base-color, $hue: 0.267deg, $saturation: -4.535%, $lightness: 6.275%) !default;
|
||||
|
||||
$datepicker-footer-background-color: $datepicker-th-background-color !default;
|
||||
$datepicker-footer-background-gradient: color_stops(adjust-color($datepicker-base-color, $hue: 0.58deg, $saturation: -2.067%, $lightness: 7.451%), adjust-color($datepicker-base-color, $hue: -0.43deg, $saturation: -4.736%, $lightness: 3.922%) 49%, adjust-color($datepicker-base-color, $hue: -0.175deg, $saturation: -4.204%, $lightness: 1.373%) 51%, adjust-color($datepicker-base-color, $hue: 0.952deg, $saturation: -4.831%, $lightness: 2.353%)) !default;
|
||||
$datepicker-footer-border-top-color: $datepicker-th-border-bottom-color !default; //a3bad9
|
||||
|
||||
$datepicker-monthpicker-height: 167px !default;
|
||||
|
||||
$datepicker-monthpicker-item-color: adjust-color($datepicker-base-color, $hue: 3.785deg, $saturation: 18.194%, $lightness: -52.745%) !default; //#15428B
|
||||
$datepicker-monthpicker-item-border: $datepicker-item-border !default;
|
||||
|
||||
$datepicker-monthpicker-item-hover-background-color: $datepicker-item-hover-background-color !default;
|
||||
|
||||
$datepicker-monthpicker-item-selected-background-color: $datepicker-footer-background-color !default;
|
||||
$datepicker-monthpicker-item-selected-border: $datepicker-selected-item-border !default;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
$progress-bar-base-color: $base-color !default;
|
||||
|
||||
$progress-height: 20px !default;
|
||||
|
||||
//borders
|
||||
$progress-border-color: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: -3.08%, $lightness: -23.725%) !default;
|
||||
$progress-border-width: 1px !default;
|
||||
$progress-border-radius: 0 !default;
|
||||
|
||||
//backgrounds
|
||||
$progress-background-color: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: -11.37%, $lightness: 7.451%) !default;
|
||||
|
||||
//bar
|
||||
$progress-bar-background-color: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: 8.187%, $lightness: -17.647%) !default;
|
||||
|
||||
//text
|
||||
$progress-text-color-front: #fff !default;
|
||||
$progress-text-color-back: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: -10.895%, $lightness: -43.725%) !default;
|
||||
$progress-text-text-align: center !default;
|
||||
$progress-text-font-size: ceil($font-size * .9) !default;
|
||||
$progress-text-font-weight: bold !default;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
$tip-base-color: adjust-color($base-color, $hue: 2.121deg, $saturation: 44.444%, $lightness: 11.569%) !default;
|
||||
|
||||
//background
|
||||
$tip-background-color: $tip-base-color !default;
|
||||
$tip-background-gradient: null !default;
|
||||
|
||||
//text
|
||||
$tip-body-color : adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: -66.667%) !default;
|
||||
$tip-body-font-size : ceil($font-size * .9) !default;
|
||||
$tip-body-font-weight: normal !default;
|
||||
$tip-body-padding: 3px !default;
|
||||
$tip-body-link-color: darken($tip-body-color, 10%) !default;
|
||||
|
||||
$tip-header-color : $tip-body-color !default;
|
||||
$tip-header-font-size : $tip-body-font-size !default;
|
||||
$tip-header-font-weight: bold !default;
|
||||
$tip-header-padding : 3px 3px 0 !default;
|
||||
|
||||
//borders
|
||||
$tip-border-color: adjust-color($tip-base-color, $hue: -1.705deg, $saturation: -60.494%, $lightness: -27.451%) !default;
|
||||
$tip-border-width: 1px !default;
|
||||
$tip-border-radius: 3px !default;
|
||||
|
||||
//error tips
|
||||
$tip-error-inner-border-color: #d87166 !default;
|
||||
$tip-error-border-color: #a1311f !default;
|
||||
$tip-error-border-radius: 5px !default;
|
||||
$tip-error-border-width: 1px !default;
|
||||
$tip-error-background-color: #fff !default;
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
//color
|
||||
$tabbar-base-color: adjust-color($panel-base-color, $hue: 0deg, $saturation: -3.156%, $lightness: -5.294%) !default;
|
||||
$tabbar-background-gradient: 'tabbar' !default;
|
||||
|
||||
//background
|
||||
$tab-base-color: adjust-color($base-color, $hue: 0deg, $saturation: 33.016%, $lightness: 9.02%) !default; //#deecfd
|
||||
$tab-base-color-over: adjust-color($tab-base-color, $hue: 0deg, $saturation: 11.429%, $lightness: 2.353%) !default;
|
||||
$tab-base-color-active: $tab-base-color !default;
|
||||
$tab-base-color-disabled: adjust-color($base-color, $hue: 0deg, $saturation: 15.873%, $lightness: 9.02%) !default; //E1ECFA
|
||||
|
||||
$tab-background: $tab-base-color !default;
|
||||
$tab-background-over: $tab-base-color-over !default;
|
||||
$tab-background-active: $tab-base-color-active !default;
|
||||
$tab-background-disabled: $tab-base-color-disabled !default;
|
||||
|
||||
$tab-color: adjust-color($tab-base-color, $hue: 0deg, $saturation: -45.589%, $lightness: -48.431%) !default;
|
||||
$tab-color-over: $tab-color !default;
|
||||
$tab-color-active: adjust-color($tab-color, $hue: 0deg, $saturation: 30.768%, $lightness: -13.333%) !default;
|
||||
$tab-color-disabled: #c3b3b3 !default;
|
||||
|
||||
$tab-font-size: ceil($font-size * .9) !default; //11px
|
||||
$tab-font-size-over: $tab-font-size !default;
|
||||
$tab-font-size-active: $tab-font-size !default;
|
||||
$tab-font-size-disabled: $tab-font-size !default;
|
||||
|
||||
$tab-font-family: $font-family;
|
||||
$tab-font-family-over: $tab-font-family;
|
||||
$tab-font-family-active: $tab-font-family;
|
||||
$tab-font-family-disabled: $tab-font-family;
|
||||
|
||||
$tab-font-weight: bold !default;
|
||||
$tab-font-weight-over: $tab-font-weight !default;
|
||||
$tab-font-weight-active: $tab-font-weight !default;
|
||||
$tab-font-weight-disabled: $tab-font-weight !default;
|
||||
|
||||
$tab-background-gradient: 'tab' !default;
|
||||
$tab-background-gradient-over: 'tab-over' !default;
|
||||
$tab-background-gradient-active: 'tab-active' !default;
|
||||
$tab-background-gradient-disabled: 'tab-disabled' !default;
|
||||
|
||||
//borders
|
||||
$tab-inner-border: true !default;
|
||||
|
||||
$tab-top-border-radius: 4px 4px 0 0 !default;
|
||||
$tab-top-border-width: 1px 1px 0 1px !default;
|
||||
$tab-top-inner-border-width: 1px 1px 0 !default;
|
||||
|
||||
$tab-bottom-border-radius: 0 0 4px 4px !default;
|
||||
$tab-bottom-border-width: 0 1px 1px 1px !default;
|
||||
$tab-bottom-inner-border-width: 0 1px 1px 1px !default;
|
||||
|
||||
$tab-border-color: adjust-color($tab-base-color, $hue:0deg, $saturation: -28.008%, $lightness: -20.98%) !default;
|
||||
$tab-border-color-over: $tab-border-color !default;
|
||||
$tab-border-color-active: $tab-border-color !default;
|
||||
$tab-border-color-disabled: adjust-color($base-color, $hue:0deg, $saturation: 6.349%, $lightness: -0.588%) !default;
|
||||
|
||||
$tab-inner-border-color: adjust-color($tab-base-color, $hue: 0deg, $saturation: -8.571%, $lightness: 8.941%) !default;
|
||||
|
||||
$tabbar-border-color: $panel-header-border-color !default;
|
||||
|
||||
//size
|
||||
$tab-height: 20px !default;
|
||||
$tab-spacing: 2px;
|
||||
|
||||
//tab bar body border and padding
|
||||
$tabbar-top-body-border-width: 1px 1px 0 !default;
|
||||
$tabbar-top-body-padding: 1px 0 3px !default;
|
||||
$tabbar-top-plain-body-border-width: 0 !default;
|
||||
$tabbar-top-plain-body-padding: 0 0 3px !default;
|
||||
$tabbar-bottom-body-border-width: 0 1px 1px !default;
|
||||
$tabbar-bottom-body-padding: 3px 0 1px !default;
|
||||
$tabbar-bottom-plain-body-border-width: 0 !default;
|
||||
$tabbar-bottom-plain-body-padding: 3px 0 0 !default;
|
||||
|
||||
//closable tab
|
||||
$tab-closable-icon: 'tab/tab-default-close.gif' !default;
|
||||
$tab-closable-icon-width: 11px !default;
|
||||
$tab-closable-icon-height: 11px !default;
|
||||
$tab-closable-icon-top: 3px !default;
|
||||
$tab-closable-icon-right: 3px !default;
|
||||
|
||||
//tab bar strip
|
||||
$tabbar-strip-height: 3px !default;
|
||||
$tabbar-strip-border-color: $panel-header-border-color !default;
|
||||
$tabbar-strip-background-color: $tab-base-color !default;
|
||||
$tabbar-top-strip-border-width: 1px 1px 0 !default;
|
||||
$tabbar-bottom-strip-border-width: 0 1px 1px !default;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
$toolbar-font-size: ceil($font-size * .9) !default;
|
||||
|
||||
$toolbar-background-color: adjust-color($base-color, $hue: -1.333deg, $saturation: -3.831%, $lightness: 4.51%) !default;
|
||||
$toolbar-background-gradient: color_stops(lighten($toolbar-background-color, 3), $toolbar-background-color) !default;
|
||||
$toolbar-inner-border-width: 1px 0px 0px !default;
|
||||
$toolbar-inner-border-color: lighten($toolbar-background-color, 5%) !default;
|
||||
|
||||
//margins
|
||||
$toolbar-horizontal-spacing: 2px;
|
||||
$toolbar-vertical-spacing: 2px;
|
||||
$toolbar-footer-horizontal-spacing: 6px;
|
||||
$toolbar-footer-vertical-spacing: 2px;
|
||||
|
||||
//border
|
||||
$toolbar-border-color: $panel-body-border-color !default;
|
||||
|
||||
//spacer
|
||||
$toolbar-spacer-width: 2px !default;
|
||||
|
||||
//separator
|
||||
$toolbar-separator-color: #98c8ff !default;
|
||||
$toolbar-separator-highlight-color: #fff !default;
|
||||
|
||||
//text
|
||||
$toolbar-text-font-family: $font-family;
|
||||
$toolbar-text-font-size: ceil($font-size * .9) !default; //11px
|
||||
$toolbar-text-font-weight: normal !default;
|
||||
$toolbar-text-color: mix($mix-color, #000, 30) !default;
|
||||
$toolbar-text-padding: 3px 4px 0 4px !default;
|
||||
$toolbar-text-line-height: 16px !default;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
$tree-elbow-height: 18px !default;
|
||||
$tree-elbow-width: 16px !default;
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
$window-base-color: $base-color !default;
|
||||
|
||||
$window-border-radius: 5px 5px !default;
|
||||
$window-border-width: 1px !default;
|
||||
$window-border-color: adjust-color($window-base-color, $hue: 0.952deg, $saturation: -32.377%, $lightness: -13.725%) !default;
|
||||
$window-inner-border-width: 1px !default;
|
||||
$window-inner-border-color: adjust-color($window-base-color, $hue: 2.667deg, $saturation: 9.662%, $lightness: 11.373%) !default;
|
||||
$window-background-color: adjust-color($window-base-color, $hue: 0.267deg, $saturation: -21.309%, $lightness: 1.569%) !default;
|
||||
|
||||
$window-body-border-width: 1px !default;
|
||||
$window-body-border-style: solid !default;
|
||||
$window-body-border-color: adjust-color($window-base-color, $hue: 0.844deg, $saturation: 7.644%, $lightness: -8.627%) !default;
|
||||
$window-body-background-color: adjust-color($window-base-color, $hue: 3.188deg, $saturation: 0.542%, $lightness: 7.843%) !default;
|
||||
$window-body-color: #000 !default;
|
||||
|
||||
$window-header-padding: 5px 5px 0 !default;
|
||||
$window-header-font-size: ceil($font-size * .9) !default; //11px
|
||||
$window-header-color: adjust-color($window-base-color, $hue: -2.451deg, $saturation: 38.889%, $lightness: -55.882%) !default;
|
||||
$window-header-font-weight: bold !default;
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
@mixin extjs-boundlist {
|
||||
.#{$prefix}boundlist {
|
||||
border-width: $boundlist-border-width;
|
||||
border-style: $boundlist-border-style;
|
||||
border-color: $boundlist-border-color;
|
||||
background: $boundlist-background-color;
|
||||
|
||||
.#{$prefix}toolbar {
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}boundlist-item {
|
||||
padding: $boundlist-item-padding;
|
||||
|
||||
@include no-select;
|
||||
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
position: relative; /*allow hover in IE on empty items*/
|
||||
|
||||
border-width: $boundlist-item-border-width;
|
||||
border-style: $boundlist-item-border-style;
|
||||
border-color: $boundlist-item-border-color;
|
||||
}
|
||||
|
||||
.#{$prefix}boundlist-selected {
|
||||
background: $boundlist-item-selected-background-color;
|
||||
border-color: $boundlist-item-selected-border-color;
|
||||
}
|
||||
|
||||
.#{$prefix}boundlist-item-over {
|
||||
background: $boundlist-item-over-background-color;
|
||||
border-color: $boundlist-item-over-border-color;
|
||||
}
|
||||
|
||||
.#{$prefix}boundlist-floating {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}boundlist-above {
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
@mixin extjs-btn-group {
|
||||
.#{$prefix}btn-group {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-group-body {
|
||||
position: relative;
|
||||
zoom: 1;
|
||||
padding: $btn-group-padding;
|
||||
.#{$prefix}table-layout-cell {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-group-header-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@include extjs-btn-group-ui('default');
|
||||
}
|
||||
|
||||
/**
|
||||
* @mixin extjs-btn-group-ui
|
||||
* @class Ext.ButtonGroup
|
||||
*/
|
||||
@mixin extjs-btn-group-ui(
|
||||
$ui-label,
|
||||
$ui-base-color: null,
|
||||
|
||||
// background
|
||||
$ui-background-color: $btn-group-background-color,
|
||||
|
||||
// borders
|
||||
$ui-border-color: $btn-group-border-color,
|
||||
$ui-border-width: $btn-group-border-width,
|
||||
$ui-border-radius: $btn-group-border-radius,
|
||||
$ui-inner-border-color: $btn-group-inner-border-color,
|
||||
|
||||
//header
|
||||
$ui-header-background-color: $btn-group-header-background-color,
|
||||
$ui-header-font: $btn-group-header-font,
|
||||
$ui-header-color: $btn-group-header-color
|
||||
){
|
||||
@include x-frame(
|
||||
'btn-group',
|
||||
$ui: '#{$ui-label}-framed',
|
||||
|
||||
/* Radius, width, padding and background-color */
|
||||
$border-radius: $ui-border-radius,
|
||||
$border-width: $ui-border-width,
|
||||
$padding: $btn-group-padding,
|
||||
$background-color: $ui-background-color
|
||||
);
|
||||
|
||||
.#{$prefix}btn-group-#{$ui-label}-framed {
|
||||
border-color: $ui-border-color;
|
||||
@include inner-border(
|
||||
$width: $btn-group-inner-border-width,
|
||||
$color: $ui-inner-border-color
|
||||
);
|
||||
}
|
||||
|
||||
.#{$prefix}btn-group-header-#{$ui-label}-framed {
|
||||
margin: $btn-group-header-margin;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-group-header-body-#{$ui-label}-framed {
|
||||
padding: $btn-group-header-padding;
|
||||
|
||||
background: $ui-header-background-color;
|
||||
|
||||
@include border-top-radius($ui-border-radius);
|
||||
}
|
||||
|
||||
.#{$prefix}btn-group-header-text-#{$ui-label}-framed {
|
||||
font: $ui-header-font;
|
||||
color: $ui-header-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,985 @@
|
|||
/**
|
||||
* @class Ext.Button
|
||||
* Used to create the base structure of an Ext.Button
|
||||
*/
|
||||
@mixin extjs-button {
|
||||
.#{$prefix}btn {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
position: relative;
|
||||
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
* {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
background-repeat: no-repeat;
|
||||
|
||||
em {
|
||||
background-repeat: no-repeat;
|
||||
|
||||
// Styles for an anchor button.
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: auto;
|
||||
background: none;
|
||||
outline: 0 none;
|
||||
overflow: hidden;
|
||||
vertical-align: bottom;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-inner {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-disabled {
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
.#{$prefix}btn-disabled span {
|
||||
@include opacity(.5);
|
||||
|
||||
.#{$prefix}ie6 &,
|
||||
.#{$prefix}ie7 & {
|
||||
filter:none;
|
||||
}
|
||||
}
|
||||
|
||||
//remove the opacity rule of IE8
|
||||
.#{$prefix}ie7 .#{$prefix}btn-disabled,
|
||||
.#{$prefix}ie8 .#{$prefix}btn-disabled {
|
||||
filter:none;
|
||||
}
|
||||
|
||||
.#{$prefix}ie6 .#{$prefix}btn-disabled,
|
||||
.#{$prefix}ie7 .#{$prefix}btn-disabled,
|
||||
.#{$prefix}ie8 .#{$prefix}btn-disabled {
|
||||
.#{$prefix}btn-icon {
|
||||
@include opacity(.6);
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
* html .#{$prefix}ie {
|
||||
.#{$prefix}btn button {
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}ie .#{$prefix}btn button {
|
||||
overflow-x: visible; /*prevents extra horiz space in IE*/
|
||||
vertical-align: baseline; /*IE doesn't like bottom*/
|
||||
}
|
||||
|
||||
.#{$prefix}strict .#{$prefix}ie6,
|
||||
.#{$prefix}strict .#{$prefix}ie7 {
|
||||
.#{$prefix}btn .#{$prefix}frame-mc {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if not $supports-border-radius or $compile-all {
|
||||
.#{$prefix}nbr {
|
||||
.#{$prefix}btn {
|
||||
.#{$prefix}frame-mc {
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-icon-text-left .#{$prefix}btn-icon {
|
||||
background-position: left center;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-icon-text-right .#{$prefix}btn-icon {
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-icon-text-top .#{$prefix}btn-icon {
|
||||
background-position: center top;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-icon-text-bottom .#{$prefix}btn-icon {
|
||||
background-position: center bottom;
|
||||
}
|
||||
|
||||
.#{$prefix}btn {
|
||||
button, a {
|
||||
position: relative;
|
||||
|
||||
.#{$prefix}btn-icon {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-arrow-right {
|
||||
background: transparent no-repeat right center;
|
||||
padding-right: $button-arrow-size;
|
||||
|
||||
.#{$prefix}btn-inner {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar .#{$prefix}btn-arrow-right {
|
||||
padding-right: $button-toolbar-arrow-size;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-arrow-bottom {
|
||||
background: transparent no-repeat center bottom;
|
||||
padding-bottom: $button-arrow-size;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-arrow {
|
||||
@include theme-background-image($theme-name, 'button/arrow.gif');
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
//split buttons
|
||||
.#{$prefix}btn-split-right,
|
||||
.#{$prefix}btn-over .#{$prefix}btn-split-right {
|
||||
background: transparent no-repeat right center;
|
||||
@include theme-background-image($theme-name, 'button/s-arrow.gif');
|
||||
padding-right: $button-split-size !important;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-split-bottom,
|
||||
.#{$prefix}btn-over .#{$prefix}btn-split-bottom {
|
||||
background: transparent no-repeat center bottom;
|
||||
@include theme-background-image($theme-name, 'button/s-arrow-b.gif');
|
||||
padding-bottom: $button-split-size;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar .#{$prefix}btn-split-right {
|
||||
@include theme-background-image($theme-name, 'button/s-arrow-noline.gif');
|
||||
padding-right: $button-toolbar-split-size !important;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar .#{$prefix}btn-split-bottom {
|
||||
@include theme-background-image($theme-name, 'button/s-arrow-b-noline.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}btn-split {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{$prefix}item-disabled,
|
||||
.#{$prefix}item-disabled * {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.#{$prefix}cycle-fixed-width .#{$prefix}btn-inner {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-over .#{$prefix}btn-split-right { @include theme-background-image($theme-name, 'button/s-arrow-o.gif'); }
|
||||
.#{$prefix}btn-over .#{$prefix}btn-split-bottom { @include theme-background-image($theme-name, 'button/s-arrow-bo.gif'); }
|
||||
|
||||
@include extjs-button-ui(
|
||||
/* UI + Scale */
|
||||
'default-small',
|
||||
|
||||
$button-small-border-radius,
|
||||
$button-small-border-width,
|
||||
|
||||
$button-default-border-color,
|
||||
$button-default-border-color-over,
|
||||
$button-default-border-color-focus,
|
||||
$button-default-border-color-pressed,
|
||||
$button-default-border-color-disabled,
|
||||
|
||||
$button-small-padding,
|
||||
$button-small-text-padding,
|
||||
|
||||
$button-default-background-color,
|
||||
$button-default-background-color-over,
|
||||
$button-default-background-color-focus,
|
||||
$button-default-background-color-pressed,
|
||||
$button-default-background-color-disabled,
|
||||
|
||||
$button-default-background-gradient,
|
||||
$button-default-background-gradient-over,
|
||||
$button-default-background-gradient-focus,
|
||||
$button-default-background-gradient-pressed,
|
||||
$button-default-background-gradient-disabled,
|
||||
|
||||
$button-default-color,
|
||||
$button-default-color-over,
|
||||
$button-default-color-focus,
|
||||
$button-default-color-pressed,
|
||||
$button-default-color-disabled,
|
||||
|
||||
$button-small-font-size,
|
||||
$button-small-font-size-over,
|
||||
$button-small-font-size-focus,
|
||||
$button-small-font-size-pressed,
|
||||
$button-small-font-size-disabled,
|
||||
|
||||
$button-small-font-weight,
|
||||
$button-small-font-weight-over,
|
||||
$button-small-font-weight-focus,
|
||||
$button-small-font-weight-pressed,
|
||||
$button-small-font-weight-disabled,
|
||||
|
||||
$button-small-font-family,
|
||||
$button-small-font-family-over,
|
||||
$button-small-font-family-focus,
|
||||
$button-small-font-family-pressed,
|
||||
$button-small-font-family-disabled,
|
||||
|
||||
$button-small-icon-size
|
||||
);
|
||||
|
||||
@include extjs-button-ui(
|
||||
'default-medium',
|
||||
|
||||
$button-medium-border-radius,
|
||||
$button-medium-border-width,
|
||||
|
||||
$button-default-border-color,
|
||||
$button-default-border-color-over,
|
||||
$button-default-border-color-focus,
|
||||
$button-default-border-color-pressed,
|
||||
$button-default-border-color-disabled,
|
||||
|
||||
$button-medium-padding,
|
||||
$button-medium-text-padding,
|
||||
|
||||
$button-default-background-color,
|
||||
$button-default-background-color-over,
|
||||
$button-default-background-color-focus,
|
||||
$button-default-background-color-pressed,
|
||||
$button-default-background-color-disabled,
|
||||
|
||||
$button-default-background-gradient,
|
||||
$button-default-background-gradient-over,
|
||||
$button-default-background-gradient-focus,
|
||||
$button-default-background-gradient-pressed,
|
||||
$button-default-background-gradient-disabled,
|
||||
|
||||
$button-default-color,
|
||||
$button-default-color-over,
|
||||
$button-default-color-focus,
|
||||
$button-default-color-pressed,
|
||||
$button-default-color-disabled,
|
||||
|
||||
$button-medium-font-size,
|
||||
$button-medium-font-size-over,
|
||||
$button-medium-font-size-focus,
|
||||
$button-medium-font-size-pressed,
|
||||
$button-medium-font-size-disabled,
|
||||
|
||||
$button-medium-font-weight,
|
||||
$button-medium-font-weight-over,
|
||||
$button-medium-font-weight-focus,
|
||||
$button-medium-font-weight-pressed,
|
||||
$button-medium-font-weight-disabled,
|
||||
|
||||
$button-medium-font-family,
|
||||
$button-medium-font-family-over,
|
||||
$button-medium-font-family-focus,
|
||||
$button-medium-font-family-pressed,
|
||||
$button-medium-font-family-disabled,
|
||||
|
||||
$button-medium-icon-size
|
||||
);
|
||||
|
||||
@include extjs-button-ui(
|
||||
'default-large',
|
||||
|
||||
$button-large-border-radius,
|
||||
$button-large-border-width,
|
||||
|
||||
$button-default-border-color,
|
||||
$button-default-border-color-over,
|
||||
$button-default-border-color-focus,
|
||||
$button-default-border-color-pressed,
|
||||
$button-default-border-color-disabled,
|
||||
|
||||
$button-large-padding,
|
||||
$button-large-text-padding,
|
||||
|
||||
$button-default-background-color,
|
||||
$button-default-background-color-over,
|
||||
$button-default-background-color-focus,
|
||||
$button-default-background-color-pressed,
|
||||
$button-default-background-color-disabled,
|
||||
|
||||
$button-default-background-gradient,
|
||||
$button-default-background-gradient-over,
|
||||
$button-default-background-gradient-focus,
|
||||
$button-default-background-gradient-pressed,
|
||||
$button-default-background-gradient-disabled,
|
||||
|
||||
$button-default-color,
|
||||
$button-default-color-over,
|
||||
$button-default-color-focus,
|
||||
$button-default-color-pressed,
|
||||
$button-default-color-disabled,
|
||||
|
||||
$button-large-font-size,
|
||||
$button-large-font-size-over,
|
||||
$button-large-font-size-focus,
|
||||
$button-large-font-size-pressed,
|
||||
$button-large-font-size-disabled,
|
||||
|
||||
$button-large-font-weight,
|
||||
$button-large-font-weight-over,
|
||||
$button-large-font-weight-focus,
|
||||
$button-large-font-weight-pressed,
|
||||
$button-large-font-weight-disabled,
|
||||
|
||||
$button-large-font-family,
|
||||
$button-large-font-family-over,
|
||||
$button-large-font-family-focus,
|
||||
$button-large-font-family-pressed,
|
||||
$button-large-font-family-disabled,
|
||||
|
||||
$button-large-icon-size
|
||||
);
|
||||
|
||||
@include extjs-button-ui(
|
||||
'default-toolbar-small',
|
||||
|
||||
$button-small-border-radius,
|
||||
$button-small-border-width,
|
||||
|
||||
$button-toolbar-border-color,
|
||||
$button-toolbar-border-color-over,
|
||||
$button-toolbar-border-color-focus,
|
||||
$button-toolbar-border-color-pressed,
|
||||
$button-toolbar-border-color-disabled,
|
||||
|
||||
$button-small-padding,
|
||||
$button-small-text-padding,
|
||||
|
||||
$button-toolbar-background-color,
|
||||
$button-toolbar-background-color-over,
|
||||
$button-toolbar-background-color-focus,
|
||||
$button-toolbar-background-color-pressed,
|
||||
$button-toolbar-background-color-disabled,
|
||||
|
||||
$button-toolbar-background-gradient,
|
||||
$button-toolbar-background-gradient-over,
|
||||
$button-toolbar-background-gradient-focus,
|
||||
$button-toolbar-background-gradient-pressed,
|
||||
$button-toolbar-background-gradient-disabled,
|
||||
|
||||
$button-toolbar-color,
|
||||
$button-toolbar-color-over,
|
||||
$button-toolbar-color-focus,
|
||||
$button-toolbar-color-pressed,
|
||||
$button-toolbar-color-disabled,
|
||||
|
||||
$button-small-font-size,
|
||||
$button-small-font-size-over,
|
||||
$button-small-font-size-focus,
|
||||
$button-small-font-size-pressed,
|
||||
$button-small-font-size-disabled,
|
||||
|
||||
$button-small-font-weight,
|
||||
$button-small-font-weight-over,
|
||||
$button-small-font-weight-focus,
|
||||
$button-small-font-weight-pressed,
|
||||
$button-small-font-weight-disabled,
|
||||
|
||||
$button-small-font-family,
|
||||
$button-small-font-family-over,
|
||||
$button-small-font-family-focus,
|
||||
$button-small-font-family-pressed,
|
||||
$button-small-font-family-disabled,
|
||||
|
||||
$button-small-icon-size
|
||||
);
|
||||
|
||||
@include extjs-button-ui(
|
||||
'default-toolbar-medium',
|
||||
|
||||
$button-medium-border-radius,
|
||||
$button-medium-border-width,
|
||||
|
||||
$button-toolbar-border-color,
|
||||
$button-toolbar-border-color-over,
|
||||
$button-toolbar-border-color-focus,
|
||||
$button-toolbar-border-color-pressed,
|
||||
$button-toolbar-border-color-disabled,
|
||||
|
||||
$button-medium-padding,
|
||||
$button-medium-text-padding,
|
||||
|
||||
$button-toolbar-background-color,
|
||||
$button-toolbar-background-color-over,
|
||||
$button-toolbar-background-color-focus,
|
||||
$button-toolbar-background-color-pressed,
|
||||
$button-toolbar-background-color-disabled,
|
||||
|
||||
$button-toolbar-background-gradient,
|
||||
$button-toolbar-background-gradient-over,
|
||||
$button-toolbar-background-gradient-focus,
|
||||
$button-toolbar-background-gradient-pressed,
|
||||
$button-toolbar-background-gradient-disabled,
|
||||
|
||||
$button-toolbar-color,
|
||||
$button-toolbar-color-over,
|
||||
$button-toolbar-color-focus,
|
||||
$button-toolbar-color-pressed,
|
||||
$button-toolbar-color-disabled,
|
||||
|
||||
$button-medium-font-size,
|
||||
$button-medium-font-size-over,
|
||||
$button-medium-font-size-focus,
|
||||
$button-medium-font-size-pressed,
|
||||
$button-medium-font-size-disabled,
|
||||
|
||||
$button-medium-font-weight,
|
||||
$button-medium-font-weight-over,
|
||||
$button-medium-font-weight-focus,
|
||||
$button-medium-font-weight-pressed,
|
||||
$button-medium-font-weight-disabled,
|
||||
|
||||
$button-medium-font-family,
|
||||
$button-medium-font-family-over,
|
||||
$button-medium-font-family-focus,
|
||||
$button-medium-font-family-pressed,
|
||||
$button-medium-font-family-disabled,
|
||||
|
||||
$button-medium-icon-size
|
||||
);
|
||||
|
||||
@include extjs-button-ui(
|
||||
'default-toolbar-large',
|
||||
|
||||
$button-large-border-radius,
|
||||
$button-large-border-width,
|
||||
|
||||
$button-toolbar-border-color,
|
||||
$button-toolbar-border-color-over,
|
||||
$button-toolbar-border-color-focus,
|
||||
$button-toolbar-border-color-pressed,
|
||||
$button-toolbar-border-color-disabled,
|
||||
|
||||
$button-large-padding,
|
||||
$button-large-text-padding,
|
||||
|
||||
$button-toolbar-background-color,
|
||||
$button-toolbar-background-color-over,
|
||||
$button-toolbar-background-color-focus,
|
||||
$button-toolbar-background-color-pressed,
|
||||
$button-toolbar-background-color-disabled,
|
||||
|
||||
$button-toolbar-background-gradient,
|
||||
$button-toolbar-background-gradient-over,
|
||||
$button-toolbar-background-gradient-focus,
|
||||
$button-toolbar-background-gradient-pressed,
|
||||
$button-toolbar-background-gradient-disabled,
|
||||
|
||||
$button-toolbar-color,
|
||||
$button-toolbar-color-over,
|
||||
$button-toolbar-color-focus,
|
||||
$button-toolbar-color-pressed,
|
||||
$button-toolbar-color-disabled,
|
||||
|
||||
$button-large-font-size,
|
||||
$button-large-font-size-over,
|
||||
$button-large-font-size-focus,
|
||||
$button-large-font-size-pressed,
|
||||
$button-large-font-size-disabled,
|
||||
|
||||
$button-large-font-weight,
|
||||
$button-large-font-weight-over,
|
||||
$button-large-font-weight-focus,
|
||||
$button-large-font-weight-pressed,
|
||||
$button-large-font-weight-disabled,
|
||||
|
||||
$button-large-font-family,
|
||||
$button-large-font-family-over,
|
||||
$button-large-font-family-focus,
|
||||
$button-large-font-family-pressed,
|
||||
$button-large-font-family-disabled,
|
||||
|
||||
$button-large-icon-size
|
||||
);
|
||||
|
||||
.#{$prefix}btn-default-toolbar-small-disabled,
|
||||
.#{$prefix}btn-default-toolbar-medium-disabled,
|
||||
.#{$prefix}btn-default-toolbar-large-disabled {
|
||||
border-color: transparent;
|
||||
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin extjs-button-ui(
|
||||
$ui,
|
||||
|
||||
$border-radius: 0px,
|
||||
|
||||
$border-width: 0px,
|
||||
|
||||
$border-color: null,
|
||||
$border-color-over: null,
|
||||
$border-color-focus: null,
|
||||
$border-color-pressed: null,
|
||||
$border-color-disabled: null,
|
||||
|
||||
$padding: null,
|
||||
$text-padding: null,
|
||||
|
||||
$background-color: null,
|
||||
$background-color-over: null,
|
||||
$background-color-focus: null,
|
||||
$background-color-pressed: null,
|
||||
$background-color-disabled: null,
|
||||
|
||||
$background-gradient: null,
|
||||
$background-gradient-over: null,
|
||||
$background-gradient-focus: null,
|
||||
$background-gradient-pressed: null,
|
||||
$background-gradient-disabled: null,
|
||||
|
||||
$color: null,
|
||||
$color-over: null,
|
||||
$color-focus: null,
|
||||
$color-pressed: null,
|
||||
$color-disabled: null,
|
||||
|
||||
$font-size: null,
|
||||
$font-size-over: null,
|
||||
$font-size-focus: null,
|
||||
$font-size-pressed: null,
|
||||
$font-size-disabled: null,
|
||||
|
||||
$font-weight: null,
|
||||
$font-weight-over: null,
|
||||
$font-weight-focus: null,
|
||||
$font-weight-pressed: null,
|
||||
$font-weight-disabled: null,
|
||||
|
||||
$font-family: null,
|
||||
$font-family-over: null,
|
||||
$font-family-focus: null,
|
||||
$font-family-pressed: null,
|
||||
$font-family-disabled: null,
|
||||
|
||||
$icon-size: null
|
||||
) {
|
||||
.#{$prefix}btn-#{$ui} {
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
@include x-frame('btn', $ui, $border-radius, $border-width, $padding, $background-color, $background-gradient, true);
|
||||
|
||||
.#{$prefix}btn-#{$ui} .#{$prefix}btn-inner {
|
||||
font-size: $font-size;
|
||||
font-weight: $font-weight;
|
||||
font-family: $font-family;
|
||||
color: $color;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0 $text-padding;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-icon,
|
||||
.#{$prefix}btn-#{$ui}-noicon {
|
||||
button,
|
||||
.#{$prefix}btn-inner {
|
||||
height: $icon-size;
|
||||
line-height: $icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
//icons
|
||||
.#{$prefix}btn-#{$ui}-icon {
|
||||
button {
|
||||
padding: 0;
|
||||
width: $icon-size !important;
|
||||
height: $icon-size;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-icon {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-icon-text-left {
|
||||
button {
|
||||
height: $icon-size;
|
||||
}
|
||||
.#{$prefix}btn-inner {
|
||||
height: $icon-size;
|
||||
line-height: $icon-size;
|
||||
padding-left: $icon-size + 4px;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-icon {
|
||||
width: $icon-size;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
|
||||
.#{$prefix}ie6 &,
|
||||
.#{$prefix}quirks & {
|
||||
height: $icon-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-icon-text-right {
|
||||
button {
|
||||
height: $icon-size;
|
||||
}
|
||||
.#{$prefix}btn-inner {
|
||||
height: $icon-size;
|
||||
line-height: $icon-size;
|
||||
padding-right: $icon-size + 4px !important;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-icon {
|
||||
width: $icon-size;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
.#{$prefix}ie6 &,
|
||||
.#{$prefix}quirks & {
|
||||
height: $icon-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-icon-text-top {
|
||||
.#{$prefix}btn-inner {
|
||||
padding-top: $icon-size + 4px;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-icon {
|
||||
width: auto;
|
||||
height: $icon-size;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: auto;
|
||||
right: 0;
|
||||
|
||||
.#{$prefix}ie6 &,
|
||||
.#{$prefix}quirks & {
|
||||
width: $icon-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-icon-text-bottom {
|
||||
.#{$prefix}btn-inner {
|
||||
padding-bottom: $icon-size + 4px;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-icon {
|
||||
width: auto;
|
||||
height: $icon-size;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
.#{$prefix}ie6 &,
|
||||
.#{$prefix}quirks & {
|
||||
width: $icon-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-over {
|
||||
@if $border-color-over != $border-color {
|
||||
border-color: $border-color-over;
|
||||
}
|
||||
@if $background-color-over != null {
|
||||
@include background-gradient($background-color-over, $background-gradient-over);
|
||||
}
|
||||
|
||||
.#{$prefix}btn-inner {
|
||||
@if $color-over != $color {
|
||||
color: $color-over;
|
||||
}
|
||||
@if $font-weight-over != $font-weight {
|
||||
font-weight: $font-weight-over;
|
||||
}
|
||||
@if $font-size-over != $font-size {
|
||||
font-size: $font-size-over;
|
||||
}
|
||||
@if $font-family-over != $font-family {
|
||||
font-family: $font-family-over;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-focus {
|
||||
@if $border-color-focus != $border-color {
|
||||
border-color: $border-color-focus;
|
||||
}
|
||||
@if $background-color-focus != null {
|
||||
@include background-gradient($background-color-focus, $background-gradient-focus);
|
||||
}
|
||||
|
||||
.#{$prefix}btn-inner {
|
||||
@if $color-focus != $color {
|
||||
color: $color-focus;
|
||||
}
|
||||
@if $font-weight-focus != $font-weight {
|
||||
font-weight: $font-weight-focus;
|
||||
}
|
||||
@if $font-size-focus != $font-size {
|
||||
font-size: $font-size-focus;
|
||||
}
|
||||
@if $font-family-focus != $font-family {
|
||||
font-family: $font-family-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-menu-active,
|
||||
.#{$prefix}btn-#{$ui}-pressed {
|
||||
@if $border-color-pressed != $border-color {
|
||||
border-color: $border-color-pressed;
|
||||
}
|
||||
@if $background-color-pressed != null {
|
||||
@include background-gradient($background-color-pressed, $background-gradient-pressed);
|
||||
}
|
||||
|
||||
.#{$prefix}btn-inner {
|
||||
@if $color-pressed != $color {
|
||||
color: $color-pressed;
|
||||
}
|
||||
@if $font-weight-pressed != $font-weight {
|
||||
font-weight: $font-weight-pressed;
|
||||
}
|
||||
@if $font-size-pressed != $font-size {
|
||||
font-size: $font-size-pressed;
|
||||
}
|
||||
@if $font-family-pressed != $font-family {
|
||||
font-family: $font-family-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-disabled {
|
||||
@if $border-color-disabled != $border-color {
|
||||
border-color: $border-color-disabled;
|
||||
}
|
||||
@if $background-color-disabled != null {
|
||||
@include background-gradient($background-color-disabled, $background-gradient-disabled);
|
||||
}
|
||||
|
||||
.#{$prefix}btn-inner {
|
||||
@if $color-disabled != $color {
|
||||
color: $color !important;
|
||||
}
|
||||
@if $font-weight-disabled != $font-weight {
|
||||
font-weight: $font-weight-disabled;
|
||||
}
|
||||
@if $font-size-disabled != $font-size {
|
||||
font-size: $font-size-disabled;
|
||||
}
|
||||
@if $font-family-disabled != $font-family {
|
||||
font-family: $font-family-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}ie .#{$prefix}btn-#{$ui}-disabled {
|
||||
.#{$prefix}btn-inner {
|
||||
@if $color-disabled != $color {
|
||||
color: darken($color-disabled, 20) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}ie6 .#{$prefix}btn-#{$ui}-disabled {
|
||||
.#{$prefix}btn-inner {
|
||||
@if $color-disabled != $color {
|
||||
color: $color-disabled !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if not $supports-border-radius or $compile-all {
|
||||
.#{$prefix}nbr {
|
||||
.#{$prefix}btn-#{$ui}-over {
|
||||
.#{$prefix}frame-tl,
|
||||
.#{$prefix}frame-bl,
|
||||
.#{$prefix}frame-tr,
|
||||
.#{$prefix}frame-br,
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bc {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-over-corners.gif');
|
||||
}
|
||||
.#{$prefix}frame-ml,
|
||||
.#{$prefix}frame-mr {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-over-sides.gif');
|
||||
}
|
||||
.#{$prefix}frame-mc {
|
||||
background-color: $background-color-over;
|
||||
@if $background-gradient-over != null {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-over-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-focus {
|
||||
.#{$prefix}frame-tl,
|
||||
.#{$prefix}frame-bl,
|
||||
.#{$prefix}frame-tr,
|
||||
.#{$prefix}frame-br,
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bc {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-corners.gif');
|
||||
}
|
||||
.#{$prefix}frame-ml,
|
||||
.#{$prefix}frame-mr {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-sides.gif');
|
||||
}
|
||||
.#{$prefix}frame-mc {
|
||||
background-color: $background-color-focus;
|
||||
@if $background-gradient-focus != null {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-menu-active,
|
||||
.#{$prefix}btn-#{$ui}-pressed {
|
||||
.#{$prefix}frame-tl,
|
||||
.#{$prefix}frame-bl,
|
||||
.#{$prefix}frame-tr,
|
||||
.#{$prefix}frame-br,
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bc {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-corners.gif');
|
||||
}
|
||||
.#{$prefix}frame-ml,
|
||||
.#{$prefix}frame-mr {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-sides.gif');
|
||||
}
|
||||
.#{$prefix}frame-mc {
|
||||
background-color: $background-color-pressed;
|
||||
@if $background-gradient-pressed != null {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}btn-#{$ui}-disabled {
|
||||
.#{$prefix}frame-tl,
|
||||
.#{$prefix}frame-bl,
|
||||
.#{$prefix}frame-tr,
|
||||
.#{$prefix}frame-br,
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bc {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-corners.gif');
|
||||
}
|
||||
.#{$prefix}frame-ml,
|
||||
.#{$prefix}frame-mr {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-sides.gif');
|
||||
}
|
||||
.#{$prefix}frame-mc {
|
||||
background-color: $background-color-disabled;
|
||||
@if $background-gradient-disabled != null {
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if not $supports-gradients or $compile-all {
|
||||
@if $background-gradient != null {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}btn-#{$ui} {
|
||||
background-repeat: repeat-x;
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $background-gradient-over != null {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}btn-#{$ui}-over {
|
||||
background-repeat: repeat-x;
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-over-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $background-gradient-focus != null {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}btn-#{$ui}-focus {
|
||||
background-repeat: repeat-x;
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $background-gradient-pressed != null {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}btn-#{$ui}-menu-active,
|
||||
.#{$prefix}btn-#{$ui}-pressed {
|
||||
background-repeat: repeat-x;
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $background-gradient-disabled != null {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}btn-#{$ui}-disabled {
|
||||
background-repeat: repeat-x;
|
||||
@include theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
@mixin extjs-colorpicker {
|
||||
.#{$prefix}color-picker {
|
||||
width: 144px;
|
||||
height: 90px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.#{$prefix}color-picker a {
|
||||
border: 1px solid #fff;
|
||||
|
||||
float: left;
|
||||
|
||||
padding: 2px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
-moz-outline: 0 none;
|
||||
outline: 0 none;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.#{$prefix}color-picker a:hover,
|
||||
.#{$prefix}color-picker a.#{$prefix}color-picker-selected {
|
||||
border-color: $colorpicker-over-border-color;
|
||||
background-color: $colorpicker-over-background-color;
|
||||
}
|
||||
|
||||
.#{$prefix}color-picker em {
|
||||
display: block;
|
||||
|
||||
border: 1px solid $colorpicker-item-border-color;
|
||||
}
|
||||
|
||||
.#{$prefix}color-picker em span {
|
||||
cursor: pointer;
|
||||
|
||||
display: block;
|
||||
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
|
||||
line-height: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
@mixin extjs-datepicker {
|
||||
.#{$prefix}datepicker {
|
||||
border: $datepicker-border;
|
||||
|
||||
background-color: $datepicker-background-color;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
-moz-outline: 0 none;
|
||||
outline: 0 none;
|
||||
|
||||
color: $datepicker-monthpicker-item-color;
|
||||
text-decoration: none;
|
||||
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-inner,
|
||||
.#{$prefix}datepicker-inner td,
|
||||
.#{$prefix}datepicker-inner th {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-header {
|
||||
position: relative;
|
||||
|
||||
height: 26px;
|
||||
|
||||
@if $datepicker-header-background-gradient {
|
||||
@include background-gradient($datepicker-header-background-color, $datepicker-header-background-gradient);
|
||||
} @else {
|
||||
background-color: $datepicker-header-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-prev,
|
||||
.#{$prefix}datepicker-next {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
|
||||
width: 18px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
text-decoration: none !important;
|
||||
|
||||
@include opacity(.7);
|
||||
|
||||
&:hover {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-next {
|
||||
right: 5px;
|
||||
|
||||
a {
|
||||
@include theme-background-image($theme-name, $datepicker-next-image);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-prev {
|
||||
left: 5px;
|
||||
|
||||
a {
|
||||
@include theme-background-image($theme-name, $datepicker-prev-image);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}item-disabled .#{$prefix}datepicker-prev a:hover,
|
||||
.#{$prefix}item-disabled .#{$prefix}datepicker-next a:hover {
|
||||
@include opacity(.6);
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-month {
|
||||
padding-top: 3px;
|
||||
|
||||
.#{$prefix}btn,
|
||||
button,
|
||||
.#{$prefix}btn-tc,
|
||||
.#{$prefix}btn-tl,
|
||||
.#{$prefix}btn-tr,
|
||||
.#{$prefix}btn-mc,
|
||||
.#{$prefix}btn-ml,
|
||||
.#{$prefix}btn-mr,
|
||||
.#{$prefix}btn-bc,
|
||||
.#{$prefix}btn-bl,
|
||||
.#{$prefix}btn-br {
|
||||
background: transparent !important;
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.#{$prefix}btn-split-right {
|
||||
background: no-repeat right center !important;
|
||||
@include theme-background-image($theme-name, $datepicker-month-arrow-image);
|
||||
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-next {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-month {
|
||||
//width: 120px;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
color: $datepicker-monthpicker-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
table.#{$prefix}datepicker-inner {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
|
||||
th {
|
||||
width: 25px;
|
||||
height: 19px;
|
||||
|
||||
padding: 0;
|
||||
|
||||
color: $datepicker-th-color;
|
||||
font: $datepicker-th-font;
|
||||
text-align: $datepicker-th-text-align;
|
||||
|
||||
border-bottom: 1px solid $datepicker-th-border-bottom-color;
|
||||
border-collapse: separate;
|
||||
|
||||
@if $datepicker-th-background-gradient {
|
||||
@include background-gradient($datepicker-th-background-color, $datepicker-th-background-gradient);
|
||||
} @else {
|
||||
background-color: $datepicker-th-background-color;
|
||||
}
|
||||
|
||||
cursor: default;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
td {
|
||||
border: $datepicker-border-width $datepicker-border-style;
|
||||
height: $datepicker-td-height;
|
||||
border-color: $datepicker-background-color;
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-right: 4px;
|
||||
|
||||
display: block;
|
||||
|
||||
zoom: 1;
|
||||
|
||||
font: normal ceil($font-size * .9) $font-family;
|
||||
color: $datepicker-item-color;
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-active {
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-selected {
|
||||
a {
|
||||
background: repeat-x left top;
|
||||
background-color: $datepicker-selected-item-background-color;
|
||||
border: 1px solid $datepicker-selected-item-border-color;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-today {
|
||||
a {
|
||||
border: $datepicker-border-width $datepicker-border-style;
|
||||
border-color: $datepicker-today-item-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-prevday,
|
||||
.#{$prefix}datepicker-nextday {
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.#{$prefix}datepicker-disabled a:hover {
|
||||
text-decoration: none !important;
|
||||
|
||||
color: #000;
|
||||
|
||||
background-color: $datepicker-item-hover-background-color;
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-disabled a {
|
||||
cursor: default;
|
||||
background-color: #eee;
|
||||
color: #bbb;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}datepicker-footer,
|
||||
.#{$prefix}monthpicker-buttons {
|
||||
position: relative;
|
||||
|
||||
border-top: $datepicker-border-width $datepicker-border-style $datepicker-footer-border-top-color;
|
||||
|
||||
@if $datepicker-footer-background-gradient {
|
||||
@include background-gradient($datepicker-footer-background-color, $datepicker-footer-background-gradient);
|
||||
} @else {
|
||||
background-color: $datepicker-footer-background-color;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
|
||||
.#{$prefix}btn {
|
||||
position: relative;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}item-disabled .#{$prefix}datepicker-inner a:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
// month picker
|
||||
.#{$prefix}datepicker .#{$prefix}monthpicker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
.#{$prefix}monthpicker {
|
||||
border: $datepicker-border;
|
||||
background-color: $datepicker-background-color;
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-months,
|
||||
.#{$prefix}monthpicker-years {
|
||||
float: left;
|
||||
|
||||
height: $datepicker-monthpicker-height;
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-item {
|
||||
float: left;
|
||||
|
||||
margin: 4px 0 5px 0;
|
||||
|
||||
font: normal ceil($font-size * .9) $font-family;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
height: 18px;
|
||||
width: 43px;
|
||||
|
||||
border: 0 none;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
margin: 0 5px 0 5px;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
color: $datepicker-monthpicker-item-color;
|
||||
|
||||
border: $datepicker-monthpicker-item-border;
|
||||
|
||||
line-height: 17px;
|
||||
|
||||
&:hover {
|
||||
background-color: $datepicker-monthpicker-item-hover-background-color;
|
||||
}
|
||||
|
||||
&.#{$prefix}monthpicker-selected {
|
||||
background-color: $datepicker-monthpicker-item-selected-background-color;
|
||||
border: $datepicker-monthpicker-item-selected-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-months {
|
||||
border-right: $datepicker-border;
|
||||
width: 87px;
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-years .#{$prefix}monthpicker-item {
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-yearnav {
|
||||
height: 28px;
|
||||
|
||||
button {
|
||||
@include theme-background-image($theme-name, $datepicker-tool-sprite-image);
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
padding: 0;
|
||||
margin: 6px 12px 5px 15px;
|
||||
border: none;
|
||||
outline: 0 none;
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-yearnav-next {
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-yearnav-next-over {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
background-position: -15px -120px;
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-yearnav-prev {
|
||||
background-position: 0 -105px;
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-yearnav-prev-over {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
background-position: -15px -105px;
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-small {
|
||||
.#{$prefix}monthpicker-item {
|
||||
margin: 2px 0 2px 0;
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-yearnav {
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-months, .#{$prefix}monthpicker-years {
|
||||
height: 136px;
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
.#{$prefix}quirks {
|
||||
.#{$prefix}ie7,
|
||||
.#{$prefix}ie8 {
|
||||
.#{$prefix}monthpicker-buttons {
|
||||
.#{$prefix}btn {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}monthpicker-small .#{$prefix}monthpicker-yearnav button {
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}ie6 .#{$prefix}monthpicker-small .#{$prefix}monthpicker-yearnav button {
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
//nlg support
|
||||
@if not $supports-gradients or $compile-all {
|
||||
.#{$prefix}nlg {
|
||||
@if $datepicker-header-background-gradient != null {
|
||||
.#{$prefix}datepicker-header {
|
||||
@include theme-background-image($theme-name, 'datepicker/datepicker-header-bg.gif');
|
||||
background-repeat: repeat-x;
|
||||
background-position: top left;
|
||||
}
|
||||
}
|
||||
|
||||
@if $datepicker-footer-background-gradient != null {
|
||||
.#{$prefix}datepicker-footer,
|
||||
.#{$prefix}monthpicker-buttons {
|
||||
@include theme-background-image($theme-name, 'datepicker/datepicker-footer-bg.gif');
|
||||
background-repeat: repeat-x;
|
||||
background-position: top left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
@mixin extjs-drawcomponent {
|
||||
.#{$prefix}surface {
|
||||
@include inline-block;
|
||||
}
|
||||
|
||||
.rvml {
|
||||
behavior: url(#default#VML);
|
||||
}
|
||||
|
||||
.#{$prefix}surface tspan {
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.#{$prefix}vml-sprite {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.#{$prefix}vml-group {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
.#{$prefix}vml-measure-span {
|
||||
position: absolute;
|
||||
left: -9999em;
|
||||
top: -9999em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.#{$prefix}vml-base {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.#{$prefix}vml-base {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
@import 'form/all';
|
||||
@import 'form/field';
|
||||
@import 'form/fieldset';
|
||||
@import 'form/file';
|
||||
@import 'form/checkbox';
|
||||
@import 'form/checkboxgroup';
|
||||
@import 'form/triggerfield';
|
||||
@import 'form/htmleditor';
|
||||
|
|
@ -0,0 +1,818 @@
|
|||
@mixin extjs-grid {
|
||||
//main grid view
|
||||
.#{$prefix}panel {
|
||||
.#{$prefix}grid-body {
|
||||
background: $panel-body-background-color;
|
||||
border-color: $panel-body-border-color;
|
||||
border-style: $panel-body-border-style;
|
||||
border-width: 1px;
|
||||
border-top-color: $grid-header-background-color;
|
||||
}
|
||||
|
||||
// Still needs left and right border even if it's not visible so that its available width can be calculated correctly
|
||||
.#{$prefix}grid-header-ct-hidden {
|
||||
border-top-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-header-hidden .#{$prefix}grid-body {
|
||||
border-top-color: $panel-body-border-color !important;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-view {
|
||||
overflow: hidden;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-table {
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row .#{$prefix}grid-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-locked .#{$prefix}grid-inner-locked {
|
||||
border-width: 0 1px 0 0 !important;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-header-ct {
|
||||
cursor: default;
|
||||
zoom: 1;
|
||||
padding: 0;
|
||||
border: 1px solid $panel-body-border-color;
|
||||
|
||||
@if $supports-gradients or $compile-all {
|
||||
@include background-gradient($grid-header-background-color, $grid-header-background-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-ie or $compile-all {
|
||||
.#{$prefix}border-box .#{$prefix}ie9 {
|
||||
.#{$prefix}grid-header-ct {
|
||||
padding-left: 1px;
|
||||
}
|
||||
}
|
||||
.#{$prefix}ie6, .#{$prefix}ie7 {
|
||||
.#{$prefix}grid-header-ct {
|
||||
padding-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.#{$prefix}column-header {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
||||
border-right: 1px solid $grid-header-background-color;
|
||||
border-left: 0 none;
|
||||
border-top: 0 none;
|
||||
border-bottom: 0 none;
|
||||
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
|
||||
font: normal 11px/15px $font-family;
|
||||
|
||||
@if $grid-header-color {
|
||||
color: $grid-header-color;
|
||||
}
|
||||
font: normal ceil($font-size * .9) $font-family;
|
||||
|
||||
@if $supports-gradients or $compile-all {
|
||||
@include background-gradient($grid-header-background-color, $grid-header-background-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}group-header {
|
||||
padding: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
.#{$prefix}group-sub-header {
|
||||
background: transparent;
|
||||
border-top: 1px solid $grid-header-background-color;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}column-header-inner {
|
||||
zoom: 1;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
line-height: 22px;
|
||||
padding: $grid-header-padding;
|
||||
|
||||
.#{$prefix}column-header-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}column-header-over,
|
||||
.#{$prefix}column-header-sort-ASC,
|
||||
.#{$prefix}column-header-sort-DESC {
|
||||
border-left-color: $grid-header-over-border-color;
|
||||
border-right-color: $grid-header-over-border-color;
|
||||
|
||||
@if $supports-gradients or $compile-all {
|
||||
@include background-gradient($grid-header-over-background-color, $grid-header-over-background-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
@if not $supports-gradients or $compile-all {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}grid-header-ct,
|
||||
.#{$prefix}column-header {
|
||||
background: repeat-x 0 top;
|
||||
@include theme-background-image($theme-name, 'grid/column-header-bg.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}column-header-over,
|
||||
.#{$prefix}column-header-sort-ASC,
|
||||
.#{$prefix}column-header-sort-DESC {
|
||||
background: #ebf3fd repeat-x 0 top;
|
||||
@include theme-background-image($theme-name, 'grid/column-header-over-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}column-header-trigger {
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: $grid-header-trigger-width;
|
||||
background: no-repeat left center;
|
||||
background-color: #c3daf9;
|
||||
@include theme-background-image($theme-name, 'grid/grid3-hd-btn.gif');
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.#{$prefix}column-header-over, .#{$prefix}column-header-open {
|
||||
.#{$prefix}column-header-trigger {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}column-header-align-right {
|
||||
text-align: right;
|
||||
|
||||
.#{$prefix}column-header-text {
|
||||
padding-right: 0.5ex;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.#{$prefix}column-header-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
.#{$prefix}column-header-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Sort direction indicator is a background of the text span.
|
||||
.#{$prefix}column-header-sort-ASC .#{$prefix}column-header-text {
|
||||
padding-right: 16px;
|
||||
background: no-repeat right 6px;
|
||||
@include theme-background-image($theme-name, 'grid/sort_asc.gif');
|
||||
}
|
||||
.#{$prefix}column-header-sort-DESC .#{$prefix}column-header-text {
|
||||
padding-right: 16px;
|
||||
background: no-repeat right 6px;
|
||||
@include theme-background-image($theme-name, 'grid/sort_desc.gif');
|
||||
}
|
||||
|
||||
//grid rows
|
||||
.#{$prefix}grid-row {
|
||||
line-height: 13px;
|
||||
|
||||
vertical-align: top;
|
||||
|
||||
padding: $grid-row-padding;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: ignore;
|
||||
|
||||
.#{$prefix}grid-cell {
|
||||
@if $grid-row-cell-color {
|
||||
color: $grid-row-cell-color;
|
||||
}
|
||||
font: $grid-row-cell-font;
|
||||
|
||||
border-color: $grid-row-cell-border-color;
|
||||
border-style: $grid-row-cell-border-style;
|
||||
border-width: $grid-row-cell-border-width;
|
||||
border-top-color: lighten($grid-row-cell-border-color, 5);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-rowwrap-div {
|
||||
border-width: $grid-row-wrap-border-width;
|
||||
border-color: $grid-row-wrap-border-color;
|
||||
border-style: $grid-row-wrap-border-style;
|
||||
border-top-color: lighten($grid-row-wrap-border-color, 5);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-alt .#{$prefix}grid-cell,
|
||||
.#{$prefix}grid-row-alt .#{$prefix}grid-rowwrap-div {
|
||||
background-color: $grid-row-cell-alt-background;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-over .#{$prefix}grid-cell,
|
||||
.#{$prefix}grid-row-over .#{$prefix}grid-rowwrap-div {
|
||||
border-color: $grid-row-cell-over-border-color;
|
||||
|
||||
background-color: $grid-row-cell-over-background-color;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-focused .#{$prefix}grid-cell,
|
||||
.#{$prefix}grid-row-focused .#{$prefix}grid-rowwrap-div {
|
||||
border-color: $grid-row-cell-focus-border-color;
|
||||
|
||||
background-color: $grid-row-cell-focus-background-color;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-selected .#{$prefix}grid-cell,
|
||||
.#{$prefix}grid-row-selected .#{$prefix}grid-rowwrap-div {
|
||||
border-style: $grid-row-cell-selected-border-style;
|
||||
border-color: $grid-row-cell-selected-border-color;
|
||||
|
||||
background-color: $grid-row-cell-selected-background-color !important;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-rowwrap-div {
|
||||
.#{$prefix}grid-cell,
|
||||
.#{$prefix}grid-cell-inner {
|
||||
border-width: 0;
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-body-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-rowbody {
|
||||
font: $grid-row-body-font;
|
||||
|
||||
padding: $grid-row-body-padding;
|
||||
|
||||
p {
|
||||
margin: 5px 5px 10px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
//grid cells
|
||||
.#{$prefix}grid-cell {
|
||||
overflow: hidden;
|
||||
|
||||
font: $grid-cell-font;
|
||||
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select:none;
|
||||
-webkit-user-select:ignore;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-cell-inner {
|
||||
overflow: hidden;
|
||||
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
padding: $grid-cell-inner-padding;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Action columns with a standard, 16x16 icon require less padding
|
||||
.#{$prefix}action-col-cell .#{$prefix}grid-cell-inner {
|
||||
padding: 1px 2px 0 2px;
|
||||
}
|
||||
|
||||
.#{$prefix}ie6,
|
||||
.#{$prefix}ie7,
|
||||
.#{$prefix}quirks .#{$prefix}ie9,
|
||||
.#{$prefix}quirks .#{$prefix}ie8,
|
||||
.#{$prefix}strict .#{$prefix}ie8 {
|
||||
.#{$prefix}action-col-cell .#{$prefix}grid-cell-inner {
|
||||
padding: 2px 2px 1px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row .#{$prefix}grid-cell-special {
|
||||
padding: 0;
|
||||
border-right: 1px solid $grid-cell-with-col-lines-border-color;
|
||||
|
||||
@include background-gradient(#f6f6f6, 'grid-cell-special');
|
||||
}
|
||||
|
||||
/*
|
||||
IE6-8 have issues with shrinking the TR to 0px (even w/line-height=0), so we
|
||||
use an IE-specific trick to make the row disappear. We cannot do this on any
|
||||
other browser, because it is not a non-standard thing to do and those other
|
||||
browsers will do whacky things with it.
|
||||
*/
|
||||
|
||||
.#{$prefix}ie6,
|
||||
.#{$prefix}ie7,
|
||||
.#{$prefix}quirks .#{$prefix}ie8,
|
||||
.#{$prefix}strict .#{$prefix}ie8 {
|
||||
.#{$prefix}grid-header-row {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
|
||||
border-right: 1px solid adjust-color($base-color, $hue: -0.175deg, $saturation: 25.296%, $lightness: -2.549%);
|
||||
|
||||
@include background-gradient($grid-row-cell-selected-background-color, 'grid-cell-special');
|
||||
}
|
||||
|
||||
.#{$prefix}grid-dirty-cell {
|
||||
@include theme-background-image($theme-name, 'grid/dirty.gif');
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-cell-selected {
|
||||
background-color: #B8CFEE !important;
|
||||
}
|
||||
|
||||
@if not $supports-gradients or $compile-all {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}grid-cell-special {
|
||||
background-repeat: repeat-y;
|
||||
background-position: top right;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row .#{$prefix}grid-cell-special,
|
||||
.#{$prefix}grid-row-over .#{$prefix}grid-cell-special {
|
||||
@include theme-background-image($theme-name, 'grid/cell-special-bg.gif');
|
||||
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-focused .#{$prefix}grid-cell-special,
|
||||
.#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
|
||||
@include theme-background-image($theme-name, 'grid/cell-special-selected-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//this is panel as gridpanel doesn't use a baseCls
|
||||
.#{$prefix}panel-with-col-lines .#{$prefix}grid-row .#{$prefix}grid-cell {
|
||||
padding-right: 0;
|
||||
border-right: 1px solid $grid-cell-with-col-lines-border-color;
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
.#{$prefix}ie {
|
||||
.#{$prefix}grid-cell-special {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}property-grid {
|
||||
.#{$prefix}grid-row .#{$prefix}grid-cell-inner {
|
||||
padding: 3px 6px 5px;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner,
|
||||
.#{$prefix}grid-row-over .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
|
||||
padding-left: 12px;
|
||||
@include theme-background-image($theme-name, 'grid/property-cell-bg.gif');
|
||||
background-repeat: no-repeat;
|
||||
background-position: -16px 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
.#{$prefix}quirks .#{$prefix}ie .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
|
||||
background-position: -16px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}unselectable {
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: ignore;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-body-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-group-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//grid expander
|
||||
.#{$prefix}grid-view {
|
||||
.#{$prefix}grid-td-expander {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-td-expander {
|
||||
background: repeat-y right transparent;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-view {
|
||||
.#{$prefix}grid-td-expander {
|
||||
.#{$prefix}grid-cell-inner {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-expander {
|
||||
@include theme-background-image($theme-name, 'grid/group-collapse.gif');
|
||||
background-color: transparent;
|
||||
|
||||
width: 9px;
|
||||
height: 13px;
|
||||
|
||||
margin-left: 3px;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-collapsed {
|
||||
.#{$prefix}grid-row-expander {
|
||||
@include theme-background-image($theme-name, 'grid/group-expand.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-resize-marker {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
background-color: #0f0f0f;
|
||||
}
|
||||
|
||||
//column move icons, when moving columns
|
||||
.col-move-top,
|
||||
.col-move-bottom {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
z-index: 20000;
|
||||
background: no-repeat left top transparent;
|
||||
}
|
||||
|
||||
.col-move-top {
|
||||
@include theme-background-image($theme-name, 'grid/col-move-top.gif');
|
||||
}
|
||||
|
||||
.col-move-bottom {
|
||||
@include theme-background-image($theme-name, 'grid/col-move-bottom.gif');
|
||||
}
|
||||
|
||||
//pading toolbar
|
||||
.#{$prefix}tbar-page-number {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
//grouped grid
|
||||
.#{$prefix}grid-group,
|
||||
.#{$prefix}grid-group-body,
|
||||
.#{$prefix}grid-group-hd {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-group-hd {
|
||||
padding-top: 6px;
|
||||
|
||||
.#{$prefix}grid-cell-inner {
|
||||
padding: 10px 4px 4px 4px;
|
||||
|
||||
background: $grid-grouped-header-background-color;
|
||||
|
||||
border-width: $grid-grouped-header-border-width;
|
||||
border-style: $grid-grouped-header-border-style;
|
||||
border-color: $grid-grouped-header-border-color;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-group-title {
|
||||
background: transparent no-repeat 0 -1px;
|
||||
@include theme-background-image($theme-name, 'grid/group-collapse.gif');
|
||||
|
||||
color: $grid-grouped-title-color;
|
||||
font: $grid-grouped-title-font;
|
||||
|
||||
padding: 0 0 0 14px;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-group-hd-collapsed {
|
||||
.#{$prefix}grid-group-title {
|
||||
@include theme-background-image($theme-name, 'grid/group-expand.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-group-collapsed .#{$prefix}grid-group-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-group-collapsed .#{$prefix}grid-group-title {
|
||||
@include theme-background-image($theme-name, 'grid/group-expand.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}group-by-icon {
|
||||
@include theme-background-image($theme-name, 'grid/group-by.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}show-groups-icon {
|
||||
@include theme-background-image($theme-name, 'grid/group-by.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}column-header-checkbox .#{$prefix}column-header-inner {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-cell-special .#{$prefix}grid-cell-inner {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-checker,
|
||||
.#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
@include theme-background-image($theme-name, 'grid/unchecked.gif');
|
||||
background-position: -1px -1px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Row checker is a div but column header checker is the text span element, so make it display: block
|
||||
// Header checkbox element needs centering
|
||||
.#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@if $include-ie or $compile-all {
|
||||
/* All IE Quirks mode need to squish the header height or the line-height will become too tall */
|
||||
/* IE6 always needs the hack regardless of quirks/strict */
|
||||
.#{$prefix}quirks .#{$prefix}ie, .#{$prefix}ie6 {
|
||||
.#{$prefix}column-header-checkbox .#{$prefix}column-header-inner {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* IE 6, 7 & 9 are 1px too far to the right when centering, drop the margin 1px. */
|
||||
.#{$prefix}ie6, .#{$prefix}ie7, .#{$prefix}ie9 {
|
||||
.#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-hd-checker-on .#{$prefix}column-header-text {
|
||||
@include theme-background-image($theme-name, 'grid/checked.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-checker {
|
||||
margin-left: 1px;
|
||||
|
||||
background-position: 50% -2px;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-selected .#{$prefix}grid-row-checker,
|
||||
.#{$prefix}grid-row-checked .#{$prefix}grid-row-checker {
|
||||
@include theme-background-image($theme-name, 'grid/checked.gif');
|
||||
}
|
||||
|
||||
//grid icons
|
||||
.#{$prefix}tbar-page-first {
|
||||
background-image: theme-image($theme-name, 'grid/page-first.gif') !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tbar-loading {
|
||||
background-image: theme-image($theme-name, 'grid/refresh.gif') !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tbar-page-last {
|
||||
background-image: theme-image($theme-name, 'grid/page-last.gif') !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tbar-page-next {
|
||||
background-image: theme-image($theme-name, 'grid/page-next.gif') !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tbar-page-prev {
|
||||
background-image: theme-image($theme-name, 'grid/page-prev.gif') !important;
|
||||
}
|
||||
|
||||
.#{$prefix}item-disabled {
|
||||
.#{$prefix}tbar-loading {
|
||||
background-image: theme-image($theme-name, 'grid/refresh-disabled.gif') !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tbar-page-first {
|
||||
background-image: theme-image($theme-name, 'grid/page-first-disabled.gif') !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tbar-page-last {
|
||||
background-image: theme-image($theme-name, 'grid/page-last-disabled.gif') !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tbar-page-next {
|
||||
background-image: theme-image($theme-name, 'grid/page-next-disabled.gif') !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tbar-page-prev {
|
||||
background-image: theme-image($theme-name, 'grid/page-prev-disabled.gif') !important;
|
||||
}
|
||||
}
|
||||
|
||||
//menu icons
|
||||
.xg-hmenu-sort-asc .#{$prefix}menu-item-icon {
|
||||
@include theme-background-image($theme-name, 'grid/hmenu-asc.gif');
|
||||
}
|
||||
|
||||
.xg-hmenu-sort-desc .#{$prefix}menu-item-icon {
|
||||
@include theme-background-image($theme-name, 'grid/hmenu-desc.gif');
|
||||
}
|
||||
|
||||
.xg-hmenu-lock .#{$prefix}menu-item-icon {
|
||||
@include theme-background-image($theme-name, 'grid/hmenu-lock.gif');
|
||||
}
|
||||
|
||||
.xg-hmenu-unlock .#{$prefix}menu-item-icon {
|
||||
@include theme-background-image($theme-name, 'grid/hmenu-unlock.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}group-by-icon {
|
||||
@include theme-background-image($theme-name, 'grid/group-by.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}cols-icon .#{$prefix}menu-item-icon {
|
||||
@include theme-background-image($theme-name, 'grid/columns.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}show-groups-icon {
|
||||
@include theme-background-image($theme-name, 'grid/group-by.gif');
|
||||
}
|
||||
|
||||
// Drag/drop indicator styles
|
||||
.#{$prefix}grid-drop-indicator {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
line-height: 0px;
|
||||
background-color: #77BC71;
|
||||
overflow: visible;
|
||||
|
||||
.#{$prefix}grid-drop-indicator-left {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: -12px;
|
||||
@include theme-background-image($theme-name, 'grid/dd-insert-arrow-right.png');
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-drop-indicator-right {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -11px;
|
||||
@include theme-background-image($theme-name, 'grid/dd-insert-arrow-left.png');
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}ie6 {
|
||||
.#{$prefix}grid-drop-indicator-left {
|
||||
@include theme-background-image($theme-name, 'grid/dd-insert-arrow-right.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}grid-drop-indicator-right {
|
||||
@include theme-background-image($theme-name, 'grid/dd-insert-arrow-left.gif');
|
||||
}
|
||||
}
|
||||
|
||||
// Row Editor
|
||||
.#{$prefix}grid-row-editor {
|
||||
position: absolute !important;
|
||||
z-index: 1;
|
||||
zoom: 1;
|
||||
overflow: visible !important;
|
||||
|
||||
.#{$prefix}form-field {
|
||||
font: $grid-row-editor-font;
|
||||
}
|
||||
.#{$prefix}form-display-field {
|
||||
font: $grid-row-editor-font;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}panel-body {
|
||||
background-color: $grid-row-editor-background-color;
|
||||
border-top: $grid-row-editor-border;
|
||||
border-bottom: $grid-row-editor-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Perfect alignment of input text with cell text
|
||||
.#{$prefix}grid-row-editor {
|
||||
// Align input text with text value in cell
|
||||
.#{$prefix}form-text {
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
.#{$prefix}grid-editor {
|
||||
// Align checkboxes input
|
||||
.#{$prefix}form-cb-wrap {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-editor-buttons {
|
||||
background-color: $grid-row-editor-background-color;
|
||||
position: absolute;
|
||||
bottom: -31px;
|
||||
padding: 4px;
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
|
||||
.#{$prefix}strict & {
|
||||
width: 192px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&-ml,
|
||||
&-mr,
|
||||
&-bl,
|
||||
&-br,
|
||||
&-bc {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-bl,
|
||||
&-br {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
bottom: 0px;
|
||||
@include theme-background-image($theme-name, 'panel/panel-default-framed-corners.gif');
|
||||
}
|
||||
&-bl {
|
||||
left: 0px;
|
||||
background-position: 0px -16px;
|
||||
}
|
||||
&-br {
|
||||
right: 0px;
|
||||
background-position: 0px -20px;
|
||||
}
|
||||
|
||||
&-bc {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
bottom: 0px;
|
||||
width: 192px;
|
||||
height: 1px;
|
||||
background-color: $grid-row-editor-border-color;
|
||||
}
|
||||
|
||||
&-ml,
|
||||
&-mr {
|
||||
height: 27px;
|
||||
width: 1px;
|
||||
top: 1px;
|
||||
background-color: $grid-row-editor-border-color;
|
||||
}
|
||||
&-ml {
|
||||
left: 0px
|
||||
}
|
||||
&-mr {
|
||||
background-position: 0px -20px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}grid-row-editor-errors {
|
||||
ul {
|
||||
margin-left: 5px;
|
||||
}
|
||||
li {
|
||||
list-style: disc;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
/**
|
||||
* W3C Suggested Default style sheet for HTML 4
|
||||
* http://www.w3.org/TR/CSS21/sample.html
|
||||
*/
|
||||
@mixin extjs-html {
|
||||
.#{$prefix}html {
|
||||
html,
|
||||
address,
|
||||
blockquote,
|
||||
body,
|
||||
dd,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
fieldset,
|
||||
form,
|
||||
frame, frameset,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
noframes,
|
||||
ol,
|
||||
p,
|
||||
ul,
|
||||
center,
|
||||
dir,
|
||||
hr,
|
||||
menu,
|
||||
pre { display: block; }
|
||||
li { display: list-item; list-style: disc; }
|
||||
head { display: none; }
|
||||
table { display: table; }
|
||||
tr { display: table-row; }
|
||||
thead { display: table-header-group; }
|
||||
tbody { display: table-row-group; }
|
||||
tfoot { display: table-footer-group; }
|
||||
col { display: table-column; }
|
||||
colgroup { display: table-column-group; }
|
||||
td,
|
||||
th { display: table-cell; }
|
||||
caption { display: table-caption; }
|
||||
th { font-weight: bolder; text-align: center; }
|
||||
caption { text-align: center; }
|
||||
body { margin: 8px; }
|
||||
h1 { font-size: 2em; margin: .67em 0; }
|
||||
h2 { font-size: 1.5em; margin: .75em 0; }
|
||||
h3 { font-size: 1.17em; margin: .83em 0; }
|
||||
h4,
|
||||
p,
|
||||
blockquote,
|
||||
ul,
|
||||
fieldset,
|
||||
form,
|
||||
ol,
|
||||
dl,
|
||||
dir,
|
||||
menu { margin: 1.12em 0; }
|
||||
h5 { font-size: .83em; margin: 1.5em 0; }
|
||||
h6 { font-size: .75em; margin: 1.67em 0; }
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
b,
|
||||
strong { font-weight: bolder; }
|
||||
blockquote { margin-left: 40px; margin-right: 40px; }
|
||||
i,
|
||||
cite,
|
||||
em,
|
||||
var,
|
||||
address { font-style: italic; }
|
||||
pre,
|
||||
tt,
|
||||
code,
|
||||
kbd,
|
||||
samp { font-family: monospace; }
|
||||
pre { white-space: pre; }
|
||||
button,
|
||||
textarea,
|
||||
input,
|
||||
select { display: inline-block; }
|
||||
big { font-size: 1.17em; }
|
||||
small,
|
||||
sub,
|
||||
sup { font-size: .83em; }
|
||||
sub { vertical-align: sub; }
|
||||
sup { vertical-align: super; }
|
||||
table { border-spacing: 2px; }
|
||||
thead,
|
||||
tbody,
|
||||
tfoot { vertical-align: middle; }
|
||||
td,
|
||||
th { vertical-align: inherit; }
|
||||
s,
|
||||
strike,
|
||||
del { text-decoration: line-through; }
|
||||
hr { border: 1px inset; }
|
||||
ol,
|
||||
ul,
|
||||
dir,
|
||||
menu,
|
||||
dd { margin-left: 40px; }
|
||||
ul, menu, dir { list-style-type: disc; }
|
||||
ol { list-style-type: decimal; }
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul,
|
||||
ol ol { margin-top: 0; margin-bottom: 0; }
|
||||
u,
|
||||
ins { text-decoration: underline; }
|
||||
br:before { content: "\A"; }
|
||||
:before, :after { white-space: pre-line; }
|
||||
center { text-align: center; }
|
||||
:link, :visited { text-decoration: underline; }
|
||||
:focus { outline: invert dotted thin; }
|
||||
|
||||
/* Begin bidirectionality settings (do not change) */
|
||||
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override; }
|
||||
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override; }
|
||||
; }
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
/**
|
||||
* @class Ext.LoadMask
|
||||
* Component used to mask a component
|
||||
*/
|
||||
.#{$prefix}mask {
|
||||
z-index: 100;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@include opacity($loadmask-opacity);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
zoom: 1;
|
||||
|
||||
background: $loadmask-backgorund;
|
||||
}
|
||||
|
||||
.#{$prefix}mask-msg {
|
||||
z-index: 20001;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
padding: $loadmask-msg-padding;
|
||||
border: 1px solid;
|
||||
border-color: $loadmask-msg-border-color;
|
||||
|
||||
@if $loadmask-msg-background-gradient {
|
||||
@if $supports-gradients or $compile-all {
|
||||
@include background-gradient($loadmask-msg-background-color, $loadmask-msg-background-gradient);
|
||||
}
|
||||
} @else {
|
||||
background: $loadmask-msg-background-color;
|
||||
}
|
||||
|
||||
div {
|
||||
padding: $loadmask-msg-inner-padding;
|
||||
|
||||
//if an icon is defined show it
|
||||
@if $loadmask-msg-inner-icon != null {
|
||||
background-image: theme-image($theme-name, $loadmask-msg-inner-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 5px center;
|
||||
}
|
||||
|
||||
cursor: wait;
|
||||
|
||||
border: 1px solid $loadmask-msg-inner-border-color;
|
||||
|
||||
background-color: $loadmask-msg-inner-background-color;
|
||||
|
||||
color: $loadmask-msg-inner-color;
|
||||
font: $loadmask-msg-inner-font;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
/**
|
||||
* @class Ext.menu.*
|
||||
*/
|
||||
@mixin extjs-menu {
|
||||
.#{$prefix}menu-body {
|
||||
@include no-select;
|
||||
background: $menu-background-color !important;
|
||||
padding: $menu-padding;
|
||||
}
|
||||
|
||||
.#{$prefix}menu-icon-separator {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: $menu-item-indent;
|
||||
z-index: 0;
|
||||
border-left: solid 1px $menu-separator-border-color;
|
||||
background-color: $menu-separator-background-color;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.#{$prefix}menu-plain {
|
||||
.#{$prefix}menu-icon-separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}menu-focus {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-cmp {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-link {
|
||||
display: block;
|
||||
padding: 0px $menu-padding;
|
||||
margin: 1px;
|
||||
text-decoration: none !important;
|
||||
line-height: 16px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@if $include-opera {
|
||||
.#{$prefix}opera {
|
||||
// Opera 10.5 absolute positioning of submenu arrow has issues
|
||||
// This will fix it, and not affect newer Operas
|
||||
.#{$prefix}menu-item-link {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 4px 11px 0px 2px;
|
||||
background: no-repeat center center;
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-text {
|
||||
position: relative;
|
||||
font-size: ceil($font-size * .9);
|
||||
color: $menu-text-color;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-checked {
|
||||
.#{$prefix}menu-item-icon {
|
||||
background-image: theme-image($theme-name, $menu-icon-checked);
|
||||
}
|
||||
.#{$prefix}menu-group-icon {
|
||||
background-image: theme-image($theme-name, $menu-icon-group-checked);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-unchecked {
|
||||
.#{$prefix}menu-item-icon {
|
||||
background-image: theme-image($theme-name, $menu-icon-unchecked);
|
||||
}
|
||||
.#{$prefix}menu-group-icon {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-separator {
|
||||
height: 2px;
|
||||
border-top: solid 1px $menu-separator-border-color;
|
||||
background-color: $menu-separator-background-color;
|
||||
margin: $menu-padding 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-arrow {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 9px;
|
||||
top: 9px;
|
||||
right: 0px;
|
||||
background: theme-image($theme-name, $menu-icon-arrow) no-repeat center center;
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-indent {
|
||||
margin-left: $menu-item-indent + $menu-padding + 2px; /* The 2px is the width of the seperator */
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-active {
|
||||
cursor: pointer;
|
||||
|
||||
.#{$prefix}menu-item-link {
|
||||
@include background-gradient($menu-item-active-background-color, 'matte');
|
||||
margin: 0px;
|
||||
border: 1px solid $menu-item-active-border-color;
|
||||
cursor: pointer;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-disabled {
|
||||
@include opacity(.5);
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
.#{$prefix}ie {
|
||||
.#{$prefix}menu-item-link {
|
||||
line-height: 17px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-disabled {
|
||||
.#{$prefix}menu-item-icon {
|
||||
@include opacity(.5);
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-text {
|
||||
// IE opacity/cleartype bug workaround
|
||||
background-color: $menu-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}strict & {
|
||||
.#{$prefix}menu-icon-separator {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.#{$prefix}menu-item-separator {
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}ie6,
|
||||
.#{$prefix}ie7,
|
||||
.#{$prefix}quirks .#{$prefix}ie8 {
|
||||
.#{$prefix}menu-item-link {
|
||||
padding-bottom: $menu-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if not $supports-gradients or $compile-all {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}menu-item-active .#{$prefix}menu-item-link {
|
||||
background: $menu-item-active-background-color theme-image($theme-name, $menu-item-active-background-image) repeat-x left top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}menu-date-item {
|
||||
border-color: #99BBE8;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,442 @@
|
|||
/**
|
||||
* @class Ext.Panel
|
||||
* Used to create the base structure of an Ext.Panel
|
||||
*/
|
||||
@mixin extjs-panel {
|
||||
.#{$prefix}panel,
|
||||
.#{$prefix}plain {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
// Workaround for disappearing right edge in IE6
|
||||
.#{$prefix}ie {
|
||||
.#{$prefix}panel-header,
|
||||
.#{$prefix}panel-header-tl,
|
||||
.#{$prefix}panel-header-tc,
|
||||
.#{$prefix}panel-header-tr,
|
||||
.#{$prefix}panel-header-ml,
|
||||
.#{$prefix}panel-header-mc,
|
||||
.#{$prefix}panel-header-mr,
|
||||
.#{$prefix}panel-header-bl,
|
||||
.#{$prefix}panel-header-bc,
|
||||
.#{$prefix}panel-header-br {
|
||||
zoom: 1;
|
||||
}
|
||||
}
|
||||
// Fix for IE8 clipping. EXTJSIV-1553
|
||||
.#{$prefix}ie8 {
|
||||
td.#{$prefix}frame-mc {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//panel header
|
||||
.#{$prefix}panel-header {
|
||||
padding: $panel-header-padding;
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-icon,
|
||||
.#{$prefix}window-header-icon {
|
||||
width:16px;
|
||||
height:16px;
|
||||
background-repeat:no-repeat;
|
||||
background-position:0 0;
|
||||
vertical-align:middle;
|
||||
margin-right:4px;
|
||||
margin-top:-1px;
|
||||
margin-bottom:-1px;
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-draggable,
|
||||
.#{$prefix}panel-header-draggable .#{$prefix}panel-header-text,
|
||||
.#{$prefix}window-header-draggable,
|
||||
.#{$prefix}window-header-draggable .#{$prefix}window-header-text{
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
// A ghost is just a Panel. The only extra it needs is opacity.
|
||||
// TODO: Make opacity a variable
|
||||
.#{$prefix}panel-ghost, .#{$prefix}window-ghost {
|
||||
@include opacity(0.65);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-horizontal, .#{$prefix}window-header-horizontal, .#{$prefix}btn-group-header-horizontal {
|
||||
.#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-vertical, .#{$prefix}window-header-vertical, .#{$prefix}btn-group-header-vertical {
|
||||
.#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical headers must be inline blocks so that they acquire width from the content
|
||||
.#{$prefix}panel-header-vertical, .#{$prefix}panel-header-vertical .#{$prefix}panel-header-body,
|
||||
.#{$prefix}btn-group-header-vertical, .#{$prefix}btn-group-header-vertical .#{$prefix}btn-group-header-body,
|
||||
.#{$prefix}window-header-vertical, .#{$prefix}window-header-vertical .#{$prefix}window-header-body {
|
||||
display: -moz-inline-stack;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-text {
|
||||
@include no-select;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-left,
|
||||
.#{$prefix}panel-header-right {
|
||||
.#{$prefix}vml-base {
|
||||
left: -3px !important;
|
||||
}
|
||||
}
|
||||
|
||||
//panel body
|
||||
.#{$prefix}panel-body {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
font-size: $panel-body-font-size;
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-vertical {
|
||||
.#{$prefix}surface {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-plain-vertical {
|
||||
.#{$prefix}surface {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.#{$prefix}panel-collapsed {
|
||||
.#{$prefix}panel-header-collapsed-border-top {
|
||||
border-bottom-width: $panel-header-border-width !important;
|
||||
}
|
||||
.#{$prefix}panel-header-collapsed-border-right {
|
||||
border-left-width: $panel-header-border-width !important;
|
||||
}
|
||||
.#{$prefix}panel-header-collapsed-border-bottom {
|
||||
border-top-width: $panel-header-border-width !important;
|
||||
}
|
||||
.#{$prefix}panel-header-collapsed-border-left {
|
||||
border-right-width: $panel-header-border-width !important;
|
||||
}
|
||||
}
|
||||
|
||||
@if not $supports-gradients or $compile-all {
|
||||
.#{$prefix}nlg .#{$prefix}panel-header-vertical {
|
||||
.#{$prefix}frame-mc {
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-panel-uis == true {
|
||||
@include extjs-panel-ui(
|
||||
'default',
|
||||
|
||||
$ui-base-color: $panel-base-color,
|
||||
$ui-border-width: $panel-border-width,
|
||||
$ui-border-color: $panel-border-color,
|
||||
$ui-border-radius: $panel-border-radius,
|
||||
|
||||
$ui-header-color: $panel-header-color,
|
||||
$ui-header-font-size: $panel-header-font-size,
|
||||
$ui-header-font-weight: $panel-header-font-weight,
|
||||
$ui-header-border-color: $panel-header-border-color,
|
||||
$ui-header-background-color: $panel-header-background-color,
|
||||
$ui-header-background-gradient: $panel-header-background-gradient,
|
||||
|
||||
$ui-body-color: $panel-body-color,
|
||||
$ui-body-border-color: $panel-body-border-color,
|
||||
$ui-body-border-width: 1px,
|
||||
$ui-body-background-color: $panel-body-background-color
|
||||
);
|
||||
|
||||
@include extjs-panel-ui(
|
||||
'default-framed',
|
||||
|
||||
$ui-base-color: $panel-base-color,
|
||||
$ui-border-width: $panel-frame-border-width,
|
||||
$ui-border-color: $panel-frame-border-color,
|
||||
$ui-border-radius: $panel-frame-border-radius,
|
||||
|
||||
$ui-header-color: $panel-header-color,
|
||||
$ui-header-font-size: $panel-header-font-size,
|
||||
$ui-header-font-weight: $panel-header-font-weight,
|
||||
$ui-header-border-color: $panel-frame-border-color,
|
||||
$ui-header-background-color: $panel-header-background-color,
|
||||
$ui-header-background-gradient: $panel-header-background-gradient,
|
||||
|
||||
$ui-body-color: $panel-body-color,
|
||||
$ui-body-border-color: $panel-body-border-color,
|
||||
$ui-body-border-width: 0,
|
||||
$ui-body-background-color: $panel-frame-background-color
|
||||
);
|
||||
}
|
||||
|
||||
.x-panel-header-plain,
|
||||
.x-panel-body-plain {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @class Ext.Panel
|
||||
* Used to create a visual theme for an Ext.Panel
|
||||
*/
|
||||
@mixin extjs-panel-ui(
|
||||
$ui-label,
|
||||
|
||||
$ui-base-color: null,
|
||||
|
||||
$ui-border-color: null,
|
||||
$ui-border-radius: null,
|
||||
$ui-border-width: 0,
|
||||
|
||||
$ui-header-color: null,
|
||||
$ui-header-font-family: $panel-header-font-family,
|
||||
$ui-header-font-size: $panel-header-font-size,
|
||||
$ui-header-font-weight: $panel-header-font-weight,
|
||||
$ui-header-border-color: $ui-border-color,
|
||||
$ui-header-background-color: null,
|
||||
$ui-header-background-gradient: matte,
|
||||
$ui-header-inner-border-color: null,
|
||||
|
||||
$ui-body-color: null,
|
||||
$ui-body-border-color: null,
|
||||
$ui-body-border-width: null,
|
||||
$ui-body-border-style: solid,
|
||||
$ui-body-background-color: null,
|
||||
$ui-body-font-size: null,
|
||||
$ui-body-font-weight: null
|
||||
){
|
||||
@if $ui-base-color != null {
|
||||
@if $ui-border-color == null { $ui-border-color: $ui-base-color; }
|
||||
|
||||
@if $ui-header-color == null { $ui-header-color: #fff; }
|
||||
@if $ui-header-background-color == null { $ui-header-background-color: lighten($ui-base-color, 15); }
|
||||
}
|
||||
|
||||
@if $ui-header-inner-border-color == null and $ui-header-background-color != null {
|
||||
$ui-header-inner-border-color: lighten($ui-header-background-color, 10);
|
||||
}
|
||||
|
||||
.#{$prefix}panel-#{$ui-label} {
|
||||
@if $ui-border-color != null { border-color: $ui-border-color; }
|
||||
}
|
||||
|
||||
// header
|
||||
.#{$prefix}panel-header-#{$ui-label} {
|
||||
@if $ui-header-font-size != null { font-size: $ui-header-font-size; }
|
||||
line-height: $panel-header-line-height;
|
||||
|
||||
@if $ui-header-border-color != null {
|
||||
border-color: $ui-header-border-color;
|
||||
border-width: $panel-header-border-width;
|
||||
border-style: $panel-header-border-style;
|
||||
}
|
||||
|
||||
@if $supports-gradients or $compile-all {
|
||||
@if $ui-header-background-color != null { @include background-gradient($ui-header-background-color, $ui-header-background-gradient); }
|
||||
|
||||
@if $panel-header-inner-border and $ui-header-inner-border-color != null {
|
||||
@include inner-border(
|
||||
$width: $panel-header-inner-border-width,
|
||||
$color: $ui-header-inner-border-color
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// header background images
|
||||
@if $ui-header-background-color != null and $ui-header-background-gradient != null {
|
||||
@if not $supports-gradients or $compile-all {
|
||||
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-top {
|
||||
background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-top-bg.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
|
||||
background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-bottom-bg.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-left {
|
||||
background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-left-bg.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
|
||||
background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-right-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// header text
|
||||
.#{$prefix}panel-header-text-#{$ui-label} {
|
||||
@if $ui-header-color != null { color: $ui-header-color; }
|
||||
|
||||
@if $ui-header-font-size != null { font-size: $ui-header-font-size; }
|
||||
@if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; }
|
||||
@if $ui-header-font-family != null { font-family: $ui-header-font-family; }
|
||||
}
|
||||
|
||||
// body
|
||||
.#{$prefix}panel-body-#{$ui-label} {
|
||||
@if $ui-body-background-color != null { background: $ui-body-background-color; }
|
||||
@if $ui-body-border-color != null { border-color: $ui-body-border-color; }
|
||||
@if $ui-body-color != null { color: $ui-body-color; }
|
||||
@if $ui-body-font-size != null { font-size: $ui-body-font-size; }
|
||||
@if $ui-body-font-weight != null { font-size: $ui-body-font-weight; }
|
||||
|
||||
@if $ui-body-border-width != null {
|
||||
border-width: $ui-body-border-width;
|
||||
@if $ui-body-border-style != null { border-style: $ui-body-border-style; }
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}panel-collapsed {
|
||||
.#{$prefix}window-header-#{$ui-label},
|
||||
.#{$prefix}panel-header-#{$ui-label} {
|
||||
@if $ui-body-border-color != null { border-color: $ui-body-border-color; }
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-vertical {
|
||||
@if $ui-body-border-color != null { border-color: $ui-body-border-color; }
|
||||
}
|
||||
|
||||
@if $ui-base-color != null {
|
||||
@if $supports-gradients or $compile-all {
|
||||
.#{$prefix}panel-header-#{$ui-label}-left,
|
||||
.#{$prefix}panel-header-#{$ui-label}-right {
|
||||
@include background-gradient($ui-header-background-color, $ui-header-background-gradient, right);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $ui-border-radius != null {
|
||||
@include x-frame(
|
||||
'panel',
|
||||
$ui: '#{$ui-label}',
|
||||
|
||||
/* Radius, width, padding and background-color */
|
||||
$border-radius : $ui-border-radius,
|
||||
$border-width : $ui-border-width,
|
||||
$padding : $panel-frame-padding,
|
||||
$background-color: $ui-body-background-color
|
||||
);
|
||||
|
||||
|
||||
@include x-frame('panel-header', '#{$ui-label}-top', top($ui-border-radius) right($ui-border-radius) 0 0, $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
|
||||
@include x-frame('panel-header', '#{$ui-label}-right', 0 right($ui-border-radius) bottom($ui-border-radius) 0, $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
|
||||
@include x-frame('panel-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
|
||||
@include x-frame('panel-header', '#{$ui-label}-left', top($ui-border-radius) 0 0 left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-top {
|
||||
@include inner-border(1px 1px 0 1px, $ui-header-inner-border-color);
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-right {
|
||||
@include inner-border(1px 1px 1px 0, $ui-header-inner-border-color);
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-bottom {
|
||||
@include inner-border(0 1px 1px 1px, $ui-header-inner-border-color);
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-left {
|
||||
@include inner-border(1px 0 1px 1px, $ui-header-inner-border-color);
|
||||
}
|
||||
} @else {
|
||||
.#{$prefix}panel-collapsed {
|
||||
.#{$prefix}panel-header-#{$ui-label}-top {
|
||||
@include border-bottom-radius($ui-border-radius);
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-right {
|
||||
@include border-left-radius($ui-border-radius);
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-bottom {
|
||||
@include border-top-radius($ui-border-radius);
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-left {
|
||||
@include border-right-radius($ui-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
|
||||
background-position: top right;
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-top {
|
||||
@include inner-border(1px 0 0 0, $ui-header-inner-border-color);
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-right {
|
||||
@include inner-border(0 1px 0 0, $ui-header-inner-border-color);
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-bottom {
|
||||
@include inner-border(0 0 1px, $ui-header-inner-border-color);
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-left {
|
||||
@include inner-border(0 0 0 1px, $ui-header-inner-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
|
||||
background-position: bottom left;
|
||||
}
|
||||
|
||||
@if $ui-border-radius != null {
|
||||
.#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-top {
|
||||
border-bottom-width: 1px !important;
|
||||
}
|
||||
|
||||
.#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-right {
|
||||
border-left-width: 1px !important;
|
||||
}
|
||||
|
||||
.#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-bottom {
|
||||
border-top-width: 1px !important;
|
||||
}
|
||||
|
||||
.#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-left {
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-collapsed {
|
||||
@include border-radius($ui-border-radius);
|
||||
}
|
||||
|
||||
@include x-frame('panel-header', '#{$ui-label}-collapsed-top', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
|
||||
@include x-frame('panel-header', '#{$ui-label}-collapsed-right', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
|
||||
@include x-frame('panel-header', '#{$ui-label}-collapsed-bottom', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
|
||||
@include x-frame('panel-header', '#{$ui-label}-collapsed-left', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
|
||||
}
|
||||
|
||||
//background positioning of images
|
||||
.#{$prefix}panel-header-#{$ui-label}-right-tc,
|
||||
.#{$prefix}panel-header-#{$ui-label}-right-mc,
|
||||
.#{$prefix}panel-header-#{$ui-label}-right-bc {
|
||||
background-position: right 0;
|
||||
}
|
||||
|
||||
.#{$prefix}panel-header-#{$ui-label}-bottom-tc,
|
||||
.#{$prefix}panel-header-#{$ui-label}-bottom-mc,
|
||||
.#{$prefix}panel-header-#{$ui-label}-bottom-bc {
|
||||
background-position: 0 bottom;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
@mixin extjs-progress {
|
||||
.#{$prefix}progress {
|
||||
border-width: $progress-border-width;
|
||||
border-style: solid;
|
||||
@include border-radius($progress-border-radius);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
height: $progress-height;
|
||||
}
|
||||
|
||||
.#{$prefix}progress-bar {
|
||||
height: $progress-height - ($progress-border-width * 2);
|
||||
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
|
||||
width: 0;
|
||||
|
||||
@include border-radius($progress-border-radius);
|
||||
border-right: 1px solid;
|
||||
border-top: 1px solid;
|
||||
}
|
||||
|
||||
.#{$prefix}progress-text {
|
||||
overflow: hidden;
|
||||
|
||||
position: absolute;
|
||||
|
||||
padding: 0 5px;
|
||||
|
||||
height: $progress-height - ($progress-border-width * 2);
|
||||
|
||||
font-weight: $progress-text-font-weight;
|
||||
font-size: $progress-text-font-size;
|
||||
line-height: 16px;
|
||||
text-align: $progress-text-text-align;
|
||||
}
|
||||
|
||||
.#{$prefix}progress-text-back {
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
@if $include-ie or $compile-all {
|
||||
.#{$prefix}strict .#{$prefix}progress {
|
||||
height: $progress-height - ($progress-border-width * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@include extjs-progress-ui(
|
||||
'default',
|
||||
|
||||
$ui-background-color: $progress-background-color,
|
||||
$ui-border-color: $progress-border-color,
|
||||
|
||||
$ui-bar-background-color: $progress-bar-background-color,
|
||||
|
||||
$ui-color-front: $progress-text-color-front,
|
||||
$ui-color-back: $progress-text-color-back
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @mixin extjs-progress-ui
|
||||
*/
|
||||
@mixin extjs-progress-ui(
|
||||
$ui-label,
|
||||
|
||||
$ui-base-color: null,
|
||||
|
||||
$ui-border-color: null,
|
||||
$ui-background-color: null,
|
||||
|
||||
$ui-bar-background-color: null,
|
||||
$ui-bar-background-gradient: glossy,
|
||||
|
||||
$ui-color-front: null,
|
||||
$ui-color-back: null
|
||||
){
|
||||
@if $ui-base-color != null {
|
||||
@if $ui-border-color == null { $ui-border-color: $ui-base-color; }
|
||||
@if $ui-bar-background-color == null { $ui-bar-background-color: $ui-base-color; }
|
||||
@if $ui-color-front == null { $ui-color-front: lighten($ui-base-color, 60); }
|
||||
@if $ui-color-back == null { $ui-color-back: darken($ui-base-color, 60); }
|
||||
}
|
||||
|
||||
.#{$prefix}progress-#{$ui-label} {
|
||||
@if $ui-border-color != null { border-color: $ui-border-color; }
|
||||
|
||||
.#{$prefix}progress-bar {
|
||||
@if $ui-border-color != null { border-right-color: $ui-border-color; }
|
||||
@if $ui-border-color != null { border-top-color: lighten($ui-border-color, 25); }
|
||||
|
||||
@if $ui-bar-background-color != null { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient); }
|
||||
}
|
||||
|
||||
.#{$prefix}progress-text {
|
||||
@if $ui-color-front != null { color: $ui-color-front; }
|
||||
}
|
||||
|
||||
.#{$prefix}progress-text-back {
|
||||
@if $ui-color-back != null { color: $ui-color-back; }
|
||||
}
|
||||
}
|
||||
|
||||
@if $ui-background-color != null {
|
||||
@if not $supports-gradients or $compile-all {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}progress-#{$ui-label} {
|
||||
.#{$prefix}progress-bar {
|
||||
background: theme-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif') repeat-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
@mixin extjs-qtip {
|
||||
.#{$prefix}tip {
|
||||
position: absolute;
|
||||
overflow: visible; /*pointer needs to be able to stick out*/
|
||||
border-color: $tip-border-color;
|
||||
|
||||
.#{$prefix}tip-header {
|
||||
.#{$prefix}box-item {
|
||||
padding: $tip-header-padding;
|
||||
}
|
||||
|
||||
.#{$prefix}tool {
|
||||
padding: 0px 1px 0 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include x-frame(
|
||||
$cls: 'tip',
|
||||
$border-radius: $tip-border-radius,
|
||||
$border-width: $tip-border-width,
|
||||
$background-color: $tip-background-color,
|
||||
$background-gradient: $tip-background-gradient,
|
||||
$table: true
|
||||
);
|
||||
|
||||
.#{$prefix}tip-header-text {
|
||||
@include no-select;
|
||||
|
||||
color: $tip-header-color;
|
||||
font-size: $tip-header-font-size;
|
||||
font-weight: $tip-header-font-weight;
|
||||
}
|
||||
|
||||
.#{$prefix}tip-header-draggable {
|
||||
.#{$prefix}tip-header-text {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
||||
// Tip is a Panel. It uses dock layout. Body style must be the same
|
||||
.#{$prefix}tip-body,
|
||||
.#{$prefix}form-invalid-tip-body {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: $tip-body-padding;
|
||||
}
|
||||
|
||||
.#{$prefix}tip-header,
|
||||
.#{$prefix}tip-body,
|
||||
.#{$prefix}form-invalid-tip-body {
|
||||
color: $tip-body-color;
|
||||
font-size: $tip-body-font-size;
|
||||
font-weight: $tip-body-font-weight;
|
||||
a {
|
||||
color: $tip-body-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tip-anchor {
|
||||
position: absolute;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 5px;
|
||||
border-color: $tip-border-color;
|
||||
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.#{$prefix}border-box .#{$prefix}tip-anchor {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.#{$prefix}tip-anchor-top {
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
|
||||
@if $include_ie {
|
||||
_border-top-color: pink;
|
||||
_border-left-color: pink;
|
||||
_border-right-color: pink;
|
||||
_filter: chroma(color=pink);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tip-anchor-bottom {
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
|
||||
@if $include_ie {
|
||||
_border-bottom-color: pink;
|
||||
_border-left-color: pink;
|
||||
_border-right-color: pink;
|
||||
_filter: chroma(color=pink);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tip-anchor-left {
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
|
||||
@if $include-ie {
|
||||
_border-top-color: pink;
|
||||
_border-bottom-color: pink;
|
||||
_border-left-color: pink;
|
||||
_filter: chroma(color=pink);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tip-anchor-right {
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-right-color: transparent;
|
||||
|
||||
@if $include-ie {
|
||||
_border-top-color: pink;
|
||||
_border-bottom-color: pink;
|
||||
_border-right-color: pink;
|
||||
_filter: chroma(color=pink);
|
||||
}
|
||||
}
|
||||
|
||||
//error qtip
|
||||
.#{$prefix}form-invalid-tip {
|
||||
border-color: $tip-error-border-color;
|
||||
|
||||
@include inner-border(
|
||||
$width: 1px,
|
||||
$color: $tip-error-inner-border-color
|
||||
);
|
||||
}
|
||||
|
||||
.#{$prefix}form-invalid-tip-body {
|
||||
background: 1px 1px no-repeat;
|
||||
@include theme-background-image($theme-name, 'form/exclamation.gif');
|
||||
padding-left: 22px;
|
||||
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
&.last {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include x-frame(
|
||||
$cls: 'form-invalid-tip',
|
||||
$ui: 'default',
|
||||
$border-radius: $tip-error-border-radius,
|
||||
$border-width: $tip-error-border-width,
|
||||
$background-color: $tip-error-background-color,
|
||||
$background-gradient: $tip-background-gradient,
|
||||
$table: true
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
@mixin extjs-slider {
|
||||
.#{$prefix}slider {
|
||||
zoom:1;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-inner {
|
||||
position:relative;
|
||||
left:0;
|
||||
top:0;
|
||||
overflow:visible;
|
||||
zoom:1;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-focus {
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
width:1px;
|
||||
height:1px;
|
||||
line-height:1px;
|
||||
font-size:1px;
|
||||
-moz-outline:0 none;
|
||||
outline:0 none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select:none;
|
||||
-webkit-user-select:ignore;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* Horizontal styles */
|
||||
.#{$prefix}slider-horz {
|
||||
padding-left:7px;
|
||||
background:transparent no-repeat 0 -24px;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-horz .#{$prefix}slider-end {
|
||||
padding-right:7px;
|
||||
zoom:1;
|
||||
background:transparent no-repeat right -46px;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-horz .#{$prefix}slider-inner {
|
||||
background:transparent repeat-x 0 -2px;
|
||||
height:18px;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-horz .#{$prefix}slider-thumb {
|
||||
width:14px;
|
||||
height:15px;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:1px;
|
||||
background:transparent no-repeat 0 0;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-horz .#{$prefix}slider-thumb-over {
|
||||
background-position: -14px -15px;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-horz .#{$prefix}slider-thumb-drag {
|
||||
background-position: -28px -30px;
|
||||
}
|
||||
|
||||
/* Vertical styles */
|
||||
.#{$prefix}slider-vert {
|
||||
padding-top:7px;
|
||||
background:transparent no-repeat -44px 0;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-vert .#{$prefix}slider-end {
|
||||
padding-bottom:7px;
|
||||
zoom:1;
|
||||
background:transparent no-repeat -22px bottom;
|
||||
width:22px;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-vert .#{$prefix}slider-inner {
|
||||
background:transparent repeat-y 0 0;
|
||||
width:22px;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-vert .#{$prefix}slider-thumb {
|
||||
width:15px;
|
||||
height:14px;
|
||||
position:absolute;
|
||||
left:3px;
|
||||
bottom:0;
|
||||
background:transparent no-repeat 0 0;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-vert .#{$prefix}slider-thumb-over {
|
||||
background-position: -15px -14px;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-vert .#{$prefix}slider-thumb-drag {
|
||||
background-position: -30px -28px;
|
||||
}
|
||||
|
||||
.#{$prefix}slider-horz,
|
||||
.#{$prefix}slider-horz .#{$prefix}slider-end,
|
||||
.#{$prefix}slider-horz .#{$prefix}slider-inner {
|
||||
background-image: theme-image($theme-name, 'slider/slider-bg.png');
|
||||
}
|
||||
|
||||
.#{$prefix}slider-horz .#{$prefix}slider-thumb {
|
||||
background-image: theme-image($theme-name, 'slider/slider-thumb.png');
|
||||
}
|
||||
|
||||
.#{$prefix}slider-vert,
|
||||
.#{$prefix}slider-vert .#{$prefix}slider-end,
|
||||
.#{$prefix}slider-vert .#{$prefix}slider-inner {
|
||||
background-image: theme-image($theme-name, 'slider/slider-v-bg.png');
|
||||
}
|
||||
|
||||
.#{$prefix}slider-vert .#{$prefix}slider-thumb {
|
||||
background-image: theme-image($theme-name, 'slider/slider-v-thumb.png');
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
.#{$prefix}ie6 {
|
||||
.#{$prefix}slider-horz,
|
||||
.#{$prefix}slider-horz .#{$prefix}slider-end,
|
||||
.#{$prefix}slider-horz .#{$prefix}slider-inner {
|
||||
background-image: theme-image($theme-name, 'slider/slider-bg.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}slider-horz .#{$prefix}slider-thumb {
|
||||
background-image: theme-image($theme-name, 'slider/slider-thumb.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}slider-vert,
|
||||
.#{$prefix}slider-vert .#{$prefix}slider-end,
|
||||
.#{$prefix}slider-vert .#{$prefix}slider-inner {
|
||||
background-image: theme-image($theme-name, 'slider/slider-v-bg.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}slider-vert .#{$prefix}slider-thumb {
|
||||
background-image: theme-image($theme-name, 'slider/slider-v-thumb.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,476 @@
|
|||
/**
|
||||
* @class Ext.Tab
|
||||
*/
|
||||
@mixin extjs-tab {
|
||||
@include x-frame(
|
||||
$cls: 'tab',
|
||||
$ui: 'default-top',
|
||||
$border-radius: $tab-top-border-radius,
|
||||
$border-width: $tab-top-border-width,
|
||||
$background-color: $tab-base-color,
|
||||
$background-gradient: $tab-background-gradient,
|
||||
$background-direction: top,
|
||||
$table: true
|
||||
);
|
||||
|
||||
@include x-frame(
|
||||
$cls: 'tab',
|
||||
$ui: 'default-bottom',
|
||||
$border-radius: $tab-bottom-border-radius,
|
||||
$border-width: $tab-bottom-border-width,
|
||||
$background-color: $tab-base-color,
|
||||
$background-gradient: $tab-background-gradient,
|
||||
$background-direction: bottom,
|
||||
$table: true
|
||||
);
|
||||
|
||||
.#{$prefix}tab {
|
||||
z-index: 1;
|
||||
margin: 0 0 0 $tab-spacing;
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
white-space: nowrap;
|
||||
height: $tab-height;
|
||||
border-color: $tab-border-color;
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
|
||||
* {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
em {
|
||||
display: block;
|
||||
padding: 0 6px;
|
||||
line-height: 1px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
font-size: $tab-font-size;
|
||||
@if $tab-font-weight {
|
||||
font-weight: $tab-font-weight;
|
||||
}
|
||||
@if $tab-font-family {
|
||||
$font-family: $tab-font-family;
|
||||
}
|
||||
|
||||
color: $tab-color;
|
||||
outline: 0 none;
|
||||
|
||||
overflow: hidden;
|
||||
overflow-x: visible;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tab-inner {
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 -2px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}border-box {
|
||||
.#{$prefix}tab-default-top {
|
||||
height: $tab-height + top($tabbar-top-strip-border-width);
|
||||
}
|
||||
.#{$prefix}tab-default-bottom {
|
||||
height: $tab-height + bottom($tabbar-bottom-strip-border-width);
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
* html .#{$prefix}ie {
|
||||
.#{$prefix}tab button {
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}strict .#{$prefix}ie6,
|
||||
.#{$prefix}strict .#{$prefix}ie7 {
|
||||
.#{$prefix}tab .#{$prefix}frame-mc {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}ie .#{$prefix}tab-active button:active {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
$framepad: max(top($tab-top-border-radius), right($tab-top-border-radius)) - top($tab-top-border-width);
|
||||
|
||||
.#{$prefix}tab-default-top {
|
||||
@if $tab-inner-border {
|
||||
@include inner-border(
|
||||
$width: $tab-top-inner-border-width,
|
||||
$color: $tab-inner-border-color
|
||||
);
|
||||
}
|
||||
|
||||
border-bottom: 1px solid $tabbar-strip-border-color !important;
|
||||
|
||||
em {
|
||||
padding-bottom: $framepad;
|
||||
}
|
||||
|
||||
button,
|
||||
.#{$prefix}tab-inner {
|
||||
height: $tab-height - $framepad * 2 - top($tab-top-border-width);
|
||||
line-height: $tab-height - $framepad * 2 - top($tab-top-border-width);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}nbr .#{$prefix}tab-default-top {
|
||||
border-bottom-width: 1px !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tab-default-top-active {
|
||||
border-bottom-color: $tabbar-strip-background-color !important;
|
||||
}
|
||||
|
||||
$framepad: max(bottom($tab-bottom-border-radius), left($tab-bottom-border-radius)) - bottom($tab-bottom-border-width);
|
||||
|
||||
.#{$prefix}tab-default-bottom {
|
||||
@if $tab-inner-border {
|
||||
@include inner-border(
|
||||
$width: $tab-bottom-inner-border-width,
|
||||
$color: $tab-inner-border-color
|
||||
);
|
||||
}
|
||||
|
||||
border-top: 1px solid $tabbar-strip-border-color !important;
|
||||
|
||||
@include inner-border(
|
||||
$width: $tab-bottom-inner-border-width,
|
||||
$color: $tab-inner-border-color
|
||||
);
|
||||
|
||||
em {
|
||||
padding-top: $framepad;
|
||||
}
|
||||
|
||||
button,
|
||||
.#{$prefix}tab-inner {
|
||||
height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
|
||||
line-height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}nbr .#{$prefix}tab-default-bottom {
|
||||
border-top-width: 1px !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tab-default-bottom-active {
|
||||
border-top-color: $tabbar-strip-background-color !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tab-default-disabled {
|
||||
cursor: default;
|
||||
|
||||
* {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
border-color: $tab-border-color-disabled;
|
||||
@include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled);
|
||||
|
||||
button {
|
||||
color: $tab-color-disabled !important;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tab-icon-text-left {
|
||||
.#{$prefix}tab-inner {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tab {
|
||||
button, a {
|
||||
position: relative;
|
||||
|
||||
.#{$prefix}tab-icon {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
top: 0;
|
||||
left:0;
|
||||
right:auto;
|
||||
bottom:0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//over
|
||||
.#{$prefix}tab-over {
|
||||
@if $tab-border-color-over != $tab-border-color {
|
||||
border-color: $tab-border-color-over;
|
||||
}
|
||||
|
||||
button {
|
||||
@if $tab-color-over != $tab-color {
|
||||
color: $tab-color-over;
|
||||
}
|
||||
@if $tab-font-weight-over != $tab-font-weight {
|
||||
font-weight: $tab-font-weight-over;
|
||||
}
|
||||
@if $tab-font-size-over != $tab-font-size {
|
||||
font-size: $tab-font-size-over;
|
||||
}
|
||||
@if $tab-font-family-over != $tab-font-family {
|
||||
font-family: $tab-font-family-over;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tab-top-over {
|
||||
@include background-gradient($tab-base-color-over, $tab-background-gradient-over, top);
|
||||
}
|
||||
.#{$prefix}tab-bottom-over {
|
||||
@include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom);
|
||||
}
|
||||
|
||||
//active
|
||||
.#{$prefix}tab-active {
|
||||
z-index: 3;
|
||||
@if $tab-border-color-active != $tab-border-color {
|
||||
border-color: $tab-border-color-active;
|
||||
}
|
||||
|
||||
button {
|
||||
@if $tab-color-active != $tab-color {
|
||||
color: $tab-color-active;
|
||||
}
|
||||
@if $tab-font-weight-active != $tab-font-weight {
|
||||
font-weight: $tab-font-weight-active;
|
||||
}
|
||||
@if $tab-font-size-active != $tab-font-size {
|
||||
font-size: $tab-font-size-active;
|
||||
}
|
||||
@if $tab-font-family-active != $tab-font-family {
|
||||
font-family: $tab-font-family-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tab-top-active {
|
||||
@include background-gradient($tab-base-color-active, $tab-background-gradient-active, top);
|
||||
}
|
||||
.#{$prefix}tab-bottom-active {
|
||||
@include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom);
|
||||
}
|
||||
|
||||
//disabled
|
||||
.#{$prefix}tab-disabled {
|
||||
@if $tab-border-color-disabled != $tab-border-color {
|
||||
border-color: $tab-border-color-disabled;
|
||||
}
|
||||
|
||||
button {
|
||||
@if $tab-color-disabled != $tab-color {
|
||||
color: $tab-color-disabled;
|
||||
}
|
||||
@if $tab-font-weight-disabled != $tab-font-weight {
|
||||
font-weight: $tab-font-weight-disabled;
|
||||
}
|
||||
@if $tab-font-size-disabled != $tab-font-size {
|
||||
font-size: $tab-font-size-disabled;
|
||||
}
|
||||
@if $tab-font-family-disabled != $tab-font-family {
|
||||
font-family: $tab-font-family-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tab-top-disabled {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
@include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, top);
|
||||
}
|
||||
.#{$prefix}tab-bottom-disabled {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
@include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, bottom);
|
||||
}
|
||||
|
||||
@if not $supports-gradients or $compile-all {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}tab-top { background-image: theme-image($theme-name, 'tab/tab-default-top-bg.gif'); }
|
||||
.#{$prefix}tab-bottom { background-image: theme-image($theme-name, 'tab/tab-default-bottom-bg.gif'); }
|
||||
|
||||
.#{$prefix}tab-top-over { background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif'); }
|
||||
.#{$prefix}tab-bottom-over { background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); }
|
||||
|
||||
.#{$prefix}tab-top-active { background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif'); }
|
||||
.#{$prefix}tab-bottom-active { background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); }
|
||||
|
||||
.#{$prefix}tab-top-disabled { background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; }
|
||||
.#{$prefix}tab-bottom-disabled { background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; }
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tab-closable em {
|
||||
padding-right: $tab-closable-icon-width + 3;
|
||||
}
|
||||
|
||||
.#{$prefix}tab-close-btn {
|
||||
position: absolute !important;
|
||||
top: $tab-closable-icon-top;
|
||||
right: $tab-closable-icon-right;
|
||||
width: $tab-closable-icon-width;
|
||||
height: $tab-closable-icon-height;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
text-indent: -999px;
|
||||
background: theme-image($theme-name, $tab-closable-icon) no-repeat;
|
||||
@include opacity(.6);
|
||||
}
|
||||
.#{$prefix}tab-close-btn:hover {
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
@if not $supports-border-radius or $compile-all {
|
||||
.#{$prefix}nbr {
|
||||
.#{$prefix}tab-top-over {
|
||||
.#{$prefix}frame-tl,
|
||||
.#{$prefix}frame-bl,
|
||||
.#{$prefix}frame-tr,
|
||||
.#{$prefix}frame-br,
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bc {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-top-over-corners.gif');
|
||||
}
|
||||
.#{$prefix}frame-ml,
|
||||
.#{$prefix}frame-mr {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-top-over-sides.gif');
|
||||
}
|
||||
.#{$prefix}frame-mc {
|
||||
background-color: $tab-base-color-over;
|
||||
background-repeat: repeat-x;
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tab-bottom-over {
|
||||
.#{$prefix}frame-tl,
|
||||
.#{$prefix}frame-bl,
|
||||
.#{$prefix}frame-tr,
|
||||
.#{$prefix}frame-br,
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bc {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-corners.gif');
|
||||
}
|
||||
.#{$prefix}frame-ml,
|
||||
.#{$prefix}frame-mr {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-sides.gif');
|
||||
}
|
||||
.#{$prefix}frame-mc {
|
||||
background-color: $tab-base-color-over;
|
||||
background-repeat: repeat-x;
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tab-top-active {
|
||||
.#{$prefix}frame-tl,
|
||||
.#{$prefix}frame-bl,
|
||||
.#{$prefix}frame-tr,
|
||||
.#{$prefix}frame-br,
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bc {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-top-active-corners.gif');
|
||||
}
|
||||
.#{$prefix}frame-ml,
|
||||
.#{$prefix}frame-mr {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-top-active-sides.gif');
|
||||
}
|
||||
.#{$prefix}frame-mc {
|
||||
background-color: $tab-base-color-active;
|
||||
background-repeat: repeat-x;
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tab-bottom-active {
|
||||
.#{$prefix}frame-tl,
|
||||
.#{$prefix}frame-bl,
|
||||
.#{$prefix}frame-tr,
|
||||
.#{$prefix}frame-br,
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bc {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-corners.gif');
|
||||
}
|
||||
.#{$prefix}frame-ml,
|
||||
.#{$prefix}frame-mr {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-sides.gif');
|
||||
}
|
||||
.#{$prefix}frame-mc {
|
||||
background-color: $tab-base-color-active;
|
||||
background-repeat: repeat-x;
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tab-top-disabled {
|
||||
.#{$prefix}frame-tl,
|
||||
.#{$prefix}frame-bl,
|
||||
.#{$prefix}frame-tr,
|
||||
.#{$prefix}frame-br,
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bc {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-corners.gif');
|
||||
}
|
||||
.#{$prefix}frame-ml,
|
||||
.#{$prefix}frame-mr {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-sides.gif');
|
||||
}
|
||||
.#{$prefix}frame-mc {
|
||||
background-repeat: repeat-x;
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tab-bottom-disabled {
|
||||
.#{$prefix}frame-tl,
|
||||
.#{$prefix}frame-bl,
|
||||
.#{$prefix}frame-tr,
|
||||
.#{$prefix}frame-br,
|
||||
.#{$prefix}frame-tc,
|
||||
.#{$prefix}frame-bc {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif');
|
||||
}
|
||||
.#{$prefix}frame-ml,
|
||||
.#{$prefix}frame-mr {
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif');
|
||||
}
|
||||
.#{$prefix}frame-mc {
|
||||
background-repeat: repeat-x;
|
||||
background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
/**
|
||||
* @class Ext.tab.Bar
|
||||
*/
|
||||
@mixin extjs-tabbar {
|
||||
.#{$prefix}tab-bar {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
@include background-gradient($tabbar-base-color, $tabbar-background-gradient);
|
||||
font-size: $tab-font-size;
|
||||
}
|
||||
|
||||
.#{$prefix}nlg .#{$prefix}tab-bar {
|
||||
background-image: theme-image($theme-name, 'tab-bar/tab-bar-bg.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}tab-bar-default-plain,
|
||||
.#{$prefix}nlg .#{$prefix}tab-bar-default-plain {
|
||||
background: transparent none;
|
||||
}
|
||||
|
||||
|
||||
.#{$prefix}tab-bar-body {
|
||||
border-style: solid;
|
||||
border-color: $tabbar-border-color;
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
@mixin tab-bar-top($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
|
||||
.#{$prefix}#{$toolbarCls} {
|
||||
.#{$prefix}#{$bodyCls} {
|
||||
height: $tab-height;
|
||||
border-width: $body-border-width;
|
||||
padding: $body-padding;
|
||||
}
|
||||
|
||||
.#{$prefix}#{$stripCls} {
|
||||
/*position strip from top rather than bottom to avoid off-by-one error in IE6*/
|
||||
top: $tab-height + top($body-border-width) + top($body-padding);
|
||||
border-width: $strip-border-width;
|
||||
height: $strip-height - vertical($strip-border-width);
|
||||
}
|
||||
}
|
||||
.#{$prefix}border-box {
|
||||
.#{$prefix}#{$toolbarCls} {
|
||||
.#{$prefix}#{$bodyCls} {
|
||||
height: $tab-height + vertical($body-border-width) + vertical($body-padding);
|
||||
}
|
||||
|
||||
.#{$prefix}#{$stripCls} {
|
||||
height: $strip-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tab-bar-bottom($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
|
||||
.#{$prefix}#{$toolbarCls} {
|
||||
.#{$prefix}#{$bodyCls} {
|
||||
height: $tab-height;
|
||||
border-width: $body-border-width;
|
||||
padding: $body-padding;
|
||||
|
||||
.#{$prefix}box-inner {
|
||||
position: relative;
|
||||
top: 0 - bottom($strip-border-width);
|
||||
}
|
||||
|
||||
.#{$prefix}box-scroller,
|
||||
.#{$prefix}box-scroller-left,
|
||||
.#{$prefix}box-scroller-right {
|
||||
height: $tab-height + bottom($body-padding) + bottom($strip-border-width);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}#{$stripCls} {
|
||||
top: top($body-border-width);
|
||||
border-width: $strip-border-width;
|
||||
height: $strip-height - vertical($strip-border-width);
|
||||
}
|
||||
}
|
||||
.#{$prefix}border-box {
|
||||
.#{$prefix}#{$toolbarCls} {
|
||||
.#{$prefix}#{$bodyCls} {
|
||||
height: $tab-height + vertical($body-border-width) + vertical($body-padding);
|
||||
}
|
||||
|
||||
.#{$prefix}#{$stripCls} {
|
||||
height: $strip-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Top Tabs */
|
||||
@include tab-bar-top(
|
||||
"tab-bar-top",
|
||||
"tab-bar-body",
|
||||
"tab-bar-strip",
|
||||
$tabbar-top-body-padding,
|
||||
$tabbar-top-body-border-width,
|
||||
$tabbar-top-strip-border-width,
|
||||
$tabbar-strip-height
|
||||
);
|
||||
@include tab-bar-top(
|
||||
"tab-bar-top",
|
||||
"tab-bar-body-default-plain",
|
||||
"tab-bar-strip-default-plain",
|
||||
$tabbar-top-plain-body-padding,
|
||||
$tabbar-top-plain-body-border-width,
|
||||
$tabbar-top-strip-border-width,
|
||||
$tabbar-strip-height
|
||||
);
|
||||
|
||||
/* Bottom Tabs */
|
||||
@include tab-bar-bottom(
|
||||
"tab-bar-bottom",
|
||||
"tab-bar-body",
|
||||
"tab-bar-strip",
|
||||
$tabbar-bottom-body-padding,
|
||||
$tabbar-bottom-body-border-width,
|
||||
$tabbar-bottom-strip-border-width,
|
||||
$tabbar-strip-height
|
||||
);
|
||||
|
||||
@include tab-bar-bottom(
|
||||
"tab-bar-bottom",
|
||||
"tab-bar-body-default-plain",
|
||||
"tab-bar-strip-default-plain",
|
||||
$tabbar-bottom-plain-body-padding,
|
||||
$tabbar-bottom-plain-body-border-width,
|
||||
$tabbar-bottom-strip-border-width,
|
||||
$tabbar-strip-height
|
||||
);
|
||||
|
||||
.#{$prefix}tab-bar-strip-default,
|
||||
.#{$prefix}tab-bar-strip-default-plain {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border-style: solid;
|
||||
overflow: hidden;
|
||||
border-color: $tabbar-strip-border-color;
|
||||
background-color: $tabbar-strip-background-color;
|
||||
zoom: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
@mixin extjs-toolbar {
|
||||
.#{$prefix}toolbar {
|
||||
font-size: $toolbar-font-size;
|
||||
|
||||
border: 1px solid;
|
||||
|
||||
padding: $toolbar-vertical-spacing 0 $toolbar-vertical-spacing $toolbar-horizontal-spacing;
|
||||
|
||||
.#{$prefix}form-item-label{
|
||||
font-size: $toolbar-font-size;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-item {
|
||||
margin: 0 $toolbar-horizontal-spacing 0 0;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-text {
|
||||
margin-left: 4px;
|
||||
margin-right: 6px;
|
||||
white-space: nowrap;
|
||||
color: $toolbar-text-color !important;
|
||||
line-height: $toolbar-text-line-height;
|
||||
font-family: $toolbar-text-font-family;
|
||||
font-size: $toolbar-text-font-size;
|
||||
font-weight: $toolbar-text-font-weight;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-separator {
|
||||
display: block;
|
||||
font-size: 1px;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-separator-horizontal {
|
||||
margin: 0 3px 0 2px;
|
||||
|
||||
height: 14px;
|
||||
width: 0px;
|
||||
|
||||
border-left: 1px solid $toolbar-separator-color;
|
||||
border-right: 1px solid $toolbar-separator-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
.#{$prefix}quirks .#{$prefix}ie .#{$prefix}toolbar .#{$prefix}toolbar-separator-horizontal {
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-footer {
|
||||
background: transparent;
|
||||
border: 0px none;
|
||||
margin-top: 3px;
|
||||
|
||||
padding: $toolbar-footer-vertical-spacing 0 $toolbar-footer-vertical-spacing $toolbar-footer-horizontal-spacing;
|
||||
|
||||
.#{$prefix}box-inner {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-item {
|
||||
margin: 0 $toolbar-footer-horizontal-spacing 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-vertical {
|
||||
padding: $toolbar-vertical-spacing $toolbar-horizontal-spacing 0 $toolbar-horizontal-spacing;
|
||||
|
||||
.#{$prefix}toolbar-item {
|
||||
margin: 0 0 $toolbar-horizontal-spacing 0;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-text {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-separator-vertical {
|
||||
margin: 2px 5px 3px 5px;
|
||||
|
||||
height: 0px;
|
||||
width: 10px;
|
||||
line-height: 0px;
|
||||
|
||||
border-top: 1px solid $toolbar-separator-color;
|
||||
border-bottom: 1px solid $toolbar-separator-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-scroller {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}toolbar-spacer {
|
||||
width: $toolbar-spacer-width;
|
||||
}
|
||||
|
||||
// Background for overflow button inserted by the Menu box overflow handler within a toolbar
|
||||
.#{$prefix}toolbar-more-icon {
|
||||
background-image: theme-image($theme-name, 'toolbar/more.gif') !important;
|
||||
background-position: 2px center !important;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@include extjs-toolbar-ui(
|
||||
'default',
|
||||
$background-color: $toolbar-background-color,
|
||||
$background-gradient: $toolbar-background-gradient,
|
||||
$border-color: $tabbar-border-color
|
||||
);
|
||||
|
||||
//plain toolbars have no border
|
||||
//by default they get no color, so they are transparent. IE6 doesnt support transparent borders
|
||||
//so we must set the width to 0.
|
||||
.#{$prefix}toolbar-plain {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @mixin ext-toolbar-ui
|
||||
* @class Ext.toolbar.Toolbar
|
||||
* @param {String} $ui The name of the UI
|
||||
* @param {Color} $background-color The background color of the toolbar (defaults to transparent)
|
||||
* @param {Gradient/color-stops} $background-gradient The background gradient of the toolbar (defaults to null)
|
||||
* @param {Color} $border-color The border color of the toolbar (defaults to null)
|
||||
*/
|
||||
@mixin extjs-toolbar-ui(
|
||||
$ui,
|
||||
|
||||
$background-color: transparent,
|
||||
$background-gradient: null,
|
||||
|
||||
$border-color: null
|
||||
) {
|
||||
.#{$prefix}toolbar-#{$ui} {
|
||||
@if $border-color != null {
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
@include background-gradient($background-color, $background-gradient);
|
||||
}
|
||||
|
||||
@if not $supports-gradients or $compile-all {
|
||||
@if $background-gradient != null {
|
||||
.#{$prefix}nlg {
|
||||
.#{$prefix}toolbar-#{$ui} {
|
||||
background-image: theme-image($theme-name, 'toolbar/toolbar-#{$ui}-bg.gif') !important;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
@mixin extjs-tree {
|
||||
.#{$prefix}tree-no-lines .#{$prefix}tree-elbow {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-no-lines .#{$prefix}tree-elbow-end {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-no-lines .#{$prefix}tree-elbow-line {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
//arrows
|
||||
.#{$prefix}tree-arrows .#{$prefix}tree-elbow-plus {
|
||||
background: transparent no-repeat 0 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-arrows .#{$prefix}tree-elbow-end-plus {
|
||||
background: transparent no-repeat 0 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-arrows .#{$prefix}tree-elbow-end-minus {
|
||||
background: transparent no-repeat -16px 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-arrows .#{$prefix}tree-elbow-minus {
|
||||
background: transparent no-repeat -16px 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-arrows .#{$prefix}tree-elbow {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-arrows .#{$prefix}tree-elbow-end {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-arrows .#{$prefix}tree-elbow-line {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
//elbows
|
||||
.#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-plus,
|
||||
.#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-plus {
|
||||
background-position: -32px 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-minus,
|
||||
.#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-minus {
|
||||
background-position: -48px 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-elbow-plus,
|
||||
.#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
|
||||
background-position: -16px 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-plus,
|
||||
.#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-plus {
|
||||
background-position: -48px 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-elbow-plus,
|
||||
.#{$prefix}tree-elbow-minus,
|
||||
.#{$prefix}tree-elbow-end-plus,
|
||||
.#{$prefix}tree-elbow-end-minus{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
//elbows
|
||||
.#{$prefix}tree-lines {
|
||||
.#{$prefix}tree-elbow {
|
||||
background-image: theme-image($theme-name, 'tree/elbow.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}tree-elbow-end {
|
||||
background-image: theme-image($theme-name, 'tree/elbow-end.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}tree-elbow-plus {
|
||||
background-image: theme-image($theme-name, 'tree/elbow-plus.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}tree-elbow-end-plus {
|
||||
background-image: theme-image($theme-name, 'tree/elbow-end-plus.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus {
|
||||
background-image: theme-image($theme-name, 'tree/elbow-minus.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
|
||||
background-image: theme-image($theme-name, 'tree/elbow-end-minus.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}tree-elbow-line {
|
||||
background-image: theme-image($theme-name, 'tree/elbow-line.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tree-no-lines {
|
||||
.#{$prefix}tree-elbow-plus,
|
||||
.#{$prefix}tree-elbow-end-plus {
|
||||
background-image: theme-image($theme-name, 'tree/elbow-plus-nl.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus,
|
||||
.#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
|
||||
background-image: theme-image($theme-name, 'tree/elbow-end-minus-nl.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tree-arrows {
|
||||
.#{$prefix}tree-elbow-plus,
|
||||
.#{$prefix}tree-elbow-minus,
|
||||
.#{$prefix}tree-elbow-end-plus,
|
||||
.#{$prefix}tree-elbow-end-minus {
|
||||
background-image: theme-image($theme-name, 'tree/arrows.gif');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tree-icon {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-elbow,
|
||||
.#{$prefix}tree-elbow-end,
|
||||
.#{$prefix}tree-elbow-plus,
|
||||
.#{$prefix}tree-elbow-end-plus,
|
||||
.#{$prefix}tree-elbow-empty,
|
||||
.#{$prefix}tree-elbow-line {
|
||||
height: $tree-elbow-height;
|
||||
width: $tree-elbow-width;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-icon-leaf {
|
||||
width: $tree-elbow-width;
|
||||
background-image: theme-image($theme-name, 'tree/leaf.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}tree-icon-parent {
|
||||
width: $tree-elbow-width;
|
||||
background-image: theme-image($theme-name, 'tree/folder.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}grid-tree-node-expanded .#{$prefix}tree-icon-parent {
|
||||
background-image: theme-image($theme-name, 'tree/folder-open.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}grid-rowbody {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-panel .#{$prefix}grid-cell-inner {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner {
|
||||
height: $tree-elbow-height;
|
||||
|
||||
line-height: $tree-elbow-height;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}ie {
|
||||
.#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.#{$prefix}tree-checkbox {
|
||||
float: left;
|
||||
margin: 2px 3px 0 0;
|
||||
display: block;
|
||||
|
||||
width: $form-checkbox-size;
|
||||
height: $form-checkbox-size;
|
||||
background: theme-image($theme-name, $form-checkbox-image) no-repeat;
|
||||
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@if $include-ie {
|
||||
/* Hack for IE; causes alignment problem in IE9 standards mode so exclude that */
|
||||
.#{$prefix}nbr.#{$prefix}ie {
|
||||
.#{$prefix}tree-checkbox {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$prefix}tree-checkbox-checked {
|
||||
background-position: 0 (0 - $form-checkbox-size);
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
.#{$prefix}tree-panel .#{$prefix}grid-cell-inner {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-ff {
|
||||
.#{$prefix}gecko {
|
||||
.#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner {
|
||||
line-height: $tree-elbow-height - 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}tree-drop-ok-append .#{$prefix}dd-drop-icon {
|
||||
background-image: theme-image($theme-name, 'tree/drop-append.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}tree-drop-ok-above .#{$prefix}dd-drop-icon {
|
||||
background-image: theme-image($theme-name, 'tree/drop-above.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}tree-drop-ok-below .#{$prefix}dd-drop-icon {
|
||||
background-image: theme-image($theme-name, 'tree/drop-below.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}tree-drop-ok-between .#{$prefix}dd-drop-icon {
|
||||
background-image: theme-image($theme-name, 'tree/drop-between.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}grid-tree-loading .#{$prefix}tree-icon {
|
||||
background-image: theme-image($theme-name, 'tree/loading.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}tree-ddindicator {
|
||||
height: 1px;
|
||||
border-width: 1px 0px 0px;
|
||||
border-style: dotted;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
.#{$prefix}grid-tree-loading span {
|
||||
font-style: italic;
|
||||
color: #444444;
|
||||
}
|
||||
|
||||
.#{$prefix}tree-animator-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@mixin extjs-viewport {
|
||||
.#{$prefix}viewport, .#{$prefix}viewport body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
@mixin extjs-window {
|
||||
.#{$prefix}window {
|
||||
outline: none;
|
||||
|
||||
.#{$prefix}window-wrap {
|
||||
position: relative;
|
||||
|
||||
.#{$prefix}window-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}window-body {
|
||||
position: relative;
|
||||
border-style: $window-body-border-style;
|
||||
}
|
||||
|
||||
//maximized window
|
||||
.#{$prefix}window-maximized {
|
||||
.#{$prefix}window-wrap {
|
||||
.#{$prefix}window-header {
|
||||
@include important-no-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// collapsed window header styles
|
||||
.#{$prefix}window-collapsed {
|
||||
.#{$prefix}window-header-vertical {
|
||||
@include border-radius(5px);
|
||||
}
|
||||
.#{$prefix}window-header-horizontal {
|
||||
@include border-radius(5px);
|
||||
}
|
||||
|
||||
// Padding changes for collapsed headers.
|
||||
.#{$prefix}window-header-left {
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
|
||||
.#{$prefix}window-header-right {
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
|
||||
.#{$prefix}window-header-top {
|
||||
padding-bottom: 5px !important;
|
||||
}
|
||||
|
||||
.#{$prefix}window-header-bottom {
|
||||
padding-top: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}window-header-left,
|
||||
.#{$prefix}window-header-right {
|
||||
.#{$prefix}vml-base {
|
||||
left: -3px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}window-header-text {
|
||||
@include no-select;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include extjs-window-ui(
|
||||
'default',
|
||||
|
||||
$ui-border-radius: $window-border-radius,
|
||||
$ui-border-color: $window-border-color,
|
||||
$ui-inner-border-color: $window-inner-border-color,
|
||||
|
||||
$ui-header-color: $window-header-color,
|
||||
|
||||
$ui-body-border-color: $window-body-border-color,
|
||||
$ui-body-background-color: $window-body-background-color,
|
||||
$ui-body-color: $window-body-color,
|
||||
|
||||
$ui-background-color: $window-background-color
|
||||
);
|
||||
|
||||
.#{$prefix}window-body-plain {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @class Ext.Window
|
||||
* Used to create a visual theme for an Ext.Panel
|
||||
*/
|
||||
@mixin extjs-window-ui(
|
||||
$ui-label,
|
||||
|
||||
$ui-padding: null,
|
||||
$ui-border-radius: null,
|
||||
$ui-border-color: null,
|
||||
$ui-inner-border-color: null,
|
||||
|
||||
$ui-header-color: null,
|
||||
$ui-header-font-size: $window-header-font-size,
|
||||
$ui-header-font-weight: $window-header-font-weight,
|
||||
|
||||
$ui-body-border-color: null,
|
||||
$ui-body-background-color: null,
|
||||
$ui-body-color: null,
|
||||
|
||||
$ui-background-color: null
|
||||
){
|
||||
$ui-header-text-height: round($ui-header-font-size * 1.46); // 11px / 16px
|
||||
|
||||
.#{$prefix}window-#{$ui-label} {
|
||||
@if $ui-border-color != null { border-color: $ui-border-color; }
|
||||
@if $ui-border-radius != null { @include border-radius($ui-border-radius); }
|
||||
|
||||
@if $ui-inner-border-color != null { @include inner-border($window-inner-border-width, $ui-inner-border-color); }
|
||||
}
|
||||
|
||||
@if $ui-border-radius != null {
|
||||
@include x-frame(
|
||||
'window',
|
||||
$ui-label,
|
||||
|
||||
$border-radius: $ui-border-radius,
|
||||
$border-width: $window-border-width,
|
||||
$padding: $ui-padding,
|
||||
$background-color: $ui-background-color
|
||||
);
|
||||
}
|
||||
|
||||
.#{$prefix}window-body-#{$ui-label} {
|
||||
@if $ui-body-border-color !=null {
|
||||
border-color: $ui-body-border-color;
|
||||
border-width: $window-body-border-width;
|
||||
}
|
||||
|
||||
@if $ui-body-background-color != null { background: $ui-body-background-color; }
|
||||
@if $ui-body-color != null { color: $ui-body-color; }
|
||||
}
|
||||
|
||||
.#{$prefix}window-header-#{$ui-label} {
|
||||
@if $ui-border-color != null { border-color: $ui-border-color; }
|
||||
zoom:1;
|
||||
}
|
||||
|
||||
.#{$prefix}window-header-text-#{$ui-label} {
|
||||
@if $ui-header-color != null { color: $ui-header-color; }
|
||||
@if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; }
|
||||
|
||||
line-height: $ui-header-text-height;
|
||||
|
||||
font-family: $font-family;
|
||||
font-size: $ui-header-font-size;
|
||||
}
|
||||
|
||||
@if $ui-border-radius != null {
|
||||
@include x-frame('window-header', '#{$ui-label}-top', top($ui-border-radius) right($ui-border-radius) 0 0, $window-border-width, 5px 5px 0, $ui-background-color);
|
||||
@include x-frame('window-header', '#{$ui-label}-right', 0 right($ui-border-radius) bottom($ui-border-radius) 0, $window-border-width, 5px 5px 5px 0, $ui-background-color);
|
||||
@include x-frame('window-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius), $window-border-width, 0 5px 5px, $ui-background-color);
|
||||
@include x-frame('window-header', '#{$ui-label}-left', top($ui-border-radius) 0 0 left($ui-border-radius), $window-border-width, 5px 0px 5px 5px, $ui-background-color);
|
||||
}
|
||||
|
||||
.#{$prefix}window-header-#{$ui-label}-top {
|
||||
@include inner-border(1px 1px 0, $ui-inner-border-color);
|
||||
}
|
||||
|
||||
.#{$prefix}window-header-#{$ui-label}-right {
|
||||
@include inner-border(1px 1px 1px 0, $ui-inner-border-color);
|
||||
}
|
||||
|
||||
.#{$prefix}window-header-#{$ui-label}-bottom {
|
||||
@include inner-border(0px 1px 1px, $ui-inner-border-color);
|
||||
}
|
||||
|
||||
.#{$prefix}window-header-#{$ui-label}-left {
|
||||
@include inner-border(1px 0 1px 1px, $ui-inner-border-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
@mixin extjs-form {
|
||||
/*misc*/
|
||||
.#{$prefix}webkit {
|
||||
* {
|
||||
&:focus {
|
||||
outline:none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//form items
|
||||
.#{$prefix}form-item {
|
||||
display: block;
|
||||
zoom: 1;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.#{$prefix}form-item-label {
|
||||
float: left;
|
||||
padding: 3px 0 0;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
font-size: $form-label-font-size;
|
||||
@include no-select;
|
||||
}
|
||||
|
||||
.#{$prefix}form-item-label-top {
|
||||
float: none;
|
||||
clear: none;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{$prefix}form-item-label-right {
|
||||
float: left;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.#{$prefix}form-item-body {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.#{$prefix}form-invalid-under {
|
||||
padding: 2px 2px 2px 18px;
|
||||
clear: left;
|
||||
|
||||
color: $form-error-msg-color;
|
||||
font: $form-error-msg-font;
|
||||
line-height: $form-error-msg-line-height;
|
||||
|
||||
background: theme-image($theme-name, $form-exclamation-icon) no-repeat 0 2px;
|
||||
}
|
||||
|
||||
.#{$prefix}form-invalid-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
background: theme-image($theme-name, $form-exclamation-icon) no-repeat 2px 3px;
|
||||
|
||||
ul {
|
||||
/* prevent inner elements from interfering with QuickTip hovering */
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
@mixin extjs-form-checkboxfield {
|
||||
.#{$prefix}form-cb-wrap {
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.#{$prefix}form-checkbox,
|
||||
.#{$prefix}form-radio {
|
||||
float: none;
|
||||
vertical-align: -1px;
|
||||
|
||||
width: $form-checkbox-size;
|
||||
height: $form-checkbox-size;
|
||||
background: theme-image($theme-name, $form-checkbox-image) no-repeat;
|
||||
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@if $include-ie {
|
||||
/* Hack for IE; causes alignment problem in IE9 standards mode so exclude that */
|
||||
.#{$prefix}nbr.#{$prefix}ie {
|
||||
.#{$prefix}form-checkbox,
|
||||
.#{$prefix}form-radio {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$prefix}form-cb-checked {
|
||||
.#{$prefix}form-checkbox,
|
||||
.#{$prefix}form-radio {
|
||||
background-position: 0 (0 - $form-checkbox-size);
|
||||
}
|
||||
}
|
||||
|
||||
/* Focused */
|
||||
.#{$prefix}form-cb-focus {
|
||||
background-position: (0 - $form-checkbox-size) 0;
|
||||
}
|
||||
.#{$prefix}form-cb-checked {
|
||||
.#{$prefix}form-cb-focus {
|
||||
background-position: (0 - $form-checkbox-size) (0 - $form-checkbox-size);
|
||||
}
|
||||
}
|
||||
|
||||
/* Radios */
|
||||
.#{$prefix}form-radio {
|
||||
background-image: theme-image($theme-name, $form-radio-image);
|
||||
}
|
||||
|
||||
/* boxLabel */
|
||||
.#{$prefix}form-cb-label-before {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.#{$prefix}form-cb-label-after {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
@mixin extjs-form-checkboxgroup {
|
||||
|
||||
.#{$prefix}form-checkboxgroup-body {
|
||||
padding: 3px 4px;
|
||||
}
|
||||
|
||||
.#{$prefix}form-invalid {
|
||||
.#{$prefix}form-checkboxgroup-body {
|
||||
border: 1px solid #c30;
|
||||
background: #fff theme-image($theme-name, 'grid/invalid_line.gif') repeat-x bottom;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}check-group-alt {
|
||||
background: adjust-color($base-color, $hue: 2.667deg, $saturation: -7.168%, $lightness: 3.725%);
|
||||
|
||||
border-top:1px dotted adjust-color($base-color, $hue: 17.193deg, $saturation: -40.827%, $lightness: -9.412%);
|
||||
border-bottom:1px dotted adjust-color($base-color, $hue: 17.193deg, $saturation: -40.827%, $lightness: -9.412%);
|
||||
}
|
||||
|
||||
.#{$prefix}form-check-group-label {
|
||||
color: #333;
|
||||
|
||||
border-bottom: 1px solid #333;
|
||||
|
||||
margin: 0 30px 5px 0;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
@mixin extjs-form-field {
|
||||
.#{$prefix}form-field,
|
||||
.#{$prefix}form-display-field {
|
||||
float: left;
|
||||
|
||||
margin: 0 0 0 0;
|
||||
|
||||
font: $form-field-font;
|
||||
color: $form-field-color;
|
||||
}
|
||||
|
||||
.#{$prefix}form-text,
|
||||
textarea.#{$prefix}form-field {
|
||||
padding: $form-field-padding;
|
||||
|
||||
background: repeat-x 0 0;
|
||||
border: $form-field-border-width solid;
|
||||
|
||||
background-color: $form-field-background-color;
|
||||
@if $form-field-background-image {
|
||||
background-image: theme-image($theme-name, $form-field-background-image);
|
||||
}
|
||||
|
||||
border-color: $form-field-border-color;
|
||||
}
|
||||
|
||||
$form-field-content-height: $form-field-height - top($form-field-padding) - top($form-field-border-width) - bottom($form-field-padding) - bottom($form-field-border-width);
|
||||
|
||||
.#{$prefix}form-text {
|
||||
height: $form-field-content-height;
|
||||
line-height: $form-field-content-height;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.#{$prefix}ie6,
|
||||
.#{$prefix}ie7,
|
||||
.#{$prefix}ie8 {
|
||||
.#{$prefix}form-text {
|
||||
line-height: $form-field-content-height - 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}border-box .#{$prefix}form-text {
|
||||
height: $form-field-height;
|
||||
}
|
||||
|
||||
textarea.#{$prefix}form-field {
|
||||
color: $form-field-color;
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
background: repeat-x 0 0;
|
||||
background-color: $form-field-background-color;
|
||||
@if $form-field-background-image {
|
||||
background-image: theme-image($theme-name, $form-field-background-image);
|
||||
}
|
||||
resize: none; //Disable browser resizable textarea
|
||||
}
|
||||
|
||||
.#{$prefix}border-box textarea.#{$prefix}form-field {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@if $include-safari {
|
||||
.#{$prefix}safari.#{$prefix}mac textarea.#{$prefix}form-field {
|
||||
margin-bottom: -2px; // another bogus margin bug, safari/mac only
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}form-focus,
|
||||
textarea.#{$prefix}form-focus {
|
||||
border-color: $form-field-focus-border-color;
|
||||
}
|
||||
|
||||
.#{$prefix}form-invalid-field,
|
||||
textarea.#{$prefix}form-invalid-field {
|
||||
background-color: $form-field-invalid-background-color;
|
||||
@if $form-field-invalid-background-image {
|
||||
background-image: theme-image($theme-name, $form-field-invalid-background-image);
|
||||
background-repeat: $form-field-invalid-background-repeat;
|
||||
background-position: $form-field-invalid-background-position;
|
||||
}
|
||||
border-color: $form-field-invalid-border-color;
|
||||
}
|
||||
|
||||
.#{$prefix}form-item {
|
||||
font: $form-label-font;
|
||||
}
|
||||
|
||||
.#{$prefix}form-empty-field, textarea.#{$prefix}form-empty-field {
|
||||
color: $form-field-empty-color;
|
||||
}
|
||||
|
||||
.#{$prefix}webkit {
|
||||
.#{$prefix}form-empty-field {
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}form-display-field {
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
.#{$prefix}ie .#{$prefix}form-file {
|
||||
height: $form-field-height + 1;
|
||||
|
||||
line-height: 18px;
|
||||
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}field-default-toolbar .#{$prefix}form-text {
|
||||
height: $form-toolbar-field-height - vertical($form-field-padding) - vertical($form-field-border-width);
|
||||
}
|
||||
|
||||
.#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-text {
|
||||
height: $form-toolbar-field-height;
|
||||
}
|
||||
|
||||
.#{$prefix}field-default-toolbar .#{$prefix}form-item-label-left {
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
@mixin extjs-form-fieldset {
|
||||
.#{$prefix}fieldset {
|
||||
border: $fieldset-border;
|
||||
|
||||
padding: $fieldset-padding;
|
||||
margin-bottom: $fieldset-padding;
|
||||
|
||||
display: block; /* preserve margins in IE */
|
||||
}
|
||||
|
||||
.#{$prefix}ie .#{$prefix}fieldset {
|
||||
padding-top: 0;
|
||||
padding-bottom: $fieldset-padding;
|
||||
}
|
||||
|
||||
.#{$prefix}fieldset-header {
|
||||
font: $fieldset-header-font;
|
||||
color: $fieldset-header-color;
|
||||
padding: $fieldset-header-padding;
|
||||
line-height: 16px;
|
||||
|
||||
.#{$prefix}fieldset-header-text {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.#{$prefix}form-item,
|
||||
.#{$prefix}tool {
|
||||
float: left;
|
||||
margin: 0 3px 0 0;
|
||||
}
|
||||
|
||||
.#{$prefix}form-cb-wrap {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}webkit .#{$prefix}fieldset-header {
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
.#{$prefix}quirks .#{$prefix}ie .#{$prefix}fieldset-header,
|
||||
.#{$prefix}ie6 .#{$prefix}fieldset-header,
|
||||
.#{$prefix}ie7 .#{$prefix}fieldset-header,
|
||||
.#{$prefix}ie8 .#{$prefix}fieldset-header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.#{$prefix}ie .#{$prefix}fieldset-header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.#{$prefix}ie9 .#{$prefix}fieldset-header {
|
||||
padding-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}fieldset-collapsed {
|
||||
.#{$prefix}fieldset-body {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}fieldset-collapsed {
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
border-width: 1px 1px 0 1px !important;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
.#{$prefix}ie6 .#{$prefix}fieldset-collapsed {
|
||||
border-width: 1px 0 0 0 !important;
|
||||
|
||||
padding-bottom: 0 !important;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.#{$prefix}ie .#{$prefix}fieldset-bwrap {
|
||||
zoom: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-ie {
|
||||
/* IE legend positioning bug */
|
||||
.#{$prefix}ie .#{$prefix}fieldset-noborder legend {
|
||||
position: relative;
|
||||
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
.#{$prefix}ie .#{$prefix}fieldset-noborder legend span {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}fieldset {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.#{$prefix}fieldset-bwrap {
|
||||
overflow: hidden;
|
||||
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.#{$prefix}fieldset-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
@mixin extjs-form-file {
|
||||
|
||||
.#{$prefix}form-file-wrap {
|
||||
.#{$prefix}form-text {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.#{$prefix}form-file-btn {
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.#{$prefix}form-file-input {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -2px;
|
||||
height: $form-field-height + 8;
|
||||
@include opacity(0);
|
||||
|
||||
/* Yes, there's actually a good reason for this...
|
||||
* If the configured buttonText is set to something longer than the default,
|
||||
* then it will quickly exceed the width of the hidden file input's "Browse..."
|
||||
* button, so part of the custom button's clickable area will be covered by
|
||||
* the hidden file input's text box instead. This results in a text-selection
|
||||
* mouse cursor over that part of the button, at least in Firefox, which is
|
||||
* confusing to a user. Giving the hidden file input a huge font-size makes
|
||||
* the native button part very large so it will cover the whole clickable area.
|
||||
*/
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
@mixin extjs-form-htmleditor {
|
||||
.#{$prefix}html-editor-wrap {
|
||||
border: 1px solid $html-editor-border-color;
|
||||
|
||||
.#{$prefix}toolbar {
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: $html-editor-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}btn-text {
|
||||
background:transparent theme-image($theme-name, 'editor/tb-sprite.gif') no-repeat;
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-bold,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-bold {
|
||||
background-position:0 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-italic,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-italic {
|
||||
background-position:-16px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-underline,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-underline {
|
||||
background-position:-32px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-forecolor,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-forecolor {
|
||||
background-position:-160px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-backcolor,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-backcolor {
|
||||
background-position:-176px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-justifyleft,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-justifyleft {
|
||||
background-position:-112px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-justifycenter,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-justifycenter {
|
||||
background-position:-128px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-justifyright,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-justifyright {
|
||||
background-position:-144px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-insertorderedlist,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-insertorderedlist {
|
||||
background-position:-80px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-insertunorderedlist,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-insertunorderedlist {
|
||||
background-position:-96px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-increasefontsize,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-increasefontsize {
|
||||
background-position:-48px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-decreasefontsize,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-decreasefontsize {
|
||||
background-position:-64px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-sourceedit,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-sourceedit {
|
||||
background-position:-192px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb .#{$prefix}edit-createlink,
|
||||
.#{$prefix}menu-item img.#{$prefix}edit-createlink {
|
||||
background-position: -208px 0;
|
||||
background-image: theme-image($theme-name, 'editor/tb-sprite.gif');
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tip .#{$prefix}tip-bd .#{$prefix}tip-bd-inner {
|
||||
padding: 5px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.#{$prefix}html-editor-tb {
|
||||
.#{$prefix}toolbar {
|
||||
position: static !important;
|
||||
}
|
||||
.#{$prefix}font-select {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.x-html-editor-wrap textarea {
|
||||
border: 0;
|
||||
padding: 3px 2px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
@mixin extjs-form-triggerfield {
|
||||
.#{$prefix}form-trigger-wrap {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.#{$prefix}form-trigger {
|
||||
background-image: theme-image($theme-name, 'form/trigger.gif');
|
||||
background-position: 0 0;
|
||||
|
||||
width: $form-trigger-width;
|
||||
height: $form-trigger-height - $form-trigger-border-bottom-width;
|
||||
float: left;
|
||||
|
||||
border-bottom: $form-trigger-border-bottom;
|
||||
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.#{$prefix}border-box .#{$prefix}form-trigger {
|
||||
height: $form-trigger-height;
|
||||
}
|
||||
|
||||
.#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
|
||||
height: $form-toolbar-trigger-height - $form-trigger-border-bottom-width;
|
||||
}
|
||||
|
||||
.#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
|
||||
height: $form-toolbar-trigger-height;
|
||||
}
|
||||
|
||||
|
||||
.#{$prefix}form-trigger-over {
|
||||
background-position: -$form-trigger-width 0;
|
||||
|
||||
border-bottom-color: $form-trigger-border-bottom-color-over;
|
||||
}
|
||||
|
||||
.#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger {
|
||||
background-position: -($form-trigger-width * 3) 0;
|
||||
|
||||
border-bottom-color: $form-trigger-border-bottom-color-focus;
|
||||
}
|
||||
|
||||
.#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-over {
|
||||
background-position: -($form-trigger-width * 4) 0;
|
||||
|
||||
@if $form-trigger-border-bottom-color-focus-over {
|
||||
border-bottom-color: $form-trigger-border-bottom-color-focus-over;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}form-trigger-click,
|
||||
.#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-click {
|
||||
background-position: -($form-trigger-width * 2) 0;
|
||||
|
||||
@if $form-trigger-border-bottom-color-pressed {
|
||||
border-bottom-color: $form-trigger-border-bottom-color-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}form-trigger-icon {
|
||||
height: $form-trigger-width - $form-trigger-border-bottom-width;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: $form-trigger-icon-background-position;
|
||||
}
|
||||
|
||||
.#{$prefix}pickerfield-open {
|
||||
.#{$prefix}form-field {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}pickerfield-open-above {
|
||||
.#{$prefix}form-field {
|
||||
@include border-bottom-left-radius(3px);
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}form-arrow-trigger {
|
||||
.#{$prefix}form-trigger-icon {
|
||||
background-image: theme-image($theme-name, 'boundlist/trigger-arrow.png');
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix}form-date-trigger {
|
||||
background-image: theme-image($theme-name, 'form/date-trigger.gif');
|
||||
}
|
||||
|
||||
$spinner-btn-height: $form-trigger-height / 2;
|
||||
.#{$prefix}form-trigger-wrap {
|
||||
.#{$prefix}form-spinner-up,
|
||||
.#{$prefix}form-spinner-down {
|
||||
background-image: theme-image($theme-name, 'form/spinner.gif');
|
||||
|
||||
width: $form-trigger-width;
|
||||
height: $spinner-btn-height;
|
||||
|
||||
font-size: 0; /*for IE*/
|
||||
|
||||
border-bottom: 0;
|
||||
}
|
||||
.#{$prefix}form-spinner-down {
|
||||
background-position: 0 (-$spinner-btn-height);
|
||||
}
|
||||
}
|
||||
.#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
|
||||
background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
|
||||
}
|
||||
.#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
|
||||
background-position: (-$form-trigger-width) (-$spinner-btn-height);
|
||||
}
|
||||
.#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
|
||||
background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
|
||||
}
|
||||
.#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
|
||||
background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
|
||||
}
|
||||
|
||||
|
||||
.#{$prefix}field-default-toolbar {
|
||||
$spinner-btn-height: $form-toolbar-trigger-height / 2;
|
||||
.#{$prefix}form-trigger-wrap {
|
||||
.#{$prefix}form-spinner-up,
|
||||
.#{$prefix}form-spinner-down {
|
||||
background-image: theme-image($theme-name, 'form/spinner-small.gif');
|
||||
height: $spinner-btn-height;
|
||||
}
|
||||
.#{$prefix}form-spinner-down {
|
||||
background-position: 0 (-$spinner-btn-height);
|
||||
}
|
||||
}
|
||||
.#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
|
||||
background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
|
||||
}
|
||||
.#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
|
||||
background-position: (-$form-trigger-width) (-$spinner-btn-height);
|
||||
}
|
||||
.#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
|
||||
background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
|
||||
}
|
||||
.#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
|
||||
background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.#{$prefix}trigger-noedit {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
|
||||
.#{$prefix}form-clear-trigger {
|
||||
background-image: theme-image($theme-name, 'form/clear-trigger.gif');
|
||||
}
|
||||
.#{$prefix}form-search-trigger {
|
||||
background-image: theme-image($theme-name, 'form/search-trigger.gif');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
/*
|
||||
Syntax error: File to import not found or unreadable: ext4/default/all.
|
||||
Load paths:
|
||||
/Users/Robert/github/sencha/sdk/extjs/resources/themes/templates/resources/sass
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/frameworks/blueprint/stylesheets
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/frameworks/compass/stylesheets
|
||||
|
||||
on line 8 of /Users/Robert/github/sencha/sdk/extjs/resources/themes/templates/resources/sass/my-ext-theme.scss
|
||||
|
||||
Backtrace:
|
||||
/Users/Robert/github/sencha/sdk/extjs/resources/themes/templates/resources/sass/my-ext-theme.scss:8
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/import_node.rb:64:in `import'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/import_node.rb:25:in `imported_file'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:148:in `visit_import'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:37:in `send'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:18:in `visit'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:53:in `map'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:27:in `visit_children'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:39:in `with_environment'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:26:in `visit_children'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:47:in `visit_root'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:37:in `send'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:18:in `visit'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:7:in `send'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:7:in `visit'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/root_node.rb:20:in `render'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/engine.rb:291:in `_render'
|
||||
/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/engine.rb:238:in `render'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:127:in `compile'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:113:in `timed'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:126:in `compile'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/logger.rb:45:in `red'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:125:in `compile'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:105:in `compile_if_required'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:92:in `run'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:90:in `each'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:90:in `run'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:113:in `timed'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:89:in `run'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/commands/update_project.rb:36:in `perform'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/commands/base.rb:18:in `execute'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/commands/project_base.rb:19:in `execute'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/exec/sub_command_ui.rb:15:in `run!'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/bin/compass:25
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/bin/compass:39:in `call'
|
||||
/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/bin/compass:39
|
||||
/usr/bin/compass:19:in `load'
|
||||
/usr/bin/compass:19
|
||||
*/
|
||||
body:before {
|
||||
white-space: pre;
|
||||
font-family: monospace;
|
||||
content: "Syntax error: File to import not found or unreadable: ext4/default/all.\A Load paths:\A /Users/Robert/github/sencha/sdk/extjs/resources/themes/templates/resources/sass\A /Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/frameworks/blueprint/stylesheets\A /Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/frameworks/compass/stylesheets\A \A on line 8 of /Users/Robert/github/sencha/sdk/extjs/resources/themes/templates/resources/sass/my-ext-theme.scss"; }
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
# $ext_path: This should be the path of where the ExtJS SDK is installed
|
||||
# Generally this will be in a lib/extjs folder in your applications root
|
||||
# <root>/lib/extjs
|
||||
$ext_path = "../../lib/extjs"
|
||||
|
||||
# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder
|
||||
# Generally this will be in a resources/sass folder
|
||||
# <root>/resources/sass
|
||||
sass_path = File.dirname(__FILE__)
|
||||
|
||||
# css_path: the directory you want your CSS files to be.
|
||||
# Generally this is a folder in the parent directory of your Sass files
|
||||
# <root>/resources/css
|
||||
css_path = File.join(sass_path, "..", "css")
|
||||
|
||||
# output_style: The output style for your compiled CSS
|
||||
# nested, expanded, compact, compressed
|
||||
# More information can be found here http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style
|
||||
output_style = :compressed
|
||||
|
||||
# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins
|
||||
load File.join(File.dirname(__FILE__), $ext_path, 'resources', 'themes')
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// 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;
|
||||
|
||||
// Insert your custom variables here.
|
||||
// $base-color: #aa0000;
|
||||
|
||||
@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-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;
|
||||
|
||||
// This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
|
||||
// You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
|
||||
// This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
|
||||
// The value can either be true, in which case the image path will be "../images/"
|
||||
// or a string, of where the path is
|
||||
$relative-image-path-for-uis: true; // defaults to "../images/" when true
|
||||
Loading…
Reference in New Issue