devextreme/less/sources/widgets/base/pivotGrid.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/base/pivotGrid.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@PIVOTGRID_DRAG_HEADER_BORDER: 1px solid @PIVOTGRID_DRAG_HEADER_BORDER_COLOR;
@PIVOTGRID_DRAG_HEADER_FIRST_SHADOW: 0 0 1px @PIVOTGRID_DRAG_HEADER_FIRST_SHADOW_COLOR;
@PIVOTGRID_DRAG_HEADER_SECOND_SHADOW: 0 1px 3px @PIVOTGRID_DRAG_HEADER_SECOND_SHADOW_COLOR;
@PIVOTGRID_BORDER_WIDTH: 1px;
@PIVOTGRID_BORDER: @PIVOTGRID_BORDER_WIDTH solid @PIVOTGRID_BORDER_COLOR;
@PIVOTGRID_ICON_SIZE: 14px;
@PIVOTGRID_COMMON_FIELD_PADDING: 2px;
@PIVOTGRID_FILTER_AREA_BORDER_SPACING: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING - @PIVOTGRID_COMMON_FIELD_PADDING;

.dx-pivotgrid-fields-container {
    .dx-position-indicator {
        background-color: gray;

        &.dx-position-indicator-vertical {
            margin-top: -4px;
            margin-left: -1px;
            height: 2px;

            &.dx-position-indicator-last {
                margin-top: -3px;
            }
        }

        &.dx-position-indicator-horizontal {
            margin-left: -3px;
            width: 2px;

            &.dx-position-indicator-last {
                margin-left: 3px;
            }
        }
    }

    .dx-area-fields {
        position: relative;
    }

    .dx-sort {
        color: @PIVOTGRID_AREA_COLOR;
        font-size: @PIVOTGRID_ICON_SIZE;
        width: @PIVOTGRID_ICON_SIZE;
    }

    .dx-sort-up {
        .dx-icon(sortup);
    }

    .dx-sort-down {
        .dx-icon(sortdown);
    }

    .dx-header-filter {
        color: @HEADER_FILTER_COLOR;
        .dx-icon(filter);

        font-size: @PIVOTGRID_ICON_SIZE;
        width: @PIVOTGRID_ICON_SIZE;
    }

    .dx-header-filter-empty {
        color: @HEADER_FILTER_COLOR_EMPTY;
    }

    .dx-area-field {
        cursor: pointer;
    }

    &.dx-drag {
        opacity: 0.8;

        .dx-area-field.dx-area-box {
            box-shadow: @PIVOTGRID_DRAG_HEADER_FIRST_SHADOW, @PIVOTGRID_DRAG_HEADER_SECOND_SHADOW;
            border: @PIVOTGRID_DRAG_HEADER_BORDER;
        }
    }

    .dx-area-field.dx-area-box {
        background-color: @PIVOTGRID_AREA_BACKGROUND;
        margin-bottom: 4px;
        border: @PIVOTGRID_BORDER;
        padding: @PIVOTGRID_COMMON_TOP_BOTTOM_PADDING @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
    }

    .dx-drag-source {
        opacity: 0.5;
    }

    .dx-column-indicators {
        vertical-align: bottom;
        margin-left: @PIVOTGRID_FIELD_INDICATORS_OFFSET;
        line-height: @PIVOTGRID_INDICATORS_LINE_HEIGHT;
    }

    .dx-area-field-content {
        vertical-align: bottom;
    }
}

