X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..6746dc89c47ed01b165cc1152533605f97eb8e8d:/docs/resources/themes/stylesheets/ext4/default/widgets/_grid.scss diff --git a/docs/resources/themes/stylesheets/ext4/default/widgets/_grid.scss b/docs/resources/themes/stylesheets/ext4/default/widgets/_grid.scss deleted file mode 100644 index c657ccb3..00000000 --- a/docs/resources/themes/stylesheets/ext4/default/widgets/_grid.scss +++ /dev/null @@ -1,846 +0,0 @@ -@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; - } - - .#{$prefix}grid-header-ct-hidden { - border-width: 0 0 0 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-locked .#{$prefix}grid-inner-locked { - border-width: 0 1px 0 0 !important; - border-style: solid; - } - - @if $include-ie or $compile-all { - .#{$prefix}ie .#{$prefix}grid-table { - border-collapse: collapse; - } - } - - .#{$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: theme-image($theme-name, 'grid/column-header-bg.gif') repeat-x 0 top; - } - - .#{$prefix}column-header-over, - .#{$prefix}column-header-sort-ASC, - .#{$prefix}column-header-sort-DESC { - background: #ebf3fd theme-image($theme-name, 'grid/column-header-over-bg.gif') repeat-x 0 top; - } - } - } - - .#{$prefix}column-header-trigger { - display: none; - height: 100%; - width: $grid-header-trigger-width; - background: no-repeat left center; - background-color: #c3daf9; - background-image: theme-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; - } - } - .#{$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: theme-image($theme-name, 'grid/sort_asc.gif') no-repeat right 6px; - } - .#{$prefix}column-header-sort-DESC .#{$prefix}column-header-text { - padding-right: 16px; - background: theme-image($theme-name, 'grid/sort_desc.gif') no-repeat right 6px; - } - - //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; - } - - @if $include-ie { - .#{$prefix}ie { - .#{$prefix}grid-cell { - border-width: 0; - } - - .#{$prefix}grid-cell-inner { - 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); - height: 100%; - } - - .#{$prefix}grid-row-over .#{$prefix}grid-cell-inner { - border-color: $grid-row-cell-over-border-color; - } - - .#{$prefix}grid-row-focused .#{$prefix}grid-cell-inner { - border-color: $grid-row-cell-focus-border-color; - } - - .#{$prefix}grid-row-selected .#{$prefix}grid-cell-inner { - border-style: $grid-row-cell-selected-border-style; - border-color: $grid-row-cell-selected-border-color; - } - } - } - - .#{$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'); - } - - .#{$prefix}ie6, - .#{$prefix}ie7, - .#{$prefix}quirks .#{$prefix}ie8, - .#{$prefix}strict .#{$prefix}ie8 { - .#{$prefix}grid-row .#{$prefix}grid-cell-special .#{$prefix}grid-cell-inner { - padding-bottom: 2px; - } - } - - - .#{$prefix}strict { - .#{$prefix}ie6, .#{$prefix}ie7 { - .#{$prefix}grid-cell-inner { - padding-top: 2px; - padding-bottom: 0; - } - } - } - - .#{$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-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-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-image($theme-name, 'grid/cell-special-selected-bg.gif'); - } - } - } - - //this is panel as gridpanel doesnt 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: theme-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 { - background-image: theme-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-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-image($theme-name, 'grid/col-move-top.gif'); - } - - .col-move-bottom { - background-image: theme-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-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-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-image($theme-name, 'grid/group-expand.gif'); - } - - .#{$prefix}group-by-icon { - background-image: theme-image($theme-name, 'grid/group-by.gif'); - } - - .#{$prefix}show-groups-icon { - background-image: theme-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-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-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-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 { - background-image: theme-image($theme-name, 'grid/hmenu-asc.gif'); - } - - .xg-hmenu-sort-desc .#{$prefix}menu-item-icon { - background-image: theme-image($theme-name, 'grid/hmenu-desc.gif'); - } - - .xg-hmenu-lock .#{$prefix}menu-item-icon { - background-image: theme-image($theme-name, 'grid/hmenu-lock.gif'); - } - - .xg-hmenu-unlock .#{$prefix}menu-item-icon { - background-image: theme-image($theme-name, 'grid/hmenu-unlock.gif'); - } - - .#{$prefix}group-by-icon { - background-image: theme-image($theme-name, 'grid/group-by.gif'); - } - - .#{$prefix}cols-icon .#{$prefix}menu-item-icon { - background-image: theme-image($theme-name, 'grid/columns.gif'); - } - - .#{$prefix}show-groups-icon { - background-image: theme-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-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-image($theme-name, 'grid/dd-insert-arrow-left.png'); - height: 16px; - width: 16px; - } - } - - .#{$prefix}ie6 { - .#{$prefix}grid-drop-indicator-left { - background-image: theme-image($theme-name, 'grid/dd-insert-arrow-right.gif'); - } - - .#{$prefix}grid-drop-indicator-right { - background-image: theme-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; - background-image: theme-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; - } - } -}