@elliemae/ds-basic 2.3.0-alpha.9 → 2.3.0-next.3

package/styles/components/packages/ds-datagrids/DataGrids.scss

@@ -0,0 +1,994 @@
+// ********************************************
+// container definition
+$data-grid: #{$prefix}-data-grid;
+$data-grid-header: #{$prefix}-data-grid-header;
+$data-grid-spinner: #{$prefix}-data-grid-spinner;
+$data-grid-body: #{$prefix}-data-grid-body;
+
+// ********************************************
+// elements
+$data-grid-header-row: #{$data-grid-header}__row;
+$data-grid-header-cell: #{$data-grid-header}__cell;
+$data-grid-body-row: #{$data-grid-body}__row;
+$data-grid-body-cell: #{$data-grid-body}__cell;
+
+// ********************************************
+// dimsum components in DataGrid
+$text-tooltip: #{$prefix}-text-tooltip;
+$toolbar-component: #{$prefix}-toolbar;
+$overlay-component: #{$prefix}-overlay;
+$radio-el: #{$prefix}-form-element-radio;
+$checkbox-el: #{$prefix}-form-element-checkbox;
+$icon-el: #{$prefix}-icon;
+$icon-button: #{$prefix}-icon-button;
+$button: #{$prefix}-button;
+$input-control: #{$prefix}-input;
+$dsseparator: #{$prefix}-separator-wrapper;
+$combobox: #{$prefix}-combobox;
+
+// ********************************************
+// Vars
+$data-grid-column-filter-input-height: 28px;
+$data-grid-input-border-radius: 2px;
+$data-grid-cell-min-width: 10px;
+$data-grid-body-height: 600px;
+$data-grid-column-header-padding-top: space(xs) * 0.875;
+$data-grid-column-header-padding-bottom: 12px;
+$data-grid-cell-height: space(l) * 1.125;
+$data-grid-cell-horizontal-padding: space(xs);
+
+$data-grid-header-cell-height: space(l) * 0.937; // 30px
+$dragger-width: 32px;
+$header-value-height: space(s) * 1.06;
+$row-min-height: 36px;
+$row-min-height-compact: 28px;
+
+$text-color: color(neutral, 700);
+// ********************************************
+// Mixins
+@mixin add-row-depth() {
+  opacity: 0.99;
+  @include depth(100);
+  z-index: 1;
+}
+
+@mixin ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin adjust-to-container() {
+  display: flex;
+  align-items: center;
+  justify-content: inherit;
+  height: 100%;
+}
+
+// ********************************************
+// DATA GRID
+.#{$data-grid}-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-width: space(xxl) * 7;
+  position: relative;
+  z-index: 0;
+  &--fluid {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$data-grid} {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: color(neutral, 000);
+  width: 100%;
+  height: 100%;
+
+  // When toolbar is present, take account of its height
+  .em-ds-filter-bar + & {
+    // 100% minus the height of the FilterBar
+    height: calc(100% - 44px);
+  }
+
+  // ********************************************
+  // HEADER
+  .#{$data-grid-header} {
+    overflow: hidden;
+    border-bottom: border-size() solid color(neutral, 200);
+
+    &__row {
+      margin-left: 3px;
+      display: flex;
+    }
+  }
+
+  // ********************************************
+  // BODY
+  .#{$data-grid-body} {
+    overflow-x: auto;
+    // padding-top: space(xxs);
+    position: relative;
+    flex: 1 1 0%;
+    height: 100%;
+    &--is-grouped {
+      padding-top: 0;
+      // top: -1px;
+    }
+  }
+
+  .#{$spinner-container} {
+    height: 100%;
+    width: 100%;
+    padding: space(xxl) * 2.5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+_:-ms-fullscreen,
+:root .#{$data-grid} .#{$data-grid-body}--ie-flex-basis-auto {
+  flex-basis: auto;
+}
+
+.#{$data-grid}-no-results {
+  padding: space(s);
+  height: 100%;
+  overflow: auto;
+
+  .no-results-wrapper {
+    position: absolute;
+    pointer-events: none;
+    width: 98%;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.#{$data-grid-header}__cell {
+  @include section-header-text-style;
+  background-color: color(neutral, 000);
+  flex: 1 1 0%;
+  display: flex;
+  align-items: center;
+  font-size: font-size(300);
+  text-align: left;
+  border-right: border-size() solid color(neutral, 080);
+  box-sizing: border-box;
+  padding: 0 $data-grid-cell-horizontal-padding;
+  color: $text-color;
+  min-height: space(m);
+  height: auto;
+
+  &.#{$data-grid-header-cell}--wrapText {
+    align-items: unset;
+    padding: $data-grid-cell-horizontal-padding;
+
+    .cell-value {
+      line-height: unset;
+    }
+  }
+
+  .cell-value {
+    line-height: 1;
+    min-width: 0;
+  }
+
+  .drag-handle {
+    transition: duration(fast) easing(base);
+    width: space(none);
+    margin-right: 0;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &:hover,
+  &:active,
+  &.header-dnd-column {
+    .drag-handle {
+      width: space(s);
+      visibility: visible;
+      margin-right: space(xxs);
+      opacity: 1;
+    }
+  }
+
+  &.with-filtering,
+  &.with-dnd-column,
+  &.with-sortable {
+    border-bottom: border-size() solid transparent;
+    position: relative;
+    &:hover {
+      &:after {
+        content: "";
+        z-index: 10;
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        height: 1px;
+        pointer-events: none;
+        width: 100%;
+        background-color: color(brand-primary, 800);
+      }
+    }
+  }
+}
+
+.window-scroller-override {
+  .#{$data-grid-body}__row {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.virtualized-body .row-drag-helper {
+  position: absolute !important;
+  
+  .#{$data-grid-body-row} {
+    @include add-row-depth();
+    $row-min-height: 36px;
+    $row-min-height-compact: 28px;
+    top: -$row-min-height !important;
+    position: fixed !important;
+  }
+  .toolbar-trigger-container {
+    top: -$row-min-height !important;
+  }
+}
+
+.virtualized-body {
+  .row-drag-helper.#{$data-grid-body-row} {
+    @include add-row-depth();
+    margin-top: -$row-min-height !important;
+  }
+}
+
+.row-drag-helper {
+  &.#{$data-grid-body-row} {
+    z-index: 100 !important;
+  }
+  .#{$data-grid-body-row} {
+    top: 0px !important;
+    z-index: 100 !important;
+  }
+  .toolbar-trigger-container {
+    display: none !important;
+  }
+}
+
+.#{$data-grid-body-row} {
+  color: $text-color;
+  display: flex;
+  position: relative;
+  background-color: color(neutral, 000);
+  margin-left: 2px;
+  margin-right: space(xxs);
+  width: 100%;
+  max-width: calc(100% - 2px);
+  box-sizing: border-box;
+
+  &.row-drag-helper {
+    @include add-row-depth();
+  }
+
+  &:not(:last-child) {
+    border-bottom: border-size() solid color(neutral, 080);
+  }
+
+  &:last-child {
+    margin-bottom: space(xs);
+  }
+
+  &:hover:not(.expanded-row),
+  &[aria-expanded="true"] {
+    @include add-row-depth();
+  }
+}
+
+.#{$data-grid-body}__cell {
+  @include body-text-style();
+  display: flex;
+  height: 100%;
+  padding-left: $data-grid-cell-horizontal-padding;
+  padding-right: $data-grid-cell-horizontal-padding;
+  word-break: break-all;
+  align-items: center;
+  flex: 1 1 0%;
+  @include ellipsis();
+
+  &:focus {
+    @include dsFocusAfter();
+  }
+
+  &.#{$data-grid-body-cell}--wrapText {
+    height: auto;
+
+    .cell-value {
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: pre-wrap;
+      overflow: hidden;
+      display: inline-block;
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+
+  .cell-value {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-flex;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .empty-cell {
+    flex: 1 1 0%;
+  }
+
+  &:last-child {
+    position: relative;
+    // this takes care of the horizontal extra
+    // scroll when the grid has vertical scrollbar
+    min-width: 0px;
+  }
+}
+
+// change row size
+.ds-row-size-compact {
+  .#{$data-grid-body-row} {
+    min-height: $row-min-height-compact;
+    & > .#{$data-grid-body-cell} {
+      min-height: $row-min-height-compact;
+    }
+  }
+  .toolbar-trigger {
+    height: $row-min-height-compact;
+  }
+  .em-ds-data-grid-body__cell .cell-value {
+    margin-top: 3px; // fix alignment
+  }
+  .virtualized-body {
+    .row-drag-helper.#{$data-grid-body-row} {
+      margin-top: $row-min-height-compact !important;
+    }
+  }
+  .virtualized-body .row-drag-helper {
+    .#{$data-grid-body-row} {
+      top: -$row-min-height-compact !important;
+    }
+    .toolbar-trigger-container {
+      top: -$row-min-height-compact !important;
+    }
+  }
+}
+
+// ********************************************
+// FEATURE: ROW DRAG AND DROP
+$dnd-row-container: #{$data-grid}-dnd-row-container;
+
+.#{$data-grid-body-row} {
+  // https://jira.elliemae.io/browse/PUI-1689
+  min-height: $row-min-height;
+  // https://jira.elliemae.io/browse/PUI-1720
+  // align-items: center;
+  & > .#{$data-grid-body-cell} {
+    min-height: $row-min-height;
+  }
+
+  .drag-handle {
+    margin-left: space(xxs) * -1;
+    margin-right: space(xs);
+    cursor: grab;
+  }
+}
+
+.#{$data-grid} {
+  .#{$data-grid-body} {
+    &__row {
+      &.hovered {
+        opacity: 0;
+      }
+    }
+
+    .drag-handle {
+      margin-left: space(xxs) * -1;
+      margin-right: space(xs);
+      cursor: grab;
+    }
+
+    &.dragging {
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+}
+
+// ********************************************
+// FEATURE: SELECTABLE
+.#{$data-grid} {
+  .#{$data-grid-body-row}.select-highlight {
+    background-color: color(brand-primary, 100);
+  }
+}
+
+.#{$data-grid-body-row},
+.multi-select-wrapper {
+  .#{$radio-el},
+  .#{$checkbox-el} {
+    padding: space(none);
+    align-self: center;
+  }
+}
+
+// ********************************************
+// FEATURE: WITH TOOLBAR
+.#{$data-grid} {
+  .toolbar-trigger-container {
+    z-index: 2;
+  }
+  .toolbar-trigger-container.move {
+    left: var(--toolbar-scroll);
+    position: absolute;
+    transform-style: preserve-3d;
+    background: white;
+  }
+  .toolbar-trigger-container.stay {
+    left: var(--toolbar-scroll-paginated);
+    position: absolute;
+    transform-style: preserve-3d;
+    background: white;
+  }
+  .toolbar-trigger {
+    order: 3;
+    span {
+      @include icon-color(color(neutral, 500));
+    }
+    border-left: 1px solid color(neutral, 100);
+    border-right: 1px solid color(neutral, 100);
+    background-color: white;
+  }
+  .#{$data-grid-body-row} {
+    &.with-datagrid-toolbar {
+      @include add-row-depth();
+    }
+    .#{$data-grid-body} {
+      // todo: look into this later, we should add specific class to differentiate the datagrid toolbar
+      // @at-root .#{$toolbar-component} {
+      //   height: $data-grid-cell-height;
+      //   border: border-size() color(neutral, 100);
+      // }
+      // this removes the toolbar when body is scrolling
+      &.scrolling {
+        .#{$overlay-component} {
+          opacity: 0;
+        }
+      }
+    }
+    .#{$toolbar-component} {
+      margin-right: space(xxs);
+    }
+  }
+}
+
+.#{$data-grid-body}__cell {
+  &:last-child {
+    // this takes care of the horizontal extra
+    // scroll when the grid has vertical scrollbar
+    min-width: 0px;
+  }
+}
+
+// ********************************************
+// FEATURE: FILTERABLE
+$filter-header-container: #{$data-grid}-filter-header;
+
+.#{$filter-header-container} {
+  cursor: pointer;
+  width: 100%;
+  @include adjust-to-container();
+
+  &__value {
+    align-items: center;
+    flex: 1 1 0%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    word-wrap: break-word;
+    width: 100%;
+    @include adjust-to-container();
+  }
+
+  &__button {
+    margin-left: space(xxs);
+    display: none;
+    opacity: 0;
+    transition: duration(fast) easing(base);
+  }
+  &:hover,
+  &--show-filter {
+    .#{$filter-header-container}__button {
+      display: block;
+      opacity: 1;
+    }
+  }
+}
+
+.filter-header-menu {
+  margin-top: space(xxs) * 1.5;
+  position: relative;
+  right: space(xs) * -1.1;
+  background: white;
+}
+
+// https://jira.elliemae.io/browse/PUI-5348
+.dg-single-filter .menu-component-internal-wrapper,
+.dg-multiple-filter .menu-component-internal-wrapper {
+  max-width: 100%;
+}
+
+// ********************************************
+// FEATURE: EDITABLE
+$editable-container: #{$data-grid}-edit;
+
+.#{$data-grid-body-cell} {
+  &.editable {
+    &:not(.customEditor) {
+      padding-right: 0;
+      padding-left: 0;
+    }
+    & > div {
+      @include body-text-style();
+      display: flex;
+      height: 100%;
+      padding-left: $data-grid-cell-horizontal-padding;
+      padding-right: $data-grid-cell-horizontal-padding;
+      word-break: break-all;
+      align-items: center;
+      flex: 1 1 0%;
+      @include ellipsis();
+
+      &:focus {
+        @include dsFocusAfter();
+      }
+
+      .cell-value {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        display: inline-block;
+        max-width: 100%;
+        width: 100%;
+      }
+
+      .empty-cell {
+        flex: 1 1 0%;
+      }
+
+      &:last-child {
+        position: relative;
+      }
+    }
+    cursor: text;
+
+    .edit-pencil {
+      display: none;
+      cursor: pointer;
+      visibility: hidden;
+      @include icon-color(color(neutral, 500));
+      margin-left: auto;
+    }
+
+    &:hover,
+    &:focus {
+      .#{$icon-el} {
+        display: block;
+        visibility: visible;
+      }
+      .edit-separator {
+        height: 28px;
+        position: relative;
+        right: -8px;
+        margin-bottom: -1px;
+        border-right: 1px solid color(neutral, 100);
+      }
+    }
+  }
+}
+
+// ********************************************
+// FEATURE: SORTABLE
+$sort-header-container: #{$data-grid}-sort-header;
+
+.#{$sort-header-container} {
+  cursor: pointer;
+  flex: 1 1 0%;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  @include adjust-to-container();
+
+  .header-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    word-wrap: break-word;
+    margin-right: space(xxs);
+    @include adjust-to-container();
+  }
+}
+
+// ********************************************
+// FEATURE: PAGINATION
+$btn-height-size: space(m) * 1.17; //28px
+
+$select-controller: #{$prefix}-selectbox;
+
+.#{$data-grid}__controls-pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: space(l);
+
+  .#{$select-container}__single-value {
+    @include body-text-style();
+    color: color(brand-primary, 600);
+  }
+
+  .per-page-dropdown {
+    width: space(xxl) * 2;
+  }
+}
+
+.#{$data-grid}__pagination {
+  .#{$data-grid}__pagify-pagination {
+    margin-left: space(s);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    .button-disabled {
+      span {
+        color: color(neutral, 400);
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+    span {
+      @include body-text-style(semibold);
+      color: color(brand-primary, 600);
+      background-color: color(neutral, 000);
+      border: $border-type color(neutral, 400);
+      display: inline-flex;
+      box-sizing: border-box;
+      padding: space(xxs) space(xs);
+      align-items: center;
+      height: $btn-height-size;
+      min-width: space(m);
+      line-height: $btn-height-size;
+      border-radius: $data-grid-input-border-radius;
+      margin-right: space(xxs);
+      cursor: pointer;
+
+      &:hover:not([disabled]) {
+        border: $border-type color(brand-primary, 500);
+      }
+
+      &:active {
+        color: color(brand-primary, 700);
+        border: $border-type color(brand-primary, 700);
+      }
+    }
+
+    div:first-child {
+      margin-right: space(xxs) * 1.2;
+    }
+    div:last-child {
+      margin-left: space(xxs) * 1.2;
+    }
+
+    .selected {
+      span {
+        color: color(neutral, 000);
+        background-color: color(brand-primary, 600);
+        border: $border-type color(brand-primary, 700);
+
+        &:hover:not([disabled]) {
+          background-color: color(brand-primary, 500);
+        }
+
+        &:active {
+          background-color: color(brand-primary, 700);
+        }
+      }
+    }
+
+    .ellipsis {
+      margin-right: space(xs);
+    }
+  }
+}
+
+// ********************************************
+// FEATURE: RESIZEBLE
+.#{$data-grid-header}__cell {
+  .resize-container {
+    width: 100%;
+    position: relative;
+    @include adjust-to-container();
+  }
+  .resize-value,
+  .row-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    word-wrap: break-word;
+    width: 100%;
+  }
+
+  .resize-value {
+    @include adjust-to-container();
+  }
+
+  .resize-handle {
+    cursor: col-resize;
+    position: absolute;
+    right: space(xs) * -2;
+    z-index: 100;
+    width: 10px;
+    height: 100%;
+  }
+
+  .filter-header-menu {
+    margin-top: space(xxs) * 1.3;
+    margin-left: space(xxs) * -0.5;
+    margin-right: space(xs) * -0.9;
+    min-width: space(xxl) * 2 !important; // this really need to be !important
+  }
+}
+
+// *********************************************
+// TREE FEATURE
+.#{$data-grid} {
+  .#{$data-grid-body-cell} {
+    .has-children {
+      width: 100%;
+      display: flex;
+      > div {
+        width: calc(100% - #{space(s)});
+      }
+    }
+    // from Reactabular
+    .show-more:after {
+      cursor: pointer;
+      padding-right: 0.5em;
+      content: "\25B8";
+      font-size: large;
+    }
+
+    // from Reactabular
+    .show-less:after {
+      cursor: pointer;
+      padding-right: 0.5em;
+      content: "\25BE";
+      font-size: large;
+    }
+  }
+}
+
+// *********************************************
+// OTHERS
+// TODO: order this
+
+// from Reactabular
+.visibility-container {
+  min-height: space(l);
+  max-width: space(xxl) * 8;
+  display: flex;
+  justify-content: space-between;
+
+  span {
+    @include body-text-style(semibold);
+    margin-right: space(xs);
+  }
+}
+
+.#{$data-grid}__controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: space(xs);
+
+  .#{$data-grid}__per-page-container {
+    margin-left: space(none);
+    display: flex;
+    align-items: center;
+
+    span {
+      margin-right: space(xs);
+      @include body-text-style(semibold);
+    }
+    .#{$input-control} {
+      width: space(xxl);
+    }
+  }
+}
+
+// *********************************************
+// EXPANDABLE GRID FEATURE
+// *********************************************
+// EXPANDABLE GRID FEATURE
+$data-grid-expandable-column: #{$prefix}-data-grid-expandable-column;
+$data-expandable-details-wrapper: #{$prefix}-data-grid-expandable-column-details-wrapper;
+$data-expandable-master-wrapper: #{$prefix}-data-grid-expandable-column-master-wrapper;
+$datagrid-expanded-row: #{$prefix}-data-grid-expanded-row;
+$data-grid-expanded-row-details-wrapper: #{$prefix}-data-grid-expanded-row-details-wrapper;
+
+.#{$data-grid-expandable-column} {
+  width: 100%;
+  height: 100%;
+
+  &__label-description-wrapper {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    flex: 5;
+  }
+  &__label {
+    @include body-text-style(semibold);
+    color: $text-color;
+  }
+  &__description {
+    @include body-micro-text-style();
+  }
+
+  &__extra-column-data {
+    flex: 2;
+  }
+}
+.#{$data-expandable-details-wrapper} {
+  margin-top: space(xs);
+  padding-left: space(s);
+  overflow-y: hidden;
+  flex: 1 1 0%;
+}
+.#{$data-expandable-master-wrapper} {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.#{$data-grid-body}.expandable {
+  .expandable-arrow {
+    margin-right: space(xxs);
+    span {
+      @include icon-color(color(brand-primary, 800));
+    }
+  }
+  .#{$data-grid-expanded-row-details-wrapper} {
+    flex: 1 1 0%;
+    overflow: hidden;
+    padding: space(xs);
+  }
+
+  .#{$data-grid-body-row} {
+    min-height: $data-grid-cell-height;
+    transition: height duration(slow) easing(base),
+      top duration(slow) easing(base), box-shadow duration(fast) easing(base);
+  }
+
+  .#{$data-grid-body-row}.expanded-detail-row {
+    flex-direction: column;
+
+    .#{$data-grid-body-row}.master-row-expanded {
+      border: none;
+      transition: none;
+      box-shadow: none;
+      margin: 0;
+      max-width: initial;
+    }
+  }
+  .#{$data-grid-body-row}.expanded {
+    @include add-row-depth();
+    width: auto;
+
+    .#{$data-grid-body} {
+      overflow: hidden;
+      .virtualized-body {
+        overflow: hidden !important; // this needs to force the inline style added from the library
+      }
+    }
+
+    .#{$dsseparator} {
+      margin: 0;
+      position: relative;
+      left: -5px;
+    }
+  }
+
+  .expandable-row {
+    .#{$data-grid} {
+      margin-left: -4px;
+      min-height: 0;
+    }
+  }
+
+  .expandable-row:not(.expanded) {
+    background-color: color(neutral, 050);
+    > .#{$data-grid-body-cell} {
+      background-color: color(neutral, 050);
+    }
+  }
+}
+
+_:-ms-fullscreen,
+:root
+  .#{$data-grid-body}.expandable
+  .#{$data-grid-expanded-row-details-wrapper}--ie-flex-basis-auto {
+  flex-basis: auto;
+}
+
+$visibility-container: #{$prefix}-columns-visibility-options;
+
+.#{$visibility-container} {
+  display: flex;
+  flex-direction: column;
+  padding: space(xxs) space(s);
+
+  &__title-section {
+    @include body-text-style();
+    margin-bottom: space(xs) * 1.2;
+  }
+
+  &__columns-group {
+    .column-checkbox {
+      padding-bottom: 0;
+    }
+    div:not(:last-child) {
+      .column-checkbox {
+        padding-bottom: space(xs) * 1.5;
+      }
+    }
+  }
+}
+
+.window-scroller-override {
+  height: 100% !important;
+  will-change: initial !important;
+}
+
+$icon-column-cell: #{$prefix}-icon-column-cell;
+
+.#{$icon-column-cell} {
+  display: grid;
+  gap: space(xs);
+  grid-template-columns: auto auto;
+}
+
+$intent-colors: (
+  "success": color("success", 900),
+  "danger": color("danger", 900),
+  "warning": color("warning", 900),
+  "info": color("brand-primary", 600),
+);
+
+.icon-column-cell {
+  .#{$button} {
+    padding: 0;
+  }
+}
+
+@each $intent, $color in $intent-colors {
+  .#{icc}-#{$intent} {
+    color: $color;
+  }
+}
+
+@import "./plugins/grouping-grid/GroupingPlugin.scss";