@carbon/ibm-products 2.28.0 → 2.29.0-alpha.10

package/css/index.css

@@ -7435,11 +7435,17 @@ a.cds--overflow-menu-options__btn::before {
   height: 2.5rem;
 }
 .c4p--side-panel .c4p--side-panel__slug-and-close {
-  position: absolute;
+  position: fixed;
   z-index: 10; /* must be higher than title container border bottom */
   top: 0;
   right: 0;
   display: flex;
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+@media (prefers-reduced-motion) {
+  .c4p--side-panel .c4p--side-panel__slug-and-close {
+    position: absolute;
+  }
 }
 .c4p--side-panel .c4p--side-panel__actions-container {
   position: sticky;
@@ -7565,13 +7571,33 @@ a.cds--overflow-menu-options__btn::before {
 }
 
 .c4p--tearsheet.c4p--tearsheet {
+  --overlay-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  --overlay-opacity: 1;
   z-index: 9001;
   align-items: flex-end;
   color: var(--cds-text-primary, #161616);
-  transition: visibility 0s linear 240ms, background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
+  transition: visibility 0s linear 240ms;
   --c4p--tearsheet--stacking-scale-factor-single: 0.95;
   --c4p--tearsheet--stacking-scale-factor-double: 0.9;
 }
+.c4p--tearsheet.c4p--tearsheet::before {
+  position: absolute;
+  display: block;
+  background: var(--overlay-color);
+  content: "";
+  inset: 0;
+  opacity: var(--overlay-opacity);
+  transition: background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .c4p--tearsheet.c4p--tearsheet::before {
+    transition: none;
+  }
+}
+.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet {
+  /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
+  background: initial;
+}
 .c4p--tearsheet.is-visible {
   z-index: 9000;
   align-items: flex-end;
@@ -7583,19 +7609,19 @@ a.cds--overflow-menu-options__btn::before {
   }
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
+  --overlay-opacity: 0.67;
   z-index: 8999;
-  background-color: rgba(22, 22, 22, 0.33);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
+  --overlay-opacity: 0.22;
   z-index: 8998;
-  background-color: rgba(22, 22, 22, 0.11);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
+  --overlay-opacity: 0.5;
   z-index: 8999;
-  background-color: rgba(22, 22, 22, 0.25);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-2-of-2, .c4p--tearsheet.c4p--tearsheet--stacked-3-of-3 {
-  background-color: rgba(22, 22, 22, 0.25);
+  --overlay-opacity: 0.5;
 }
 .c4p--tearsheet .c4p--tearsheet__container {
   top: auto;
@@ -7708,10 +7734,12 @@ a.cds--overflow-menu-options__btn::before {
   padding: 1.5rem 2rem 0;
 }
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header {
-  padding-right: 5rem;
+  padding-inline-end: 5rem;
 }
 .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
-  margin-right: 3rem;
+  /* spacing 11 plus additional space for slug/close */
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  padding-inline-end: calc(8rem);
 }
 .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
   max-width: 80%;
@@ -7764,7 +7792,7 @@ a.cds--overflow-menu-options__btn::before {
   overflow: auto;
   flex-grow: 1;
 }
-.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
+.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__content {
   background: linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-background, #ffffff)), var(--cds-background, var(--cds-background, #ffffff))) border-box;
   box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2));
 }
@@ -7806,6 +7834,10 @@ a.cds--overflow-menu-options__btn::before {
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
   background: var(--cds-background, #ffffff);
 }
+.c4p--tearsheet.c4p--tearsheet--has-slug {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  --overlay-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
+}
 .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
   inset-inline-end: 0;
 }
@@ -35678,6 +35710,78 @@ a.cds--side-nav__link--current::before {
   white-space: nowrap;
 }
 
+.c4p--description-list .cds--structured-list {
+  margin-bottom: 2rem;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__row {
+  border-block-end-width: 0;
+  border-block-start-width: 0;
+}
+
+.c4p--description-list .cds--structured-list .c4p--description-list__body .c4p--description-list__row:first-child {
+  border-block-start-width: 0;
+}
+
+.c4p--description-list .cds--structured-list .c4p--description-list__body .c4p--description-list__row:last-child {
+  border-block-end-width: 0;
+}
+
+.c4p--description-list--bordered .c4p--description-list__body .c4p--description-list__row {
+  border-block-start-width: 1px;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__cell {
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
+  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__cell:first-of-type {
+  width: 1%;
+  padding-left: 0;
+  white-space: nowrap;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__cell:last-of-type {
+  padding-right: 0;
+  color: var(--cds-text-primary, #161616);
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__row:first-of-type > .c4p--description-list__cell {
+  padding-top: 0;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__row:last-of-type > .c4p--description-list__cell {
+  padding-bottom: 0;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__cell ul {
+  list-style: none;
+}
+
+.c4p--description-list .c4p--description-list__body .c4p--description-list__cell ul > li {
+  margin-bottom: 0.5rem;
+}
+
+.c4p--description-list--lg .c4p--description-list__body .c4p--description-list__cell {
+  padding: 1rem 1.5rem 1rem 1rem;
+}
+
+.c4p--description-list--sm .c4p--description-list__body .c4p--description-list__cell {
+  padding: 0.25rem 1.5rem 0.25rem 0.25rem;
+}
+
+.c4p--description-list--xs .c4p--description-list__body .c4p--description-list__cell {
+  padding: 0.25rem;
+}
+
+.c4p--description-list .cds--structured-list-row--focused-within {
+  outline: none;
+}
+
 .c4p--full-page-error {
   height: inherit;
 }
@@ -35958,4 +36062,80 @@ a.cds--side-nav__link--current::before {
   height: 1.5rem;
 }
 
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable function-no-unknown */
+.c4p--status-indicator__title {
+  font-size: var(--cds-heading-02-font-size, 1rem);
+  font-weight: var(--cds-heading-02-font-weight, 600);
+  line-height: var(--cds-heading-02-line-height, 1.5);
+  letter-spacing: var(--cds-heading-02-letter-spacing, 0);
+  margin-bottom: 0.25rem;
+}
+
+.c4p--status-indicator-step__details {
+  display: flex;
+  min-height: 2rem;
+  align-items: center;
+}
+
+.c4p--status-indicator-step__icon {
+  position: relative;
+  display: flex;
+  width: 1.5rem;
+}
+
+.c4p--status-indicator-step__text {
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+  color: var(--cds-text-primary, #161616);
+}
+
+.c4p--status-indicator .c4p--status-indicator__button {
+  align-items: center;
+  margin-top: 0.125rem;
+  margin-left: 0.5rem;
+}
+
+.c4p--status-indicator .c4p--status-indicator__button:not([disabled]) svg {
+  margin-left: 0.5rem;
+  fill: currentColor;
+}
+
+.c4p--status-indicator-step--inactive .c4p--status-indicator-step__text {
+  color: var(--cds-text-secondary, #525252);
+}
+
+.c4p--status-indicator-step--inactive svg {
+  fill: var(--cds-icon-primary, #161616);
+}
+
+.c4p--status-indicator-step--active .c4p--status-indicator-step__icon {
+  margin-right: 0;
+}
+
+.c4p--status-indicator-step--active .cds--inline-loading__animation {
+  margin-right: 0.4375rem;
+}
+
+.c4p--status-indicator-step--error svg {
+  fill: var(--cds-support-error, #da1e28);
+}
+
+.c4p--status-indicator-step--finished svg {
+  fill: var(--cds-support-success, #24a148);
+}
+
+.c4p--status-indicator-step__error-message {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  margin-top: -0.125rem;
+  margin-bottom: 0.375rem;
+  margin-left: 1.5rem;
+  color: var(--cds-text-error, #da1e28);
+}
+
 /*# sourceMappingURL=index.css.map */