init repo

This commit is contained in:
nikolay ivanov
2014-07-05 18:22:49 +00:00
commit a8be6b9e72
17348 changed files with 9229832 additions and 0 deletions

View File

@@ -0,0 +1,113 @@
@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-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;
}
@include extjs-reset-extras;
}
@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;
}

View File

@@ -0,0 +1,2 @@
@import 'core/reset';
@import 'core/core';

View File

@@ -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)));
}

View File

@@ -0,0 +1,25 @@
@import 'mixins/background-gradient';
@import 'mixins/theme-background-image';
@import 'mixins/inner-border';
@import 'mixins/frame';
@import 'mixins/reset-extras';
@mixin no-select {
user-select: none;
-o-user-select: none;
-ms-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
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;
}

View File

@@ -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';

View File

@@ -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';

View File

@@ -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.3);
}
.#{$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 {
background-image: 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 {
background-image: theme-background-image($theme-name, 'shared/shadow-lr.png');
}
}
.#{$prefix}frame-shadow .xsmc {
float: left;
height: 100%;
@if $include-shadow-images {
background-image: 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 {
background-image: theme-background-image($theme-name, 'box/corners.gif');
}
.x-box-tc {
background-image: theme-background-image($theme-name, 'box/tb.gif');
}
.x-box-tr {
background-image: theme-background-image($theme-name, 'box/corners.gif');
}
.x-box-ml {
background-image: theme-background-image($theme-name, 'box/l.gif');
}
.x-box-mc {
background-color: #eee;
background-image: 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 {
background-image: theme-background-image($theme-name, 'box/r.gif');
}
.x-box-bl {
background-image: theme-background-image($theme-name, 'box/corners.gif');
}
.x-box-bc {
background-image: theme-background-image($theme-name, 'box/tb.gif');
}
.x-box-br {
background-image: 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 {
background-image: 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 {
background-image: 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 {
background-image: theme-background-image($theme-name, 'box/l-blue.gif');
}
.x-box-blue .x-box-mr {
background-image: theme-background-image($theme-name, 'box/r-blue.gif');
}

View File

@@ -0,0 +1,146 @@
@if $scope-reset-css {
.#{$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;
}
.#{$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}border-box * {
box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
}

View File

@@ -0,0 +1,309 @@
@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}fit-item {
position: relative;
}
.#{$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;
background-image: 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 {
background-image: 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;
background-image: 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 {
background-image: 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;
background-image: 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;
background-image: 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*/
}
}
}

View File

@@ -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%)
)));
}
}
}

View File

@@ -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);
}
}
}

View File

@@ -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 {
background-image: 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 {
background-image: 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 {
background-image: 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 {
background-image: 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;
}
}
}
}

View File

@@ -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);
}
}

View File

@@ -0,0 +1,144 @@
@mixin extjs-reset-extras {
.#{$prefix}border-box {
.#{$prefix}reset {
//tab.scss
.#{$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);
}
//qtip.scss
.#{$prefix}tip-anchor {
width: 10px;
height: 10px;
}
//field.scss
.#{$prefix}form-text {
height: $form-field-height;
}
textarea.#{$prefix}form-field {
height: auto;
}
.#{$prefix}field-default-toolbar .#{$prefix}form-text {
height: $form-toolbar-field-height;
}
//triggerfield.scss
.#{$prefix}form-trigger {
height: $form-trigger-height;
}
.#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
height: $form-toolbar-trigger-height;
}
//grid.scss
@if $include-ie or $compile-all {
&.#{$prefix}ie9 {
.#{$prefix}grid-header-ct {
padding-left: 1px;
}
}
}
}
}
.#{$prefix}webkit {
.#{$prefix}reset {
//form.scss
* {
&:focus {
outline:none !important;
}
}
//field
.#{$prefix}form-empty-field {
line-height: 15px;
}
//fieldset
.#{$prefix}fieldset-header {
padding-top: 1px;
}
}
}
/* Top Tabs */
@include tab-bar-top-reset(
"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-reset(
"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-reset(
"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-reset(
"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
);
}
@mixin tab-bar-top-reset($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
.#{$prefix}border-box {
.#{$prefix}reset {
.#{$prefix}#{$toolbarCls} {
.#{$prefix}#{$bodyCls} {
height: $tab-height + vertical($body-border-width) + vertical($body-padding);
}
.#{$prefix}#{$stripCls} {
height: $strip-height;
}
}
}
}
}
@mixin tab-bar-bottom-reset($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) {
.#{$prefix}border-box {
.#{$prefix}reset {
.#{$prefix}#{$toolbarCls} {
.#{$prefix}#{$bodyCls} {
height: $tab-height + vertical($body-border-width) + vertical($body-padding);
}
.#{$prefix}#{$stripCls} {
height: $strip-height;
}
}
}
}
}

