@digitallinguistics/design/components/Note/Note.less

The design system for Digital Linguistics (DLx) projects.

@import (reference) 'utilities.less';

.note {

  @breakpoint: 20em;

  background-color: white;
  border          : var(--border);
  border-radius   : var(--border-radius);
  box-shadow      : var(--box-shadow);

  &__content {
    background-clip   : content-box;
    background-image  : repeating-linear-gradient(to bottom, white 0, white 1.65em, hsl(180, 100%, 35%) 1.65em, hsl(180, 100%, 35%) 1.75em);
    border-block-start: 0.2em solid hsla(0, 100%, 50%, 0.6);
    border-radius     : 0 0 var(--border-radius) var(--border-radius);
    min-block-size    : 3em;
    line-height       : 1.75;
  }

  &__header {
    padding: var(--space-xs);
  }

  &__label {
    color    : var(--gray);
    font-size: small;
  }

  &__metadata {
    flex-direction: column;
    gap           : var(--space-xs);
  }

  &__prop {
    flex-direction: column;
  }

  &__source {
    font-weight: bold;
    font-size  : smaller;
  }

  &__source-label {
    .visually-hidden;
  }

  &__text {
    padding-block-end: var(--space-xs);
    padding-inline   : var(--space-xs);
  }

  &__value {
    font-size: small;
  }

  @media (prefers-color-scheme: dark) {

    background-color: var(--background-color-dark);

    &__content {
      background-image  : repeating-linear-gradient(to bottom, var(--background-color-dark) 0, var(--background-color-dark) 1.65em, hsl(180, 100%, 30%) 1.65em, hsl(180, 100%, 30%) 1.75em);
      border-block-start: 0.2em solid hsla(0, 100%, 50%, 0.7);
    }

    &__label {
      color      : var(--text-color-dark);
      font-weight: 600;
    }

  }

  // large screens
  @media (min-width: @breakpoint) {
    &__metadata {
      flex-direction: row;
      gap           : var(--space);
    }
  }

}