@carbon/ibm-products 1.59.0 → 1.60.0

package/css/index-full-carbon.css

@@ -10235,18 +10235,18 @@ a.bx--overflow-menu-options__btn::before {
 
 .bx--toggle__appearance {
   position: relative;
-  width: to-to-rem(48px);
-  height: to-to-rem(24px);
+  width: 3rem;
+  height: 1.5rem;
 }
 .bx--toggle__appearance::before {
   position: absolute;
   top: 0;
   display: block;
-  width: to-to-rem(48px);
-  height: to-to-rem(24px);
+  width: 3rem;
+  height: 1.5rem;
   box-sizing: border-box;
   background-color: var(--cds-ui-04, #8d8d8d);
-  border-radius: to-to-rem(15px);
+  border-radius: 0.9375rem;
   box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
   content: "";
   cursor: pointer;
@@ -10260,11 +10260,11 @@ a.bx--overflow-menu-options__btn::before {
 }
 .bx--toggle__appearance::after {
   position: absolute;
-  top: to-to-rem(3px);
-  left: to-to-rem(3px);
+  top: 0.1875rem;
+  left: 0.1875rem;
   display: block;
-  width: to-to-rem(18px);
-  height: to-to-rem(18px);
+  width: 1.125rem;
+  height: 1.125rem;
   box-sizing: border-box;
   background-color: var(--cds-icon-03, #ffffff);
   border-radius: 50%;
@@ -10276,10 +10276,10 @@ a.bx--overflow-menu-options__btn::before {
 .bx--toggle__check {
   position: absolute;
   z-index: 1;
-  top: to-to-rem(6px);
-  left: to-to-rem(6px);
-  width: to-to-rem(6px);
-  height: to-to-rem(5px);
+  top: 0.375rem;
+  left: 0.375rem;
+  width: 0.375rem;
+  height: 0.3125rem;
   fill: var(--cds-icon-03, #ffffff);
   transform: scale(0.2);
   transition: 70ms cubic-bezier(0.2, 0, 1, 0.9);
@@ -10297,7 +10297,7 @@ a.bx--overflow-menu-options__btn::before {
 
 .bx--toggle__text--left {
   position: absolute;
-  left: to-to-rem(48px);
+  left: 3rem;
 }
 
 .bx--toggle:checked + .bx--toggle__label .bx--toggle__text--left,
@@ -10315,7 +10315,7 @@ a.bx--overflow-menu-options__btn::before {
 }
 .bx--toggle:checked + .bx--toggle__label .bx--toggle__appearance::after {
   background-color: var(--cds-icon-03, #ffffff);
-  transform: translateX(to-to-rem(24px));
+  transform: translateX(1.5rem);
 }
 
 .bx--toggle + .bx--toggle__label .bx--toggle__appearance::before {
@@ -10361,30 +10361,30 @@ a.bx--overflow-menu-options__btn::before {
 }
 
 .bx--toggle--small + .bx--toggle__label .bx--toggle__appearance {
-  width: to-to-rem(32px);
-  height: to-to-rem(16px);
+  width: 2rem;
+  height: 1rem;
 }
 .bx--toggle--small + .bx--toggle__label .bx--toggle__appearance::before {
   top: 0;
-  width: to-to-rem(32px);
-  height: to-to-rem(16px);
+  width: 2rem;
+  height: 1rem;
   box-sizing: border-box;
   border-radius: 0.9375rem;
 }
 .bx--toggle--small + .bx--toggle__label .bx--toggle__appearance::after {
-  top: to-to-rem(3px);
-  left: to-to-rem(3px);
-  width: to-to-rem(10px);
-  height: to-to-rem(10px);
+  top: 0.1875rem;
+  left: 0.1875rem;
+  width: 0.625rem;
+  height: 0.625rem;
 }
 
 .bx--toggle--small:checked + .bx--toggle__label .bx--toggle__check {
   fill: var(--cds-support-02, #198038);
-  transform: scale(1) translateX(to-to-rem(16px));
+  transform: scale(1) translateX(1rem);
 }
 
 .bx--toggle--small + .bx--toggle__label .bx--toggle__text--left {
-  left: to-to-rem(32px);
+  left: 2rem;
 }
 
 .bx--toggle--small:checked + .bx--toggle__label .bx--toggle__appearance::after {
@@ -10423,8 +10423,8 @@ a.bx--overflow-menu-options__btn::before {
 .bx--toggle__switch {
   position: relative;
   display: flex;
-  width: to-to-rem(48px);
-  height: to-to-rem(24px);
+  width: 3rem;
+  height: 1.5rem;
   align-items: center;
   cursor: pointer;
 }
@@ -10432,11 +10432,11 @@ a.bx--overflow-menu-options__btn::before {
   position: absolute;
   top: 0;
   display: block;
-  width: to-to-rem(48px);
-  height: to-to-rem(24px);
+  width: 3rem;
+  height: 1.5rem;
   box-sizing: border-box;
   background-color: var(--cds-ui-04, #8d8d8d);
-  border-radius: to-to-rem(15px);
+  border-radius: 0.9375rem;
   box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
   content: "";
   transition: box-shadow 70ms cubic-bezier(0.2, 0, 1, 0.9), background-color 70ms cubic-bezier(0.2, 0, 1, 0.9);
@@ -10449,11 +10449,11 @@ a.bx--overflow-menu-options__btn::before {
 }
 .bx--toggle__switch::after {
   position: absolute;
-  top: to-to-rem(3px);
-  left: to-to-rem(3px);
+  top: 0.1875rem;
+  left: 0.1875rem;
   display: block;
-  width: to-to-rem(18px);
-  height: to-to-rem(18px);
+  width: 1.125rem;
+  height: 1.125rem;
   box-sizing: border-box;
   background-color: var(--cds-icon-03, #ffffff);
   border-radius: 50%;
@@ -10488,7 +10488,7 @@ a.bx--overflow-menu-options__btn::before {
 }
 .bx--toggle-input:checked + .bx--toggle-input__label > .bx--toggle__switch::after {
   background-color: var(--cds-icon-03, #ffffff);
-  transform: translateX(to-to-rem(24px));
+  transform: translateX(1.5rem);
 }
 
 .bx--toggle-input:focus + .bx--toggle-input__label > .bx--toggle__switch::before,
@@ -10525,29 +10525,29 @@ a.bx--overflow-menu-options__btn::before {
 }
 
 .bx--toggle-input--small + .bx--toggle-input__label > .bx--toggle__switch {
-  width: to-to-rem(32px);
-  height: to-to-rem(16px);
+  width: 2rem;
+  height: 1rem;
 }
 .bx--toggle-input--small + .bx--toggle-input__label > .bx--toggle__switch::before {
-  width: to-to-rem(32px);
-  height: to-to-rem(16px);
+  width: 2rem;
+  height: 1rem;
   border-radius: 0.9375rem;
 }
 .bx--toggle-input--small + .bx--toggle-input__label > .bx--toggle__switch::after {
-  width: to-to-rem(10px);
-  height: to-to-rem(10px);
+  width: 0.625rem;
+  height: 0.625rem;
 }
 .bx--toggle-input--small + .bx--toggle-input__label .bx--toggle__text--off,
 .bx--toggle-input--small + .bx--toggle-input__label .bx--toggle__text--on {
-  margin-left: to-to-rem(40px);
+  margin-left: 2.5rem;
 }
 
 .bx--toggle-input--small:checked + .bx--toggle-input__label > .bx--toggle__switch::after {
-  transform: translateX(to-to-rem(17px));
+  transform: translateX(1.0625rem);
 }
 .bx--toggle-input--small:checked + .bx--toggle-input__label .bx--toggle__check {
   fill: var(--cds-support-02, #198038);
-  transform: scale(1) translateX(to-to-rem(16px));
+  transform: scale(1) translateX(1rem);
 }
 
 .bx--toggle-input--small:disabled:checked + .bx--toggle-input__label .bx--toggle__check {
@@ -21263,6 +21263,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;
 }
 
@@ -21274,6 +21275,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;
@@ -21920,7 +21925,6 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__customize-columns-checkbox-wrapper {
   display: flex;
   justify-content: center;
-  padding-left: var(--cds-spacing-02, 0.25rem);
 }
 
 .c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.bx--form-item {
@@ -22249,11 +22253,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
   fill: var(--cds-ui-05, #161616);
 }
 
+.c4p--datagrid .bx--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, #e5e5e5);
+}
+
 .c4p--datagrid__draggable-handleStyle {
   display: flex;
   align-items: center;
   margin-right: var(--cds-spacing-03, 0.5rem);
-  cursor: grab;
 }
 
 .c4p--datagrid__draggable-handleStyle.disabled {
@@ -22264,32 +22273,55 @@ th.c4p--datagrid__select-all-toggle-on.button {
   fill: var(--cds-disabled-03, #8d8d8d);
 }
 
+.c4p--datagrid__draggable-underlay {
+  position: absolute;
+  width: 100%;
+}
+
+.c4p--datagrid__draggable-underlay-item {
+  width: 100%;
+  height: var(--cds-spacing-09, 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: var(--cds-spacing-09, 3rem);
-  border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
-  background-color: var(--cds-layer, #f4f4f4);
+  border-bottom: 1px solid var(--cds-active-ui, #c6c6c6);
+  background-color: var(--cds-ui-01, #f4f4f4);
+  cursor: grab;
 }
 
 .c4p--datagrid__draggable-handleHolder:hover {
-  background-color: var(--cds-layer-hover, #e5e5e5);
+  background-color: var(--cds-hover-ui, #e5e5e5);
 }
 
-.c4p--datagrid__draggable-handleHolder-selected {
-  display: flex;
-  height: var(--cds-spacing-09, 3rem);
-  border-bottom: 1px solid var(--cds-layer-active, #c6c6c6);
-  background-color: var(--cds-layer-selected, #e0e0e0);
+.c4p--datagrid__draggable-handleHolder:focus {
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
+  outline: none;
 }
 
-.c4p--datagrid__draggable-handleHolder-selected:hover {
-  background-color: var(--cds-hover-selected-ui, #cacaca);
+.c4p--datagrid__draggable-handleHolder--selected {
+  background-color: var(--cds-selected-ui, #e0e0e0);
 }
 
-.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--dragging {
+  z-index: 2;
+  background-color: var(--cds-highlight, #d0e2ff);
+  color: var(--cds-text-01, #161616);
+  outline: none;
+}
+
+.c4p--datagrid__draggable-handleHolder:active,
+.c4p--datagrid__draggable-handleHolder--dragging {
+  cursor: grabbing;
+}
+
+.c4p--datagrid__draggable-handleHolder-selected:hover {
+  background-color: var(--cds-hover-selected-ui, #cacaca);
 }
 
 .c4p--datagrid__draggable-handleHolder-droppable {
@@ -22307,11 +22339,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-01, #161616);
-}
-
 .c4p--datagrid__draggable-handleHolder--sticky {
   color: var(--cds-disabled-03, #8d8d8d);
 }
@@ -22328,6 +22355,11 @@ th.c4p--datagrid__select-all-toggle-on.button {
   white-space: nowrap;
 }
 
+.c4p--datagrid__draggable-item .bx--form-item.bx--checkbox-wrapper {
+  max-width: var(--cds-spacing-06, 1.5rem);
+  margin-bottom: 0;
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36