add extjs 6.0.1 sources

[extjs.git] / extjs / classic / theme-neutral / sass / src / grid / column / Column.scss

.#{$prefix}column-header {\r
    border-right: $grid-column-header-border-width $grid-column-header-border-style $grid-header-border-color;\r
\r
    @if not is-null($grid-column-header-color) {\r
        color: $grid-column-header-color;\r
    }\r
    font: $grid-column-header-font;\r
\r
    // This is to remove default focused element styling in Firefox and IE\r
    outline: 0;\r
\r
    @if not is-null($grid-header-background-gradient) {\r
        @include background-gradient($grid-header-background-color, $grid-header-background-gradient);\r
    }\r
    @if is-null($grid-header-background-gradient) {\r
        background-color: $grid-header-background-color;\r
    }\r
}\r
\r
@if $include-rtl {\r
    .#{$prefix}rtl.#{$prefix}column-header {\r
        border-right: 0 none;\r
        border-left: $grid-column-header-border-width $grid-column-header-border-style $grid-header-border-color;\r
    }\r
}\r
\r
.#{$prefix}group-sub-header {\r
    background: transparent;\r
    border-top: $grid-column-header-border-width $grid-column-header-border-style $grid-header-border-color;\r
\r
    // Because the sub-header has a top border, the padding of the inner is reduced by the border width\r
    .#{$prefix}column-header-inner {\r
        padding: top($grid-header-padding) - $grid-column-header-border-width right($grid-header-padding) bottom($grid-header-padding) left($grid-header-padding);\r
    }\r
}\r
\r
.#{$prefix}column-header-inner {\r
    padding: $grid-header-padding;\r
}\r
\r
.#{$prefix}column-header-inner-empty {\r
    // The default text for an empty column header is a space.  It can trigger an ellipsis\r
    // if the column width is too small.  Ensure this does not happen by clipping overflow\r
    // of empty colum headers.\r
    text-overflow: clip;\r
}\r
\r
// Compound selector here to increase the specificity\r
.#{$prefix}column-header.#{$prefix}column-header-focus {\r
    .#{$prefix}column-header-inner:after {\r
        content: "";\r
        position: absolute;\r
        z-index: 5; // focus border must overlay the trigger\r
        top: $grid-column-header-focus-border-inset;\r
        right: $grid-column-header-focus-border-inset;\r
        bottom: $grid-column-header-focus-border-inset;\r
        left: $grid-column-header-focus-border-inset;\r
        border: $grid-column-header-focus-border-width $grid-column-header-focus-border-style $grid-column-header-focus-border-color;\r
        pointer-events: none;\r
    }\r
\r
    // For some reason without this rule the inner focus border on grouped column headers\r
    // looks 1px higher than it should. This does not apply to column headers outside a group\r
    &.#{$prefix}group-sub-header .#{$prefix}column-header-inner:before {\r
        bottom: 0px;\r
    }\r
\r
    @if not is-null($grid-column-header-focus-color) {\r
        color: $grid-column-header-focus-color;\r
    }\r
\r
    @if not is-null($grid-column-header-focus-background-color) {\r
        @include background-gradient($grid-column-header-focus-background-color, $grid-header-background-gradient);\r
    }\r
}\r
\r
.#{$prefix}column-header-over {\r
    @include background-gradient($grid-header-over-background-color, $grid-header-over-background-gradient);\r
}\r
\r
.#{$prefix}column-header-sort-ASC,\r
.#{$prefix}column-header-sort-DESC {\r
    @include background-gradient($grid-header-sorted-background-color, $grid-header-sorted-background-gradient);\r
}\r
\r
@if $include-slicer-gradient {\r
    @if not is-null($grid-header-background-gradient) {\r
        .#{$prefix}nlg {\r
            .#{$prefix}grid-header-ct,\r
            .#{$prefix}column-header {\r
                background-image: slicer-background-image(column-header, 'grid/column-header-bg');\r
            }\r
        }\r
        $stretch: slicer-background-stretch(column-header, bottom);\r
    }\r
\r
    @if not is-null($grid-header-over-background-gradient) {\r
        .#{$prefix}nlg {\r
            .#{$prefix}column-header-over,\r
            .#{$prefix}column-header-sort-ASC,\r
            .#{$prefix}column-header-sort-DESC {\r
                background-image: slicer-background-image(column-header-over, 'grid/column-header-over-bg');\r
            }\r
        }\r
        $stretch: slicer-background-stretch(column-header-over, bottom);\r
    }\r
}\r
\r
.#{$prefix}column-header-open {\r
    background-color: $grid-header-open-background-color;\r
