@gravity-ui/uikit/build/cjs/components/lab/ListItemView/ListItemView.css

Gravity UI base styling and components

/* ListItemView CSS API
    --g-list-item-view-min-height
    --g-list-item-view-border-radius
    --g-list-item-view-padding-inline
    --g-list-item-view-padding-block
    --g-list-item-view-line-height
    --g-list-item-view-controls-gap
    --g-list-item-view-controls-size
    --g-list-item-view-controls-border-radius
    --g-list-item-view-controls-icon-size
    --g-list-item-view-spacer-size
    --g-list-item-view-background-color
    --g-list-item-view-background-color-hover
    --g-list-item-view-text-color
    --g-list-item-view-description-color
*/
.g-lab-list-item-view {
  /* Sizes */
  --_--min-height: var(--g-list-item-view-min-height, 28px);
  --_--border-radius: var(--g-list-item-view-border-radius, var(--g-border-radius-m));
  --_--padding-inline: var(--g-list-item-view-padding-inline, var(--g-spacing-2));
  --_--padding-block: var(--g-list-item-view-padding-block, var(--g-spacing-1));
  --_--line-height: var(--g-list-item-view-line-height, 18px);
  --_--controls-gap: var(--g-list-item-view-controls-gap, var(--g-spacing-1));
  --_--controls-size: var(--g-list-item-view-controls-size, 24px);
  --_--controls-border-radius: var(
      --g-list-item-view-controls-border-radius,
      var(--g-border-radius-s)
  );
  --_--controls-icon-size: var(--g-list-item-view-controls-icon-size, 16px);
  --_--spacer-size: var(--g-list-item-view-spacer-size, var(--_--controls-size));
  /* Colors */
  --_--background-color: var(--g-list-item-view-background-color, var(--g-color-base-fill));
  --_--background-color-hover: var(
      --g-list-item-view-background-color-hover,
      var(--g-color-base-simple-hover)
  );
  --_--background-color-disabled: var(
      --g-list-item-view-background-color,
      var(--g-color-base-fill)
  );
  --_--background-color-active: var(
      --g-list-item-view-background-color,
      var(--g-color-base-generic-medium)
  );
  --_--background-color-selected: var(
      --g-list-item-view-background-color,
      var(--g-color-base-selection)
  );
  --_--background-color-selected-hover: var(
      --g-list-item-view-background-color-hover,
      var(--g-color-base-selection-hover)
  );
  --_--text-color: var(--g-list-item-view-text-color, var(--g-color-text-primary));
  --_--text-color-disabled: var(--g-list-item-view-text-color, var(--g-color-text-hint));
  --_--description-color: var(
      --g-list-item-view-description-color,
      var(--g-color-text-secondary)
  );
  --_--nested-level: 0;
}

