@sellmate/design-system 1.0.62 → 1.0.63

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

@@ -1,46 +1,84 @@
-.sd-table__wrapper {
+sd-table,
+:host {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+sd-table *,
+:host * {
+  box-sizing: border-box;
+}
+
+.sd-table__container {
   height: var(--table-height, auto);
   width: var(--table-width, 100%);
+  max-width: 100%;
+  min-width: 0;
   color: #222222;
+  display: flex;
+  flex-direction: column;
+}
+
+.sd-table__clip {
+  width: 100%;
+  min-width: 0;
+  height: var(--table-container-height, 400px);
+  border: 1px solid #E1E1E1;
+  border-radius: 8px;
+  overflow: hidden;
 }
-.sd-table__wrapper .sd-table__container {
+.sd-table__clip--has-pagination {
+  border-radius: 8px 8px 0 0;
+}
+
+.sd-table__wrapper {
   width: 100%;
-  height: var(--table-container-height, auto);
+  height: 100%;
   display: flex;
   flex-direction: column;
   position: relative;
-  border: 1px solid #E1E1E1;
-  border-radius: 8px;
   font-size: 12px;
-  overflow: hidden;
+  overflow: auto;
   background: #FFFFFF;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle {
-  overflow: auto;
-  will-change: scroll-position;
-  min-height: var(--table-container-height, auto);
+.sd-table__wrapper--loading {
+  overflow: hidden !important;
+  pointer-events: none;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable {
-  height: var(--table-container-height, auto);
+.sd-table__wrapper--no-data {
+  overflow: hidden;
+  pointer-events: none;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle--loading {
-  overflow: hidden !important;
+
+.sd-table__no-data {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #888888;
   pointer-events: none;
+  z-index: 200;
+  background: rgba(255, 255, 255, 0.6);
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner {
+
+.sd-table__loading {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: var(--table-container-height, 100%);
-  min-height: var(--table-container-height, 100%);
+  height: 100%;
   background: rgba(255, 255, 255, 0.6);
   z-index: 200;
   display: flex;
   align-items: center;
   justify-content: center;
+  pointer-events: none;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table {
+
+.sd-table {
   background-color: white;
   display: table;
   width: 100%;
@@ -48,197 +86,35 @@
   border-spacing: 0;
   table-layout: fixed;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll {
-  position: relative;
-  height: var(--total-virtual-height, --table-container-height, auto);
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]) {
-  width: 100%;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true] {
-  padding: 0;
-  border: none;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td {
-  display: none;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected {
-  position: relative;
-  width: 52px !important;
-  max-width: 52px !important;
-  min-width: 52px !important;
-  padding: 0 10px 0 24px;
-  text-align: left;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label {
-  position: relative;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label:before,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label:before {
-  content: "";
-  position: absolute;
-  inset: -6px;
+.sd-table--selectable sd-thead,
+.sd-table--selectable sd-tbody {
+  --selectable: true;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead {
+.sd-table--sticky-header sd-thead thead {
   position: sticky;
   top: 0;
   z-index: 120;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right {
-  position: sticky;
-  background-color: #F5FAFF;
-  z-index: 110 !important;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right {
-  position: sticky;
-  background-color: white;
-  z-index: 100 !important;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left {
-  left: var(--sticky-left-offset, 0);
+.sd-table--sticky-column sd-thead,
+.sd-table--sticky-column sd-tbody {
+  --sticky-column: true;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right {
-  right: var(--sticky-right-offset, 0);
+.sd-table--scrolled-left sd-thead,
+.sd-table--scrolled-left sd-tbody {
+  --scrolled-left: true;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell {
-  position: sticky;
-  z-index: 102;
-  background-color: #F5FAFF;
+.sd-table--scrolled-right sd-thead,
+.sd-table--scrolled-right sd-tbody {
+  --scrolled-right: true;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell {
-  position: sticky;
-  z-index: 101;
-  background-color: white;
+.sd-table--resizable sd-thead {
+  --resizable: true;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge {
-  overflow: visible;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 100%;
-  right: -20px;
-  width: 20px;
-  height: 100%;
-  z-index: 101 !important;
-  box-shadow: inset 12px 0 20px -25px;
-  opacity: 1;
-  pointer-events: none;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge {
-  overflow: visible;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -20px;
-  width: 20px;
-  height: 100%;
-  z-index: 101 !important;
-  box-shadow: inset -12px 0 20px -25px;
-  opacity: 1;
-  pointer-events: none;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead {
+.sd-table--no-data sd-thead {
   opacity: 0.4;
 }
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th {
-  border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead {
-  height: 36px;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr {
-  width: 100%;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th {
-  background: #F5FAFF;
-  height: 36px;
-  padding: 0 16px;
-  font-weight: 500;
-  vertical-align: middle;
-  border-bottom: 1px solid #E1E1E1;
-  -webkit-user-select: none;
-  user-select: none;
-  position: relative;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: 4px;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left {
-  justify-content: flex-start;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center {
-  justify-content: center;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right {
-  justify-content: flex-end;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  width: 4px;
-  height: 16px;
-  cursor: col-resize;
-  z-index: 3;
-  border-left: 1px solid #CCCCCC;
-  border-right: 1px solid #CCCCCC;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td {
-  height: 44px;
-  padding: 0 16px;
-  border-bottom: 1px solid #E1E1E1;
-  background: white;
-  vertical-align: middle;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left {
-  text-align: left;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center {
-  text-align: center;
-}
-.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right {
-  text-align: right;
-}
-.sd-table__wrapper .sd-table__container .sd-table__bottom {
-  background: transparent;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  min-height: 240px;
-  translate: 0 -10%;
-  pointer-events: none;
-}
-.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data {
-  font-size: 12px;
-  color: #888888;
-}
-.sd-table__wrapper .sd-table__pagination {
+
+.sd-table__pagination {
   position: relative;
   background: #F9F9F9;
   height: 48px;
@@ -247,59 +123,11 @@
   justify-content: center;
   border: 1px solid #E1E1E1;
   border-top: none;
-  border-radius: 8px;
+  border-radius: 0 0 8px 8px;
 }
-.sd-table__wrapper .sd-table__pagination sd-select {
+.sd-table__pagination sd-select-v2 {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
-}
-.sd-table__wrapper .sd-table__virtual-spacer,
-.sd-table__wrapper .sd-table__virtual-row-spacer {
-  padding: 0 !important;
-}
-.sd-table__wrapper .sd-table__virtual-spacer td,
-.sd-table__wrapper .sd-table__virtual-row-spacer td {
-  padding: 0 !important;
-  border: none;
-}
-.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,
-.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton {
-  width: 100%;
-  height: 100%;
-  background-image: repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));
-  background-size: 100% 200%;
-  animation: skeleton-loading 1.5s ease-in-out infinite;
-  position: relative;
-}
-.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,
-.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #E1E1E1 calc(var(--row-height, 44px) - 1px), #E1E1E1 var(--row-height, 44px));
-  pointer-events: none;
-}
-.sd-table__wrapper .sd-table__skeleton-cell {
-  width: 100%;
-  height: 20px;
-  background: linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.5s ease-in-out infinite;
-  border-radius: 4px;
-}
-@keyframes skeleton-loading {
-  0% {
-    background-position: 0% 0%;
-  }
-  50% {
-    background-position: 100% 100%;
-  }
-  100% {
-    background-position: 0% 0%;
-  }
 }