golden/modules/corpus-selector-sk/corpus-selector-sk.scss

@import '~elements-sk/colors';

corpus-selector-sk {
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }

  li {
    // This invisible border prevents vertical flickering when the <ul> wraps
    // into multiple lines and the user selects a corpus in a different line.
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: block;
    margin: 0 1em;
    padding: 0.5em 0;

    &.selected {
      border-bottom: 2px solid;
      font-weight: bold;
    }

    // Normally the li's width would increase when the "selected" class is
    // applied, which makes its inner text bold. This would make the corpus bar
    // "flicker" every time the user clicks on a different corpus.
    //
    // To prevent this, a pseudo-element is added to the li with the same
    // contents but in bold text. The pseudo-element has zero height but
    // non-zero width, which makes it effectively invisible, but with the effect
    // of stretching the li to the width it would be if its contents were in
    // bold text.
    //
    // See https://stackoverflow.com/a/32570813.
    &::after {
      content: attr(title); // The "title" attribute match the li's contents.
      display: block;
      font-weight: bold;
      height: 0;
      overflow: hidden;
      visibility: hidden;
    }
  }
}