polestar-ui-kit/styles/components/ag-grid/ag-grid-theme.less

## Install

// @import '~ag-grid-community/dist/styles/ag-theme-balham.css';
@import '~ag-grid-community/dist/styles/ag-theme-alpine.css';
@import '~ag-grid-community/dist/styles/ag-grid.css';

@ag-prefix-cls: ~"ag";
@ag-component-prefix-cls: ~"@{polestar-prefix}-ag-grid-component";


.@{ag-prefix-cls} {
    &-theme-alpine {
        font-family: @font-family;

        input[class='ag-']:not([type]):focus,
        input[class^='ag-'][type='text']:focus,
        input[class^='ag-'][type='number']:focus,
        input[class^='ag-'][type='tel']:focus, 
        input[class^='ag-'][type='date']:focus, 
        input[class^='ag-'][type='datetime-local']:focus,
        textarea[class^='ag-']:focus {
            box-shadow: 0 0 2px 0.1rem fade(@primary-color, 20%);
            border-color: @primary-color;
        }
    }

    &-theme-alpine &-root-wrapper {
        border-color: @gray-2;
        border-radius: unset;
    }
    &-theme-alpine &-header {
        border-bottom-color: @gray-2;
        &-cell {
            &-menu-button {
                &:hover {
                    color: @primary-4;
                }
            }
            &-text {
                .font-noto();
            }
        }
    }
    &-theme-alpine &-row {
        &-hover,
        &-selected {
            background-color: @primary-1;
        }
    }
    &-theme-alpine &-cell {
       line-height: unset;
       &-inline-editing {
           height: 100%;
       }
       &-highlight {
           background-color: @primary-color !important;
           color: @white;
           transition: all ease 0s !important;
       }
    }
    &-theme-alpine &-menu {
        background-color: @white;
        border-color: @primary-2;
        &-separator {
            &-cell {
                &::after {
                    border-color: @primary-2;
                }
            }
        }
    }
    &-theme-alpine &-menu-option-active {
        background-color: @primary-1;
    }
    &-theme-alpine &-checkbox-input-wrapper {
        &:active,
        &:focus-within {
            box-shadow: 0 0 2px 0.1rem fade(@primary-color, 20%);
        }
        &::after {
            color: @gray-3;
        }
        &.@{ag-prefix-cls}-checked {
            &::after {
                color: @primary-color;
            }
        }
        &.@{ag-prefix-cls}-indeterminate {
            &::after {
                color: @gray-4;
            }
        }
    }
    &-theme-alpine &-radio-button-input-wrapper {
        &.@{ag-prefix-cls}-checked {
            &::after {
                color: @primary-color;
            }
        }
    }
    &-theme-alpine &-ltr &-label {
        margin-right: 0;
    }
    &-theme-alpine &-ltr &-has-focus &-cell-focus:not(&-cell-range-selected) {
        border-color: @primary-color;
    }
    &-theme-alpine &-tab-selected {
        color: @primary-color;
        border-bottom-color: @primary-color;
        &:hover {
            color: @primary-4;
        }
    }
    &-theme-alpine &-picker-field-wrapper {
        border-radius: @border-radius-base;
        &:focus {
            box-shadow: 0 0 2px 0.1rem fade(@primary-color, 20%);
        }
    }
    &-theme-alpine &-list-item&-active-item {
        background-color: @primary-1;
    }
}