@carbon/ibm-products 1.23.0 → 1.25.0

package/css/index-full-carbon.css

@@ -12929,24 +12929,39 @@ a.bx--side-nav__link--current::before {
 .c4p--empty-state {
   color: var(--cds-text-01, #161616);
 }
-.c4p--empty-state .c4p--empty-state__header,
-.c4p--empty-state .c4p--empty-state__subtitle {
-  padding-bottom: var(--cds-spacing-02, 0.25rem);
-  margin: 0;
-}
-.c4p--empty-state .c4p--empty-state__header--small {
+.c4p--empty-state .c4p--empty-state__header {
   font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
   font-weight: var(--cds-productive-heading-03-font-weight, 400);
   line-height: var(--cds-productive-heading-03-line-height, 1.4);
   letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
+  padding-bottom: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-02, 0.25rem));
+  margin: 0;
+}
+.c4p--empty-state .c4p--empty-state__subtitle {
+  font-size: var(--cds-body-long-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-long-01-font-weight, 400);
+  line-height: var(--cds-body-long-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
+  padding-bottom: var(--cds-spacing-05, 1rem);
+}
+.c4p--empty-state .c4p--empty-state__header--small {
+  font-size: var(--cds-body-short-02-font-size, 1rem);
+  font-weight: var(--cds-body-short-02-font-weight, 400);
+  line-height: var(--cds-body-short-02-line-height, 1.375);
+  letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
+  padding-bottom: var(--cds-spacing-03, 0.5rem);
 }
 .c4p--empty-state .c4p--empty-state__subtitle--small {
-  font-size: var(--cds-body-short-01-font-size, 0.875rem);
-  font-weight: var(--cds-body-short-01-font-weight, 400);
-  line-height: var(--cds-body-short-01-line-height, 1.28572);
-  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+  font-size: var(--cds-caption-01-font-size, 0.75rem);
+  font-weight: var(--cds-caption-01-font-weight, 400);
+  line-height: var(--cds-caption-01-line-height, 1.33333);
+  letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
 }
 
+.c4p--empty-state__illustration {
+  height: auto;
+  margin-bottom: var(--cds-spacing-05, 1rem);
+}
 .c4p--empty-state__illustration.c4p--empty-state__illustration--lg {
   min-width: var(--cds-spacing-11, 5rem);
   max-width: var(--cds-spacing-11, 5rem);
@@ -12956,13 +12971,9 @@ a.bx--side-nav__link--current::before {
   max-width: var(--cds-spacing-10, 4rem);
 }
 
-.c4p--empty-state__action-button,
-.c4p--empty-state__link {
-  margin-top: var(--cds-spacing-06, 1.5rem);
-}
-
 .c4p--empty-state .c4p--empty-state__action-button {
   display: block;
+  margin-bottom: var(--cds-spacing-05, 1rem);
 }
 
 .c4p--empty-state .c4p--empty-state__link {
@@ -16387,7 +16398,6 @@ button.c4p--add-select__global-filter-toggle--open {
   display: block;
   width: 100%;
   height: 100%;
-  /* stylelint-disable-next-line carbon/motion-token-use */
   animation: background-and-shadow-appear 1000ms linear paused forwards;
   animation-delay: calc(-1000ms * var(--c4p--page-header--background-opacity));
   content: "";
@@ -16527,7 +16537,6 @@ button.c4p--add-select__global-filter-toggle--open {
   display: block;
   width: 100%;
   height: 100%;
-  /* stylelint-disable-next-line carbon/motion-token-use */
   animation: background-appear 1000ms linear paused forwards;
   animation-delay: calc(-1000ms * var(--c4p--page-header--background-opacity));
   content: "";
@@ -16639,6 +16648,7 @@ button.c4p--add-select__global-filter-toggle--open {
   font-weight: var(--cds-productive-heading-04-font-weight, 400);
   line-height: var(--cds-productive-heading-04-line-height, 1.28572);
   letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
+  min-height: var(--cds-spacing-08, 2.5rem);
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -16706,7 +16716,6 @@ button.c4p--add-select__global-filter-toggle--open {
   display: block;
   width: 100%;
   height: 100%;
-  /* stylelint-disable-next-line carbon/motion-token-use */
   animation: background-appear 1000ms linear paused forwards;
   animation-delay: calc(-1000ms * var(--c4p--page-header--background-opacity));
   content: "";
@@ -18038,7 +18047,8 @@ button.c4p--add-select__global-filter-toggle--open {
   position: fixed;
   top: var(--cds-spacing-09, 3rem);
   right: 0;
-  width: 40rem;
+  width: 100%;
+  max-width: 40rem;
   height: calc(100vh - var(--cds-spacing-09, 3rem));
   border-left: 1px solid #262626;
   color: var(--cds-text-01, #161616);
@@ -19105,12 +19115,12 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel {
   display: inline-flex;
   width: var(--c4p--inline-edit--size);
+  max-width: var(--c4p--inline-edit--size);
   height: 100%;
   min-height: initial;
   max-height: var(--c4p--inline-edit--size);
-  padding: calc(
-    0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
-  );
+  align-items: center;
+  justify-content: center;
   border: 2px solid transparent;
 }
 .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:hover {
@@ -19131,38 +19141,27 @@ button.c4p--add-select__global-filter-toggle--open {
   border-color: transparent;
 }
 .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
-  margin-right: 0;
+  overflow: visible;
+  width: var(--c4p--inline-edit--edit-size);
   transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
   transition-property: margin, padding;
 }
-.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
-  transition: width 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
-}
-@media (prefers-reduced-motion: reduce) {
-  .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
-    transition: none;
-  }
-}
 .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
-  padding-right: 0;
-  padding-left: 0;
-  border-right: 0;
-  border-left: 0;
-  margin-right: calc(-1 * var(--c4p--inline-edit--size));
-}
-.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save svg {
   overflow: hidden;
   width: 0;
+  padding: 0;
+  border-right: 0;
+  border-left: 0;
 }
 .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
   display: inline-flex;
   width: var(--c4p--inline-edit--size);
+  max-width: var(--c4p--inline-edit--size);
   height: 100%;
   min-height: initial;
   max-height: var(--c4p--inline-edit--size);
-  padding: calc(
-    0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
-  );
+  align-items: center;
+  justify-content: center;
   border: 2px solid transparent;
 }
 .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:focus {
@@ -19186,12 +19185,12 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--inline-edit .c4p--inline-edit__validation-icon {
   display: inline-flex;
   width: var(--c4p--inline-edit--size);
+  max-width: var(--c4p--inline-edit--size);
   height: 100%;
   min-height: initial;
   max-height: var(--c4p--inline-edit--size);
-  padding: calc(
-    0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)) - var(--cds-spacing-01, 0.125rem)
-  );
+  align-items: center;
+  justify-content: center;
   border: 2px solid transparent;
 }
 .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
@@ -19517,24 +19516,17 @@ button.c4p--add-select__global-filter-toggle--open {
 
 .c4p--datagrid__grid-container {
   display: block;
-  overflow: auto;
   width: 100%;
   padding-top: 0;
 }
 .c4p--datagrid__grid-container .bx--data-table-content {
   width: 100%;
   height: 100%;
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  overflow-x: unset;
+  overflow-x: auto;
 }
 .c4p--datagrid__grid-container .c4p--datagrid__table-simple {
-  display: flex;
-  overflow: auto;
+  overflow: hidden;
   max-height: 100%;
-  flex-direction: column;
-}
-.c4p--datagrid__grid-container .c4p--datagrid__with-pagination tr:last-of-type > td {
-  border-bottom: none;
 }
 .c4p--datagrid__grid-container .c4p--datagrid__head {
   display: flex;
@@ -19616,6 +19608,10 @@ button.c4p--add-select__global-filter-toggle--open {
   flex: 1 1 auto;
 }
 
+.c4p--datagrid__with-pagination table tr:last-of-type > td {
+  border-bottom: none;
+}
+
 .c4p--datagrid__resizer {
   position: absolute;
   z-index: 1;
@@ -19708,7 +19704,6 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__datagridLeftPanel {
   display: flex;
   width: 388px;
-  height: 100%;
   background-color: var(--cds-ui-01, #f4f4f4);
 }
 
@@ -19719,15 +19714,91 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__datagridWithPanel {
   position: relative;
   display: flex;
-  overflow: auto;
   width: 100%;
+  height: 100%;
+  flex-direction: column;
+}
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__grid-container {
+  display: flex;
+  overflow: hidden;
   flex-direction: column;
 }
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-toolbar {
+  width: 100%;
+}
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__datagridLeftPanel {
+  flex: 0 0 auto;
+}
+.c4p--datagrid__datagridWithPanel .bx--data-table-content {
+  flex: 1 1 0%;
+}
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
+  overflow: hidden;
+}
+
+.c4p--datagrid__table-container {
+  position: relative;
+  display: flex;
+  overflow: auto;
+  width: 100%;
+  max-height: 100%;
+}
 
 .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active ~ .c4p--datagrid__carbon-nested-row {
   border-left: 1px solid var(--cds-interactive-01, #0f62fe);
 }
 
+.c4p--datagrid .bx--data-table-header {
+  background: transparent;
+}
+
+.c4p--datagrid__dense-header {
+  display: flex;
+  flex-wrap: wrap;
+}
+.c4p--datagrid__dense-header .bx--data-table-header {
+  flex: 1 1 auto;
+  padding-bottom: var(--cds-spacing-05, 1rem);
+}
+.c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
+  flex: 0 0 auto;
+}
+.c4p--datagrid__dense-header .bx--table-toolbar {
+  background: transparent;
+}
+.c4p--datagrid__dense-header .bx__table-container {
+  flex: 1 1 100%;
+}
+.c4p--datagrid__dense-header .bx--table-toolbar {
+  padding-top: var(--cds-spacing-07, 2rem);
+}
+.c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider {
+  position: relative;
+}
+.c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 1px;
+  height: var(--cds-spacing-05, 1rem);
+  border-left: 1px solid var(--cds-ui-03, #e0e0e0);
+  content: "";
+  transform: translateY(-50%);
+}
+
+.bx--data-table--selected {
+  position: relative;
+}
+
+.bx--data-table--selected::before {
+  position: absolute;
+  left: 0;
+  width: var(--cds-spacing-02, 0.25rem);
+  height: 100%;
+  background-color: var(--cds-interactive-01, #0f62fe);
+  content: "";
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -20014,10 +20085,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
-.c4p--datagrid__expanded-row-content {
-  padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-06, 1.5rem) var(--cds-spacing-10, 4rem);
-}
-
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -20086,7 +20153,6 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   display: flex;
   overflow: hidden;
   width: 100%;
-  height: 100%;
   flex-direction: column;
   /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
 }
@@ -20095,6 +20161,143 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   overflow-x: unset;
 }
 
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotate-end-p1 {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotate-end-p2 {
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+/* Stroke animations */
+@keyframes init-stroke {
+  0% {
+    stroke-dashoffset: 276.4608;
+  }
+  100% {
+    stroke-dashoffset: 52.527552;
+  }
+}
+@keyframes stroke-end {
+  0% {
+    stroke-dashoffset: 52.527552;
+  }
+  100% {
+    stroke-dashoffset: 276.4608;
+  }
+}
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes form-content-entrance {
+  0% {
+    opacity: 0;
+    transform: translateY(-0.75rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.c4p--tearsheet-edit {
+  --c4p--tearsheet-edit--total-width: 0;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form__form--hidden-form {
+  display: none;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form__form--visible-form {
+  animation-duration: 400ms;
+  animation-fill-mode: forwards;
+  animation-name: form-content-entrance;
+  animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion) {
+  .c4p--tearsheet-edit .c4p--tearsheet-edit__form__form--visible-form {
+    animation: none;
+    opacity: 1;
+  }
+}
+.c4p--tearsheet-edit .c4p--tearsheet-edit__content {
+  height: 100%;
+  padding: var(--cds-spacing-06, 1.5rem);
+  overflow-x: hidden;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__content .bx--grid {
+  padding: 0;
+  margin: 0;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form--heading {
+  padding-bottom: var(--cds-spacing-06, 1.5rem);
+}
+
+.c4p--tearsheet-edit .bx--btn-set .bx--btn.bx--btn--disabled {
+  box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
+}
+
+.c4p--tearsheet-edit .bx--side-nav--ux {
+  position: initial;
+  width: 100%;
+  max-width: 100%;
+  background-color: transparent;
+}
+
+.c4p--tearsheet-edit .bx--side-nav__link:hover {
+  cursor: pointer;
+}
+
+.c4p--tearsheet-edit .bx--side-nav__overlay-active {
+  display: none;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form--title,
+.c4p--tearsheet-edit .c4p--tearsheet-edit__section--title {
+  margin-bottom: var(--cds-spacing-05, 1rem);
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__section--subtitle,
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form--subtitle {
+  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+  font-weight: var(--cds-productive-heading-01-font-weight, 600);
+  line-height: var(--cds-productive-heading-01-line-height, 1.28572);
+  letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
+  margin-bottom: var(--cds-spacing-03, 0.5rem);
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__section--description,
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form--description {
+  font-size: var(--cds-body-long-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-long-01-font-weight, 400);
+  line-height: var(--cds-body-long-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
+  margin-bottom: var(--cds-spacing-06, 1.5rem);
+}
+
+.c4p--tearsheet-edit .bx--fieldset {
+  margin-bottom: 0;
+}
+
+.c4p--tearsheet-edit .c4p--tearsheet-edit__form--fieldset > * {
+  margin-bottom: var(--cds-spacing-05, 1rem);
+}
+
 @font-face {
   font-display: auto;
   font-family: "IBM Plex Mono";