.dx-pivotgrid {
    .dx-column-header,
    .dx-filter-header {
        .dx-pivotgrid-fields-area {
            overflow: hidden;
        }

        .dx-pivotgrid-toolbar {
            margin-right: 10px;
            float: right;
            display: inline-block;

            .dx-pivotgrid-field-chooser-button {
                margin-right: 4px;
            }
        }
    }

    .dx-data-header,
    .dx-column-header,
    .dx-area-description-cell.dx-pivotgrid-background {
        background-color: @PIVOTGRID_TOTALCOLOR;
    }

    .dx-column-header {
        .dx-pivotgrid-fields-area {
            margin-left: -5px;
            padding-left: 5px;
        }

        .dx-pivotgrid-fields-area-head {
            tr > td:first-child {
                padding-left: 0;
            }
        }
    }

    .dx-filter-header {
        .dx-area-field-container {
            border-spacing: @PIVOTGRID_FILTER_AREA_BORDER_SPACING;
            border-collapse: separate;
        }

        .dx-pivotgrid-fields-area-head {
            td {
                padding: @PIVOTGRID_COMMON_FIELD_PADDING;
            }

            tr > td:first-child {
                padding-left: @PIVOTGRID_COMMON_FIELD_PADDING;
            }
        }
    }

    .dx-area-field.dx-area-box {
        margin-bottom: 0;
    }

    &.dx-row-lines {
        .dx-pivotgrid-area td {
            border-top: @PIVOTGRID_BORDER;
        }

        .dx-pivotgrid-area-data tr:first-child > td {
            border-top-width: 0;
        }
    }

    .dx-expand-icon-container {
        margin-left: @PIVOTGRID_EXPAND_ICON_OFFSET;
        margin-right: @PIVOTGRID_EXPAND_ICON_TEXT_OFFSET;
    }

    .dx-area-row-cell,
    .dx-area-description-cell {
        border-right: @PIVOTGRID_BORDER;
    }

    .dx-area-description-cell {
        white-space: nowrap;

        .dx-pivotgrid-toolbar {
            .dx-button {
                margin: 1px;
            }

            .dx-button:not(.dx-state-hover):not(.dx-state-active) {
                border-color: transparent;
                background-color: transparent;
                box-shadow: none;
            }
        }
    }

    .dx-bottom-border,
    .dx-area-description-cell,
    .dx-area-column-cell {
        border-bottom: @PIVOTGRID_BORDER;
    }

    .dx-pivotgrid-area {
        box-sizing: content-box;

        td {
            color: @PIVOTGRID_AREA_COLOR;
            padding: @PIVOTGRID_COMMON_TOP_BOTTOM_PADDING @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
        }
    }

    .dx-pivotgrid-fields-area-head {
        td {
            position: relative;
            border: none;
            padding: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING 2px;
        }

        tr > td:first-child {
            padding-left: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
        }

        tr > td:last-child {
            padding-right: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
        }

        .dx-empty-area-text {
            white-space: nowrap;
            padding: 6px 0;
            border: @PIVOTGRID_BORDER_WIDTH solid transparent;
            color: @PIVOTGRID_FIELD_AREA_TEXT_COLOR;
        }
    }

    .dx-group-connector {
        position: absolute;
        width: 2px;
        top: 50%;
        height: 2px;
        margin-top: -1px;
        background-color: @PIVOTGRID_BORDER_COLOR;

        &.dx-group-connector-prev {
            left: 0;
        }

        &.dx-group-connector-next {
            right: 0;
        }
    }

    .dx-virtual-content {
        display: none;
    }

    .dx-virtual-mode {
        .dx-virtual-content {
            position: relative;
            overflow: hidden;
            display: block;

            table td {
                span {
                    visibility: hidden;
                }

                color: transparent;
                background-color: transparent !important; // stylelint-disable-line declaration-no-important
            }
        }

        table {
            position: absolute;
        }
    }

    .dx-pivotgrid-area-data {
        position: relative;

        tbody {
            td {
                text-align: right;
                color: @PIVOTGRID_DATA_AREA_COLOR;
                white-space: nowrap;
                border-left: @PIVOTGRID_BORDER;
            }

            td:first-child {
                border-left: 0;
            }

            tr:first-child {
                .dx-total,
                .dx-grandtotal {
                    border-top-width: 0;
                }
            }
        }
    }

    .dx-pivotgrid-vertical-headers {
        .dx-expand-border {
            border-top: @PIVOTGRID_BORDER;
        }

        .dx-last-cell {
            border-right: 0;
        }

        td {
            // max-width: 150px;
            min-width: 50px;
            border-right: @PIVOTGRID_BORDER;
        }

        tr:first-child td {
            border-top: 0;
        }

        .dx-pivotgrid-fields-area-head {
            td:last-child {
                border-right: 0;
            }
        }
    }

    .dx-pivotgrid-vertical-headers,
    .dx-pivotgrid-area-data {
        .dx-row-total {
            border-top: @PIVOTGRID_BORDER;
            border-bottom: @PIVOTGRID_BORDER;
        }
    }

    .dx-area-tree-view {
        .dx-total {
            border-bottom: none;
        }

        td.dx-white-space-column {
            border-top: @PIVOTGRID_BORDER_WIDTH solid transparent;
            background-color: @PIVOTGRID_TOTALCOLOR;
            padding: 0;
        }
    }

    .dx-pivotgrid-horizontal-headers {
        &.dx-vertical-scroll {
            border-right: @PIVOTGRID_BORDER;
        }

        td {
            text-align: center;

            &.dx-pivotgrid-expanded,
            &.dx-pivotgrid-collapsed {
                text-align: left;
            }
            // B234718
            border: @PIVOTGRID_BORDER;
        }

        td:first-child {
            border-left: 0;
        }

        tr:first-child td {
            border-top: 0;
        }
    }

    .dx-expand-icon-container { // stylelint-disable-line no-duplicate-selectors
        width: @PIVOTGRID_ICON_SIZE;
    }

    .dx-pivotgrid-horizontal-headers:last-child {
        border-bottom: 0;
    }

    .dx-total,
    .dx-data-header,
    .dx-column-header,
    .dx-area-description-cell {
        background-color: @PIVOTGRID_TOTALCOLOR;
    }

    .dx-grandtotal {
        background-color: @PIVOTGRID_GRANDTOTALCOLOR;
    }

    .dx-pivotgrid-border {
        .dx-data-header,
        .dx-filter-header,
        .dx-area-description-cell,
        .dx-area-row-cell {
            border-left: @PIVOTGRID_BORDER;
        }

        .dx-filter-header,
        .dx-area-column-cell,
        .dx-column-header,
        .dx-area-data-cell {
            border-right: @PIVOTGRID_BORDER;
        }

        .dx-filter-header {
            border-top: @PIVOTGRID_BORDER;

            td {
                display: inline-block;
            }
        }

        .dx-area-data-cell,
        .dx-area-row-cell {
            border-bottom: @PIVOTGRID_BORDER;
        }
    }

    .dx-icon-sorted {
        display: inline-block;
        margin-left: 5px;
        width: @PIVOTGRID_ICON_SIZE;
    }


    .dx-popup-content {
        padding: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;

        .dx-pivotgrid-fields-area-head {
            td {
                padding: 0 2px;
            }
        }
    }
}

