devextreme/less/sources/widgets/common/gridBase.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/common/gridBase.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) "./form.less";
@import (once) "./button.less";
@import (once) "./treeView.less";
@import (once) "./popup.less";
@import (once) "./contextMenu.less";
@import (once) "./scrollable.less";
@import (once) "./scrollView.less";
@import (once) "./filterBuilder.less";
@import (once) "./checkBox.less";
@import (once) "./overlay.less";
@import (once) "./menu.less";
@import (once) "./list.less";
@import (once) "./toolbar.less";
@import (once) "./pager.less";
@import (once) "./loadIndicator.less";
@import (once) "./loadPanel.less";
@import (once) "./validation.less";
@import (once) "./tooltip.less";
@import (once) "./textBox.less";
@import (once) "./numberBox.less";
@import (once) "./selectBox.less";
@import (once) "./dateBox.less";

.dx-gridbase-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: inherit;
    max-height: inherit;
}

.dx-gridbase-container > * {
    flex: 0 0 auto;
}

.grid-base(@widgetName) {
    @GRID_CELL_PADDING: 7px;
    @GRID_TEXTEDITOR_INPUT_PADDING: 32px;
    @GRID_TOTAL_FOOTER_PADDINGS: 7px;
    @GRID_COMMAND_SELECT_COLUMN_WIDTH: 70px;
    @GRID_COMMAND_EDIT_COLUMN_WIDTH: 100px;
    @GRID_COMMAND_EDIT_COLUMN_WITH_ICONS_WIDTH: 80px;
    @GRID_COMMAND_EXPAND_COLUMN_WIDTH: 30px;
    @GRID_MASTERDETAIL_PADDING: 30px;
    @GRID_COMMAND_ADAPTIVE_COLUMN_WIDTH: 36px;
    @GRID_COLUMN_HEADER_INDICATOR_WIDTH: 14px;
    @GRID_TEXT_CONTENT_MARGIN: 3px;
    @GRID_SORT_INDEX_WIDTH: 12px;
    @GRID_SORT_INDEX_OFFSET: 3px;

    .dx-@{widgetName}-checkbox-size {
        vertical-align: middle;
    }

    .dx-@{widgetName}-important-margin {
        margin-right: 5px !important; // stylelint-disable-line declaration-no-important
    }

    // for Foundation Responsive Framework
    .dx-@{widgetName}-table {
        background-color: transparent;
    }

    .dx-@{widgetName} {
        .dx-@{widgetName}-content-fixed {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 2;
            pointer-events: none;
            overflow: hidden;

            .dx-@{widgetName}-table {
                position: relative;

                td {
                    pointer-events: auto;
                }

                .dx-row {
                    td.dx-pointer-events-none {
                        visibility: hidden;
                        background-color: transparent;
                        pointer-events: none;
                        border-top-color: transparent; // T913696
                        border-bottom-color: transparent; // T913696
                    }
                }

                // T745266
                .dx-header-row td.dx-pointer-events-none {
                    border-bottom-color: transparent; // T672281
                }

                &.dx-@{widgetName}-table-fixed .dx-row td.dx-pointer-events-none {
                    width: auto;
                }
            }
        }

        &.dx-@{widgetName}-borders {
            > .dx-@{widgetName}-total-footer {
                border-top: 0;
            }

            > .dx-@{widgetName}-pager {
                margin-top: 1px;
            }

            > .dx-@{widgetName}-header-panel {
                border-bottom: 0;
            }

            > .dx-@{widgetName}-rowsview.dx-last-row-border {
                tbody:last-child > .dx-data-row:nth-last-child(2) > td {
                    border-bottom-width: 0;
                }
            }
        }

        .dx-menu-subitem {
            ul li {
                padding-top: 0;

                &:first-child {
                    padding-top: 1px;
                }
            }

            .dx-menu-item {
                padding: 7px 30px 7px 5px;

                .dx-menu-image {
                    background-position-x: left;
                }
            }
        }

        .dx-link {
            text-decoration: underline;
            cursor: pointer;
        }

        .dx-column-indicators {
            display: inline-block;
            vertical-align: top;
            white-space: nowrap;

            &.dx-visibility-hidden {
                visibility: hidden;
            }

            .dx-sort-index-icon {
                padding-right: @GRID_SORT_INDEX_OFFSET;
                margin-left: -@GRID_SORT_INDEX_OFFSET;
                width: @GRID_SORT_INDEX_WIDTH + @GRID_SORT_INDEX_OFFSET;
            }

            .dx-sort,
            .dx-header-filter {
                &.dx-sort,
                &.dx-header-filter {
                    display: inline-block;
                }

                &.dx-header-filter:after {
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    margin: -@GRID_CELL_PADDING;
                }
            }
        }

        .dx-row {
            & > td,
            & > tr > td {
                padding: @GRID_CELL_PADDING;
            }
        }

        .dx-error-row {
            .user-select(initial);

            .dx-error-message {
                user-select: text;

                a {
                    color: inherit;
                }
            }
        }

        .dx-@{widgetName}-rowsview .dx-data-row .dx-command-drag {
            cursor: move;
            vertical-align: middle;
            padding: 0;
        }
    }

    .dx-sortable-dragging .dx-@{widgetName}-rowsview .dx-data-row .dx-command-drag {
        cursor: pointer;
        cursor: grabbing;
    }

    .dx-sortable-without-handle .dx-data-row {
        cursor: pointer;
    }

    .dx-@{widgetName}-column-chooser {
        .dx-overlay-content {
            .dx-popup-title {
                border-bottom: none;
                font-size: 16px;

                .dx-toolbar-label {
                    font-size: 16px;
                }
            }

            .dx-popup-content {
                padding: 0 20px 20px 20px;

                .dx-column-chooser-item {
                    opacity: 0.5;
                    margin-bottom: 10px;
                    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.2);

                    &.dx-@{widgetName}-drag-action {
                        opacity: 1;
                        cursor: pointer;
                        touch-action: pinch-zoom;
                    }
                }
            }
        }

        &.dx-@{widgetName}-column-chooser-mode-drag {
            .dx-treeview-node-container:first-child > .dx-treeview-node-is-leaf {
                padding: 0;
            }
        }

        &.dx-@{widgetName}-column-chooser-mode-select {
            .dx-@{widgetName}-column-chooser-plain {
                .dx-treeview-node {
                    padding-left: 0;

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

    .dx-@{widgetName}-nowrap {
        white-space: nowrap;

        .dx-header-row > td > .dx-@{widgetName}-text-content {
            white-space: nowrap;
        }
    }

    .dx-@{widgetName}-drag-header {
        position: absolute;
        vertical-align: middle;
        cursor: pointer;
        z-index: 10000;
        // T105728
        box-sizing: content-box;

        &.dx-drag-command-cell {
            padding: 0;
        }
    }

    .dx-@{widgetName}-columns-separator {
        position: absolute;
        z-index: 3;
        width: 3px;
    }

    .dx-@{widgetName}-columns-separator-transparent {
        border-left: 0;
        border-right: 0;
    }

    .dx-@{widgetName}-tracker {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 3;
        cursor: col-resize;
    }

    .dx-@{widgetName}-table-content {
        position: absolute;
        top: 0;
    }

    .dx-@{widgetName}-focus-overlay {
        position: absolute;
        pointer-events: none;
        top: 0;
        left: 0;
        visibility: hidden;
    }

    .dx-@{widgetName}-action,
    .dx-@{widgetName}-drag-action {
        cursor: pointer;
    }

    .dx-data-row.dx-state-hover {
        &:not(.dx-selection):not(.dx-row-modified):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row) {
            & > td:not(.dx-focused) {
                .dx-link {
                    color: inherit;
                }
            }
        }
    }

    .dx-@{widgetName}-content {
        position: relative;
    }

    .dx-@{widgetName}-text-content {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dx-@{widgetName}-table-fixed {
        table-layout: fixed;
        width: 100%;
    }

    input.dx-hidden {
        display: inline-block !important; // stylelint-disable-line declaration-no-important
        width: 0 !important; // stylelint-disable-line declaration-no-important
    }

    .dx-hidden-cell {
        visibility: hidden;
    }

    .dx-row {
        & > td,
        & > tr > td {
            border: none;
        }
    }

    .dx-@{widgetName}-content .dx-@{widgetName}-table {
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0;
        max-width: 10px;

        &.dx-@{widgetName}-table-fixed {
            max-width: none;

            .dx-column-indicators .dx-sort {
                &.dx-sort-none {
                    display: none;
                }

                &.dx-sort-index {
                    width: @GRID_COLUMN_HEADER_INDICATOR_WIDTH + @GRID_SORT_INDEX_WIDTH;
                }
            }
        }

        .dx-@{widgetName}-best-fit {
            .dx-column-indicators {
                float: none !important; // stylelint-disable-line declaration-no-important

                & > span {
                    width: @GRID_COLUMN_HEADER_INDICATOR_WIDTH;
                }
            }

            .dx-column-indicators .dx-sort {
                &.dx-sort-none {
                    display: inline-block;
                }
            }

            .dx-header-row .dx-@{widgetName}-text-content {
                max-width: none;
            }

            .dx-text-content-alignment-left {
                margin-right: @GRID_TEXT_CONTENT_MARGIN;
            }

            .dx-text-content-alignment-right {
                margin-left: @GRID_TEXT_CONTENT_MARGIN;
            }
        }

        &:not(.dx-@{widgetName}-table-fixed) {
            .dx-column-indicators {
                float: none !important; // stylelint-disable-line declaration-no-important

                & > span {
                    width: @GRID_COLUMN_HEADER_INDICATOR_WIDTH;
                }
            }

            .dx-text-content-alignment-left {
                margin-right: @GRID_TEXT_CONTENT_MARGIN;
            }

            .dx-text-content-alignment-right {
                margin-left: @GRID_TEXT_CONTENT_MARGIN;
            }

            .dx-master-detail-cell {
                max-width: 0;
            }
        }

        [class*="column"] + [class*="column"]:last-child {
            float: none;
        }

        .dx-row {
            & > td,
            & > tr > td {
                vertical-align: top;

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

                &.dx-@{widgetName}-group-space {
                    border-right: none;
                    vertical-align: top;

                    & + td {
                        border-left: none;
                    }
                }
            }

            .dx-editor-container {
                overflow: hidden;
            }

            .dx-cell-modified,
            .dx-@{widgetName}-invalid {
                &:not(.dx-field-item-content) {
                    padding: 0;
                }
            }

            .dx-@{widgetName}-invalid .dx-invalid-message.dx-overlay {
                position: static;

                .dx-overlay-content {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .dx-editor-cell {
                max-width: 0;
                padding: 0;
                vertical-align: middle;

                .dx-texteditor,
                .dx-texteditor-container {
                    border: 0;
                    margin: 0;
                }

                .dx-dropdowneditor {
                    margin-left: -1px;
                    padding-left: 1px;
                }
            }

            .dx-command-select {
                padding: 0;
                width: @GRID_COMMAND_SELECT_COLUMN_WIDTH;
                min-width: @GRID_COMMAND_SELECT_COLUMN_WIDTH;
                max-width: @GRID_COMMAND_SELECT_COLUMN_WIDTH;
            }

            .dx-command-edit {
                text-overflow: clip;
                width: @GRID_COMMAND_EDIT_COLUMN_WIDTH;
                min-width: @GRID_COMMAND_EDIT_COLUMN_WIDTH;
                white-space: nowrap;

                &.dx-command-edit-with-icons {
                    width: @GRID_COMMAND_EDIT_COLUMN_WITH_ICONS_WIDTH;
                    min-width: @GRID_COMMAND_EDIT_COLUMN_WITH_ICONS_WIDTH;

                    .dx-link {
                        text-decoration: none;
                    }
                }

                .dx-link {
                    display: inline-block;
                }
            }

            .dx-command-expand {
                padding: 0;
                width: @GRID_COMMAND_EXPAND_COLUMN_WIDTH;
                min-width: @GRID_COMMAND_EXPAND_COLUMN_WIDTH;
                max-width: @GRID_COMMAND_EXPAND_COLUMN_WIDTH;
                .user-select(none);
            }

            .dx-command-adaptive {
                padding: 0;
                vertical-align: middle;
            }
        }

        .dx-data-row .dx-command-edit-with-icons {
            line-height: 1;
            white-space: nowrap;
        }

        .dx-filter-range-content {
            padding: @GRID_CELL_PADDING @GRID_CELL_PADDING @GRID_CELL_PADDING @GRID_TEXTEDITOR_INPUT_PADDING;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }

        .dx-row > .dx-last-data-cell {
            border-right: none;
        }

        .dx-row > .dx-command-adaptive-hidden {
            border-left: none;
        }
    }

    .dx-highlight-outline {
        position: relative;
        padding: @GRID_CELL_PADDING;

        &::after {
            content: '';
            position: absolute;
            border: 2px solid transparent;
            top: 0;
            left: 1px;
            bottom: 0;
            right: 0;
            pointer-events: none;
        }

        &.dx-hidden {
            display: block !important; // stylelint-disable-line declaration-no-important

            &::after {
                display: none;
            }
        }
    }

    .dx-editor-cell {
        .dx-texteditor-input {
            margin: 0;
        }

        .dx-highlight-outline {
            padding: 0;
        }

        &.dx-editor-inline-block .dx-highlight-outline::before {
            display: inline-block;
            content: '\200b';
            vertical-align: middle;
            padding-top: @GRID_CELL_PADDING;
            padding-bottom: @GRID_CELL_PADDING;
        }
    }

    .dx-column-lines {
        .dx-highlight-outline::after {
            left: 0;
        }
    }

    .dx-@{widgetName}-headers {
        position: relative;
        outline: 0;
        .user-select(none);
    }

    .dx-header-row {
        .dx-editor-cell .dx-select-checkbox {
            display: inline-block;
        }

        & > td {
            white-space: nowrap;
            overflow: hidden;

            & > .dx-@{widgetName}-text-content {
                white-space: normal;
                vertical-align: top;
            }
        }

        .dx-text-content-alignment-left,
        .dx-text-content-alignment-right {
            display: inline-block;
            max-width: 100%;
        }

        .dx-sort-indicator,
        .dx-header-filter-indicator {
            max-width: calc(100% - round(@GRID_COLUMN_HEADER_INDICATOR_WIDTH + @GRID_TEXT_CONTENT_MARGIN));

            &.dx-text-content-alignment-left {
                margin-right: @GRID_TEXT_CONTENT_MARGIN;
            }

            &.dx-text-content-alignment-right {
                margin-left: @GRID_TEXT_CONTENT_MARGIN;
            }

            &.dx-text-content-alignment-left.dx-text-content-alignment-right {
                max-width: calc(100% - round(@GRID_COLUMN_HEADER_INDICATOR_WIDTH*2 + @GRID_TEXT_CONTENT_MARGIN*2));
            }
        }

        .dx-sort-indicator.dx-header-filter-indicator {
            max-width: calc(100% - round(@GRID_COLUMN_HEADER_INDICATOR_WIDTH*2 + @GRID_TEXT_CONTENT_MARGIN));
        }

        .dx-sort-indicator.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right {
            max-width: calc(100% - round(@GRID_COLUMN_HEADER_INDICATOR_WIDTH*4 + @GRID_TEXT_CONTENT_MARGIN*2));
        }

        .dx-sort-indicator.dx-sort-index-indicator {
            max-width: calc(100% - round(@GRID_COLUMN_HEADER_INDICATOR_WIDTH + @GRID_TEXT_CONTENT_MARGIN + @GRID_SORT_INDEX_WIDTH));

            &.dx-header-filter-indicator {
                max-width: calc(100% - round(@GRID_COLUMN_HEADER_INDICATOR_WIDTH*2 + @GRID_TEXT_CONTENT_MARGIN + @GRID_SORT_INDEX_WIDTH));
            }

            &.dx-text-content-alignment-left.dx-text-content-alignment-right {
                max-width: calc(100% - round(@GRID_COLUMN_HEADER_INDICATOR_WIDTH*2 + @GRID_TEXT_CONTENT_MARGIN*2 + @GRID_SORT_INDEX_WIDTH));
            }

            &.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right {
                max-width: calc(100% - round(@GRID_COLUMN_HEADER_INDICATOR_WIDTH*4 + @GRID_TEXT_CONTENT_MARGIN*2 + @GRID_SORT_INDEX_WIDTH));
            }
        }
    }

    .dx-@{widgetName}-filter-range-overlay {
        .dx-editor-container .dx-texteditor {
            border-width: 0;

            &.dx-state-focused:after {
                content: " ";
                position: absolute;
                top: -1px;
                bottom: -1px;
                left: -1px;
                right: -1px;
                z-index: 1;
                pointer-events: none;
            }
        }

        .dx-@{widgetName}-filter-range-end {
            border-top: 1px solid transparent;
        }

        .dx-editor-container.dx-highlight-outline {
            padding: 0;
        }
    }

    .dx-@{widgetName}-filter-row {
        .dx-editor-cell {
            .dx-menu {
                display: none;
            }

            .dx-editor-with-menu {
                position: relative;

                .dx-menu {
                    display: block;
                }

                .dx-texteditor-input,
                .dx-placeholder:before {
                    padding-left: @GRID_TEXTEDITOR_INPUT_PADDING;
                }
            }
        }

        .dx-highlight-outline {
            &::after {
                pointer-events: none;
            }
        }

        .dx-focused {
            .dx-highlight-outline {
                &::after {
                    border-color: transparent;
                }
            }
        }

        .dx-menu {
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
            margin-left: -2px;
            margin-top: -2px;
            height: 100%;
            overflow: visible;

            .dx-menu-horizontal {
                height: 100%;

                .dx-menu-item-text,
                .dx-menu-item-popout {
                    display: none;
                }
            }
        }

        .dx-menu-item.dx-state-focused {
            &:after {
                position: absolute;
                left: 2px;
                top: 2px;
                width: 100%;
                height: 102%;
                content: '';
            }
        }

        & > td:first-child .dx-menu,
        & > .dx-first-cell .dx-menu {
            margin-left: 0;
        }

        .dx-menu-horizontal .dx-overlay-content ul .dx-menu-item {
            padding: 5px;
            padding-right: 30px;
        }

        .dx-menu ul.dx-menu-horizontal > li > .dx-menu-item {
            padding: 8px 5px 7px 5px;
        }

        .dx-menu ul.dx-menu-horizontal > li > .dx-menu-item.dx-state-disabled:hover {
            padding: 9px 6px 8px 6px;
        }

        .dx-menu-caption {
            padding-left: 6px;
        }

        .dx-menu ul .dx-menu-item .dx-menu-chouser-down {
            display: none;
        }

        .dx-menu-item-highlight {
            font-weight: normal;
        }
    }

    .dx-@{widgetName}-scroll-container {
        overflow: hidden;
        width: 100%;
    }

    .dx-@{widgetName}-header-panel {
        text-align: left;

        .dx-toolbar-menu-container {
            .dx-button {
                margin-left: 10px;
            }
        }
    }

    .dx-state-disabled {
        cursor: pointer;

        .dx-menu-item {
            cursor: default;
        }
    }

    .dx-@{widgetName}-search-panel {
        margin: 0;
        margin-left: 15px;
    }

    .dx-gridbase-container > .dx-@{widgetName}-rowsview {
        flex: auto;
        height: auto; // T671939

        &.dx-scrollable {
            display: flex;

            & > .dx-scrollable-wrapper {
                flex: 1;
                height: auto;
                min-width: 0;
                min-height: 0;
            }
        }
    }

    .dx-@{widgetName}-rowsview {
        position: relative;
        overflow: hidden;

        &.dx-empty {
            height: 100px;

            .dx-scrollable-content {
                height: 100%;
            }
        }

        &.dx-fixed-columns {
            &.dx-scrollable .dx-scrollable-content {
                z-index: 2;
            }

            .dx-scrollable-scrollbar {
                z-index: 3;
            }
        }

        .dx-@{widgetName}-content {
            overflow-anchor: none;

            &:not(.dx-@{widgetName}-content-fixed) {
                min-height: 100%;
            }
        }


        &:focus {
            outline: 0;
        }

        .dx-row {
            & > td,
            & > tr > td {
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .dx-row.dx-row-lines:first-child {
            border-top: none;

            & > td,
            & > tr > td {
                border-top: none;
            }
        }

        .dx-data-row > td:focus {
            outline: 0;
        }

        .dx-selection,
        .dx-selection.dx-row:hover {
            & > td,
            & > tr > td {
                .dx-link {
                    color: inherit;
                }
            }
        }

        .dx-@{widgetName}-table .dx-row.dx-freespace-row,
        .dx-@{widgetName}-table .dx-row.dx-virtual-row {
            border-top: 0;
            border-bottom: 0;

            & > td {
                padding-top: 0;
                padding-bottom: 0;
            }
        }

        .dx-select-checkboxes-hidden > tbody > tr > td > .dx-select-checkbox {
            display: none;
        }

        .dx-select-checkboxes-hidden > tbody > tr > td:hover > .dx-select-checkbox {
            display: inline-block;
        }

        .dx-select-checkboxes-hidden > tbody > tr.dx-selection > td > .dx-select-checkbox {
            display: inline-block;
        }

        .dx-row > .dx-master-detail-cell {
            padding: @GRID_MASTERDETAIL_PADDING;

            &:focus {
                outline: 0;
            }
        }

        .dx-data-row.dx-edit-row {
            .dx-cell-modified .dx-highlight-outline:after {
                border-color: transparent;
            }
        }
    }

    .dx-@{widgetName}-nodata {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        text-align: center;
        transform: translate(-50%, -50%);
    }

    .dx-@{widgetName}-bottom-load-panel {
        text-align: center;
        padding: 10px;
    }

    .dx-@{widgetName}-hidden-column {
        white-space: nowrap;
    }

    // ie11
    .dx-@{widgetName} .dx-row .dx-@{widgetName}-hidden-column {
        border-right-width: 0;
        border-left-width: 0;
    }

    .dx-@{widgetName}-hidden-column > * {
        display: none !important; // stylelint-disable-line declaration-no-important
    }

    .dx-@{widgetName}-total-footer {
        position: relative;

        & > .dx-@{widgetName}-content {
            padding-top: @GRID_TOTAL_FOOTER_PADDINGS;
            padding-bottom: @GRID_TOTAL_FOOTER_PADDINGS;
        }
    }

    .dx-@{widgetName}-summary-item {
        font-weight: bold;
    }

    .dx-@{widgetName}-export-menu {
        .dx-menu-item {
            .dx-checkbox {
                margin-left: 0;

                .dx-checkbox-icon {
                    width: 16px;
                    height: 16px;
                }

                .dx-checkbox-text {
                    white-space: nowrap;
                    word-break: normal;
                }
            }
        }
    }

    .dx-command-adaptive {
        width: @GRID_COMMAND_ADAPTIVE_COLUMN_WIDTH;
        min-width: @GRID_COMMAND_ADAPTIVE_COLUMN_WIDTH;
    }

    .dx-@{widgetName}-revert-tooltip {
        &.dx-popover-wrapper {
            .dx-overlay-content {
                border: none;
                box-shadow: none;

                .dx-popup-content {
                    padding: 0;
                }
            }

            .dx-popover-arrow {
                width: 0;
                height: 0;
            }
        }

        .dx-revert-button {
            margin: 0;
        }
    }

    .dx-@{widgetName}-notouch-action {
        touch-action: none;
        -ms-content-zooming: none;
        -ms-overflow-style: none; // for Edge browser
    }

    .dx-device-mobile .dx-@{widgetName}-column-chooser-list.dx-treeview,
    .dx-@{widgetName}-column-chooser-list.dx-treeview {
        .dx-treeview-item,
        .dx-empty-message {
            border: none;
        }

        .dx-empty-message {
            text-align: center;
            left: 0;
            right: 0;
            bottom: 50%;
            position: absolute;
        }
    }

    .dx-rtl .dx-@{widgetName},
    .dx-@{widgetName}.dx-rtl {
        .dx-menu-subitem {
            .dx-menu-item {
                padding: 7px 5px 7px 30px;

                .dx-menu-image {
                    background-position-x: right;
                }
            }
        }

        .dx-texteditor-buttons-container {
            text-align: start;
        }
    }

    .dx-rtl {
        .dx-@{widgetName}-content .dx-@{widgetName}-table {
            direction: rtl;

            .dx-row > td {
                &.dx-@{widgetName}-group-space {
                    border-left: none;

                    & + td {
                        border-right: none;
                    }
                }
            }

            .dx-row {
                .dx-editor-container .dx-editor-cell {
                    .dx-checkbox.dx-checkbox-checked {
                        .dx-checkbox-icon {
                            .flip-horizontally();
                        }
                    }
                }

                .dx-filter-range-content {
                    padding: @GRID_CELL_PADDING @GRID_TEXTEDITOR_INPUT_PADDING @GRID_CELL_PADDING @GRID_CELL_PADDING;
                }
            }
        }

        .dx-@{widgetName}-headers,
        .dx-@{widgetName}-rowsview,
        .dx-@{widgetName}-total-footer {
            direction: ltr;

            .dx-@{widgetName}-table {
                direction: rtl;
            }
        }

        .dx-@{widgetName}-filter-row {
            .dx-editor-cell .dx-editor-with-menu {
                .dx-texteditor {
                    .dx-texteditor-input,
                    .dx-placeholder:before {
                        padding-right: @GRID_TEXTEDITOR_INPUT_PADDING;
                    }
                }
            }

            .dx-menu {
                right: 0;
                left: auto;
                margin-left: 0;
                margin-right: -2px;
            }

            & > td:first-child .dx-menu {
                margin-left: 0;
            }

            .dx-menu-horizontal .dx-overlay-content ul .dx-menu-item {
                padding: 5px;
                padding-left: 30px;
            }

            .dx-menu-caption {
                padding-right: 6px;
            }
        }

        .dx-@{widgetName}-header-panel {
            text-align: right;

            .dx-@{widgetName}-column-chooser-button {
                margin-left: 0;
            }

            .dx-toolbar-menu-container {
                .dx-button {
                    margin-left: 0;
                    margin-right: 10px;
                }
            }
        }

        .dx-@{widgetName}-search-panel {
            margin: 0;
            margin-right: 15px;
        }
    }

    .dx-@{widgetName}-filter-panel,
    .dx-@{widgetName}-filter-panel-left {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        min-width: 0;
    }

    .dx-@{widgetName}-filter-panel {
        padding: 10px;

        .dx-@{widgetName}-filter-panel-text {
            .dx-overflow();
        }

        .dx-@{widgetName}-filter-panel-text:hover,
        .dx-@{widgetName}-filter-panel-clear-filter:hover {
            text-decoration: underline;
            cursor: pointer;
        }

        .dx-@{widgetName}-filter-panel-checkbox {
            padding-right: 10px;
        }

        .dx-icon-filter {
            margin: auto;
            margin-right: 7px;
            cursor: pointer;
        }
    }
}