.g-lab-list-item-view {
  display: grid;
  box-sizing: border-box;
  grid-template: "drag-handle spacer collapsed-toggle checked start-content content     end-content" 1fr "drag-handle spacer collapsed-toggle checked start-content description end-content" auto/auto auto auto auto auto 1fr auto;
  align-items: center;
  min-height: calc(var(--_--min-height) + var(--_--description-min-height, 0px));
  border-radius: var(--_--border-radius);
  background: var(--_--background-color);
  color: var(--_--text-color);
  padding-inline: var(--_--padding-inline);
  padding-block: var(--_--padding-block);
  outline: none;
  font-family: var(--g-text-body-font-family);
  font-weight: var(--g-text-body-font-weight);
  font-size: var(--g-text-body-1-font-size);
  line-height: var(--g-text-body-1-line-height);
}
.g-lab-list-item-view_has-description {
  --_--description-min-height: 16px;
}
.g-lab-list-item-view__slot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--_--controls-gap);
  margin-block: calc(-1 * var(--_--padding-block));
}
.g-lab-list-item-view__slot:not(.g-lab-list-item-view__slot_name_spacer) + .g-lab-list-item-view__slot:not(.g-lab-list-item-view__slot_name_description, .g-lab-list-item-view__slot_name_spacer), .g-lab-list-item-view__slot:not(.g-lab-list-item-view__slot_name_spacer) + .g-lab-list-item-view__slot + .g-lab-list-item-view__slot_name_description {
  margin-inline-start: var(--_--controls-gap);
}
.g-lab-list-item-view__slot_name_drag-handle {
  grid-area: drag-handle;
  --g-button-height: var(--_--controls-size);
  --g-button-border-radius: var(--_--controls-border-radius);
  --g-button-background-color-hover: transparent;
}
.g-lab-list-item-view__slot_name_spacer {
  grid-area: spacer;
  width: calc(var(--_--spacer-size) * var(--_--nested-level));
  height: var(--_--controls-size);
}
.g-lab-list-item-view__slot_name_collapsed-toggle {
  grid-area: collapsed-toggle;
  --g-button-height: var(--_--controls-size);
  --g-button-border-radius: var(--_--controls-border-radius);
  --g-button-background-color-hover: transparent;
}
.g-lab-list-item-view__slot_name_checked {
  grid-area: checked;
}
.g-lab-list-item-view__slot_name_start-content {
  grid-area: start-content;
  height: 100%;
}
.g-lab-list-item-view__slot_name_content {
  grid-area: content;
  justify-content: flex-start;
  overflow: hidden;
  min-width: 3ch;
  line-height: var(--_--line-height);
  margin-block: 0;
}
.g-lab-list-item-view__slot_name_description {
  grid-area: description;
  justify-content: flex-start;
  overflow: hidden;
  min-width: 3ch;
  color: var(--_--description-color);
  line-height: var(--_--line-height);
  margin-block: 0;
}
.g-lab-list-item-view__slot_name_end-content {
  grid-area: end-content;
  height: 100%;
}
.g-lab-list-item-view__slot_name_container {
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.g-lab-list-item-view_size_s {
  --_--min-height: 24px;
  --_--border-radius: var(--g-border-radius-s);
  --_--padding-inline: var(--g-spacing-2);
  --_--padding-block: var(--g-spacing-half);
  --_--controls-gap: var(--g-spacing-2);
  --_--controls-size: 20px;
  --_--controls-border-radius: var(--g-border-radius-xs);
  --_--controls-icon-size: 12px;
}
.g-lab-list-item-view_size_m {
  --_--min-height: 28px;
  --_--border-radius: var(--g-border-radius-m);
  --_--padding-inline: var(--g-spacing-2);
  --_--padding-block: var(--g-spacing-1);
  --_--controls-gap: var(--g-spacing-2);
  --_--controls-size: 24px;
  --_--controls-border-radius: var(--g-border-radius-s);
  --_--controls-icon-size: 16px;
}
.g-lab-list-item-view_size_l {
  --_--min-height: 36px;
  --_--border-radius: var(--g-border-radius-l);
  --_--padding-inline: var(--g-spacing-2);
  --_--padding-block: var(--g-spacing-2);
  --_--controls-gap: var(--g-spacing-2);
  --_--controls-size: 28px;
  --_--controls-border-radius: var(--g-border-radius-m);
  --_--controls-icon-size: 16px;
}
.g-lab-list-item-view_size_xl {
  --_--min-height: 44px;
  --_--border-radius: var(--g-border-radius-xl);
  --_--padding-inline: var(--g-spacing-2);
  --_--padding-block: var(--g-spacing-3);
  --_--controls-gap: var(--g-spacing-2);
  --_--controls-size: 36px;
  --_--controls-border-radius: var(--g-border-radius-l);
  --_--controls-icon-size: 16px;
  font-family: var(--g-text-body-font-family);
  font-weight: var(--g-text-body-font-weight);
  font-size: var(--g-text-body-2-font-size);
  line-height: var(--g-text-body-2-line-height);
}
.g-lab-list-item-view_is-container {
  --_--padding-inline: 0;
  --_--padding-block: 0;
}
.g-lab-list-item-view:focus {
  --_--background-color: var(--_--background-color-hover);
}
.g-lab-list-item-view:hover {
  --_--background-color: var(--_--background-color-hover);
}
.g-lab-list-item-view_active {
  --_--background-color: var(--_--background-color-hover);
  --_--background-color-hover: var(--_--background-color-active);
}
.g-lab-list-item-view_selected {
  --_--background-color: var(--_--background-color-selected);
  --_--background-color-hover: var(--_--background-color-selected-hover);
}
.g-lab-list-item-view_disabled, .g-lab-list-item-view_disabled:hover, .g-lab-list-item-view_disabled:focus {
  --_--background-color: var(--_--background-color-disabled);
  --_--text-color: var(--_--text-color-disabled);
  --_--description-color: var(--_--text-color-disabled);
  outline: none;
}
.g-lab-list-item-view__arrow_direction_bottom {
  transform: rotate(0);
}
.g-lab-list-item-view__arrow_direction_top {
  transform: rotate(-180deg);
}
.g-lab-list-item-view__checked {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--_--controls-size);
  height: var(--_--controls-size);
  color: var(--g-color-base-brand);
}
.g-lab-list-item-view__icon {
  width: var(--_--controls-icon-size);
  height: var(--_--controls-icon-size);
}