open-nomad/ui/app/styles/storybook.scss

#storybook {
  .mock-content {
    display: flex;
    min-height: 250px;
    height: 100%;

    .mock-image,
    .mock-copy {
      min-height: 100%;
      width: 100%;
      margin: 1em;
    }

    .mock-image {
      background: linear-gradient(
          to top right,
          transparent 0%,
          transparent 49%,
          $grey-blue 49%,
          $grey-blue 51%,
          transparent 51%,
          transparent 100%
        ),
        linear-gradient(
          to bottom right,
          transparent 0%,
          transparent 49%,
          $grey-blue 49%,
          $grey-blue 51%,
          transparent 51%,
          transparent 100%
        );
    }

    .mock-copy {
      background: repeating-linear-gradient(
        to bottom,
        $grey-blue,
        $grey-blue 5px,
        transparent 5px,
        transparent 14px
      );
    }

    .mock-vague {
      background: lighten($grey-blue, 15%);
      width: 100%;
      height: 100%;
    }
  }

  .mock-spacing {
    padding: 2em;
  }

  .annotation {
    padding: 1rem 0;
    font-size: 0.9rem;
  }

  .palette {
    .title {
      font-size: 1.4rem;
      font-weight: $weight-bold;
      padding-bottom: 2px;
      padding-top: 10px;
    }

    .description {
      font-size: 0.8rem;
      padding-bottom: 5px;
    }

    .item {
      border: solid 1px $grey-blue;
      display: inline-block;
      margin: 0 5px 5px 0;

      .color {
        height: 90px;
        width: 160px;
      }

      .info {
        background-color: white;
        border-top: solid 1px $grey-blue;
        padding: 5px;
      }

      .hex {
        font-size: 12px;
        font-weight: $weight-bold;
        margin-bottom: 0;
      }

      .name {
        color: $ui-gray-500;
        font-size: 11px;
        margin-top: 0;
      }
    }
  }

  .typeface {
    .hero,
    .sample {
      font-family: inherit;
    }

    .hero {
      font-size: 140px;
      line-height: 1.05;
    }

    .sample {
      font-size: 15px;
      margin: 0;
    }
  }

  .multiples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    &.with-spacing {
      > * {
        margin-right: 1em;
        margin-bottom: 1em;
      }
    }

    &.is-left-aligned {
      justify-content: flex-start;
    }
  }

  .chart-container {
    width: 200px;
    padding: 15px;
    border: 1px solid $ui-gray-200;
    display: inline-block;

    &.is-small {
      width: 150px;
    }

    &.is-large {
      width: 250px;
    }

    &.is-xlarge {
      width: 300px;
    }
  }

  .tile-list {
    display: flex;
    flex-wrap: wrap;

    .icon-tile {
      width: 240px;
      padding: 10px;
      margin: 10px;
      border: 1px solid $grey-lighter;
      border-radius: $radius;
      svg {
        margin: auto;
        width: 30px;
        height: 30;
        fill: $grey;
        color: $grey;
      }
    }
  }

  .mock-hover-region {
    width: 200px;
    height: 100px;
    position: relative;
    border-radius: $radius;
    margin: 1em 0;
    padding: 1em;
    border: 1px solid $grey-blue;
    background: $white-ter;
    color: $grey;
    font-weight: $weight-bold;
  }

  .title:not(:first-child) {
    margin-top: 2em;
  }
}