.dx-pivotgridfieldchooser {
    .dx-area-fields {
        overflow: hidden;
    }

    .dx-treeview-item .dx-icon {
        margin-bottom: 1px;
        .dx-icon-sizing(16px);
    }

    .dx-treeview-search {
        margin: 5px;
    }

    .dx-area-icon {
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
    }

    .dx-area {
        padding: 5px;
        display: flex;
        flex-grow: 1;
        flex-direction: column;

        .flexible-scrollable();

        .dx-area-fields {
            margin-top: 3px;
            border: @PIVOTGRID_BORDER;
            display: flex;
            flex-direction: column;
            height: 0;
        }
    }

    .dx-area-fields-header .dx-area-caption {
        align-self: center;
    }

    .dx-area-fields[group] {
        padding: 5px;
        background-color: @PIVOTGRID_TOTALCOLOR;
        display: flex;
    }

    .dx-area-fields.dx-drag-target {
        border-color: @PIVOTGRID_ACCENT_COLOR;
    }

    .dx-area-icon-all {
        background: @PIVOTGRID_AREA_ALL_IMAGE no-repeat center center;
    }

    .dx-area-icon-filter {
        background: @PIVOTGRID_AREA_FILTER_IMAGE no-repeat center center;
    }

    .dx-area-icon-row {
        background: @PIVOTGRID_AREA_ROW_IMAGE no-repeat center center;
    }

    .dx-area-icon-column {
        background: @PIVOTGRID_AREA_COLUMN_IMAGE no-repeat center center;
    }

    .dx-area-icon-data {
        background: @PIVOTGRID_AREA_DATA_IMAGE no-repeat center center;
    }

    .dx-icon-measure {
        background: @PIVOTGRID_AREA_DATA_IMAGE no-repeat center center;
    }

    .dx-icon-dimension {
        background: @PIVOTGRID_DIMENSION_IMAGE no-repeat center center;
    }

    .dx-icon-hierarchy {
        background: @PIVOTGRID_HIERARCHY_IMAGE no-repeat center center;
    }
}


