@elliemae/ds-basic 3.50.1-next.8 → 3.51.0-beta.1

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-datagrids/DataGrids.scss

@@ -1,992 +0,0 @@
-// ********************************************
-// 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: flex;
-        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';