@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.31

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -1,532 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020 - 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/react/scss/components/button/tokens' as *;
-@use '../../../global/styles/project-settings' as c4p-settings;
-@use './variables' as *;
-
-.#{$block-class}__table-toolbar > section {
-  z-index: 2;
-  overflow: visible; // RowSizeDropdown depend on this
-}
-
-.#{$block-class}__full-height,
-.#{$block-class}__full-height table,
-.#{$block-class}__full-height tbody {
-  height: 100%;
-}
-
-.#{$block-class}__grid-container::-webkit-scrollbar-thumb {
-  background-color: $text-placeholder;
-}
-
-.#{$block-class}__grid-container table {
-  /* Removes additional scroll introduced by Carbon table */
-  overflow: hidden;
-
-  &.#{$block-class}__vertical-align-center {
-    .#{$block-class}__head {
-      .#{c4p-settings.$carbon-prefix}--table-header-label {
-        display: flex;
-        height: 100%;
-        align-items: center;
-        color: $text-primary;
-      }
-      .#{$block-class}__head-select-all.#{$block-class}__checkbox-cell.#{$block-class}__checkbox-cell-sticky-left {
-        position: sticky;
-        z-index: 1;
-        left: 0;
-      }
-    }
-
-    .#{$block-class}__cell {
-      align-items: center;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    td.#{c4p-settings.$carbon-prefix}--table-column-checkbox,
-    th.#{c4p-settings.$carbon-prefix}--table-column-checkbox {
-      /* stylelint-disable-next-line carbon/layout-token-use */
-      padding-top: 0.6875rem;
-
-      &.#{$block-class}__checkbox-cell {
-        display: flex;
-        align-items: center;
-        padding-top: 0;
-      }
-      &.#{$block-class}__checkbox-cell-sticky-left {
-        position: sticky;
-        left: 0;
-      }
-    }
-
-    .#{$block-class}__checkbox-cell {
-      th.#{c4p-settings.$carbon-prefix}--table-column-checkbox {
-        display: flex;
-        height: 100%;
-        align-items: center;
-        padding-top: 0;
-      }
-    }
-
-    &.#{$block-class}__variable-row-height {
-      &.#{c4p-settings.$carbon-prefix}--data-table--compact,
-      &.#{c4p-settings.$carbon-prefix}--data-table--xs {
-        .#{$block-class}__cell {
-          padding-top: $spacing-01;
-          padding-bottom: $spacing-01;
-        }
-      }
-
-      &.#{c4p-settings.$carbon-prefix}--data-table--short,
-      &.#{c4p-settings.$carbon-prefix}--data-table--sm,
-      &.#{c4p-settings.$carbon-prefix}--data-table--md {
-        .#{$block-class}__cell {
-          /* stylelint-disable-next-line carbon/layout-token-use */
-          padding-top: rem(7px);
-          /* stylelint-disable-next-line carbon/layout-token-use */
-          padding-bottom: rem(6px);
-        }
-      }
-
-      &.#{c4p-settings.$carbon-prefix}--data-table--tall,
-      &.#{c4p-settings.$carbon-prefix}--data-table--lg,
-      &.#{c4p-settings.$carbon-prefix}--data-table--xl {
-        .#{$block-class}__cell {
-          padding-top: $spacing-05;
-          padding-bottom: $spacing-05;
-        }
-      }
-    }
-  }
-
-  &.#{$block-class}__vertical-align-top {
-    &.#{c4p-settings.$carbon-prefix}--data-table--tall,
-    &.#{c4p-settings.$carbon-prefix}--data-table--lg,
-    &.#{c4p-settings.$carbon-prefix}--data-table--xl {
-      .#{$block-class}__cell {
-        padding-top: $spacing-05;
-      }
-
-      .#{c4p-settings.$carbon-prefix}--table-header-label {
-        padding-top: $spacing-05;
-      }
-
-      .#{c4p-settings.$carbon-prefix}--table-column-checkbox {
-        /* stylelint-disable-next-line carbon/layout-token-use */
-        padding-top: rem(13px);
-      }
-    }
-
-    &.#{$block-class}__variable-row-height {
-      &.#{c4p-settings.$carbon-prefix}--data-table--tall,
-      &.#{c4p-settings.$carbon-prefix}--data-table--lg,
-      &.#{c4p-settings.$carbon-prefix}--data-table--xl {
-        .#{$block-class}__cell {
-          padding-bottom: $spacing-05;
-        }
-
-        .#{c4p-settings.$carbon-prefix}--table-header-label {
-          padding-bottom: $spacing-05;
-        }
-      }
-    }
-  }
-
-  &.#{$block-class}__variable-row-height {
-    tr.#{$block-class}__carbon-row {
-      height: auto;
-    }
-  }
-}
-.#{$block-class}__grid-container::-webkit-scrollbar-thumb {
-  background-color: $text-placeholder;
-}
-
-.#{$block-class}__grid-container::-webkit-scrollbar {
-  width: 6px;
-  background-color: $background;
-}
-.#{$block-class}__grid-container {
-  display: block;
-  width: 100%;
-  padding-top: 0;
-
-  .#{c4p-settings.$carbon-prefix}--data-table-content {
-    width: 100%;
-    height: 100%;
-    overflow-x: auto;
-  }
-
-  table.#{$block-class}__table-simple {
-    display: flex;
-    overflow: auto;
-    max-height: 100%;
-    flex-direction: column;
-    background-color: $layer-01;
-  }
-
-  .#{$block-class}__head {
-    display: flex;
-  }
-
-  .#{$block-class}__head .header {
-    /* Each cell should grow equally */
-    width: 1%;
-    align-items: center;
-  }
-
-  .#{$block-class}__virtual-scrollbar {
-    //makes thin scrollbar in chrome and firefox
-    scrollbar-width: thin;
-  }
-
-  .#{$block-class}__virtual-scrollbar::-webkit-scrollbar-thumb {
-    background-color: $text-placeholder;
-  }
-
-  .#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
-    width: 6px;
-    background-color: $background;
-  }
-
-  .#{$block-class}__cell {
-    display: flex;
-    /* Each cell should grow equally */
-    width: 1%;
-  }
-
-  .#{$block-class}__defaultStringRenderer {
-    overflow: hidden;
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--multiline {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    white-space: initial;
-  }
-
-  .#{$block-class}__expanded-row {
-    display: flex;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-  }
-
-  .#{$block-class}__carbon-row {
-    /* stylelint-disable-next-line declaration-no-important */
-    flex: none !important;
-
-    .#{$block-class}__carbon-row:hover a {
-      /* stylelint-disable-next-line declaration-no-important */
-      color: $link-primary-hover !important;
-    }
-  }
-
-  .#{c4p-settings.$carbon-prefix}--select-input {
-    -webkit-appearance: none; // could be fixed by post-css plugin
-  }
-
-  th.#{c4p-settings.$carbon-prefix}--table-column-checkbox {
-    display: block;
-  }
-
-  td.#{c4p-settings.$carbon-prefix}--table-column-checkbox,
-  th.#{c4p-settings.$carbon-prefix}--table-column-checkbox {
-    /* stylelint-disable-next-line declaration-no-important */
-    padding-right: $spacing-06 !important;
-  }
-}
-
-.#{$block-class}__empty-state .#{$block-class}__table-simple {
-  display: table;
-  height: 100%;
-
-  .#{c4p-settings.$pkg-prefix}--empty-state {
-    max-width: 280px;
-  }
-}
-
-.#{$block-class}__empty-state .#{$block-class}__table-simple tr:hover {
-  background: transparent;
-}
-
-.#{$block-class}__empty-state .#{$block-class}__table-simple tr:hover td {
-  background: transparent;
-}
-
-.#{$block-class}__empty-state .#{$block-class}__table-simple td {
-  padding: $spacing-11;
-}
-
-.#{$block-class}__empty-state .#{$block-class}__grid-container {
-  flex: 1 1 auto;
-}
-
-.#{$block-class}__resizer {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  display: inline-block;
-  width: $spacing-02;
-  height: 100%;
-  background: transparent;
-  touch-action: none;
-  transform: translateX(50%);
-}
-
-.#{$block-class}__resizer:hover {
-  background: transparent;
-}
-
-.#{$block-class}__sortableColumn:hover {
-  background-color: $background-selected-hover;
-}
-
-.#{$block-class}__resizableColumn {
-  &.#{$block-class}__isResizing {
-    .#{$block-class}__resizer {
-      border-right: $spacing-01 solid $button-secondary-hover;
-    }
-  }
-
-  &.#{$block-class}__isSorted {
-    background-color: $background-selected-hover;
-  }
-}
-
-.#{$block-class}__resizableColumn:hover {
-  background-color: $background-selected-hover;
-  .#{$block-class}__resizer {
-    border-right: $spacing-01 solid $border-strong-01;
-    background-color: $background-selected-hover;
-  }
-}
-
-.#{$block-class}__head-hidden-select-all {
-  padding-right: $spacing-08;
-  &.#{$block-class}__select-all-sticky-left {
-    position: sticky;
-    z-index: 1;
-    left: 0;
-    background-color: $layer-accent-01;
-  }
-}
-
-.#{$block-class}__simple-body {
-  position: relative;
-  display: table;
-  overflow-x: hidden;
-  overflow-y: auto;
-  //makes thin scrollbar in chrome and firefox
-  scrollbar-width: thin;
-}
-
-.#{$block-class}__simple-body::-webkit-scrollbar-thumb {
-  background-color: $text-placeholder;
-}
-
-.#{$block-class}__simple-body::-webkit-scrollbar {
-  width: 6px;
-  background-color: $background;
-}
-
-.#{$block-class}__sticky.#{$block-class}__table-simple {
-  /* stylelint-disable-next-line declaration-no-important */
-  min-width: 0 !important;
-}
-
-.#{$block-class}__sticky.#{$block-class}__simple-body {
-  overflow: auto;
-}
-
-.#{$block-class}__sticky.#{$block-class}__table-simple thead > div {
-  overflow: hidden;
-  /* stylelint-disable-next-line declaration-no-important */
-  width: 100% !important;
-}
-
-.#{$block-class}__displayFlex {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-}
-
-.#{$block-class}__datagridLeftPanel {
-  display: flex;
-  width: 388px; // as per UX specs.
-  background-color: $layer-01;
-}
-
-.#{$block-class}__leftPanel-position {
-  display: inherit;
-}
-
-.#{$block-class}__datagridWithPanel {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-
-  .#{$block-class}__grid-container {
-    display: flex;
-    overflow: hidden;
-    flex-direction: column;
-  }
-
-  .#{$block-class}__table-toolbar {
-    width: 100%;
-  }
-
-  .#{$block-class}__datagridLeftPanel {
-    flex: 0 0 auto;
-  }
-
-  .#{c4p-settings.$carbon-prefix}--data-table-content {
-    flex: 1 1 0%;
-  }
-  .#{$block-class}__table-container {
-    overflow: hidden;
-  }
-}
-
-.#{$block-class}__table-container {
-  position: relative;
-  display: flex;
-  overflow: auto;
-  width: 100%;
-  max-height: 100%;
-}
-
-.#{$block-class}__carbon-row-expanded {
-  // Border applied to nested rows only on open chevron hover
-  &.#{$block-class}__carbon-row-expanded-hover-active
-    ~ .#{$block-class}__carbon-nested-row {
-    border-left: 1px solid $button-primary;
-  }
-}
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--data-table-header {
-  background: transparent;
-}
-
-.#{$block-class}__dense-header {
-  display: flex;
-  flex-wrap: wrap;
-
-  .#{c4p-settings.$carbon-prefix}--data-table-header {
-    flex: 1 1 auto;
-    padding-bottom: $spacing-05;
-  }
-
-  .#{$block-class}__table-toolbar {
-    flex: 0 0 auto;
-  }
-  .#{c4p-settings.$carbon-prefix}--table-toolbar {
-    background: transparent;
-  }
-
-  .#{c4p-settings.$carbon-prefix}__table-container {
-    flex: 1 1 100%;
-  }
-
-  .#{c4p-settings.$carbon-prefix}--table-toolbar {
-    padding-top: $spacing-07;
-  }
-
-  .#{$block-class}__toolbar-divider {
-    position: relative;
-  }
-
-  .#{$block-class}__toolbar-divider::before {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 1px;
-    height: $spacing-05;
-    border-left: 1px solid $border-subtle-01;
-    content: '';
-    transform: translateY(-50%);
-  }
-}
-
-.#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row) {
-  position: relative;
-}
-
-.#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
-  position: absolute;
-  left: 0;
-  width: $spacing-02;
-  height: 100%;
-  background-color: $background-brand;
-  content: '';
-}
-
-.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
-  .#{c4p-settings.$carbon-prefix}--batch-summary__para {
-  white-space: nowrap;
-}
-
-.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
-  .#{c4p-settings.$carbon-prefix}--batch-actions
-  .#{c4p-settings.$carbon-prefix}--batch-actions--active {
-  overflow-x: hidden;
-}
-
-.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
-  .#{c4p-settings.$pkg-prefix}--datagrid__button-menu--icon-only.#{c4p-settings.$pkg-prefix}--button-menu {
-  display: flex;
-  min-width: $spacing-08;
-  justify-content: center;
-  margin-right: $spacing-04;
-}
-
-.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
-  .#{c4p-settings.$pkg-prefix}--datagrid__button-menu {
-  min-width: calc(#{$spacing-12} + #{$spacing-03});
-}
-
-.#{c4p-settings.$pkg-prefix}--datagrid__table-toolbar
-  .#{c4p-settings.$pkg-prefix}--datagrid__button-menu--icon-only.#{c4p-settings.$pkg-prefix}--button-menu
-  .#{c4p-settings.$pkg-prefix}--button-menu__trigger {
-  display: flex;
-  width: 100%;
-  min-width: $spacing-09;
-  justify-content: center;
-  padding: 0;
-  margin: 0;
-  .#{c4p-settings.$carbon-prefix}--btn__icon {
-    margin: 0;
-  }
-}
-
-.#{$block-class} .#{c4p-settings.$pkg-prefix}--button-menu {
-  height: $spacing-09;
-}
-
-.#{$block-class} .#{$block-class}__row-size-button {
-  display: flex;
-  width: $spacing-09;
-  height: $spacing-09;
-  justify-content: center;
-}

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -1,77 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2022
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use './variables';
-
-.#{variables.$block-class}__draggable-handleStyle {
-  display: flex;
-  align-items: center;
-  margin-right: $spacing-03;
-  cursor: grab;
-}
-
-.#{variables.$block-class}__draggable-handleStyle.disabled {
-  pointer-events: none;
-}
-
-svg.#{variables.$block-class}__draggable-handleStyle.disable {
-  fill: $icon-disabled;
-}
-
-.#{variables.$block-class}__draggable-handleHolder {
-  display: flex;
-  height: $spacing-09;
-  padding-left: $spacing-05;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer;
-}
-
-.#{variables.$block-class}__draggable-handleHolder:hover {
-  background-color: $layer-hover;
-}
-
-.#{variables.$block-class}__draggable-handleHolder-selected {
-  display: flex;
-  height: $spacing-09;
-  padding-left: $spacing-05;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer-selected;
-}
-
-.#{variables.$block-class}__draggable-handleHolder-selected:hover {
-  background-color: $layer-selected-hover-01;
-}
-
-.#{variables.$block-class}__draggable-handleHolder-isOver {
-  border: 2px dashed $focus;
-  background-color: $layer-selected-hover-01;
-}
-
-.#{variables.$block-class}__draggable-handleHolder-droppable {
-  display: flex;
-  width: 100%;
-}
-
-.#{variables.$block-class}__draggable-handleHolder-grabbed {
-  background-color: $highlight;
-  color: $text-primary;
-}
-
-.#{variables.$block-class}__shared-ui--assistive-text {
-  // hide the assistive text. can not use display: none which will also hide from ARIA
-  position: absolute;
-  overflow: hidden;
-  width: 0;
-  height: 0;
-  padding: 0;
-  border: 0;
-  clip: rect(0 0 0 0);
-  text-transform: none;
-  white-space: nowrap;
-}

