Data Grid CSS & SCSS Variables

        
            
    .data-den-grid {
      --#{$prefix}grid-font-family: Roboto, sans-serif;
      --#{$prefix}grid-font-size: 14px;

      --#{$prefix}grid-border-width: 1px;
      --#{$prefix}grid-border-color: #e5e7eb;
      --#{$prefix}grid-border: solid var(--#{$prefix}grid-border-width) var(--#{$prefix}grid-border-color);
      --#{$prefix}grid-border-radius: 0.25rem;

      --#{$prefix}grid-row-cell-border: solid var(--#{$prefix}row-cell-border-width) var(--#{$prefix}cell-border-color);

      --#{$prefix}cell-active-bg: #fafafa;
      --#{$prefix}cell-padding-x: 12px;
      --#{$prefix}cell-border-width: var(--#{$prefix}grid-border-width);
      --#{$prefix}cell-border-color: var(--#{$prefix}grid-border-color);
      --#{$prefix}cell-border: solid var(--#{$prefix}cell-border-width) var(--#{$prefix}cell-border-color);

      --#{$prefix}cell-pinned-border-color: #636363;
      --#{$prefix}cell-pinned-border: solid 1px var(--#{$prefix}cell-pinned-border-color);

      --#{$prefix}row-cell-bg: #ffffff;
      --#{$prefix}row-cell-active-bg: var(--#{$prefix}cell-active-bg);
      --#{$prefix}row-cell-border-width: var(--#{$prefix}grid-border-width);
      --#{$prefix}row-cell-border-color: var(--#{$prefix}grid-border-color);
      --#{$prefix}row-cell-border: solid var(--#{$prefix}row-cell-border-width) var(--#{$prefix}row-cell-border-color);
      --#{$prefix}row-cell-padding-x: var(--#{$prefix}cell-padding-x);

      --#{$prefix}pagination-content-margin: 10px 10px 10px 0;
      --#{$prefix}pagination-info-margin: 0 0.5rem;
      --#{$prefix}pagination-button-border: none;
      --#{$prefix}pagination-button-border-radius: 0.25rem;
      --#{$prefix}pagination-button-bg: #ffffff;
      --#{$prefix}pagination-button-padding: 7px;

      --#{$prefix}header-cell-border: var(--#{$prefix}grid-border);
      --#{$prefix}header-cell-font-weight: 500;
      --#{$prefix}header-cell-bg: #fafafa;
      --#{$prefix}header-cell-active-bg: var(--#{$prefix}cell-active-bg);
      --#{$prefix}header-cell-padding: 6px 20px 6px 12px;

      --#{$prefix}header-sorter-margin-left: 5px;
      --#{$prefix}header-sorter-arrow-sorted-color: unset;
      --#{$prefix}header-sorter-arrow-unsorted-color: #a9a9a9;
      --#{$prefix}header-sorter-asc-transform: rotate(0deg);
      --#{$prefix}header-sorter-desc-transform: rotate(180deg);
      --#{$prefix}header-sorter-index-font-size: 0.75rem;

      --#{$prefix}header-filter-input-margin: 8px 0 0 0;
      --#{$prefix}header-filter-input-border-color: var(--#{$prefix}grid-border-color);
      --#{$prefix}header-filter-input-border: 1px solid var(--#{$prefix}header-filter-input-border-color);
      --#{$prefix}header-filter-input-border-radius: 0.25rem;
      --#{$prefix}header-filter-input-padding: 0 4px;
      --#{$prefix}header-filter-input-height: 20px;
      --#{$prefix}header-filter-input-width: 100%;
      --#{$prefix}header-filter-input-bg: transparent;

      --#{$prefix}header-resizer-bg: #ccc;
      --#{$prefix}header-resizer-width: 2px;
      --#{$prefix}header-resizer-padding-right: 6px;

      --#{$prefix}header-menu-bg: #ffffff;
      --#{$prefix}header-menu-border: var(--#{$prefix}grid-border);
      --#{$prefix}header-menu-right: 36px;
      --#{$prefix}header-menu-top: 10px;
      --#{$prefix}header-menu-width: 150px;
      --#{$prefix}header-menu-max-height: 200px;
      --#{$prefix}header-menu-box-shadow: 0 2px 4px #00000033;
      --#{$prefix}header-menu-padding: 8px;
      --#{$prefix}header-menu-font-size: 12px;
      --#{$prefix}header-menu-border-radius: 4px;

      --#{$prefix}header-menu-item-color: #333;
      --#{$prefix}header-menu-item-hover-bg: #eee;
      --#{$prefix}header-menu-item-padding: 4px 8px;

      --#{$prefix}header-menu-toggler-icon-color: unset;
    }