@carbon/ibm-products 2.15.1 → 2.16.0

package/css/index-full-carbon.css

@@ -4242,7 +4242,6 @@ p.c4p--about-modal__copyright-text:first-child {
   position: sticky;
   z-index: 4;
   top: 0;
-  height: calc(var(--c4p--side-panel--title-container-height) - var(--c4p--side-panel--label-text-height));
   padding: 1rem 1rem 0.5rem 1rem;
   background-color: var(--cds-layer-01, #f4f4f4);
   /* stylelint-disable-next-line max-nesting-depth */
@@ -4303,6 +4302,7 @@ p.c4p--about-modal__copyright-text:first-child {
   -webkit-line-clamp: 2;
   position: inherit;
   z-index: 4;
+  margin-bottom: calc(-1 * var(--c4p--side-panel--label-text-height));
   background-color: var(--cds-layer-01, #f4f4f4);
   opacity: var(--c4p--side-panel--subtitle-opacity);
   transform: translateY(var(--c4p--side-panel--title-y-position));
@@ -11216,34 +11216,34 @@ button.c4p--add-select__global-filter-toggle--open {
   align-items: center;
   padding-top: 0;
 }
-.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--compact .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--xs .c4p--datagrid__cell {
+.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--xs .c4p--datagrid__cell {
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
 }
-.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--short .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--sm .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--md .c4p--datagrid__cell {
+.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--sm .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--md .c4p--datagrid__cell {
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   padding-top: 0.4375rem;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   padding-bottom: 0.375rem;
 }
-.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--tall .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--xl .c4p--datagrid__cell {
+.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center.c4p--datagrid__variable-row-height.cds--data-table--xl .c4p--datagrid__cell {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
-.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--tall .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--xl .c4p--datagrid__cell {
+.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--xl .c4p--datagrid__cell {
   padding-top: 1rem;
 }
-.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--tall .cds--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--lg .cds--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--xl .cds--table-header-label {
+.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--lg .cds--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--xl .cds--table-header-label {
   padding-top: 1rem;
 }
-.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--tall .cds--table-column-checkbox, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--lg .cds--table-column-checkbox, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--xl .cds--table-column-checkbox {
+.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--lg .cds--table-column-checkbox, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.cds--data-table--xl .cds--table-column-checkbox {
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   padding-top: 0.8125rem;
 }
-.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--tall .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--xl .c4p--datagrid__cell {
+.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--lg .c4p--datagrid__cell, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--xl .c4p--datagrid__cell {
   padding-bottom: 1rem;
 }
-.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--tall .cds--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--lg .cds--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--xl .cds--table-header-label {
+.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--lg .cds--table-header-label, .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-top.c4p--datagrid__variable-row-height.cds--data-table--xl .cds--table-header-label {
   padding-bottom: 1rem;
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__variable-row-height tr.c4p--datagrid__carbon-row {
@@ -11406,6 +11406,10 @@ button.c4p--add-select__global-filter-toggle--open {
   background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
 }
 
+.c4p--datagrid__grid-container table.c4p--datagrid__table-simple.cds--data-table.c4p--datagrid__table-is-resizing {
+  overflow-y: hidden;
+}
+
 .c4p--datagrid__resizableColumn.c4p--datagrid__isResizing .c4p--datagrid__resizer {
   border-right: 0.125rem solid var(--cds-button-secondary-hover, #474747);
 }
@@ -11421,6 +11425,20 @@ button.c4p--add-select__global-filter-toggle--open {
   background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
 }
 
+.c4p--datagrid__header-actions-column:hover {
+  background-color: var(--cds-layer-accent);
+}
+
+.c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .cds--btn--icon-only {
+  opacity: 0;
+}
+
+.c4p--datagrid .c4p--datagrid__carbon-row:hover .c4p--datagrid__actions-column-cell-non-sticky .cds--btn--icon-only,
+.c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .cds--btn--icon-only:focus,
+.c4p--datagrid .c4p--datagrid__carbon-row .c4p--datagrid__actions-column-cell-non-sticky .cds--btn--icon-only[aria-expanded=true] {
+  opacity: 1;
+}
+
 .c4p--datagrid__head-hidden-select-all {
   padding-right: 3rem;
 }
@@ -16012,6 +16030,196 @@ a.cds--side-nav__link--current::before {
   border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
 }
 
+/**
+ * The InlineTip specifically is theme-agnostic, and so we have to 
+ * use color tokens to keep the colors static instead of theme tokens 
+ * that will change depending on the selected theme.
+ * 
+ * We are triggering a *large* amount of linting errors.
+ * So, we're using the following "disable" rules for the entire file 
+ * instead of many individual rules.
+ */
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+.c4p--inline-tip {
+  position: relative;
+  display: flex;
+  background: linear-gradient(90deg, #001d6c 0%, #6929c4 100%);
+}
+
+.c4p--inline-tip__wide {
+  padding: 1rem 4rem 1rem 3rem;
+}
+
+.c4p--inline-tip__wide.c4p--inline-tip__has-media {
+  padding-right: 3rem;
+}
+
+.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media {
+  padding-left: 4rem;
+}
+
+.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media img {
+  display: block;
+  height: 7.375rem;
+}
+
+.c4p--inline-tip__wide.c4p--inline-tip__has-media .c4p--inline-tip__media svg {
+  width: calc(7.375rem * 2) !important;
+  height: 7.375rem !important;
+}
+
+.c4p--inline-tip__narrow {
+  flex-direction: column-reverse;
+  padding: 3.25rem 2rem 1rem 1rem;
+}
+
+.c4p--inline-tip__narrow.c4p--inline-tip__has-media {
+  padding-top: 2rem;
+  padding-right: 1rem;
+}
+
+.c4p--inline-tip__narrow.c4p--inline-tip__has-media .c4p--inline-tip__media {
+  padding-bottom: 1rem;
+}
+.c4p--inline-tip__narrow.c4p--inline-tip__has-media .c4p--inline-tip__media img {
+  width: 100%;
+}
+
+.c4p--inline-tip__narrow.c4p--inline-tip__has-media .c4p--inline-tip__content {
+  padding-right: 1rem;
+}
+
+.c4p--inline-tip__narrow.c4p--inline-tip__has-media .c4p--inline-tip__footer {
+  justify-content: space-between;
+}
+
+.c4p--inline-tip__narrow.c4p--inline-tip__has-media .c4p--inline-tip__footer .c4p--inline-tip__close-btn {
+  margin-right: -1rem;
+}
+
+.c4p--inline-tip a {
+  color: #a6c8ff;
+}
+.c4p--inline-tip a:visited, .c4p--inline-tip a:hover, .c4p--inline-tip a:visited:hover {
+  color: #a6c8ff;
+}
+
+.c4p--inline-tip__title {
+  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);
+  color: #ffffff;
+}
+
+.c4p--inline-tip__body {
+  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);
+  color: #f4f4f4;
+}
+
+.c4p--inline-tip__body p {
+  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);
+  margin-bottom: 0.5rem;
+  font-size: inherit;
+  line-height: inherit;
+}
+.c4p--inline-tip__body p:last-of-type {
+  margin-bottom: 0;
+}
+
+.c4p--inline-tip__body .c4p--inline-tip__secondary-btn {
+  margin-top: 0.5rem;
+}
+
+.c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button {
+  margin-left: -1rem;
+  color: #a6c8ff;
+}
+.c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button:active, .c4p--inline-tip__body .c4p--inline-tip__secondary-btn .c4p--inline-tip__button:hover {
+  background-color: #7f3ae7;
+  color: #f4f4f4;
+}
+
+.c4p--inline-tip__footer {
+  display: flex;
+  padding-top: 1rem;
+}
+.c4p--inline-tip__footer:empty {
+  display: none;
+}
+
+.c4p--inline-tip__preview-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.c4p--inline-tip__icon-idea {
+  position: absolute;
+  width: 1.25rem;
+  color: #ffffff;
+  inset: 1rem 0 0 1rem;
+}
+
+.c4p--inline-tip__close-icon-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.c4p--inline-tip .c4p--inline-tip__close-icon {
+  padding: 0.375rem 0 0 0;
+  block-size: 2rem;
+  color: #ffffff;
+  inline-size: 2rem;
+  min-block-size: 2rem;
+}
+.c4p--inline-tip .c4p--inline-tip__close-icon:active, .c4p--inline-tip .c4p--inline-tip__close-icon:hover {
+  background-color: #7f3ae7;
+  color: var(--cds-text-primary, #161616);
+}
+.c4p--inline-tip .c4p--inline-tip__close-icon path {
+  margin: 0;
+  fill: #ffffff;
+}
+
+.c4p--inline-tip .c4p--inline-tip__toggle-btn {
+  border: none;
+  margin: 0 1rem 0 -1rem;
+  color: #a6c8ff;
+}
+.c4p--inline-tip .c4p--inline-tip__toggle-btn:hover {
+  background-color: #7c3dd6;
+  color: #f4f4f4;
+}
+
+.c4p--inline-tip .c4p--inline-tip__close-btn {
+  border: 0.0625rem solid #ffffff;
+  color: #ffffff;
+}
+.c4p--inline-tip .c4p--inline-tip__close-btn:active, .c4p--inline-tip .c4p--inline-tip__close-btn:hover {
+  background-color: #f4f4f4;
+  color: #161616;
+}
+.c4p--inline-tip .c4p--inline-tip__close-btn svg {
+  position: absolute;
+  right: 1rem;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
 html,
 body,
 div,