@carbon/ibm-products 2.3.1 → 2.4.0

package/css/index-without-carbon.css

@@ -2942,15 +2942,15 @@ p.c4p--about-modal__copyright-text:first-child {
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-xs {
+.cds--layout-constraint--size__default-xs {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
 }
 
-.cds--layout-constraint--size\:min-xs {
+.cds--layout-constraint--size__min-xs {
   --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
 }
 
-.cds--layout-constraint--size\:max-xs {
+.cds--layout-constraint--size__max-xs {
   --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
 }
 
@@ -2959,15 +2959,15 @@ p.c4p--about-modal__copyright-text:first-child {
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-sm {
+.cds--layout-constraint--size__default-sm {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
 }
 
-.cds--layout-constraint--size\:min-sm {
+.cds--layout-constraint--size__min-sm {
   --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
 }
 
-.cds--layout-constraint--size\:max-sm {
+.cds--layout-constraint--size__max-sm {
   --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
 }
 
@@ -2976,15 +2976,15 @@ p.c4p--about-modal__copyright-text:first-child {
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-md {
+.cds--layout-constraint--size__default-md {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
 }
 
-.cds--layout-constraint--size\:min-md {
+.cds--layout-constraint--size__min-md {
   --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
 }
 
-.cds--layout-constraint--size\:max-md {
+.cds--layout-constraint--size__max-md {
   --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
 }
 
@@ -2993,15 +2993,15 @@ p.c4p--about-modal__copyright-text:first-child {
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-lg {
+.cds--layout-constraint--size__default-lg {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
 }
 
-.cds--layout-constraint--size\:min-lg {
+.cds--layout-constraint--size__min-lg {
   --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
 }
 
-.cds--layout-constraint--size\:max-lg {
+.cds--layout-constraint--size__max-lg {
   --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
 }
 
@@ -3010,15 +3010,15 @@ p.c4p--about-modal__copyright-text:first-child {
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-xl {
+.cds--layout-constraint--size__default-xl {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
 }
 
-.cds--layout-constraint--size\:min-xl {
+.cds--layout-constraint--size__min-xl {
   --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
 }
 
-.cds--layout-constraint--size\:max-xl {
+.cds--layout-constraint--size__max-xl {
   --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
 }
 
@@ -3027,15 +3027,15 @@ p.c4p--about-modal__copyright-text:first-child {
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-2xl {
+.cds--layout-constraint--size__default-2xl {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
 }
 
-.cds--layout-constraint--size\:min-2xl {
+.cds--layout-constraint--size__min-2xl {
   --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
 }
 
-.cds--layout-constraint--size\:max-2xl {
+.cds--layout-constraint--size__max-2xl {
   --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
 }
 
@@ -3044,15 +3044,15 @@ p.c4p--about-modal__copyright-text:first-child {
   --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
 }
 
-.cds--layout-constraint--density\:default-condensed {
+.cds--layout-constraint--density__default-condensed {
   --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
 }
 
-.cds--layout-constraint--density\:min-condensed {
+.cds--layout-constraint--density__min-condensed {
   --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
 }
 
-.cds--layout-constraint--density\:max-condensed {
+.cds--layout-constraint--density__max-condensed {
   --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
 }
 
@@ -3061,15 +3061,15 @@ p.c4p--about-modal__copyright-text:first-child {
   --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
 }
 
-.cds--layout-constraint--density\:default-normal {
+.cds--layout-constraint--density__default-normal {
   --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
 }
 
-.cds--layout-constraint--density\:min-normal {
+.cds--layout-constraint--density__min-normal {
   --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
 }
 
-.cds--layout-constraint--density\:max-normal {
+.cds--layout-constraint--density__max-normal {
   --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
 }
 
@@ -11864,14 +11864,19 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
   display: none;
 }
-.c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
-  left: 0.125rem;
-  width: 112px;
+
+.c4p--datagrid .c4p--datagrid__row-size-options-container .cds--popover-container .cds--btn--icon-only {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  align-items: center;
+  justify-content: center;
+  padding-top: 0;
 }
 
-.c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
-  left: 0.125rem;
-  width: 112px;
+.c4p--datagrid .c4p--datagrid__row-size-options-container .c4p--datagrid__row-size-dropdown {
+  padding: 1rem;
+  background-color: var(--cds-layer);
 }
 
 .c4p--datagrid__datagridWrap-simple {
@@ -13938,15 +13943,15 @@ a.cds--side-nav__link--current::before {
   --cds-layout-size-height:var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-xs {
+.cds--layout-constraint--size__default-xs {
   --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
 }
 
-.cds--layout-constraint--size\:min-xs {
+.cds--layout-constraint--size__min-xs {
   --cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem);
 }
 
-.cds--layout-constraint--size\:max-xs {
+.cds--layout-constraint--size__max-xs {
   --cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem);
 }
 
@@ -13955,15 +13960,15 @@ a.cds--side-nav__link--current::before {
   --cds-layout-size-height:var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-sm {
+.cds--layout-constraint--size__default-sm {
   --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
 }
 
-.cds--layout-constraint--size\:min-sm {
+.cds--layout-constraint--size__min-sm {
   --cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem);
 }
 
-.cds--layout-constraint--size\:max-sm {
+.cds--layout-constraint--size__max-sm {
   --cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem);
 }
 
@@ -13972,15 +13977,15 @@ a.cds--side-nav__link--current::before {
   --cds-layout-size-height:var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-md {
+.cds--layout-constraint--size__default-md {
   --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
 }
 
-.cds--layout-constraint--size\:min-md {
+.cds--layout-constraint--size__min-md {
   --cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem);
 }
 
-.cds--layout-constraint--size\:max-md {
+.cds--layout-constraint--size__max-md {
   --cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem);
 }
 
@@ -13989,15 +13994,15 @@ a.cds--side-nav__link--current::before {
   --cds-layout-size-height:var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-lg {
+.cds--layout-constraint--size__default-lg {
   --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
 }
 
-.cds--layout-constraint--size\:min-lg {
+.cds--layout-constraint--size__min-lg {
   --cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem);
 }
 
-.cds--layout-constraint--size\:max-lg {
+.cds--layout-constraint--size__max-lg {
   --cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem);
 }
 
@@ -14006,15 +14011,15 @@ a.cds--side-nav__link--current::before {
   --cds-layout-size-height:var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-xl {
+.cds--layout-constraint--size__default-xl {
   --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
 }
 
-.cds--layout-constraint--size\:min-xl {
+.cds--layout-constraint--size__min-xl {
   --cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem);
 }
 
-.cds--layout-constraint--size\:max-xl {
+.cds--layout-constraint--size__max-xl {
   --cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem);
 }
 
@@ -14023,15 +14028,15 @@ a.cds--side-nav__link--current::before {
   --cds-layout-size-height:var(--cds-layout-size-height-context);
 }
 
-.cds--layout-constraint--size\:default-2xl {
+.cds--layout-constraint--size__default-2xl {
   --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
 }
 
-.cds--layout-constraint--size\:min-2xl {
+.cds--layout-constraint--size__min-2xl {
   --cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem);
 }
 
-.cds--layout-constraint--size\:max-2xl {
+.cds--layout-constraint--size__max-2xl {
   --cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem);
 }
 
@@ -14040,15 +14045,15 @@ a.cds--side-nav__link--current::before {
   --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
 }
 
-.cds--layout-constraint--density\:default-condensed {
+.cds--layout-constraint--density__default-condensed {
   --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
 }
 
-.cds--layout-constraint--density\:min-condensed {
+.cds--layout-constraint--density__min-condensed {
   --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
 }
 
-.cds--layout-constraint--density\:max-condensed {
+.cds--layout-constraint--density__max-condensed {
   --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
 }
 
@@ -14057,15 +14062,15 @@ a.cds--side-nav__link--current::before {
   --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
 }
 
-.cds--layout-constraint--density\:default-normal {
+.cds--layout-constraint--density__default-normal {
   --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
 }
 
-.cds--layout-constraint--density\:min-normal {
+.cds--layout-constraint--density__min-normal {
   --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem);
 }
 
-.cds--layout-constraint--density\:max-normal {
+.cds--layout-constraint--density__max-normal {
   --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem);
 }