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

package/css/index-full-carbon.css

@@ -2926,26 +2926,6 @@
   margin-bottom: 0;
 }
 
-@keyframes side-panel-exit-left {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(calc(-1 * 30rem));
-  }
-}
-@keyframes side-panel-exit-right {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(30rem);
-  }
-}
 .c4p--side-panel__container {
   --c4p--side-panel--subtitle-opacity: 1;
   --c4p--side-panel--title-container-height: 0;
@@ -2965,7 +2945,6 @@
   box-sizing: border-box;
   background-color: var(--cds-layer-01, #f4f4f4);
   color: var(--cds-text-primary, #161616);
-  transition: transform 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .c4p--side-panel__container.c4p--side-panel__container--xs {
   width: 16rem;
@@ -2979,37 +2958,13 @@
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
-  width: 16rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(16rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
-  width: 16rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-16rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--sm {
   width: 20rem;
   max-width: 100%;
@@ -3022,37 +2977,13 @@
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
-  width: 20rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(20rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
-  width: 20rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-20rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--md {
   width: 30rem;
   max-width: 100%;
@@ -3065,37 +2996,13 @@
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
-  width: 30rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(30rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
-  width: 30rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-30rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--lg {
   width: 40rem;
   max-width: 100%;
@@ -3108,37 +3015,13 @@
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
-  width: 40rem;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(40rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
-  width: 40rem;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-40rem);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container--2xl {
   width: 75%;
   max-width: 100%;
@@ -3151,37 +3034,13 @@
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--2xl {
-  width: 75%;
-  max-width: 100%;
   right: 0;
   border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-right {
-  0% {
-    opacity: 0;
-    transform: translateX(75%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--2xl {
-  width: 75%;
-  max-width: 100%;
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-@keyframes side-panel-entrance-left {
-  0% {
-    opacity: 0;
-    transform: translateX(-75%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
   /* stylelint-disable-next-line max-nesting-depth */
 }
@@ -3314,10 +3173,7 @@
 .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
   position: fixed;
   z-index: 2;
-  top: calc(
-      var(--c4p--side-panel--title-text-height) +
-        var(--c4p--side-panel--label-text-height) + 3rem
-    );
+  top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
   background-color: var(--cds-layer-01, #f4f4f4);
 }
 .c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
@@ -3332,7 +3188,6 @@
 }
 .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
   position: fixed;
-  top: 3rem;
   height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
 }
 .c4p--side-panel__container .c4p--side-panel__inner-content {
@@ -3353,10 +3208,7 @@
 }
 .c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
   position: fixed;
-  top: calc(
-      var(--c4p--side-panel--title-text-height) +
-        var(--c4p--side-panel--subtitle-container-height) + 3rem
-    );
+  top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
   width: 100%;
   border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
 }
@@ -3512,7 +3364,6 @@
   width: 100%;
   height: 100%;
   background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
-  transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
 .c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
@@ -4837,8 +4688,8 @@ button.c4p--add-select__global-filter-toggle--open {
   margin-top: 0.5rem;
 }
 
-.cds--tooltip,
-.cds--overflow-menu-options {
+.c4p--add-select .cds--tooltip,
+.c4p--add-select .cds--overflow-menu-options {
   z-index: 9000;
 }
 
@@ -7724,6 +7575,12 @@ button.c4p--add-select__global-filter-toggle--open {
   transform: translateY(-2px);
   vertical-align: middle;
 }
+.c4p--page-header .c4p--page-header__title-wrapper {
+  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+  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);
+}
 .c4p--page-header .c4p--page-header__page-actions {
   flex: 0 0 100%;
   margin-top: 1rem;
@@ -11092,6 +10949,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__customize-columns-select-all {
   display: flex;
   height: 3rem;
+  align-items: center;
   padding-left: 2.5rem;
   border-bottom: 1px solid var(--cds-layer-active);
   background-color: var(--cds-layer-01, #f4f4f4);
@@ -11104,6 +10962,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__customize-columns-select-all-selected {
   display: flex;
   height: 3rem;
+  align-items: center;
   padding-left: 2.5rem;
   border-bottom: 1px solid var(--cds-layer-active);
   background-color: var(--cds-layer-selected-01, #e0e0e0);
@@ -11360,6 +11219,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   max-height: none;
 }
 
+.c4p--datagrid {
+  --c4p--datagrid--grid-header-height: 0;
+}
+
 .c4p--datagrid__inline-edit-cell {
   display: flex;
   height: 100%;
@@ -11520,7 +11383,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   bottom: 0;
   left: 0;
   width: 2px;
-  height: calc(100% - 50px);
+  height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
   background-color: var(--cds-link-inverse, #78a9ff);
   content: "";
 }
@@ -11531,12 +11394,12 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   right: 0;
   bottom: 0;
   width: 2px;
-  height: calc(100% - 50px);
+  height: calc(100% - 50px - var(--c4p--datagrid--grid-header-height));
   background-color: var(--cds-link-inverse, #78a9ff);
   content: "";
 }
 
-.c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-grid-active thead::before {
+.c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
   position: absolute;
   z-index: 2;
   top: 0;
@@ -11549,7 +11412,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
 
 .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
 .c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
-  height: calc(100% - 2px);
+  height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
 }
 
 .c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
@@ -11557,6 +11420,10 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
   outline-offset: -2px;
 }
 
+.c4p--datagrid .c4p--datagrid__grid-container-inline-edit .c4p--datagrid__table-container {
+  padding-top: 0.125rem;
+}
+
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] ~ .cds--form-requirement,
 .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid [data-invalid] .cds--form-requirement {
   position: absolute;
@@ -14182,6 +14049,45 @@ a.cds--side-nav__link--current::before {
   margin-bottom: 1rem;
 }
 
+/* stylelint-disable max-nesting-depth */
+.c4p--edit-update-cards#c4p--edit-update-cards--edit {
+  /* Used id for overriding the SVG path fill */
+}
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
+  background-color: #0050e6;
+}
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:focus,
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:focus {
+  box-shadow: none;
+}
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button svg path,
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button svg path {
+  fill: #ffffff;
+}
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button.c4p--loading:hover,
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button.c4p--loading:hover {
+  background-color: transparent;
+}
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer {
+  background-color: #0f62fe;
+  color: #ffffff;
+}
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading {
+  animation-duration: 700ms;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: rotate;
+  animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+.c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
+  background-color: transparent;
+}
+.c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
+  background-color: #0f62fe;
+  color: #ffffff;
+}
+
 html,
 body,
 div,