Sass variables

ReactGrid uses an expanded set of variables you can override.

Color related variables

Color variables

$primary-color: #3579f8 !default;
$bg-color: #ffffff !default;
$sticky-bg-color: #ffffff !default;
$shadow-color: #000000 !default;
$resize-line-color: #74b9ff !default;
$resize-hint-bg-color: $resize-line-color !default;
$resize-handle-gb-color: $primary-color !default;
$cell-border-color: #111111 !default;
$cell-editor-bg-color: #ffffff !default;
$cell-editor-border-color: $primary-color !default;
$fillhandle-action-border-color: #000000 !default;
$partial-area-gb-color: $primary-color !default;
$partial-area-border-color: $primary-color !default;
$checkbox-checked: $primary-color !default;
$checkbox-unchecked: #eeeeee !default;
$checkbox-hover: #cccccc !default;
$checkbox-mark: #ffffff !default;

$dropdown-focused-item-bg-color: lighten(
    $color: $primary-color,
    $amount: 35,
) !default;
$dropdown-menu-bg-color: #ffffff !default;

Shadow variables

$shadow-blur-radius: 3px !default;
$shadow-spread-radius: 1px !default;
$shadow-length: 1px !default;
$cell-editor-shadow: 1px 1px 6px !default;

Context menu variables

$context-menu-shadow: 0px 0px 8px 2px !default;

Opacity variables

$opacity-80: 0.8 !default;
$opacity-35: 0.35 !default;
$opacity-20: 0.2 !default;
$opacity-15: 0.15 !default;
$opacity-10: 0.1 !default;
$opacity-06: 0.06 !default;
$opacity-01: 0.01 !default;

Size related variables

$cell-font-size:                        1em !default;
$context-menu-font-size:                1em !default;

$cell-padding:                          0 4px !default;
$cell-focus-border-width:               2px !default;
$celleditor-border-width:               2px !default;
$celleditor-padding-top:                1px !default;

$fill-handle-area:                      40px !default;
$fill-handle-square:                    6.5px !default;
$fill-handle-border-width:              1px !default;

$resize-handle-area:                    11px !default;
$resize-handle-line-width:              6px !default;
$line-size:                             2px !default;

$partial-area-border-width:             1px !default;
$partial-area-selected-border-width:    1px !default;

$checkbox-size:                         18px !default;

$context-menu-option-padding:           8px 20px 8px 15px !default;

Core cell templates variables

$template-checkbox-size:    20px !default;
$template-font-size:        1em !default;
$template-bg-color:         transparent !default;
$template-padding:          0 !default;
$template-margin:           0 !default;
$template-content-invalid:  rgb(255, 0, 0) !default;