add extjs 6.0.1 sources

[extjs.git] / extjs / classic / theme-neutral / sass / src / view / Table.scss

// This fixes a browser bug in Chrome (current as of 40.0.2214.111).\r
// When using the buffered renderer plugin, the view rows are positioned by using CSS transforms.\r
// However, b/c of the browser bug, the scrollbar will be covered by the itemcontainer when scrolled\r
// to a point where the view is refreshed so we need to bump up its z-index. See EXTJS-15608.\r
.#{$prefix}grid-view {\r
    z-index: 1;\r
}\r
\r
.#{$prefix}grid-body {\r
    background: $grid-body-background-color;\r
    border-width: $grid-body-border-width;\r
    border-style: $grid-body-border-style;\r
    border-color: $grid-body-border-color;\r
}\r
\r
// The min-height ensures we get a horizontal scroll bar \r
// if necessary, even when the grid has no items in it.\r
.#{$prefix}grid-item-container {\r
    min-height: 1px;\r
    position: relative;\r
    overflow: hidden;\r
}\r
\r
.#{$prefix}grid-empty {\r
    padding: $grid-empty-padding;\r
    color: $grid-empty-color;\r
    background-color: $grid-empty-background-color;\r
    font: $grid-empty-font-weight $grid-empty-font-size $grid-empty-font-family;\r
}\r
\r
// Default background color applied at table level - each row is its own separate table\r
.#{$prefix}grid-item {\r
    color: $grid-row-cell-color;\r
    font: $grid-row-cell-font;\r
    background-color: $grid-row-cell-background-color;\r
}\r
\r
.#{$prefix}grid-item-alt {\r
    background-color: $grid-row-cell-alt-background-color;\r
}\r
\r
.#{$prefix}grid-item-over {\r
    color: $grid-row-cell-over-color;\r
    background-color: $grid-row-cell-over-background-color;\r
}\r
\r
// IE does not support outline-offset property, so we have to\r
// use pseudo element to show the focused cell border\r
.#{$prefix}grid-item-focused {\r
    // This is to remove the default outline in FF and IE\r
    outline: 0;\r
    \r
    .#{$prefix}grid-cell-inner {\r
        // Inner grid cell element has position: relative (a rule below),\r
        // so setting z-index: 1 will elevate it just above default position\r
        z-index: 1;\r
    }\r
    \r
    // Pseudo-el is positioned *below* the inner grid cell content\r
    // but its border will shine through\r
    .#{$prefix}grid-cell-inner:before {\r
        content: "";\r
        position: absolute;\r
        z-index: -1;\r
        top: $grid-row-cell-focus-border-inset;\r
        right: $grid-row-cell-focus-border-inset;\r
        bottom: $grid-row-cell-focus-border-inset;\r
        left: $grid-row-cell-focus-border-inset;\r
        pointer-events: none;\r
\r
        border: $grid-row-cell-focus-border-width $grid-row-cell-focus-border-style $grid-row-cell-focus-border-color;\r
    }\r
    \r
    @if not is-null($grid-row-cell-focus-color) {\r
        color: $grid-row-cell-focus-color;\r
    }\r
    \r
    @if not is-null($grid-row-cell-focus-background-color) {\r
        background-color: $grid-row-cell-focus-background-color;\r
    }\r
}\r
\r
.#{$prefix}grid-item-selected {\r
    color: $grid-row-cell-selected-color;\r
    background-color: $grid-row-cell-selected-background-color;\r
}\r
\r
.#{$prefix}grid-with-row-lines {\r
    .#{$prefix}grid-item {\r
        border-style: $grid-row-cell-border-style;\r
        border-width: $grid-row-cell-border-width 0 0;\r
        border-color: $grid-row-border-color;\r
    }\r
\r
    .#{$prefix}grid-item:first-child {\r
        border-top-color: $grid-row-cell-background-color;\r
    }\r
\r
    // the following rules have .x-grid-item added to increase specificity over the\r
    // :first-child rule above\r
    .#{$prefix}grid-item.#{$prefix}grid-item-over {\r
        border-style: $grid-row-cell-over-border-style;\r
        border-color: $grid-row-cell-over-border-color;\r
    }\r
\r
    .#{$prefix}grid-item-over + .#{$prefix}grid-item {\r
        border-top-style: $grid-row-cell-over-border-style;\r
        border-top-color: $grid-row-cell-over-border-color;\r
    }\r
\r
    .#{$prefix}grid-item.#{$prefix}grid-item-selected {\r
        border-style: $grid-row-cell-selected-border-style;\r
        border-color: $grid-row-cell-selected-border-color;\r
    }\r
\r
    .#{$prefix}grid-item-selected + .#{$prefix}grid-item {\r
        border-top-style: $grid-row-cell-selected-border-style;\r
        border-top-color: $grid-row-cell-selected-border-color;\r
    }\r
\r
    .#{$prefix}grid-item:last-child {\r
        border-bottom-width: $grid-row-cell-border-width;\r
    }\r
\r
    // IE8 doesn't have last-child, so we end up with no border on the bottom row.\r
    // To work around this issue we give all the rows a bottom border and negative\r
    // margin so that they overlap.  This approach doesn't work everywhere though...\r
    // in newer IE, using the browser's zoom feature can result in rounding errors on \r
    // the negative margin, resulting in the appearance of some borders being double.\r
    .#{$prefix}ie8 & {\r
        .#{$prefix}grid-item {\r
            border-width: $grid-row-cell-border-width 0;\r
            margin-top: (-$grid-row-cell-border-width);\r
        }\r
