react-select-table/dist/esm/index.css

React table component with selectable items

/* src/scss/style.scss */
.rst-container {
  margin: var(--rst-root-container_margin);
  background-color: var(--rst-root-container_background-color);
}
.rst-container .rst-row {
  border-color: var(--rst-row_border-color);
}
.rst-container .rst-row > * {
  padding: var(--rst-cell_padding);
  border-bottom-width: var(--rst-row_border-width);
  border-bottom-style: var(--rst-row_border-style);
  border-bottom-color: var(--rst-row_border-color);
  border-left-width: var(--rst-column_border-width);
  border-left-style: var(--rst-column_border-style);
  border-left-color: var(--rst-column_border-color);
  background-clip: padding-box;
  border-top: none;
  border-bottom-color: inherit;
}
.rst-container .rst-row .rst-spacer {
  border-left: none;
}
.rst-container .rst-row .rst-header {
  font-weight: var(--rst-header_font-weight);
  box-shadow: inset var(--rst-column-separator_width) 0 0 0 var(--rst-column-separator_color);
  padding-right: var(--rst-column-separator_width);
}
.rst-container .rst-row .rst-endCap {
  padding: 0;
  box-shadow: calc((var(--rst-column-separator_width) / 2) * -1) calc((var(--rst-column-separator_width) / 2) * -1) 0 calc(var(--rst-column-separator_width) / 2) var(--rst-column-separator_color);
  box-shadow: calc(calc(var(--rst-column-separator_width) / 2) * -1) calc(calc(var(--rst-column-separator_width) / 2) * -1) 0 calc(var(--rst-column-separator_width) / 2) var(--rst-column-separator_color);
}
.rst-container .rst-endCap {
  width: var(--rst-column_border-width);
}
.rst-container .rst-clippingStopper {
  padding-left: var(--rst-column_border-width);
}
.rst-container .rst-headerContent > * {
  margin-right: var(--rst-head_icon-spacing);
}
.rst-container .rst-scrollingContainer {
  color: var(--rst-body_color);
  vertical-align: var(--rst-body_vertical-align);
  text-align: var(--rst-body_text-align);
  background-color: var(--rst-body_background-color);
}
.rst-container .rst-scrollingContainer[data-drag-mode=resize] .rst-head {
  -o-border-image: var(--rst-head_border-image);
  border-image: var(--rst-head_border-image);
  -o-border-image: var(--rst-head_resizing_border-image, var(--rst-head_border-image));
  border-image: var(--rst-head_resizing_border-image, var(--rst-head_border-image));
}
.rst-container .rst-scrollingContainer[data-drag-mode=resize] .rst-body {
  opacity: var(--rst-body_opacity);
  opacity: var(--rst-body_resizing_opacity, var(--rst-body_opacity));
}
.rst-container .rst-head {
  border-bottom-width: var(--rst-head_border-width);
  border-bottom-style: var(--rst-head_border-style);
  border-bottom-color: var(--rst-head_border-color);
  color: var(--rst-head_color);
  vertical-align: var(--rst-head_vertical-align);
  text-align: var(--rst-head_text-align);
  background-color: var(--rst-head_background-color);
}
.rst-container .rst-head .rst-row:last-child > * {
  border-bottom: none;
}
.rst-container .rst-placeholder {
  padding: var(--rst-placeholder_padding);
  text-align: var(--rst-placeholder_text-align);
  color: var(--rst-placeholder_color);
}
.rst-container .rst-body .rst-row > * {
  background-color: var(--overlay-color);
}
.rst-container .rst-body .rst-row > * {
  box-shadow: inset 0 calc(0px * -1) 0 0 var(--underline-color);
  box-shadow: inset 0 calc(var(--underline-width, 0px) * -1) 0 0 var(--underline-color);
}
.rst-container .rst-body .rst-row:nth-of-type(even) {
  color: var(--rst-row_color);
  color: var(--rst-row_striped_color, var(--rst-row_color));
  --overlay-color: var(--rst-row_striped_overlay-color, var(--rst-row_overlay-color));
}
.rst-container .rst-body .rst-row:hover {
  color: var(--rst-row_color);
  color: var(--rst-row_hover_color, var(--rst-row_color));
  --overlay-color: var(--rst-row_hover_overlay-color, var(--rst-row_overlay-color));
}
.rst-container .rst-row[data-is-active] {
  --underline-width: var(--rst-row_active_underline-width, var(--rst-row_underline-width));
  --underline-color: var(--rst-row_active_underline-color, var(--rst-row_underline-color));
}
.rst-container[focus-within] .rst-row[data-is-active] {
  --underline-color: var(--rst-row_active_focused_underline-color, var(--rst-row_active_underline-color, var(--rst-row_underline-color)));
}
.rst-container:focus-within .rst-row[data-is-active] {
  --underline-color: var(--rst-row_active_focused_underline-color, var(--rst-row_active_underline-color, var(--rst-row_underline-color)));
}
.rst-container .rst-row[data-is-selected] {
  color: var(--rst-row_color);
  color: var(--rst-row_selected_color, var(--rst-row_color));
  border-color: var(--rst-row_border-color);
  border-color: var(--rst-row_selected_border-color, var(--rst-row_border-color));
  background-color: var(--rst-row_background-color);
  background-color: var(--rst-row_selected_background-color, var(--rst-row_background-color));
}
.rst-container[focus-within] .rst-row[data-is-selected] {
  color: var(--rst-row_color);
  color: var(--rst-row_selected_focused_color, var(--rst-row_selected_color, var(--rst-row_color)));
  border-color: var(--rst-row_border-color);
  border-color: var(--rst-row_selected_focused_border-color, var(--rst-row_selected_border-color, var(--rst-row_border-color)));
  background-color: var(--rst-row_background-color);
  background-color: var(--rst-row_selected_focused_background-color, var(--rst-row_selected_background-color, var(--rst-row_background-color)));
}
.rst-container[focus-within] .rst-row[data-is-selected] {
  color: var(--rst-row_color);
  color: var(--rst-row_color);
  color: var(--rst-row_selected_focused_color, var(--rst-row_selected_color, var(--rst-row_color)));
  border-color: var(--rst-row_border-color);
  border-color: var(--rst-row_border-color);
  border-color: var(--rst-row_selected_focused_border-color, var(--rst-row_selected_border-color, var(--rst-row_border-color)));
  background-color: var(--rst-row_background-color);
  background-color: var(--rst-row_background-color);
  background-color: var(--rst-row_selected_focused_background-color, var(--rst-row_selected_background-color, var(--rst-row_background-color)));
}
.rst-container:focus-within .rst-row[data-is-selected] {
  color: var(--rst-row_color);
  color: var(--rst-row_selected_focused_color, var(--rst-row_selected_color, var(--rst-row_color)));
  border-color: var(--rst-row_border-color);
  border-color: var(--rst-row_selected_focused_border-color, var(--rst-row_selected_border-color, var(--rst-row_border-color)));
  background-color: var(--rst-row_background-color);
  background-color: var(--rst-row_selected_focused_background-color, var(--rst-row_selected_background-color, var(--rst-row_background-color)));
}
.rst-container .rst-columnResizer {
  transform: translateX(var(--rst-column-separator_width));
  width: var(--rst-column-resizer_width);
}
.rst-container .rst-header[data-is-resizing] .rst-columnResizer,
.rst-container .rst-spacer[data-is-resizing] .rst-columnResizer {
  border-right-width: var(--rst-column-resizer_border-width);
  border-right-width: var(--rst-column-resizer_resizing_border-width, var(--rst-column-resizer_border-width));
  border-right-style: var(--rst-column-resizer_border-style);
  border-right-style: var(--rst-column-resizer_resizing_border-style, var(--rst-column-resizer_border-style));
  border-right-color: var(--rst-column-resizer_border-color);
  border-right-color: var(--rst-column-resizer_resizing_border-color, var(--rst-column-resizer_border-color));
  transform: none;
  height: 100vh;
}
.rst-container .rst-dragSelection {
  border-width: var(--rst-drag-selection_border-width);
  border-style: var(--rst-drag-selection_border-style);
  border-color: var(--rst-drag-selection_border-color);
  border-radius: var(--rst-drag-selection_border-radius);
  background-color: var(--rst-drag-selection_background-color);
}
.rst-container .rst-pagination {
  color: var(--rst-pg_color);
  padding: var(--rst-pg_padding);
  grid-gap: var(--rst-pg_item-spacing);
}
.rst-container .rst-pagination .rst-page {
  padding: var(--rst-pg-page_padding);
  width: var(--rst-pg-page_width);
  border-radius: var(--rst-pg-page_border-radius);
  border-width: var(--rst-pg-page_border-width);
  border-style: var(--rst-pg-page_border-style);
  border-color: var(--rst-pg-page_border-color);
  color: var(--rst-pg-page_color);
  border-color: transparent;
}
.rst-container .rst-pagination button.rst-page {
  background-color: var(--rst-pg-page_background-color);
  border-color: var(--rst-pg-page_border-color);
  color: var(--rst-pg-page_color);
}
.rst-container .rst-pagination button.rst-page:hover {
  background-color: var(--rst-pg-page_background-color);
  background-color: var(--rst-pg-page_hover_background-color, var(--rst-pg-page_background-color));
  border-color: var(--rst-pg-page_border-color);
  border-color: var(--rst-pg-page_hover_border-color, var(--rst-pg-page_border-color));
  color: var(--rst-pg-page_color);
  color: var(--rst-pg-page_hover_color, var(--rst-pg-page_color));
}
.rst-container .rst-pagination button.rst-page[data-is-current] {
  background-color: var(--rst-pg-page_background-color);
  background-color: var(--rst-pg-page_current_background-color, var(--rst-pg-page_background-color));
  border-color: var(--rst-pg-page_border-color);
  border-color: var(--rst-pg-page_current_border-color, var(--rst-pg-page_border-color));
  color: var(--rst-pg-page_color);
  color: var(--rst-pg-page_current_color, var(--rst-pg-page_color));
}
.rst-container .rst-searchContainer {
  padding: var(--rst-search-container_padding);
  width: var(--rst-search-container_width);
}
.rst-container .rst-search {
  background-color: var(--rst-search_background-color);
  color: var(--rst-search_color);
  padding: var(--rst-search_padding);
  border-width: var(--rst-search_border-width);
  border-style: var(--rst-search_border-style);
  border-color: var(--rst-search_border-color);
  border-radius: var(--rst-search_border-radius);
  box-shadow: var(--rst-search_box-shadow);
  -moz-column-gap: var(--rst-search_item-spacing);
  column-gap: var(--rst-search_item-spacing);
}
.rst-container .rst-search input {
  border: none;
  outline: none;
  background: none;
}
.rst-container .rst-search .rst-matches {
  color: var(--rst-search-matches_color);
}
.rst-container .rst-search .rst-separator {
  border-right-width: var(--rst-search-separator_border-width);
  border-right-style: var(--rst-search-separator_border-style);
  border-right-color: var(--rst-search-separator_border-color);
}
.rst-container .rst-search button {
  line-height: 0;
  padding: var(--rst-search-btn_padding);
  border-width: var(--rst-search-btn_border-width);
  border-style: var(--rst-search-btn_border-style);
  border-color: var(--rst-search-btn_border-color);
  border-radius: var(--rst-search-btn_border-radius);
  background-color: var(--rst-search-btn_background-color);
}
.rst-container .rst-search button:hover {
  background-color: var(--rst-search-btn_background-color);
  background-color: var(--rst-search-btn_hover_background-color, var(--rst-search-btn_background-color));
  border-color: var(--rst-search-btn_border-color);
  border-color: var(--rst-search-btn_hover_border-color, var(--rst-search-btn_border-color));
}
.rst-container {
  --rst-placeholder_color: #616161;
  --rst-placeholder_padding: 1rem;
  --rst-placeholder_text-align: center;
  --rst-root-container_margin: 0 0 1rem 0;
  --rst-root-container_background-color: transparent;
  --rst-search-container_padding: 2px 12px 12px 2px;
  --rst-search-container_width: 400px;
  --rst-search_padding: 0.5rem 1rem;
  --rst-search_border-width: 1px;
  --rst-search_border-style: solid;
  --rst-search_border-color: rgba(163, 165, 165, 0.5);
  --rst-search_border-radius: 0.25rem;
  --rst-search_item-spacing: 0.75rem;
  --rst-search_background-color: #f7f7f7;
  --rst-search_color: #333333;
  --rst-search_box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  --rst-search-matches_color: #616161;
  --rst-search-separator_border-width: 1px;
  --rst-search-separator_border-style: solid;
  --rst-search-separator_border-color: rgba(97, 97, 97, 0.5);
  --rst-search-btn_padding: 0.35rem;
  --rst-search-btn_border-width: 0;
  --rst-search-btn_border-style: initial;
  --rst-search-btn_border-color: initial;
  --rst-search-btn_border-radius: 50%;
  --rst-search-btn_color: unset;
  --rst-search-btn_background-color: transparent;
  --rst-search-btn_hover_background-color: #dee2e6;
  --rst-search-btn_hover_border-color: unset;
  --rst-search-btn_hover_color: unset;
  --rst-cell_padding: 0.75rem;
  --rst-head_vertical-align: middle;
  --rst-head_text-align: left;
  --rst-head_background-color: #f7f7f7;
  --rst-head_color: #616161;
  --rst-head_icon-spacing: 0.25rem;
  --rst-head_border-width: 2px;
  --rst-head_border-style: solid;
  --rst-head_border-color: rgba(189, 197, 205, 0.5);
  --rst-head_resizing_border-image: repeating-linear-gradient(to right, var(--rst-head_border-color) 0px,var(--rst-head_border-color) 10px, transparent 10px, transparent 20px) 1 stretch;
  --rst-header_font-weight: bold;
  --rst-column-separator_width: 5px;
  --rst-column-separator_color: #89b363;
  --rst-column-resizer_width: 30px;
  --rst-column-resizer_resizing_border-width: 2px;
  --rst-column-resizer_resizing_border-style: solid;
  --rst-column-resizer_resizing_border-color: #a3a5a5;
  --rst-body_vertical-align: middle;
  --rst-body_text-align: left;
  --rst-body_background-color: transparent;
  --rst-body_color: #333333;
  --rst-body_resizing_opacity: 0.5;
  --rst-column_border-width: 2px;
  --rst-column_border-style: solid;
  --rst-column_border-color: #dee2e6;
  --rst-row_border-width: 1px;
  --rst-row_border-style: solid;
  --rst-row_border-color: #dee2e6;
  --rst-row_selected_border-color: #f5f5f5;
  --rst-row_selected_focused_border-color: unset;
  --rst-row_selected_background-color: rgba(167, 183, 155, 0.5);
  --rst-row_selected_focused_background-color: rgba(137, 179, 99, 0.5);
  --rst-row_selected_color: unset;
  --rst-row_selected_focused_color: unset;
  --rst-row_active_underline-width: 3px;
  --rst-row_active_underline-color: rgba(167, 183, 155, 0.875);
  --rst-row_active_focused_underline-color: rgba(137, 179, 99, 0.875);
  --rst-row_striped_overlay-color: rgba(175, 175, 175, 0.1);
  --rst-row_striped_color: unset;
  --rst-row_hover_overlay-color: rgba(175, 175, 175, 0.2);
  --rst-row_hover_color: unset;
  --rst-drag-selection_border-width: 1px;
  --rst-drag-selection_border-style: solid;
  --rst-drag-selection_border-color: rgba(137, 179, 99, 0.5);
  --rst-drag-selection_border-radius: 0.25rem;
  --rst-drag-selection_background-color: rgba(137, 179, 99, 0.25);
  --rst-pg_padding: 1rem;
  --rst-pg_item-spacing: 0.25rem;
  --rst-pg-page_padding: 0.25rem 0.5rem;
  --rst-pg-page_width: 1.25rem;
  --rst-pg-page_border-width: 0;
  --rst-pg-page_border-style: initial;
  --rst-pg-page_border-color: initial;
  --rst-pg-page_border-radius: 0.25rem;
  --rst-pg-page_background-color: transparent;
  --rst-pg-page_color: #616161;
  --rst-pg-page_hover_background-color: rgba(175, 175, 175, 0.2);
  --rst-pg-page_hover_color: unset;
  --rst-pg-page_hover_border-color: unset;
  --rst-pg-page_current_background-color: #c4d9b1;
  --rst-pg-page_current_color: unset;
  --rst-pg-page_current_border-color: unset;
}
@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
  .rst-container {
    --rst-head_resizing_border-image: repeating-linear-gradient(to right, var(--rst-head_border-color) 0px 10px, transparent 10px 20px) 1 stretch;
  }
}
.rst-container {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-clip-path: content-box;
  clip-path: content-box;
  height: 100%;
  box-sizing: border-box;
}
.rst-container table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.rst-body table,
.rst-head table {
  width: 100%;
}
.rst-spacer .rst-columnResizer {
  max-width: none;
  max-width: initial;
  transform: none;
}
.rst-search {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: column;
  align-items: center;
}
.rst-search .rst-separator {
  align-self: stretch;
}
.rst-searchContainer {
  position: absolute;
  z-index: 2;
  transition: transform 0.25s;
  transform: translateY(-100%);
}
.rst-searchContainer[data-is-visible] {
  transform: translateY(0);
}
.rst-scrollingContainer {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: auto;
  overflow: auto;
  touch-action: pan-x pan-y;
}
.rst-scrollingContainer[data-drag-mode=resize] {
  cursor: col-resize;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.rst-scrollingContainer[data-drag-mode=resize] .rst-body {
  max-width: 0;
  position: -webkit-sticky;
  position: sticky;
  left: calc(var(--rst-content-width) * -1);
}
.rst-scrollingContainer[data-drag-mode=resize] .rst-body .rst-spacer {
  width: 100vw;
}
.rst-scrollingContainer[data-drag-mode=select] {
  cursor: default;
}
.rst-scrollingContainer[data-is-placeholder-shown] .rst-clippingContainer {
  flex: none;
}
.rst-clippingContainer {
  flex: auto;
}
.rst-clippingContainer[data-is-clipping] {
  contain: paint;
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
}
.rst-clippingContainer[data-is-clipping] .rst-resizingContainer {
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
}
.rst-resizingContainer {
  contain: paint;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.rst-placeholder {
  flex: auto;
  box-sizing: border-box;
  width: 100%;
  left: -1px;
  margin-left: -1px;
  position: -webkit-sticky;
  position: sticky;
}
.rst-head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  margin: 0;
  z-index: 1;
}
.rst-head th {
  overflow: visible;
  position: relative;
}
.rst-chunk[data-is-hidden] {
  display: table-row;
  height: var(--rst-intrinsic-height);
}
.rst-chunk[data-is-hidden] > * {
  display: none;
}
.rst-body {
  flex: auto;
}
.rst-body td,
.rst-body th {
  overflow: hidden;
}
.rst-headerText {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.rst-headerContent {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.rst-headerContent .rst-icon {
  flex: 0 0 1rem;
}
.rst-header[data-is-sortable] .rst-headerContent {
  cursor: pointer;
}
.rst-columnResizer {
  position: absolute;
  top: 0;
  right: 100%;
  cursor: col-resize;
  touch-action: none;
  height: 100%;
  z-index: 3;
  max-width: 100%;
}
.rst-stoppers > * {
  overflow: hidden;
  height: 0;
}
.rst-clippingStopper {
  white-space: nowrap;
  line-height: 0;
}
.rst-clippingStopper > div {
  display: inline-block;
  height: 100%;
  background-color: darkcyan;
}
.rst-resizingStopper {
  background-color: darkred;
}
.rst-icon {
  height: 1rem;
  fill: currentColor;
}
.rst-loadingIcon {
  display: none;
}
.rst-loadingIcon[data-is-loading] {
  display: inline;
  display: initial;
}
.rst-loadingIcon[data-is-loading] + .rst-icon {
  display: none;
}
.rst-loading {
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.rst-dragSelection {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  contain: strict;
}
.rst-paginationContainer {
  flex: none;
}
.rst-pagination {
  display: grid;
  justify-content: start;
  grid-auto-flow: column;
}
.rst-page {
  text-align: center;
  box-sizing: content-box;
  color: inherit;
  display: block;
  line-height: 1.25rem;
}
.rst-page .rst-icon {
  vertical-align: text-top;
}
/*# sourceMappingURL=index.css.map */