\r
    .#{$prefix}column-header-trigger {\r
        background-color: $grid-header-trigger-background-color-open;\r
    }\r
}\r
\r
.#{$prefix}column-header-over .#{$prefix}column-header-trigger,\r
.#{$prefix}column-header-open .#{$prefix}column-header-trigger {\r
    width: $grid-header-trigger-width;\r
    cursor: $grid-header-trigger-cursor;\r
    @if $enable-font-icons and ($grid-header-trigger-glyph != null) {\r
        @include font-icon($grid-header-trigger-glyph);\r
        color: $grid-header-trigger-glyph-color;\r
\r
        &:before {\r
            // vertically center the glyph\r
            top: 50%;\r
            margin-top: -($grid-header-trigger-glyph-font-size / 2);\r
            text-align: center;\r
            position: relative;\r
            display: block;\r
        }\r
    } @else {\r
        background: $grid-header-trigger-background-color theme-background-image($grid-header-trigger-background-image) no-repeat $grid-header-trigger-background-position;\r
    }\r
}\r
\r
@if $include-rtl {\r
    .#{$prefix}rtl.#{$prefix}column-header-trigger {\r
        background-position: rtl-background-position($grid-header-trigger-background-position);\r
    }\r
}\r
\r
$grid-column-align-right-margin:\r
    $grid-header-trigger-width +\r
    $grid-header-trigger-spacing -\r
    right($grid-header-padding);\r
\r
.#{$prefix}column-header-align-right .#{$prefix}column-header-text {\r
    margin-right: $grid-column-align-right-margin;\r
}\r
\r
@if $include-rtl {\r
    .#{$prefix}column-header-align-right .#{$prefix}rtl.#{$prefix}column-header-text {\r
        margin-right: 0;\r
        margin-left: $grid-column-align-right-margin;\r
    }\r
}\r
\r
// Sort direction indicator is a background of the text span.\r
.#{$prefix}column-header-sort-ASC,\r
.#{$prefix}column-header-sort-DESC {\r
    .#{$prefix}column-header-text-inner {\r
        @if $enable-font-icons and (($grid-header-sort-asc-glyph != null) or ($grid-header-sort-desc-glyph != null)) {\r
            &:after {\r
                display: inline-block;\r
                text-align: center;\r
                margin-left: $grid-header-sort-icon-spacing;\r
                width: $grid-header-sort-glyph-font-size;\r
            }\r
        } @else {\r
            padding-right: $grid-header-sort-icon-width + $grid-header-sort-icon-spacing;\r
        }\r
        background-position: $grid-header-sort-icon-position;\r
    }\r
}\r
\r
@if $include-rtl {\r
    .#{$prefix}column-header-sort-ASC,\r
    .#{$prefix}column-header-sort-DESC {\r
        .#{$prefix}rtl.#{$prefix}column-header-text-inner {\r
            @if $enable-font-icons and (($grid-header-sort-asc-glyph != null) or ($grid-header-sort-desc-glyph != null)) {\r
                &:after {\r
                    margin-left: 0;\r
                    margin-right: $grid-header-sort-icon-spacing;\r
                }\r
            } @else {\r
                padding-right: 0;\r
                padding-left: $grid-header-sort-icon-width + $grid-header-sort-icon-spacing;\r
            }\r
            background-position: rtl-background-position($grid-header-sort-icon-position);\r
        }\r
    }\r
}\r
\r
.#{$prefix}column-header-sort-ASC .#{$prefix}column-header-text-inner {\r
    @if $enable-font-icons and ($grid-header-sort-asc-glyph != null) {\r
        @include font-icon(\r
            $glyph: $grid-header-sort-asc-glyph,\r
            $pseudo: after,\r
            $color: $grid-header-sort-glyph-color,\r
            $style-pseudo: true\r
        );\r
    } @else {\r
        background-image: theme-background-image('grid/sort_asc');\r
    }\r
}\r
.#{$prefix}column-header-sort-DESC .#{$prefix}column-header-text-inner {\r
    @if $enable-font-icons and ($grid-header-sort-desc-glyph != null) {\r
        @include font-icon(\r
            $glyph: $grid-header-sort-desc-glyph,\r
            $pseudo: after,\r
            $color: $grid-header-sort-glyph-color,\r
            $style-pseudo: true\r
        );\r
    } @else {\r
        background-image: theme-background-image('grid/sort_desc');\r
    }\r
}\r
\r
// A Grid with the x-no-header-borders class will show no header borders\r
.#{$prefix}no-header-borders .#{$prefix}column-header {\r
    border: 0 none;\r
\r
    .#{$prefix}column-header-inner {\r
        padding-top: top($grid-header-padding);\r
    }\r
}\r
\r
\r
@include x-slicer(column-header);\r
@include x-slicer(column-header-over);\r