View File

@@ -0,0 +1,28 @@
/**
* 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.
*/
@function 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 == true {
@return theme-image($theme-name, $path, $without-url, $relative);
}
@else {
@warn "@theme-background-image: Theme image not found: #{$exists_image}";
@if $include-missing-images {
@return theme-image($theme-name, $path, $without-url, $relative);
}
}
}
@else {
@warn "@theme-background-image: No arguments passed";
}
}

View File

@@ -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 {
background-image: theme-background-image($theme-name, 'dd/drop-no.gif');
}
.#{$prefix}dd-drop-ok .#{$prefix}dd-drop-icon {
background-image: theme-background-image($theme-name, 'dd/drop-yes.gif');
}
.#{$prefix}dd-drop-ok-add .#{$prefix}dd-drop-icon {
background-image: theme-background-image($theme-name, 'dd/drop-add.gif');
}
}

View File

@@ -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;
}

View File

@@ -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 {
background-image: theme-background-image($theme-name, 'shared/blue-loading.gif');
}
.#{$prefix}message-box .ext-mb-info {
background-image: theme-background-image($theme-name, 'shared/icon-info.gif');
}
.#{$prefix}message-box .ext-mb-warning {
background-image: theme-background-image($theme-name, 'shared/icon-warning.gif');
}
.#{$prefix}message-box .ext-mb-question {
background-image: theme-background-image($theme-name, 'shared/icon-question.gif');
}
.#{$prefix}message-box .ext-mb-error {
background-image: theme-background-image($theme-name, 'shared/icon-error.gif');
}
}

View File

@@ -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;
background-image: theme-background-image($theme-name, 'sizer/e-handle.gif');
}
.#{$prefix}resizable-handle-south,
.#{$prefix}resizable-handle-north {
background-position: top;
background-image: theme-background-image($theme-name, 'sizer/s-handle.gif');
}
.#{$prefix}resizable-handle-southeast {
background-position: top left;
background-image: theme-background-image($theme-name, 'sizer/se-handle.gif');
}
.#{$prefix}resizable-handle-northwest {
background-position: bottom right;
background-image: theme-background-image($theme-name, 'sizer/nw-handle.gif');
}
.#{$prefix}resizable-handle-northeast {
background-position: bottom left;
background-image: theme-background-image($theme-name, 'sizer/ne-handle.gif');
}
.#{$prefix}resizable-handle-southwest {
background-position: top right;
background-image: theme-background-image($theme-name, 'sizer/sw-handle.gif');
}
}
}

View File

@@ -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;
}
}

View File

@@ -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;
background-image: theme-background-image($theme-name, 'util/splitter/mini-left.gif');
}
.#{$prefix}layout-split-right {
background: no-repeat top left;
background-image: theme-background-image($theme-name, 'util/splitter/mini-right.gif');
}
.#{$prefix}layout-split-top {
background: no-repeat top left;
background-image: theme-background-image($theme-name, 'util/splitter/mini-top.gif');
}
.#{$prefix}layout-split-bottom {
background: no-repeat top left;
background-image: theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
}
.#{$prefix}splitter-collapsed {
.#{$prefix}layout-split-left {
background: no-repeat top left;
background-image: theme-background-image($theme-name, 'util/splitter/mini-right.gif');
}
.#{$prefix}layout-split-right {
background: no-repeat top right;
background-image: theme-background-image($theme-name, 'util/splitter/mini-left.gif');
}
.#{$prefix}layout-split-top {
background: no-repeat top left;
background-image: theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
}
.#{$prefix}layout-split-bottom {
background: no-repeat top left;
background-image: 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);
}
}

