ab-ui-library 1.14.0 → 1.15.0

package/assets/styles/styles.css

@@ -3002,11 +3002,6 @@ body {
   -moz-box-direction: normal;
   -moz-box-orient: vertical;
   border-radius: var(--ds-border-radius-2xl);
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -3014,40 +3009,70 @@ body {
   position: relative;
 }
 
-.advanced-table__header {
+.advanced-table, .advanced-table__header-wrapper {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.advanced-table__header-wrapper {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  background-color: var(--ds-color-bg-white);
   border-bottom: 1px solid var(--ds-color-border-quintary);
   border-top-left-radius: var(--ds-border-radius-2xl);
   border-top-right-radius: var(--ds-border-radius-2xl);
   height: var(--ds-size-72);
+  padding: 0 var(--ds-space-24);
   z-index: 3;
 }
 
+.advanced-table__collapse-button {
+  margin-right: var(--ds-space-16);
+}
+
+.advanced-table__header {
+  -ms-flex-align: center;
+  flex: 1;
+}
+
 .advanced-table__footer, .advanced-table__header {
   -webkit-box-align: center;
   -moz-box-align: center;
-  -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
-  background-color: var(--ds-color-bg-white);
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
-  padding: 0 var(--ds-space-24);
 }
 
 .advanced-table__footer {
+  -ms-flex-align: center;
+  background-color: var(--ds-color-bg-white);
   border-bottom-left-radius: var(--ds-border-radius-2xl);
   border-bottom-right-radius: var(--ds-border-radius-2xl);
   border-top: 1px solid var(--ds-color-border-quintary);
   height: var(--ds-size-64);
+  padding: 0 var(--ds-space-24);
   z-index: 1;
 }
 
 .advanced-table__inner {
   height: calc(100% - var(--ds-size-72) - var(--ds-size-64));
   overflow-x: auto;
+  transition: height 0.3s ease-in-out;
+}
+
+.advanced-table__inner.is-collapsed {
+  height: 0;
+  overflow: hidden;
 }
 
 .advanced-table__thead {
@@ -3148,11 +3173,15 @@ body {
   width: var(--ds-space-48) !important;
 }
 
+.advanced-table table tbody tr td.with-checkbox.pinned-cell {
+  padding-left: 16px !important;
+}
+
 .advanced-table table tbody tr td.with-checkbox .actions-list__checkbox {
   display: none;
 }
 
-.advanced-table table tbody tr .action-column, .advanced-table table tbody tr td.with-checkbox .actions-list__checkbox.active-checkbox {
+.advanced-table table tbody tr td.with-checkbox .actions-list__checkbox.active-checkbox {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -3160,12 +3189,22 @@ body {
   display: flex;
 }
 
+.advanced-table table tbody tr td:not(.with-checkbox) {
+  box-sizing: border-box;
+  padding: var(--ds-space-8) var(--ds-space-16) !important;
+}
+
 .advanced-table table tbody tr .action-column {
   -webkit-box-align: center;
   -moz-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
   min-width: auto !important;
   padding: var(--ds-space-0);
   width: 0 !important;
@@ -3197,7 +3236,7 @@ body {
   background-color: var(--ds-table-td-bg-hover) !important;
 }
 
-.advanced-table table tbody tr.selected td {
+.advanced-table table tbody tr.selected td, .advanced-table table tbody tr.selected + .advanced-table__expanded-row td {
   background-color: var(--ds-table-td-bg-selected);
 }
 
@@ -3277,6 +3316,86 @@ body {
   border: 0;
 }
 
+.advanced-table__expand-button {
+  flex-shrink: 0;
+  height: var(--ds-size-32);
+  min-width: auto;
+  padding: var(--ds-space-4);
+  width: var(--ds-size-32);
+}
+
+.advanced-table__expanded-row td {
+  background-color: inherit;
+  border-bottom: 1px solid var(--ds-table-td-border-color);
+  height: var(--ds-table-td-height);
+  padding: var(--ds-table-td-padding) !important;
+  transition: background-color 0.2s ease;
+  vertical-align: middle;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content {
+  background-color: transparent;
+  padding: 0;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td {
+  background-color: transparent;
+  border-bottom: none;
+  height: var(--ds-table-td-height);
+  padding: var(--ds-table-td-padding);
+  vertical-align: middle;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox {
+  background-color: inherit;
+  max-width: var(--ds-space-48);
+  min-width: auto !important;
+  padding: var(--ds-space-8) var(--ds-space-40) var(--ds-space-8) 55px !important;
+  width: var(--ds-space-48) !important;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox .actions-list__checkbox {
+  display: flex !important;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox .indeterminate-checkbox {
+  margin: 0;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.pinned-cell {
+  background-color: inherit;
+  position: sticky;
+  z-index: 1;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.expand-column {
+  box-sizing: border-box !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+}
+
+.advanced-table__expanded-row:hover td, .advanced-table__expanded-row:hover td .advanced-table__expanded-content table tbody tr td, .advanced-table__expanded-row:hover td .advanced-table__expanded-content table tbody tr td.with-checkbox {
+  background-color: var(--ds-table-td-bg-hover);
+}
+
+tr.selected .advanced-table__expanded-row td, tr.selected .advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td, tr.selected .advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox {
+  background-color: var(--ds-table-td-bg-selected);
+}
+
+.advanced-table .expand-column {
+  box-sizing: border-box !important;
+  flex: 0 0 50px !important;
+  overflow: hidden !important;
+  padding: var(--ds-space-8) var(--ds-space-6) !important;
+  white-space: nowrap !important;
+}
+
 .with-border {
   border: 1px solid var(--ds-color-border-quintary);
 }