ag-grid/src/styles/_ag-theme-classic-common.scss

@import "./ag-theme-common";

@mixin ag-theme-classic($params) {
    $border-color: map-get($params, "border-color");
    $editor-background-color: map-get($params, "editor-background-color");
    $tab-background-color: map-get($params, "tab-background-color");
    $grid-size: map-get($params, "grid-size");
    $header-background-image: map-get($params, "header-background-image");
    $header-height: map-get($params, "header-height");
    $cell-horizontal-border: map-get($params, "cell-horizontal-border");
    $focused-cell-border-color: map-get($params, "focused-cell-border-color");
    $menu-option-active-color: map-get($params, "menu-option-active-color");
    $chip-background-color: map-get($params, "chip-background-color");
    $ag-range-selected-color-1: map-get($params, "ag-range-selected-color-1");
    $ag-range-selected-color-2: map-get($params, "ag-range-selected-color-2");
    $ag-range-selected-color-3: map-get($params, "ag-range-selected-color-3");
    $ag-range-selected-color-4: map-get($params, "ag-range-selected-color-4");
    $cell-highlight-border: map-get($params, "cell-highlight-border");
    $row-height: map-get($params, "row-height");
    $icon-size: map-get($params, "icon-size");

    .ag-body {
        background-color: map-get($params, "panel-background-color");
    }

    .ag-cell {
        box-sizing: border-box;
    }

    %card {
        background-color: $editor-background-color;
        border: 1px solid $border-color;
    }

    %tab {
        border: 1px solid transparent;
        border-bottom-width: 0;
        display: inline-block;
        margin: $grid-size;
        margin-bottom: 0;
        padding: $grid-size $grid-size * 2;
    }

    %selected-tab {
        background-color: $editor-background-color;
        border-bottom: 2px solid $editor-background-color !important;
        border-color: $border-color;
    }

    @include ag-grid-theme($params);

    .ag-tab-header {
        background-color: $tab-background-color;
    }

    .ag-faded {
        opacity: 0.3;
    }

    .ag-column-drop-horizontal.ag-column-drop {
        border: 1px solid $border-color;
        border-bottom: 0;
    }

    .ag-column-drop-horizontal.ag-column-drop:last-child {
        border-left: 0;
    }

    .ag-header {
        background-image: $header-background-image;
        border-bottom: 1px solid $border-color;
    }

    .ag-header-cell-resize::after {
        height: $header-height;
        margin-top: 0;
    }

    .ag-header-cell {
        border-right: 1px solid $border-color;
        box-sizing: border-box;
    }

    .ag-header-group-cell {
        border-right: 1px solid $border-color;
    }

    .ag-header-group-cell-with-group {
        border-bottom: 1px solid $border-color;
    }

    .ag-header-row {
        border-bottom: 0;
    }

    .ag-root {
        border: 1px solid $border-color;
    }

    .ag-column-panel {
        border-right: 1px solid $border-color;
    }

    .ag-cell-no-focus {
        border-right: $cell-horizontal-border;
    }

    .ag-row {
        border-bottom-width: 0;
    }

    .ag-column-panel .ag-column-drop .ag-column-drop-empty-message {
        line-height: $header-height;
    }

    .ag-floating-filter-button {
        margin-top: $grid-size * 2;
    }

    .ag-filter .ag-filter-apply-panel {
        border-top: 1px solid $border-color;
        justify-content: flex-start;
    }

    .ag-cell-focus {
        border: 1px solid $focused-cell-border-color;
    }

    .ag-menu .ag-menu-option-active {
        background: $menu-option-active-color;
    }

    .ag-menu .ag-menu-option {
        line-height: $grid-size * 6;
    }

    .ag-column-drop-cell {
        background: $chip-background-color;
        background-image: $header-background-image;
        border: 1px solid $border-color;
        border-radius: 0;
        height: $grid-size * 4.5 !important;

        .ag-column-drop-cell-button {
            box-sizing: border-box;
            height: calc(100% - #{$grid-size});
            margin-bottom: $grid-size / 2;
            margin-top: $grid-size / 2;
        }

        .ag-column-drop-cell-button:hover {
            border: 1px solid $border-color;
        }
    }

    // we do not want to color the range color when the cell is also focused
    .ag-cell-range-selected-1:not(.ag-cell-focus) {
        background-color: $ag-range-selected-color-1;
    }

    .ag-cell-range-selected-2:not(.ag-cell-focus) {
        background-color: $ag-range-selected-color-2;
    }

    .ag-cell-range-selected-3:not(.ag-cell-focus) {
        background-color: $ag-range-selected-color-3;
    }

    .ag-cell-range-selected-4:not(.ag-cell-focus) {
        background-color: $ag-range-selected-color-4;
    }

    .ag-cell-highlight {
        background-color: $ag-range-selected-color-1;
        border-bottom: $cell-highlight-border;
    }

    .ag-cell-highlight-animation {
        transition: all 1s;
    }

    .ag-group-expanded {
        .ag-icon-contracted:empty {
            @include icon-background($params, "contracted");
        }
    }

    .ag-rtl .ag-icon-tree-closed {
        @include icon-background($params, "small-left");
    }

    .ag-cell-inline-editing {
        height: $row-height;
        padding: 0;

        input {
            box-sizing: border-box;
        }
    }

    .ag-column-panel .ag-column-drop .ag-column-drop-title {
        float: none;
    }

    .ag-column-select-panel {
        .ag-column-select-column-group,
        .ag-column-select-column {
            height: $grid-size * 5;
            line-height: $grid-size * 5;
        }
    }

    .ag-filter .ag-filter-header-container {
        height: $grid-size * 6;
    }

    // bootstrap overrides
    .ag-tab {
        box-sizing: initial;
    }

    .ag-filter .ag-filter-value {
        line-height: $icon-size + $grid-size;
    }

    .ag-selection-checkbox span {
        position: relative;
        top: 0;
    }

    .ag-rich-select-value {
        border-bottom: 1px solid $border-color;
    }

    .ag-header-cell-moving .ag-header-cell-label {
        opacity: 0.5;
    }

    .ag-header-cell-moving {
        background-color: map-get($params, "header-cell-moving-background-color");
    }

    .ag-ltr .ag-pinned-right-header {
        border-left: 1px solid $border-color;
    }

    .ag-rtl .ag-pinned-left-header {
        border-right: 1px solid $border-color;
    }

    .ag-overlay-loading-wrapper {
        background-color: rgba(255, 255, 255, 0.5);
    }

    .ag-overlay-loading-center {
        background-color: #fff;
        border: 1px solid $border-color;
        border-radius: 10px;
        color: black;
        padding: 10px;
    }

    .ag-column-name-filter {
        height: $grid-size * 4;
    }

    .ag-column-drop-cell .ag-column-drag {
        background-position-y: 0 !important;
    }
}