View File

@@ -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;
background-image: 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;
}
}
}

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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: true !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;

View File

@@ -0,0 +1,3 @@
$focus-frame-color: rgb(21, 66, 139);
$focus-frame-style: solid;
$focus-frame-width: 2px;

View File

@@ -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;

View File

@@ -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;

View File

@@ -0,0 +1,2 @@
$html-editor-border-color: $form-field-border-color !default;
$html-editor-background-color: $form-field-background-color !default;

View File

@@ -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;

View File

@@ -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;

View File

@@ -0,0 +1,23 @@
//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;
$menu-link-padding: 6px 2px 3px 32px !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';

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -0,0 +1,2 @@
$tree-elbow-height: 18px !default;
$tree-elbow-width: 16px !default;

View File

@@ -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;

View File

@@ -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;
}
}

View File

@@ -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;
}
}

View File

@@ -0,0 +1,996 @@
/**
* @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;
background-color: transparent;
background-repeat: no-repeat;
background-position: left center;
}
.#{$prefix}btn-left .#{$prefix}btn-inner {
text-align: left;
}
.#{$prefix}btn-center .#{$prefix}btn-inner {
text-align: center;
}
.#{$prefix}btn-right .#{$prefix}btn-inner {
text-align: right;
}
}
.#{$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 {
background-image: 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;
background-image: 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;
background-image: theme-background-image($theme-name, 'button/s-arrow-b.gif');
padding-bottom: $button-split-size;
}
.#{$prefix}toolbar .#{$prefix}btn-split-right {
background-image: theme-background-image($theme-name, 'button/s-arrow-noline.gif');
padding-right: $button-toolbar-split-size !important;
}
.#{$prefix}toolbar .#{$prefix}btn-split-bottom {
background-image: 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 { background-image: theme-background-image($theme-name, 'button/s-arrow-o.gif'); }
.#{$prefix}btn-over .#{$prefix}btn-split-bottom { background-image: 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 .#{$prefix}ie & {
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 .#{$prefix}ie & {
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 {
background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-over-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-over-sides.gif');
}
.#{$prefix}frame-mc {
background-color: $background-color-over;
@if $background-gradient-over != null {
background-image: 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 {
background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-sides.gif');
}
.#{$prefix}frame-mc {
background-color: $background-color-focus;
@if $background-gradient-focus != null {
background-image: 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 {
background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-sides.gif');
}
.#{$prefix}frame-mc {
background-color: $background-color-pressed;
@if $background-gradient-pressed != null {
background-image: 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 {
background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-sides.gif');
}
.#{$prefix}frame-mc {
background-color: $background-color-disabled;
@if $background-gradient-disabled != null {
background-image: 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;
background-image: 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;
background-image: 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;
background-image: 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;
background-image: 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;
background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif');
}
}
}
}
};

View File

@@ -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;
}
}

View File

@@ -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 {
background-image: theme-background-image($theme-name, $datepicker-next-image);
}
}
.#{$prefix}datepicker-prev {
left: 5px;
a {
background-image: 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;
background-image: 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 {
background-image: theme-background-image($theme-name, $datepicker-tool-sprite-image);
height: 15px;
width: 15px;
padding: 0;
margin: 6px 12px 5px 15px;
border: 0;
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 {
background-image: 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 {
background-image: theme-background-image($theme-name, 'datepicker/datepicker-footer-bg.gif');
background-repeat: repeat-x;
background-position: top left;
}
}
}
}
}

View File

@@ -0,0 +1,55 @@
@mixin extjs-drawcomponent {
.#{$prefix}surface {
@include inline-block;
}
.rvml {
behavior: url(#default#VML);
}
.#{$prefix}surface tspan {
@include no-select;
}
.#{$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;
}
}

View File

@@ -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';

View File

@@ -0,0 +1,817 @@
@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);
}
}
.#{$prefix}accordion-item .#{$prefix}grid-header-ct {
border: 0 none;
}
@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;
background-image: 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;
background-image: 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;
background-image: 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;
background-image: 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;
background-image: theme-background-image($theme-name, 'grid/sort_desc.gif');
}
//grid rows
.#{$prefix}grid-row {
line-height: 13px;
vertical-align: top;
padding: $grid-row-padding;
@include no-select;
.#{$prefix}grid-cell {
@if $grid-row-cell-color {
color: $grid-row-cell-color;
}
font: $grid-row-cell-font;
background-color: $grid-row-cell-background;
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;
@include no-select;
}
.#{$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 {
background-image: 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 {
background-image: 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 {
background-image: 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;
background-image: 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 {
@include no-select;
}
.#{$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 {
background-image: 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 {
background-image: 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 {
background-image: theme-background-image($theme-name, 'grid/col-move-top.gif');
}
.col-move-bottom {
background-image: 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;
background-image: 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 {
background-image: 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 {
background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
}
.#{$prefix}group-by-icon {
background-image: theme-background-image($theme-name, 'grid/group-by.gif');
}
.#{$prefix}show-groups-icon {
background-image: 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;
background-image: 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 {
background-image: 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 {
background-image: theme-background-image($theme-name, 'grid/checked.gif');
}
//grid icons
.#{$prefix}tbar-page-first {
background-image: theme-background-image($theme-name, 'grid/page-first.gif') !important;
}
.#{$prefix}tbar-loading {
background-image: theme-background-image($theme-name, 'grid/refresh.gif') !important;
}
.#{$prefix}tbar-page-last {
background-image: theme-background-image($theme-name, 'grid/page-last.gif') !important;
}
.#{$prefix}tbar-page-next {
background-image: theme-background-image($theme-name, 'grid/page-next.gif') !important;
}
.#{$prefix}tbar-page-prev {
background-image: theme-background-image($theme-name, 'grid/page-prev.gif') !important;
}
.#{$prefix}item-disabled {
.#{$prefix}tbar-loading {
background-image: theme-background-image($theme-name, 'grid/refresh-disabled.gif') !important;
}
.#{$prefix}tbar-page-first {
background-image: theme-background-image($theme-name, 'grid/page-first-disabled.gif') !important;
}
.#{$prefix}tbar-page-last {
background-image: theme-background-image($theme-name, 'grid/page-last-disabled.gif') !important;
}
.#{$prefix}tbar-page-next {
background-image: theme-background-image($theme-name, 'grid/page-next-disabled.gif') !important;
}
.#{$prefix}tbar-page-prev {
background-image: theme-background-image($theme-name, 'grid/page-prev-disabled.gif') !important;
}
}
//menu icons
.#{$prefix}hmenu-sort-asc .#{$prefix}menu-item-icon {
background-image: theme-background-image($theme-name, 'grid/hmenu-asc.gif');
}
.#{$prefix}hmenu-sort-desc .#{$prefix}menu-item-icon {
background-image: theme-background-image($theme-name, 'grid/hmenu-desc.gif');
}
.#{$prefix}hmenu-lock .#{$prefix}menu-item-icon {
background-image: theme-background-image($theme-name, 'grid/hmenu-lock.gif');
}
.#{$prefix}hmenu-unlock .#{$prefix}menu-item-icon {
background-image: theme-background-image($theme-name, 'grid/hmenu-unlock.gif');
}
.#{$prefix}group-by-icon {
background-image: theme-background-image($theme-name, 'grid/group-by.gif');
}
.#{$prefix}cols-icon .#{$prefix}menu-item-icon {
background-image: theme-background-image($theme-name, 'grid/columns.gif');
}
.#{$prefix}show-groups-icon {
background-image: 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;
background-image: 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;
background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-left.png');
height: 16px;
width: 16px;
}
}
.#{$prefix}ie6 {
.#{$prefix}grid-drop-indicator-left {
background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-right.gif');
}
.#{$prefix}grid-drop-indicator-right {
background-image: 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;
padding-left: 4px;
}
.#{$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;
background-image: 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;
}
}
}

View File

@@ -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; }
; }
}

View File

@@ -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-background-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;
}
}

View File

@@ -0,0 +1,191 @@
/**
* @class Ext.menu.*
*/
@mixin extjs-menu {
.#{$prefix}menu-body {
@include no-select;
background: $menu-background-color !important;
padding: $menu-padding;
}
.#{$prefix}menu-item .#{$prefix}form-text {
user-select: text;
-webkit-user-select: text;
-o-user-select: text;
-ie-user-select: text;
-moz-user-select: text;
-ie-user-select: text;
}
.#{$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%!important;
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;
margin: 1px;
padding: $menu-link-padding;
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;
position: absolute;
top: 5px;
left: 4px;
background: no-repeat center center;
}
.#{$prefix}menu-item-text {
font-size: ceil($font-size * .9);
color: $menu-text-color;
}
.#{$prefix}menu-item-checked {
.#{$prefix}menu-item-icon {
background-image: theme-background-image($theme-name, $menu-icon-checked);
}
.#{$prefix}menu-group-icon {
background-image: theme-background-image($theme-name, $menu-icon-group-checked);
}
}
.#{$prefix}menu-item-unchecked {
.#{$prefix}menu-item-icon {
background-image: theme-background-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: no-repeat center center;
background-image: theme-background-image($theme-name, $menu-icon-arrow);
}
.#{$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-disabled {
.#{$prefix}menu-item-icon {
@include opacity(.5);
}
.#{$prefix}menu-item-text {
// IE opacity/cleartype bug workaround
background-color: transparent;
}
}
.#{$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 repeat-x left top;
background-image: theme-background-image($theme-name, $menu-item-active-background-image);
}
}
}
.#{$prefix}menu-date-item {
border-color: #99BBE8;
}
}