.dx-rtl {
    .dx-pivotgrid-fields-container {
        .dx-position-indicator {
            &.dx-position-indicator-horizontal {
                margin-left: -3px;

                &.dx-position-indicator-last {
                    margin-left: 1px;
                }
            }
        }

        .dx-column-indicators {
            margin-left: 0;
            margin-right: @PIVOTGRID_FIELD_INDICATORS_OFFSET;
        }
    }

    &.dx-pivotgrid {
        .dx-column-header,
        .dx-filter-header {
            .dx-pivotgrid-toolbar {
                margin-right: 0;
                margin-left: 10px;
                float: left;

                .dx-pivotgrid-field-chooser-button {
                    margin-right: 0;
                    margin-left: 4px;
                }
            }
        }

        .dx-column-header {
            .dx-pivotgrid-fields-area {
                margin-left: 0;
                padding-left: 0;
                margin-right: -5px;
                padding-right: 5px;
            }

            .dx-pivotgrid-fields-area-head {
                tr > td:first-child {
                    padding-left: 2px;
                    padding-right: 0;
                }
            }
        }

        .dx-pivotgrid-fields-area-head {
            tr > td {
                padding: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING 2px;
            }

            tr > td:first-child {
                padding-right: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
            }

            tr > td:last-child {
                padding-left: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
            }
        }

        .dx-group-connector {
            &.dx-group-connector-prev {
                left: initial;
                right: 0;
            }

            &.dx-group-connector-next {
                right: initial;
                left: 0;
            }
        }

        .dx-area-row-cell,
        .dx-area-description-cell {
            border-left: @PIVOTGRID_BORDER;
            border-right: 0;
        }

        .dx-pivotgrid-area-data {
            tbody td {
                border-left: 0;
                border-right: @PIVOTGRID_BORDER;
            }
        }

        .dx-pivotgrid-area-data tbody td:first-child {
            border-left: @PIVOTGRID_BORDER;
            border-right: 0;
        }

        .dx-pivotgrid-vertical-headers {
            td {
                border-right: 0;
                border-left: @PIVOTGRID_BORDER;
            }

            .dx-last-cell {
                border-left: 0;
                border-right: 0;
            }
        }

        .dx-pivotgrid-horizontal-headers {
            &.dx-vertical-scroll {
                border-right: 0;
                border-left: @PIVOTGRID_BORDER;
            }

            &.dx-pivotgrid-area {
                border-left: 0;
            }

            td:first-child {
                border-left: @PIVOTGRID_BORDER;
                border-right: 0;
            }
        }

        .dx-pivotgrid-horizontal-headers td {
            &.dx-pivotgrid-expanded,
            &.dx-pivotgrid-collapsed {
                text-align: right;
            }
        }

        .dx-expand-icon-container {
            margin-left: @PIVOTGRID_EXPAND_ICON_TEXT_OFFSET;
            margin-right: @PIVOTGRID_EXPAND_ICON_OFFSET;
        }

        .dx-pivotgrid-collapsed .dx-expand-icon-container {
            .flip-horizontally();
        }

        .dx-icon-sorted {
            margin-left: 0;
            margin-right: 5px;
        }

        .dx-pivotgridfieldchooser-container .dx-col {
            display: flex;
        }


        .dx-pivotgrid-border {
            .dx-area-description-cell,
            .dx-data-header,
            .dx-area-row-cell {
                border-right: @PIVOTGRID_BORDER;
            }

            .dx-area-column-cell,
            .dx-column-header,
            .dx-area-data-cell {
                border-left: @PIVOTGRID_BORDER;
            }

            .dx-column-header {
                border-right: none;
            }

            .dx-area-row-cell,
            .dx-data-header {
                border-left: none;
            }
        }
    }
}