@skyux/ag-grid 5.0.0 → 5.1.1

package/src/styles/ag-grid-styles.scss

@@ -1,544 +0,0 @@
-@import "~@skyux/theme/scss/mixins";
-@import "~@skyux/theme/scss/_compat/mixins";
-@import "~@skyux/theme/scss/variables";
-@import "~ag-grid-community/src/styles/ag-grid.scss";
-@import "~ag-grid-community/src/styles/ag-theme-base/sass/ag-theme-base-mixin.scss";
-
-$sky-standard-border: 1px solid $sky-border-color-neutral-medium;
-$sky-standard-border-theme-modern: 1px solid $sky-theme-modern-border-color-neutral-medium;
-
-ag-grid-angular:not(.sky-ag-grid-editable) {
-  @include ag-theme-base((
-    background-color: $sky-color-gray-01,
-    border-color: $sky-border-color-neutral-medium,
-    borders: true,
-    cell-horizontal-padding: 12,
-    font-family: $sky-font-family,
-    font-size: 15px,
-    foreground-color: $sky-text-color-default,
-    header-background-color: $sky-background-color-page-default,
-    header-column-separator: true,
-    header-column-separator-color: $sky-border-color-neutral-medium,
-    header-height: 38px,
-    input-focus-border-color: $sky-highlight-color-info,
-    odd-row-background-color: $sky-background-color-page-default,
-    row-border-color: $sky-border-color-neutral-medium,
-    row-height: 38px,
-    row-hover-color: darken($sky-background-color-selected, 10%),
-    range-selection-border-color: $sky-highlight-color-info,
-    secondary-foreground-color: $sky-text-color-deemphasized,
-    selected-row-background-color: $sky-background-color-selected
-  ));
-
-  border-top: $sky-standard-border;
-
-  .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
-    align-items: flex-start;
-  }
-
-  .ag-cell.ag-cell-wrap-text {
-    min-height: ag-param(row-height) - 2px;
-    line-height: $sky-line-height-base;
-    padding-top: 7px;
-    padding-bottom: 7px;
-  }
-
-  .ag-cell.sky-ag-grid-cell-invalid {
-    border: 1px solid $sky-highlight-color-danger
-  }
-
-  .ag-root-wrapper {
-    border: none;
-  }
-
-  .ag-row:not(.ag-row-first) {
-    border-top: none;
-  }
-
-  .ag-row {
-    border-bottom-style: dotted;
-
-    + .ag-row-last {
-      border-bottom-style: dotted;
-    }
-  }
-}
-
-ag-grid-angular.sky-ag-grid-editable {
-  @include ag-theme-base((
-    border-color: $sky-border-color-neutral-medium,
-    borders: true,
-    cell-horizontal-border: solid $sky-border-color-neutral-medium,
-    cell-horizontal-padding: 11,
-    font-family: $sky-font-family,
-    font-size: 15px,
-    foreground-color: $sky-text-color-default,
-    header-background-color: $sky-background-color-page-default,
-    header-column-separator: true,
-    header-column-separator-color: $sky-border-color-neutral-medium,
-    header-height: 38px,
-    input-focus-border-color: $sky-highlight-color-info,
-    popup-shadow: none,
-    row-border-color: $sky-border-color-neutral-medium,
-    row-height: 38px,
-    range-selection-border-color: $sky-highlight-color-info,
-    secondary-foreground-color: $sky-text-color-deemphasized
-  ));
-
-  .ag-root-wrapper {
-    border: none;
-  }
-
-  border-left: $sky-standard-border;
-
-  .ag-row:not(.ag-row-first) {
-    border-top: none;
-  }
-
-  .ag-row {
-    border-bottom-style: solid;
-
-    &.ag-row-focus {
-      z-index: 1;
-
-      .ag-cell-focus {
-        z-index: 1;
-      }
-    }
-  }
-
-  .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
-    align-items: flex-start;
-  }
-
-  .ag-cell {
-    border-block-end: none;
-    border-block-start: none;
-  }
-
-  .ag-cell.sky-ag-grid-cell-invalid {
-    border: 1px solid $sky-highlight-color-danger
-  }
-
-  .sky-ag-grid-cell-editable {
-    background-color: $sky-background-color-page-default;
-
-    .ag-select {
-      .ag-picker-field-display {
-        margin-top: 2px;
-        margin-left: 9px;
-      }
-    }
-  }
-
-  .sky-ag-grid-cell-uneditable {
-    background-color: $sky-background-color-neutral-light;
-  }
-
-  .ag-popup {
-    .ag-popup-editor {
-      border: none;
-    }
-
-    .ag-select-list {
-      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
-
-      .ag-select-list-item {
-        cursor: pointer;
-        padding-top: 5px;
-        padding-bottom: 5px;
-        height: 30px;
-
-        &:last-of-type {
-          padding-bottom: 10px;
-          height: 35px;
-        }
-
-        &:hover {
-          background-color: $sky-background-color-selected;
-        }
-      }
-    }
-  }
-
-  .ag-picker-field-wrapper {
-    border-radius: 0;
-  }
-
-  /* fine tune focus cell borders */
-  .ag-row {
-    .ag-cell-focus {
-      line-height: ag-param(row-height) - 4;
-    }
-
-    .ag-cell-focus.ag-cell-inline-editing,
-    .ag-cell-focus.ag-cell-popup-editing {
-      height: ag-param(row-height) - 1;
-      @include sky-field-status(active)
-    }
-  }
-}
-
-// ag-grid only allows one theme include per root selector; adding this
-.sky-theme-modern:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) {
-  @include ag-theme-base((
-    border-color: $sky-theme-modern-border-color-neutral-medium,
-    borders: true,
-    cell-horizontal-padding: 12,
-    font-family: $sky-font-family,
-    font-size: 16px,
-    foreground-color: $sky-text-color-default,
-    header-background-color: $sky-theme-modern-background-color-page-default,
-    header-column-separator-color: $sky-theme-modern-border-color-neutral-medium,
-    header-height: 60px,
-    input-focus-border-color: $sky-theme-modern-border-color-primary-dark,
-    row-border-color: $sky-theme-modern-border-color-neutral-medium,
-    row-height: 60px,
-    range-selection-border-color: $sky-theme-modern-border-color-primary-dark,
-    secondary-foreground-color: $sky-theme-modern-font-deemphasized-color,
-    selected-row-background-color: $sky-background-color-selected
-  ));
-
-  .ag-header-cell-text {
-    text-transform: uppercase;
-  }
-
-  .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
-    align-items: flex-start;
-  }
-
-  // set 1px of top and bottom padding when a cell is not focused and remove it when it is focused to prevent the 2px border causing contents to shift
-  .ag-cell {
-    padding-top: 1px;
-    padding-bottom: 1px;
-  }
-
-  .ag-cell-focus {
-    border-width: 2px !important;
-    padding: 0 10px;
-  }
-
-  .ag-cell:hover {
-    border: 1px solid $sky-theme-modern-border-color-primary-dark;
-  }
-
-  .ag-cell.sky-ag-grid-cell-invalid {
-    border: 1px solid $sky-highlight-color-danger
-  }
-
-  .ag-cell.ag-cell-wrap-text {
-    min-height: ag-param(row-height) - 2px;
-    line-height: $sky-theme-modern-font-paragraph-line-height;
-    padding-top: 16px;
-    padding-bottom: 16px;
-  }
-
-  .ag-row:not(.ag-row-first) {
-    border-top: none;
-  }
-}
-
-.sky-theme-modern ag-grid-angular.sky-ag-grid-editable {
-  @include ag-theme-base((
-    border-color: $sky-theme-modern-border-color-neutral-medium,
-    borders: true,
-    cell-horizontal-border: solid $sky-theme-modern-border-color-neutral-medium,
-    cell-horizontal-padding: 12,
-    font-family: $sky-font-family,
-    font-size: 16px,
-    foreground-color: $sky-text-color-default,
-    header-background-color: $sky-theme-modern-background-color-page-default,
-    header-column-separator-color: $sky-theme-modern-border-color-neutral-medium,
-    header-height: 60px,
-    input-focus-border-color: $sky-theme-modern-border-color-primary-dark,
-    popup-shadow: none,
-    row-border-color: $sky-theme-modern-border-color-neutral-medium,
-    row-height: 60px,
-    range-selection-border-color: $sky-theme-modern-border-color-primary-dark,
-    secondary-foreground-color: $sky-theme-modern-font-deemphasized-color
-  ));
-
-  .ag-popup {
-    .ag-popup-editor {
-      border: none;
-    }
-
-    .ag-select-list {
-      box-shadow: $sky-theme-modern-elevation-4-shadow-size $sky-theme-modern-elevation-4-shadow-color;
-
-      .ag-select-list-item {
-        cursor: pointer;
-        border: 1px solid transparent;
-
-        &:hover {
-          background-color: transparent;
-          border-color: $sky-theme-modern-border-color-primary-dark;
-        }
-      }
-    }
-  }
-
-  border-top: $sky-standard-border;
-
-  .ag-header-cell-text {
-    font-weight: 700;
-  }
-
-  .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
-    align-items: flex-start;
-  }
-
-  // set 1px of top and bottom padding when a cell is not focused and remove it when it is focused to prevent the 2px border causing contents to shift
-  .ag-cell {
-    padding-top: 1px;
-    padding-bottom: 1px;
-    border-right-color: $sky-border-color-neutral-medium;
-  }
-
-  .ag-cell-focus {
-    border-width: 2px !important;
-    padding: 0 10px;
-  }
-
-  .ag-cell:hover {
-    border: 1px solid $sky-theme-modern-border-color-primary-dark;
-  }
-
-  .ag-cell.sky-ag-grid-cell-invalid {
-    border: 1px solid $sky-highlight-color-danger
-  }
-
-  .ag-row:not(.ag-row-first) {
-    border-top: none;
-  }
-
-  /* fine tune focus cell borders */
-  .ag-row {
-    &.ag-row-focus {
-      z-index: 1;
-    }
-
-    .ag-cell.ag-cell-focus {
-      line-height: ag-param(row-height) - 4;
-      z-index: 1;
-
-      &.ag-cell-inline-editing,
-      &.ag-cell-popup-editing {
-        height: ag-param(row-height) - 1;
-        padding-left: 0;
-        padding-right: 0;
-        border: 2px solid $sky-theme-modern-border-color-primary-dark;
-        box-shadow: none;
-      }
-
-      &.ag-cell-popup-editing {
-        border: none;
-      }
-
-      .ag-select {
-        .ag-picker-field-display {
-          margin-top: 6px;
-          margin-left: 9px;
-        }
-      }
-    }
-  }
-}
-
-// ag-grid only allows one theme include per root selector; adding this
-.sky-theme-modern.sky-theme-mode-dark:not(.the-editing-theme) ag-grid-angular:not(.sky-ag-grid-editable) {
-  @include ag-theme-base((
-    background-color: $sky-theme-modern-mode-dark-background-color-page-default,
-    border-color: $sky-theme-modern-mode-dark-border-color-neutral-medium,
-    borders: true,
-    cell-horizontal-padding: 12,
-    font-family: $sky-font-family,
-    font-size: 16px,
-    foreground-color: $sky-theme-modern-mode-dark-font-body-default-color,
-    header-background-color: $sky-theme-modern-mode-dark-background-color-page-default,
-    header-column-separator-color: $sky-theme-modern-mode-dark-border-color-neutral-medium,
-    header-height: 60px,
-    input-focus-border-color: $sky-theme-modern-mode-dark-background-color-primary-dark,
-    row-border-color: $sky-theme-modern-mode-dark-border-color-neutral-medium,
-    row-height: 60px,
-    range-selection-border-color: $sky-theme-modern-mode-dark-background-color-primary-dark,
-    secondary-foreground-color: $sky-theme-modern-mode-dark-font-deemphasized-color
-  ));
-
-  .ag-header-cell-text {
-    text-transform: uppercase;
-  }
-
-  .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
-    align-items: flex-start;
-  }
-
-  // set 1px of top and bottom padding when a cell is not focused and remove it when it is focused to prevent the 2px border causing contents to shift
-  .ag-cell {
-    padding-top: 1px;
-    padding-bottom: 1px;
-  }
-
-  .ag-cell-focus {
-    border-width: 2px !important;
-    padding: 0 10px;
-  }
-
-  .ag-cell:hover {
-    border: 1px solid $sky-theme-modern-mode-dark-background-color-primary-dark;
-  }
-
-  .ag-cell.sky-ag-grid-cell-invalid {
-    border: 1px solid $sky-highlight-color-danger
-  }
-
-  .ag-cell.ag-cell-wrap-text {
-    min-height: ag-param(row-height) - 2px;
-    line-height: $sky-theme-modern-font-paragraph-line-height;
-    padding-top: 16px;
-    padding-bottom: 16px;
-  }
-
-  .ag-row:not(.ag-row-first) {
-    border-top: none;
-  }
-}
-
-.sky-theme-modern.sky-theme-mode-dark ag-grid-angular.sky-ag-grid-editable {
-  @include ag-theme-base((
-    background-color: $sky-theme-modern-mode-dark-background-color-page-default,
-    border-color: $sky-theme-modern-mode-dark-border-color-neutral-medium,
-    borders: true,
-    cell-horizontal-border: solid $sky-theme-modern-mode-dark-border-color-neutral-medium,
-    cell-horizontal-padding: 12,
-    font-family: $sky-font-family,
-    font-size: 16px,
-    foreground-color: $sky-theme-modern-mode-dark-font-body-default-color,
-    header-background-color: $sky-theme-modern-mode-dark-background-color-page-default,
-    header-column-separator-color: $sky-theme-modern-mode-dark-border-color-neutral-medium,
-    header-height: 60px,
-    input-focus-border-color: $sky-theme-modern-mode-dark-background-color-primary-dark,
-    popup-shadow: none,
-    row-border-color: $sky-theme-modern-mode-dark-border-color-neutral-medium,
-    row-height: 60px,
-    range-selection-border-color: $sky-theme-modern-mode-dark-background-color-primary-dark,
-    secondary-foreground-color: $sky-theme-modern-mode-dark-font-deemphasized-color
-  ));
-
-  .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
-    align-items: flex-start;
-  }
-
-  // set 1px of top and bottom padding when a cell is not focused and remove it when it is focused to prevent the 2px border causing contents to shift
-  .ag-cell {
-    padding-top: 1px;
-    padding-bottom: 1px;
-    border-right-color: $sky-theme-modern-mode-dark-border-color-neutral-medium;
-  }
-
-  .ag-cell:hover {
-    border: 1px solid $sky-theme-modern-mode-dark-background-color-primary-dark;
-  }
-
-  .ag-cell.sky-ag-grid-cell-invalid {
-    border: 1px solid $sky-highlight-color-danger
-  }
-
-  .sky-ag-grid-cell-editable {
-    background-color: $sky-theme-modern-mode-dark-background-color-page-default;
-  }
-
-  .sky-ag-grid-cell-uneditable {
-    background-color: $sky-theme-modern-mode-dark-background-color-elevation-24;
-  }
-
-  input {
-    background-color: $sky-theme-modern-mode-dark-background-color-page-default;
-    color: $sky-theme-modern-mode-dark-font-body-default-color;
-  }
-
-  .ag-row:not(.ag-row-first) {
-    border-top: none;
-  }
-
-  .ag-row {
-    .ag-cell-focus {
-      &.ag-cell-inline-editing,
-      &.ag-cell-popup-editing {
-        border: 2px solid $sky-theme-modern-mode-dark-text-color-action-primary;
-      }
-    }
-  }
-
-  .ag-popup {
-    .ag-popup-editor {
-      border: none;
-    }
-
-    .ag-select-list {
-      .ag-select-list-item {
-        cursor: pointer;
-        padding-top: 5px;
-        padding-bottom: 5px;
-        height: 30px;
-
-        &:last-of-type {
-          padding-bottom: 10px;
-          height: 35px;
-        }
-      }
-    }
-  }
-}
-
-ag-grid-angular {
-  input:focus {
-    border: none;
-    outline: none;
-  }
-
-  input::-ms-clear {
-    display: none;
-  }
-
-  .sky-ag-grid-cell-number,
-  .sky-ag-grid-cell-currency {
-    text-align: right;
-    padding-right: 12px;
-  }
-
-  .sky-ag-grid-cell-row-selector {
-    text-overflow: clip;
-  }
-
-  .ag-header-cell-label {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-
-  .sky-ag-grid-header-right-aligned .ag-header-cell-label {
-    justify-content: flex-end;
-  }
-}
-
-.sky-theme-default sky-toolbar + sky-ag-grid-wrapper {
-  ag-grid-angular {
-    border-top: none !important;
-  }
-}
-
-.sky-theme-default .sky-ag-grid-row-delete .sky-btn {
-  padding: 4px 12px;
-}
-
-ag-grid-angular + sky-infinite-scroll {
-  .sky-infinite-scroll {
-    margin-top: 0 !important;
-  }
-}
-
-sky-ag-grid-wrapper + sky-infinite-scroll {
-  .sky-infinite-scroll {
-    margin-top: 0 !important;
-  }
-}