globuswebcomponents 2.8.11 → 2.9.0

package/dist/collection/components/gb-table/gb-table.css

@@ -2785,6 +2785,7 @@
 
 .table_wrapper {
   width: 100%;
+  overflow: visible;
 }
 
 /* .table_wrapper table th:first-child,
@@ -2817,24 +2818,47 @@ thead {
 }
 
 .table_head_row {
-  text-align: left;
   width: 100%;
-  align-items: center;
-  gap: 0.75rem;
-  align-self: stretch;
-  border-bottom: 1px solid var(--color-border-subtle #cdd5df);
+  border-bottom: 1px solid var(--color-border-subtle, #cdd5df);
   background: var(--color-background-gray-subtler, #eef2f6);
 }
 
 .table_head_row th {
+  /* display: flex; */
+  justify-content: space-between;
+  align-items: center;
   padding: 0.75rem 1.5rem;
 }
 
+.table_head_content {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.align_left {
+  flex-direction: row;
+}
+
+.align_right {
+  flex-direction: row-reverse;
+}
+
 .head_text,
 .body_text {
   color: var(--color-text, #4b5565);
 }
 
+.head_text.sortable:hover {
+  color: var(--color-text-bold, #202939);
+}
+
+.table_head_icons {
+  display: flex;
+  gap: var(--spacing-1);
+}
+
 .body_text {
   width: 100%;
   white-space: nowrap;
@@ -2861,18 +2885,24 @@ thead {
   z-index: 3;
 }
 
+.sticky_right {
+  position: sticky;
+  right: 0;
+  z-index: 3;
+}
+
 th.sticky_left,
-th.sticky_right{
+th.sticky_right {
   background: var(--color-background-gray-subtler, #eef2f6);
 }
 
 .table_detail.sticky_left,
-.table_detail.sticky_right{
+.table_detail.sticky_right {
   background: var(--color-background-card, #ffffff);
 }
 
-th.sticky_left::after,
-th.sticky_right::after {
+table th.has_border.sticky_left::after,
+table .table_detail.has_border.sticky_left::after {
   content: '';
   position: absolute;
   top: 0;
@@ -2883,40 +2913,125 @@ th.sticky_right::after {
   pointer-events: none;
 }
 
-.table_detail.sticky_left::after .table_detail.sticky_right::after {
+.actions_cell.has_border.sticky_right::after {
   content: '';
   position: absolute;
   top: 0;
-  right: 0;
+  left: 0;
   width: 4px;
   height: 100%;
-  box-shadow: 2px 0 6px var(--color-border-subtle, #cdd5df);
+  box-shadow: -2px 0 2px var(--color-border-subtle, #cdd5df);
   pointer-events: none;
-  background: var(--color-background-card, #ffffff);
-}
-
-.sticky_right {
-  position: sticky;
-  right: 0;
-  z-index: 1;
 }
 
-.empty_div{
+.empty_div {
   height: 100%;
   width: 70px;
 }
 
-#dropdown_button{
+#dropdown_button {
   position: relative;
 }
 
-.dropdown_wrapper{
-    width: max-content;
-    border-radius: var(--rounded-sm);
-    border: 1px solid var(--color-border-subtler, #e3e8ef);
-    background: var(--color-surface, #ffffff);
-    box-shadow: var(--shadow-md);
-    padding-right: 0.5rem;
-    position: absolute;
-    z-index: 1000;
-}
+.action_buttons {
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+.dropdown_wrapper {
+  width: 9.5rem;
+  border-radius: var(--rounded-sm);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-surface, #ffffff);
+  box-shadow: var(--shadow-md);
+  position: absolute;
+  /* z-index: 1000; */
+}
+
+/* Mobile Table View Styles */
+.mobile_wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile_card_wrapper {
+  display: flex;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
+}
+
+.mobile-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-6) var(--spacing-4);
+  align-items: center;
+  gap: var(--spacing-5);
+}
+
+.mobile-row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  /* gap: var(--spacing-4); */
+  flex: 1 0 0;
+}
+
+.mobile-bottom {
+  align-items: flex-end;
+  text-align: right;
+}
+
+/* .mobile-top .mobile-cell:first-child {
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.mobile-top .mobile-cell.right {
+  font-weight: 600;
+  font-size: 16px;
+} */
+
+.mobile-cell {
+  min-width: 0;
+}
+
+.mobile-cell.right {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1;
+  text-align: right;
+}
+
+.top_left_text,
+.top_right_text {
+  max-width: 11rem;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+  margin: 0;
+}
+
+.top_left_text,
+.top_right_text {
+  color: var(--color-text, #4b5565);
+}
+
+.bottom_left_text {
+  color: var(--color-text-subtle, #697586);
+}
+
+.empty_state_wrapper {
+  display: flex;
+  padding: 2.5rem 2rem 3rem 2rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  overflow: hidden;
+}