prosemirror-flat-list/src/style.css

Powerful list support for ProseMirror

.prosemirror-flat-list {
  & {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 32px;
    margin-bottom: 0;
    position: relative;
    display: list-item;
    list-style: none;
  }

  &.ProseMirror-selectednode {
    outline: none;

    &:after {
      content: '';
      position: absolute;
      left: -32px;
      right: -2px;
      top: -2px;
      bottom: -2px;
      border: 2px solid #8cf;
      pointer-events: none;
    }
  }

  &[data-list-kind='bullet'] {
    list-style: disc;
  }

  &[data-list-kind='ordered'] {
    /*
    Ensure that the counters in children don't escape, so that the sub lists
    won't affect the counter of the parent list.

    See also https://github.com/ocavue/prosemirror-flat-list/issues/23
    */
    & > * {
      contain: style;
    }

    &::before {
      position: absolute;
      right: 100%;
      font-variant-numeric: tabular-nums;
      content: counter(prosemirror-flat-list-counter, decimal) '. ';
    }

    counter-increment: prosemirror-flat-list-counter;

    /* 
    Reset the counter for the first list node in the sequence.
    */
    &:first-child,
    :not(&) + & {
      counter-reset: prosemirror-flat-list-counter;

      /* 
      If the first list node has a custom order number, set the counter to that value.
      */
      &[data-list-order] {
        @supports (counter-set: prosemirror-flat-list-counter 1) {
          counter-set: prosemirror-flat-list-counter
            var(--prosemirror-flat-list-order);
        }

        /* 
        Safari older than version 17.2 doesn't support `counter-set` 
        */
        @supports not (counter-set: prosemirror-flat-list-counter 1) {
          counter-increment: prosemirror-flat-list-counter
            var(--prosemirror-flat-list-order);
        }
      }
    }
  }

  &[data-list-kind='task'] {
    & > .list-marker {
      position: absolute;
      right: 100%;
      text-align: center;
      width: 1.5em;
      width: 1lh;

      &,
      & * {
        cursor: pointer;
      }
    }
  }

  &[data-list-kind='toggle'] {
    & > .list-marker {
      position: absolute;
      right: 100%;
      text-align: center;
      width: 1.5em;
      width: 1lh;
    }

    & > .list-marker::before {
      content: '\23F7'; /* Black Medium Down-Pointing Triangle */
    }
    &[data-list-collapsable][data-list-collapsed] > .list-marker::before {
      content: '\23F5'; /* Black Medium Right-Pointing Triangle */
    }

    &[data-list-collapsable] > .list-marker {
      cursor: pointer;
    }
    &:not([data-list-collapsable]) > .list-marker {
      opacity: 40%;
      pointer-events: none;
    }

    /* If collapsed, hide the second and futher children */
    &[data-list-collapsable][data-list-collapsed]
      > .list-content
      > *:nth-child(n + 2) {
      display: none;
    }
  }
}