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,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');
}
}