devextreme/less/sources/widgets/material/pivotGrid.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/pivotGrid.material.less)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "../base/pivotGrid.less";
@import (once) "./popup.material.less";
@import (once) "./contextMenu.material.less";
@import (once) "./treeView.material.less";
@import (once) "./button.material.less";

.dx-size-default() {
    @MATERIAL_PIVOTGRID_CELL_PADDING: 10px 14px;
}

.dx-size-compact() {
    @MATERIAL_PIVOTGRID_CELL_PADDING: 7px 8px;
}

@MATERIAL_PIVOTGRID_HEADERS_FONT_SIZE: 12px;
@MATERIAL_PIVOTGRID_AREA_FONT_SIZE: 13px;
@MATERIAL_PIVOTGRID_CHEVRON_ICON_SIZE: 20px;

@MATERIAL_PIVOTGRID_DRAG_HEADER_SHADOW: 0 3px 4px fade(@base-shadow-color, 15%);
@MATERIAL_PIVOTGRIDFIELDCHOOSER_FIELD_MIN_HEIGHT: 36px;

.dx-pivotgrid-fields-container {
    &.dx-drag {
        .dx-area-field.dx-area-box {
            background-color: fade(@pivotgrid-field-area-box-background-color, 90%);
            border: none;
            box-shadow: @MATERIAL_PIVOTGRID_DRAG_HEADER_SHADOW;
        }
    }

    .dx-area-field.dx-area-box {
        color: @pivotgrid-field-area-box-text-color;
        background-color: @pivotgrid-field-area-box-background-color;
        border-radius: 16px;
        border: none;
        font-size: @MATERIAL_PIVOTGRID_HEADERS_FONT_SIZE;
        font-weight: 500;

        .dx-header-filter {
            color: @base-accent;

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


.dx-pivotgrid {
    background-color: @PIVOTGRID_AREA_BACKGROUND;

    .dx-pivotgrid-area {
        &.dx-pivotgrid-area-data {
            font-size: @MATERIAL_PIVOTGRID_AREA_FONT_SIZE;
        }

        &.dx-pivotgrid-vertical-headers,
        &.dx-pivotgrid-horizontal-headers {
            font-size: @MATERIAL_PIVOTGRID_HEADERS_FONT_SIZE;

            td {
                font-weight: 500;
            }

            .dx-grandtotal,
            .dx-total {
                color: @base-text-color;
            }
        }

        td {
            padding: @MATERIAL_PIVOTGRID_CELL_PADDING;
        }
    }


    .dx-area-description-cell {
        .dx-pivotgrid-toolbar {
            padding-left: 8px;

            .dx-button {
                .dx-button-flat-color-styling(@base-text-color, fade(@button-normal-bg-inverted, 8%), fade(@button-normal-bg-inverted, 8%), fade(@button-normal-bg-inverted, 30%));
            }
        }
    }

    .dx-grandtotal.dx-last-cell {
        padding-left: 22px;
    }

    .dx-column-header,
    .dx-filter-header {
        .dx-pivotgrid-toolbar {
            .dx-button {
                margin-top: 7px;

                .dx-button-flat-color-styling(@base-text-color, fade(@button-normal-bg-inverted, 8%), fade(@button-normal-bg-inverted, 8%), fade(@button-normal-bg-inverted, 30%));
            }
        }
    }

    .dx-expand-icon-container {
        margin: 0 10px 0 5px;
        .dx-icon(chevronright);

        font-size: @MATERIAL_PIVOTGRID_HEADERS_FONT_SIZE;

        &:before {
            visibility: hidden;
        }
    }

    .dx-pivotgrid-collapsed .dx-expand {
        .dx-icon(chevronright);
        .dx-icon-font-centered-sizing(@MATERIAL_PIVOTGRID_CHEVRON_ICON_SIZE);

        color: @pivotgrid-chevron-icon-color;
    }

    .dx-pivotgrid-expanded .dx-expand {
        .dx-icon(chevrondown);
        .dx-icon-font-centered-sizing(@MATERIAL_PIVOTGRID_CHEVRON_ICON_SIZE);

        color: @pivotgrid-chevron-icon-color;
    }

    .dx-area-tree-view {
        td.dx-white-space-column {
            width: @PIVOTGRID_EMPTY_COLUMN_WIDTH;
            min-width: @PIVOTGRID_EMPTY_COLUMN_WIDTH;
        }
    }

    .dx-ie {
        .dx-pivotgrid-fields-area {
            .dx-base-typography();
        }
    }
}

.dx-pivotgridfieldchooser {
    background-color: @PIVOTGRID_AREA_BACKGROUND;

    .dx-area {
        .dx-area-icon-filter {
            background: none;
            .dx-icon(filter);

            width: 14px;
            height: 14px;
        }

        .dx-area-caption {
            text-transform: uppercase;
            font-size: @MATERIAL_PIVOTGRID_HEADERS_FONT_SIZE;
            font-weight: 500;
            color: @PIVOTGRID_AREA_COLOR;
        }

        .dx-area-fields {
            margin-top: 8px;
        }
    }

    .dx-treeview-border-visible .dx-scrollable-content > .dx-treeview-node-container {
        padding-right: 8px;
    }

    .dx-treeview-item-with-checkbox.dx-treeview-node-is-leaf {
        padding-left: 0;

        .dx-checkbox {
            left: 8px;
        }
    }

    .dx-treeview-node-container-opened {
        .dx-treeview-item-with-checkbox.dx-treeview-node-is-leaf {
            padding-left: @MATERIAL_TREEVIEW_TOGGLE_ITEM_WIDTH;

            .dx-checkbox {
                left: @MATERIAL_TREEVIEW_CHECKBOX_OFFSET;
            }
        }
    }

    .dx-treeview-item {
        min-height: @MATERIAL_PIVOTGRIDFIELDCHOOSER_FIELD_MIN_HEIGHT;
        padding: 9px 8px;
        line-height: normal;
    }

    .dx-treeview-item-with-checkbox {
        .dx-checkbox {
            top: 9px;
        }

        .dx-treeview-item {
            padding-left: @MATERIAL_TREEVIEW_ITEM_WITH_CHECKBOX_OFFSET;
        }
    }

    .dx-treeview-toggle-item-visibility {
        height: @MATERIAL_PIVOTGRIDFIELDCHOOSER_FIELD_MIN_HEIGHT;
    }
}

.dx-pivotgrid-fields-container { // stylelint-disable-line no-duplicate-selectors
    .dx-position-indicator {
        background-color: @PIVOTGRID_POSITION_INDICATOR_COLOR;
    }
}