globuswebcomponents 2.10.12 → 2.11.0

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

@@ -2813,10 +2813,13 @@
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
+  background: var(--color-background-card, #ffffff);
+}
+
+.table_wrapper.list {
   border-radius: var(--rounded-md);
   border: 0.7px solid var(--color-border-subtler, #e3e8ef);
   box-shadow: var(--shadow-xs);
-  background: var(--color-background-card, #ffffff);
 }
 
 /* .table_wrapper table th:first-child,
@@ -2834,6 +2837,12 @@ gb-table-header {
   background: var(--color-background-card, #ffffff);
 }
 
+.table-header.grid {
+  overflow-y: visible;
+  border-radius: var(--rounded-md);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+}
+
 .table_scroll {
   width: 100%;
   overflow-x: auto; /* horizontal scroll */
@@ -3010,7 +3019,9 @@ table .table_detail.has_border.sticky_left::after {
   display: flex;
   justify-content: flex-end; /* align modal to right */
   opacity: 0;
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    opacity 0.3s ease;
   z-index: 1000;
 }
 
@@ -3032,7 +3043,129 @@ table .table_detail.has_border.sticky_left::after {
   opacity: 0;
 }
 
-/* Dropdown wrapper styles moved to global/dropdown-portal.css to support portal rendering */
+/* Grid View Styles */
+.table_grid_wrapper {
+  display: flex;
+  padding: var(--spacing-5) 0;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  gap: 1.5rem var(--spacing-6);
+  align-self: stretch;
+  flex-wrap: wrap;
+  opacity: 1;
+}
+
+.table_grid_card {
+  position: relative;
+  display: flex;
+  min-width: 21.25rem;
+  max-width: 21.875rem;
+  padding: var(--spacing-none);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-none);
+  flex: 1 0 0;
+  border-radius: var(--rounded-md);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-background-card, #ffffff);
+  overflow: hidden;
+}
+
+.grid_card_profile {
+  display: flex;
+  padding: 0 var(--spacing-5);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+}
+
+.grid_card_profile_content {
+  display: flex;
+  padding: var(--spacing-5) var(--spacing-none);
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  align-self: stretch;
+  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
+}
+
+.profile_details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.profile_name p {
+  color: var(--color-text-bold, #202939);
+}
+
+.profile_badges {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  align-self: stretch;
+}
+
+.grid_card_buttons {
+  display: flex;
+  padding: var(--spacing-5);
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4);
+  align-self: stretch;
+}
+
+.btn {
+  flex: 1 0 0;
+}
+
+.grid_dropdown_modal_overlay {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: var(--color-blanket-subtler, rgba(33, 44, 101, 0.4));
+  transition:
+    transform 0.3s ease,
+    opacity 0.3s ease;
+  overflow: hidden;
+  backdrop-filter: blur(4px);
+  opacity: 0;
+}
+
+.grid_dropdown_modal_overlay.open {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.grid_dropdown_modal_overlay.closing {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.grid_dropdown_modal {
+  width: 12.1875rem;
+  height: 100%;
+  border-radius: var(--rounded-sm) 0 0 var(--rounded-sm);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-background-card, #ffffff);
+  transition: transform 0.3s ease-in-out;
+}
+
+.grid_card_modal_close_button {
+  position: absolute;
+  left: 0.5rem;
+  top: 0.5rem;
+}
 
 /* Mobile Table View Styles */
 .mobile_wrapper {