\r
        .#{$prefix}grid-item:first-child {\r
            margin-top: 0;\r
        }\r
    }\r
}\r
\r
.#{$prefix}grid-cell-inner {\r
    position: relative;\r
    text-overflow: $grid-cell-inner-text-overflow;\r
    padding: $grid-cell-inner-padding;\r
}\r
\r
@if $include-rtl and (left($grid-cell-inner-padding) != right($grid-cell-inner-padding)) {\r
    .#{$prefix}rtl.#{$prefix}grid-cell-inner {\r
        padding: rtl($grid-cell-inner-padding);\r
    }\r
}\r
\r
@if $include-ext-grid-column-rownumberer\r
    or $include-ext-selection-checkboxmodel\r
    or $include-ext-grid-plugin-rowexpander {\r
    // .x-grid-cell-special is used by RowNumberer, CheckboxModel, and RowExpander\r
    .#{$prefix}grid-cell-special {\r
        @if $grid-cell-special-border-width != 0 {\r
            border-color: $grid-cell-special-border-color;\r
            border-style: $grid-cell-special-border-style;\r
            border-right-width: $grid-cell-special-border-width;\r
        }\r
        @if not is-null($grid-cell-special-background-color) {\r
            @if is-null($grid-cell-special-background-gradient) {\r
                background-color: $grid-cell-special-background-color;\r
            } @else {\r
                @include background-gradient($grid-cell-special-background-color, $grid-cell-special-background-gradient);\r
            }\r
\r
            .#{$prefix}grid-item-selected & {\r
                @if not is-null($grid-cell-special-selected-border-color) {\r
                    border-right-color: $grid-cell-special-selected-border-color;\r
                }\r
\r
                @if not is-null($grid-row-cell-selected-background-color) {\r
                    @if is-null($grid-cell-special-background-gradient) {\r
                        background-color: $grid-row-cell-selected-background-color;\r
                    } @else {\r
                        @include background-gradient($grid-row-cell-selected-background-color, $grid-cell-special-background-gradient, left);\r
                    }\r
                }\r
            }\r
\r
            @if $include-slicer-gradient {\r
                .#{$prefix}nlg & {\r
                    background-repeat: repeat-y;\r
                    background-image: slicer-background-image(grid-cell-special, 'grid/cell-special-bg');\r
                }\r
\r
                .#{$prefix}nlg .#{$prefix}grid-item-selected & {\r
                    background-image: slicer-background-image(grid-cell-special-selected, 'grid/cell-special-selected-bg');\r
                }\r
                @include x-slicer(grid-cell-special);\r
                @include x-slicer(grid-cell-special-selected);\r
            }\r
        }\r
    }\r
\r
    @if $include-rtl and $grid-cell-special-border-width != 0 {\r
        .#{$prefix}rtl.#{$prefix}grid-cell-special {\r
            border-right-width: 0;\r
            border-left-width: $grid-cell-special-border-width;\r
        }\r
    }\r
}\r
\r
.#{$prefix}grid-dirty-cell {\r
    @if $enable-font-icons and ($grid-cell-dirty-glyph != null) {\r
        > .#{$prefix}grid-cell-inner:after {\r
            @include font-icon($grid-cell-dirty-glyph, $pseudo: false);\r
            color: $grid-cell-dirty-glyph-color;\r
            position: absolute;\r
            top: 0;\r
            left: 0;\r
        }\r
    } @else {\r
        background: theme-background-image('grid/dirty') no-repeat 0 0;\r
    }\r
}\r
\r
@if $include-rtl {\r
    .#{$prefix}rtl.#{$prefix}grid-dirty-cell {\r
        @if $enable-font-icons and ($grid-cell-dirty-glyph-rtl != null) {\r
            > .#{$prefix}grid-cell-inner:after {\r
                @include font-icon($grid-cell-dirty-glyph-rtl, $pseudo: false);\r
                right: 0;\r
            }\r
        } @else {\r
            background-image: theme-background-image('grid/dirty-rtl');\r
            background-position: right 0;\r
        }\r
    }\r
}\r
\r
// add grid-row class to increase specificity over the state rules that set background-color\r
// e.g. .x-grid-item-over .x-grid-td, .x-grid-row-focused .x-grid-td\r
.#{$prefix}grid-row .#{$prefix}grid-cell-selected {\r
    color: $grid-cell-selected-color;\r
    background-color: $grid-cell-selected-background-color;\r
}\r
\r
// Column lines on leading edge where there may be whitespace following\r
.#{$prefix}grid-with-col-lines {\r
    .#{$prefix}grid-cell {\r
        border-style: $grid-row-cell-border-style;\r
        border-color: $grid-col-border-color;\r
        border-width: 0 $grid-row-cell-border-width 0 0;\r
    }\r
\r
    .#{$prefix}grid-item-over .#{$prefix}grid-cell {\r
        border-color: $grid-row-cell-over-border-color;\r
        border-style: $grid-row-cell-over-border-style;\r
    }\r
\r
    .#{$prefix}grid-item-selected .#{$prefix}grid-cell {\r
        border-color: $grid-row-cell-selected-border-color;\r
        border-style: $grid-row-cell-selected-border-style;\r
    }\r
}\r
\r
// Column lines in RTL mode - leading edge is left.\r
@if $include-rtl {\r
    .#{$prefix}rtl.#{$prefix}grid-with-col-lines .#{$prefix}grid-cell {\r
        border-width: 0 0 0 $grid-row-cell-border-width;\r
    }\r
}\r
\r
.#{$prefix}grid-resize-marker {\r
    width: $grid-row-cell-border-width;\r
    background-color: $grid-resize-marker-background-color;\r
}\r