View File

@@ -0,0 +1,448 @@
/**
* @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-container {
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.#{$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-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-top-bg.gif');
}
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-bottom-bg.gif');
}
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-left {
background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-left-bg.gif');
}
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
background-image: theme-background-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;
}
}

View File

@@ -0,0 +1,118 @@
@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: repeat-x;
background-image: theme-background-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif');
}
}
}
}
}
}

View File

@@ -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;
background-image: 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
);
}

View File

@@ -0,0 +1,141 @@
@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;
@include no-select;
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-background-image($theme-name, 'slider/slider-bg.png');
}
.#{$prefix}slider-horz .#{$prefix}slider-thumb {
background-image: theme-background-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-background-image($theme-name, 'slider/slider-v-bg.png');
}
.#{$prefix}slider-vert .#{$prefix}slider-thumb {
background-image: theme-background-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-background-image($theme-name, 'slider/slider-bg.gif');
}
.#{$prefix}slider-horz .#{$prefix}slider-thumb {
background-image: theme-background-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-background-image($theme-name, 'slider/slider-v-bg.gif');
}
.#{$prefix}slider-vert .#{$prefix}slider-thumb {
background-image: theme-background-image($theme-name, 'slider/slider-v-thumb.gif');
}
}
}
}

View File

@@ -0,0 +1,501 @@
/**
* @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}tab-disabled {
@include opacity(1);
}
.#{$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 {
@if $tab-background-gradient != null {
.#{$prefix}tab-top { background-image: theme-background-image($theme-name, 'tab/tab-default-top-bg.gif'); }
.#{$prefix}tab-bottom { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-bg.gif'); }
}
@if $tab-background-gradient-over != null {
.#{$prefix}tab-top-over { background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif'); }
.#{$prefix}tab-bottom-over { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); }
}
@if $tab-background-gradient-active != null {
.#{$prefix}tab-top-active { background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif'); }
.#{$prefix}tab-bottom-active { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); }
}
@if $tab-background-gradient-disabled != null {
.#{$prefix}tab-top-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; }
.#{$prefix}tab-bottom-disabled { background-image: theme-background-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: no-repeat;
background-image: theme-background-image($theme-name, $tab-closable-icon);
@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-background-image($theme-name, 'tab/tab-default-top-over-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-sides.gif');
}
@if $tab-background-gradient-over != null {
.#{$prefix}frame-mc {
background-color: $tab-base-color-over;
background-repeat: repeat-x;
background-image: theme-background-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-background-image($theme-name, 'tab/tab-default-bottom-over-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-sides.gif');
}
@if $tab-background-gradient-over != null {
.#{$prefix}frame-mc {
background-color: $tab-base-color-over;
background-repeat: repeat-x;
background-image: theme-background-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-background-image($theme-name, 'tab/tab-default-top-active-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-sides.gif');
}
@if $tab-background-gradient-active != null {
.#{$prefix}frame-mc {
background-color: $tab-base-color-active;
background-repeat: repeat-x;
background-image: theme-background-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-background-image($theme-name, 'tab/tab-default-bottom-active-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-sides.gif');
}
@if $tab-background-gradient-active != null {
.#{$prefix}frame-mc {
background-color: $tab-base-color-active;
background-repeat: repeat-x;
background-image: theme-background-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-background-image($theme-name, 'tab/tab-default-top-disabled-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-sides.gif');
}
@if $tab-background-gradient-disabled != null {
.#{$prefix}frame-mc {
background-repeat: repeat-x;
background-image: theme-background-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-background-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif');
}
.#{$prefix}frame-ml,
.#{$prefix}frame-mr {
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif');
}
@if $tab-background-gradient-disabled != null {
.#{$prefix}frame-mc {
background-repeat: repeat-x;
background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif');
}
}
}
}
}
}

View File

@@ -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-background-image($theme-name, 'tab-bar/tab-bar-default-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;
}
}

View File

@@ -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-background-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: $toolbar-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-background-image($theme-name, 'toolbar/toolbar-#{$ui}-bg.gif') !important;
background-repeat: repeat-x;
}
}
}
}
}

View File

@@ -0,0 +1,277 @@
@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-background-image($theme-name, 'tree/elbow.gif');
}
.#{$prefix}tree-elbow-end {
background-image: theme-background-image($theme-name, 'tree/elbow-end.gif');
}
.#{$prefix}tree-elbow-plus {
background-image: theme-background-image($theme-name, 'tree/elbow-plus.gif');
}
.#{$prefix}tree-elbow-end-plus {
background-image: theme-background-image($theme-name, 'tree/elbow-end-plus.gif');
}
.#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus {
background-image: theme-background-image($theme-name, 'tree/elbow-minus.gif');
}
.#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
background-image: theme-background-image($theme-name, 'tree/elbow-end-minus.gif');
}
.#{$prefix}tree-elbow-line {
background-image: theme-background-image($theme-name, 'tree/elbow-line.gif');
}
}
.#{$prefix}tree-no-lines {
.#{$prefix}tree-elbow-plus,
.#{$prefix}tree-elbow-end-plus {
background-image: theme-background-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-background-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-background-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-background-image($theme-name, 'tree/leaf.gif');
}
.#{$prefix}tree-icon-parent {
width: $tree-elbow-width;
background-image: theme-background-image($theme-name, 'tree/folder.gif');
}
.#{$prefix}grid-tree-node-expanded .#{$prefix}tree-icon-parent {
background-image: theme-background-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;
cursor: pointer;
white-space: nowrap;
vertical-align: middle;
img {
margin-top: 0;
display: inline-block;
vertical-align: top;
}
}
.#{$prefix}tree-checkbox {
margin: 2px 3px 0 0;
display: inline-block;
vertical-align: top;
width: $form-checkbox-size;
height: $form-checkbox-size;
background: no-repeat;
background-image: theme-background-image($theme-name, $form-checkbox-image);
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;
}
.#{$prefix}ie6 .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner img,
.#{$prefix}quirks .#{$prefix}ie .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner img {
margin-top: -1px;
vertical-align: middle;
}
.#{$prefix}strict .#{$prefix}ie7 .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner img {
margin-top: -3px;
vertical-align: middle;
}
.#{$prefix}ie6 .#{$prefix}tree-checkbox,
.#{$prefix}quirks .#{$prefix}ie7 .#{$prefix}tree-checkbox {
margin-top: 0;
vertical-align: middle;
}
.#{$prefix}strict .#{$prefix}ie7 .#{$prefix}tree-checkbox {
margin-top: -2px;
vertical-align: middle;
}
}
@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-background-image($theme-name, 'tree/drop-append.gif');
}
.#{$prefix}tree-drop-ok-above .#{$prefix}dd-drop-icon {
background-image: theme-background-image($theme-name, 'tree/drop-above.gif');
}
.#{$prefix}tree-drop-ok-below .#{$prefix}dd-drop-icon {
background-image: theme-background-image($theme-name, 'tree/drop-below.gif');
}
.#{$prefix}tree-drop-ok-between .#{$prefix}dd-drop-icon {
background-image: theme-background-image($theme-name, 'tree/drop-between.gif');
}
.#{$prefix}grid-tree-loading .#{$prefix}tree-icon {
background-image: theme-background-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;
}
}

View File

@@ -0,0 +1,9 @@
@mixin extjs-viewport {
.#{$prefix}viewport, .#{$prefix}viewport body {
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
}

View File

@@ -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);
}
}

View File

@@ -0,0 +1,75 @@
@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: no-repeat 0 2px;
background-image: theme-background-image($theme-name, $form-exclamation-icon);
}
.#{$prefix}form-invalid-icon {
width: 18px;
height: 18px;
overflow: hidden;
text-indent: -9999px;
position: absolute;
left: 0;
top: 0;
background: no-repeat 2px 3px;
background-image: theme-background-image($theme-name, $form-exclamation-icon);
ul {
/* prevent inner elements from interfering with QuickTip hovering */
display: none;
}
}
}

