@lyra/components/lib/validation/styles/ValidationListItem.css

Basic UX components

@import 'part:@lyra/base/theme/variables-style';

.item {
  display: flex;
  margin: 0;
  flex-grow: 1;
  align-items: center;
  width: 100%;
  padding: var(--small-padding);
  cursor: pointer;
  box-sizing: border-box;
  outline: none;
}

.error {
  color: var(--state-danger-color);

  @nest &:focus {
    background-color: color(var(--state-danger-color) a(15%));
  }

  @nest &:not(:last-child) {
    border-bottom: 1px solid color(var(--state-danger-color) a(10%));
  }
}

.warning {
  color: var(--state-warning-color);

  @nest &:hover, &:focus {
    background-color: color(var(--state-warning-color) a(10%));
  }

  @nest &:not(:last-child) {
    border-bottom: 1px solid color(var(--state-warning-color) a(10%));
  }
}

.interactiveItem {
  composes: item;
  border-radius: var(--border-radius-small);

  @nest &.error:hover {
    background-color: color(var(--state-danger-color) a(10%));
  }
}

.icon {
  display: block;
  padding: var(--medium-padding);
  padding-right: var(--large-padding);
}

.content {
  display: block;
  padding-right: 2em;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.path {
  display: block;
  text-transform: uppercase;
  font-size: var(--font-size-xsmall);
}

.message {
  font-size: var(--font-size-base);
}

.link {
  cursor: pointer;
  text-align: right;
  display: block;
  margin-left: auto;
  text-decoration: underline;
  white-space: nowrap;
  padding-right: var(--medium-padding);
}