@carbon/ibm-products 2.10.1 → 2.11.0

package/css/index-without-carbon.css

@@ -2048,6 +2048,7 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--action-set.cds--btn-set.c4p--action-set--xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
 .c4p--action-set.cds--btn-set.c4p--action-set--2xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
 .c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) {
+  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
   max-width: 14.5rem;
   flex: 0 1 25%;
 }
@@ -5162,7 +5163,8 @@ c4p--card__icon:active {
 .c4p--filter-summary {
   display: flex;
   width: 100%;
-  height: rem(48px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  height: to-rem(48px);
   align-items: center;
   padding: 0.5rem;
   border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
@@ -11314,10 +11316,10 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-bottom: 0.125rem;
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--short .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--sm .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--md .c4p--datagrid__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);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  padding-top: to-rem(7px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  padding-bottom: to-rem(6px);
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--tall .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--xl .c4p--datagrid__cell {
   padding-top: 1rem;
@@ -11330,8 +11332,8 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-top: 1rem;
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--tall .cds--table-column-checkbox, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--lg .cds--table-column-checkbox, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--xl .cds--table-column-checkbox {
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  padding-top: rem(13px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  padding-top: to-rem(13px);
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--tall .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--xl .c4p--datagrid__cell {
   padding-bottom: 1rem;
@@ -11462,6 +11464,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--datagrid__empty-state .c4p--datagrid__table-simple tr:hover td {
+  border-bottom: none;
   background: transparent;
 }
 
@@ -11473,6 +11476,10 @@ button.c4p--add-select__global-filter-toggle--open {
   flex: 1 1 auto;
 }
 
+.c4p--datagrid__empty-state .c4p--datagrid__empty-state-cell {
+  border-bottom: none;
+}
+
 .c4p--datagrid__resizer {
   position: absolute;
   z-index: 1;
@@ -12219,6 +12226,7 @@ button.c4p--add-select__global-filter-toggle--open {
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
+/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
 .c4p--datagrid-filter-flyout__container {
   position: relative;
 }
@@ -12228,8 +12236,10 @@ button.c4p--add-select__global-filter-toggle--open {
   top: 3rem;
   right: 0;
   display: none;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   width: 40.125rem;
   background-color: var(--cds-layer-02, #ffffff);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
 }
 
@@ -12238,11 +12248,14 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--datagrid-filter-flyout--batch {
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   min-height: 21.625rem;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   grid-template-rows: 1fr 3rem;
 }
 
 .c4p--datagrid-filter-flyout--instant {
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   min-height: 17.625rem;
   grid-template-rows: 1fr;
 }
@@ -12253,10 +12266,13 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .c4p--datagrid-filter-flyout__inner-container::before {
   position: absolute;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   top: -0.4375rem;
   right: 1px;
   display: block;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   width: 2.875rem;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   height: 0.9375rem;
   background-color: var(--cds-layer-02, #ffffff);
   content: "";
@@ -12273,6 +12289,7 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .c4p--datagrid-filter-flyout__filters {
   display: grid;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   gap: 1rem 2rem;
   grid-template-columns: 1fr 1fr;
 }
@@ -12287,6 +12304,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
   position: relative;
   background-color: var(--cds-layer-02, #ffffff);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 0, 0.25);
 }
 
@@ -12303,7 +12321,8 @@ button.c4p--add-select__global-filter-toggle--open {
 */
 .c4p--datagrid-filter-panel__container {
   position: relative;
-  width: rem(320px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  width: to-rem(320px);
   height: clamp(var(--filter-panel-min-height), 100%, 100vh);
   border-top: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
   background-color: var(--cds-layer-01, #f4f4f4);
@@ -12318,7 +12337,8 @@ button.c4p--add-select__global-filter-toggle--open {
   top: -1px;
   left: 0;
   display: block;
-  width: rem(47px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  width: to-rem(47px);
   height: 1px;
   background-color: var(--cds-layer-01, #f4f4f4);
   content: "";
@@ -12385,7 +12405,8 @@ button.c4p--add-select__global-filter-toggle--open {
   position: sticky;
   z-index: 1;
   bottom: 0;
-  height: rem(64px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  height: to-rem(64px);
   margin-top: auto;
 }
 
@@ -12482,6 +12503,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   width: 2rem;
   height: 2rem;
   min-height: 2rem;
+  align-items: center;
   justify-content: center;
   padding: 0;
 }
@@ -12489,11 +12511,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
   fill: var(--cds-layer-selected-inverse, #161616);
 }
 
+.c4p--datagrid .cds--data-table tbody tr:hover + .c4p--datagrid__expanded-row,
+.c4p--datagrid .c4p--datagrid__expanded-row:hover,
+.c4p--datagrid .c4p--datagrid__expandable-row--hover td {
+  background: var(--cds-layer-hover);
+}
+
 .c4p--datagrid__draggable-handleStyle {
   display: flex;
   align-items: center;
   margin-right: 0.5rem;
-  cursor: grab;
 }
 
 .c4p--datagrid__draggable-handleStyle.disabled {
@@ -12504,32 +12531,55 @@ th.c4p--datagrid__select-all-toggle-on.button {
   fill: var(--cds-icon-on-color-disabled, #8d8d8d);
 }
 
+.c4p--datagrid__draggable-underlay {
+  position: absolute;
+  width: 100%;
+}
+
+.c4p--datagrid__draggable-underlay-item {
+  width: 100%;
+  height: 3rem;
+  border: 2px dashed var(--cds-focus, #0f62fe);
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  background-color: #edf5ff;
+}
+
 .c4p--datagrid__draggable-handleHolder {
+  position: relative;
   display: flex;
   height: 3rem;
   border-bottom: 1px solid var(--cds-layer-active);
   background-color: var(--cds-layer);
+  cursor: grab;
 }
 
 .c4p--datagrid__draggable-handleHolder:hover {
   background-color: var(--cds-layer-hover);
 }
 
-.c4p--datagrid__draggable-handleHolder-selected {
-  display: flex;
-  height: 3rem;
-  border-bottom: 1px solid var(--cds-layer-active);
+.c4p--datagrid__draggable-handleHolder:focus {
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
+  outline: none;
+}
+
+.c4p--datagrid__draggable-handleHolder--selected {
   background-color: var(--cds-layer-selected);
 }
 
-.c4p--datagrid__draggable-handleHolder-selected:hover {
-  background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
+.c4p--datagrid__draggable-handleHolder--dragging {
+  z-index: 2;
+  background-color: var(--cds-highlight, #d0e2ff);
+  color: var(--cds-text-primary, #161616);
+  outline: none;
 }
 
-.c4p--datagrid__draggable-handleHolder-isOver {
-  border: 2px dashed var(--cds-focus, #0f62fe);
-  /* stylelint-disable-next-line carbon/theme-token-use */
-  background-color: #edf5ff;
+.c4p--datagrid__draggable-handleHolder:active,
+.c4p--datagrid__draggable-handleHolder--dragging {
+  cursor: grabbing;
+}
+
+.c4p--datagrid__draggable-handleHolder-selected:hover {
+  background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
 }
 
 .c4p--datagrid__draggable-handleHolder-droppable {
@@ -12547,11 +12597,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
   transition: opacity 150ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 
-.c4p--datagrid__draggable-handleHolder-grabbed {
-  background-color: var(--cds-highlight, #d0e2ff);
-  color: var(--cds-text-primary, #161616);
-}
-
 .c4p--datagrid__draggable-handleHolder--sticky {
   color: var(--cds-text-on-color-disabled, #8d8d8d);
 }
@@ -15311,6 +15356,7 @@ a.cds--side-nav__link--current::before {
 .c4p--action-set.cds--btn-set.c4p--action-set--xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
 .c4p--action-set.cds--btn-set.c4p--action-set--2xl .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost),
 .c4p--action-set.cds--btn-set.c4p--action-set--row-quadruple .c4p--action-set__action-button:not(.c4p--action-set__action-button--ghost) {
+  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
   max-width: 14.5rem;
   flex: 0 1 25%;
 }