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;
$row-line-color:                    #e5e5e5 !default;
$col-line-color:                    #e5e5e5 !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;

Shadow variables

$shadow-blur-radius:    7px !default; 
$shadow-spread-radius:  -3px !default; 
$shadow-length:         3px !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-01:        0.01 !default;

Size related variables

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

$row-separator-line-width:              1px !default;
$col-separator-line-width:              1px !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;