@jetbrains/ring-ui 7.0.124 → 8.0.0-beta.10

package/components/table/table.css

@@ -1,260 +1,249 @@
 @import '../global/variables.css';
 
-.tableWrapper {
-  --ring-table-compensate: 2px;
-  --ring-table-compensated: calc(calc(4 * var(--ring-unit)) - var(--ring-table-compensate));
-  --ring-table-top: -3px;
-
-  position: relative;
-  font-variant-numeric: var(--ring-font-variant-numeric);
-}
-
 .table {
+  --reorder-animation-fade-out-duration: 600ms;
+
   width: 100%;
 
   border-spacing: 0;
-}
 
-.userSelectNone {
-  user-select: none;
+  border-style: none;
 }
 
-.headerCell {
-  composes: font-smaller-lower from '../global/global.css';
-
-  box-sizing: border-box;
-  height: calc(var(--ring-unit) * 3);
-  padding-right: calc(var(--ring-unit) * 5);
-
-  text-align: left;
-  white-space: nowrap;
+.stickyHeader {
+  position: sticky;
+  z-index: var(--ring-overlay-z-index);
 
-  color: var(--ring-secondary-color);
+  top: 0;
 
-  font-weight: normal;
+  background-color: rgba(var(--ring-content-background-components), 0.85);
+  backdrop-filter: blur(8px);
 }
 
-.headerCell:first-child {
-  padding-left: calc(var(--ring-unit) * 4);
+@property --header-cell-shadow-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
 }
 
-.headerCell:last-child {
-  width: 100%;
-  padding-right: calc(var(--ring-unit) * 4);
-}
+.headerCell {
+  margin: 0;
 
-.headerCell:first-child:only-child {
-  width: initial;
-  max-width: none;
-}
+  padding: calc(var(--ring-unit) * 0.75) var(--ring-unit);
 
-.headerCell.headerCellSorted {
-  font-weight: var(--ring-font-weight-bold);
-}
+  transition: background-color var(--ring-fast-ease), --header-cell-shadow-color var(--ring-fast-ease);
 
-.headerCell.headerCellSortable {
-  cursor: pointer;
-}
-
-.headerCell .sorter {
-  position: absolute;
-  top: 5px;
+  border-bottom: 1px solid var(--ring-line-color);
 
-  display: none;
+  box-shadow: inset 1px 0 0 var(--header-cell-shadow-color), 1px 0 0 var(--header-cell-shadow-color);
 
-  margin-left: 5px;
+  &:hover {
+    --header-cell-shadow-color: var(--ring-line-color);
 
-  user-select: none;
+    &:not(.reorderAnimationInitial, .reorderAnimationFadeOut) {
+      background-color: var(--ring-grey-container-light-color);
+    }
+  }
 }
 
-.headerCell.headerCellSortable .sorter {
-  display: inline-block;
-}
+.headerCellInnerWrapper {
+  display: flex;
+  justify-content: start;
 
-.sortedUp .icon {
-  transform: rotate(180deg);
-  transform-origin: center 44%;
-}
+  color: var(--ring-secondary-color);
 
-.caption {
-  padding-top: var(--ring-unit);
-  padding-bottom: 6px;
+  font-size: var(--ring-font-size-smaller);
+  font-weight: normal;
 
-  color: var(--ring-text-color);
-  border-bottom: 0;
+  .sortAndHeader {
+    flex-grow: 1;
 
-  font-size: var(--ring-font-size);
-  font-weight: var(--ring-font-weight-bold);
-  line-height: var(--ring-line-height-lower);
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  .rightButtons {
+    margin-left: 4px;
+  }
 }
 
-.tableHead::after {
-  position: absolute;
+.tableButton {
+  margin: unset;
+  padding: unset;
 
-  width: 100%;
+  cursor: pointer;
 
-  height: 1px;
+  transition: color var(--ring-fast-ease);
+  text-align: unset;
 
-  content: '';
+  color: unset;
+  border: unset;
+  background: unset;
 
-  background-color: var(--ring-line-color);
-}
+  font: unset;
 
-.subHeaderSticky {
-  position: sticky;
+  &:hover {
+    color: var(--ring-main-hover-color);
+  }
 
-  z-index: var(--ring-fixed-z-index);
-  top: 0;
+  &:focus-visible {
+    border-radius: 2px;
+    outline: 2px solid var(--ring-button-focus-border-color);
+  }
 
-  background-color: rgba(var(--ring-content-background-components), 0.9);
+  &:focus-within {
+    color: var(--ring-main-hover-color);
+  }
 }
 
-.row {
-  outline: none;
+.deleteColumnButton {
+  pointer-events: none;
 
-  line-height: var(--ring-table-compensated);
-}
+  color: transparent;
 
-/* stylelint-disable-next-line selector-max-specificity */
-.table:not(.disabledHover) .row:hover {
-  background-color: var(--ring-hover-background-color);
-}
+  .theadColumnEditing &,
+  .headerCell:hover &,
+  &:focus {
+    pointer-events: unset;
+  }
 
-.rowSelected {
-  background-color: var(--ring-selected-background-color);
-}
+  /* stylelint-disable-next-line selector-max-specificity */
+  .theadColumnEditing &:not(:focus),
+  /* stylelint-disable-next-line selector-max-specificity */
+  .headerCell:hover &:not(:focus) {
+    color: unset;
+  }
 
-.rowFocused {
-  background-color: var(--ring-hover-background-color);
-}
-/* stylelint-disable-next-line selector-max-specificity */
-.rowFocused .cell:nth-child(1) {
-  box-shadow: inset 2px 0 var(--ring-main-color);
+  /* stylelint-disable-next-line selector-max-specificity */
+  .headerCell:hover &:hover:not(:focus),
+  &:focus {
+    color: var(--ring-main-hover-color);
+  }
 }
 
-.loadingOverlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+.columnReorderHandle {
+  overflow: hidden;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  width: 0;
 
-  background-color: var(--ring-table-loader-background-color);
-}
+  cursor: grab;
 
-.cell {
-  composes: ellipsis from '../global/global.css';
+  transition: color var(--ring-fast-ease), width var(--ring-fast-ease), margin-right var(--ring-fast-ease);
 
-  box-sizing: content-box;
+  border-radius: var(--ring-border-radius);
+  touch-action: none;
+}
 
-  min-width: 0;
+.itemReorderHandle {
+  cursor: grab;
 
-  height: calc(4 * var(--ring-unit));
-  padding: 0;
-  padding-right: calc(var(--ring-unit) * 5);
+  color: var(--ring-secondary-color);
 
-  color: var(--ring-text-color);
+  border-radius: var(--ring-border-radius);
+  touch-action: none;
 }
 
-.cell:first-child {
-  padding-left: calc(var(--ring-unit) * 4);
+.theadColumnEditing .columnReorderHandle,
+.headerCell:hover .columnReorderHandle,
+.columnReorderHandle:focus-visible {
+  width: 12px;
+  margin-right: 4px;
 }
 
-.cell:last-child {
-  width: 100%;
+.columnReorderHandleMirror {
+  display: inline-block;
 
-  /* Markup hack, allows cell to have content which is wider than cell and collapses it */
+  width: 12px;
+  margin-left: 4px;
 
-  max-width: 0;
-  padding-right: calc(var(--ring-unit) * 4);
+  transition: width var(--ring-fast-ease), margin-left var(--ring-fast-ease);
 }
 
-.wideFirstColumn .cell:first-child {
-  min-width: calc(var(--ring-unit) * 37);
-  max-width: calc(var(--ring-unit) * 77);
+.theadColumnEditing .columnReorderHandleMirror,
+.headerCell:hover .columnReorderHandleMirror,
+.columnReorderHandle:focus-visible ~ .columnReorderHandleMirror {
+  width: 0;
+  margin-left: 0;
 }
 
-.cell:first-child:only-child {
-  width: initial;
-  max-width: none;
-}
+.editColumnsButton {
+  & svg {
+    transition: transform var(--ring-fast-ease);
+  }
 
-.cellUnlimited {
-  width: 100%;
+  .theadColumnEditing & svg {
+    transform: rotate(90deg);
+  }
 }
 
-.cellRight {
-  text-align: right;
-}
+.dragFrame {
+  position: fixed;
 
-.metaColumn {
-  position: relative;
+  z-index: var(--ring-overlay-z-index);
 
-  float: left;
+  pointer-events: none;
 
-  height: 16px;
-  padding-right: var(--ring-table-compensate);
-}
+  border: 2px solid var(--ring-border-accent-color);
+  border-radius: calc(2 * var(--ring-border-radius));
 
-.metaColumn.headerMetaColumn {
-  padding-top: 1px;
+  background-color: rgba(var(--ring-border-accent-components), 0.06);
 }
 
-.dragHandle {
-  top: var(--ring-table-top);
-  left: calc(-2 * var(--ring-unit));
+.insertionIndicator {
+  position: fixed;
 
-  cursor: grab;
+  z-index: var(--ring-overlay-z-index);
 
-  opacity: 0;
+  background-color: var(--ring-main-color);
 }
 
-/* override button */
-.dragHandle.dragHandle {
-  position: absolute;
+.reorderAnimationInitial {
+  transition: none;
 
-  height: calc(calc(4 * var(--ring-unit)) - var(--ring-table-top));
-  padding: 0;
+  background-color: rgba(var(--ring-border-accent-components), 0.12);
 }
 
-.dragHandle.visibleDragHandle,
-.row:hover .dragHandle {
-  opacity: 1;
-}
+.reorderAnimationFadeOut {
+  transition: background-color var(--reorder-animation-fade-out-duration) ease-out;
 
-.rowCollapseExpandButton {
-  padding-right: calc(var(--ring-unit) / 2);
-  padding-left: 7px;
+  background-color: transparent;
 }
 
-.draggingRow {
-  z-index: var(--ring-overlay-z-index);
+.spacerRow {
+  margin: 0;
+  padding: 0;
 
-  background-color: var(--ring-hover-background-color);
+  border: 0;
 }
 
-.draggingRow .dragHandle {
-  cursor: grabbing;
+.spacerCell {
+  margin: 0;
+  padding: 0;
 
-  opacity: 1;
+  border: 0;
 }
 
-.draggingRow .dragHandle svg {
-  color: var(--ring-main-color);
+.row:focus {
+  border-radius: var(--ring-border-radius);
+  outline: 2px solid var(--ring-button-focus-border-color);
 }
 
-.draggingTable {
-  z-index: var(--ring-overlay-z-index);
+.clickableRow {
+  cursor: pointer;
 
-  border-spacing: 0;
+  transition: background-color var(--ring-fast-ease);
+
+  &:not(.selectedRow):hover {
+    background-color: var(--ring-hover-background-color);
+  }
+}
+
+.selectedRow {
+  background-color: var(--ring-selected-background-color);
 }
 
-.tableMessage {
-  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
+.cell {
+  padding: var(--ring-unit);
 
-  color: var(--ring-secondary-color);
+  border-bottom: 1px solid var(--ring-line-color);
 }