@carbon/ibm-products 1.64.0 → 1.66.0

package/css/index-full-carbon.css

@@ -11119,8 +11119,7 @@ a.bx--overflow-menu-options__btn::before {
 }
 .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
 .c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__actions-container.c4p--action-set--xs {
+.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
   width: 16rem;
   max-width: 100%;
 }
@@ -11138,8 +11137,7 @@ a.bx--overflow-menu-options__btn::before {
 }
 .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
 .c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__actions-container.c4p--action-set--sm {
+.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
   width: 20rem;
   max-width: 100%;
 }
@@ -11157,8 +11155,7 @@ a.bx--overflow-menu-options__btn::before {
 }
 .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
 .c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__actions-container.c4p--action-set--md {
+.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
   width: 30rem;
   max-width: 100%;
 }
@@ -11176,8 +11173,7 @@ a.bx--overflow-menu-options__btn::before {
 }
 .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
 .c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__actions-container.c4p--action-set--lg {
+.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
   width: 40rem;
   max-width: 100%;
 }
@@ -11195,8 +11191,7 @@ a.bx--overflow-menu-options__btn::before {
 }
 .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
 .c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__actions-container.c4p--action-set--max {
+.c4p--side-panel__container.c4p--side-panel__container--max .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
   width: 75%;
   max-width: 100%;
 }
@@ -11208,6 +11203,9 @@ a.bx--overflow-menu-options__btn::before {
   left: 0;
   border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
 }
+.c4p--side-panel__container .c4p--side-panel__actions-container {
+  width: 100%;
+}
 .c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container::before {
   content: none;
 }
@@ -25827,6 +25825,230 @@ th.c4p--datagrid__select-all-toggle-on.button {
   color: #161616 !important;
 }
 
