@lyra/form-builder/lib/inputs/BlockEditor/nodes/styles/ListItem.css

Lyra form builder

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

.root {
  width: auto;
  composes: xsmallToxSmall from './Spacing.css';
  margin-left: var(--large-padding);

  /* Important 'transform' in order to force refresh the ::before and ::after rules
     in Webkit: https://stackoverflow.com/a/21947628/831480
  */
  transform: translateZ(0);
}

.level-2 {
  margin-left: 3em;
}

.level-3 {
  margin-left: 6em;
}

.level-4 {
  margin-left: 9em;
}

.level-5 {
  margin-left: 12em;
}

.level-6 {
  margin-left: 16em;
}

.level-7 {
  margin-left: 18em;
}

.level-8 {
  margin-left: 21em;
}

.level-9 {
  margin-left: 24em;
}

.level-10 {
  margin-left: 27em;
}

.root > .item {
  display: table-row;
  margin: 0;
  padding: 0;
  width: 100%;

  @nest &:before {
    display: table-cell;
    vertical-align: top;
  }
}

/* Allow for cursor to show if item is empty */
.root > .item > * {
  padding-left: 0.01em;
}

.bullet {
  composes: root;

  @nest & > .item:before {
    content: '\25CF '; /* BLACK CIRCLE */
  }

  @nest &.level-2 > .item {
    @nest &:before {
      content: '\25CB '; /* WHITE CIRCLE */
    }
  }

  @nest &.level-3 > .item {
    @nest &:before {
      content: '\25A0 '; /* BIG BLACK SQUARE */
    }
  }

  @nest &.level-5 > .item {
    @nest &:before {
      content: '\25CB '; /* WHITE CIRCLE */
    }
  }

  @nest &.level-6 > .item {
    @nest &:before {
      content: '\25A0 '; /* BIG BLACK SQUARE */
    }
  }

  @nest &.level-8 > .item {
    @nest &:before {
      content: '\25CB '; /* WHITE CIRCLE */
    }
  }

  @nest &.level-9 > .item {
    @nest &:before {
      content: '\25A0 '; /* BIG BLACK SQUARE */
    }
  }
}

.number {
  composes: root;

  @nest &.level-1 {
    counter-increment: listItemNumber;
    counter-reset: listItemAlpha;
  }

  @nest &.level-2 {
    counter-increment: listItemAlpha;
    counter-reset: listItemRoman;
  }

  @nest &.level-3 {
    counter-increment: listItemRoman;
    counter-reset: listItemNumberNext;
  }

  @nest &.level-4 {
    counter-increment: listItemNumberNext;
    counter-reset: listItemLetterNext;
  }

  @nest &.level-5 {
    counter-increment: listItemLetterNext;
    counter-reset: listItemRomanNext;
  }

  @nest &.level-6 {
    counter-increment: listItemRomanNext;
    counter-reset: listItemNumberNextNext;
  }

  @nest &.level-7 {
    counter-increment: listItemNumberNextNext;
    counter-reset: listItemAlphaNextNext;
  }

  @nest &.level-8 {
    counter-increment: listItemAlphaNextNext;
    counter-reset: listItemRomanNextNext;
  }

  @nest &.level-9 {
    counter-increment: listItemRomanNextNext;
    counter-reset: listItemNumberNextNextNext;
  }

  @nest &.level-10 {
    counter-increment: listItemNumberNextNextNext;
  }

  @nest & + :not(.number) {
    counter-reset: listItemNumber;
  }

  @nest &.level-2 > .item {
    @nest &:before {
      content: counter(listItemAlpha, lower-alpha) '. ';
    }
  }

  @nest &.level-3 > .item {
    @nest &:before {
      content: counter(listItemRoman, lower-roman) '. ';
    }
  }

  @nest &.level-4 > .item {
    @nest &:before {
      content: counter(listItemNumberNext) '. ';
    }
  }

  @nest &.level-5 > .item {
    @nest &:before {
      content: counter(listItemLetterNext, lower-alpha) '. ';
    }
  }

  @nest &.level-6 > .item {
    @nest &:before {
      content: counter(listItemRomanNext, lower-roman) '. ';
    }
  }

  @nest &.level-7 > .item {
    @nest &:before {
      content: counter(listItemNumberNextNext) '. ';
    }
  }

  @nest &.level-8 > .item {
    @nest &:before {
      content: counter(listItemAlphaNextNext, lower-alpha) '. ';
    }
  }

  @nest &.level-9 > .item {
    @nest &:before {
      content: counter(listItemRomanNextNext, lower-roman) '. ';
    }
  }

  @nest &.level-10 > .item {
    @nest &:before {
      content: counter(listItemNumberNextNextNext) '. ';
    }
  }
}

.number > .item {
  @nest &:before {
    min-width: 1.6em;
    content: counter(listItemNumber) '. ';
  }
}