vuestic-ui/dist/esm-node/VaDataTableThRow.css

Vue 3 UI Framework

.va-data-table {
  --va-data-table-cell-padding: 0.625rem;
  --va-data-table-thead-line-height: 1.6;
  --va-data-table-thead-font-size: 0.625rem;
  --va-data-table-thead-font-weight: 700;
  --va-data-table-thead-text-transform: uppercase;
  --va-data-table-thead-letter-spacing: 0.6px;
  --va-data-table-thead-border: 1px solid var(--va-background-border);
  --va-data-table-tfoot-border: unset;
  --va-data-table-height: unset;
  --va-data-table-max-height: unset;
  --va-data-table-thead-color: currentColor;
  --va-data-table-tfoot-color: currentColor;
  --va-data-table-header-background: var(--va-background-primary);
  /* Hover */
  --va-data-table-hover-th-opacity: 0.3;
  /* Striped */
  --va-data-table-striped-tr-background-color: var(--va-background-element);
  --va-data-table-striped-tr-opacity: 1;
  /* Selectable */
  --va-data-table-selectable-tr-cursor: pointer;
  --va-data-table-selectable-cell-width: 55px;
  --va-data-table-selectable-cell-vertical-align: middle;
  --va-data-table-selectable-cell-text-align: center;
  /* No-data */
  --va-data-table-no-data-text-align: center;
  --va-data-table-no-data-vertical-align: middle;
  /* Animated */
  --va-data-table-transition: var(--va-transition);
  /* Grid */
  --va-data-table-grid-tbody-gap: 0.5rem;
  --va-data-table-grid-tbody-margin-top: 1rem;
  --va-data-table-grid-tr-padding: 1rem;
  --va-data-table-grid-tr-border-radius: 0.5rem;
  --va-data-table-grid-tr-border: 1px solid var(--va-background-border);
  --va-data-table-grid-tr-header-font-weight: 600;
  --va-data-table-grid-tr-header-color: var(--va-text-primary);
}
.va-data-table .va-data-table__table .va-data-table__table-th {
  padding: var(--va-data-table-cell-padding);
  width: var(--va-data-table-width);
  min-width: var(--va-data-table-width);
  text-align: var(--va-data-table-align);
  vertical-align: var(--va-data-table-vertical-align);
  font-size: var(--va-data-table-thead-font-size);
  line-height: var(--va-data-table-thead-line-height);
  font-weight: var(--va-data-table-thead-font-weight);
  text-transform: var(--va-data-table-thead-text-transform);
  letter-spacing: var(--va-data-table-thead-letter-spacing);
  cursor: var(--va-data-table-cursor);
}
.va-data-table .va-data-table__table .va-data-table__table-th .va-data-table__table-th-wrapper {
  display: flex;
  align-items: center;
}
.va-data-table .va-data-table__table .va-data-table__table-th .va-data-table__table-th-wrapper:focus-visible {
  outline: 2px solid var(--va-focus) !important;
  border-radius: "inherit";
  outline-offset: 2px;
}
.va-data-table .va-data-table__table .va-data-table__table-th .va-data-table__table-th-sorting-icon {
  opacity: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.va-data-table .va-data-table__table .va-data-table__table-th .va-data-table__table-th-sorting-icon.active {
  opacity: 1;
  pointer-events: initial;
}
.va-data-table .va-data-table__table .va-data-table__table-th .va-data-table__table-th-sorting-icon:focus-visible {
  opacity: 1;
}
.va-data-table .va-data-table__table .va-data-table__table-th span {
  flex-grow: 1;
}
.va-data-table .va-data-table__table .va-data-table__table-th:hover .va-data-table__table-th-sorting-icon:not(.active, :focus-visible) {
  opacity: var(--va-data-table-hover-th-opacity);
}