@gravity-ui/uikit/build/esm/components/DefinitionList/DefinitionList.css

Gravity UI base styling and components

.g-definition-list {
  --_--item-block-start: var(--g-spacing-4);
  --_--term-width: 300px;
  margin: 0;
}
.g-definition-list__item {
  display: flex;
  align-items: baseline;
  gap: var(--g-spacing-1);
}
.g-definition-list__item + .g-definition-list__item {
  margin-block-start: var(--g-definition-list-item-gap, var(--_--item-block-start));
}
.g-definition-list__term-container {
  display: flex;
  flex: 0 0 auto;
  width: var(--_--term-width);
  max-width: var(--_--term-width);
  align-items: baseline;
  overflow: hidden;
  position: relative;
}
.g-definition-list__term-wrapper {
  color: var(--g-color-text-secondary);
}
.g-definition-list__dots {
  box-sizing: border-box;
  flex: 1 0 auto;
  min-width: 25px;
  margin: 0 2px;
  border-block-end: 1px dotted var(--g-color-line-generic-active);
}
.g-definition-list__definition {
  flex: 0 1 auto;
  margin: 0;
}
.g-definition-list_responsive .g-definition-list__term-container {
  --_--term-width: auto;
  flex: 1 0 min-content;
}
.g-definition-list_vertical {
  --_--item-block-start: var(--g-spacing-3);
  --_--term-width: auto;
}
.g-definition-list_vertical .g-definition-list__term-container {
  flex: 1 0 auto;
}
.g-definition-list_vertical .g-definition-list__item {
  flex-direction: column;
  gap: var(--g-spacing-half);
}
.g-definition-list__copy-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-inline-end: var(--g-spacing-7);
  margin-inline-end: calc(-1 * var(--g-spacing-7));
}
.g-definition-list__copy-container:hover .g-definition-list__copy-button {
  opacity: 1;
}
.g-definition-list__copy-button {
  position: absolute;
  display: inline-block;
  inset-inline-end: 0;
  margin-inline-start: 10px;
  opacity: 0;
}
.g-definition-list__copy-button:focus-visible {
  opacity: 1;
}
.g-definition-list__note {
  vertical-align: middle;
}