@carbon/ibm-products 2.0.0-rc.18 → 2.0.0-rc.19

package/css/index-full-carbon.css

@@ -4082,6 +4082,7 @@
 .c4p--filter-summary {
   display: flex;
   width: 100%;
+  height: rem(48px);
   align-items: center;
   padding: 0.5rem;
   border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
@@ -10586,39 +10587,35 @@ button.c4p--add-select__global-filter-toggle--open {
   flex-direction: row;
 }
 
-.c4p--datagrid__datagridLeftPanel {
-  display: flex;
-  width: 388px;
-  background-color: var(--cds-layer-01, #f4f4f4);
-}
-
-.c4p--datagrid__leftPanel-position {
-  display: inherit;
+.c4p--datagrid__table-container-inner {
+  overflow: hidden;
+  flex: 1;
 }
 
 .c4p--datagrid__datagridWithPanel {
   position: relative;
   display: flex;
-  width: 100%;
   height: 100%;
   flex-direction: column;
 }
 .c4p--datagrid__datagridWithPanel .c4p--datagrid__grid-container {
   display: flex;
-  overflow: hidden;
+  overflow: visible;
   flex-direction: column;
 }
 .c4p--datagrid__datagridWithPanel .c4p--datagrid__table-toolbar {
   width: 100%;
 }
-.c4p--datagrid__datagridWithPanel .c4p--datagrid__datagridLeftPanel {
-  flex: 0 0 auto;
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
+  display: flex;
+  overflow: visible;
+  background-color: var(--cds-layer-01, #f4f4f4);
 }
-.c4p--datagrid__datagridWithPanel .cds--data-table-content {
-  flex: 1 1 0%;
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container .c4p--datagrid__filter-summary {
+  border-bottom: 1px solid var(--cds-layer-03, #f4f4f4);
 }
-.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-container {
-  overflow: hidden;
+.c4p--datagrid__datagridWithPanel .c4p--datagrid__table-simple {
+  height: 100%;
 }
 
 .c4p--datagrid__table-container {
@@ -10627,6 +10624,7 @@ button.c4p--add-select__global-filter-toggle--open {
   overflow: auto;
   width: 100%;
   max-height: 100%;
+  overflow-y: auto;
 }
 
 .c4p--datagrid__carbon-row-expanded {
@@ -10660,7 +10658,7 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-bottom: 1rem;
 }
 .c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
-  flex: 0 0 auto;
+  flex: 1 0 auto;
 }
 .c4p--datagrid__dense-header .cds--table-toolbar {
   background: transparent;
@@ -11117,12 +11115,12 @@ button.c4p--add-select__global-filter-toggle--open {
 */
 .c4p--datagrid__row-size-dropdown {
   padding: 1rem;
-  background-color: var(--cds-background, #ffffff);
+  background-color: var(--cds-layer-02, #ffffff);
   box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
 }
 
-.c4p--datagrid__row-size-button--open {
-  background-color: var(--cds-background, #ffffff);
+.cds--btn--ghost.c4p--datagrid__row-size-button--open {
+  background-color: var(--cds-layer-02, #ffffff);
   box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
 }
 
@@ -11206,6 +11204,123 @@ button.c4p--add-select__global-filter-toggle--open {
   margin-bottom: 0;
 }
 
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2022
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+.c4p--datagrid-filter-panel__container {
+  position: relative;
+  width: rem(320px);
+  height: clamp(var(--filter-panel-min-height), 100%, 100vh);
+  border-top: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
+  background-color: var(--cds-layer-01, #f4f4f4);
+}
+
+.c4p--datagrid-filter-panel--open {
+  border-right: 1px var(--cds-layer-accent-01, #e0e0e0) solid;
+}
+
+.c4p--datagrid-filter-panel__container::before {
+  position: absolute;
+  top: -1px;
+  left: 0;
+  display: block;
+  width: rem(47px);
+  height: 1px;
+  background-color: var(--cds-layer-01, #f4f4f4);
+  content: "";
+}
+
+.c4p--datagrid-filter-panel__inner-container {
+  position: relative;
+  z-index: 0;
+  overflow: auto;
+  padding: 0 1rem;
+  overscroll-behavior: contain;
+}
+
+.c4p--datagrid-filter-panel__inner-container .c4p--datagrid-filter-panel__category:last-of-type {
+  padding-bottom: 5rem;
+}
+
+.c4p--datagrid-filter-panel {
+  position: sticky;
+  top: 0;
+}
+
+.c4p--datagrid-filter-panel__heading {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 1rem;
+  border-bottom: 1px solid transparent;
+}
+
+.c4p--datagrid-filter-panel__heading--with-divider {
+  border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
+}
+
+.c4p--datagrid-filter-panel__title {
+  padding: 1rem 0;
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: var(--cds-heading-compact-02-font-weight, 600);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+  letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
+}
+
+.c4p--datagrid-filter-panel__search {
+  padding: 0 1rem 1.5rem;
+}
+
+.c4p--datagrid-filter-panel__category-title {
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
+  margin-bottom: 1rem;
+  color: var(--cds-text-secondary, #525252);
+}
+
+.c4p--datagrid-filter-panel__category {
+  padding-bottom: 1.5rem;
+}
+
+.c4p--datagrid-filter-panel__category > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
+  margin-bottom: 1rem;
+}
+
+.c4p--datagrid-filter-panel__action-set {
+  position: sticky;
+  z-index: 1;
+  bottom: 0;
+  height: rem(64px);
+  margin-top: auto;
+}
+
+.c4p--datagrid-filter-panel__container .cds--accordion__title {
+  margin: 0;
+}
+
+.c4p--datagrid-filter-panel__container .cds--accordion__arrow {
+  margin: 0.125rem 0 0;
+}
+
+.c4p--datagrid-filter-panel__container .cds--accordion__content {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.c4p--datagrid-filter-panel__container .cds--accordion__content > *:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.cds--btn.c4p--datagrid-filter-panel-open-button {
+  border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
+  border-bottom: none;
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36