@mixin extjs-grid { //main grid view .#{$prefix}panel { .#{$prefix}grid-body { background: $panel-body-background-color; border-color: $panel-body-border-color; border-style: $panel-body-border-style; border-width: 1px; border-top-color: $grid-header-background-color; } // Still needs left and right border even if it's not visible so that its available width can be calculated correctly .#{$prefix}grid-header-ct-hidden { border-top-width: 0 !important; } } .#{$prefix}grid-header-hidden .#{$prefix}grid-body { border-top-color: $panel-body-border-color !important; } .#{$prefix}grid-view { overflow: hidden; position: relative; } .#{$prefix}grid-table { table-layout: fixed; border-collapse: separate; } .#{$prefix}grid-row .#{$prefix}grid-table { border-collapse: collapse; } .#{$prefix}grid-locked .#{$prefix}grid-inner-locked { border-width: 0 1px 0 0 !important; border-style: solid; } .#{$prefix}grid-header-ct { cursor: default; zoom: 1; padding: 0; border: 1px solid $panel-body-border-color; @if $supports-gradients or $compile-all { @include background-gradient($grid-header-background-color, $grid-header-background-gradient); } } @if $include-ie or $compile-all { .#{$prefix}border-box .#{$prefix}ie9 { .#{$prefix}grid-header-ct { padding-left: 1px; } } .#{$prefix}ie6, .#{$prefix}ie7 { .#{$prefix}grid-header-ct { padding-left: 1px; } } } .#{$prefix}column-header { padding: 0; position: absolute; overflow: hidden; border-right: 1px solid $grid-header-background-color; border-left: 0 none; border-top: 0 none; border-bottom: 0 none; text-shadow: 0 1px 0 rgba(255, 255, 255, .3); font: normal 11px/15px $font-family; @if $grid-header-color { color: $grid-header-color; } font: normal ceil($font-size * .9) $font-family; @if $supports-gradients or $compile-all { @include background-gradient($grid-header-background-color, $grid-header-background-gradient); } } .#{$prefix}group-header { padding: 0; border-left-width: 0; } .#{$prefix}group-sub-header { background: transparent; border-top: 1px solid $grid-header-background-color; border-left-width: 0; } .#{$prefix}column-header-inner { zoom: 1; position: relative; white-space: nowrap; line-height: 22px; padding: $grid-header-padding; .#{$prefix}column-header-text { white-space: nowrap; } } .#{$prefix}column-header-over, .#{$prefix}column-header-sort-ASC, .#{$prefix}column-header-sort-DESC { border-left-color: $grid-header-over-border-color; border-right-color: $grid-header-over-border-color; @if $supports-gradients or $compile-all { @include background-gradient($grid-header-over-background-color, $grid-header-over-background-gradient); } } @if not $supports-gradients or $compile-all { .#{$prefix}nlg { .#{$prefix}grid-header-ct, .#{$prefix}column-header { background: repeat-x 0 top; @include theme-background-image($theme-name, 'grid/column-header-bg.gif'); } .#{$prefix}column-header-over, .#{$prefix}column-header-sort-ASC, .#{$prefix}column-header-sort-DESC { background: #ebf3fd repeat-x 0 top; @include theme-background-image($theme-name, 'grid/column-header-over-bg.gif'); } } } .#{$prefix}column-header-trigger { display: none; height: 100%; width: $grid-header-trigger-width; background: no-repeat left center; background-color: #c3daf9; @include theme-background-image($theme-name, 'grid/grid3-hd-btn.gif'); position: absolute; right: 0; top: 0; z-index: 2; cursor: pointer; } .#{$prefix}column-header-over, .#{$prefix}column-header-open { .#{$prefix}column-header-trigger { display: block; } } .#{$prefix}column-header-align-right { text-align: right; .#{$prefix}column-header-text { padding-right: 0.5ex; margin-right: 6px; } } .#{$prefix}column-header-align-center { text-align: center; } .#{$prefix}column-header-align-left { text-align: left; } // Sort direction indicator is a background of the text span. .#{$prefix}column-header-sort-ASC .#{$prefix}column-header-text { padding-right: 16px; background: no-repeat right 6px; @include theme-background-image($theme-name, 'grid/sort_asc.gif'); } .#{$prefix}column-header-sort-DESC .#{$prefix}column-header-text { padding-right: 16px; background: no-repeat right 6px; @include theme-background-image($theme-name, 'grid/sort_desc.gif'); } //grid rows .#{$prefix}grid-row { line-height: 13px; vertical-align: top; padding: $grid-row-padding; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: ignore; .#{$prefix}grid-cell { @if $grid-row-cell-color { color: $grid-row-cell-color; } font: $grid-row-cell-font; border-color: $grid-row-cell-border-color; border-style: $grid-row-cell-border-style; border-width: $grid-row-cell-border-width; border-top-color: lighten($grid-row-cell-border-color, 5); } } .#{$prefix}grid-rowwrap-div { border-width: $grid-row-wrap-border-width; border-color: $grid-row-wrap-border-color; border-style: $grid-row-wrap-border-style; border-top-color: lighten($grid-row-wrap-border-color, 5); overflow: hidden; } .#{$prefix}grid-row-alt .#{$prefix}grid-cell, .#{$prefix}grid-row-alt .#{$prefix}grid-rowwrap-div { background-color: $grid-row-cell-alt-background; } .#{$prefix}grid-row-over .#{$prefix}grid-cell, .#{$prefix}grid-row-over .#{$prefix}grid-rowwrap-div { border-color: $grid-row-cell-over-border-color; background-color: $grid-row-cell-over-background-color; } .#{$prefix}grid-row-focused .#{$prefix}grid-cell, .#{$prefix}grid-row-focused .#{$prefix}grid-rowwrap-div { border-color: $grid-row-cell-focus-border-color; background-color: $grid-row-cell-focus-background-color; } .#{$prefix}grid-row-selected .#{$prefix}grid-cell, .#{$prefix}grid-row-selected .#{$prefix}grid-rowwrap-div { border-style: $grid-row-cell-selected-border-style; border-color: $grid-row-cell-selected-border-color; background-color: $grid-row-cell-selected-background-color !important; } .#{$prefix}grid-rowwrap-div { .#{$prefix}grid-cell, .#{$prefix}grid-cell-inner { border-width: 0; background: transparent; } } .#{$prefix}grid-row-body-hidden { display: none; } .#{$prefix}grid-rowbody { font: $grid-row-body-font; padding: $grid-row-body-padding; p { margin: 5px 5px 10px 5px; } } //grid cells .#{$prefix}grid-cell { overflow: hidden; font: $grid-cell-font; -moz-user-select: none; -khtml-user-select:none; -webkit-user-select:ignore; } .#{$prefix}grid-cell-inner { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; padding: $grid-cell-inner-padding; white-space: nowrap; } // Action columns with a standard, 16x16 icon require less padding .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner { padding: 1px 2px 0 2px; } .#{$prefix}ie6, .#{$prefix}ie7, .#{$prefix}quirks .#{$prefix}ie9, .#{$prefix}quirks .#{$prefix}ie8, .#{$prefix}strict .#{$prefix}ie8 { .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner { padding: 2px 2px 1px 2px; } } .#{$prefix}grid-row .#{$prefix}grid-cell-special { padding: 0; border-right: 1px solid $grid-cell-with-col-lines-border-color; @include background-gradient(#f6f6f6, 'grid-cell-special'); } /* IE6-8 have issues with shrinking the TR to 0px (even w/line-height=0), so we use an IE-specific trick to make the row disappear. We cannot do this on any other browser, because it is not a non-standard thing to do and those other browsers will do whacky things with it. */ .#{$prefix}ie6, .#{$prefix}ie7, .#{$prefix}quirks .#{$prefix}ie8, .#{$prefix}strict .#{$prefix}ie8 { .#{$prefix}grid-header-row { position: absolute; } } .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special { border-right: 1px solid adjust-color($base-color, $hue: -0.175deg, $saturation: 25.296%, $lightness: -2.549%); @include background-gradient($grid-row-cell-selected-background-color, 'grid-cell-special'); } .#{$prefix}grid-dirty-cell { @include theme-background-image($theme-name, 'grid/dirty.gif'); background-position: 0 0; background-repeat: no-repeat; } .#{$prefix}grid-cell-selected { background-color: #B8CFEE !important; } @if not $supports-gradients or $compile-all { .#{$prefix}nlg { .#{$prefix}grid-cell-special { background-repeat: repeat-y; background-position: top right; } .#{$prefix}grid-row .#{$prefix}grid-cell-special, .#{$prefix}grid-row-over .#{$prefix}grid-cell-special { @include theme-background-image($theme-name, 'grid/cell-special-bg.gif'); } .#{$prefix}grid-row-focused .#{$prefix}grid-cell-special, .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special { @include theme-background-image($theme-name, 'grid/cell-special-selected-bg.gif'); } } } //this is panel as gridpanel doesn't use a baseCls .#{$prefix}panel-with-col-lines .#{$prefix}grid-row .#{$prefix}grid-cell { padding-right: 0; border-right: 1px solid $grid-cell-with-col-lines-border-color; } @if $include-ie { .#{$prefix}ie { .#{$prefix}grid-cell-special { border-right-width: 0 !important; } } } .#{$prefix}property-grid { .#{$prefix}grid-row .#{$prefix}grid-cell-inner { padding: 3px 6px 5px; } .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner, .#{$prefix}grid-row-over .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner { padding-left: 12px; @include theme-background-image($theme-name, 'grid/property-cell-bg.gif'); background-repeat: no-repeat; background-position: -16px 1px; } } @if $include-ie { .#{$prefix}quirks .#{$prefix}ie .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner { background-position: -16px 2px; } } .#{$prefix}unselectable { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: ignore; } .#{$prefix}grid-row-body-hidden { display: none; } .#{$prefix}grid-group-collapsed { display: none; } //grid expander .#{$prefix}grid-view { .#{$prefix}grid-td-expander { vertical-align: top; } } .#{$prefix}grid-td-expander { background: repeat-y right transparent; } .#{$prefix}grid-view { .#{$prefix}grid-td-expander { .#{$prefix}grid-cell-inner { padding: 0 !important; } } } .#{$prefix}grid-row-expander { @include theme-background-image($theme-name, 'grid/group-collapse.gif'); background-color: transparent; width: 9px; height: 13px; margin-left: 3px; background-repeat: no-repeat; background-position: 0 -2px; } .#{$prefix}grid-row-collapsed { .#{$prefix}grid-row-expander { @include theme-background-image($theme-name, 'grid/group-expand.gif'); } } .#{$prefix}grid-resize-marker { position: absolute; z-index: 5; top: 0; width: 1px; background-color: #0f0f0f; } //column move icons, when moving columns .col-move-top, .col-move-bottom { width: 9px; height: 9px; position: absolute; top: 0; line-height: 0; font-size: 0; overflow: hidden; z-index: 20000; background: no-repeat left top transparent; } .col-move-top { @include theme-background-image($theme-name, 'grid/col-move-top.gif'); } .col-move-bottom { @include theme-background-image($theme-name, 'grid/col-move-bottom.gif'); } //pading toolbar .#{$prefix}tbar-page-number { width: 30px; } //grouped grid .#{$prefix}grid-group, .#{$prefix}grid-group-body, .#{$prefix}grid-group-hd { zoom: 1; } .#{$prefix}grid-group-hd { padding-top: 6px; .#{$prefix}grid-cell-inner { padding: 10px 4px 4px 4px; background: $grid-grouped-header-background-color; border-width: $grid-grouped-header-border-width; border-style: $grid-grouped-header-border-style; border-color: $grid-grouped-header-border-color; cursor: pointer; } } .#{$prefix}grid-group-title { background: transparent no-repeat 0 -1px; @include theme-background-image($theme-name, 'grid/group-collapse.gif'); color: $grid-grouped-title-color; font: $grid-grouped-title-font; padding: 0 0 0 14px; } .#{$prefix}grid-group-hd-collapsed { .#{$prefix}grid-group-title { @include theme-background-image($theme-name, 'grid/group-expand.gif'); } } .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-body { display: none; } .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-title { @include theme-background-image($theme-name, 'grid/group-expand.gif'); } .#{$prefix}group-by-icon { @include theme-background-image($theme-name, 'grid/group-by.gif'); } .#{$prefix}show-groups-icon { @include theme-background-image($theme-name, 'grid/group-by.gif'); } .#{$prefix}column-header-checkbox .#{$prefix}column-header-inner { padding: 1px; } .#{$prefix}grid-cell-special .#{$prefix}grid-cell-inner { padding: 4px; } .#{$prefix}grid-row-checker, .#{$prefix}column-header-checkbox .#{$prefix}column-header-text { height: 14px; width: 14px; @include theme-background-image($theme-name, 'grid/unchecked.gif'); background-position: -1px -1px; background-repeat: no-repeat; background-color: transparent; } // Row checker is a div but column header checker is the text span element, so make it display: block // Header checkbox element needs centering .#{$prefix}column-header-checkbox .#{$prefix}column-header-text { display: block; margin-top: 4px; margin-left: 4px; } @if $include-ie or $compile-all { /* All IE Quirks mode need to squish the header height or the line-height will become too tall */ /* IE6 always needs the hack regardless of quirks/strict */ .#{$prefix}quirks .#{$prefix}ie, .#{$prefix}ie6 { .#{$prefix}column-header-checkbox .#{$prefix}column-header-inner { line-height: 18px; } } /* IE 6, 7 & 9 are 1px too far to the right when centering, drop the margin 1px. */ .#{$prefix}ie6, .#{$prefix}ie7, .#{$prefix}ie9 { .#{$prefix}column-header-checkbox .#{$prefix}column-header-text { margin-left: 3px; } } } .#{$prefix}grid-hd-checker-on .#{$prefix}column-header-text { @include theme-background-image($theme-name, 'grid/checked.gif'); } .#{$prefix}grid-row-checker { margin-left: 1px; background-position: 50% -2px; } .#{$prefix}grid-row-selected .#{$prefix}grid-row-checker, .#{$prefix}grid-row-checked .#{$prefix}grid-row-checker { @include theme-background-image($theme-name, 'grid/checked.gif'); } //grid icons .#{$prefix}tbar-page-first { background-image: theme-image($theme-name, 'grid/page-first.gif') !important; } .#{$prefix}tbar-loading { background-image: theme-image($theme-name, 'grid/refresh.gif') !important; } .#{$prefix}tbar-page-last { background-image: theme-image($theme-name, 'grid/page-last.gif') !important; } .#{$prefix}tbar-page-next { background-image: theme-image($theme-name, 'grid/page-next.gif') !important; } .#{$prefix}tbar-page-prev { background-image: theme-image($theme-name, 'grid/page-prev.gif') !important; } .#{$prefix}item-disabled { .#{$prefix}tbar-loading { background-image: theme-image($theme-name, 'grid/refresh-disabled.gif') !important; } .#{$prefix}tbar-page-first { background-image: theme-image($theme-name, 'grid/page-first-disabled.gif') !important; } .#{$prefix}tbar-page-last { background-image: theme-image($theme-name, 'grid/page-last-disabled.gif') !important; } .#{$prefix}tbar-page-next { background-image: theme-image($theme-name, 'grid/page-next-disabled.gif') !important; } .#{$prefix}tbar-page-prev { background-image: theme-image($theme-name, 'grid/page-prev-disabled.gif') !important; } } //menu icons .xg-hmenu-sort-asc .#{$prefix}menu-item-icon { @include theme-background-image($theme-name, 'grid/hmenu-asc.gif'); } .xg-hmenu-sort-desc .#{$prefix}menu-item-icon { @include theme-background-image($theme-name, 'grid/hmenu-desc.gif'); } .xg-hmenu-lock .#{$prefix}menu-item-icon { @include theme-background-image($theme-name, 'grid/hmenu-lock.gif'); } .xg-hmenu-unlock .#{$prefix}menu-item-icon { @include theme-background-image($theme-name, 'grid/hmenu-unlock.gif'); } .#{$prefix}group-by-icon { @include theme-background-image($theme-name, 'grid/group-by.gif'); } .#{$prefix}cols-icon .#{$prefix}menu-item-icon { @include theme-background-image($theme-name, 'grid/columns.gif'); } .#{$prefix}show-groups-icon { @include theme-background-image($theme-name, 'grid/group-by.gif'); } // Drag/drop indicator styles .#{$prefix}grid-drop-indicator { position: absolute; height: 1px; line-height: 0px; background-color: #77BC71; overflow: visible; .#{$prefix}grid-drop-indicator-left { position: absolute; top: -8px; left: -12px; @include theme-background-image($theme-name, 'grid/dd-insert-arrow-right.png'); height: 16px; width: 16px; } .#{$prefix}grid-drop-indicator-right { position: absolute; top: -8px; right: -11px; @include theme-background-image($theme-name, 'grid/dd-insert-arrow-left.png'); height: 16px; width: 16px; } } .#{$prefix}ie6 { .#{$prefix}grid-drop-indicator-left { @include theme-background-image($theme-name, 'grid/dd-insert-arrow-right.gif'); } .#{$prefix}grid-drop-indicator-right { @include theme-background-image($theme-name, 'grid/dd-insert-arrow-left.gif'); } } // Row Editor .#{$prefix}grid-row-editor { position: absolute !important; z-index: 1; zoom: 1; overflow: visible !important; .#{$prefix}form-field { font: $grid-row-editor-font; } .#{$prefix}form-display-field { font: $grid-row-editor-font; padding-top: 0; } .#{$prefix}panel-body { background-color: $grid-row-editor-background-color; border-top: $grid-row-editor-border; border-bottom: $grid-row-editor-border; } } // Perfect alignment of input text with cell text .#{$prefix}grid-row-editor { // Align input text with text value in cell .#{$prefix}form-text { padding-left: 2px; } } .#{$prefix}grid-editor { // Align checkboxes input .#{$prefix}form-cb-wrap { text-align: center; } } .#{$prefix}grid-row-editor-buttons { background-color: $grid-row-editor-background-color; position: absolute; bottom: -31px; padding: 4px; width: 200px; height: 32px; .#{$prefix}strict & { width: 192px; height: 24px; } &-ml, &-mr, &-bl, &-br, &-bc { position: absolute; overflow: hidden; } &-bl, &-br { width: 4px; height: 4px; bottom: 0px; @include theme-background-image($theme-name, 'panel/panel-default-framed-corners.gif'); } &-bl { left: 0px; background-position: 0px -16px; } &-br { right: 0px; background-position: 0px -20px; } &-bc { position: absolute; left: 4px; bottom: 0px; width: 192px; height: 1px; background-color: $grid-row-editor-border-color; } &-ml, &-mr { height: 27px; width: 1px; top: 1px; background-color: $grid-row-editor-border-color; } &-ml { left: 0px } &-mr { background-position: 0px -20px; right: 0px; } } .#{$prefix}grid-row-editor-errors { ul { margin-left: 5px; } li { list-style: disc; margin-left: 15px; } } }