View File

@@ -0,0 +1,65 @@
@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: no-repeat;
background-image: theme-background-image($theme-name, $form-checkbox-image);
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-background-image($theme-name, $form-radio-image);
}
/* boxLabel */
.#{$prefix}form-cb-label-before {
margin-right: 4px;
}
.#{$prefix}form-cb-label-after {
margin-left: 4px;
}
}

View File

@@ -0,0 +1,31 @@
@mixin extjs-form-checkboxgroup {
.#{$prefix}form-checkboxgroup-body {
//padding: 3px 4px;
}
.#{$prefix}form-invalid {
.#{$prefix}form-checkboxgroup-body {
border: 1px solid #c30;
background: #fff repeat-x bottom;
background-image: theme-background-image($theme-name, 'grid/invalid_line.gif');
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;
}
}

View File

@@ -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-background-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-background-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-background-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;
}
}

View File

@@ -0,0 +1,109 @@
@mixin extjs-form-fieldset {
.#{$prefix}fieldset {
border: $fieldset-border;
padding: 0 $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}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;
}
}

View File

@@ -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;
}
}
}

View File

@@ -0,0 +1,124 @@
@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 no-repeat;
background-image:theme-background-image($theme-name, 'editor/tb-sprite.gif');
}
.#{$prefix}html-editor-tb .#{$prefix}edit-bold,
.#{$prefix}menu-item img.#{$prefix}edit-bold {
background-position:0 0;
background-image: theme-background-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-background-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-background-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-background-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-background-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-background-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-background-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-background-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-background-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-background-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-background-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-background-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-background-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-background-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;
}
}

View File

@@ -0,0 +1,162 @@
@mixin extjs-form-triggerfield {
.#{$prefix}form-trigger-wrap {
float: left;
}
.#{$prefix}form-trigger {
background-image: theme-background-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-background-image($theme-name, 'boundlist/trigger-arrow.png');
}
}
.#{$prefix}form-date-trigger {
background-image: theme-background-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-background-image($theme-name, 'form/spinner.gif');
width: $form-trigger-width !important;
height: $spinner-btn-height !important;
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-background-image($theme-name, 'form/spinner-small.gif');
height: $spinner-btn-height !important;
}
.#{$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-background-image($theme-name, 'form/clear-trigger.gif');
}
.#{$prefix}form-search-trigger {
background-image: theme-background-image($theme-name, 'form/search-trigger.gif');
}
}