+.c4p--interstitial-screen {
+  position: fixed;
+  z-index: 6001;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+.c4p--interstitial-screen .c4p--carousel {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+}
+.c4p--interstitial-screen .c4p--carousel__elements-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.c4p--interstitial-screen .c4p--carousel__elements {
+  flex: 1;
+}
+.c4p--interstitial-screen .c4p--interstitial-screen--auto-height-container {
+  flex: 1;
+}
+.c4p--interstitial-screen--body {
+  overflow: hidden auto;
+  flex-grow: 1;
+  padding: 0;
+  margin: 0;
+  background-color: var(--cds-ui-background, #ffffff);
+}
+.c4p--interstitial-screen--body-grid {
+  height: 100%;
+  padding: 0 !important;
+}
+.c4p--interstitial-screen--body-row {
+  height: 100%;
+}
+.c4p--interstitial-screen--progress {
+  margin: var(--cds-spacing-07, 2rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-04, 0.75rem);
+}
+.c4p--interstitial-screen__carousel {
+  height: 100%;
+}
+.c4p--interstitial-screen__carousel .c4p--carousel__item {
+  flex: 0 0 100% !important;
+}
+.c4p--interstitial-screen--container {
+  min-width: 47rem;
+  max-width: 1312px;
+  margin: calc(var(--cds-spacing-10, 4rem) * 2) auto;
+  background-color: var(--cds-ui-background, #ffffff);
+}
+.c4p--interstitial-screen--media-container {
+  overflow: hidden;
+}
+.c4p--interstitial-screen--media {
+  width: 100%;
+  height: 100%;
+  margin-right: calc(var(--cds-spacing-08, 2.5rem) * -1);
+}
+@media (max-width: 81.98rem) {
+  .c4p--interstitial-screen--media {
+    margin-right: calc(var(--cds-spacing-07, 2rem) * -1);
+  }
+}
+.c4p--interstitial-screen--stepped-animated-media {
+  overflow: hidden;
+  height: 100%;
+}
+.c4p--interstitial-screen--internal-body {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.c4p--interstitial-screen--internal-header {
+  position: relative;
+  min-height: var(--cds-spacing-09, 3rem);
+  margin-bottom: 0 !important;
+  background-color: var(--cds-ui-background, #ffffff);
+}
+.c4p--interstitial-screen--internal-header:empty {
+  min-height: 0;
+}
+.c4p--interstitial-screen--internal-header h2 {
+  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);
+  padding: 0 var(--cds-spacing-05, 1rem) var(--cds-spacing-06, 1.5rem);
+}
+.c4p--interstitial-screen--internal-header h2:empty {
+  padding: 0;
+}
+.c4p--interstitial-screen--internal-header--has-title {
+  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
+  background: var(--cds-ui-01, #f4f4f4);
+}
+.c4p--interstitial-screen--internal-header--has-title .c4p--interstitial-screen--progress {
+  margin-top: 0;
+}
+.c4p--interstitial-screen--internal-header > .c4p--interstitial-screen--close-icon {
+  position: absolute !important;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  width: var(--cds-spacing-09, 3rem);
+}
+.c4p--interstitial-screen--footer {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: flex-end;
+  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
+  background: var(--cds-ui-background, #ffffff);
+}
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--prev-btn,
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--next-btn,
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--start-btn {
+  width: 18.75%;
+  min-width: 12.5rem;
+}
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
+  max-width: none;
+  flex-grow: 1 !important;
+  padding-left: var(--cds-spacing-07, 2rem) !important;
+}
+.c4p--interstitial-screen--footer-controls {
+  display: flex;
+  flex-direction: row;
+  margin-left: auto;
+}
+.c4p--interstitial-screen--modal .c4p--interstitial-screen--content {
+  margin-top: 0;
+}
+.c4p--interstitial-screen--modal .c4p--interstitial-screen--internal-header:has(> :nth-child(2)) {
+  min-height: initial;
+}
+.c4p--interstitial-screen--modal:has(> :nth-child(1)) {
+  min-height: initial;
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--container {
+  display: flex;
+  max-width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--header {
+  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);
+  height: var(--cds-spacing-09, 3rem);
+  padding-left: var(--cds-spacing-05, 1rem);
+  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  background-color: #161616;
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  color: #f4f4f4;
+  font-weight: normal !important;
+  line-height: var(--cds-spacing-09, 3rem) !important;
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--header b {
+  font-weight: var(--cds-heading-01-font-weight, 600);
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header > h2 {
+  padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-08, 2.5rem) 0;
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--progress {
+  margin: var(--cds-spacing-10, 4rem) var(--cds-spacing-08, 2.5rem) var(--cds-spacing-04, 0.75rem);
+}
+@media (max-width: 81.98rem) {
+  .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--progress {
+    margin-left: var(--cds-spacing-07, 2rem);
+  }
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header--has-title .c4p--interstitial-screen--progress {
+  margin-top: var(--cds-spacing-06, 1.5rem);
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header:has(> :nth-child(1)) {
+  min-height: initial;
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
+  padding-left: var(--cds-spacing-08, 2.5rem) !important;
+}
+@media (max-width: 81.98rem) {
+  .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
+    padding-left: var(--cds-spacing-07, 2rem) !important;
+  }
+}
+
+.c4p--interstitial-screen-view {
+  height: 100%;
+}
+
+.c4p--interstitial-screen-view-module {
+  margin: var(--cds-spacing-07, 2rem);
+}
+.c4p--interstitial-screen-view-module--heading {
+  font-size: var(--cds-expressive-heading-05-font-size, 2rem);
+  font-weight: var(--cds-expressive-heading-05-font-weight, 400);
+  line-height: var(--cds-expressive-heading-05-line-height, 1.25);
+  letter-spacing: var(--cds-expressive-heading-05-letter-spacing, 0);
+  margin-bottom: var(--cds-spacing-07, 2rem);
+}
+.c4p--interstitial-screen-view-module--body {
+  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);
+}
+
+.c4p--interstitial-screen--modal .c4p--interstitial-screen-view-module {
+  margin: var(--cds-spacing-11, 5rem) var(--cds-spacing-07, 2rem);
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen-view-module {
+  margin: var(--cds-spacing-12, 6rem) var(--cds-spacing-08, 2.5rem);
+}
+@media (max-width: 81.98rem) {
+  .c4p--interstitial-screen--full-screen .c4p--interstitial-screen-view-module {
+    margin: var(--cds-spacing-12, 6rem) var(--cds-spacing-07, 2rem);
+  }
+}
+
 /* stylelint-disable declaration-no-important */
 .c4p--checklist__header {
   display: flex;