package/scss/components/Datagrid/styles/_index.scss

@@ -1,21 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020, 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-@use './datagrid';
-@use './useNestedRows';
-@use './useNestedTable';
-@use './useSortableColumns';
-@use './useColumnRightAlign';
-@use './useColumnCenterAlign';
-@use './useStickyColumn';
-@use './useActionsColumn';
-@use './addons/CustomizeColumnsModal';
-@use './addons/RowSizeDropdown';
-@use './useSelectAllToggle';
-@use './useExpandedRow';
-@use './draggableElement';
-@use './useInlineEdit';

package/scss/components/Datagrid/styles/_useActionsColumn.scss

@@ -1,39 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme';
-@use './variables';
-
-.#{variables.$block-class}__actions-column-cell {
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-}
-
-.#{variables.$block-class}__actions-column-content {
-  display: flex;
-  justify-content: center;
-}
-
-.#{variables.$block-class}__actions-column-loading {
-  margin-bottom: $spacing-03;
-}
-
-.#{variables.$block-class}
-  .#{variables.$block-class}__disabled-row-action-button {
-  cursor: not-allowed;
-}
-
-.#{variables.$block-class} .#{variables.$block-class}__disabled-row-action {
-  pointer-events: none;
-}
-
-.#{variables.$block-class} .#{variables.$block-class}__disabled-row-action svg {
-  fill: theme.$layer-selected-disabled;
-}

package/scss/components/Datagrid/styles/_useColumnCenterAlign.scss

@@ -1,20 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use '../../../global/styles/project-settings';
-
-$block-class: #{project-settings.$pkg-prefix}--datagrid;
-.#{$block-class}__center-align-header {
-  width: 100%;
-  text-align: center;
-}
-
-.#{$block-class}__center-align-cell-renderer.sortDisabled {
-  margin-right: auto;
-  margin-left: auto;
-}

package/scss/components/Datagrid/styles/_useColumnRightAlign.scss

@@ -1,29 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@use './variables';
-
-.#{variables.$block-class}__right-align-header {
-  width: 100%;
-  text-align: right;
-}
-
-.#{variables.$block-class}__right-align-header button {
-  text-align: right;
-}
-
-.#{variables.$block-class}__right-align-cell-renderer {
-  width: 100%;
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  padding-right: 23px;
-  text-align: right;
-}
-
-.#{variables.$block-class}__right-align-cell-renderer.sortDisabled {
-  padding-right: 0;
-}